前端开发之我见

前端开发,在过去叫做网页制作。而在近几年JavaScript和HTML5的兴起使得网页变得丰富多彩,web网页也逐渐变成了"web app"。在提到web前端开发时,许多人都认为掌握这门技术比较简单,甚至说从事这方面的工作很难有晋升空间。前端开发真的是这么回事吗?

在那个web前端开发还被叫做网页制作的年代,浏览器展示大部分页面都是静态的,所谓静态页面就是指不同的人访问同一个网站时,页面的展示内容是一样的。静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。

后来ASP、JSP动态页面开始兴起,使得显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。ASP、JSP页面是通过将数据渲染到HTML模板上然后展示出页面,因此,不同的数据可以让页面的内容发生改变。有了模板渲染技术,网页制作更加方便。但模板渲染技术有个不太好的点,让用户在浏览器上搜索信息时,大量使用模板渲染的网站很难被浏览器检索到,这样网站的访问量可能就会减少,如何使网站满足搜索引擎收录排名需求,从而吸引精准用户进入网站成为了一个问题。

2004年,AJAX技术出现,它可以让前端程序异步的去获取后端的数据,并将获取到的数据渲染在HTML中。AJAX技术使得使用前端技术也可以很好的将页面动态化。在不需要刷新页面的情况下,就可以产生局部刷新的效果。AJAX技术使得web页面很像app应用。AJAX技术出来之前,web网页展示很简单,点点按钮、浏览一些内容。AJAX技术的出现使得前端开始变得复杂,是前后端分离的开端。

后来的jquery、YUI、dojo等库的出现让网页开发变得更加便利高效。但页面交互并不那么丰富,而且这一时期代码难以维护,大型应用很难编写出来。

在大概2013年之前,前端开发还几乎没有名正言顺。前端页面还没有像现在一样那么丰富多彩,JavaScript语言才刚刚起步。

2014年10月,HTML5发布,可以说这一年web世界发生了革命性的变化。HTML5自带视频音频播放器,使得曾经称霸一时的Flash播放器逐渐退出历史舞台。前端开发者可以使用JavaScript操作页面上的音频和视频。HTML5中的 canvas 和 webGL 技术带动了手机游戏行业的发展,特别是小程序游戏开发,H5应用也可以打包成手机APP。canvas的出现也让JS在数据可视化方面开疆拓土,这时web前端开发已逐渐取代网页制作。前端开发者编写的页面更加丰富,甚至可以编写出简洁漂亮的游戏程序,而且程序还不用安装到手机上。HTML5本地存储和缓存功能让web程序可以实现离线,这一功能的出现让web程序更像app应用。

H5程序最大的缺点恐怕就是页面加载速度比较慢。因为程序的数据要从云端获取,可能会导致页面长达几秒甚至十几秒的空白(再加载数据),用户体验不太友好。随着5G技术的到来,HTML5程序的这个缺陷将会弥补,在用户视觉上,H5程序与原生APP的页面加载速度不会有太大差异。

时间到了2015年,这一年JavaScript开始发力,ECMAScript6 发布,JS 的语言特性变得更加多样。2009年发布的Node.js 使得JS可以运行在服务器端。这让JS脱离浏览器也可以运行JS代码,这无疑是革命性的,而ES6的发布更是让JavaScript成为企业级开发语言成为了可能。

2016年9月,微信小程序内测,2017年1月正式推出。小程序的出现,对于用户来说,能够节约使用时间成本和手机内存空间;对于开发者来说也能节约开发和推广成本。开发小程序用到的技术也是web前端技术,即:HTML、CSS、JS。如今,小程序遍地开花,微信、支付宝、百度、头条纷纷推出小程序。小程序也成为了创业公司和小型公司的聚集区。这一年,GitHub 发布了 Electron 框架,它可以让你使用 HTML、CSS、JavaScript 开发跨平台的桌面应用。一套代码,Mac、Windows以及Linux都可运行。VScode、github客户端等应用都是基于 Electron 开发的。

ES6发布之后,脱颖出三个前端主流框架,React、Vue 和 Angular。这三个框架的出现开启了web开发的新篇章。一种新的开发模式开始流行,前端开发开始变得复杂起来,学习成本也越来越重。HTML5和ES6的发布不得不使前端开发者考虑到浏览器兼容性,当项目越来越大时,代码维护和网络资源优化也需要解决。为了满足开发的需要,webpack、gulp、postcss 等构建工具开始流行。项目配置技能成为前端开发者必备技能。三大框架不仅可以开发浏览器网页,甚至可以开发手机APP,最具代表性的恐怕就是 React-Native ,它可以让开发者像开发 React 应用一样去开发手机 APP,性能上甚至可以媲美原生APP(通常是由java开发),而且一次开发,在安卓和IOS上都能运行。而国内的阿里,用的比较多的是 Vue 推出的混合APP框架:weex。

Node.js 10年的发展,使得JavaScript生态变得十分庞大。前端构建工具(如 webpack)、web 服务器、网络爬虫、命令行工具,甚至是硬件开发、机器学习领域都有它的身影。特别是编写 web 服务器,Node.js 高并发、异步I/O等特性使得 Node.js 并不输于其他一些后端语言,Node.js很适合作为游戏和直播平台的服务器。Node.js 的出现可以让初创公司或者小型互联网公司能够选择它(可以减少成本,让前端开发人员使用Node.js开发后端)。对于前端开发人员进入后端开发更加容易。使用 Node.js 可以很好的实现同构应用,特别是使用 React 框架时。同构应用可以加快首屏渲染,同时SEO会更加友好。

如今的前端开发,工作要求变得越来越高。需要掌握基础技术,比如:HTML5、CSS3、JS、ES6;需要了解浏览器兼容性,需要掌握前端构建工具,比如:Sass/Less、webpack、babel、gulp、postCSS、模块化开发;需要掌握网站性能优化、SEO、代码可维护性、避免Bug的出现、使用git等等。还应掌握一些网络知识,比如http协议,掌握一些服务端编程,比如 Node.js。

前端技术日新月异。随着技术的发展,前端和后端的概念越来越模糊,后端的一些部分开始转移到前端。曾经后端的路由在前端也能完成。2018年,Facebook推出graphQL,数据提供方式或许会为之改变;京东推出 taro 框架,使用React语法,一套代码可以生成多端小程序,甚至是原生APP,而在前不久W3C开始制定小程序开发草案,小程序开发是否能实现技术统一?不久前Google发布了 flutter 开发框架新版本2.0,flutter的出现是否会是前端领域的又一次变革呢?身为一个开发者,需要随时面对新技术、新变革带来的挑战。需要不断强化自身的学习能力。

本文分享自微信公众号 - Neptune丶(Neptune_mh_0110)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小麦苗的DB宝专栏

【DB笔试面试647】在Oracle中,使用SPLIT来拆分某个分区的时候,其拆分出来的新分区的统计信息行数是多少?

在Oracle中,使用SPLIT来拆分某个分区的时候,其拆分出来的新分区的统计信息行数是多少?

14120
来自专栏全栈前端精选

(译) 如何使用 React hooks 获取 api 接口数据

在本教程中,我想向你展示如何使用 state 和 effect 钩子在React中获取数据。 你还将实现自定义的 hooks 来获取数据,可以在应用程序的任何位...

7120
来自专栏eadela

JSP基础--EL表达式

JSP2.0要把html和css分离、要把html和javascript分离、要把Java脚本替换成标签。标签的好处是非Java人员都可以使用。

12920
来自专栏蛰虫始航

用可视化地图讲照片的故事(Python+Leaflet)

手机和数码相机拍的照片里除了我们能看到的RGB像元数据,还包含了拍摄时间、图像分辨率、感光值、GPS坐标等属性,记录在Exif(Exchangeable ima...

14930
来自专栏达达前端

uni app 零基础小白到项目实战-1

uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多...

10710
来自专栏eadela

nodejs基础-nvm和npm

6620
来自专栏java技术大本营

设计模式|06 单例模式

权威定义:确保一个类只有一个实例,并提供一个全局访问点。 博主的理解:虽说单例模式对于许多人来说并不难,但是其中也是有很多需要注意的细节的。

8240
来自专栏全栈前端精选

56 道高频 JavaScript 与 ES6+ 的面试题及答案

用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为 9 - 20

13610
来自专栏eadela

jQuery基础--插件

官方API:http://api.jqueryui.com/category/all/

12740
来自专栏小海怪python学习

使用 django-simple-captcha 的方法

Note: PIL and Pillow require that image libraries are installed on your system. ...

12330

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励