• 我经历的前端开发模式进化史


    萌芽

    记得,在刚接触js那会儿,那时还没有专职的“前端开发”。当时的前端开发工作是由设计师(当时还叫“美工”)来完成的,在这种模式下,设计师需要完成页面的设计、切图、css、html,以及部分js交互的工作。这些完成的工作会成为设计资源的一部分被一并提供给开发人员,由于设计师对css、js了解的很有限,他们完成的页面代码会有许多问题还需要开发来调整和修改,当时的页面还都是后端同步渲染输出的,基本上大伙儿也只会改改一些js表单验证,常用的css属性。所以在这个时期,前端工具、类库、框架是几乎没有的。

    崛起

    没持续多久,随着web2.0时代的到来,web开发的要求不断提升,ajax慢慢流行起来。为了降低跨浏览器开发的复杂度,很多前端类库(YUIDojoMootoolsPrototypejQuery)也相继问世,我记得“十几”年前(哈哈)还写过一篇对比这些类库的文章。但最终还是jQuery以“写的更少,做的更多”,简洁、优雅的设计特点胜出,直到现在还占了大半江山。

    这时,web开发模式有了新的变化。原来由设计师完成的工作,已经无法满足需求了。大部分后端开发没有很多精力,也不太喜欢折腾样式或者页面元素操作之类的。一些对ui敏锐的、喜欢这些新事物的后端开发者慢慢把重心移到了“前端”。也有很多公司索性让这些人只负责“前端”的任务,所以,前端工程师也就新鲜出炉了。但是,整体的前端开发模式变化不大,仍然没有好的构建工具出现,前端还是处在黑暗期。

    迷失

    虽然市场上出现了很多类库解决了跨浏览器兼容性的问题,但随着业务的复杂度,前端代码和文件越来越大,加载性能是个问题。不过,当你意识到这个问题的时候,相应的工具也就出现了。蛋疼的是,当时大部分只是在线压缩代码的工具,所以,开发者需要手动的复制黏贴到压缩代码的站点,然后再复制回来,工作效率极差,就这样的落后模式持续了一大段时间。

    不久…… 我发现只要有困难,就会有解决困难的工具出现,这时,由雅虎出品的YUI Compressor问世了。我记得还有其他几个有名的工具,但都没有这个名声响。这个工具可以通过命令行自动压缩代码到指定目录下,非常方便。所以,一时降低了“复制黏贴”可能导致的失误率,效率也提高了不少。

    另外,css中大量零散的图片背景资源,也是个性能加载问题,起初也是通过纯手工的方式在ps中自己排版这些图片(css sprites),然后算好他们各自的background-position。当然之后也是出现了在线工具解决了这块难题。

    虽然还是没有摆脱“手工模式”,但明显在工作效率和页面加载性能上已经得到了很大的提升。但还是存在很多问题,比如:多个文件的合并处理、有多人开发时代码文件的依赖关系。记得当时还是纯人工约定模块的命名空间,比如Project.Module = {},但依然很麻烦,而且命名空间也会有被覆盖的风险。

    飞速发展

    不久后,RequireJS问世了。RequireJS的出现,解决了js文件的依赖问题。前端文件的依赖关系转变为模块依赖,开发体验一下子上了一个档次。同时,jQuery团队发布了名为Grunt的一款前端构建工具。算得上是真正意义上的第一款前端构建工具,当然之前还有Ant,但Ant实在太难用。

    这下前端社区一下子疯了,不再需要什么在线压缩工具了,不要再装YUI Compressor了(还依赖Java),感觉前端开发一下子高大上起来,这个时候前端开发们不再觉得自己的小角色了。

    你感觉这种状态已经满足了?当然不是,前端这帮家伙从来没闲着,要求越来越高,感觉grunt性能不好使了,就出来个gulp。感觉前端搞的腻了,出来个NodeJS。感觉NodeJS的包管理器npm非常好用,但浏览器端又不支持commonjs协议,所以又搞了个Bower来发布前端资源,但又不久npm宣布可以发布浏览器使用的包了。这些东西,感觉就在这个时期一下子全冒了出来,整个前端市场欣欣向荣。

    超越

    当你觉得前端世界已经趋于稳定时,整个后端的业务逻辑慢慢向前端转移,只使用jQuery开发已经无法满足业务需求了,对前端开发者的能力要求也越来越高。所以,前端非常需要一个框架来解决这些问题。BackboneJS,做为前端MVC框架的鼻祖诞生了,当然其他的类似框架也相继出现,有了前端MVC框架,前端开发者又再一次高大上了,MVC不再是后端独有的设计模式了,前端开发的价值又上了一个新的台阶。

    再次进化

    同时,前端构建工具的发展也没闲着。从gulp之后,国内公司的也发明了国有特色构建工具,比如百度的FIS还是不错的。但随着SPA(单页应用)的崛起,这些构建工具的缺点也凸显出来,比如模块依赖自动查找、文件按需分割,打包性能等等。所以,webpack出现了,虽然webpack是至今为止配置最复杂的前端构建工具,但他的灵活性和插件化,使得webpack一下子活跃起来,整个前端社区又一次疯狂了。另外加上es6的出现,通过webpack + babel-loader + babel-preset-pulgin,前端开发体验那叫一个爽,当然首先你得先学会es6语法哈。

    稳步发展

    前端MVC框架的出现,让前端开发的效率提高了不少。但随着业务的复杂度提高,后端又发展为只输出接口给前端,前端又作为整个系统的一个View, 前端MVC、MVVM(Angular1.0)的模式,在灵活多变的View的模式下,显得有些疲惫。所以React的出现也是必然的,组件化,其实就是以前后端(比如ASP.Net组件)玩的一套搬到了前端来实现,随后的Vue也是类似。

    结尾

    随着es6的发展,组件化思想的盛行,前端技术发展到了前所未有的高度,前端开发者也拥有了无可替代的价值。都说之后再发展下去,前端总有一天会被其他技术代替,但是当今技术的发展变化已经快到你无法预知未来了,5 - 10年的变化会发生什么,我们都不知道。所以,你何必苦苦哀叹之后的世界会如何发展,不如享受当下前端技术的发展带来的喜悦和成果吧!

  • 相关阅读:
    JQ和Js获取span标签的内容
    JS获取子节点、父节点和兄弟节点的方法实例总结
    JS实现系统时间(自动)
    CSS font-family 属性
    网页中导入特殊字体@font-face属性详解
    ****HTML模板资源汇总
    ***XAMPP:报错 Unable to load dynamic library的解决方法
    2016年宜昌楼市将迎来史上最激烈一战
    北大资源重磅来宜--宜昌未来商业中心将诞生
    HTML5调用传感器的资料汇总
  • 原文地址:https://www.cnblogs.com/ExMan/p/7094299.html
Copyright © 2020-2023  润新知