极光前端开发组 2017/09/09bos.itdks.com/5c9faeed492d43f0b32752c4c7891d46.pdf• Angular2特点 • Rxjs • 迁移 • 前端发展和现状 • 浏览器兼容性 • Why Angular

2017/09/09

极光前端开发组

© JIGUANG. Confidential. All Rights Reserved. 2

01组队：背景及铺垫

Part 02打怪：Angular踩坑

Part

• Angular历史

• 从1到2

• Angular2特点

• Rxjs

• 迁移

• 前端发展和现状

• 浏览器兼容性

• Why Angular

• 背景

03升级：优化

Part

• 编译、打包

• 发布

• AOT的编译模式

04组件化之路

Part

• Why ?

• .d.ts定义文件

• jpush-ui组件套装

• pager组件

05深入一点

Part

• Zone.js

• Table优化之路

• 其它


前端发展和现状

浏览器兼容性

Why Angular

背景


前端历史不长，发展很迅速

2004-2005 Google + Ajax

2006 jQuery 等工具库 -- DOM操作

2008 v8

2009 Node.js CommonJS 模块化

2010 AMD

• Backbone.js / knockout / Can.js / ember.js

• Angular.js 第一版本

• MVC

• SPA前后端分离

2013 React.js

2014 Vue.js去掉DOM操作


From NetMarketShare

- 抛弃IE 8 -2014 Angular.js >= 1.3 2016 React.js >= v15Vue.js 诞生以来微软 Edge


Why Angular ?

学习曲线：Vue 和 Angular


历史原因：Angular 1.x


Angular历史

从1到2

Angular2特点

迁移

• 最早由谷歌员工业余创建的（2009）• 后由谷歌专门的团队维护（2010 第一版本）• 2012年 1.0正式版

• 1.2版本放弃IE 6/7• 1.3版本放弃IE 8• 1.5版本引入 Web Component概念

• 2016年 Angular 2.0• 2017年3月 4.0 • 9月 5.0


• 完全推翻重写• AngularJS -> Angular

• Why ?• 脏检查• $scope对象设计混乱（变量，事件派发，脏值观测）• Controller功能太过弱化• Provider体系太复杂（ Provider、Service、Factory、Decorator、Value、Constant ）• 手机兼容（设计早，当时移动未火）


• AngularJS -> Angular

• Angular2 • 引入 TypeScript• Web Component• 单向数据流• 高效的变化检测机制（Zone.js）

• 异步 – 数据变化 • 主动 -> 被动

• Service• 更好的平台兼容性• 更现代的框架


• 【Round 1】

• ng-upgrade：官方，加载两个核• ng-forward：用ng2的style写ng1。停止维护


• 【Round 2】

• 通用编译配置• TypeScript 改写• Component迁移（controller，directive，pipe等）• Service迁移• HTML绑定语法改写


编译、打包

发布

AOT编译模式

How do we use it ?

• 官方：Angular cli• 创建项目骨架（ng new foo )• 创建组件（ng generate component bar）• 测试（ng test）• 运行开发环境 ng serve• 打包（ng build）• …

• 太复杂，可定制性比较低，不够灵活

• Gulp + Webpack


• Gulp + Webpack

• TypeScript编译

• 开发环境、测试环境、QA环境、生产环境

• HMR

• 懒加载、预加载，及打包的拆分

• CDN 分环境上传

• 更新代码里的资源地址

• 推送到CI系统，触发自动发布


• 打包、整合、压缩、上传…

• 最后只剩下 index.html

• Gitlab持续集成（> 8.0）

• Docker

• 镜像

• 推到各主机

• 滚动更新


• Angular 2版本，AOT坑巨多

• Angular 4成熟一些

• JIT （just-in-time） vs AOT （Ahead-of-time）• 运行时 vs 编译时• Angular compiler （占了框架一半大小）• 提前发现绑定错误等• 安全性



Why ?

.d.ts定义文件

jpush-ui组件套装

pager组件

• 各项目有自己的组件（自己开发、第三方）

• 各自踩坑

• 可能其它人写过，或有更好的第三方组件

• 第三方组件不好扩展

• 各库要引入各种js和css

• …


前端项目开发，一半的时间做UI和交互逻辑，另一半的时间踩坑、fix bug

• 怎么引入共用组件• Copy 代码？• Git 更新？• 私有npm registry ？

• 编译后的JavaScript？还是TypeScript源码？

• tsc -> ngc


• Developing…

• 从项目中来

• 到项目中去验证

• 不断调整 -> 最易用

• 不只是UI-kit …


• 缓存问题


1~50

20~301~10

1~20

1~40

每页10，打开第1和第3页

此时，每页20，打开第1页

但如果每页40呢？

10~20

10~40

• 数据缓存算法（缓存控制器）

• 内置当前页数据（list -> 当前页，不需要监听事件去更新）

• 数据删除控制（当前删除自动补全，当页删完自动换页 …）



Zone.js

Table优化之路

其它

• NgZone

• 异步钩子（event、setTimeout、XHR、promise/Rxjs 等等）

• 被动触发更新，不需要一遍遍的扫描

• 自定义检测器


• 大且复杂• 很多列• 很多行• 表头要固定• 要左右滑动• 每行要可以展开• 每个展开里还有很多详情信息和各种布局• 两边的列要固定，中间可滚动

• 第三方组件，改不动


• 动画上做优化

• 产品层面去掉能去掉的东西

• 把行展开的内容移到表格外

• 重写表格组件

• 还是卡 …


• 从ngZone上切入

• 在ngZone外运行，runOutsideAngular

• 接管Angular 的变化检测


• Angular -> 现代框架

• 服务端渲染（Angular Universal）

• Native App开发（Angular Nativescript / ionic-angular）



Documents

极光前端开发组 2017/09/09bos.itdks.com/5c9faeed492d43f0b32752c4c7891d46.pdf• Angular2特点 • Rxjs • 迁移 • 前端发展和现状 • 浏览器兼容性 • Why Angular