• 时间线
• 技术盘点
  • Vue.js
  • Scala
  • Egg
  • 其他
• 总结与展望

在2017年的最后一天，随着1999年12月31日出生的人过完生日，标志着所有的90后已经成年，“祖国未来的花朵”已经再也不是指90后了 T.T 但是这跟我其实没啥关系，我是中 年 大 叔！

时间线

今年年初的时候，“临危受命”接手了广告管理系统的前台工作，由此开始了 Vue.js 之旅。之后同样由于工作需要，开始维护 web 服务端，使用 scala 语言加 play framework 框架，深深体会到了 当面向对象加上函数式 的强大和复杂。从年中开始新项目，为了和集团技术接轨，web 服务端改为使用 egg 框架，学习到了什么是企业级解决方案以及为什么需要这么做，开始学会从非技术角度看待工程问题，提升自己的技术视野和技术管理相关的技能。其中还学到了零零碎碎的知识，比如学会用 Docker；慢慢学习做系统设计，写设计文档；学习视觉设计，交互体验以提升自己的设计能力等等，就不一一详细列举了。

技术盘点

大概说一下使用的几个主要技术点的认识和见解。

Vue.js

首先说说 Vue – 一个最近两年在快速发展的，由尤雨溪大神开发的 MVVM 框架。通过使用单文件组件方式，Vue 通过把模板(template)、逻辑(script)和样式(style)三种代码组织在一个 .vue 文件中，个人感觉是目前为止在众多前端组件化框架中属于非常易于理解的，功能完整且灵活的、接近标准的前端组件化解决方案。

易于理解

Vue 组件中的 template、script 和 style 三个部分分别对应的是传统前端开发中的 .HTML、.js 和 .css 文件，如果项目是使用 vue-cli 初始化或者是公司内部已经有定制的项目架手脚，那么一个前端开发只要稍微有点 ES6 的基础，在看过文档了解 Vue 的基础语法之后，就可以快速的上手开发。这是因为通过框架和工具层面的配合，把很多晦涩难懂或者在传统前端领域不存在概念给屏蔽了，使得我们并不需要做非常多的思想上的转变就能使用上 Vue。这和另外两大框架 React 和 Angular 非常不一样，我们不需要在写了多年 HTML 之后再去学 JSX 语法，也不需要子安说了多年要展示，逻辑，样式分离之后却又说要 CSS IN JS 和 JSX IN JS。更加不需要去学习 Angular 中的一大堆 API 和新概念。Ps：上述对其他框架的描述不是说明那些特性不好，而是针对易于上手这一点的对比。

To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript (i.e. plain JavaScript). With these basic skills, you can start building non-trivial applications within less than a day of reading the guide.

PPS：易于上手容易理解有时候反而成为了其他框架或者开发者嘲笑 Vue 的点ㄟ( ▔, ▔ )ㄏ。。

功能完整且灵活

Vue 中包含了 8个 组件生命周期 hook 方法，让用户有机会在不同的阶段增加自定义行为。

Vue 里没有 shouldComponentUpdate 接口，但是由于 Vue 实现数据监听的原理和 React 不一样，Vue 在渲染时已经收集了所有数据的依赖关系，所以当数据变化时能精确控制哪些组件需要重新渲染，详细可以参考 这篇分析，非常通俗易懂。

Vue 中除了有 prop 和 data 两种数据类型，还提供了 computed 和 watch 接口。computed 提供了复合属性计算逻辑的封装能力，并且具有缓存特性 ，computed 中使用到的属性变化时 computed 的值才会变化然后触发 diff，在某些场景下这能大大提升应用性能。

Vue 中支持自定义 directive，使我们有抽象对组件底层(DOM)的控制能力，实现更灵活的功能组合。同时还支持混合(mixins)，插件(plugins) 和 过滤器(filters)，吸收了非常多其他框架优秀的设计。

接近标准

It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation
– Vue 官网

以上截自 Vue 和 Polymer 对比，Polymer 是以符合 Web Component 作为其主要特点的解决方案。最近了解到一个也是以 WebComponent 为主要特点的解决方案是 stencil.js，使用了 decorator 加 class 来申明组件，个人感觉非常有意思，会持续关注。下面说说为什么 Vue 很容易和 WebComponent 集成。

• 还记得上面提的 Vue 单文件组件中是使用 <template> 标签组织组件的 HTML 代码吗？Vue 中对的 template 和 slot 标签的使用，和HTML Template、HTML Slot标准概念上是一致的。

• 组件的创建、数据双向绑定、生命周期方法、事件的绑定和组件逻辑控制，在 WebComponent 里则是以 Custom Element 接口提供实现。

• 先看看 WebComponent 标准实现一个完整的组件代码，效果

  <template id="element-details-template">
    <style>
    details {font-family: "Open Sans Light",Helvetica,Arial}
    .name {font-weight: bold; color: #217ac0; font-size: 120%}
    h4 { margin: 10px 0 -8px 0; }
    h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
    h4 span { border: 1px solid #cee9f9; border-radius: 4px }
    h4 span { color: white }
    .attributes { margin-left: 22px; font-size: 90% }
    .attributes p { margin-left: 16px; font-style: italic }
    </style>
    <details>
      <summary>
        <span>
          <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
          <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
        </span>
      </summary>
      <div class="attributes">
        <h4><span>Attributes</span></h4>
        <slot name="attributes"><p>None</p></slot>
      </div>
    </details>
    <hr>
  </template>
  <script>
  customElements.define('element-details',
    class extends HTMLElement {
      constructor() {
        super();
        var template = document
          .getElementById('element-details-template')
          .content;
        const shadowRoot = this.attachShadow({mode: 'open'})
          .appendChild(template.cloneNode(true));
    }
  });
  </script>
  

  是不是和 Vue 的单文件组织形式非常相似？Vue 中的 scoped css 特性，也能完全实现 Shadow DOM 中样式的封装性。众所周知，css 中的全局性一直是其一大痛点，为了解决这个问题，我们一开始从命名规范入手，出现了 BEM，SMACSS 和 OOCSS，到后来通过编译工具实现 css in js，css module 都是为了解决此问题。

• HTML imports 则可以通过 anysn components 或者 vue-router 的延迟加载结合 webpack 的 code split 实现。

Scala

作为临时人员，写了仅仅一段时间的 scala，虽然都是非常浅显的使用，但是已经能深深感受到它的强大–无数的语法和内置对象和内置方法，强大的重载机制，使 scala 能轻松做到很多 java 非常难实现甚至无法实现的效果。其中在异步并发编程中使用 Await 接口的语法更让我感觉语言之间都是相通的，互相借鉴和相互学习的。

Have the best of both worlds. Construct elegant class hierarchies for maximum code reuse and extensibility, implement their behavior using higher-order functions. Or anything in-between.

使用 play 框架的时候，深深被 Twirl 模板语法恶心到了，不过话说回来，这种在 scala 代码中写 html 代码的形式是不是和 React 很像？😏

还有就是学习到了 akka 的思想，使用 Actor 模型 解决高并发，分布式，弹性的基于消息驱动的解决方案，获益良多。其他方面真·不敢妄言了，还在学习语法中。。。

吐槽：scala 是真·CPU、内存杀手，开着 IDEA + scala 编译，分分钟占用10G+内存，而且编译速度也很慢，估计只有 google 的程序猿才可以无感使用这个语言。。。

Egg

随着最近大概10年左右的发展，js 在【前端】方面的发展其实主要是围绕着如何优雅的解决日益复杂的交互而进行的，这里前端指传统狭隘意义上的页面端。但是 js 在服务器端的发展也不可忽视，这篇文章可以很好的看出当前 nodejs 的发展状况。

自从 ES5 和 ES6 标准正式推出到后来的每年发布一次标准之后，在语言层面 js 已经有了非常大的进步，最被人诟病的异步回调地狱已经在 Node LTS 8.9.0 正式发布后，能通过新的语法 async/await 完美解决，不再需要使用各种 hack 办法来解决这个问题了。由于 js 的发展速度迅猛，社区灰常活跃，导致了各大类库穷除不尽，但是这是好事也是坏事。好在无论是哪方面的问题，可能都会有现成的解决方案类库可以开箱即用，而坏处是技术发展过快，导致没有能沉淀出稳定的、健壮的同时又灵活的集大成解决方案，由一个技术点形成的生态圈，可能过半年就已经过时了，导致再也无人问津或者维护，如果企业使用了此技术而又得不到有力的技术支持，被迫不得不话费人力财力精力去重构甚至推倒重来。当语言层面不再是阻碍我们前进的阻碍之时，那么我们要继续完善的，就是规范。

而 Egg 的出现，其中一个重要的原因就在于此。它的其中一个设计原则，就是解决规范问题，但同时又不仅仅只解决这一个问题。

我们深知企业级应用在追求规范和共建的同时，还需要考虑如何平衡不同团队之间的差异，求同存异。

Egg 通过使用默认的加载器以【约定】的方式来根据功能差异将代码放到不同的目录下管理，以实现规范化。但是规范约定不等于扩展性差，相反 Egg 有很高的扩展性，可以按照团队的约定定制框架。使用 Loader 可以让框架根据不同环境定义默认配置，还可以覆盖 Egg 的默认约定。 目前阿里集团内部不同事业部门内，已经基于 Egg 形成了多少适合自身业务的上层框架，并且接受了真实业务的洗礼。

Egg 是在阿里大力推行前后端分离的环境下，主推的 BFE（backend for frontend）解决方案，由众多大佬在背后支撑，内部已经也将会在越来越多场景下使用，插件生态圈也日益完善，相信在推进 js 服务器端地位中能起到不小的作用。

其他

学习了 Docker 的简单使用，一般用于模拟服务器环境的部署测试。完整的学习了 ES6 中所有的新技术点，这里推荐 ES6 入门 系列文章，非常详细。学会使用 xmind 等各种流程图制作工具，帮助做项目设计或者工作的计划，提高效率，努力做到系统、高效的规划工作和日常生活。由于改用了 mac，所以命令行和 shell 能力有了不少进步，开始使用简单的脚本代替重复性的劳动。学习了 gRPC 这个由谷歌开源的 RPC 框架，简单了解了和 RESTFul 的对比。从 ant.design 中学习界面设计的理念，从《腾讯网 UED 体验设计之旅》中学习用户体验的哲学。持续关注 react 发展，虽然已经很久没使用过 react 了，不过 react 的思想总是能引领潮流。

总结与展望

由于以前缺乏规划和总结，以上说的并不全，但是也能看出来其实一年以来进步学习到的和进步并没有令人满意，规划和总结还有动手能力，是下一年最重要的非技术方面需要提升的点。而在技术方面，这里列一下感兴趣并且个人认为将会越来越重要的技术点，明年主要学习这些方面：

• GraphQL
• 桌面端 electron
• 移动端技术，选择一个或多个技术方案（react native/ionic/weex/Cordova）尝试做个人项目 
• 移动端的开发
• 学习 WebAssembly
• PWA
• Typescript，争取使用 Typescript 开发一个真正的项目
• 关注 rollup、parcel 等新类型的打包工具
• 再学习一门后端语言（计划是 GO）

个人方面：

• 坚持计划和规划
• 坚持思考和总结
• 学习从更高的层面思考和看待项目，产品和团队
• 早睡
• 少刷知多看书（之前知乎2017总结活动，显示我在知乎看了500多万字，不知道真实与否，但是希望明年能控制在100万字以内）

版权声明：原创文章，如需转载，请注明出处“本文首发于xlaoyu.info”