“一套单页面应用,任何 path 访问都是服务端渲染、然后客户端路由,既解决 seo 问题,又解决渲染问题和前后端分离问题,并且为未来的 progresive web app 做准备。套上 servie worker 就具有离线功能。所以,从前端开发者长期受益来看,放弃 node 是弊大于利的。”—— 语自 @携程-工业聚

工程实践 + 标准化 => JavaScript 生态。

  1. 匠心之路
  2. 我的前端技能路线图

Web 前端

至今,没有最佳实践,大家对同一个问题通常有不同解法。这是 library 相对于 framework 的劣势。 截止17年初,主流的三大框架 React系、Angular 2系、Vue系 相互融合。其他类似框架或局部功能替代类库不足成事。

技术 React系(Webpack+ React + Redux) Progressive Web App 微信小应用 支付宝小程序
JS 编译器 TypeScript、FlowCoffeeScript Babel + ES6
CSS 预处理 Scss/SassLessStylus sass-loader、style-loadercss-modulesstyled-componentscssnano
CSS 后处理 PostCSSuncssCriticalCSSO
web UI Semantic UIMasonryBootstrapFuel UXRatchetFoundationMaterializeMaterial-UIAngular Material Ant Design、Fusion Design(Next/Mext)、hyperapp
UI 组件 spectrum(Colorpicker)、jquery-qrcodechosenCodeMirrorjPickerpaginationjslz-stringPapaParseparticles.jshandsontable react-colorReact-Grid-Layoutfixed-data-tablefixed-data-table-2react-virtualized、react-transitive-number、 ckeditor、 echarts、 react-list、 sortablejs
Shim es6-shimes5-shim.js
Polyfill reflect-metadata babel-polyfill、 ima.js-babel6-polyfill
DOM库 zepto、jQuery、 react-dom
HTML 5兼容旧浏览器 html5shivobject-observe(Object.observe polyfill)、
多点触摸手势库 HammerjsjGestures
工具库 lodash、underscore、LZMA-JScrypto-jsTetherPinYin、Moment、NumeralhumanizeCleave.js(格式化)、Mousetrapflat、setRafTimeout react-cookiereact-qartclassnamesglamorousglamorlocalForage、d3-format、prismjs、react-sizeme、clipboard、 detector、 pubsub-js、 query-string、 react-dropzone、 react-motion、 react-scroll
模版引擎 pug、Handlebars、Mustache、doT
异步Task跟踪,分析,错误记录、开发调试跟踪等 zone.js
模块化 ES6 Modules、Browserify(CommonJS)、RequireJS(AMD)、SeaJS(CMD)、KMD.js(KMD)、systemjs
UI 层轻量级解决方案 Vue、Inferno、Preact React、React VR
MV* 框架(路由、数据获取、状态管理) Angular、Aurelia、Avalon、Ember
Pure Render pure-render-decorator
表单验证 React 内置的 propTypes
路由控制,可选 react-router、react-router-redux、junctions
连接React 组件与 Redux store,可选 React-Redux
中间件与异步操作 Async、Q redux-thunk
不可变数据结构 Immutable.js、immutability-helper、seamless-immutable、 moricortex
应用状态管理 ngrx/store Redux(redux-promise/redux-sequence-action)、redux-immutablejs
数据层框架 Relay/GraphQL、tectonic
Node.js 模块 vm2(虚拟模块)、Hello.js(基于 OAuth 的浏览器端用户认证 SDK)、Sharp(图像调整模块)
Node.js 框架 ExpressKoa2Hapi、 Feathers、 Now(“微服务”)
Node.js ORM 框架 Sequelize.js、 Nodal(PostgreSQL)、 Keystone(MongoDB)、 Loopback
通用(Universal)JavaScript Angular 2有Universal Angular 2, Ember有Fastboot ElectrodeReact ServerNext.js
静态网页生成器(SSG) Gitlab pages、 Netlify、 Surge、 Now static、 Hexo、Docsify Gatsby

模块化

Web MV*/Virtual DOM

基于组件(component-based)的构建方式。

MVVM 双向绑定、Virtual DOM,都是解决直接操作 DOM 的“性能墙”。

传统的 DOM 操作是直接在 DOM 上操作的,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较(DIFF),从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说,采用 Virtual DOM 并不会有优势。开发者就可以创建出可交互的 UI。

  1. Github 中最流行的 JavaScript 项目(react-test):模板生成器 create-react-app、React boilerplate、express-react-views

  2. Hacker news(vue-test)

  3. 我的书柜(angular-book)

  4. Angular 2:其创建理念是声明式编程应该用于构建用户界面以及编写软件构建,而命令式编程非常适合来表示业务逻辑

  5. Aurelia

  6. React-Native:仅适用业务型场景

  7. Redux:解决 component -> action -> reducer -> state 单向数据流转问题。特点可预测、可扩展。

    domain-state 领域模型,比如user,order ui-state 纯 UI 状态,比如一个弹窗的开闭,tab 是否 active aspect-state 指一些切面,比如 redux-simple-router 需要在根 reducer上有个“routing”结点,redux-form 也需要自己的结点

Web Components/Shadow DOM

模板HTML引入Shadow DOM简介基础样式样式续),所有这些技术的终极目标就是自定义元素(custom elements)

使用 shadow DOM 的时候应该确保内容和表现的分离。

  1. webcomponentsjs
  2. Polymer

可视

专题 data-visualization

  1. JavaScript应用领域(d3-test)

工程化/工作流

专题 匠心之路—工具

试用

  1. rollup-test
  2. broccoli-babel-test
  3. grunt-babel-test
  4. phantomjs-test
  5. nightmare-test

Web 服务 && RESTful API

Node.js 一类的反应堆模式,不太适合做复杂的事务型业务。

  1. koa2-spider:借 babel 通过 async/await 来支持 ES6+
  2. hapi-app:「配置大于约定」,业务逻辑必须和传输层进行分离
  3. koa-app:通过 co 生成器支持 ES6
  4. expressjs5-app:社区生态完善。Express.js 黑历史后,IBM 过度干预,使 Douglas Wilson 在16年3月退出 5,建议转其它
  5. Restify:仅是 API 服务,可观测 Http 应用的延迟、特征等

实时服务

  1. horizon-app
  2. meteor-test

数据库的 Node 框架

ORM

  1. Sequelize:提供对 MySQL,MariaDB,SQLite ,PostgreSQL 和 MSSQL 数据库的简单访问

SQL

  1. mysql:一个纯 javascript 实现的 nodejs 的 MySQL 客户端程序。MySQL 引擎比较好
  2. node-postgres:一个支持纯 JavaScript 和本地 libpq 库绑定的 nodejs 的 PostgreSQL 客户端程序。个人感觉这个更好用点。
  3. pg-promise:PostgreSQL 的 Promises/A+ 接口
  4. sqlite3:SQLite 小、应用于移动端

NoSQL

  1. cassandra-driver:Cassandra 便于扩张
  2. redis:Redis 一般缓存、读写快
  3. Mongoose:MongoDB ODM(对象模型工具),即将 MongoDB 中数据转换为 JavaScript 对象以供在应用中使用
  4. mongodb:Mongo DB 原生的 NodeJS 驱动
  5. nano:最简约的 CouchDB 客户端
  6. level、levelup 和 leveldown:LevelDB
  7. apoc:Neo4j

开源,分布式,RESTful 搜索引擎

  1. elasticsearch:ElasticSearch 官方的 Node.js 和 浏览器客户端库

数据库

类别 数据库 特点 应用场景
SQL MySQL 分析
PostgreSQL
SQLite
NoSQL Cassandra 列存储(Wide Column Store/Column-Family)数据库 日志;博客平台
Redis 键值(Key-Value)数据库 储存用户信息
MongoDB 面向文档(Document-Oriented)数据库 日志;分析
Azure DocumentDB 一个完全托管的 NoSQL 数据库服务
CouchDB 同 MongoDB 同 MongoDB
LevelDB
Neo4j 图(Graph-Oriented)数据库 关系性强的数据; 推荐引擎
实时的分布式搜索和分析引擎 ElasticSearch 面向文档的数据库 大数据;实时监控
分布式实时处理系统 Druid 列存储,分布式

研发基础平台

  1. 部署私有 Docker Registry 服务
  2. Docker 中搭建 GitLab服务器
  3. Nginx
  4. LDAP

附录

趋势

计算机视觉库

NodeJS

浏览器

HTML & 性能 & CSS

React & Angular & Vue

原理剖析