技术干货:那些年我追过的前端技术

本文作者：上海驻云Web前端工程师 著名2.5次元患者 黄志彪 （头像与真人一模一样）

说到前端开发，大家都知道无非就是HTML、JAVASCRIPT、CSS这一套技术体系。虽然这套技术体系本身并不是很复杂，但是现在变得很牛逼了有木有哇？！让人一下子觉得它变得高大上了有木有哇？！今天就来跟大家吧唧一下我那跨了几个时代的前端之旅。

一：刀耕火种的时代

路人甲：纳尼，都回到刀耕火种的时代了？你别吓我，你多大？

我大学毕业刚进入企业工作的时候前后端还没有分离（我年纪够大了吧），我们做项目的时候是按功能来划分，所以在开发的时候通常一个功能要把前端的页面和后端的业务逻辑代码都写了（尼玛，累死宝宝了），而且公司还没有设计师（要不要这么坑啊）。

页面基本上都是HTML代码，有时候会插入一些JavaScript代码用作客户端校验这些基础功能。CSS也用的不多，只是用做简单的布局定位，大部分的布局都是用Table来做的（是你太OUT了吧大叔！！！）。那个时候手机端的页面开发还有用WML+WMLScript（尼玛，这都是啥啊）开发的。在这个时候，前端表现的并不突出，即使有些简单的逻辑也是用document.getElementById来解决的,（哎哟，多简单啊，不是挺好么？）。随着模块化的呼声越来越高（没办法，领导要求），前端的逻辑代码开始抽象出来放到一个JS文件夹中，根据页面的需求在页面中引入不同的js文件，而针对于页面通常用frameset和iframe这两个标签来实现模块划分。还有一个更坑的就是一些特效，那个时候我们的一些特效都得用ActionScript来跟JavaScript合作才能完成（尼玛，累死宝宝了）。就这样，我一开始就在这水深火热的年代倒腾着。

路人甲：是你技术不好吧大叔！！！

我：不要说出来嘛，真是的，多不好意思。

二：铁器时代

路人甲：尼玛，都来到铁器时代了，又学导演玩起了穿越么？！

随着时代的发展，在我研究了无数先驱们光荣牺牲看动漫的时光而写的示例下，我终于踏上我前端开发的一个新时代：铁器时代。我的这个时代到来的重要标志是对Jquery和ExtJS这两大JavaScript框架的运用和HTML5、CSS3的学习及应用。这个时候我写的代码前后端还是黏在一起的，舍不得分开（是你太Low了吧大叔！！！）。

But，前端已经越来越重了，我负责的各种特效已经开始用上了我们的利器-Jquery来封装组件（哎，人家早用上了）。JavaScript组件的这次运用是我前端开发生涯中的一次重大转折。

为什么呢？为什么呢？为什么呢？(重要的事情说三遍)

Because 通过这次的体验，我终于深刻的了解到JavaScript组件化开发带来的好处，在以后的开发过程中，我开始习惯组件化模块化开发。再后来，由于要用到服务器推送技术，我又接触了到了DWR框架 。随着一系列前端技术的运用，我们项目的前端代码越来越重，各种特效，各种样式，各种交互都自成了一套体系（你以为在练武啊）。

三：现代文明

路人甲：尼玛，就回到现代文明了，穿越的太快了吧

我前端开发的现代文明阶段是以接触和学习RESTFUL协议开始的。RESTFUL是轻量级WEB服务，发挥HTTP协议的原生的GET、PUT、POST、DELETE方法，在我们后来的项目中占据了主导地位。而我真正踏上这个阶段却是以学习和使用NodeJS及AngularJS开始的。AngularJS实现了前端的MVC开发模式，Wait，准确来说是MVVM开发模式，它将前端的HTML作为View层并与数据Model层分离，然后实现了View和Model的双向绑定，在JavaScript代码中它又实现了模块间依赖注入的功能。在学习了AngularJS框架以后，我又开始学习项目构建编译工具-Grunt，Gulp、第三方依赖包管理工具-Bower、项目版本控制工具-Git、CSS框架-Sass,Less、前端UI组件库-Bootstrap，Foundation、JavaScript框架-Backbone、ReactJS、RequireJS这一系列的前端技术（尼玛，这么多，吓死宝宝了）。

这还不算完，做为一个合格的前端工程师，你不仅要会这些通用的前端框架和技术，你还得会移动端的技术和Web App开发技术（要不要这么狠）。随着技术的更新，Hybrid App未来将会越来越受欢迎。Hybrid App在当前发展受阻的原因最主要的还是卡顿和特效的问题。But，随着技术的不断发展和更新，现在HTML5+CSS3已经解决了特效问题，剩下的卡顿问题相信在不久的将来也会消失。现如今Hybrid App又有哪些值得推荐的框架呢？

Jquery-mobile-ui相信大家都用过，这是很早的一个移动端UI框架，如果想要轻量和更加灵活的开发前端代码，你可以用这套UI加上自己用Jquery来封装一套类似AngularJS机制的框架。在这里我学习了IONIC+PhoneGap开发，IONIC这套框架基于AngularJS，开发的应用可以实现跨平台打包，可以发布到IOS、Android、WP任何一个平台，而且使用phoneGap插件可以允许你调用移动设备相关功能，使得Native App又向前迈了一大步。

当前的JavaScript除了给浏览器端和移动端带来了变革，也给桌面端开发带来了新的希望。它大大降低了桌面应用程序界面的开发门槛，提高了应用程序的用户体验度。在这里我给大家推荐两个Web App开发框架-NW(node-webkit)、Electron(Atom Shell)。NW和Electron都支持Window7及以上版本、Mac OS和Linux系统，But NW还支持Window XP系统，只是开发起来有点坑，如果不考虑Window XP的话，那果断选择Electron。

总结：

前端作为产品第一眼展示给用户的一个窗口，其地位已经相当重要。随着JavaScript这几年的快速发展迅速占领了Web、Web App、Mobile一大片领地，大有一枪头全搞定的意思。未来随着技术的更新和设备的发展，相信前端发展前景会越来越好，但是前端技术更新也会很快，这就意味着我们程序猿就要不断的增长自己的知识。

路人甲：你zi shi多你牛逼！你丫在城里真会玩！俺农村人营养跟不上！

我：请不要在意那些细节！！！

好啦~~~本文到这里也就结束啦~如果还希望了解更多相关知识的话，就赶紧订阅我们吧~