2017個(gè)人技術(shù)回顧

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

時(shí)間線

今年年初的時(shí)候，“臨危受命”接手了廣告管理系統(tǒng)的前臺(tái)工作，由此開(kāi)始了 Vue.js 之旅。之后同樣由于工作需要，開(kāi)始維護(hù) web 服務(wù)端，使用 scala 語(yǔ)言加 play framework 框架，深深體會(huì)到了 當(dāng)面向?qū)ο蠹由虾瘮?shù)式 的強(qiáng)大和復(fù)雜。從年中開(kāi)始新項(xiàng)目，為了和集團(tuán)技術(shù)接軌，web 服務(wù)端改為使用 egg 框架，學(xué)習(xí)到了什么是企業(yè)級(jí)解決方案以及為什么需要?這么做，開(kāi)始學(xué)會(huì)從非技術(shù)角度看待工程問(wèn)題，提升自己的技術(shù)視野和?技術(shù)管理相關(guān)的技能。其中還學(xué)到了零零碎碎的知識(shí)，比如學(xué)會(huì)用 Docker；慢慢學(xué)習(xí)做?系統(tǒng)設(shè)計(jì)，寫(xiě)設(shè)計(jì)文檔；學(xué)習(xí)視覺(jué)設(shè)計(jì)，交互體驗(yàn)以提升自己的設(shè)計(jì)能力等等，就不一一詳細(xì)列舉了。

技術(shù)盤(pán)點(diǎn)

大概說(shuō)一下使用的幾個(gè)?主要技術(shù)點(diǎn)的認(rèn)識(shí)和見(jiàn)解。

Vue.js

首先說(shuō)說(shuō) Vue -- 一個(gè)最近兩年在快速發(fā)展的，由尤雨溪大神開(kāi)發(fā)的 MVVM 框架。通過(guò)使用單文件組件方式，Vue 通過(guò)把模板(template)、邏輯(script)和樣式(style)三種代碼組織在一個(gè) .vue 文件中，個(gè)人感覺(jué)是目前為止在眾多前端組件化框架中屬于非常易于理解的，功能完整且靈活的、接近標(biāo)準(zhǔn)的前端組件化?解決方案。

?易于理解

Vue 組件中的 template、script 和 style 三個(gè)部分分別對(duì)應(yīng)的是傳統(tǒng)前端開(kāi)發(fā)中的 .HTML、.js 和 .css 文件，如果項(xiàng)目是使用 vue-cli 初始化或者是公司內(nèi)部已經(jīng)有定制的項(xiàng)目架手腳，那么一個(gè)前端開(kāi)發(fā)只要?稍微有點(diǎn) ?ES6 的基礎(chǔ)，在看過(guò)文檔了解 Vue 的基礎(chǔ)語(yǔ)法之后，就可以快速的上手開(kāi)發(fā)。這是因?yàn)橥ㄟ^(guò)框架和工具層面的配合，把很多晦澀難懂或者在傳統(tǒng)前端領(lǐng)域不存在概念給屏蔽了，使得我們并不需要做非常多的思想上的轉(zhuǎn)變就能使用上 Vue。這和另外兩大框架 React 和 Angular ?非常不一樣，我們不需要在寫(xiě)了多年 HTML 之后再去學(xué) JSX 語(yǔ)法，也不需要子安說(shuō)了多年要展示，邏輯，樣式分離之后卻又說(shuō)要 CSS IN JS 和 JSX IN JS。更加不需要去學(xué)習(xí) Angular 中的一大堆 API 和新概念。Ps：上述對(duì)其他框架的描述不是說(shuō)明那些特性不好，而是?針對(duì)易于上手這一點(diǎn)的對(duì)比。

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：易于上手容易理解有時(shí)候反而成為了其他框架或者開(kāi)發(fā)者嘲笑 Vue 的點(diǎn)ㄟ( ▔, ▔ )ㄏ。。

功能完整且靈活

V?ue 中包含了 8個(gè) 組件生命周期 hook 方法，讓用戶有機(jī)會(huì)在不同的階段增加自定義行為。

vue lifecycle

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

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

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

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

接近標(biāo)準(zhǔn)

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 對(duì)比，Polymer 是以符合 Web Component 作為其主要特點(diǎn)的解決方案。最近了解到一個(gè)也是以 WebComponent 為主要特點(diǎn)的解決方案是 stencil.js，使用了 decorator 加 class 來(lái)申明組件，個(gè)人感覺(jué)非常有意思，會(huì)持續(xù)關(guān)注。下面說(shuō)說(shuō)為什么 Vue 很容易和 WebComponent 集成。

  • 還記得上面提的 Vue 單文件組件中是使用 <template> 標(biāo)簽組織組件的 HTML 代碼嗎？Vue 中對(duì)的 template 和 slot 標(biāo)簽的使用，和HTML Template、HTML Slot標(biāo)準(zhǔn)概念上是一致的。

  • 組件的創(chuàng)建、數(shù)據(jù)雙向綁定、生命周期方法、事件的綁定和組件邏輯控制，在 WebComponent 里則是以 Custom Element 接口提供實(shí)現(xiàn)。

  • 先看看 WebComponent 標(biāo)準(zhǔn)實(shí)現(xiàn)一個(gè)完整的組件代碼，效果

    <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 特性，也能完全實(shí)現(xiàn) Shadow DOM 中樣式的封裝性。眾所周知?，css ?中的全局性一直是其一大痛點(diǎn)，為了解決這個(gè)問(wèn)題，我們一開(kāi)始從命名規(guī)范入手，出現(xiàn)了 BEM，SMACSS 和 OOCSS，到后來(lái)通過(guò)編譯工具實(shí)現(xiàn) css in js，css module 都是為了解決此問(wèn)題。

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

Scala

作為臨時(shí)人員，寫(xiě)了僅僅一段時(shí)間的 scala，雖然都是非常?淺顯的使用，但是已經(jīng)?能深深感受到它的強(qiáng)大--無(wú)數(shù)的語(yǔ)法和內(nèi)置對(duì)象?和內(nèi)置方法，強(qiáng)大的重載機(jī)制，使 scala 能輕松做到很多 java 非常?難實(shí)現(xiàn)甚至無(wú)法實(shí)現(xiàn)的效果。其中在異步并發(fā)編程中使用 Await 接口的語(yǔ)法更讓我感覺(jué)語(yǔ)言之間都是?相通的，互相借鑒和相互學(xué)習(xí)的。

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 框架的時(shí)候，深深被 Twirl 模板語(yǔ)法惡心到了，不過(guò)話說(shuō)回來(lái)，這種在 scala 代碼中寫(xiě) html 代碼的形式是不是和 React 很像?？??

還有就是學(xué)習(xí)到了 akka 的思想，使用 Actor 模型 解決高并發(fā)，分布式，彈性的基于消息驅(qū)動(dòng)的解決方案，獲益良多。其他方面真·不敢妄言了，還在學(xué)習(xí)語(yǔ)法中。。。

吐槽：scala 是真·CPU、內(nèi)存殺手，開(kāi)著 IDEA + scala 編譯，分分鐘占用10G+內(nèi)存，而且編譯速度也?很慢，估計(jì)只有 google 的程序猿才可以無(wú)感使用這個(gè)語(yǔ)言。。。

Egg

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

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

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

我們深知企業(yè)級(jí)應(yīng)用在追求規(guī)范和共建的同時(shí)，還需要考慮如何平衡不同團(tuán)隊(duì)之間的差異，求同存異。

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

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

其他

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

總結(jié)與展望

由于以前缺乏規(guī)劃和總結(jié)，以上說(shuō)的并不全，但是也能看出來(lái)其實(shí)一年以來(lái)進(jìn)步學(xué)習(xí)到的和進(jìn)步并?沒(méi)有?令人滿意，規(guī)劃和總結(jié)還有動(dòng)手能力，是下一年最重要的非技術(shù)方面需要提升的點(diǎn)。而在技術(shù)方面，?這里列一下感興趣并且個(gè)人認(rèn)為將會(huì)越來(lái)越重要的技術(shù)點(diǎn)，明年主要學(xué)習(xí)這些方面：

  • GraphQL
  • 桌面端 electron
  • 移動(dòng)端技術(shù)，選擇一個(gè)或多個(gè)技術(shù)方案（react native/ionic/weex/Cordova）嘗試做個(gè)人項(xiàng)目
    ?
  • 移動(dòng)端的開(kāi)發(fā)
  • 學(xué)習(xí) WebAssembly
  • PWA
  • Typescript，爭(zhēng)取使用 Typescript 開(kāi)發(fā)一個(gè)真正的項(xiàng)目
  • 關(guān)注 rollup、parcel 等新類(lèi)型的打包工具
  • ?再學(xué)習(xí)一門(mén)后端語(yǔ)言（計(jì)劃是 GO）

個(gè)人方面：

  • 堅(jiān)持計(jì)劃和規(guī)劃
  • 堅(jiān)持思考和總結(jié)
  • 學(xué)習(xí)從更高的層面思考和看待項(xiàng)目，產(chǎn)品和團(tuán)隊(duì)
  • 早睡
  • 少刷知多看書(shū)（之前知乎2017總結(jié)活動(dòng)，?顯示我?在知乎看了500多萬(wàn)字，不知道真實(shí)與否，但是希望明年能控制在100萬(wàn)字以內(nèi)）

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容