在2017年的最后一天，隨著1999年12月31日出生的人過完生日，標志著所有的90后已經(jīng)成年帜慢，“祖國未來的花朵”已經(jīng)再也不是指90后了 T.T 但是這跟我其實沒啥關(guān)系，我是中 年 大 叔唯卖！

時間線

今年年初的時候崖堤，“臨危受命”接手了廣告管理系統(tǒng)的前臺工作，由此開始了 Vue.js 之旅耐床。之后同樣由于工作需要密幔，開始維護 web 服務(wù)端，使用 scala 語言加 play framework 框架撩轰，深深體會到了 當面向?qū)ο蠹由虾瘮?shù)式 的強大和復(fù)雜胯甩。從年中開始新項目，為了和集團技術(shù)接軌堪嫂，web 服務(wù)端改為使用 egg 框架偎箫，學習到了什么是企業(yè)級解決方案以及為什么需要?這么做，開始學會從非技術(shù)角度看待工程問題皆串，提升自己的技術(shù)視野和?技術(shù)管理相關(guān)的技能淹办。其中還學到了零零碎碎的知識，比如學會用 Docker恶复；慢慢學習做?系統(tǒng)設(shè)計怜森，寫設(shè)計文檔；學習視覺設(shè)計谤牡，交互體驗以提升自己的設(shè)計能力等等副硅，就不一一詳細列舉了。

技術(shù)盤點

大概說一下使用的幾個?主要技術(shù)點的認識和見解翅萤。

Vue.js

首先說說 Vue -- 一個最近兩年在快速發(fā)展的恐疲，由尤雨溪大神開發(fā)的 MVVM 框架。通過使用單文件組件方式套么，Vue 通過把模板(template)培己、邏輯(script)和樣式(style)三種代碼組織在一個 .vue 文件中，個人感覺是目前為止在眾多前端組件化框架中屬于非常易于理解的胚泌，功能完整且靈活的省咨、接近標準的前端組件化?解決方案。

?易于理解

Vue 組件中的 template诸迟、script 和 style 三個部分分別對應(yīng)的是傳統(tǒng)前端開發(fā)中的 .HTML茸炒、.js 和 .css 文件，如果項目是使用 vue-cli 初始化或者是公司內(nèi)部已經(jīng)有定制的項目架手腳阵苇，那么一個前端開發(fā)只要?稍微有點 ?ES6 的基礎(chǔ)壁公，在看過文檔了解 Vue 的基礎(chǔ)語法之后，就可以快速的上手開發(fā)绅项。這是因為通過框架和工具層面的配合紊册，把很多晦澀難懂或者在傳統(tǒng)前端領(lǐng)域不存在概念給屏蔽了，使得我們并不需要做非常多的思想上的轉(zhuǎn)變就能使用上 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 方法，讓用戶有機會在不同的階段增加自定義行為幢踏。

vue lifecycle

<div style="text-align: center">(圖片來自Vue官網(wǎng))</div>

Vue 里沒有 shouldComponentUpdate 接口髓需，但是由于 Vue 實現(xiàn)數(shù)據(jù)監(jiān)聽的原理和 React 不一樣，Vue 在渲染時已經(jīng)收集了所有數(shù)據(jù)的依賴關(guān)系房蝉，所以當數(shù)據(jù)變化時能精確控制哪些組件需要重新渲染僚匆，詳細可以參考 這篇分析，非常通俗易懂搭幻。

?Vue 中除了有 prop 和 data 兩種數(shù)據(jù)類型白热，還提供了 computed 和 watch 接口。computed 提供了復(fù)合屬性計算邏輯的封裝能力粗卜，并且具有緩存特性 屋确，computed 中使用到的屬性變化時 ?computed 的值才會變化然后觸發(fā) diff，在某些場景下這能大大提升應(yīng)用性能续扔。

Vue 中支持自定義 directive攻臀，使我們有抽象對組件底層(DOM)的控制能力，實現(xiàn)更靈活的功能組合纱昧。同時還支持混合(mixins)刨啸，插件(plugins) 和 過濾器(filters)，吸收了非常多其他框架優(yōu)秀的設(shè)計识脆。

接近標準

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ù)關(guān)注。下面說說為什么 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">&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 特性煌恢，也能完全實現(xiàn) Shadow DOM 中樣式的封裝性骇陈。眾所周知?，css ?中的全局性一直是其一大痛點瑰抵，為了解決這個問題你雌，我們一開始從命名規(guī)范入手，出現(xiàn)了 BEM二汛，SMACSS 和 OOCSS婿崭，到后來通過編譯工具實現(xiàn) css in js，css module 都是為了解決此問題肴颊。

• ?HTML imports 則可以通過 anysn components? 或者 vue-router 的延遲加載結(jié)合 webpack 的 code split 實現(xiàn)氓栈。

Scala

作為臨時人員，寫了僅僅一段時間的 scala婿着，雖然都是非常?淺顯的使用授瘦，但是已經(jīng)?能深深感受到它的強大--無數(shù)的語法和內(nèi)置對象?和內(nèi)置方法，強大的重載機制竟宋，使 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ā)，分布式粗梭，彈性的基于消息驅(qū)動的解決方案争便，獲益良多。其他方面真·不敢妄言了楼吃，還在學習語法中。妄讯。孩锡。

吐槽：scala 是真·CPU、內(nèi)存殺手亥贸，開著 IDEA + scala 編譯躬窜，分分鐘占用10G+內(nèi)存，而且編譯速度也?很慢炕置，估計只有 google 的程序猿才可以無感使用這個語言荣挨。。朴摊。

Egg

隨著最近大概10年左右?的發(fā)展默垄，js 在【前端】方面的發(fā)展其實主要是圍繞著如何優(yōu)雅的解決日益復(fù)雜的交互而進行的，這里?前端指傳統(tǒng)狹隘意義上的頁面端甚纲。但是 js 在服務(wù)器端的發(fā)展也不可忽視口锭，這篇文章可以很好的看出當前 nodejs 的發(fā)展狀況。

自從 ES5 和 ES6 標準正式推出到后來的每年發(fā)布一次標準之后介杆，在語言層面 js 已經(jīng)?有了非常大的進步鹃操，最被人詬病的異步回調(diào)地獄已經(jīng)在 Node LTS 8.9.0 正式發(fā)布后，能通過新的語法 async/await 完美解決春哨，不再需要使用各種 hack 辦法來解決這個問題了荆隘。由于 js 的發(fā)展速度?迅猛，社區(qū)?灰掣氨常活躍椰拒，導(dǎo)致了各大類庫窮除不盡，但是這是好事也是壞事凰荚。好在無論是哪方面的問題耸三，可能都會有現(xiàn)成的解決方案類庫可以開箱即用，而?壞處是技術(shù)發(fā)展過快?浇揩，導(dǎo)致沒有能沉淀出穩(wěn)定的仪壮、健壯的同時又靈活的集大成解決方案，由一個技術(shù)點形成的生態(tài)圈胳徽，可能過?半年就已經(jīng)過時了积锅，導(dǎo)致再也無人?問津或者維護爽彤，如果?企業(yè)使用了此技術(shù)而又得不到有力的技術(shù)支持，被迫不得不話費人力財力精力去重構(gòu)甚至推倒重來缚陷。當語言層面不再是?阻礙我們前進的阻礙之時适篙，那么我們要繼續(xù)完善的，就是規(guī)范箫爷。

而 Egg 的出現(xiàn)嚷节，其中一個重要的原因就在于此。它的其中一個設(shè)計原則虎锚，就是?解決規(guī)范問題硫痰，但同時又不僅僅只解決這一個問題。

我們深知企業(yè)級應(yīng)用在追求規(guī)范和共建的同時窜护，還需要考慮如何平衡不同團隊之間的差異效斑，求同存異。

Egg 通過使用默認的加載器以【約定】的方式來根據(jù)功能差異將代碼放到不同的目錄下管理柱徙，以實現(xiàn)規(guī)范化缓屠。但是?規(guī)范約定不等于擴展性差，相反 Egg 有很高的擴展性护侮，可以按照團隊的約定定制框架敌完。使用 Loader 可以讓框架根據(jù)不同環(huán)境定義默認配置，還可以覆蓋 Egg 的默認約定羊初。
目前阿里集團內(nèi)部不同事業(yè)部門內(nèi)蠢挡，已經(jīng)?基于 Egg 形成了多少適合自身業(yè)務(wù)的上層框架，并且接受了真實業(yè)務(wù)的洗禮凳忙。

Egg 是在阿里大力推行前后端分離的環(huán)境下业踏，主推的 BFE（backend for frontend）解決方案，由眾多大佬?在背后支撐涧卵，內(nèi)部已經(jīng)也將會在越來越多場景下使用勤家，插件生態(tài)圈也日益完善，相信在推進 js 服務(wù)器端地位中能起到?不小的作用柳恐。

其他

?學習了 Docker 的簡單使用伐脖，一般用于模擬服務(wù)器環(huán)境的部署測試。?完整的學習了 ES6 中所有的新技術(shù)點乐设，這里推薦 ES6 入門 系列文章讼庇，非常詳細。學會使用? xmind 等各種流程圖制作工具近尚，幫助做項目設(shè)計或者工作的計劃蠕啄，提高效率，努力做到系統(tǒng)、高效的規(guī)劃工作和日常生活歼跟。由于改用了 mac和媳，所以命令行和 shell 能力有了不少進步，開始使用簡單的腳本代替重復(fù)性的勞動哈街。?學習了 gRPC 這?個由谷歌開源的 RPC 框架留瞳，簡單了解了和 RESTFul 的對比。從 ant.design 中學習界面設(shè)計的理念骚秦，從《騰訊網(wǎng) UED 體驗設(shè)計之旅》中學習用戶體驗的哲學她倘。持續(xù)關(guān)注 react 發(fā)展，雖然已經(jīng)很久沒使用過 react 了作箍，不過 react 的思想總是能引領(lǐng)潮流硬梁。

總結(jié)與展望

由于以前缺乏規(guī)劃和總結(jié)，以上說的并不全蒙揣，但是也能看出來其實一年以來進步學習到的和進步并?沒有?令人滿意靶溜，規(guī)劃和總結(jié)還有動手能力开瞭，是下一年最重要的非技術(shù)方面需要提升的點懒震。而在技術(shù)方面，?這里列一下感興趣并且個人認為將會越來越重要的技術(shù)點嗤详，明年主要學習這些方面：

• GraphQL
• 桌面端 electron
• 移動端技術(shù)个扰，選擇一個或多個技術(shù)方案（react native/ionic/weex/Cordova）嘗試做個人項目
  ?
• 移動端的開發(fā)
• 學習 WebAssembly
• PWA
• Typescript，爭取使用 Typescript 開發(fā)一個真正的項目
• 關(guān)注 rollup葱色、parcel 等新類型的打包工具
• ?再學習一門后端語言（計劃是 GO）

個人方面：

• 堅持計劃和規(guī)劃
• 堅持思考和總結(jié)
• 學習從更高的層面思考和看待項目递宅，產(chǎn)品和團隊
• 早睡
• 少刷知多看書（之前知乎2017總結(jié)活動，?顯示我?在知乎看了500多萬字苍狰，不知道真實與否办龄，但是希望明年能控制在100萬字以內(nèi)）

版權(quán)聲明：原創(chuàng)文章，如需轉(zhuǎn)載淋昭，請注明出處“本文首發(fā)于xlaoyu.info”