技术选型

[Hazlank]

今天主要讲一下前端的发展和技术栈，目前是做前后端分离的架构，技术栈这块，做界面和用户交互的框架用的是vue，工程化是webpack（webpack是一个打包工具，能够做编译优化，能够做一些增加开发效率的东西），可能大家对于前端框架最了解的就是jquery，但是搜索什么前后端分离，看到最常见的还是什么vue，react，angluar 这些mvvm框架 ，jq基本已经dead了，他们和jq有什么区别，后话 我们先讲讲前后端分离有什么好处

前后端分离好处

• 前后端解耦，分工明确，能够提高开发效率，后端不需要再去管view层，只需要提供api接口，进行数据交互，接口能通用到web，app端。前端不需要依赖后端服务就能够渲染页面（我们之前刚进公司，项目用的是传统的mvc模式，一开始要做很多配置，才能够把页面跑起来），也可以很简单的搭个本地mock server做数据交互，不需要依赖后端服务，也不用去学习后端的模板引擎，更好的专注(组件化，模块化，工程化）
• 减少服务器压力，模板解析，计算都可以交给客户端去做，不过其实也不用再客户端做模板解析，构建的时候已经编译成js了，这样就减少了服务器的资源消耗
• 减少请求开销，更新视图的时候用ajax请求数据做局部更新，不需要再重新刷新网页，造成不必要的重复请求

缺点：

• 首屏渲染性能问题 因为前后端做分离，所以dom都是由js生成的，js生成dom相比较后端渲染会比较慢，还有就是第一次访问页面的时候用户感知和体验会下降，后端渲染的话第一个http请求就能够返回可以渲染的HTML，浏览器不需要多一些ajax异步请求去获取数据再渲染（做一些loading或者骨架屏来优化用户体验）
• seo 像比如百度爬虫是不会去抓js生成的东西，所以对于seo会不友好

但是这两个问题都能够通过服务端渲染来解决，所以怎么又绕到后端渲染了.但是这和以前的服务端渲染又不一样，通常大家为了解决这个痛点会接一层node来做中间层渲染，node这层只做获取数据，然后渲染html结构，不做业务等其他处理，为啥大家都是用node来做这层服务端渲染，这就和前端框架的特性有关了

vue和jquery的区别 之所以我们需要选择框架，是因为我们的面临的需求变了，变得更复杂了，我们的应用要经常在运行时做交互，如果只是简单的幻灯片或者tab切换下拉菜单等简单的交互，这些交互用jquery实习也没有问题。本质上vue（react）和jquery也是操作dom来做交互，那么到底有什么不一样的地方。

主要是思想上的转变 jquery是命令式编程 vue(react)是声明式编程

什么是命令式编程，比如我想要在页面插元素，通过jquery，很直接直观，首先我会通过选择器找到这个元素，然后做一系列的链式操作（e.g. append，animation...），在命令式编程的风格下，这里分成两个行为，状态维护，dom操作。

什么是声明式编程 在声明式编程中，开发者要做的事情只是描述“我要的是什么样子”，至于具体怎么做，并不是开发者需要关心的事情。在vue开发中，我们可以通过描述状态与视图之间的映射关系，然后靠这层映射关系来操作DOM 同样的场景下，比如我们要做元素的插入或者是内容，只需要更改对象的变量就好了

对比下来的好处： 使用了vue后，管理代码的方式只需要放在状态上了，所有的dom操作都不用再关心了，，该怎么去做dom的优化是框架的事情，就算框架有重大的内部结构改变，算法的改变，也不影响，因为我们只操心显示什么，而不是操心如何显示，这样可以大大的降低维护的复杂度

渲染

说到渲染，页面最消耗的性能，最慢的操作就是dom操作了，为什么呢，dom操作会导致浏览器的重绘或者重排，重绘还好，重排才是性能杀手,当你更改dom结构的时候，浏览器需要进行重新计算部分甚至是整个页面的几何结构信息，元素的排版的都是相关联的，然后浏览器就要遍历dom，然后对受到影响的dom进行计算，再重新绘制，所以你稍微动一下dom，浏览器就要进行大量的计算了，牵一发而动全身。

假如我要做批量更改，或者是比如举个列子

$('body').innerHTML = 3
$('body').innerHTML = 2
$('body').innerHTML = 4
$('body').innerHTML = 5

最终的结果可以简化成只需要最后一步结果，但是用jquery这样的写法会造成多余的dom操作，vue是怎么做优化的呢， vue有个VirtualDOM的概念，借鉴自react。

什么是vdom DOM 是一个树形结构，这个树形结构对应的就是我们的 HTML 标签，所以我们可以用相似结构的json的格式来描述这个dom的结构。所以vdom只是一个简单的对象，有什么标签，有什么属性，是否有子节点等等。 vue更新视图是异步的。在初始化vue实例的时候，第一次渲染的时候会生成vdom。当我们有相应的改变的时候，会生成一个newVdom，然后每次的通过vue改变状态也只会在newVdom上更改对象的属性，不会去直接操作dom，最后再一次把整个DOM的最终状态映射出来，中间的dom操作全部舍弃，这样就能提高性能下线（效率不一定高，因为又要生成vdom，又要diff，比原生，jq操作要慢，只有在视图变动比较大的时候才会有一定的显著）

但是最主要的作用是vdom把渲染过程抽象化了,正因为如此，所以能够实现同构直出（一份代码（vue + js）能够在客户端执行，能够在服务端执行ssr，也能够生成原生应用(weex)，或者是小程序应用(mpvvue)），比如，一段js能够根据某种数据格式来生成dom，我可以在浏览器中执行这段js，也可以放在服务端执行，反正在中间过程操作的都是纯数据，最终才批量生成我们的预期值(html,原生应用,小程序的结构)，这样就够实现框架跨平台了

所以为什么是用node来做这一层服务端渲染，因为能够同构直出，能够复用vue模板

框架就先讲到这里，还有一些附带的东西 vue-router 既然现在是前端后端分离，路由也应该由前端自己管理了，当我们做了操作，做了局部更新，但是浏览器并不能保存我们现在的状态，url还是没有变，所以当我们刷新的时候又是最初始的状态，但是web有提供接口，能够改变url的值而不刷新，然后也能够保存到浏览器的历史行为当中，这样就能够监听路由的变化 来渲染不同的视图了。而且能够通过编写vue-router配合webpack能够很容易实现代码分割，做异步分块加载

webpack

框架就先讲到这里，然后讲讲工程化的东西 我觉得能够提高我们的开发效率，保证项目可维护性，就叫工程化 主要针对js，css 。构建时候的编译优化和提高开发的一些效率 js模块化 能够编写es6,es7的新特性(promise,数组，对象的方法，class语法)，然后通过babel转成es5的代码

CSS的模块化 我们目前用sass来编写css，但是没有解决模块化(选择器的全局污染问题) webpack: css Modules vue: spoces css方面我们还用了postcss预处理器（autoperfixer）（写一个属性，就能够生成不同浏览器的前缀） 浏览器厂商多，浏览器之间竞争，对于CSS部分属性的前缀，不同的浏览器添加不同的前缀才可以用这个属性

代码编译优化，webpack的特性(tree-shaking)，插件(uglfiyJS,scope hoisting,happypack,DllReferencePlugin,bundleAnalyzerReportm,HMR)

[Charlotte777]

万人演讲大会？

[yuxino]

今天主要讲一下前端的发展和技术栈，目前是做前后端分离的架构，技术栈这块，做界面和用户交互的框架用的是vue，(看不懂这句话)。工程化构建工具是webpack （webpack是一个打包工具，能够做编译优化，能够做一些增加开发效率的东西），可能大家对于前端框架最了解最耳濡目染框架可能是jquery，但是如果你搜索什么前后端分离这个关键字，看到最常见多的还是什么vue，react，angluar 这些mvvm框架，

jq基本已经dead了 我们可以用github上的前端学习路线说明

是不是没找到jq 它在这里

我们可以发现jq基本已经dead，我们先讲讲前后端分离有什么好处，再之后我会讲讲jq和其他现代的解决方案的区别。

[Hazlank]

瞎掰，日后实践，整理

[yuxino]

好文 要顶

[Hazlank]

@Nbsaw sb