我所经历的前端开发变化

·  阅读 908

         大家都在说,前端的变化太快了。每当前端有新的进展,同行都会调侃,别更新了,学不动了。变化太快,快在哪里,那些发生了变化,我从自己说短不长的三年前端开发,来反映这些年的变化。

        虽然只有刚刚三年开发经验,但是因为有外包的经验,历经过大大小小的项目。这些项目中既有使用最新的技术,也有四五年前一路维护下来的旧的技术。下面从几个方面来一一来探讨。

1 语言变化

首先HTML,其实我不太知道HTML5以前的版本是什么样的,因为从我进入这个领域,就是在H5最火热的时候,只知道HTML5会多一些新的标签,比如video、canvas,同时也有一些新的存储方案比如sessionstorge.现在的浏览器基本都支持这些变化。

其次是CSS,变化当然是CSS3,增加了一些新的动画属性如transition和布局属性如flex等,可以搭配HTML5做出一些炫酷的页面效果。我知道的变化仅仅如此,因为我没有经历过CSS2以及更老的时期。

对于HTML和CSS的这些变化,浏览器都有一个支持的过程,其中不得不提IE系列,入行的时候,项目还要求兼容IE7,所以我从网上找了一系列的IE hack语法,但是现在我都忘记怎么用了,就连IE都好长时间没有打开过了,最近打开微软的浏览器是试用换了Chrome内核的Edge。看看,三年之间,微软都变芯了。

最重要是是js的变化,2015年ES6发布了,那时候我还没入编程,还不知道有JavaScript这们子语言,到今天ES7、ES8都发布了。当然大部分浏览器还不能完全支持这些新的语法,还要依赖babel来转译为ES5。

说到ES6,还要提一下coffeescript,在某个老项目接触到过,发现会有大量的语法,比如箭头函数,跟ES6很类似。在ES6发布前,coffeescript好像还挺火,所以技术选型选择了它。当然ES6发布以后,大家都切换到这个“正统”的标准上,coffeescrpt也落寞了。

js在服务器端版本的nodejs,这几年也在大量进入到实际的项目上,而不仅仅作为前端的一些工具使用。就我所经历和了解的情况,nodejs会在大型公司如阿里和创业型公司落地较多。大公司都有主力后端语言,nodejs并没有能力去撬动比如java、php等的地位,但是可以帮助前端拓展业务边界,比如作为BFF层,既可以解放后端,又能赋能前端。小的创业公司可能人员和技术都很灵活,更青睐于前后端语言的统一,这样nodejs就很有天然的竞争力。

还要说下Typescript,可能当下非常火,我并没有用过,但是听说许多前端都推荐项目上使用,并且好像越大的项目效果越好,比如vscode这个开源项目够大吧,都已经全部用Typescript开发了。

2. 代码组织结构的变化

代码组织结构其实是跟项目大小相关的,比方说一个活动页,可能最传统的html、css、js就完全能满足,如果非要加入webpack等反而多此一举。

同时也跟js模块化的发展而变化,ES6发布前,js并没有原生提供模块化的。

传统的开发,就单纯的前端三剑客就足够了,只要在html页面引入css和js,同时要保证js的引入顺序,不然可能会报错。而且多人开发,经常会发生命名冲突的事情,所以就有了函数封装、对象封装、IIFE闭包这种基础的模块封装。

再后来,随着nodejs推出的commonjs模块规范,在浏览器端也有AMD和CMD这样的模块工具出来。同时npm包越来越流行,现在前端应该都会npm install 吧。

等到ES6,开始有原生支持的模块化语法。当然现在浏览器还没有完全支持。

3. 框架(库)的变化

不可否认,Jquery的时代一去不复返。but 我所在的公司还有好老项目是在用jquery开发的,因为前面公司用的都是vue or react,用Jquery的时候非常至少,最多用到它的ajax方法。所以现在每天跟jquery还有zepote打交道,都不得不查文档,同时能深刻体会到这种手动一个一个改变dom的麻烦 、乱,还有不可维护性。

Jquery之后,还有backbone(好像这么写)...以及Angular等一系列MVC框架的出现,大大提高前端的开发效率,当然我入行时候,他们都不怎么火了,好奇,我也没在项目上碰到他们。好吧,这里就短短一提,以表尊敬。

再然后 ,React出现了,靠着jsx以及virtual dom高性能的表现,迅速跻身框架一哥。去年在项目上开始用React,大概有一年了。

当我2016年开始接触前端,学的是最新的Vue,对我这种新手非常友好,接触到的也是官方一手文档。也是靠着Vue找打的工作。但是老实说,我跟喜欢React。

目前来说,我今年做的项目中,既有Jquery(当然都是老项目),也有React,还有Vue。

4. 工具的变化

现在用的大概都是webpack,因为你如果用Vue或React,基本上就不得不用webpack。

以前可能是grunt or gulp,他们都只是流程工具,但是webpack确实模块打包工具。

5. 开发方式的变化

无非开发-联调-测试-上线万年不变的流程。但是具体到开发-联调这个阶段,其实变化也发生很大变化了。因为作为前端,除了纯静态页面,基本上都要依赖后端。简单来说,就是前后端分离的变化。下面做个比较。

前后端不分离时代,举其中一种例子:

前端项目是作为后端项目的一部分,比如一个java后端项目,开发初期,我需要单起一个分支,装好java环境,装上intelj IDEA,装上gradle,然后启动这个java项目,前端开发html 、css、js,跟后端商定接口格式,然后造一些假数据,来完成基本流程。等后端开发完成后,合并代码,在用真的接口返回的数据进行联调。上线也不用前端操作,直接随后端项目上线。

这种开发方式非常痛苦,因为你并不熟悉后端这一套工具,经常服务启动不了或报错,一搞搞半天。其实这还不算最痛苦的,曾经有个项目,后端是Php,前端要开发samrtPHP模块,还必须登录开发机上,在linux环境下,用vim来写代码,是不是要了命了。

前后端分离时代:

现在基本上都是前后端分离,前后端只通过接口联系。这就很爽了,前端只需要前端这一套环境,nodejs、webpack等等,只要接口文档确定了,想怎么开发怎么开发。

其中,更进一层,前端通过nodejs开创了BFF(backend for frontend)层,连接口都接管了,后端只需要提供基础的微服务。再也不用发愁跟后端要求返回这个这个这个字段。

更进一步,现在前端开始通过nodejs,开始ssr(服务端渲染),来解决客户端渲染产生的白屏等问题。

变化是无时无刻的,总结这些变化,才能更好的把握当下和预测未来的趋势。


分类:
前端
标签: