基於LeanCloud雲引擎的Web全棧方案


LeanEngine-Full-Stack

The FULL STACK DEVELOPER

復雜的項目, 協作分工, 自動化流程,代碼組織結構,框架選擇,國際化方案等

Generator 或者Seed    

LeanCloud Node.js 服務的 Web 全棧開發技術解決方案。

將基礎架構, 自動化構建, 國際化方案等底層技術解決方案組織成一個整體。

整套方案Javascript代碼全部使用ECMAScript6

Server端運行基於LeanEngine Node.js環境,npm  Express 4.X

主要基於Gulp  框架基於Angular.1.4.X  UI框架基於Angular Material 

npm    bower安裝    SASS而非直接寫css 文件

整個腳手架Server基於LeanEngine   底層已將API路由的基礎結構做好,

並且將一些常規處理也整合在內

服務端基本代碼結構,組織結構

基礎的路由分層, 默認在/api/路由下

對API的HTML5  CORS跨域協議的設置

對方問域白名單控制,集成的可配置文件

常規錯誤處理等

Web 前端   從整體技術棧選擇上可以看出,是一個穩健並且有一定前瞻性的技術方案。

成熟的Angular架構體系,UI設計層面基於Google 積累多年面發布的設計語言

Material Design, UI框架基於Angular Material 框架

Angular 1.4在性能上有較大的提升, ECMAScript 6 來開發

代碼基本組織結構  趨向於HTML5 Web Component 的組織方式

底層配置   包括HTML5 CORS協議的底層支持, 域名白名單等配置。

純前端路由方案, 基於HTML5 History API   和 ui-router

自動構建系統, 基礎的代碼壓縮,合並,ECMAScript和SASS編譯等過程,

也會將構建后的生成代碼拷貝到public 目錄,供發布使用。

SASS的基本結構, 以入一些Mixin 和基礎單元的處理方式。

純前端的國際方案,可以實時切換語言資源。

基礎結構

public   //LeanEngine Web 前端發布

server-modules

  app.js    //服務端代碼主入口

  api-router.js  //API接口器由配置

  tool.js    // 工具方法

  hello.js   //示例代碼

-- web-project//Web前端項目目錄

  -- gulp   自動化構建的邏輯模塊

  --dist      //構建軍之后的源碼目錄

  --src     //  源碼目錄

-- server.js        LeanEngine  的環境配置

整套架構Server端與Web 前端完全分離, 在Server端編寫REST API, Web項目則是完全

Web App, 而不是通過模板來耦合, web-project目錄包含了Web項目的全部代碼,是完全獨立的

一套體系, 也可以提出出去, 作為單獨項目維護。

前端框架為什么選擇Angular

Angular 1.x  Angular 2.x React 和Ploymer之間有糾結, 而我們最終選擇了Angular 1.4.x版本

React 並不成熟 解決了View層的分離,將渲染與編譯過程分離, 

在Web端表現為將JSX變為Virtual Dom, 再將Virtual Dom 每次Diff后的部分

渲染為HTML, 而開發一個應用程序不僅僅需要這些,還需要一套

完備的處理各種底層問題的方案, 如我們在上面技術列出來的方面。

React數據層Flux 編輯范式並不成熟, UI層組件稀缺, 即便是

前端路由方案也是頗有爭議, 黑科技不斷。

React Native 但是大提高了Native App 的開發體驗,其優勢

大於目前的劣試。

LeanCloud中的Javascript SDK也支持React Native中使用

ECMAScript 6

箭頭函數,語言層面的模塊化,原生的Promise   全部使用

node --harmony 來實現對ECMAScript 6的支持, Node.js 4.x 剛發布

完全對其支持了, TypeScript 之類的ECMAScript 6超集, 更

純粹的JavaScript, 前端會通過babel 自動化編譯處理。

LeanEngine - Full- Stack

該項目為基於LeanCloud提供的Nodejs服務  LeanEngine 的Web 全

棧開發的技術解決方案

將基礎架構, 自動化構建,國際化方案等底層

技術問題的解決方案組織在一起。

自動化方案基於Gulp ,  框架基於Angular 1.4.x

UI框架主要基於Angular Material, 構建

依賴於npm , Web前端依賴通過bower安裝,

服務端基本代碼結構,組織結構

基礎的路由分層,默認在/api/路由下

對API的HTML5 CORS跨域協議的設置

對訪問域白名單控制, 集成的可配置文件

常規錯誤處理。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM