各大互聯網公司的前端開發流程和前端架構是怎麼做的呢?


通過框架(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持續集成。消息通知那塊用的野狗即時通信,目前暫定方案。即時聊天那塊用的融雲。

上述應該是公司的技術開發體系。。。


推薦閱讀:

學完了 HTML、CSS、JS 和 jQuery,怎樣進一步鞏固前端技術呢?
怎麼提高大家對前端團隊的價值認可?

TAG:前端開發 | 前端工程師 | 前端架構 |