|
? ? ? ?那天在朋友圈伙伴晒的图中看到了“大前端”这样的大学计算机专业方向。“大前端”这三个字引发了我的思考。在思考的过程中，“构建之美”这4个字突然就出现在了我的脑海中。
? ? ? ?十年前，JavaScript语言还仅仅是一门绑定HTML和CSS，用于设计网页的一种脚本语言。通常被用于用户名合法性校验、弹出提示框以及渐变、淡出特效这样的网页功能实现。因为JavaScript本身的设计目的就是用于浏览器的特效实现。1995年，34的的Rrendan Eich在网景（Netscape）公司任职期间，设计开发一种简单的、用于在浏览器中运行的编程语言，并起名为JavaScript。推出这门语言的目的，就是为了让网景自家的领航员浏览器实现更多的功能，以更有力地对抗微软的IE浏览器。JavaScript的语法大多数借鉴了C语言，这是今天它看上去更类似面向过程语言的原因。它仅仅借鉴了一部分java语法，但是网景公司想借当时火爆的Java语言的东风，因此用Java给这门语言命名。在菜鸟教程（runoob.com）上有这样的描述：“Java和JavaScript的关系，就好像雷锋和雷峰塔一样。”
? ? ? ?是的，JavaScript和Java基本上没有关系，仅仅是名字，就好像张三丰和张三的关系一样。而Java是面向对象特性最强的语言，JavaScript却仅仅是一个只能在浏览器中运行的脚本语言。JavaScript是“面向文件”的，它基于脚本文件，为HTML文档提供服务。JavaScript不仅不能脱离浏览器，还必须包含在HTML中，就像一个HTML的小弟，没有HTML，JavaScript就像是无根的浮萍。尽管早年间有人推出过服务器端的JavaScript引擎，但是几乎无人问津，人们普遍认为JavaScript就是一个浏览器中运行的编程语言。而且，JavaScript简单易学且不严谨的语法，让它处于编程语言鄙视链的低端，甚至有人认为写JavaScript的代码不是编程，仅仅是菜鸟学习的一种语言，就像五子棋和围棋的对比。JavaScript看上去简单、轻巧，并且傻乎乎，看上去不会有任何知名大学会在本科专门开设这门课程。它仅仅是一个在暑假实训期间，由像我这样的企业导师在带学生们时，顺带讲一讲的语言。
? ? ? ?JavaScript地位转变的端倪来自Ajax（Asynchronous Javascript And Xml）。Ajax起源于1998年，是一门用于网站异步交互的技术。1998年，W3C（World Wide Web Consortium，万维网联盟）发布了XML1.0标准，XMLHTTP诞生了。从此，JavaScript脚本可以用来发送Http请求。但起初的几年，异步交互技术并未广泛应用。直到2005年，网页设计师Jesse Garret在他的博客中给异步交互技术起了“Ajax”这样一个名字，并强烈推荐。由此，Ajax开始进入技术圈的视野。随后，谷歌公司在自家的众多产品中开始大量使用Ajax技术。在谷歌公司的大力推动下，Ajax逐渐被业界广泛使用。
? ? ? ? Ajax让工程师们开始重新思考前端与后端的关系。在这之前，前端仅仅是后端的一个附属，前端视图是由后端服务器渲染的。尽管看上去前端和后端像是平等对立的关系，但是前端离不开后端，前端开发者的薪资和职业发展前途也往往不如后端开发者。而Ajax的出现，让前端显得更加独立。此外，Roy Fielding博士在2000年他的博士论文中提出了一种网站架构风格，就是今天鼎鼎有名的RESTFUL，中文名就是“表现层状态转移”。Ajax的流行，让工程师们意识到，视图的状态实际上是由服务端转移到了前端。Ajax让技术人员开始重新思考这篇Roy Fielding博士撰写于数年前的论文所提出的主张。值得一提的是，Roy Fileding是HTTP标准的主要撰写者，同是也是Apache软件基金会的首任主席。
? ? ? ?JavaScript历史性的地位转变开始于2009年。这一年，Ryan Dahl开发了NodeJs运行环境。本来，Ryan Dahl的目的仅仅是为了编写一个提升自己工作效率的工具，他想设计一个快速开发后端服务器的软件，并且他认为高性能的服务器应当满足单线程事件驱动机制，而非通常的多线程阻塞IO。在这个前提下，他选择了JavaScript语言。但JavaScript语言是在浏览器中运行的，它不能独立运行。但谷歌公司推出的开源浏览器引擎V8，让JavaScript可以脱离浏览器，这为以后JavaScript在全新舞台的大放异彩提供了基础。
? ? ? ?于是Ryan Dahl基于V8引擎设计开发了NodeJS运行环境。NodeJS彻底改变了JavaScript的地位，是前端技术的一次革命。从这一天开始，JavaScript不再是那个被局限在浏览器中，只能伺候HTML的小丫鬟，而是扬眉吐气，变成了王妃。
? ? ? ?2010年，NodeJS的包管理工具NPM诞生了。NodeJS和NPM给JavaScript带来的转变之一，就是构建。在这之前，JavaScript是一门脚本语言，虽然也有面向对象的特性，但是基本上没有模块化的概念，因为JavaScript在浏览器中是以脚本文件的形式被引入的。这种形式至今也没有改变，但是NodeJS所带来的构建能力，让JavaScript源代码拥有了多种形态的生命周期。构建能力所带来的改变，就想是让我们在家中和在办公室可以穿不同的衣服，而非在任何地点都穿着睡衣。没有构建，只能在开发阶段就去适应运行阶段的限制；而有了构建，就拥有了编译时和运行时的不同形态。
? ? ? ?其实构建工具可以使用任何语言。我们完全可以用Python去写一个JavaScript的构建工具，但事实却是有了NodeJS之后，人们才开始考虑用JavaScript去构建JavaScript。JavaScript的构建工具开始出现在人们的视野，其中贡献最大的就是由德国开发者Tobias Koppers等人开发的webpack。webpack在2012年发布，在2014年CSCON大会上，Instagram的前端团队分享了他们使用webpack优化页面的经验，引起了广大前端开发者的注意。之后webpack被广泛应用，同时开发者们也为webpack贡献了大量的插件，丰富了webpack的生态圈。
? ? ? ?在webpack这样的构建工具的助力下，前端开始模块化，或者说，JavaScript开始模块化。JavaScript从包裹在HTML代码中的配角，变成了一个反过来包裹HTML代码的主角。这是一个历史性的变革，JavaScript走到了舞台中台，开始享受聚光灯。变革的重大意义在于，JavaScript开始有了工程化的能力，正式步入了属于自己的软件工程时代。在这之前，软件工程是属于Java等面向对象特性较强的语言的，因为面向对象所提供的封装能力，让这类语言可以轻松做到模块化。JavaScript却受限于建立在W3C标准上的的浏览器环境，只能基于脚本文件。而软件工程的概念，是无法接纳一个连变量作用域都难以控制的语言。
? ? ? ?有了构建工具，前端开始了工程化，开发者可以将一个大的脚本在源代码阶段拆分为一个个独立封装的模块；在运行阶段，却仍然满足浏览器原来的标准。这很关键，因为W3C标准是所有浏览器都遵循的标准，如果要从标准下手去改变他，会涉及到生态、商业、知识产权等众多方面，可以说是不可能的事。在这种限制下，广大开发者为了推动技术进步，做出了重大的思考和探索，即如何在难以改变现行标准的情况下，利用工具为编程语言赋予新的能力。构建能力所带来的变革，如同当年福特发明汽车生产线给制造业所带来的革新，这是从手工作坊到流水线的创新改变。
? ? ? 在构建能力的加持下，如雷贯耳的用于前端独立渲染的三大开发框架Vue、Angular和React出现了。其中，Vue是由中国开发者尤雨溪编写的。他在本硕的大学期间并未学习过计算机专业，而是学习艺术学。在硕士期间，他接触到了JavaScript，产生了浓厚的兴趣，从而开启了自己的前端生涯。尤雨溪早先在Google工作，工作期间，受Angular启发，开发了Vue框架，后来开始全职维护Vue。2.0版本是Vue发展的里程碑，自Vue2.0发布，Vue的使用率开始超越Angular，逐渐成为了首席前端框架。
? ? ? ? 纵观JavaScript发展史，它的全新生命，可以说大部分来自构建能力。在构建能力的帮助下，JavaScript也不再是那个被人认为是菜鸟开发者学习的语言，它有了独当一面的能力，开启了一个新的技术时代。同时，我们也看到，时代背景的进步推动着技术发展的革新。而技术发展史让我们了解到开拓者经历过怎样的思考和探索，也让我们更全面地思考技术的前世今生，为创新打下基础。从这个角度看上去，技术不仅仅是技术，还是一部史诗。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 桔子先生 2021年11月18日 于启迪之星
|