前端开发的前世今生

2015-08-19 15:00

互联网世界有一个神器叫浏览器,浏览器里面看到不什么东西,是由你输入的那个网址或者那个IP的服务器提供内容。

而传给浏览器识别的代码就叫前端代码。浏览器定义个我能解释的性能,前端代码按浏览器能理解的接口,提供各种达到自己解决问题的产品样子。

浏览器性能一直在发展,html都到5了,css也到3了。chrome都提供地图,语音,访问机器硬件的接口能力了。

那么前端的技术也跟着一直在发展。最早只是简单的html代码,这代码就类同于word写文档,ps画图。后面提供再提供绘制样式的CSS。然后出现了javascript这个能前端页面里面写程序的脚本语言。

<div class="mod"><div class="hd"></div><div class="bd"></div></div>

DIV也就是HTML代码,讲清楚房子的框架该怎么建。

.content { width: 980px; margin-left: auto; margin-right: auto; } 

content也就是CSS排版布局样式代码,讲清楚这个房子装修,填充风格有哪些。

    <script src="https://netflix.github.io/falcor/build/falcor.browser.js"></script>
<script>
  var model = new falcor.Model({source: new falcor.HttpDataSource('/model.json') });
  model.get("greeting").
    then(function(response) {
      document.write(response.json.greeting);
    });
</script>

script就是负责动态装修房子的js代码,这也是当前前端开发乱象纷纭的原因。谁都可以有自己装修办法。

最近的时候,人民老老实实用原生js代码实现简单的动态数据加载,后面有个了jQuery的组件,封装了很装修工具,比如一面墙,比如一块地板砖。而后面就一发不可收拾了,各种装修的组件出现不说,还出现各种怎么实现快速装修的窗口框架。

到了今天,前端技能树它是这样的
image

你要想看仔细每项技能,动态效果图请出门右转

至于今天js发展成什么样子了?

先来两个js的段子

CSS不能编程?用Less、Sass、Stylus、甚至直接用 Absurd,框架除了Bootstrap还有很多。JS写多了很麻烦?jQuery。移动开发?Zepto.js。结构不好?找框架,Backbone.js是MVC,AngularJS和Ember.js是MVVM,Twitter还弄了个事件驱动框架Flight。库多了要优化加载?RequireJS。

代码质量成问题?Jasmine、QUnit、Mocha做单元测试。各种浏览器都要测?用Karma。测试通过了部署还有问题?持续集成,用Travis CI。用户行为也要测?用Selenium 。样式测试还有 Viff 。觉得JS都够麻烦的?用CoffeeScript。

想做动画?Canvas或SVG还有CSS3帮忙,干掉Flash。SVG太难画?用Snap.svg。想开发游戏?用Canvas。自己写FPS太低?用框架,CreateJS.。2D太幼稚?three.js帮你用WebGL开发3D,还不够给力?asm.js让你在浏览器中拥有虚幻3引擎。

这一堆东西都要配置部署,麻烦,用Grunt,库太多?用Bower管理,项目开始要创建各种文件文件夹?用Yeoman。开源项目太多了,GitHub.上找,不会?学Git。顺便用Jekyll托管博客,不是吧还有Ruby这玩意...SASS也是Ruby写的,等等Sublime Text是Python写的,要写插件?也学一下。调试太难?用Chrome开发者工具,一堆API和功能。

光在电脑浏览器上跑不给力?移动开发HTML5,离开网络就渣了?HTML5离线应用。不如原生应用?用PhoneGap。想调用原生API?开发Firefox OS应用吧。浏览器应用也得会吧,Chrome Firefox都有自己的文档。接着是不是把后端甩了,自己来,装Node.js,所以还得学点服务器知识,想用npm管理node包?linux技巧shell神马的也得学。想前后端通吃?再看看http协议。Web精通了?node-webkit 让你可以写桌面程序了,继续学吧。

想学模块化开发?看看CommonJS和AMD规范。理解JS有偏差?看看ECMA-262,等等不知道什么时候第6版就要出了。浏览器各不相同,弄不清该怎么兼容?看看W3C标准,HTML写出来人看的懂,机器读不懂?要SEO,要支持残障人士?看HTML语义化,全会了但IE就是不支持?叫不出名字的浏览器尼玛连JS都不知道是啥?渐进增强。想一次把各种设备全搞定?响应式设计。

然后上面这些不过是一些讨巧的小技术。公司做什么业务的?了解一下行业信息。面向大众的产品?交互设计。美工不给力?UI设计。外包和咨询?设计模式、重构方法、算法、数据结构。知道软件工程吗?了解一下敏捷开发,或许还可以试试TDD、ATDD、BDD。

这是前端用的组件库而已,再看看html+css+js的三板斧的发展

HTML 不怎么用了。现在大家一般都写 React,用 JavaScript 生成 HTML。

CSS 也不怎么用了。现在大家一般都写 LESS,直接 import 到 .js 文件中再用 webpack 生成 bundle。噢更摩登的方法是 inline-css,直接把 CSS 写在 component 文件里。

JavaScript 也不怎么用了。现在大家一般都写 ES6/7 或者叫 ES2015/2016,用 babel 生成 ES5。噢另外 Mixins 已经不酷了,现在流行的是 higher-order component——记得要写成 @decorator 的形式才能通过你戴着墨镜的同事的 code review。什么?都 2015 年了你还在用 CoffeeScript?

React 还在用,但是 Flux 不怎么用了。现在大家一般都用 redux,(state, action) => state 多清晰啊。另外记得用 Immutable.js,因为 functional programming is the new shit。

浏览器还在用,但是刷新键不怎么用了。现在大家一般都用 webpack 的 hot module replacement,结合 React Hot Loader,存盘就刷新,state 都不变。而且 React is all about state management,有了 immutable state 我们就可以做 Bret Victor 风格的 time travel 啊,像 Elm 一样。Elm 是什么?呃……

我觉得前端工程师聚会时就应该把 package.json 印在胸前,这样能不能聊得来就一目了然了。「你好很高兴认识……噢你们还在用 Browserify 啊?不好意思我还有事我先走了。」或者「天哪我刚才见到一个胸前印着 bower.json 的哥们,我是不是穿越了?」 

最头痛的是js开始无所不能

nodejs让它开始直接跟数据库,存储,硬件。。。打交道。后端的开发我插一脚。

hybrid 让它可开发客户端程序,竟然还是跨平台的。因为web程序天然跨平台。

为嘛前端技术能这样飞速的发展,只因为互联网这个造房子需求源源不断涌现。今天要造的是新闻阅读,明天要造的是地图叫车,后天要造的是位置生活服务。再以后要造的是一键服务。

所以大神们,开始造轮子,造地板砖,造统一别墅组件,造位置服务框架。无非都是为了清晰,简单,快迅的把房子造出来。