前端技術選型參考 ---轉

 

多端

pc

h5 （不要糾結html5 vs h5 vs wap，這裏指的是移動端網頁）

技術方案

一 pc - 業務類型

細分類型1 重展現、輕交互

典型表明 ：產品展現頁

特色 ： 對外展現產品，承載公司對外運營業務，TO C 類居多

要求 ： 穩定，快速，無障礙，高可靠性，兼容性強，強SEO

技術選型 ： node + 模板語言（ejs、pug、handlebar等） + jquery + 其餘類庫

相對傳統的頁面開發方案，服務器類型能夠選擇使用node來實現ssr；若是條件不容許生產使用node服務器，能夠考慮模板語言開發環境先作預編譯，而後部署到靜態服務器上，好比 nginx 。

細分類型2 輕展現、重交互

典型表明 ： 收銀臺頁面

特色 ： 多表單操做、頁面結構複雜，局部內容複雜

要求 ： 完成複雜交互，代碼簡單，容易維護

技術選型 ： node + 模板語言（ejs、pug、handlebar等） + jquery + 其餘類庫 + mvvm 小型庫（vuejs、knockoutjs等）

在處理複雜交互頁面時，若是隻用jquery，那麼處理交互的代碼可能會寫的比較長，比較難維護。固然jquery是萬能的，什麼頁面都能完成！ 這樣的場景，適當引入mvvm庫，能夠極大減小代碼量，更優雅的實現需求。通常來講這樣的頁面都不會考慮SEO因素。 mvvm的選擇有多種，推薦輕量級的 vuejs或者 knockoutjs。若是產品須要考慮兼容老版本IE用戶，能夠選擇knockoutjs，一直能夠兼容到 IE6 ；不然推薦使用相對來講更強大的 vuejs。

二 pc - 應用類型

典型表明 ： 運營後臺系統

特色 ： 頁面UI、交互相近，多表單操做、查詢條件因素豐富、列表數據展現、圖形報表展現、增刪改查等業務操做

要求 ： 統一的UI、交互規則，代碼複用率高，交互複雜

技術選型 ： SPA（AngularJs、Angular、Vue、React） + UI庫（semantic、bootstrap等）

SPA方案比較多，能夠根據團隊狀況，選擇適合的框架或者庫。 UI庫的選擇，除了主流的semantic、bootstrap以外，還有一些國內大廠出品的UI庫。

採用SPA方案，最大的目的是

1 使用組件化思想作到代碼複用

2 雙向綁定解脫js操做DOM工做 （Angular、Vue）

3 單向數據流明晰數據流向 （React）

其中二、3選擇互斥。

這類產品的用戶主要是公司內部人員，主要使用chrome或者開發人員能夠要求用戶使用指定的瀏覽器，那麼兼容性不是問題。

三 h5 - 業務類型

典型表明 ： 我的門戶

特色 ： 需求持續迭代、TO C 類應用、長期項目、大中型項目

要求 ： 項目代碼可維護性，業務隔離，代碼足夠小，適應移動端複雜的網絡環境

技術選型 ： SPA（Angular、Vue、React） + 根據公司UI風格本身構建css庫

這類業務，從渲染性能、文件大小等方面考慮，再也不建議是用 AngularJs 。 團隊能夠根據狀況，選擇 Angular、Vue、React 中的一種。 從業務可持續迭代角度考慮，以上3中框架、庫都能使得項目代碼規範、組件使用率高、便於長時間維護。這樣的項目通常前端開發的人員3人以上，選用這些類庫，也便於限制團隊代碼風格統一。

四 h5 - 活動、營銷、專題類型

典型表明 ： 活動頁面、專題頁面

特色 ： 時效性強，線上運營時間短，多圖片展現，業務輕，交互簡單

要求 ： 急速打開頁面，快速開發上線

技術選型 ： node + 模板語言（ejs、pug、handlebar等） + zeptojs

這類業務要求快速開發上線、線上運營時間短，上線後，沒什麼bug基本上不會有二次上線。代碼相對簡單，以展現爲主。因此考慮選擇簡單直接的技術方案。

總結

全部的技術選型，開發環境都離不開 node ，老生常談的先後端分離就不在這裏說了。 生產環境若是使用nodejs，能夠直接應用對應的模板引擎或者ssr技術。若是生產環境沒有條件使用node，以上技術方案均可以考慮開發環境作模板的預編譯成 .html 文件，而後考慮部署到靜態服務器或者參與動態服務器打包上線。

以上是經驗之談，僅供參考。

 

 

 

 

前端技術框架如何選型 以及如何在這個瘋狂的前端世界混下去

寫在前面的話

哈嘍～各位前端狗們！接下來大家將看到一個超級屌的工具集合框架列表（有沒有點小激動）。你能夠挑你比較熟悉的選項來組織，甚至若是你夠屌，就本身造一個輪子，徹底不用鳥它們。
這篇博文主要是爲了讓你瞭解如今前端圈子裏面你們都在玩些啥。 同時也能夠做爲一個工具清單來幫助你挑選你須要的工具庫。

本身會用他嗎？

「 嗯，我用它來作我組裝框架的參考～」
固然，這也是我須要給常常問「我該用什麼框架的人」說的一些話。你知道的，沒有絕對的對和錯，但爲了治好選擇恐懼症，我仍是會給出了一個框架以供參考。
最後 我更新這篇文章， 是由於的確有些東西改變了個人想法，讓我學到不少。同時，也由於，當你來這裏讀文章時已經有37個新框架發佈了ORZ。。

從何提及？

若是你構建不是一些很小的或者隨時能夠扔掉的項目，那麼你須要這些東西：

1. 模塊化你的項目
   我偏心組件化的架構，他適用於各類框架
   固然也有一些例外 好比 BOT 或者Elm Architecture 或者 re-frame 或者 CycleJS.
2. 模塊加載器/包裝器 （RequireJS，Browserify ，Webpack，ComponentJS ，Systemjs）它們能讓你的js或者組件 更加解藕易管理
3. 包管理器 npm，jspm, bower
   相比而言我更喜歡npm，在js和nodejs世界裏面它是一個不成文的標準。
   固然，bower 至關因而一種黑科技，它在下載資源庫上表現不錯，但在組件和依賴管理上仍是沒有npm的表現搶眼. 固然你可能有不一樣的觀點。
4. 自動化構建工具(grunt/gulp/broccoli)
   你懂的，生命有限，不必浪費重複性的勞動上。
5. CSS 預處理器 (jss/stylus/sass/css-modules) 以及CSS 後處理器 (csso, autoprefixer, postcss）
   這些工具讓css丟掉累贅更好的處理跨平臺問題 （是的，雖然已是這麼多年了 ，可是仍是有不少東西須要咱們去幫忙擦屁股）
6. CSS/HTML框架 (Bootstrap, Zurb Foundation, Elemental UI, Material Lite)
   
   這些吸納了不少知識和上千年的web開發者痛苦教訓的沉澱，它將幫助你解決你的基礎標記和樣式。
   
   儘管，若是你以爲你是標記語言大牛或着前端磚家，你可能會考慮構建大家本身的解決方案，可是你的確須要去爲大家公司創建一個設計字典。
   
   磨刀不誤砍柴工，我建議你們儘快去學習 兩個方法論 (BEM, OOCSS）；
   
   私心偏心BEM 的命名體系和 定製的工做流。你能夠在這裏 Brainly.com 設計指南 找到一些思路幫你構建這個解決方案
   
   若是不知道從哪開始構建你的標定方法論，那就看這裏HTML5 Boilerplate
   
   
7. 測試框架(jasmine, karma, mocha, tape, intern) 每一個人都值得擁有
8. 代碼質量審查工具 (eslint, husky, editorconfig).你估計也不想讓你的代碼亂做一團吧？
   
   
9. 一些能夠幫助到你的社區(chats, IRC, meetups, twitter)

你不是一我的在戰鬥。

接下來～

在你開始挑選你的工具並交付你的問題解決方案的時候，有些進階的問題你要搞清楚，

1. 你須要和其餘同窗一塊完成這個項目嗎？他們分別是幹啥？ 你須要的是什麼？
   這個問題的答案，將幫助你選擇工具語言和工做流，這於你於公司都是有益的。
2. 我平時工做中注重的是什麼？ 代碼質量？開發速度？仍是可維護性？
   這樣你就能夠明白是否 選用這個工具
3. 我實在處理爲核心問題服務嗎？
   若是是，那麼保險起見，就用穩定的技術和框架吧
4. 我須要把個人代碼用於第三方嗎？
   這將縮小你選擇技術範圍
5. 這是一個偏交互的app仍是更多的是靜態的文檔
   這將決定你須要 一個 html+css+tools仍是靜態網站腳手架或者就是一個CMS
6. 它是一個項目仍是一個羣族項目
   若是你有一羣項目，那就須要組件化而且訂立規範，最好是以靜態文檔的形式寫下來。
   這也爲了減小代碼過渡重複和穩定統一，同時，也能夠把seo及服務端考慮進來

語言清單

當你問答了上述問題，那麼是時候討和你的團隊討論並選擇一門語言了
由於，除了 瘋狂js 的事情， 還有不少須要考慮的。

1. 你有一隻寫js的團隊嗎？
   能夠考慮用ES6 ＋ babel ,它將讓你的code 生活更加輕鬆
   
   
2. 你喜歡類型化語言嗎？你的小弟們也喜歡咯？
   那就 來typescript
   
   
3. 你以爲函數式編程OK嗎？
   你能夠小試一下ES6 和一些好比lo-dash 或者ramda。這些庫都會有一些教程和書單 伴你前行
4. 你嘗試過函數式JS並想玩點有意思的東西嗎？
   那就試試ELM，的確很屌。。
   
   
5. 你更像是一個全棧猴？試試clojurescript.也很屌的!
6. 你是否愛上Scala了？那就scalaJs吧
   
   
7. 你知道或者喜歡Haskell？
   試試 purescript.你無法想象他有多酷 :)
8. 想更瘋狂點嗎？
   給你個清單 本身看吧

框架清單

1. 若是你須要的僅僅是爲了基礎工做服務的應用，沒時間作太酷炫的東西
   那就試試 angular（看看這篇 快速上手.）
   
   
2. 若是大家偏重於原型驅動，而且也樂於維護一些將來出現的問題
   試試 angular. 準備迎接挑戰.
   
   
3. 你是一名後端工程師，由於大家的前端狗辭職了，你須要本身構建一個前端項目。
   那仍是選擇angular。同時也要開始找一個前端來幫你了。
   
   
4. 你不在意會缺失部分功能（由於你能夠禰補），你就想開工快 構建快。
   那就來看看 ampersand/backbone + (挑選適合你的庫)
   
   
5. 你的項目和大型app擁有相同的配置？
   那麼添加 marionette/chaplin 到你的 backbone ， 或者能夠考慮 ReactJs
   
   
6. 你有時間去作嘗試，而且考慮長遠性能？
   那試試mithril/knockout/aurelia + （適合你的庫）
   
   
7. 你在普世和基礎的函數式編程有很好的前端經驗？
   那就玩 ReactJS + redux + ImmutableJS + ...
   
   
8. 你須要 更多的函數式編程技法 或者 交互性很強的app?
   增長 異步處理流 (bacon, rxJS）或者試試 Cycle.js （試驗性的哦）
   敬告：讓你們用用異步處理流是好事，請奔走相告。不要懷疑函數式編程的異步處理流。
9. 你想用強硬的規範和最佳的實踐，你的app可能會變的很大，你擴展你的團隊，你有時間投資到學習中?
   那你就投資給EmberJs吧，會是個好的投資
   
   
10. 你想要有一個像桌面程序同樣的app
    你的App有表格 圖標及其餘一些數據分析功能，你想構建企業級應用?
    
    那就ExtJS
    
    
11. 你是爲別人寫東西的外包工做室？
    那你應該已經有一些本身的工具集了，那就follow ur heart吧
    
    
12. 你是一個自由職業者，爲別人寫東西？
    首先要適應他們的需求，你能夠嘗試vuejs ，走本身的路讓別人痛苦去吧～
    注意：若是客戶不給錢你就，你就一直讓他們痛苦吧。
    
    

13. 你須要瞭解你的app的確切需求（好比 有十個頁面的移動應用）？

    能夠專門用兩個星期來試驗特殊需求 (ionic, famous, Sencha Touch)

開始編碼

1. 花點時間讀讀你選擇的框架的文檔
2. 向大牛請教，作一個良好的項目建立者
3. 裝配全部的工具
4. 運用黑科技，我建議仍是工程師一點。。
5. 效益永遠在第一位

仍是沒有辦法用這些怪異的框架開始工做？
那就看看  TodoMVC 例子也能夠多照點框架相關的列子多看看，可是請記在內心那些項目僅僅只是一些例子而已.

我不想作決定，你幫我決定吧～

蛋定～
你不想作決定，也以爲emberjs 蛋疼，你以爲你很勇敢 那就 來個串燒吧  ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma 並看看這篇文章。

別再bb 用就行了～～

看到不少人在說ReactJS ,爲什麼這麼屌～

它是web開發的將來，有文爲證。

不少大牛在用它，你也應該玩玩，我發誓它很好玩的。。
若是它不是我說的這樣 你能夠回到這片文章下面對我破口大罵～

若是對前端感興趣，看看這些在線書吧。

最後

16年的舊文了，在突飛猛進的前端世界裏面，可能有些已通過時了，可是仍是會有不少幫助。

這是一篇來自《前端雜貨鋪專欄》的文章，爲保護做者的著做權益，請按照做者意願轉載且請註明出處