各大互聯網公司的前端開發流程和前端架構是怎麼做的呢?
通過框架(vue,angular,kissy)組織,把html、css、js寫成不像html(mustache,dot,jade)、css(less,sass,compass,stylus)、js(babel,coffee)
用模塊工具或框架(webpack,broswerify,seajs,kissy)組織各種模塊化(cmd,amd,kmd)、組件化
再用工具(grunt,gulp)打包解析壓縮合併成html、css和js,最後版本控制(git,svn,cvs)
發布到靜態資源平台(cdn),後端提供介面前端渲染或是後端(有時候許可權也在前端那兒)將前端html文件套成後端語言模板發布上線。
總而言之,離不開「三化」——模塊化,組件化,工程化
——————7.26號更新完畢——————
瀉藥
這玩意估計沒人能答全細節
事實上這些公司里基本上一個大部門會有自己的獨立的開發流程和架構
不過也不外乎這些玩意- 編碼規範
- CSS
- JS
- HTML
- 小文件開發引入規範
- AMD
- CMD
- 自定義等
- 項目目錄結構規範
- lib、或組件開發(使用)規範
- codereview
- 版本庫使用及方式
- git
- svn
- 主幹開發、分支上線
- 或相反等
- 上線方式
- 是否強制經過codereview
- 前端獨立上線
- 前後端一起上線
- 運維上線等
- 輔助工具
- 代碼掃描類
- 語法、規範符合與否掃描
- 注釋掃描提取文檔
- 代碼修正類
- CSS 補全
- JS 修正語法樹、補全
- IDE
- 代碼合併打包類
- 圖片壓縮類
- 版本控制器類
以後前端要處理業務邏輯咯,後端只需要提供介面數據
目前分為手機端和PC端兩種開發流程手機端: 前後端完全分離,採用Vue.js作為開發框架,NPM作為包管理,Less組織樣式,Webpack作為模塊載入工具,Gulp作為打包工具,反正是前端使用怎麼方便怎麼來,各種新奇的玩具都可以用上,後端只需要提供數據介面,開發完成後直接打包把靜態資源丟到CDN上,這樣的模式開發起來最舒服。PC端: 因為考慮到SEO問題,所以不能採用前後端完全分離的方式。考慮到後台是Java開發,所以不能引進nodejs作為中間層渲染(我強烈要求引進,畢竟前端把控渲染層能夠做更多的優化以及開發更為舒適,但是nodejs開發不好招啊,還有運維沒有node經驗,我一個人扛不來啊,所以只能作罷~),那麼採用velocity模版作為渲染層,前端產出頁面,然後自個按照velocity模版進行佔位符填充,然後再丟給後端進行數據渲染,沒有問題就可以將頁面返回給前端,編譯打包等等流程也全部由前端處理,前後端相安無事,前端改改樣式,寫寫js,完全不要依賴後台。
坐標三線小城市,江蘇鎮江(香醋,鍋蓋面,餚肉),物流公司旗下互聯網公司,為總公司做產品服務,前端開發目前從vue1.0+typescript 到現在的vue2.0+typescript,angular從1.5.8+typescript到現在的angular4.0。前後端分離,前端通過apiurl訪問介面,ajax請求json數據。
首先公司技術總監(全棧工程師)在前端剛組建好的時候,就有計劃要推行typescript,所以,在接觸angular1.5.8的時候,還是純js,後期項目上線穩定後,就用typescript去重構,前端開發當時只有4個菜鳥,加上技術總監輔助一起5人,在15年的時候就計劃著去學習typescript,但是當時我們前端開發部門才剛組建,就3個前端開發菜鳥,基礎不紮實,也就是純js寫寫業務,一開始還沒有直接上手angular,而是先用的knockout.js+require.js去做的數據雙向綁定和模塊化開發。
算是剛組建的前端開發的一小步,後來項目實施並不理想,就上了angular+yoeman+bower+gulp+karma+jasmine,這麼一套全家桶(15年時前端開發,目前這個項目因為是公司的主要項目,經過1年多的迭代已經比較龐大,所以暫時沒有時間去重構,不過有考慮到用angular4.0或直接上react重構,目前處於穩定迭代狀態)公司後台是.net平台,現在已經由之前的framework轉為了core,微服務化,公司的所有項目一律在docker上構建,並且一直都是Jenkins CI持續集成。消息通知那塊用的野狗即時通信,目前暫定方案。即時聊天那塊用的融雲。
上述應該是公司的技術開發體系。。。
推薦閱讀: