基于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跨域协议的设置

对访问域白名单控制， 集成的可配置文件

常规错误处理。