一些零碎的总结:关于一个Progressive App示例

#1

看这篇文章的总结

http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org

文章本身的关注点集中在性能上,不过项目即使放在更广泛的话题中也让人激动。
下面是个人的关注点列表+个人理解。难免有理解错误,欢迎展开讨论。

技术

Web Worker:总之,前端终于有线程可用了。支持度还不错
Service Worker: 专门用来缓存的Worker。支持度着急,不过功能和可控性都非常棒。
PouchDB:一个可以轻松跟后端同步的前端数据库。看起来是CRUD类型应用(也就是大部分Web应用)的绝配。
virtual-dom:功能和React相似的工具集,比React更松散灵活一些。例如,创建虚拟dom和元素、计算tree diff、应用tree diff的过程是暴露出来手动进行的。这也就允许把这些过程放在不同的Worker中
FLIP:结合心理学和浏览器渲染机制实现平滑动画的方法

技术思路差不多是:

  1. 平滑的界面动画需要每个主线程上的计算在16毫秒内完成(以实现60FPS的动画)
  2. 将计算密集的逻辑放到其他线程(Worker)中执行。包括Web Worker和Service Worker
  3. 使用PunchDB实现离线数据的存储和同步
  4. 将virtual-dom的diff计算和diff应用放在不同的线程上(主线程只负责把diff应用到dom上)
  5. 在主线程大部分计算已经被分担到Worker的前提下,使用FLIP实现平滑动画

其他

Microservices:虽然是为了性能考虑,但是确实有将不同职责的代码的执行空间分开到Worker中。
Progressive App:RN使用Web技术开发本地应用,Hybrid App在本地应用中嵌入Web,而Progressive App是使用普通Web应用达到本地应用效果的尝试
Degradation:随着应用复杂程度增加,前端的异常需要被认真对待了

1 Like
#2

之前 React 有计算的时候一直卡,现在知道该用 Web Worker 了。

所谓 FLIP , 这边还有很多介绍:前端外刊评论

#3

原文无关。贴个图