前端融合方向技術棧

閒談Web前端

基於React/React-native統一棧

原創文章 做者 Jerry

---

產品C端屬性決定了，前端技術棧的橫向跨度較大，前端應用高可用性要求高。目前開發平臺有IOS、Android、React-native、Web， 開發語言以Java、javascript、Object-C爲主。

如何理解前端，以下圖所示：

這是一個典型的中臺-小前端的模式，Native提供中臺輸出，Web、ReactNative提供業務支持

Web端開發人員，須要關心三個交互，兩個兼容性：

• 用戶交互

  • 用戶交互是基於人機交互原則、產品架構，而給出的設計原型。
  • 用戶交互方案會因結果倒逼而進行調整，例如：

  接入第三方web頁面A，指望A做爲子流程展示在咱們的站點B中，而且B交互過程當中 能夠與A的流程進行溝通。受限於安全每每做爲非法者不容許在B中直接操做A中元素，此時建議將A以彈窗形式展現，處理完A流程直接關閉 在B中繼續下一步流程。這樣即兼顧了美感、流程設計更合理。因此Web開發在弱場景下實現業務需求，須要反饋出問題，給出建議。

• 後臺交互

  • Web開發人員，後臺交互過程減小交互次數、明確須要數據，減小冗餘數據返回、優化錯誤處理

• APP交互

  • Web開發須要定義出具體入參、出參，儘可能複用已有接口。

• 系統兼容性

  • C端產品，面向最廣大用戶，系統兼容性須要考慮不一樣廠商瀏覽器兼容性、瀏覽器版本兼容性、APP平臺兼容性。瀏覽器兼容性可經過轉譯、墊片獨立解決，平臺兼容性依賴APP開發者提供解決方案，web端配合。

• API版本兼容性

  • API版本兼容性，後臺API、APP API。後臺API暫時不區分版本處理，只須要配合接口優化。APP須要考慮版本碎片化，新增APP接口方案對於舊版本APP如何處理。

• 交互設計是設計人員根據業務需求，結合各端須要和限制而商討出的約束，肯定的輸入給出肯定的輸出。

• 👆接口即文檔，好的接口約束，能夠下降各端複雜度和協做難度。

技術棧

• HTML5(簡單介紹比較有用的技術點)

  • PostMessage:解決跨域、窗口通訊問題
  • LocalStorage/SessingStorage:Web端數據存儲
  • Canvas:繪製圖形、HTML轉PDF
  • Video/audio: 播放流媒體
  • Input: placehoder、輸入類型number/date/text/passwrod、長度min/max、disabeld
  • requestAnimationFrame
  • WebGL
  • IndexDB
  • .....

• Sass/less/Css

  • 盒子模型及不一樣瀏覽器差別

  • 移動端適配方案：rem、vm

    • rem:經過動態計算屏幕尺寸和設計尺寸的比例，來設定HTML根節點的字體大小，全局樣式渲染是根據根節點字體適配
    • vm:基於視區的百分比

  • 樣式模塊設計

    • 通用性樣式抽取，模塊化引入
    • 樣式預處理postCss

• Ajax/fetch

  • Axios請求庫基於xmlHttpRequest封裝,經常使用於網絡資源請求的場景。

    • 抽象出Axios實例，經過配置化方式根據不一樣的場景，初始化不一樣的網絡請求對象 例如：web實現API server A和 API server B後臺交互，後臺定義了不一樣的交互規則

      const axios = require('axios');
         export const axiosA = axios.create('https://server.a.com',{
              baseURL:"https://exampleA.api.com"
         })
         export const axioB = axios.create('https://server.a.com',{
                               baseURL:"https://exampleB.api.com"
                          })
      複製代碼

  • fetch接口抽象出了Headers、Request、Response對象。

• DOM/BOM API

  • DOM增刪改查接口
  • DOM事件流，事件捕獲、事件目標、事件冒泡
  • BOM瀏覽器交互接口，路徑導航、瀏覽器信息查詢、base64轉換、屏幕信息

• ES6等語法糖

  • Object
  • const/let
  • Promise
  • class
  • Symbol（新增基本類型）
  • async/await(如何實現？)
  • ...

• React

  • 生命週期
    • 建立週期 鉤子函數
    • 更新週期 鉤子函數
    • 銷燬 compoentWillUnmount
  • 父子通訊／兄弟通訊
    • 父子通訊組件間傳值，數據單向流動，
    • 兄弟通訊，經過共同的父組件管理狀態同步信息
  • 狀態管理，全局狀態管理、組件狀態管理
    • 全局狀態:提示框、路由、權限管理
    • 組件狀態管理：頁面數據、交互效果
  • 高階組件設計
  • 通用性UI組件設計
  • 組件複用性
  • 渲染性能優化
  • 虛擬DOM樹更新機制
  • 時間分片

• React-router

  • react-router設計理念
  • 組件化設計
  • 基於路由的代碼分割

• Redux

  • Redux設計理念
  • 共享數據的管理
  • 數據一致性設計

• Antd/Antd-mobile

  • 定製化使用
  • 按需加載

• echart

  • 前端數據模型設計
  • 業務組件設計

• Babel

  • Babel 6/Babel 7
  • Presets/Plugins/Transform/Polyfill
  • 語法降級（移動端兼容性）

• Eslint

  • 代碼風格校驗 airbnb
  • 使用方式 打包器配置使用 IDE編輯器配置使用

• webpack

  • 基礎配置
  • 插件使用
  • 定製本地化開發環境
  • 打包分析

• npm/yarn

  • npm包開發規範
  • yarn使用場景
  • nrm
  • nvm
  • 鏡像切換

• git

  • git開發流程
  • git使用技巧
  • 合併代碼，解決衝突
  • git rebase及如何變基

• Browser Environment

  • 瀏覽器安全措施
    • 同源策略
    • 內容安全保護策略
  • 瀏覽器工做原理
  • 瀏覽器開發者工具
  • 瀏覽器兼容性

• CommonJS規範

  • 演變歷史

• HTTP協議 應用層協議，基於TCP/IP通訊協議傳輸數據。HTTP消息格式：請求行、請求頭部、空行和請求數據四個部分組成。

  • cache 用於提升Web性能，首先要理解緩存的存儲策略、失效策略、緩存對比策略。
  • cookie
  • CORS
  • Session
  • HTTP各個版本
  • CSP
  • HTTP狀態碼
  • HTTP Method
  • HTTP Headers

• Nginx

  • 反向代理與正向代理
  • 前端使用詳解
    • 單頁應用配置路徑匹配規則
    • 用戶請求頭信息透傳
    • gizp配置
    • 代理轉發

• Jekins

  • Jekins集成步驟
  • 多環境詳解

• UI框架

  • Bootstrap

• Web框架

  • React
  • Vue
  • Angular

• React-native框架

  • 基礎組件
  • 佈局方式
  • 路由配置

• 第三方庫

  • lodash
  • moment
  • Crypto-js
  • xlsx
  • codemirror
  • medium-editor
  • shelljs
  • yeoman

• Webview

  • webview基礎概念
  • 不一樣平臺差別
  • 系統不一樣版本差別
  • 跨平臺通訊方式

• Typescript/Flow

  • 使用場景 大前端團隊協做、無界面渲染、中臺-小前端模式協做

• SEO友好

  • 搜索爬蟲
  • 社交平臺分享
  • 服務端渲染
  • 富媒體對象

• License MIT\BSD,瞭解開源license有助於咱們在選取開源框架過程避開版權風險