前端融合方向技術棧

Jerry在掘金發表於2019-05-07
前端

閒談Web前端

原創文章 作者 Jerry

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

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

image

這是一個典型的中臺-小前端的模式，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、async/await

  • React

    • 生命週期

      • 建立週期 componentWillMount render componentDidMount
      • 更新週期
      • 銷燬 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輔助理解

  • 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
    • jQuery

  • Web框架

    • React
    • Vue
    • Angular

  • 第三方庫

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

  • Webview

    • webview基礎概念
    • 不同平臺差異
    • 系統不同版本差異
    • 跨平臺通訊方式

  • Typescript/Flow

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

  • SEO友好

    • 搜尋爬蟲
    • 社交平臺分享
    • 服務端渲染
    • 富媒體物件

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

相關文章