近幾年前端技術的快速發展，開發能力與開發難度在逐漸上升。一方面，大型項目中的技術選型，項目結構組織問題一直沒有統一的實踐方式。另一方面，前端項目的開發工具遠遠落後於技術本身的發展。大家現在使用的VSCode，Sublime Text仍然只屬於代碼編輯器，和十年前的記事本之類沒有本質區別。因爲它們並不是真正的IDE，既不瞭解項目結構，也不瞭解什麼是組件或是Store。這使得大家在項目中各自爲戰，常常針對特定的項目架構寫很多腳本來自動化開發流程。這在一定程度增加了項目複雜度，也限制了大型應用的開發。
在面臨大型、複雜項目的開發時，如何利用各種框架和工具來提高前端的開發質量和效率是大家關注的重點。在QCon 2018上海站，eBay中國研發中心資深技術專家王沛向開發者介紹瞭如何使用Rekit開發可擴展的前端應用。
React專用IDE：Rekit
Rekit發展的前期只是一個腳本的工具集，隨着逐漸發展，現在已經是一個完整的IDE，可以從開發到打包覆蓋整個前端開發過程。前端項目開發時需要考慮前端的架構，理想中的項目架構應該是易於開發、易於擴展、易於測試、易於構建、易於維護的，其中擴展性是非常重要。
很多項目創建初期，規模很小，模塊之間的關係很清楚，增加一個新功能沒有任何障礙，需求開發起來非常快。逐漸發展後，項目裏新增的模塊越來越多，關係慢慢複雜起來，少數幾個人能對項目有完整的把控，大部分人只關注自己的模塊。到了項目收尾階段，錯綜複雜的代碼結構，複雜的依賴關係，使新增功能或項目的重構都變得非常不自信，項目在這種惡性循環中逐漸走向低靡，甚至死亡。
面對這種現狀，建議的實踐方式是：以業務邏輯爲模塊，對整個項目的複雜度進行拆分。即在項目中，將每個新功能做成一個獨立的Feature，成爲一個特性獨立的功能，每個Feature之間的耦合性非常低，所以，相互獨立的同時，功能的複雜度只集中在每個Feature之內，類似插件的架構，每個插件很容易添加也很容易清除，對項目整體的擴展很有幫助。
React如何實現這樣的架構
設定了這樣一個可擴展的架構，下面來看如何用 React 技術棧去實現它。一個React App 已經自然的由組件樹構建UI。實際上不僅僅是組件，通過結合Redux reducers，也可以把整個應用程序的Store，同樣React router的配置也可以分成小塊。通過這樣做，可以將可以把複雜應用程序的管理變成對應用塊的管理。
從技術的實踐上來看，以往在複雜的結構中開發，大家需要手動創建很多很文件來維護，最後，徘徊在多個源代碼文件中做開發成爲了一件很痛苦的事。Rekit最初以腳本的角色實現自動創建Feature、創建路由等，發展的近兩年，Rekit成爲一個完整的IDE，完全可以用來開發React可擴展的應用程序。
Rekit如何解決當前Web開發中遇到的問題
前端技術越來越強大，開發越來越複雜，界面的某個功能通常需要建立多個源文件，代碼樣板文件非常複雜，手動創建過程很耗時，重構也非常困難，功能修改時，需要修改多處文件來保持一致。
Rekit的解決思路：首先，提供最直觀的可視化圖標，幫助你更好的理解項目。
視圖分爲概覽圖、元素圖。概覽圖是Rekit項目架構的直觀視圖，它具有交互性，可以直接把鼠標移動到Features、 Components或Actions上來查看某些特定元素的關係。元素圖提供了所選元素和其他元素之間的關係，它有助於快速理解一個模塊，並幫助找出過於複雜的模塊。
還有一種解決方法就是提供新的組織代碼導航方式，用語義化的方式組織源代碼，使用二級Tab來切換某個項目元素的不同源文件，依賴關係的視圖可以在相關的代碼之間快速切換。
如何用Rekit幫你創建一個新的項目元素？
在開發現在的現代Web應用的時候，可能代碼的樣板文件是非常複雜的。例如創建一個組件，通常意味着我們創建一個js React class，還要創建樣式文件和測試文件。而在 Rekit 中，通過右鍵菜單，就可以通過直觀的 UI 對話框去創建一個組件，輸入組件名，根據自己需求決定是否需要connect to store，還可以指定是否需要一個Url，幫助你自動註冊一條規則來訪問組件，點擊完成，Rekit會幫助你生成所有的代碼，詳細頁中會告訴你它背後究竟創建了哪些文件，修改了哪些代碼，從而做到心中有數。
前端的重構也比較麻煩，要創建一個異步的action，在重命名時，所有的常量名字，文件名都和action這個名字連在一起，這種重命名就出現了困難。Rekit是通過右鍵菜單重命名或者刪除某個項目元素，項目元素的不同部分會被自動重構，從而保持代碼一致性。
如何利用Rekit來開發大型React Web應用
Rekit爲什麼能幫助開發者做一些自動化的事情？
首先，它定義了一個固定模式的文件夾結構，比如我們有一套可擴展的文件夾結構，此時你規定好組件，action，路由的定義，利用工具去遵循這些規定。其次，工具中集成了一些最佳實踐，這些最佳實踐體現到技術上都是一個代碼的樣板文件，藉助工具幫助你自動生成代碼。
Rekit提供了一個可擴展的機制，基於Rekit,在項目開發時是可以開發一個插件的，描述自己的項目結構，定義自己的項目元素模板，從而幫助你去開發自己的項目模式。Rekit主要是提供了一些可擴展的API。
在 eBay 業務中，主要採用了自主開發的 Marko 這樣一個開源的前端框架，eBay所有的網站都是用這套框架來做，它主要特點是運行在 NodeJS，服務器端爲主。這樣一個項目的源代碼組織其實也與現在的 Web 開發有很類似的問題。因此也需要語義化地展示項目，而不是以文件夾的方式去組織。而基於 Rekit 去定實現一個專職的 IDE 需要做的就是定義這些項目元素，模板，顏色等等，定義完之後，就能夠以語義化的方式去組織文件，同時它還會生成一個依賴關係圖，這個圖可以直觀地看到項目中哪些部分比較多，依賴關係是什麼樣。例如，下圖就是 Marko 的項目開發界面。
綜上所述，Rekit 不僅僅是用於 React 開發的一款 IDE，同時也可以方便的去擴展以支持自己的項目結構，從而打造出內部專用的 IDE，以保證大家都能夠以一致的方式去進行前端開發。目前 Rekit 插件機制仍然處於完善階段，到 Rekit 3.0 會正式發佈，敬請期待。
以上是王沛老師在QCon上海站的精彩分享。正在籌備中的QCon北京2019，將會有寒冬老師出品策劃前端專題，內容側重於前端技術趨勢和前端工程實踐，敬請持續關注。