微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

一个 C++ 程序员眼中的前端技术发展规律

2015-11-16 20:33 前端大全

(点击上方,可快速关注)


作者:techfellow

网址:http://segmentfault.com/a/1190000003889983


背景


由于项目原因,从一个Windows客户端开发,跳进前端开发这个大坑。从一开始的茫然,到下定决心放空心态学习,到现在逐渐有了清晰的思路。我想,许多从客户端(后台)转来学前端的,应该和我有类似的经历。


1段:指令化编程


一开始学习的是基本的html,css,用简单的javascript操作DOM。这是最迷惑的阶段,抛去HTML/CSS的各种标准,各种浏览器的兼容等干扰信息。在页面中的script标签中,写下操作DOM的代码。

这个阶段,像极了刚开始学习C语言,做作业的场景。一段代码,完成一个任务。


2段:函数(库)式编程


项目中遇到了稍微复杂的需求,比如msgbox,slider等,网上搜到的都是jQuery的扩展。于是乎发现了jQuery以及Zepto,好像终于发现了终极武器,从此信步于代码江湖。原来这些都是YY,写一些些简单的页面骗骗妹子可以,真正的生产环境中,这才是初级。

这个阶段,像极了学习数据结构时,用C写一些简单的应用,比如一个简易编辑器。会用到很多其他人封装好的常用操作,比如文件操作等。


3段:结构(模块)化编程


随着项目变多,很多东西可以沉淀下来,在其它的项目中使用。这就需要把一个特定的功能的文件封装起来,当有项目需要时,可以引入进来。这里要解决全局变量命名空间污染问题,作用域问题等。比如,AMD、UMD、CommonJS标准,再比如requirejs,seajs,nodejs等,都针对这个解决了问题。只有到了这个阶段,工程化才能真正的起来。因为不用重复造轮子了。

这个阶段,像极了用C语言开始工作后,使用公司及外界现有模块开发。


4段:面向对象编程


手头的模块逐渐多起来,但还是多不过变换无穷的需求。有些需求,用A模块实现了,但下一个需求,和A类似,于是有人写了B模块。当你用的时候,会纠结于用A还是B?那么我看下载量吧,选了一个下载量大的,结果下载下来,还是需要手动该一些代码,才能适合自己的需求。现在npm,估计很多都是这种情况吧。只有语言更深一步的抽象,更好的封装,且在一个强大的基础类库下,才是个好的解决方案。React,Backbone,ES6以及各种框架,也模拟了面向对象的一些特性。

这个阶段,回想起Borland公司的Delphi和C++ Builder,在Windows客户端开发时期的辉煌,就把这个玩到了极致。


5段:组件化编程


还原真实世界,工程无一不是由各种基本的元件搭建起来的。到了软件工程世界,就是组件化编程。这是工程的最高效率阶段,各种“快速开发工具”纷至沓来。市面上有各种酷炫的组件,并号称“一行代码就能让你的项目也同样的吸引眼球”。还是Borland公司,把这个玩到极致,回想起为了实现一个效果,第一反应不是如何从技术考虑,而是在网上找“控件”的破解版。同样,遇到了bug,很少自己去修改(也很难改),而是再去搞一个控件来。目前,React正在这个阶段发展,当各种Component积累成熟后,前端开发效率会进一步提升。

这个阶段,对标的还是Borland公司,还有微软的COM技术。


6段:面向服务


面向组件的缺点是明显的,为了一个效果,引入一堆代码(以及bug)。我只需要你的服务就好了。把组件功能封装成服务,通过通信协议(RPC,HTTP等)和自己的工程链接起来,就能完成需求。这个阶段还没有明显的对标,我想各种统计代码从概念说应该是相当的,还有各种api接口。也就是说,前端技术中,很可能把面向服务形式,转移到了后端中。


7段:分布式/虚拟化


当网络及虚拟化技术不再是门槛,那么通过分布式及虚拟化技术,能将工程快速部署到各个平台,各个互联网角落。这个阶段前端开发反而不用考虑了。因为分布式天然的网络环境可以提供,而虚拟化由js引擎已经考虑到了。而面向技术的虚拟化已经慢慢开始,React-native,angular,都在慢慢开疆扩土。


附加:打包,部署


在传统的客户端开发中,这些都是IDE提供的,但前端开发却百花齐放。r.js,webpack,browserify,grunt,gulp,duo等。其实不必乱和纠结,找到一个适合自己的就可以了。


总结,至此,经历了一个阶段(半年了吧)的js采坑,才慢慢的思路清晰起来,技术的发展路线都是有规律的。前端的乱,其背后还是有一条清晰的主线的。



【今日微信公号推荐↓】


微信号:BestWebDesign

(长按上图,可自动识别二维码)


「网页设计精选」分享网页设计精选文章、案例、行业趋势、课程和书籍。



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 机器学习(一) 从一个R语言案例学线性回归 闲聊|除了魔兽,还有哪些游戏记录你的青春?(暴露年龄) 使用 ElasticSearch + LogStash + Kibana 来可视化网络流量 【第307期】用“五个为什么”写CSS 如何从海量用户中轻松定位H5视频播放器问题?