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

萌芽

记得,在刚接触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年的变化会发生什么,我们都不知道。所以,你何必苦苦哀叹之后的世界会如何发展,不如享受当下前端技术的发展带来的喜悦和成果吧!

时间: 2024-08-02 20:15:02

我经历的前端开发模式进化史的相关文章

百度面试经历_web前端开发

百度面试经历_web前端开发 --2016年09月24日校招杭州站 刚面试完,担心过去就忘记掉,故回来时在地铁上用手机码下面试题目,供参考,也留作自己以后的面试参考依据.

前端开发模式

现在很多前端开发的小伙伴对前端开发模式不是很了解,现在我写一些自己的学习心得和大家共享,希望有所收获! 首先第一个开发模式:工厂模式: 工厂模式顾名思义即是通过一个工厂去制造出很多相似的产品出来,就比如类似的汽车,火车,飞机等这些相似的产品,在流水线上制造出来,这样可以节省开发的时间,提高开发开发效率: function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = jo

大搜车前端开发模式:被动编译和主动编译

最近,梳理了一下公司的前端开发体系,准备给已经工作一年多的原有体系引入一些新的开发模式,其实也不算新了,只是对于我们一直采用的模式来说,是两个完全不同的方向,以前,我崇尚简单,一直按照简单易用的理念构建了公司现有的前端开发体系,现在随着人数的增多和业务的复杂度提升,感觉是时候引入一些差异化的开发体系了. 说来说去有点绕的慌,上面一段中说的 传统的开发模式,在团队内部我们叫做 被动编译,而新的开发方式,在团队内部叫做 主动编译. 被动编译 可能很多人对于被动编译都不是很熟悉,因为这种开发方式现在并

前端开发规范总结 总结前端开发模式和规范

1.前端开发规范 WEB客户端开发自成体系, 主要用于智能终端(iPhone.Android手机.iPad.Android Pad)和传统PC的开发.JS规范.HTML规范和CSS规范对客户端开发进行全方位指导,统一编码规范.提高可读性.降低维护成本. 1.1一般规范 应用在 HTML, JavaScript 和 CSS上的通用规则. 1.1.1文件/资源命名 1)     以可读性而言,减号(-)用来分隔文件名: 2)     使用驼峰方式命名文件名与文件所在的文件夹,便于统一配置: 3)  

掌握这两个技术点,你可以玩转AppCan前端开发

"AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑." 在2016AppCan移动开发者大会的技术脱口秀环节, AppCan技术副总监陈雪分享了自己从事AppCan技术开发的经验,帮助开发者深入了解AppCan技术思路. 以下为完整精彩内容: 栅格布局 AppCan采用弹性盒子模型作为标准化的的栅格布局参考方案,帮助开发者更快速的完成界面的排版工作.为什么

webpack+react+es6开发模式

一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等学习网址:http://www.cnblogs.com/hujunzheng/p/5405780.html 二.简单的步骤条组件 1.通过react自定义的组件进行模拟   注:只是用了react,用到相关react的js请到 https://github.com/hjzgg/webpack-rea

自学前端开发,现在手握大厂offer,我的故事还在继续

简要背景 我是一个非科班出身的程序员,而且是连续跨专业者,用一句话总结就是:16 届本科学完物流,保送研究生转交通,自学前端开发的休学创业者. 17 年休学创业,正式开始学习前端,离开创业公司后,我又回炉深造,期间一直没有放弃前端开发的自主学习,在 19 年秋招(20 年毕业)大战中也收获了一些 offer. 列举一部分 SP(Special Offer): 美团(专注吃喝玩乐的 O2O 互联网公司) 小米(2019 年世界 500 强中最年轻的公司) 顺丰(物流行业中高端市场扛把子) 云从(人

2015腾讯暑期实习生 Web前端开发 面试经历

[2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可以的 .. 零.TST内推 TST还是有必要提一下,早早就随大家把简历交上去内推了 很多人都有评级了,各种评级都有 但我 从头到尾都查不到评级..是漏了..还是简历太渣看不上... 还是怎么回事..衰.. 一.笔试 笔试是在3月29号在华工考的,腾讯的笔试一直都那么回事,技术岗的都同样一份试题. 试

关于前端常见的2种开发模式

    一.前言 2018年12月底,感觉做事情不是太顺畅...就当是运气不好吧...XX总喜欢把自己的问题——推拖到别人身上,什么事情都觉得自己的就是完美(都是别人的问题),你这么能,你咋不上天呢... 已是2019年了,祝大家新年快乐,开开心心,心想事成,万事如意......直接进入正题哈... 前端开发大家熟知非常传统的开发模式,像HTML/CSS/JS 一锅炖的方式.虽然可以较快速.无规范开发... 但对于代码编程可维护性.可读性.可迁移性等方面来说简直就是灾难...于是便有了模板式的开