淺談前端集成解決方案

原文出處：https://github.com/fouber/blog/issues/1
作者：fouber

目錄

每個(gè)前端團(tuán)隊(duì)都在打造自己的前端開發(fā)體系，這通常是一個(gè)東拼西湊，逐漸磨合的過程，在技術(shù)發(fā)展日新月異的今天，這樣的過程真的是不可抽象和復(fù)制的么？本文希望能夠通過系統(tǒng)的拆解前端開發(fā)體系為大家提供體系設(shè)計(jì)思路參考。

什么是前端集成解決方案

前端集成解決方案，英文翻譯為 Front-end Integrated Solution，縮寫fis，發(fā)音[f?s]

前端集成解決方案并不是一個(gè)新詞匯，將這個(gè)詞拆開來看，我們能得到：

• 前端：指前端領(lǐng)域，即web研發(fā)中常用的瀏覽器客戶端相關(guān)技術(shù)，比如html、js、css等
• 集成：將一些孤立的事物或元素通過某種方式改變?cè)械姆稚顟B(tài)集中在一起，產(chǎn)生聯(lián)系，從而構(gòu)成一個(gè)有機(jī)整體的過程。[1]
• 解決方案：針對(duì)某些已經(jīng)體現(xiàn)出的，或者可以預(yù)期的問題，不足，缺陷，需求等等，所提出的一個(gè)解決問題的方案，同時(shí)能夠確保加以有效的執(zhí)行。[2]

總結(jié)來說，前端集成解決方案就是：

將前端研發(fā)領(lǐng)域中各種分散的技術(shù)元素集中在一起，并對(duì)常見的前端開發(fā)問題、不足、缺陷和需求，所提出的一種解決問題的方案。

前端領(lǐng)域有哪些技術(shù)元素

前端行業(yè)經(jīng)歷了這么長時(shí)間的發(fā)展，技術(shù)元素非常豐富，這里列舉出一般web團(tuán)隊(duì)需要用到的技術(shù)元素：

1. 開發(fā)規(guī)范：包括開發(fā)、部署的目錄規(guī)范，編碼規(guī)范等。不要小瞧規(guī)范的威力，可以極大的提升開發(fā)效率，真正優(yōu)秀的規(guī)范不會(huì)讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。

2. 模塊化開發(fā)：針對(duì)js、css，以功能或業(yè)務(wù)為單元組織代碼。js方面解決獨(dú)立作用域、依賴管理、api暴露、按需加載與執(zhí)行、安全合并等問題，css方面解決依賴管理、組件內(nèi)部樣式管理等問題。是提升前端開發(fā)效率的重要基礎(chǔ)?，F(xiàn)在流行的模塊化框架有requirejs、seajs等。

3. 組件化開發(fā)：在模塊化基礎(chǔ)上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進(jìn)行開發(fā)、維護(hù)，組件單元是資源獨(dú)立的，組件在系統(tǒng)內(nèi)可復(fù)用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導(dǎo)航(menu)、對(duì)話框(dialog)等，甚至一些復(fù)雜的組件比如編輯器(editor)等。通常業(yè)務(wù)會(huì)針對(duì)組件化的js部分進(jìn)行必要的封裝，解決一些常見的組件渲染、交互問題。

4. 組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個(gè)公共的地方供團(tuán)隊(duì)共享，方便新項(xiàng)目復(fù)用，這個(gè)時(shí)候我們就需要引入一個(gè)組件倉庫的東西，現(xiàn)在流行的組件庫有bower、component等。團(tuán)隊(duì)發(fā)展到一定規(guī)模后，組件庫的需求會(huì)變得非常強(qiáng)烈。

5. 性能優(yōu)化：這里的性能優(yōu)化是指能夠通過工程手段保證的性能優(yōu)化點(diǎn)。由于其內(nèi)容比較豐富，就不在這里展開了，感興趣的同學(xué)可以閱讀我的這兩篇文章 [1] [2]。性能優(yōu)化是前端項(xiàng)目發(fā)展到一定階段必須經(jīng)歷的過程。這部分我想強(qiáng)調(diào)的一點(diǎn)是?性能優(yōu)化一定是一個(gè)工程問題和統(tǒng)計(jì)問題，不能用工程手段保證的性能優(yōu)化是不靠譜的，優(yōu)化時(shí)只考慮一個(gè)頁面的首次加載，不考慮全局在宏觀統(tǒng)計(jì)上的優(yōu)化提升也是片面的。

6. 項(xiàng)目部署：部署按照現(xiàn)行業(yè)界的分工標(biāo)準(zhǔn)，雖然不是前端的工作范疇，但它對(duì)性能優(yōu)化有直接的影響，包括靜態(tài)資源緩存、cdn、非覆蓋式發(fā)布等問題。合理的靜態(tài)資源資源部署可以為前端性能帶來較大的優(yōu)化空間。

7. 開發(fā)流程：完整的開發(fā)流程包括本地開發(fā)調(diào)試、視覺效果走查確認(rèn)、前后端聯(lián)調(diào)、提測、上線等環(huán)節(jié)。對(duì)開發(fā)流程的改善可以大幅降低開發(fā)的時(shí)間成本，工作這些年見過很多獨(dú)立的系統(tǒng)（cms系統(tǒng)、靜態(tài)資源推送系統(tǒng)）將開發(fā)流程割裂開，對(duì)前端開發(fā)的效率有嚴(yán)重的阻礙。

8. 開發(fā)工具：這里說的工具不是指IDE，而是工程工具，包括構(gòu)建與優(yōu)化工具、開發(fā)-調(diào)試-部署等流程工具，以及組件庫獲取、提交等相關(guān)工具，甚至運(yùn)營、文檔、配置發(fā)布等平臺(tái)工具。前端開發(fā)需要工具支持，這個(gè)問題的根本原因來自前端領(lǐng)域語言特性（未來我會(huì)單獨(dú)寫一篇文章介紹前端領(lǐng)域語言缺陷問題）。前端開發(fā)所使用的語言（js、css、html）以及前端工程資源的加載與定位策略決定了前端工程必須要工具支持。由于這些工具通常都是獨(dú)立的系統(tǒng)，要想把它們串聯(lián)起來，才有了yeoman這樣的封裝。前面提到的7項(xiàng)技術(shù)元素都直接或間接的對(duì)前端開發(fā)工具設(shè)計(jì)產(chǎn)生一定的影響，因此能否串聯(lián)其他技術(shù)要素，使得前端開發(fā)形成一個(gè)連貫可持續(xù)優(yōu)化的開發(fā)體系，工具的設(shè)計(jì)至關(guān)重要。

以上8項(xiàng)，1-3是技術(shù)和業(yè)務(wù)相關(guān)的開發(fā)需求，4是技術(shù)沉淀與共享需求，5-8是工程優(yōu)化需求。

經(jīng)過這些年的工程領(lǐng)域?qū)嵺`，個(gè)人覺得以上8項(xiàng)技術(shù)元素應(yīng)該成為絕大多數(shù)具有一定規(guī)模的前端開發(fā)團(tuán)隊(duì)的標(biāo)配。各位讀者可以對(duì)照自己團(tuán)隊(duì)現(xiàn)狀來思考一下團(tuán)隊(duì)開發(fā)體系還有哪些環(huán)節(jié)需要完善。

攢一套前端集成解決方案

不難發(fā)現(xiàn)，其實(shí)其他領(lǐng)域工程也基本需要解決上述這些問題。前端由于其領(lǐng)域語言的獨(dú)特性，使得前端工程在解決這些問題上跟其他工程有很大區(qū)別，因此至今也沒有形成一套比較好的理論體系指導(dǎo)團(tuán)隊(duì)實(shí)踐前端工程。

仔細(xì)觀察過一些團(tuán)隊(duì)的技術(shù)體系形成過程，大家都在努力拼湊上述8項(xiàng)技術(shù)元素的具體解決方案。單獨(dú)觀察每一項(xiàng)技術(shù)點(diǎn)，你或許會(huì)覺得都能各自找到已有的實(shí)現(xiàn)，但我要說，把所有8項(xiàng)技術(shù)點(diǎn)無縫的串聯(lián)起來，是一項(xiàng)非常有挑戰(zhàn)的工作，你信么？相信真正經(jīng)歷過這樣事情的同學(xué)能明白我說的串聯(lián)成本問題。

假設(shè)我們希望實(shí)踐一套完整的前端集成解決方案，好了，如果我們單獨(dú)去看每一項(xiàng)技術(shù)點(diǎn)，都可能會(huì)找來一兩個(gè)現(xiàn)成的東西，假設(shè)我們東拼西湊的找全了所有8項(xiàng)技術(shù)要素對(duì)應(yīng)的具體實(shí)現(xiàn)。接下來要用了，它們能很完整流程的跑起來么？

正如前面的貼圖展示的那樣，所有的技術(shù)點(diǎn)都有一定的內(nèi)在聯(lián)系：

• 模塊化開發(fā)涉及到性能優(yōu)化、對(duì)構(gòu)建工具又有一定的配套實(shí)現(xiàn)要求，也會(huì)影響開發(fā)規(guī)范的定制
• 組件化開發(fā)應(yīng)該基于模塊化框架來加載其他依賴的組件，如果組件化框架自帶模塊管理功能，那么就可能導(dǎo)致工程性的性能優(yōu)化實(shí)現(xiàn)困難
• 組件庫應(yīng)該與組件化開發(fā)配套，組件倉庫中的組件都應(yīng)該按照相同的標(biāo)準(zhǔn)來實(shí)現(xiàn)，否則下載的組件不具有可復(fù)用性、可移植性，就是去了倉庫的意義
• 我們?cè)O(shè)計(jì)的開發(fā)規(guī)范工具是否能很容易的實(shí)現(xiàn)，如果部署上有特殊要求，工具是否能很容易的做出調(diào)整，而不是修改規(guī)范。
• 工具是否能提供接入公司已有流程中的接口，比如命令調(diào)用，如果工具需要一些系統(tǒng)環(huán)境支持，公司的ci流程中是否能支持等問題。

前端領(lǐng)域語言的特點(diǎn)決定了攢一套集成解決方案有很高的實(shí)現(xiàn)成本。因?yàn)榍岸苏Z言缺少包、導(dǎo)入、模塊等開發(fā)概念，這使得各個(gè)技術(shù)點(diǎn)的解決方案在設(shè)計(jì)的時(shí)候都是考慮被獨(dú)立使用的情況下如何工作，因此或多或少的會(huì)延伸自己的職責(zé)。比如模塊化框架要附屬構(gòu)建工具，甚至要求后端服務(wù)（比如combo），組件化框架自帶模塊化框架，構(gòu)建工具自帶部署規(guī)范等，這就大大提高了將各個(gè)技術(shù)要素融合起來的成本。

總之，前述的8項(xiàng)技術(shù)要素之間有許多聯(lián)系，這就為打造一套完整連貫的前端集成解決方案帶來了較大的挑戰(zhàn)。如何兼顧規(guī)范、性能、框架、流程、部署等問題，就不是東拼西湊那么簡單的事了。后面我會(huì)單獨(dú)撰文介紹如何實(shí)現(xiàn)一套集成解決方案。