前言
今年七月份，我和幾個小伙伴們合伙建立了一個開發團隊。業務開展如火如荼的同時，團隊宣傳就提上了日程，所以迫切需要搭建公司網站出來。確定目標后我們就開始考慮如果構建一個企業網站。先是進行業內調查，看了看別人家的網站是怎么做的。總體來講，國外網站的設計和使用的技術總能比國內高很大一截，國內很多公司，甚至是很多軟件公司都不注重公司網站的構建，網站千篇一律，沒有特色。很多網站都是使用Wordpress，然后自定義皮膚。也有一些設計類公司，網站頁面做的很漂亮，設計也前衛，但是前端源代碼寫的一塌糊塗。我們起初的方案也是想使用Wordpress作為基礎來設計網站，網站UI從已有開源的皮膚基礎上修改。這樣既能節省開發成本，又能體現獨一無二。其實，剛開始也是這么做的，並且已經做出來了第一版了。只是實在是覺得和別人家的網站差別不大，太普通了，並且網站也沒有任何體現我們專注於Web開發這一特質。權衡再三之后，決定從頭開發一個企業網站出來，使用我們團隊擅長的技術重新開發一個網站出來。決定前端使用AngularJS和Bootstrap構建，后端使用node.js和Express構建。經過一個多月的努力完成的項目的第一版。下面將詳細介紹這個項目的基礎結構設計。
項目整體設計
技術上，項目前端使用AngularJS和Bootstrap，后端使用node.js和Express。網站自動化構建工具使用grunt。網站整體應用了流行扁平化設計和響應式設計。當然，UI設計是我們團隊的弱項，所以很多都是借鑒（抄襲）了別人的設計。網站前端代碼基於HTML5，支持Chrome、Safari、Firefox及IE9+，使用IE8瀏覽器打開網站會自動跳轉到引導用戶下載現代瀏覽器的頁面中。網站應用了響應式設計，所以在智能手機上也可以愉快地瀏覽。
項目是完全開源的，github上的地址是：eRealm，項目演示地址：eRealm Info & Tech。
代碼結構介紹
推薦使用Webstorm打開項目。打開項目后，代碼結構如下圖所示：
在主體結構中從上到下介紹。app文件夾包含了所有后端代碼；build文件夾中包含了最新數據庫備份；config包含有網站整體的配置；logs文件夾包含網站后端記錄的日志文件；node_modules是包含所有的node.js依賴包（源代碼中初始沒有此文件夾，運行npm install命令后所有加載的依賴包放置在此文件夾中）；public文件夾包含了所有的前端代碼，包括JavaScript、less、圖片、Webfont等；.bowerrc中定義了bower管理前端庫的下載地址；bower.json則配置了項目需要的前端庫；.jshintre-client和.jshintrc-server分別為前后端JavaScript代碼規范檢查規則；.travis.yml為[travis]（https://travis-ci.org/）自動編譯配置；app.js為node.js啟動腳本文件；build.sh為單獨編寫的自動發布bash命令；gruntfile.js為grunt配置文件；newrelic.js為newrelic的配置文件，用於監控網站性能；package.json包含了所有node.js依賴包配置。
項目后端結構
項目后端代碼架構如下圖所示：
主要分為兩大部分：app和config。app里面按照職責不同來分類，每個腳本文件對應於不同的模塊；api文件夾包含了所有api對應的業務邏輯代碼，helper放置一些公用方法，如郵件發送、日志記錄、數據庫連接等等；templates放置的是靜態郵件模板；views是后端頁面模板，使用了handlebar模板引擎，其中http中放置系統錯誤顯示頁面，layouts放置模板頁；routes是express對應的路由配置，所有的頁面和API的路由配置都在這個文件中。config文件夾中為系統配置，按照不同環境分為開發和現場兩個環境配置，all.js放置共通配置，development.js放置開發環境對應配置而production.js放置線上環境配置。配置內容包括郵件發送、數據庫連接及一些第三方API所需的key等等。
項目前端結構
項目前端代碼結構如下所示：
前端代碼全部放置於public文件夾下。data目錄包含一些靜態json格式數據，后期可能會考慮放到數據庫中。helper中是瀏覽器下載引導頁面；images包含了所有項目中用到的圖片，我們盡量使用第三方的圖片服務器保存圖片，一些小圖標也盡量使用webfont。JavaScripts文件夾包含所有JavaScript文件，其中app子目錄放置業務代碼，業務代碼都是按照業務不同封裝成了不同的angularjs controller；debug子目錄放置調試用代碼，而libs方式前端JavaScript庫，項目中使用得JavaScript庫有angularjs、jQuery及一些插件；clients.js是所有ajax請求函數；erealm.js是angularjs的主模塊；language.js包含了所有多語言配置，目前支持中英文。stylesheets包含了所有的css樣式及webfont，除了第三方庫之外，自定義的樣式全部使用了less。作為一種慣例，項目中添加了humans.txt文件，表明項目的作者信息。有關humans.txt，可以參考官方網站humans.txt。
自動化構建工具
項目自動化構建使用grunt。grunt的使用涉及開發、調試、發布階段。開發階段使用了圖片壓縮和前端代碼格式美化，使用的工具是imagemin和jsbeautifier，運行grunt prepare命令。調試階段使用了代碼規范檢查、less編譯、自動添加瀏覽器前綴、自動加載運行nodejs並打開瀏覽器、實時監控代碼變化並刷新頁面等。開發中，使用grunt命令即可，為默認grunt命令。發布階段包含了JavaScript及css合並壓縮，並在文件路徑上添加哈希值來避免瀏覽器緩存問題，同時刪除開發環境中使用的代碼，使用grunt build命令即可把代碼切換為發布環境。
具體的使用grunt方法及相關工具的介紹，后期會有專門的技術文章講解，這里不會詳細設計技術細節。
后期持續的改進點
項目完成的比較倉促，但是我們盡量保持代碼的整潔和可維護性，一些編碼方式也借鑒當前流行的最佳實踐。但理想是美好的，現實總是不會做到那么完美，需要不斷的完善。目前存在的問題是后端代碼結構不夠清晰、整體代碼中無用代碼還沒有來得及移除。框架上期望把jQuery去掉，只使用Angularjs，目前只做到了盡量不用jQuery中的方法。小圖標的使用上Bootstrap和 Font Awesome重復，后期會逐步刪除Font Awesome而只使用Bootstrap中帶的小圖標。目前，最大的問題是項目沒有完整的自動化測試，這個后期會逐步添加。
總結
以上是這個開源項目的整體技術結構介紹。在這個項目中，我們會持續使用最流行的Web技術，希望得到大家的持續關注，如果有開發者能一塊貢獻一些代碼，我們將會非常高興。我們已經在github.io上構建了一個技術平台來發布Web技術文章，網址是blog.erealm.cn。博客網址也同樣開源，使用了Jekyll構建。Jekyll非常強大，最大的特點是使用markdown格式來發布文章。博客的代碼在這里：github。
我們做這個開源的項目的目的有兩個，其一是通過這個項目來展示我們做Web項目的實力，及培養團隊技術水平。其二是借助這個項目，能和同行們有個技術上的互動和交流。如果我們的項目能讓一些新手們學到一些做Web項目的經驗，我們就很知足了。技術是不斷革新的，而國內Web技術向來是落后於國外好幾年，這個是不爭的事實。我們erealm團隊樂意為國內Web貢獻自己的力量，也歡迎國內同行們和我們交流Web開發經驗。
*本文同時發表到了團隊技術博客上及我個人博客上，請訪問blog.erealm.cn或www.dang-jian.com查看最新修改版。