申请试用
HOT
登录
注册
 
浅谈前端交互的基础设施的建设
青色的海牛
/
发布于
/
2155
人观看
前端工程师,曾经在微软、盛大工作,现在为阿里巴巴工作。主要的工作内容是手机淘宝上的各种页面。早年做过嵌入式系统浏览器、电子书和WebOS,近年在移动前端领域摸爬滚打,提出过Flexible布局之类概念,团队也曾产出了Weex这样的Web开发体验开发Native的方案,现在负责Weex上的两个DSL:vue和rax。
展开查看详情

1 .浅谈前端交互的基础设施的建设 winter

2 .UI架构的演变 MVC(1970s) MVP(1990s) MVVM(2005) FLUX(2014) REDUX(2015)

3 .用户的界面也在同时发展 MVC(1970s) MVP(1990s) MVVM(2005) FLUX(2014) REDUX(2015)

4 .视图的职责在演变 MVC(1970s) MVP(1990s) MVVM(2005) FLUX(2014) REDUX(2015) A view should never know about user input, such as mouse operations and keystrokes. —— Trygve Reenskaug, December 1979 View Model View Model Controller

5 . 计算机的功能也在演变 MVC(1970s) MVP(1990s) MVVM(2005) FLUX(2014) REDUX(2015) Internet View Models View Models 1970s: Computer is used to computing 2018: Computer is used to access network

6 .视图技术变得越来越复杂 DSL XAML JSX HTML UI Framework GDI WPF DOM Draw skia graphics.h 3d engines GL Open GL DirectX Vulkan metal Drivers and hardware

7 .淘宝终端技术 Components Taobao Components UI DSL Vue Rax UI Framework weex Draw GCanvas

8 .交互的本质抽象 input output output Events Properties touch-screen transform gyroscope opacity time color …… ……

9 .交互的设计——Expression input output output Events Properties touch-screen transform gyroscope Expression opacity RTC color …… ……

10 .输入具有复杂性 drag touch gesture scroll time animation

11 . Touch vs Gesture Pan Pan Pan Start Move End 手指移 动10px Touch 手指离 Tap Start 开 手指移 手指接 触触屏 动10px 超过1.5s Press Press Start End

12 .Scroll

13 .Binding —— input 空间上任何一个点可以通过四元素进行旋转 因此我们的2d场景可以当做是3d的一个平面 投影,因此我们通过固定z轴进行获取水平x 方向的值,固定x轴获取垂直y方向的值

14 .Native-JS模式的问题 Gesture Handler VDOM Compare JS Native Gesture Real Element ×N

15 .Binding模式 Expression VDOM Sync JS Native Gesture Real Element ×N

16 .性能对比

17 .淘宝终端交互技术 Taobao Components tab carrousel slider …… Vue Rax BindingX weex Web react native GCanvas

18 .更多想象空间 Binding 和 矢量图 Binding 和 Shader

19 .

24 点赞
6 收藏
1下载
相关文档
确认
3秒后跳转登录页面
去登陆