前端技術棧

一、PC端WEB項目

1. 前台項目：

   • 為讓頁面在服務端渲染(首屏)且前后端分離，需引入nodejs作為web中間層。
   • 前端開發使用mvvm框架 vue/react，提高開發效率，（組件化）使項目易維護和擴展。
   • webpack/gulp 現實模塊打包和自動化構建。

2. 中后台項目： 一般后台項目都為內部管理系統，無需SEO和極致的響應時間。一般是以單頁應用為主的純前端項目。

二、PC端桌面項目

客戶端開發使用開源框架：Electron，它是基於 webkit + node.js + html5 技術來快速實現桌面開發且跨平台（Windows、Mac）。

三、移動端WebApp

移動端開發框架使用vuejs（根據項目復雜度可選），終端適配使用rem加媒介查詢或viewport。

四、移動端NativeApp

使用基於HTML5的移動APP開發技術，都有快速開發和跨平台的優勢，但根據項目需求和使用場景，可以再從下面兩方面做選擇：

• 性能優先（原生體驗）

  1. Facebook的：React Native（react）
  2. 阿里的開源框架：WEEX（vue）NativeScript（vue）
  3. Google的：Flutter（dark）

• 快速開發（基於Webview） 內容開發還類似於webapp方式，打包和底層調用使用HBuilder 或者 cordava實現。

五、小程序

小程序的開發生態不斷地在完善，從最開始的原生框架，到騰訊自己開發類vue規范的wepy，再到美團開發近vue寫法的mpvue，再到最近O2實驗室推出的遵循React規范的Taro。

到現在，有多種開發微信小程序的方式，主要有原生，wepy，mpvue，Taro，uni-app等5種框架，對比分析也是在這幾種方式中，我們可以根據業務類型和規模選擇適合團隊的框架。

uni-app類似taro，是一個使用 Vue.js 開發跨平台應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平台。

六、技術棧

•  HTML5/CSS3/ES6
•  Vue.js
•  React.js
•  Webpack
•  Node.js

Vue技術選型

• vue-cli
• fetch
• vue-router
• vuex
• webpack4, splitChunksPlugin模塊拆分 (vendor/runtime等), 異步組件
• eslint (standard), precommit (husky)
• vw

React技術選型

• create-react-app (PWA)
• fetch
• react-router
• redux, redux-actions, redux-saga, immutable
• typescript
• webpack4, react-app-rewired, splitChunksPlugin模塊拆分 (vendor/runtime等), 異步組件
• eslint (standard), precommit (husky)
• css in js (styled-components), vw

前端開發所需掌握知識點概要：

• HTML&CSS：

對Web標准的理解（結構、表現、行為）、瀏覽器內核、渲染原理、依賴管理、兼容性、CSS語法、層次關系，常用屬性、布局、選擇器、權重、盒模型、Hack、CSS預處理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（離線 & 存儲、Histoy,多媒體、WebGL\SVG\Canvas）；

• JavaScript：

數據類型、運算、對象、Function、繼承、閉包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步請求、模板引擎、模塊化、Flux、同構、算法、ECMAScript6、Nodejs、HTTP;

• 其他：

主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依賴管理、性能優化、重構、團隊協作、可維護、易用性、SEO、UED、前端技術選型、快速學習能力等；

【GIT】

>>Git 問題和操作清單

【工具】

代碼質量審查工具：ESLint/TSLint

在團隊協作中，為避免低級Bug、產出風格統一的代碼，會預先制定編碼規范。使用 Lint 工具和代碼風格檢測工具，則可以輔助編碼規范執行，有效控制代碼質量。

【調試】

• PC 端： 可直通過瀏覽器開發工具進行頁面分析和調試，也可安裝 Charles 或 Fiddler 等抓包工具進行數據分析。

• 移動端： 在PC上調試手機端頁面，可通過 Weinre、AlloyLever、Safari 等工具實現。