赵锦江 - ModernWeb 2018
背景图来自 Vue Meetup
赵锦江
Jinjiang
勾三股四
⚽️ 🎹 杭州
今天的话题和 有关
- 旧闻：选择
的心路历程 - 新闻：2018 最新动态
- 我刚刚入职手机淘宝不久
- Mobile App 刚刚起步
- Mobile Web：Zepto
pexels.com
Backbone.js 如何？
当时 MVC 框架对于前端来说都还是很高级的东西
来看一段真实的代码
大量重复繁琐的代码
并不是最理想的解法
一定还可以更简单直接
同时……
[View] (presentation)
↑messages ↓commands ↑↓data-bindings
[ViewModel] (unsaved data)
↑↓sync
[Model] (data)
- 引入 MVVM 架构
- 先引入 data-binding
- 更多的约定 -> 简单直接的语法
- 体积要小，执行效率要高
- ng: digest / dirty check
- ko: JSON ->
observable(...)
- 简洁：保持 JSON 的格式
- 高效：No dirty check
尽量通过 Object.defineProperty 响应
于是我启动了一个内部的小项目
解决数据响应问题
/**
* 为一个数据对象设置无法被枚举的 `__watchers__` 属性。
* 用来记录这个 `data` 对象上所有的监听器。
* @private
*
* @param {object} data
*//**
* 将数组 `arr` 进行可监听初始化。
* 使其项目发生改变时触发事件，
* 主要受影响的接口有：
* `push`, `pop`, `shift`, `unshift`, `sort`, `reverse`；
* 另外由于封装 `arr[index]` 和 `length` 有一定难度，
* 故将这部分操作改为 `setItem(index, value)` 和 `setLength(length)`。
* @alias module:W.formatArray
* @function
*
* @param {array} arr
*/Object.defineProperty__watchers__setItem()+setLength()
与此同时，我发现了 v0.10
Object.defineProperty__emitter__$set()+$remove()
pexels.com
- 不谋而合的“认同感”
- 框架和 API 设计也有很多想法一致
- 极简主义 小巧高性能
- 比自己 (还没) 写的更成熟可靠
所以我选择了
That's it?
其实不然……
我还没有和团队讨论
当我兴奋的把
拿给同事们看的时候……
问：这是哪家公司做的？
我：🤔
问：它真的比 Google 做出来的东西🐂吗？
我：😳
问：它值得我花时间学吗？
我：😓
问：太棒了！所以我选择 Zepto
我：🙀
后来大家还是没有选择
只有我自己不甘心
默默坚持用了下去 🧐
内部项目：JSON Butler
用在桌面端可视化编辑 JSON 数据
(类似 jsonmate)
jsonmate
的特点和优势完全发挥了出来
项目进展异常顺利
- 所有的 template 放在一起
- 所有的 JS 放在一起
- 所有的 CSS 放在一起
随着项目的发展，代码的可维护性受到极大的挑战
修改同一个组件的行为和样式要同时在两个不同的大目录里找文件
与此同时
我通过 HTML 中文兴趣组
发现了 Web Components
以及一个新的 JS 框架 Polymer
- 万物皆组件 (tag)
- 每个组件各放置 HTML/CSS/JS
- 通过打包工具构建在一起
自己根据这个思路做了个 side project：zorro-html
基于 Polymer (Web Components 思想) 复刻 Bootstrap
Polymer 组件的代码还是信息密度不够高，有很多不得已重复和繁琐的写法
一、未来的 web app
UI 都是由组件组合出来的
二、每个组件一个文件，里面就一小段 <template>、一小段 <style> 和一小段 <script>
You may guess what I've found next:
pexels.com
我迫不及待的把
再次推荐给团队
所以我们选择了 ?
Happy Ending?
勾股，你说的这个东西确实不错，但是用起来还是挺麻烦的，有好多工作要准备。你看人家 Google 的东西都是一整套的，拿来就能用，而且大家相互不用多说就都会用。
我们需要的不仅仅是一个好的框架，而是一整套方案，包括库、工具、文档、流程设计、布道等等。
- 《NPM+CommonJS 不好意思 我们来晚了》
- 《Just‐vue vue+webpack 工程落地》
- 《无线前端的图片相关工作流程梳理》
- 《Vue.js 码源学习笔记》
- ……
并有幸请来了作者尤雨溪做交流
经过自己不断的努力，手机淘宝前端团队终于有越来越多的人选择了
经过这次深度学习和实践
也产生了一些自己的想法
1、模板的实现也许可以脱离 document fragment 因为 dom 操作比 JavaScript 运算要慢得多
2、如果把模板的解析工作尽可能多的提前处理好，那么 runtime 可以更小更快
3、对 template -> JSON 的抽象也许能够使得 Vue 的开发体验移植到其它各类 UI 编程的场景中。
+ Native? 🤔
参加了深圳某 JS 会议
碰到了很多同行 也再次碰到了尤雨溪
从大家的交流中得到了很多启发和鼓励
也坚定了自己的想法
发起了一个内部试验项目
尝试将当时的 和
手机淘宝的 native 技术
进行改造和融合
会后连夜设计了
JS bridge API 的第一个版本
最终成品：Weex
2015-11-11 
“首发”
终于有人知道我做什么了😂
所以 也选择了 -like
for mobile app only
那么 mobile web + desktop？
了解一下 🤪
大家仍会对 的能力提出质疑……
问：能否支持 IE8？
我：也许可以 &%*$#@ 试试看……
事情不了了之……
但在我心里这实际上是一个
事实证明在当年年末
包括 在内的多条产品线
放弃了对 IE8 的支持……
在 2016 年
我有幸加入了 团队 🎉
有了更多交流的机会
紧接着 v2.0 启动
并于同年正式发布
- virtual-DOM
- 更多编译时 + 更小运行时
- 跨平台渲染支持
pexels.com
与此同时……
全年的几个大型活动
基于 Weex 顺利完成
年底到了，大家再一次坐下来谈
了解一下 🤪
我们觉得
但是生态不够繁荣……
在我看来这又是一个
而且……
- 去年的问题：核心能力
- 今年的问题：周边生态
我：我现在没有办法给你一个繁荣的生态，
但我打赌你明年不会再问这个问题了
最终 *选择了
*面向消费者端业务
稍微多说一点……
所以 2017 年 的 ecosystem 发展得怎么样呢？
团队把发展 ecosystem
作为 2017 年的重心之一
TypeScript / PWA / VSCode / Apollo / RxJS / Firebase / StoryBook / ...
Nuxt / Element / Vuetify / vue-i18n / ...
https://curated.vuejs.org
https://github.com/vuejs/awesome-vue
GitLab / Apple / NASA / IBM / Amazon / Weibo / 滴滴 / 快手 / ...
and (yes) facebook
会上的很多人后来都成为了团队的一员
团队不断壮大
Ecosystem 2017
- 更多的合作
- 更多的库和工具
- 更多的用户
- 更蓬勃的社区
“放弃”自研，帮助别人一起做到更好，这同样是很酷的事情
意味着更多的借力、和更多人更快速达成共识、更强的生命力
关注开发者体验
「机器不是主人，是工具，而真正的主人应该是"人"」
和被放大的需求、业务、设计、技术、工程管理问题等一起成长
始终努力寻找你能想象到的技术的最终形态
great community and ecosystem always
follows great low-level core naturally
- 关注问题和解法 -> 创造价值
- 尊重习惯/优雅/简单 -> 开发体验
- 尊重标准/关注新技术 -> 生命力
- 探求终极形态 -> 脱颖而出
- 专注核心 -> 社区/生态的源动力
https://www.slideshare.net/josephj/webrebuild
木曜4超玩
- 开箱即用，可零配置打开一个文件
- 比 v2 更好的脚手架模板
- 可以把所有配置信息写在同一个文件里
- 通过自身插件系统进行扩展
- 支持构建 native web components
- Markdown + Vue 撰写内容
- 高效研发 + 高性能运行
- 多年文档经验积累，有很多贴心的细节
- 面向 ES2015+“现代浏览器”
- 基于 Proxy 重写数据响应系统
- 和 v2 保持同步更新
尽情期待
- guide：问题 -> 方案
- api：方案 -> 问题
- style guide：约定俗成
- cookbook：涵盖更多更丰富的场景和辅助内容
- Vue Loader v15：配置方式更合理、SFC 规范独立
- Vue UI：已经用在了 Vue CLI v3 上
- Vue Test Utils：支持 Jest、Mocha 等多种测试框架
- Vue.js Summit - 8月底 圣保罗
- Vue.js London - 9月下旬 伦敦
- Vue Fes Japan - 11月初 东京
100+ newsletters
勾三股四
Jinjiang
zhaojinjiang
zhaojinjiang@me.com
希望大家能来 OpenCollective 多多支持