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

前端工程师,曾经在微软、盛大工作,现在为阿里巴巴工作。主要的工作内容是手机淘宝上的各种页面。早年做过嵌入式系统浏览器、电子书和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.