在2017年的最后一天，隨著1999年12月31日出生的人過完生日，標志著所有的90后已經(jīng)成年，“祖國未來的花朵”已經(jīng)再也不是指90后了 T.T 但是這跟我其實沒啥關系，我是中 年 大 叔！
時間線
今年年初的時候，“臨危受命”接手了廣告管理系統(tǒng)的前臺工作，由此開始了 Vue.js 之旅。之后同樣由于工作需要，開始維護 web 服務端，使用 scala 語言加 play framework 框架，深深體會到了 當面向對象加上函數(shù)式 的強大和復雜。從年中開始新項目，為了和集團技術接軌，web 服務端改為使用 egg 框架，學習到了什么是企業(yè)級解決方案以及為什么需要?這么做，開始學會從非技術角度看待工程問題，提升自己的技術視野和?技術管理相關的技能。其中還學到了零零碎碎的知識，比如學會用 Docker；慢慢學習做?系統(tǒng)設計，寫設計文檔；學習視覺設計，交互體驗以提升自己的設計能力等等，就不一一詳細列舉了。
技術盤點
大概說一下使用的幾個?主要技術點的認識和見解。
Vue.js
首先說說 Vue -- 一個最近兩年在快速發(fā)展的，由尤雨溪大神開發(fā)的 MVVM 框架。通過使用單文件組件方式，Vue 通過把模板(template)、邏輯(script)和樣式(style)三種代碼組織在一個 .vue 文件中，個人感覺是目前為止在眾多前端組件化框架中屬于非常易于理解的，功能完整且靈活的、接近標準的前端組件化?解決方案。
?易于理解
Vue 組件中的 template、script 和 style 三個部分分別對應的是傳統(tǒng)前端開發(fā)中的 .HTML、.js 和 .css 文件，如果項目是使用 vue-cli 初始化或者是公司內部已經(jīng)有定制的項目架手腳，那么一個前端開發(fā)只要?稍微有點 ?ES6 的基礎，在看過文檔了解 Vue 的基礎語法之后，就可以快速的上手開發(fā)。這是因為通過框架和工具層面的配合，把很多晦澀難懂或者在傳統(tǒng)前端領域不存在概念給屏蔽了，使得我們并不需要做非常多的思想上的轉變就能使用上 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：易于上手容易理解有時候反而成為了其他框架或者開發(fā)者嘲笑 Vue 的點ㄟ( ▔, ▔ )ㄏ。。
功能完整且靈活
V?ue 中包含了 8個 組件生命周期 hook 方法，讓用戶有機會在不同的階段增加自定義行為。
<div style="text-align: center">(圖片來自Vue官網(wǎng))</div>
Vue 里沒有 shouldComponentUpdate 接口，但是由于 Vue 實現(xiàn)數(shù)據(jù)監(jiān)聽的原理和 React 不一樣，Vue 在渲染時已經(jīng)收集了所有數(shù)據(jù)的依賴關系，所以當數(shù)據(jù)變化時能精確控制哪些組件需要重新渲染，詳細可以參考 這篇分析，非常通俗易懂。
?Vue 中除了有 prop 和 data 兩種數(shù)據(jù)類型，還提供了 computed 和 watch 接口。computed 提供了復合屬性計算邏輯的封裝能力，并且具有緩存特性 ，computed 中使用到的屬性變化時 ?computed 的值才會變化然后觸發(fā) diff，在某些場景下這能大大提升應用性能。
Vue 中支持自定義 directive，使我們有抽象對組件底層(DOM)的控制能力，實現(xiàn)更靈活的功能組合。同時還支持混合(mixins)，插件(plugins) 和 過濾器(filters)，吸收了非常多其他框架優(yōu)秀的設計。
接近標準
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 官網(wǎng)
以上截自 Vue 和 Polymer 對比，Polymer 是以符合 Web Component 作為其主要特點的解決方案。最近了解到一個也是以 WebComponent 為主要特點的解決方案是 stencil.js，使用了 decorator 加 class 來申明組件，個人感覺非常有意思，會持續(xù)關注。下面說說為什么 Vue 很容易和 WebComponent 集成。
還記得上面提的 Vue 單文件組件中是使用
<template>標簽組織組件的 HTML 代碼嗎？Vue 中對的template和slot標簽的使用，和HTML Template、HTML Slot標準概念上是一致的。組件的創(chuàng)建、數(shù)據(jù)雙向綁定、生命周期方法、事件的綁定和組件邏輯控制，在 WebComponent 里則是以 Custom Element 接口提供實現(xiàn)。
-
先看看 WebComponent 標準實現(xiàn)一個完整的組件代碼，效果
<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"><<slot name="element-name">NEED NAME</slot>></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特性，也能完全實現(xiàn)Shadow DOM中樣式的封裝性。眾所周知?，css?中的全局性一直是其一大痛點，為了解決這個問題，我們一開始從命名規(guī)范入手，出現(xiàn)了 BEM，SMACSS 和 OOCSS，到后來通過編譯工具實現(xiàn)css in js，css module 都是為了解決此問題。 ?HTML imports 則可以通過 anysn components? 或者
vue-router的延遲加載結合webpack的 code split 實現(xiàn)。
Scala
作為臨時人員，寫了僅僅一段時間的 scala，雖然都是非常?淺顯的使用，但是已經(jīng)?能深深感受到它的強大--無數(shù)的語法和內置對象?和內置方法，強大的重載機制，使 scala 能輕松做到很多 java 非常?難實現(xiàn)甚至無法實現(xiàn)的效果。其中在異步并發(fā)編程中使用 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 模型 解決高并發(fā)，分布式，彈性的基于消息驅動的解決方案，獲益良多。其他方面真·不敢妄言了，還在學習語法中。。。
吐槽：scala 是真·CPU、內存殺手，開著 IDEA + scala 編譯，分分鐘占用10G+內存，而且編譯速度也?很慢，估計只有 google 的程序猿才可以無感使用這個語言。。。
Egg
隨著最近大概10年左右?的發(fā)展，js 在【前端】方面的發(fā)展其實主要是圍繞著如何優(yōu)雅的解決日益復雜的交互而進行的，這里?前端指傳統(tǒng)狹隘意義上的頁面端。但是 js 在服務器端的發(fā)展也不可忽視，這篇文章可以很好的看出當前 nodejs 的發(fā)展狀況。
自從 ES5 和 ES6 標準正式推出到后來的每年發(fā)布一次標準之后，在語言層面 js 已經(jīng)?有了非常大的進步，最被人詬病的異步回調地獄已經(jīng)在 Node LTS 8.9.0 正式發(fā)布后，能通過新的語法 async/await 完美解決，不再需要使用各種 hack 辦法來解決這個問題了。由于 js 的發(fā)展速度?迅猛，社區(qū)?灰?；钴S，導致了各大類庫窮除不盡，但是這是好事也是壞事。好在無論是哪方面的問題，可能都會有現(xiàn)成的解決方案類庫可以開箱即用，而?壞處是技術發(fā)展過快?，導致沒有能沉淀出穩(wěn)定的、健壯的同時又靈活的集大成解決方案，由一個技術點形成的生態(tài)圈，可能過?半年就已經(jīng)過時了，導致再也無人?問津或者維護，如果?企業(yè)使用了此技術而又得不到有力的技術支持，被迫不得不話費人力財力精力去重構甚至推倒重來。當語言層面不再是?阻礙我們前進的阻礙之時，那么我們要繼續(xù)完善的，就是規(guī)范。
而 Egg 的出現(xiàn)，其中一個重要的原因就在于此。它的其中一個設計原則，就是?解決規(guī)范問題，但同時又不僅僅只解決這一個問題。
我們深知企業(yè)級應用在追求規(guī)范和共建的同時，還需要考慮如何平衡不同團隊之間的差異，求同存異。
Egg 通過使用默認的加載器以【約定】的方式來根據(jù)功能差異將代碼放到不同的目錄下管理，以實現(xiàn)規(guī)范化。但是?規(guī)范約定不等于擴展性差，相反 Egg 有很高的擴展性，可以按照團隊的約定定制框架。使用 Loader 可以讓框架根據(jù)不同環(huán)境定義默認配置，還可以覆蓋 Egg 的默認約定。
目前阿里集團內部不同事業(yè)部門內，已經(jīng)?基于 Egg 形成了多少適合自身業(yè)務的上層框架，并且接受了真實業(yè)務的洗禮。
Egg 是在阿里大力推行前后端分離的環(huán)境下，主推的 BFE（backend for frontend）解決方案，由眾多大佬?在背后支撐，內部已經(jīng)也將會在越來越多場景下使用，插件生態(tài)圈也日益完善，相信在推進 js 服務器端地位中能起到?不小的作用。
其他
?學習了 Docker 的簡單使用，一般用于模擬服務器環(huán)境的部署測試。?完整的學習了 ES6 中所有的新技術點，這里推薦 ES6 入門 系列文章，非常詳細。學會使用? xmind 等各種流程圖制作工具，幫助做項目設計或者工作的計劃，提高效率，努力做到系統(tǒng)、高效的規(guī)劃工作和日常生活。由于改用了 mac，所以命令行和 shell 能力有了不少進步，開始使用簡單的腳本代替重復性的勞動。?學習了 gRPC 這?個由谷歌開源的 RPC 框架，簡單了解了和 RESTFul 的對比。從 ant.design 中學習界面設計的理念，從《騰訊網(wǎng) UED 體驗設計之旅》中學習用戶體驗的哲學。持續(xù)關注 react 發(fā)展，雖然已經(jīng)很久沒使用過 react 了，不過 react 的思想總是能引領潮流。
總結與展望
由于以前缺乏規(guī)劃和總結，以上說的并不全，但是也能看出來其實一年以來進步學習到的和進步并?沒有?令人滿意，規(guī)劃和總結還有動手能力，是下一年最重要的非技術方面需要提升的點。而在技術方面，?這里列一下感興趣并且個人認為將會越來越重要的技術點，明年主要學習這些方面：
- GraphQL
- 桌面端 electron
- 移動端技術，選擇一個或多個技術方案（react native/ionic/weex/Cordova）嘗試做個人項目
? - 移動端的開發(fā)
- 學習 WebAssembly
- PWA
- Typescript，爭取使用 Typescript 開發(fā)一個真正的項目
- 關注 rollup、parcel 等新類型的打包工具
- ?再學習一門后端語言（計劃是 GO）
個人方面：
- 堅持計劃和規(guī)劃
- 堅持思考和總結
- 學習從更高的層面思考和看待項目，產(chǎn)品和團隊
- 早睡
- 少刷知多看書（之前知乎2017總結活動，?顯示我?在知乎看了500多萬字，不知道真實與否，但是希望明年能控制在100萬字以內）
版權聲明：原創(chuàng)文章，如需轉載，請注明出處“本文首發(fā)于xlaoyu.info”
