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

LeanEngine-Full-Stack

The FULL STACK DEVELOPER

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

Ｇenerator 或者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安裝    ＳＡＳS而非直接寫css 文件

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

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

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

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

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

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

常規錯誤處理等

Ｗeb 前端   從總體技術棧選擇上能夠看出，是一個穩健而且有必定前瞻性的技術方案。

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

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

Ａngular 1.4在性能上有較大的提高， ＥＣＭＡＳcript 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項目則是徹底

Ｗeb 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層組件稀缺， 即使是

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

Ｒeact 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

ＵＩ框架主要基於Angular Material, 構建

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

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

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

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

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

常規錯誤處理。