转载

基于 LeanCloud 云引擎的 Web 全栈方案：LeanEngine-Full-Stack

很多工程师使用 LeanCloud 之后，发现一个人就可以 hold 住一个完整项目，尤其是一个 Web 项目。原因很简单，本来复杂繁琐的数据库操作，通过使用 LeanCloud 的 JavaScript SDK 变得轻而易举，再结合 LeanCloud 提供服务器端容器 —— 云引擎 LeanEngine（支持 Node.js 和 Python 两种环境），就可以很高效地开发出一个 Web 端项目。

背景

开始尝试 LeanCloud 时项目并不大，也不算复杂，大家都是很简单地去写代码，但是随着使用的深入，开发变得越来越顺手，有些工程师开始尝试设计复杂的项目。只要项目复杂了，就会有很多底层的事情需要考虑，比如协作分工、自动化流程、代码组织结构、框架选择、国际化方案等等。LeanCloud 的很多项目就是基于自身所提供的服务，在开发过程中我们遇到过很多问题，也为此纠结过，所以我们将目前使用的 Web 全栈方案整理成一个新的项目，作为一个 Generator 或者 Seed，供大家交流和使用。

简介

项目名为「 LeanEngine-Full-Stack 」，就放在 LeanCloud 官方的 GitHub 仓库中，地址为 https://github.com/leancloud/LeanEngine-Full-Stack 。

LeanEngine-Full-Stack 是基于 LeanEngine Node.js 服务的 Web 全栈开发技术解决方案。它整合了当前 Web 技术中通用的技术方案，并与 LeanEngine 紧密结合，将基础架构、自动化构建、国际化方案等底层技术解决方案组织成一个整体。用户可以通过最简单的方式，直接开始业务开发，不必再纠结那些底层的技术选型了。

主要技术栈：

语言层面，整套方案 JavaScript 代码全部使用 ECMAScript 6。
Server 端运行环境基于 LeanEngine Node.js 环境，依赖安装通过 npm，服务框架主要基于 Express 4.x。
Web 前端自动化方案主要基于 Gulp，框架基于 Angular 1.4.x，UI 框架主要基于 Angular Material，构建依赖基于 npm，Web 前端依赖通过 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 Compoment 的组织方式。
底层配置，包括 HTML5 CORS 协议的底层支持、域名白名单等配置。
纯前端路由方案，基于 HTML5 History API 和 ui-router 。
自动构建系统，基础的代码压缩、合并、ECMAScript 和 SASS 编译等过程，也会将构建后的生成代码拷贝到 public 目录中，供发布使用。
SASS 的基本结构，以及一些 Mixin 和基础单元的处理方式。
纯前端的国际化方案，可以实时切换语言资源。

基本结构

. ├── public          // LeanEngine Web 前端发布目录，HTML/CSS/JavaScript 构建后将放置于此 ├── server-modules  // 服务器端代码模块目录 │    ├── app.js            // LeanEngine 服务端代码主入口 │    ├── api-router.js     // API 接口路由配置 │    ├── tool.js           // 工具方法 │    └── hello.js          // 示例代码 ├── web-project     // Web 前端项目目录 │    ├── gulp           // 自动化构建的逻辑模块 │    ├── dist           // 构建之后的源码目录 │    └── src            // 源码目录 └── server.js       // LeanEngine 的环境配置

LeanEngine-Full-Stack 目录结构

整套架构 Server 端与 Web 前端完全分离，在 Server 端编写 REST API，Web 项目则是完全的 Web App，而不是通过模板来耦合。web-project 目录包含了 Web 项目的全部代码，是完全独立的一套体系，也可以提取出去，作为单独项目维护。

整套技术方案有很多细节，具体的使用方式可以到 GitHub 仓库中直接查看使用说明及源码。我们知道该项目还有很多地方需要改进，所以我们非常欢迎感兴趣的开发者一起参与讨论，积极贡献代码。如果你对 Web 全栈开发有需求，欢迎来试用。

其他问题

前端框架为什么选择 Angular？

基于 LeanCloud 云引擎的 Web 全栈方案：LeanEngine-Full-Stack

业内最新的技术以及解决方案 LeanCloud 也都有持续跟进，并且我们也积极同 Angular、React Native 等团队积极交流，目前构建 Web App 的框架选择主要会在 Angular1.x、Angular2.x、React 和 Ploymer 之间有所纠结，而我们最终选择了 Angular 1.4.x 版本。

主要解释下为什么没有选择 React：目前 React 应该是大家最感兴趣的框架，但是并不成熟。React 本身最创新的地方是解决了 View 层的分离，将渲染与编译过程分离，在 Web 端表现为将 JSX 变为 Virtual Dom，再将 Virtual Dom 每次 Diff 后的部分渲染为 HTML。而开发一个应用程序不仅仅需要这些，还需要一套完备的处理各种底层问题的方案，如我们在上面技术栈列出的那些方面。React 数据层 Flux 编程范式并不成熟，UI 层面组件稀缺，即便是前端路由方案也是颇有争议，黑科技不断。

所以，在这种情况下，为了能做出一个长期可维护的产品，我们暂时不选择 React 来做 Web App。当然，LeanCloud 会持续跟进 React Team 的最新动态。另外，推荐一下 React Native，虽然 React 构建 Web App 优势并不明显，但是 React Native 则大大提高了 Native App 的开发体验，其优势远大于目前的劣势，所以欢迎大家尝试一下。LeanCloud 的 JavaScript SDK 也支持 React Native 中使用。

为什么全部使用 ECMAScript 6？

基于 LeanCloud 云引擎的 Web 全栈方案：LeanEngine-Full-Stack

一门编程语言会影响一个人的编程思路，ECAMScript 对 JavaScript 这门用了七天设计出来的语言做了很多优化和革新，比如箭头函数、语言层面的模块化、原生的 Promise 等，这些都是让人眼前一亮的特性，其他大大小小的改进也很多。而且在 2015 年 ECMAScript 6 已经定稿，所有浏览器最终都一定会支持这个版本的 JavaScript，那么我们有什么理由不开始尝试呢？而且通过很多的前端构建，可以让我们不用去过多考虑浏览器的兼容性，所以我们选择全部使用 ECMAScript 6。

服务端通过在 LeanEngine 中运行 node --harmony 来实现对 ECMAScript 6 的支持（因为目前 Node.js 4.x 刚刚发布，等我们的 LeanEngine 完全对其支持了，harmony 参数就可以去掉了）。前端通过直接写 ECMAScript 6 的方式来编码，而没有选择如 TypeScript 之类的 ECMAScript 6 超集，这是因为我们还是希望能够编写更纯粹的 JavaScript，前端会通过 babel 自动化编译处理。总体来看，这也算是稳健且有前瞻的选择。

正文到此结束