big frontend

big-frontend

• 以Todo-App為例，體驗前後端各種框架和庫。
• 服務器的地址為http://localhost:8080
• 前後端的接口為：
  • 獲取所有的TODO： {path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}]
  • 添加新的TODO: {path: '/api/todo', method: 'POST', status: 201, return: ''}
  • 完成或關閉指定TODO: {path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''}
  • 刪除指定的TODO: {path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}

已完成的後端

• {tech: 'spring-boot', tag: 'springboot-backend'}

已完成的Web前端

• {tech: 'vuejs', tag: 'use-vue-frontend' }
• {tech: 'vuejs-vuex', tag: 'use-vuex'}
• {tech: 'react', tag: 'use-react'}
• {tech: ['react', 'redux'], tag: 'use-react-redux'}
• {tech: ['react', 'hooks'], tag: 'use-react-hooks'}
• {tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'}
• {tech: ['react', 'typescript'], tag: 'use-react-typescript'}
• {tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}

已完成的命令行前端

• {tech: ['react', 'ink'], tag: 'use-ink-cli'}

可獨立運行的前端

• {tech: 'jquery', tag: 'use-jquery-in-static-web' }
• {tech: 'javascript', tag: 'use-pure-javascript' }

目的

• 了解前端、後端的含義
• 了解多種前端的差別與聯繫
• 了解大前端的意義
• 體驗大前端主流的技術框架

前端、後端

• 前端：設計並實現系統中關於人機交互的界面
  • 命令行：控制台程序。通常使用C、C#、Java 等語言進行實現。通過命令和參數，以及scanf 和printf 進行輸入和輸出
  • 桌面：利用窗口、菜單、表單等多種圖形控件，使用鍵盤和鼠標等多種設備完成輸入和輸出。常用的技術包括MFC、Java Swing、Qt、WPF 等
  • Web(H5)：與桌麵類似，但運行在瀏覽器中。採用的技術主要有HTML5，CSS3，Javascript
  • 移動端：以手機為載體，常見的移動端包含Android 和iOS
  • 小程序：無需要安裝和部署，運行在微信等應用內，在國內比較流行。如微信小程序、QQ 小程序、百度小程序、支付寶小程序、快應用......
• 後端：也稱服務器端。一般用於提供數據和服務。
  • 常見的處理流程
    • 數據存儲在數據庫中
    • 服務器接收來自前端的請求，一般為HTTP 請求
    • 根據請求，調用相關的業務邏輯，返回計算結果
    • 根據計算結果，返迴響應，一般為HTTP 響應。響應可以有多種表示，如JSON，HTML 等
  • 常用的技術和框架
    • Java EE，ASP .Net，PHP
    • Spring，Hibernate
    • ...
• 傳統應用的開發特點
  • 前端、後端採用的技術棧不統一
  • 多種前端採用的技術棧也不統一
  • 前後端開發方式與思路不統一
  • 很難有同時精通前後端的工程師

大前端、全棧

• 2009 年，Nodejs誕生

  • 將Javascript 的運行環境從瀏覽器中獨立出來
  • Javascript 成為一門宿主語言
  • 當前最新版本為10.16.0
  • 借鑒了後端的工程思想，產生了眾多的以Nodejs 為基礎的庫，框架和工具
    • MVC：Angular/Vue/React（前端三大框架）
    • Maven/Gradle：NPM/Yarn
    • 依賴注入：Angular Inject/Vue Inject
    • 單元測試：Jest/Jasmine/AVA
    • 單頁應用（SPA）：ES6/Babel/Webpack
    • Spring：nestjs
    • 響應式框架：RxJS
    • 模塊化：import/export
    • ...
  • 開創了許多新的開發思想和實踐
    • 狀態管理：Redux
    • 組件化UI：便於代碼重用
    • 函數式編程：如，React Hooks
    • 前後端的邊界逐漸模糊，大前端的趨勢正在形成

• 大前端、全棧

  • 以Nodejs 為基礎，Javascript 語言開始實現後端功能
  • 全棧：MEAN
    • Mongodb：以JSON 格式存儲數據的NoSQL 數據庫
    • Express：用於開發服務器後端的框架，能夠處理HTTP 請求
    • Angular：採用MVVM 的前端UI 框架
    • Node：使用Node 開發模塊
  • 以Javascript 語言為開發語言，以一種框架為開發框架，同時適配多個前端
    • H5 端：基礎React 框架
    • 移動端：基於React 框架的React Native 框架，可同時支持iOS 和Android
    • 桌面端：React Native for Windows，微軟官方開發，2019 年5 月份開源，目前還沒有穩定版本
    • 小程序，快應用等：由京東開發的基於React 的Taro 框架
    • 命令行：基於React 框架的ink 框架