2017
开场简介 vUE 2017 现况和展望
- 起源
- 重构 (2.0 API保持向后兼容，渲染层重写)
- Just a view layer library
- 渐进式框架（框架内容分层，插件系统）
- 社区项目活跃
- 又吹了一波Anders帮Vue写非Class下this类型推导 2333
- 服务端渲染 & 代码分割 （ssr.vuejs.org）
- VUE1 & VUE2 区别， VUE2 以组件为边界创建watcher
Vue 2.4
- Code Name: K??
- 更好的 TypeScript 整合
- SSR性能进一步优化
通过编译时优化获得2-8x性能提升
- SSR + Webpack Code Split (不再局限路由)
- VUE CLI升级
配置依赖化 + 可组合
PWA by default
一个模板 不同参数 (--ts, --ssr)
长期展望
- 单文件组件的CSS改进
- 基于Proxy的响应式系统重构
不再需要Object.defineProperty
Lazy observation
显式构建响应式对象
- HTML component
No1. Vue SSR和API Proxy层深度实践
Vue本身是前端框架，它目前跟服务器唯一的关联就是SSR，基于Stream的Bigpipe实现，虽说是旧瓶装新酒，但还是有很多人不了解其中原理。另外对于Vue项目来说，与后端Api对接、（Spa、大首页）等有没有更好的实践呢？后端Api目前也极为混乱，各种语言、各种实现，真的适合前端么？大家辛苦了，狼叔最懂你。
- 讲解Vue SSR原理
- 分析Node.js现状，以及2017年趋势预测
- 举例大首页常见做法，引出Api层诸多思考
- API Proxy层深度实践
- Vue 与 API Proxy如何完美组合
分析NODE.JS 现状
- 前端和Node之间的边界其实已经比较模糊了
- 跨平台 (Hybird、PC、移动、Web端)，应用分发渠道丰富
- 异步IO 与 并发
- 作为工具链的补充
No1. Vue SSR和API Proxy层深度实践
- 分析Node现状
- Vue的SSR
- API Proxy整合
异步流程控制
- Promise
- Generator
- Async / Await
吐槽：扯了一些Await的缺点，然后2017年了居然不提Rxjs ?
2017年流行趋势
- PWA
- SSR
- API Proxy
- Isomorphic
吐槽： 就PWA还算未来，别的都老调重提了
VUE的ssr
- bundle render
- streaming / BigPipe
- cache
- 内置service-worker
BigPipe
- Transfer-Encoding: chunked
- Pagelet
- 渐进式前端渲染 (结合墓碑系统，风味更好)
P.S.: 微博在2011年对PC端进行了BigPipe改造，以至于多年以后，PC端都只需要1个前端来维护
Cache 缓存
- 编译缓存
- LRU
- 越来越后端
Isomorphic
- 模糊前后端边界
- 全栈是个好词
Mmmm：全栈这个词其实可攻可受
API Proxy
- 一个页面API非常多
- 跨部门
- 跨域
- API返回的数据对前端不友好
- 需求决定API，但API有可能是不及时的
API Proxy
- 详情请见 淘宝13年推出的Midway，支付宝推出的Chairs等项目
- 记录Request / Response
- 对Response做api反向检查
吐槽：这事儿基于各种CI、集成、回归不都可以避免吗？
No2. 用比较性思维谈工程化在Vue.js的优雅设计
作为多个前端流行框架（Polymer、Angular1和Angular2、React以及Riot等）的深度研究和应用定制开发者，本分享更多期望从工程化和工具方向的对比思考，来带大家一起深入地看一下它在Vue.js的优雅设计。
- Vue在工程化方案带给我们的思考
- Vue-loader的设计实现思考
- 如何用工具来管理Vue.js的组件开发生态
- rollup在Vue.js的应用
- Flow在Vue.js的应用同时也对比Angular2选择ts来编写的一些思考
- Web Components方向的框架是如何利用工具来进行合并和依赖管理的
- 通过工具和脚本代码来支持异步和动态组件注册和载入区别和实战思考
No2. 用比较性思维谈工程化在Vue.js的优雅设计
- Vue.js 比 jQuery 好学吗
DOM manipulation VS Template declaration
- Vue工程化工具的演进
yo
vue-cli
No2. 用比较性思维谈工程化在Vue.js的优雅设计
- 接下来半小时
讲师带我们领略了webpack & webapck plugins & babel & eslint....，然而和vue基本没什么关系。
No2. 用比较性思维谈工程化在Vue.js的优雅设计
本来我觉得我们工程化做的还不够，但看完这个演讲后，我觉得我们工程化做的比95%的公司要好
No3. 掘金 Vue.js 2.0 后端渲染及重构实践
- 掘金的 Web 端产品架构
- 2.0 升级重构中的实践问题
- 后端渲染、组建资源 CDN 部署
- 期待 Vue.js 的功能和一些实践思考
No3. 掘金 Vue.js 2.0 后端渲染及重构实践
- 重构历史 REFACTORY HISTORY
- 架构设计 ARCHITECTURE
- 最佳实践 BEST PRATICE
重构历史 Refactor History
1st refactoring
- 组件化
- vue-loader & webpack
- 自定义filter
- 分页 director (还不是router分页)
重构历史 Refactor History
2nd Refactoring Vue 1.0
- 使用vue-router
- 分隔前后端webpack
- 组件化增加了一个非官方的状态管理(自己实现的)
重构历史 Refactor History
3nd Refactoring
- Vuex 状态管理
- 重构了大多数组件的数据传递
重构历史 Refactor History
4th Refactoring - Vue 2.0
- 重新管理了文件结构
- 清理了业务架构
- 完全抽象了CRUD操作
- 完全接入了SSR
- 完全重写了webpack / server的配置
架构 Architecture
- 业务复杂度
30页面
40个组件
富文本 / md编辑器
组合页面的无限下拉刷新
后端渲染
CDN加速
many other components
- 各种开发环境
staging
dev
test
...
架构 Architecture
- DDD - Domain Driven Design
Martin Flow
- 基础业务层
- Utils层
- 领域层
e.g.: User 认证就是典型的一个领域
- 业务层
- Event Bus 事件总线
架构 Architecture - 项目结构
- business 业务逻辑
- components 业务组件
- asserts 资源
- constant 常量
- event-bus 全局事件管理
- global 对vue的一些基础拓展定义、函数
- model 数据层的抽象
- repository 数据IO
- router 路由
- state vuex
- style 样式
- view 视图
架构 Architecture - Event bus
- Model 对数据的抽象
- Repository 获取数据的业务
- Service 各个domain下基础业务函数
Best practice 最佳实践
- 不通过跳转URL来显示 Not Found
订阅vue-router，等同于路由统配，并且定义一个error modules来显示具体的404 页面信息
Best practice SSR
- Vue现有的SSR在掘金这个级别(10k+?)就不能用了，机器性能榨干
所以：
- 做了所有能做的缓存
- 做了数据缓存
- 各种LRU
- 做了页面缓存 （6min redis page content cache）
Best practice 数据一致性
- Event Sourcing 事件溯源
- 复杂状态的应用尝试用事件来解耦数据的一致性 (但这点实际上我有存疑)
No4. Vue 在饿了么的应用
饿了么内部从 Vue 的 1.0 版本就开始在尝试，发展至今几乎所有的前端项目都是基于 Vue 开发。饿了么前端团队结合实际业务场景，在一年多的探索过程中做了一些基于 Vue 的基础工具的开发以及前端服务化的尝试。并且还在新技术上（例如 PWA 和 Weex）积极探索，总结了一些实践经验。
- 基础工具开发心得
- 基于 Vue 的前端服务化尝试
- PWA
- Weex 的实践
No4. Vue 在饿了么的应用
- 基础组件的开发，业务组件的开发
- PWA
- Weex的尝试
- 用Vue做前端服务化
No4. Element.js
- 面向公司内的业务组件 (初稿)
- 面向开源的基础组件 (二稿)
- 易用
多种编译版本 (UMD\COMMONJS\SINGLE COMPONENT)
- 可定制化 (国际化\定制主题)
内部直接实现i18n变量替换
vue-i18n
- 与生态兼容
- 别的工作
单元测试
项目模板
组件\特性的添加
No4. 前端服务化
- 对会场页面，提供一个可视化的编辑器
- 对banner设计师提供模板，运营对图片进行修饰
- 由前端将业务组件封装成插件的形式，内嵌至编辑器
- 动态渲染业务组件
No4. Weex
- 饿了么 @ 发现页面
交互少
访问量大
- 加载速度提升明显，页面秒开
- iOS上表现优异 加载+rendering 不到0.5s
缺点：
- 三端体验不一致，特别是对HTML5支持不完整
- 没有cookies
- 没有热更新 (这是题老师提的吧？)
- 对富交互支持有限
No4. PWA
- 尝试优化ELEME webApp
- 做好性能监控
- 做好降级方案
- 最后做业务改造
- 首屏渲染现在不到0.5s，相比之前，首屏会有白屏时间
- ele.me改造PWA还上了Google.io 成为官方实例
No5. 当 Weex 遇上 Vue.js 2.0
本主题主要讲解：
- Weex与Web应用开发的技术差异，如跨平台框架的内存问题、DOM、BOM、API组件差异等等
- Weex与Vue 2.0开发架构
- Weex工具与文档
No5. 当 Weex 遇上 Vue.js 2.0
- HTML5 下个月就已经ready
- 动画也得到了增强
- Weex 核心团队有13个人 (前端3个)
No5. 当 Weex 遇上 Vue.js 2.0
- .we file
- compiled to bundle js
- weex js framework parsing and eval
- call target platform directive
- generate weex page
No5. JS Framework
- 解析Bundle
eval
new Function
native new Function (High performance, android\v8 only)
- MVVM
内容映射到内存模型
渲染方式 append tree or node，精细化的控制节点操作
- Native 通信
MVVM -> 任务中心 -> Native
No5. weex-2.0 is coming
- MVVM直接包裹了vue.2.0 core，2.0语法强兼容性
- 不过与web 版的vue2.0 依然有以下区别
没有DOM
只支持部分的事件类型
支持了事件冒泡
默认采用Flexbox布局
默认所有样式都是scoped
不能为元素设置背景图
没有默认滚动
和原生元素有单位上的不对称
No5. 内存差异
- native内存 - jscore内存 - jsframework内存 (bundle file)
- 反正说了半天就是记得在weex页面destory时，干掉全局上自己额外添加的引用，因为Global对象直接被native内存持有，不可被释放
No6. 用Vue、vuex构建超大Web应用 — IDE
- 重构IDE的技术演化过程
- vuex是如何来管理整个IDE组件之间的通信和扩展管理IDE插件
- 具体插件出发，分析基于Vue，vuex，ES5/ES6的插件系统为什么会如此简单而强大
- 最后聊聊Vue可以做得更好的地方和IDE优先服务好Vue/weex生态
No6. 用Vue、vuex构建超大Web应用 — IDE
- IDE架构演化
- plugin的新玩法
- 对vue的期待
- VIDE展望
No6. IDE设计的常规思路
- 组件模块化
- 组件之间能通信
- 能提供事件，第三方可以接受事件
No6. 问题暴露
- 无法全局的查看全部状态
- 事件消息太多，维护太难
- 集成多个状态，大麻烦
- 太多状态事件和逻辑混合在一起
解决方案：
用 Vuex
No6. 问题暴露
- computed data + vuex = 响应式渲染
总结:
人生苦短，我用VS CODE