Web 前端的工程化 | 前端技术 101

之前听人说过，学电子的所有知识五年一更新，学软件的知识两年一更新，对于学 Web 的人来说，所有的知识大概每9个月就会大更新一次，至于是不是这样无从考证，但是至少从侧面说明 web 技术是迭代的很快的。

前端技术这十来年发展的很快，网站从多页面应用向单页面发展，从 PC端向移动端发展，UI 交互也从简单的 jQuery / Ajax 发展到 React / Vue / websocket，前端应用的构建也从以前简单的手写 html/css/javascript 发展到使用 webpack / gulp / grunt / browserify 各种工具来实现。

至于 javascript 这门语言，也从一门仅仅用来实现简单表格验证的小小的语言，发展到现在前后端通吃的一门生态超级复杂的语言了。为了适应这种变化，javascript 本身的语法也更新过好几次，其语言规范也已经更新到了 ES6（ECMAScript 6）。

本提纲可以作为你继续探索前端技术的开端。

第一部分：概念

在 Web 的领域里，没有唯一正确的实现方法，同一件事情，可能有10-15件工具来完成。所以知识是学不完的，但看到某个名词，一定要清楚它到底属于什么东西，这样才能在需要的时候找到最适合的工具来帮助自己完成。

html,css,js,node,react,angular,vue,webpack,browserify... etc...

有这么多的名词。

前端三板斧

第一板斧：HTML

HTML是一种标记语言。

重点：

什么是HTML5？

HTML5 引入了很多新的特性，传统的 html 只支持文本媒体，而 html5 支持音频，视频，Canvas（H5)

第二板斧：CSS

CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范。

重点：

CSS3的新特性

盒子模型（IE 和 Webkit 的区别）。动画。阴影。渐变。Flex 布局。

第三板斧：javascript（ES4,ES5,ES6)

什么是 ECMAScript？

ECMAScript6 入门

Let, Const. Async. Await

什么是 Node.js ？

Node.js 是使用 V8 Javascript 的一个服务端程序。通俗地讲，就是运行在后端的 Javascript

为什么前端需要了解 Node.js?

自动化构建。服务端渲染。

第二部分：前端的工程化

所谓工程化，就是将大的工作变成一个个更小的可完成的项目，从而模块化、组件化、规范化、自动化。

HTML

模板引擎的引入

markdown ot html
jekyll, octopress(静态页面生成)
jade,ejs,liquid,swig

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

CSS的工程化

less/sass/stylus

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

importing

//nav-bar.scss

.nav-bar-head {
  position: fiexd;
  top: 0px;
  widht: 100%;
  height: 150px;
}

// base.scss

@import 'nav-bar';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

......

更多参见 less 和 scss

js的工程化

common.js 和 ES6

common.js

d3 = require('d3')

ES6 module

import * as d3 from 'd3'

构建工具的引入

webpack
browerify
grunt

总结：这些工程化都做了什么？

消除重复代码

代码解耦

将大文件分拆成小文件，将代码拆分为组件，用来复用

第三部分：从工程化到集成的解决方案

库/框架

React
Vue
Angular
Backbones.js
Meteor

Tips: 其实 React 不是一个框架，它只是一个 UI 库

Angular.js

Angular.js 是一个偏向于后端的前端框架，核心思想是 two-way data binding

Vue 解决了什么问题？

官网上的声明是：渐进式 JavaScript 框架（The Progressive JavaScript Framework）

即逐步的将一个项目工程化。

Vue.js 官网

React 解决了什么问题？

与其费尽心思地告诉别人要遵守某种规则，以规避某种痛苦，倒不如从工具层面就消灭这种痛苦。

React 官网

JSX, Component and Props, State, LifeCycle, Events(onClick)

第四部分：实战

猪瘟的代码 (使用 React 重构一个已y有的项目)

要点：

1、状态管理

2、全局 js 化

3、Virtual DOM

(完)

总结:

不必刻意追求框架，选择最顺手的工具。（框架出现并不是为了让问题变复杂，而是因为「懒」。）

没有框架也能写出好代码。

附：更多

CSS3：
- CSS3的一些特性
包管理器：yarn 和 npm 的使用， bower 的使用
Node.js
- node.js 是什么？
打包工具：webpack 和 browerify
webpack(https://webpack.js.org/)
browerify(http://browserify.org/)
```
browserify main.js -o bundle.js
```
自动化测试和部署
- Mocha
- Jasmine
- travis-ci
- Jenkin

Html/Html5 CheatSheet

前端语言、框架

AngularJS
ReactJS
VueJS
Meteor
CSS 模块化方案：LESS/ SASS
JS 模块化方案：AMD/CommonJS/UMD/ES6 Modlue
HTML 模板引擎：baiduTemplate(百度)artTemplate（腾讯）juicer（淘宝）doT tmpl handlebars easyTemplate underscoretemplate mustache kissytemplate
前端集成框架 Bootstrap、Gumby、 Skeleton、Foundation

代码优化

LESS、SASS 自动编译
JS、CSS、HTML 压缩
按需加载
延迟加载