前端发展史

这是一个演讲稿,mark一下

1、前端的发展史

1、前端

这是从维基百科上找到的关于前端的定义，一般来说，计算机程序的界面样式，视觉呈现属于前端。
也就是网站mvc结构中的view部分，但是现在说的view层和原来的view层含义已经不一样了，这个待会我们在介绍angular的时候说。

2、前端/互联网的上古时代

前段时间找到了世界上的第一张网页，现在还可以访问，他 http://info.cern.ch/ ，可以看到，所谓网站就和现在的world类似，只有标记语言和超链接，完全没有动效和样式可言。更不用说代码的复用性，以及局部加载。
这是一个伟大的时刻，标志着万维网的诞生，不过站在历史中往前看，就会觉得那个时代简直是洪荒时期，只是把简单的信息传达出去，连刀耕火种的能力都没有达到，。

3、前端的统一与分割

html/css/js

刀和火什么时候才到的呢？一直到96年，css的出现，同年，网景公司推出了javascript 之后微软也推出了vbscript 前端届的刀和火出现了，同时意味着正式开始出现前段，这个时候前端的html负责页面结构，决定着网页的结构和内容，是整个网页的躯壳，css负责样式部分，他决定了网站看起来是什么样子，属于前段的皮肤吧，js控制网页的行为，决定做什么一般来说，js负责调用一些前端计算与动态加载，应该属于整个网页的灵魂。只有这三个同时具备的，才能算是一个真正的网站前端。
但是这个时后的网页还有些许的缺陷，不能局部加载，复用性比较差。就拿我们的网银举例子：可看到，基本上所有的界面的头部，底部还有菜单部分，都基本上是一样的，我没道理同样的代码在每个页面上都要写一遍，所以不久，微软就推出了ifram标签，实现了异步的局部加载，就是相当于在网页中嵌套一个网页，切换目录只是切换ifram中的网页，像我们的验印系统和CRM中的局部加载就是这样实现的。

ajax

再之后99年W3C发布了第四代HTML标准，同年微软推出用于异步数据传输的ActiveX，意味着ajax的诞生，这在前端史上同样是个里程碑的事件，之前的iframe中部分加载，其实还是直接加载某个完整的html界面。但是如果这个界面中，如果之前的交易想实现这个功能，需要两个页面，第一个页面输入我们需要添加的查询字段，然后点击查询，进行form表单提交，然后我们就跳转到 form表单返回结果页面，从头开始渲染这个页面。如果网速很慢的话，这中间会出现点击搜索，然后一个白屏，之后才出现结果页面。而ajax则可以让我们如网银这般实现真正意义上的局部加载，点击查询的时候，只对下半部分进行刷新，而不用对整个界面重新进行渲染，极大的优化了用户体验。再一点 之前的方法从数据库查回列表数据，需要在服务端重新将数据拼装到页面上，使用ajax技术，这部分的操作被挪到了客户端浏览器上，所以ajax的出现，并不仅仅优化了用户体验，他将很大一部分计算从服务器挪到了前端，使前端能够完成了更多的工作。为日后的前后端分离提供了技术支持。

jquery

然后一直到09年的时候，前端一直稳定发展，没有进行什么大的改变，这段时间市面上主要有两款浏览器，我们称之为IE浏览器和非ie浏览器，所谓神仙打架凡人遭殃，ie浏览器为了抢夺网景公司的市场，开发出了javascript的变种，jscript。虽然两个基本上完全一样，但是语法糖上可能还是有些许的差别，所以，那个时代的前端工程师他们的主要工作就是画页面和踩各种坑，那个时代一个阅历丰富的程序员的一个标志就是熟练掌握两种浏览器之间的差别，且能找到兼容的方法，
jquery的出现在一定程度上缓解了这个问题，正如jquery的logo显示的一样，他封装了write less do more 他致力于用更少的代码实现更多的功能。
jquery其实是一个脚本库，jQuery抽象了复杂的代码和浏览器怪异模式，兼容不同的浏览器，用简短的代码实现动效，用链式语法风格减少了程序员的代码量。使我们有时间做重要的事情.虽然现在市面上的各种框架都能实现jquery的各种功能，但是他凭借较低的学习成本以及多少年来积攒的用户量，依然在现如今的前端圈中占有一席之地

2、大前端与Anaular

1、前端的大爆炸时代

从99年到09年附近基本上没有什么大的变化，一直到谷歌发布了v8浏览器引擎，这个引擎极大的提升了浏览器的计算效率，然后同年ECMA组织标准又发布了第五版javascript标准，马上得益于v8引擎高速的计算效率，有人将vx引擎从客户端搬上了服务端，用于做服务器的软件。
Node.js是一个让JavaScript运行在服务器端的开发平台，它让JavaScript的触角伸到了服务器端，他的特点是单线程，非阻塞，事件驱动机制，由于单线程非阻塞的，所以在进行高并发处理的时候还是蛮有利的，node属于极客追求性能极致的产物，所以缺少服务器健壮性的考虑，就比如由于单线程，没有给每个客户分配线程所以一处崩溃全线崩溃，也就不适合银行这种安全要求比较高的企业。
也许他在服务端的作用并不是十分的完美，但是他的出现对前端的影响类似于蒸汽机对于人类的的影响。09年开始，前端进入工业时代。在这之前可能没有真正的前段工程师这个职位，只是个写页面的，切页面的。node的出现，标志这前端工程师职位的正式确立，为什么这么说呢？只有node之后，前端原来做不到的事情，我们可以做到了，就比如代码混淆合并压缩甚至包括css代码的预处理。也因为nodejs的出现，前段自动化测试工具才得以存在。这些我们在以前是做不到的，node出现以后，也出现了大量的基于node的工具，
如这张图所示，我们可依次了解一下
npm是一个模块管理器，在前端环境工程化开发的时候，用来添加一些依赖的组件。下头的这些工具，如果我们需要用的话，可将使用的文件配置好，然后当前目录下直接运行npm命令就可以安装上。
express是在进行nodejs开发时候的一个框架，应该是类似于jquery之于js吧，现阶段，我们的服务器开发都是java所以也用不到这个框架，有机会的话可以了解了解
grunt 是一个比较早的也比较成熟的对代码进行合并压缩混淆这样一个工具。js用grunt脚本做整个项目的编译，你把源代码的目录以及要压缩哪些文件，不压缩哪些文件，然后将生成的文件放在哪里在配置文件中配置好。然后编译就可以得到最终的代码，读取代码压缩解析编译输出的过程实际上就是在node上完成的，网银系统 的压缩就是用这个工具构建的，他可以将网银初次加载的一百多个文件能减少一半左右。而浏览器每次请求文件的并发量一般允许量是6个文件过多的时候必然会增大请求时间，至于为啥首次加载会有这么多的文件，待会讲后我会详细描述

gulp 然后这个可乐一样的logo叫做gulp他是在grunt问世不久之后出现的，grunt的基础上进行了一定的改进，在grunt如日中天的时候开出了一片天地，他和grunt最直观的差别就是grunt的配置化，在gunt中主要是修改配置文件就好，而gulp则是以代码的形式配置，据说相比较grunt的学习成本更低，还有一点是gulp的是以文件流的形式操作，相比较grunt是先读取文件，然后进行合并，合并之后再写成临时文件，然后读取临时文件，进行混淆再写，然后再把临时文件读取出来，写到你要输出的文件的地方，而gulp则是读取文件然后直接压缩合并再输出到目标文件上。

webpack 编译处理的，前边说过，我们的浏览器目前只支持html css和js这些东西，但是有时候为了便于开发，我们会用新的语言就比如js的超类typescript进行处理，但是typescript的语法特性浏览器并不支持，所以在部署到浏览器之前需要先把ts也就是前边说的typescript解析成js语言，这样浏览器才能识别出来。他和上边两个工具听起来好像比较类似，其实是不一样的，上边主要是用来压缩混淆的，webpack则是用来将浏览器不能识别的抽象类语言编译成浏览器能识别的语言。

karam作为一个平台出现的，类似于tomecat和jsp的关系一样，他可以运行各种各样的测试案例，jasmine则是一种语法，方便测试，用来写断言式的测试。

看一下右边的这三个是css的预处理器 大家知道css是一种图灵不完备的语言，相当与只是把样式放到了对应的选择器下边，而预处理器定义了一种新的语言，他在css的基础上添加了变量 函数以及基本的逻辑判断，这样来处理样式，然后再编译成正常的css文件，供浏览器识别，还有一个好处是，不用太考虑浏览器之间的差别，就比如css这个样式火狐是这种写法，然后ie是另一种写法，这个他会自动生成，但是你用的是ie11的特性，在ie8上依然是没有效果的。目前市面上的css预处理器有很多，但是讨论最多的还是这三个，sass less stylus
sass是最早最成熟的css预处理器语言，可用变量常量混入函数等语功能，能够更有效的写出这些语言来。
less的出现受sass的影响比较大，但是在语法上比较类似于css，所以对于设计人员和开发人员来说，开发相对比较容易。现阶段很多流行的框架中已经能看到他的影子了。
stylus出现的最晚，普及率不如前边两个高，但也是挺好用的，他的特点是能够高效动态使用表达式的方式生成css共浏览器使用

这就是node出现之后衍生出来的一系列产品，还有很多，他们不一定是前段开发所必须用到的，但却能使前段开发更加的系统便捷

h5

前段时间，有一个名词特别的火，叫h5,作为一个前端，觉的h5的不就是是html的第五代标准，html5简称么，技术而已，怎么会这么火？然后我百度了一下h5搜索结果都是ppt上的这种单页程序，不得不说腾讯确实成功，用自己的产品重新定义了h5的含义。所以说起h5的时候，最好要先判断一下他的意图，到底是业务所说的这种程序还是技术上的html5
html5和h5也不是毫无关系的，毕竟h5的出现要依赖于html5的技术当然html5的出现也是为了适应手机端而推出的新的标准。

html有自己的规范标准，那js有没有呢？其实也是有的，96年的时候网景公司推出了javascript语言，然后当年的就提交国际标准化组织，也就是ECMA，希望这种语言成为国际标准，但是由于java的商标归sun公司所有，然后js商标归网景公司所有，同时为了凸显国际标准化组织，所以javascript的版本号，我们称之位ES，ES6是04年提出来的，在ES5也就是我们日常用的js的基础上增加了不少的新特性，方便了工程化开发。但是由于在ie低版本上兼容不是很好，所以同html5和css3一样，主要面向的是手机市场。

而typescript是微软开发的一款语言，他是js的超集合，在es6的基础上添加了静态类型和基于类的面向对象编程。也可以说，他就是未来js的模型。目前三大框架之一的angular2就是在用这种语言，由于他能够实现依赖注入面向对象开发的属性，可以使得java程序员几乎能够无缝上手，只是他是去年才出来的，主要是面对的是手机市场，而且比较激进，所以ie11之前的版本兼容性都不怎么好。但是在可兼容到安卓4.1

SPA的意义

spa也就是single page application 单页程序
在我们大部分人的印象中，前段只是mvc的view部分，对不对，浏览器发送请求的时候，服务端进行mvc处理，利用jsp/php之类，动态生成html语言，然后在浏览器上渲染出来。这样有个不好的地方就是基本上服务端把所有的东西都给做完了，1、服务器的压力过大，2、前后端分工并不明确，3、每次加载渲染时间相对较长。尤其是手机端，在4g出现以前加载一个页面是一件十分感人的事情，用户体验特别差。angularJs等框架出现后解决了这个问题，他会在首次加载的时候加载大部分依赖的js然后我们就可以在前段实现控制，类似于mca和核心沟通一样，浏览器和服务端的的沟通也只是报文的处理，这样服务端和前段的开发就不再形成阻塞，约定好接口形式，然后同时开发，都开发好都在进行接口调试，这样也提升了效率，
这是一个余额查询的调用形式，

操作交易其实也类似，我向特定的接口发送json串，然后后台返回操作成功与否，我们根据返回报文的情况做不同的处理或弹出错误信息或跳转到对应界面，或者是跳转到错误界面上。这样前端就负责了网站的页面域用户的一切交互，而后台负责对数据进行安全处理，把视图与视图的控制交由前端管理，同时当我们跳转页面的时候也不是重新加载一个新的界面，而是加载一个页面片段，然后将其嵌套进当前界面中，这个过程中避免了页面的重新加载与渲染，js的那些全局变量也不需要重新赋值