Twitter Lite发布之后,对渐进式编程提供了一个非常棒的实例。我们组之前就在计划把整个前端框架转移到react 开发栈,目的就是为了更好的性能。今天的学习笔记来源于https://blog.twitter.com/2017/how-we-built-twitter-lite
那么问题就来了,什么样的web app才是优秀的呢?
首先运行加载要快,最基本要满足响应式布局(responsive), 中级一点的就是能够优化数据,减少存储使用,能够解决离线网络问题,再多功能的话就是支持后台提示功能。这里要强调一点就是可获得性,尤其是当用户所在的网络环境不好的时候,如何提供基本的服务,如何及时提醒用户请求失败,并且提供重新发送请求的选择。
为了完成这些,Twitter家用的前端栈如下:
使用Babel将ES2015以及更高版本的JavaScript转换成低级版本,以提高稳定性。
使用Webpack来进行编译打包
使用Normalizr来处理API传过来的JSON数据,转换成更符合要求的数据格式
使用Redux来存储和抽取数据
使用React来构建UI
使用Globalize来完成本地化
使用Jess和WebdriverIO作为测试
使用Yarn作为包管理
Twitter Lite将渲染工作分成一个个小模块,把最关键的部分先进行渲染,不关键的部分在空闲的时候再进行渲染。使用UI component还有的好处就是能够快速迭代,帮助设计团队和开发团队更有效率进行协作。