2017年Web前端技术综述

Web前端应用发展的历史大概经历了三个阶段:第一个阶段使用的是简单的静态页面,第二个阶段使用得是ASP、JSP、PHP等动态脚本语言,第三个阶段是Web2.0阶段,其核心技术是AJAX,同时伴随着SPA的兴起。

SPA vs. MPA

从字面上理解,SPA(单页面应用程序)整个应用只有一个页面,只加载一次Web静态资源,包括HTML+CSS+javascript,在导航过程中不需要重新加载渲染整个页面。而MPA恰恰相反,也就是每个页面都需要独立完整的从后端加载和渲染,早期的网站大多属于MPA。


那么SPA和MPA各自有哪些优缺点呢?

SPA第一次加载页面因为要加载很多静态资源,速度比较慢,但是之后前后端仅仅需要传递纯数据,页面渲染完全由前端完成,既节省了带宽,也提高了渲染速度。MPA则反之,用户的每次导航、提交表单都需要由后端生成一个完整的页面,前后端之间传递了大量重复类似的标记语言文本,通信效率较低。但是由于在首页加载速度上,MPA相对有优势,所以有些应用出于用户体验的考虑,结合server side render和SPA的混合方式。
从系统架构角度考虑,SPA最重要的革新在于实现了前后端的解耦,Server端不必既要考虑业务逻辑又要考虑页面展示,只要聚焦于业务,将前端需要的数据开放出来即可。后端聚焦于数据之后,可以被多种前端所共享,比如Web应用,Mobile应用,甚至是AR/VR等,即所谓的大前端。对于Web前端,因为静态资源都已经加载,导航、渲染等界面逻辑都放在浏览器端,所以可以使用如chrome developer tool或者firebug等工具独立调试。NodeJS的出现,甚至让Web应用开发和业务开发从语言层面进行了完全解耦。
SPA和MPA各有优劣,虽说SPA面临SEO困难,易受XSS攻击等问题,但总体上说,优点多于缺点,问题正在解决,SPA已经成为Web 2.0时代的主流方式。

三驾马车


Web应用万变不离其宗,位于Web技术核心地位的仍旧是HTML、CSS、JavaScript三驾马车。

HTML5提供了更丰富的语义化标签、富媒体支持、离线存储、移动设备支持等特性,支撑了不断涌现的各种业务需求,比如视频网站、网页游戏等。CSS3提供了更加丰富且实用的规范,各种特效、变换等效果增强了网页的表现能力,媒体查询方便了网页适配多种终端。互联网时代,各种应用层出不穷,仅仅依靠HTML和CSS无法满足用户对网页交互和表现能力的需求,JavaScript成为浏览器端最主要的编程语言。

伴随着Web前端业务越来越复杂,开发、调试愈加困难,前端技术在开发维护效率、扩展性、健壮性等内外需求的驱动下出现了各种各样的技术。根据GitHub网站的统计,2017年Javascript相关的pull requests遥遥领先于其他语言,比第二名的Python和第三名的Java的总和还多。人说2017年最火爆的是AI,AI带来Python的空前繁荣,但即便如此又奈我何?

当初,JavaScript之父Brendan Eich借鉴了C语言的语法、Java的内存管理、Scheme语言的函数式编程以及Self的原型链继承思想,仅仅花了10天就设计出这门语言,但仓促的设计导致各种问题饱受诟病,于是有人说JavaScript是一门天生残疾的语言。自1995年诞生之后JavaScript一直缓慢发展,目前最广泛支持的版本是2009年发布的ES5版本,经过了多年的潜心打磨,TC39作为JavaScript官方机构,终于于2015年发布了ES6。ES6做出了很多实质性的升级,比如块变量、class、native promise、模块化等。最近几年,Javascript的版本发布逐渐年度例行化,2016年发布了ES7,2017年发布了ES8,JavaScript正向着标准、高效、简洁、健壮的方向迈进。

前端技术栈

框架是什么?模式是什么?都是不得已而为之的事情。当家里的桌子上堆满了爆米花、手机、内衣、蟑螂药和洗
  • 12
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值