极光前端开发组 2017/09/09bos.itdks.com/5c9faeed492d43f0b32752c4c7891d46.pdf• angular2特点...
TRANSCRIPT
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优化之路
• 其它
© JIGUANG. Confidential. All Rights Reserved. 3
前端发展和现状
浏览器兼容性
Why Angular
背景
© JIGUANG. Confidential. All Rights Reserved. 4
前端历史不长,发展很迅速
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操作
© JIGUANG. Confidential. All Rights Reserved. 5
From NetMarketShare
- 抛弃IE 8 -2014 Angular.js >= 1.3 2016 React.js >= v15Vue.js 诞生以来微软 Edge
© JIGUANG. Confidential. All Rights Reserved. 6
Why Angular ?
学习曲线:Vue 和 Angular
© JIGUANG. Confidential. All Rights Reserved. 7
历史原因:Angular 1.x
© JIGUANG. Confidential. All Rights Reserved. 8
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
© JIGUANG. Confidential. All Rights Reserved. 9
• 完全推翻 重写• AngularJS -> Angular
• Why ?• 脏检查• $scope对象设计混乱(变量,事件派发,脏值观测)• Controller功能太过弱化• Provider体系太复杂( Provider、Service、Factory、Decorator、Value、Constant )• 手机兼容(设计早,当时移动未火)
© JIGUANG. Confidential. All Rights Reserved. 10
• AngularJS -> Angular
• Angular2 • 引入 TypeScript• Web Component• 单向数据流• 高效的变化检测机制(Zone.js)
• 异步 – 数据变化 • 主动 -> 被动
• Service• 更好的平台兼容性• 更现代的框架
© JIGUANG. Confidential. All Rights Reserved. 11
• 【Round 1】
• ng-upgrade:官方,加载两个核• ng-forward:用ng2的style写ng1。停止维护
© JIGUANG. Confidential. All Rights Reserved. 12
• 【Round 2】
• 通用编译配置• TypeScript 改写• Component迁移(controller,directive,pipe等)• Service迁移• HTML绑定语法改写
© JIGUANG. Confidential. All Rights Reserved. 13
编译、打包
发布
AOT编译模式
How do we use it ?
• 官方:Angular cli• 创建项目骨架 (ng new foo )• 创建组件 (ng generate component bar)• 测试 (ng test)• 运行开发环境 ng serve• 打包 (ng build)• …
• 太复杂,可定制性比较低,不够灵活
• Gulp + Webpack
© JIGUANG. Confidential. All Rights Reserved. 14
• Gulp + Webpack
• TypeScript编译
• 开发环境、测试环境、QA环境、生产环境
• HMR
• 懒加载、预加载 ,及打包的拆分
• CDN 分环境上传
• 更新代码里的资源地址
• 推送到CI系统,触发自动发布
© JIGUANG. Confidential. All Rights Reserved. 15
• 打包、整合、压缩、上传…
• 最后只剩下 index.html
• Gitlab持续集成 (> 8.0)
• Docker
• 镜像
• 推到各主机
• 滚动更新
© JIGUANG. Confidential. All Rights Reserved. 16
• Angular 2版本,AOT坑巨多
• Angular 4成熟一些
• JIT (just-in-time) vs AOT (Ahead-of-time)• 运行时 vs 编译时• Angular compiler (占了框架一半大小)• 提前发现绑定错误等• 安全性
© JIGUANG. Confidential. All Rights Reserved. 17
© JIGUANG. Confidential. All Rights Reserved. 18
Why ?
.d.ts定义文件
jpush-ui组件套装
pager组件
• 各项目有自己的组件(自己开发、第三方)
• 各自踩坑
• 可能其它人写过,或有更好的第三方组件
• 第三方组件不好扩展
• 各库要引入各种js和css
• …
© JIGUANG. Confidential. All Rights Reserved. 19
前端项目开发,一半的时间做UI和交互逻辑,另一半的时间踩坑、fix bug
• 怎么引入共用组件• Copy 代码 ?• Git 更新?• 私有npm registry ?
• 编译后的JavaScript?还是TypeScript源码?
• tsc -> ngc
© JIGUANG. Confidential. All Rights Reserved. 20
• Developing…
• 从项目中来
• 到项目中去验证
• 不断调整 -> 最易用
• 不只是UI-kit …
© JIGUANG. Confidential. All Rights Reserved. 21
• 缓存问题
© JIGUANG. Confidential. All Rights Reserved. 22
1~50
20~301~10
1~20
1~40
每页10,打开第1和第3页
此时,每页20,打开第1页
但如果每页40呢?
10~20
10~40
• 数据缓存算法(缓存控制器)
• 内置当前页数据(list -> 当前页,不需要监听事件去更新)
• 数据删除控制(当前删除自动补全,当页删完自动换页 …)
© JIGUANG. Confidential. All Rights Reserved. 23
© JIGUANG. Confidential. All Rights Reserved. 24
Zone.js
Table优化之路
其它
• NgZone
• 异步钩子(event、setTimeout、XHR、promise/Rxjs 等等)
• 被动触发更新,不需要一遍遍的扫描
• 自定义检测器
© JIGUANG. Confidential. All Rights Reserved. 25
• 大且复杂• 很多列• 很多行• 表头要固定• 要左右滑动• 每行要可以展开• 每个展开里还有很多详情信息和各种布局• 两边的列要固定,中间可滚动
• 第三方组件,改不动
© JIGUANG. Confidential. All Rights Reserved. 26
• 动画上做优化
• 产品层面去掉能去掉的东西
• 把行展开的内容 移到表格外
• 重写表格组件
• 还是卡 …
© JIGUANG. Confidential. All Rights Reserved. 27
• 从ngZone上切入
• 在ngZone外运行,runOutsideAngular
• 接管Angular 的变化检测
© JIGUANG. Confidential. All Rights Reserved. 28
• Angular -> 现代框架
• 服务端渲染(Angular Universal)
• Native App开发(Angular Nativescript / ionic-angular)
© JIGUANG. Confidential. All Rights Reserved. 29
© JIGUANG. Confidential. All Rights Reserved. 30