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

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 .