每個前端團隊都在打造自己的前端開發(fā)體系，這通常是一個東拼西湊，逐漸磨合的過程秀仲，在技術發(fā)展日新月異的今天，這樣的過程真的是不可抽象和復制的么糕篇？本文希望能夠通過系統(tǒng)的拆解前端開發(fā)體系為大家提供體系設計思路參考啄育。
什么是前端集成解決方案
前端集成解決方案酌心，英文翻譯為 Front-end Integrated Solution拌消，縮寫fis，發(fā)音[f?s]
前端集成解決方案并不是一個新詞匯安券，將這個詞拆開來看墩崩，我們能得到：
- 前端：指前端領域，即web研發(fā)中常用的瀏覽器客戶端相關技術侯勉，比如html鹦筹、js、css等
- 集成：將一些孤立的事物或元素通過某種方式改變原有的分散狀態(tài)集中在一起址貌，產(chǎn)生聯(lián)系铐拐，從而構成一個有機整體的過程徘键。[1]
- 解決方案：針對某些已經(jīng)體現(xiàn)出的，或者可以預期的問題遍蟋，不足吹害，缺陷，需求等等虚青，所提出的一個解決問題的方案它呀，同時能夠確保加以有效的執(zhí)行。[2]
總結來說棒厘，前端集成解決方案就是：
將前端研發(fā)領域中各種分散的技術元素集中在一起纵穿，并對常見的前端開發(fā)問題、不足奢人、缺陷和需求谓媒，所提出的一種解決問題的方案。
前端領域有哪些技術元素
前端行業(yè)經(jīng)歷了這么長時間的發(fā)展何乎，技術元素非常豐富篙耗，這里列舉出一般web團隊需要用到的技術元素：
1、開發(fā)規(guī)范：包括開發(fā)宪赶、部署的目錄規(guī)范宗弯，編碼規(guī)范等。不要小瞧規(guī)范的威力搂妻，可以極大的提升開發(fā)效率蒙保，真正優(yōu)秀的規(guī)范不會讓使用者感到約束，而是能幫助他們快速定位問題欲主，提升效率邓厕。
2、模塊化開發(fā)：針對js扁瓢、css详恼，以功能或業(yè)務為單元組織代碼。js方面解決獨立作用域引几、依賴管理昧互、api暴露、按需加載與執(zhí)行伟桅、安全合并等問題敞掘，css方面解決依賴管理、組件內(nèi)部樣式管理等問題楣铁。是提升前端開發(fā)效率的重要基礎【裂悖現(xiàn)在流行的模塊化框架有requirejs、seajs等盖腕。
3赫冬、組件化開發(fā)：在模塊化基礎上浓镜，以頁面小部件(component)為單位將頁面小部件的js、css劲厌、html代碼片段放在一起進行開發(fā)竖哩、維護，組件單元是資源獨立的脊僚，組件在系統(tǒng)內(nèi)可復用相叁。比如頭部(header)、尾部(footer)辽幌、搜索框(searchbar)增淹、導航(menu)、對話框(dialog)等乌企，甚至一些復雜的組件比如編輯器(editor)等虑润。通常業(yè)務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染加酵、交互問題拳喻。
4、組件倉庫：有了組件化猪腕，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享冗澈，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西陋葡，現(xiàn)在流行的組件庫有bower亚亲、component等。團隊發(fā)展到一定規(guī)模后腐缤，組件庫的需求會變得非常強烈捌归。
5、性能優(yōu)化：這里的性能優(yōu)化是指能夠通過工程手段保證的性能優(yōu)化點岭粤。由于其內(nèi)容比較豐富惜索，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]剃浇。性能優(yōu)化是前端項目發(fā)展到一定階段必須經(jīng)歷的過程巾兆。這部分我想強調的一點是 性能優(yōu)化一定是一個工程問題和統(tǒng)計問題，不能用工程手段保證的性能優(yōu)化是不靠譜的偿渡，優(yōu)化時只考慮一個頁面的首次加載臼寄，不考慮全局在宏觀統(tǒng)計上的優(yōu)化提升也是片面的。
6溜宽、項目部署
：部署按照現(xiàn)行業(yè)界的分工標準，雖然不是前端的工作范疇质帅，但它對性能優(yōu)化有直接的影響适揉，包括靜態(tài)資源緩存留攒、cdn、非覆蓋式發(fā)布等問題嫉嘀。合理的靜態(tài)資源資源部署可以為前端性能帶來較大的優(yōu)化空間炼邀。
7、開發(fā)流程：完整的開發(fā)流程包括本地開發(fā)調試剪侮、視覺效果走查確認拭宁、前后端聯(lián)調、提測瓣俯、上線等環(huán)節(jié)杰标。對開發(fā)流程的改善可以大幅降低開發(fā)的時間成本，工作這些年見過很多獨立的系統(tǒng)（cms系統(tǒng)彩匕、靜態(tài)資源推送系統(tǒng)）將開發(fā)流程割裂開腔剂，對前端開發(fā)的效率有嚴重的阻礙。
8驼仪、開發(fā)工具：這里說的工具不是指IDE掸犬，而是工程工具，包括構建與優(yōu)化工具绪爸、開發(fā)-調試-部署等流程工具湾碎，以及組件庫獲取、提交等相關工具奠货，甚至運營胜茧、文檔、配置發(fā)布等平臺工具仇味。前端開發(fā)需要工具支持呻顽，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發(fā)所使用的語言（js丹墨、css廊遍、html）以及前端工程資源的加載與定位策略決定了前端工程必須要工具支持。由于這些工具通常都是獨立的系統(tǒng)贩挣，要想把它們串聯(lián)起來喉前，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發(fā)工具設計產(chǎn)生一定的影響王财，因此能否串聯(lián)其他技術要素卵迂，使得前端開發(fā)形成一個連貫可持續(xù)優(yōu)化的開發(fā)體系，工具的設計至關重要绒净。
以上8項见咒，1-3是技術和業(yè)務相關的開發(fā)需求，4是技術沉淀與共享需求挂疆，5-8是工程優(yōu)化需求改览。
經(jīng)過這些年的工程領域實踐下翎，個人覺得以上8項技術元素應該成為絕大多數(shù)具有一定規(guī)模的前端開發(fā)團隊的標配。各位讀者可以對照自己團隊現(xiàn)狀來思考一下團隊開發(fā)體系還有哪些環(huán)節(jié)需要完善宝当。
攢一套前端集成解決方案
不難發(fā)現(xiàn)视事，其實其他領域工程也基本需要解決上述這些問題。前端由于其領域語言的獨特性庆揩，使得前端工程在解決這些問題上跟其他工程有很大區(qū)別俐东，因此至今也沒有形成一套比較好的理論體系指導團隊實踐前端工程。
仔細觀察過一些團隊的技術體系形成過程订晌，大家都在努力拼湊上述8項技術元素的具體解決方案虏辫。單獨觀察每一項技術點，你或許會覺得都能各自找到已有的實現(xiàn)腾仅，但我要說乒裆，把所有8項技術點無縫的串聯(lián)起來，是一項非常有挑戰(zhàn)的工作推励，你信么鹤耍？相信真正經(jīng)歷過這樣事情的同學能明白我說的串聯(lián)成本問題。
假設我們希望實踐一套完整的前端集成解決方案验辞，好了稿黄，如果我們單獨去看每一項技術點，都可能會找來一兩個現(xiàn)成的東西跌造，假設我們東拼西湊的找全了所有8項技術要素對應的具體實現(xiàn)杆怕。接下來要用了，它們能很完整流程的跑起來么壳贪？
正如前面的貼圖展示的那樣陵珍，所有的技術點都有一定的內(nèi)在聯(lián)系：
- 模塊化開發(fā)涉及到性能優(yōu)化、對構建工具又有一定的配套實現(xiàn)要求违施，也會影響開發(fā)規(guī)范的定制互纯；
- 組件化開發(fā)應該基于模塊化框架來加載其他依賴的組件，如果組件化框架自帶模塊管理功能磕蒲，那么就可能導致工程性的性能優(yōu)化實現(xiàn)困難留潦；
- 組件庫應該與組件化開發(fā)配套，組件倉庫中的組件都應該按照相同的標準來實現(xiàn)辣往，否則下載的組件不具有可復用性兔院、可移植性，就是去了倉庫的意義站削；
- 我們設計的開發(fā)規(guī)范工具是否能很容易的實現(xiàn)坊萝，如果部署上有特殊要求，工具是否能很容易的做出調整，而不是修改規(guī)范屹堰。
- 工具是否能提供接入公司已有流程中的接口肛冶，比如命令調用街氢，如果工具需要一些系統(tǒng)環(huán)境支持扯键，公司的ci流程中是否能支持等問題。
前端領域語言的特點決定了攢一套集成解決方案有很高的實現(xiàn)成本珊肃。因為前端語言缺少包荣刑、導入、模塊等開發(fā)概念伦乔，這使得各個技術點的解決方案在設計的時候都是考慮被獨立使用的情況下如何工作厉亏，因此或多或少的會延伸自己的職責。比如模塊化框架要附屬構建工具烈和，甚至要求后端服務（比如combo）爱只，組件化框架自帶模塊化框架，構建工具自帶部署規(guī)范等招刹，這就大大提高了將各個技術要素融合起來的成本恬试。
總之，前述的8項技術要素之間有許多聯(lián)系疯暑，這就為打造一套完整連貫的前端集成解決方案帶來了較大的挑戰(zhàn)训柴。如何兼顧規(guī)范、性能妇拯、框架幻馁、流程、部署等問題越锈，就不是東拼西湊那么簡單的事了仗嗦。后面我會單獨撰文介紹如何實現(xiàn)一套集成解決方案。
