这个世纪之交诞生的 JavaScript,没人想到会发展为当今世界上最流行的语言之一。它不够成熟,不够严肃,甚至连名字都是模仿的 Java。那么,JavaScript 的成功是依靠运气和完美时机的侥幸吗?其实不然——即使技术不具备卓越的影响力,但事实证明,只要足够好用就可以了。
作者 | Matthew MacDonald
译者 | 苏本如,责编 | 郭芮
出品 | CSDN(ID:CSDNnews)
以下为译文:
如果你在1999年预测到,JavaScript将在20年后成为世界上最流行的语言之一,你要么有通灵术,要么是个疯子。
在这个世纪之交诞生的JavaScript不仅仅无法做到一个专业语言所能做到的一切,它甚至没有被设计成一个严肃的编程语言。毕竟,需要创建Web应用程序的开发人员已经有了他们喜欢使用的成熟工具。那就是Java,通过applet嵌入系统。
但是在1995年,网络浏览器先驱网景(Netscape)公司意识到,他们需要为人们提供一个更简单的选择。那时候他们处境艰难,与微软的市场大战正在紧锣密鼓,即将与Sun微系统公司达成重大战略合作伙伴关系,时间紧迫。他们雇佣了布兰登·艾奇(Brendan Eich),要求他尽可能快地创造一种新的语言。他在10天内就完成了JavaScript的第一个版本,正好赶上了这个漂亮的浏览器:
Netscape 2: JavaScript的首次登场
艾奇真正想做的是构建一个像Scheme这样的学术编程语言的浏览器托管版本(网页脚本语言),但网景公司的愿景与此不同。他们想要一种看上去与Java足够相似,即使它的行为和Java不一样的语言。两个类似的名字:Java和JavaScript,导致了多年的混乱。
我是根据公司高层指令开发这门语言,让它看上去和Java足够相似,但又不要让它太大。它只是有那么点儿像这种愚蠢语言的弟弟,对吧?
——布兰登·艾奇
滚动按钮时代
在它诞生后的前五年时间里,Javascript填补了那些不擅长Java编程的人的空白。这些人包括一些编程外行、业余爱好者和匆忙做些简单编程的人,也包括网页设计师这个新的技术工人阶层。他们的工作是使网页用户界面看起来时髦漂亮和图形化,他们追求一种比<blink>标签更精致,比旋转球体GIF图像看上去更现代的效果。
而在专业领域,JavaScript的主要工作是创建一种用户界面粘合剂,将设计好的网页粘在一起。每次你需要一个交互按钮,一个弹出菜单,一个立体图像效果,你都需要JavaScript。
那么谁想要一个翻转按钮呢?答案是:所有人。
2000年左右的翻滚按钮
在那不久,JavaScript就被大量使用,用来做世界上最不重要的工作:每次鼠标从图像上面经过时交换一张图像。
尽管认为开发人员会使用代码来自动化闪光按钮,然后将代码与网页一起分发,似乎是个疯狂的想法,但我们每个人都这样做过,而且做了一遍又一遍(今天,CSS提供了这种折叠效果,它使用样式设置和动画「而不是预先生成的图像文件」以更易于维护的方式提供这种折叠效果)。
很少有人希望JavaScript能走得更远。许多编码人员更乐意使用服务器端编程语言,这种语言可以在命令中生成正确的JavaScript代码。在那个时候,Javascript可以为应用程序中的业务逻辑提供动力的想法,和想象用Excel宏替换数据库存储过程一样荒谬。
沙箱(Sandbox)囚徒
今天,当人们批评JavaScript时,通常是基于其语言本身的局限性:打了补丁的OOP特性,弱类型安全性,笨重的DOM模型,对“==”和“===”的困惑,等等。但这些并不是JavaScript在其早期被看作一门糟糕的编程工具的原因。毕竟,有许多丑陋的编程语言(包括BASIC,COBOL,SQL和 PHP),因为它们出现在正确的时间和正确的地点,而变得至关重要。JavaScript作为所有Web浏览器原生本机支持的唯一语言,出现在整个世界都被网站接管的时间点,它绝对属于在正确的时间出现在正确的位置的情形。
JavaScript的真正局限性是沙箱:一种可以将代码固定到合适位置的严格控制的环境——沙箱将JavaScript与桌面世界隔离。例如,JavaScript代码无法直接访问文件系统、显示器或任何硬件资源。更严重的是,它隔离了JavaScript和Web服务器上的所有资源,比如存储客户列表和产品目录的数据库,以及运行业务逻辑的服务器端代码。被完全孤立的JavaScript,除了在页面上摆弄按钮之外,几乎没有什么其它能做,这一点也不令人奇怪。
使用XMLHttpRequest打开管道
奇怪的是,有确实的证据表明确实是微软拯救了JavaScript。但不是今天的这个在每个操作系统上都拥抱开源开发的微软,而是那个赤裸裸的反开源的斗士,和以“拥抱,扩展和消灭”的理念消灭其竞争对手的微软。
事情是这样发生的。大约就在全世界都在疯狂使用滚动按钮的同时,微软的一个团队正在研究一种使Outlook的Web前端更具响应性的方法。他们正在构建一个名为Outlook Web Access的产品,其外观如下:
2000年的Outlook Web Access
微软团队的目标相对温和。他们想构建一个比在浏览器中运行更高效的电子邮件阅读器,最重要的是,他们不想每隔几秒钟刷新整个页面。因此,他们正在研究一种让网页在后台悄悄地检查新邮件的技术。这一目标可能看起来并不惊天动地,但请记住,Gmail在那时候还没有发明出来。而事实上,那时的整个谷歌公司也才只有几年的历史。
微软团队用一个名为XMLHttpRequest的ActiveX组件创建了一个小的管道系统。XMLHttpRequest的基本思想很简单,它为JavaScript代码提供了一种生成Web请求的方法。就像一个Web浏览器可以联系一个Web服务器并发出一个请求一样(例如,“嘿,请把那个页面给我!”),JavaScript代码可以使用XMLHttpRequest对象发出自己的请求(例如,“嘿,请再给我发些邮件”)。
突然间,一个网页就可以使用Web服务器的所有资源了。需要数据库中的一些数据吗?请呼叫服务器并请求它发送。需要服务器执行一个计算,一个安全测试,一个超级机密验证检查吗?请呼叫服务器并请求它执行。最重要的是,这些“呼叫”都发生在后台,前台页面保持不变。
XMLHttpRequest并非没有奇怪之处。首先,它的命名很奇怪,大小写不一致,在像JavaScript这样的区分大小写的语言中,这是一件令人头痛的事。其次,这个名称表明你的代码发送和接收的是XML格式的消息。然而事实上,消息几乎可以是任何格式:普通文本、HTML块或序列化为JSON的JavaScript对象。但是,最大的问题可能是XMLHttpRequest对象是使用ActiveX构建的,这意味着它只能用于Windows计算机,而且只能在Internet Explorer中工作。
但是这些奇怪之处都没有阻止它前进。在短短的几年内,其他浏览器都提供了自己的XMLHttpRequest实现:同样的对象,但没有任何ActiveX的难题。
尽管创建了XMLHttpRequest对象,但微软在他们自己的Web开发中迟迟没有充分使用它。他们不愿将它用于基于Web的公共电子邮件系统Hotmail,相反,他们一直等待,直到谷歌首先在2004年的Gmail,然后在2005年的谷歌地图中使用XMLHttpRequest并震惊了Web开发世界。这是一个真正的圣杯:基于Web的程序,具备了桌面应用程序的响应能力。
2005年的谷歌地图
现代化之路
XMLHttpRequest是改变JavaScript进程的关键因素。然而,在那之后还有几个拐点。
多年来,JavaScript语言一直停滞不前。问题在于,市场领先的Web浏览器Internet Explorer的升级是基于操作系统升级的时间尺度。也就是说,Internet Explorer升级速度非常缓慢,开发人员被迫编写检查浏览器版本的代码,并尝试动态适应。
2006年,开发人员获得了jQuery形式的解决方案。尽管jQuery今天已经过时了,但在10年前,如果你想花时间构建功能而不是解决浏览器兼容性问题,它是一个必不可少的工具。
2008年,谷歌发布了一个名为V8的新JavaScript引擎。就像jQuery首次为开发人员提供了广泛的兼容性一样,V8也给他们带来了惊人的性能。而且因为V8引擎是一个独立的开源组件,其他项目也可以使用它。稍后,这将为Node.js和Electron等创新打开大门。
2008年的晚些时候,HTML5的第一份工作草案出现了。HTML5本身并不是关于JavaScript的,但它与新一波的JavaScript API结合在了一起。突然间,开发人员拥有了用于存储本地数据,管理浏览器历史记录,使用音频和运行后台任务的工具。这些再一次缩小了Web功能和桌面功能之间的差距。
现代JavaScript
JavaScript的成功是否是其在浏览器中的特权地位的必然结果?还是依靠运气和完美时机的侥幸?
有一点是肯定的:JavaScript是在压力下获得成功的。在它面世以后的大部分时间里,JavaScript没有成为任何人的最爱。很多人先是支持Java小程序,然后是Flash,甚至Silverlight。但JavaScript面对这些挑战者,并彻底击败了它们。
也许最公平的评价是,JavaScript证明了每个开发人员在内心深处都明白的道理。也就是说,对一项新技术来说,最重要的因素是它的影响力。如果你的技术具有卓越的影响力,它就不需要从成为最好的开始,只要足够好就可以了。
Javascript的未来将会沿着一条快速发展的道路延伸。现在,我们有运行在Web服务器上的JavaScript(多亏了Node.js),和支持桌面应用程序(多亏了Node.js和Electron)的JavaScript。我们有类似于JavaScript的TypeScript语言,它能够编译成JavaScript,让开发人员能够在不损害其道德的情况下为网页编写代码。在未来,WebAssembly可能会彻底打破语言限制,让开发人员可以通过支持JavaScript引擎来使用他们想要的任何更高级的语言。
是时候承认了,尽管JavaScript有很多漏洞和不一致之处,但它是最伟大的开发语言之一。布兰登·艾奇将JavaScript置入Netscape Navigator中,我们把整个世界塞进了浏览器,结果造就了现代的互联网世界。
永远相信JavaScript(Always bet on JavaScript)。
——布兰登·艾奇
原文:https://medium.com/young-coder/how-JavaScript-grew-up-and-became-a-real-language-17a0b948b77
本文为CSDN翻译,转载请注明来源出处。
【END】
小新 编译自 Insight Data Blog
量子位 出品 | 公众号 QbitAI
写个网页能有多麻烦?在大多数公司里,这项工作分为三步:
1. 产品经理完成用户调研任务后,列出一系列技术要求;
2. 设计师根据这些要求来设计低保真原型,逐渐修改得到高保真原型和UI设计图;
3. 工程师将这些设计图实现为代码,最终变成用户使用的产品。
这么多环节,任何地方出一点问题,都会拉长开发周期。因此,不少公司,比如Airbnb已经开始用机器学习来提高这个过程的效率。
△ Airbnb内部的AI工具,从图纸到代码一步到位
看起来很美好,但Airbnb还没公开该模型中端到端训练的细节,以及手工设计的图像特征对该模型的贡献度。这是该公司特有的闭源解决方案专利,可能不会进行公开。
好在,一个叫Ashwin Kumar的程序员创建了一个开源版本,让开发者/设计师的工作变得更简单。
以下内容翻译自他的博客:
理想上,这个模型可以根据网站设计的简单手绘原型,很快地生成一个可用的HTML网站:
△ SketchCode模型利用手绘线框图来生成HTML网站
事实上,上面例子就是利用训练好的模型在测试集上生成的一个实际网站,代码请访问:https://github.com/ashnkumar/sketch-code。
目前要解决的问题属于一种更广泛的任务,叫做程序综合(program synthesis),即自动生成工作源代码。尽管很多程序综合研究通过自然语言规范或执行追踪法来生成代码,但在当前任务中,我会充分利用源图像,即给出的手绘线框图来展开工作。
在机器学习中有一个十分热门的研究领域,称为图像标注(image caption),目的是构建一种把图像和文本连接在一起的模型,特别是用于生成源图像内容的描述。
△ 图像标注模型生成源图像的文本描述
我从一篇pix2code论文和另一个应用这种方法的相关项目中获得灵感,决定把我的任务按照图像标注方式来实现,把绘制的网站线框图作为输入图像,并将其相应的HTML代码作为其输出内容。
注:上段提到的两个参考项目分别是
pix2code论文:https://arxiv.org/abs/1705.07962
floydhub教程:https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org
确定图像标注方法后,理想中使用的训练数据集会包含成千上万对手绘线框图和对应的HTML输出代码。但是,目前还没有我想要的相关数据集,我只好为这个任务来创建数据集。
最开始,我尝试了pix2code论文给出的开源数据集,该数据集由1750张综合生成网站的截图及其相应源代码组成。
△ pix2code数据集中的生成网站图片和源代码
这是一个很好的数据集,有几个有趣的地方:
该数据集中的每个生成网站都包含几个简单的辅助程序元素,如按钮、文本框和DIV对象。尽管这意味着这个模型受限于将这些少数元素作为它的输出内容,但是这些元素可通过选择生成网络来修改和扩展。这种方法应该很容易地推广到更大的元素词汇表。
每个样本的源代码都是由领域专用语言(DSL)的令牌组成,这是该论文作者为该任务所创建的。每个令牌对应于HTML和CSS的一个片段,且加入编译器把DSL转换为运行的HTML代码。
为了修改我的任务数据集,我要让网站图像看起来像手工绘制出的。我尝试使用Python中的OpenCV库和PIL库等工具对每张图像进行修改,包括灰度转换和轮廓检测。
最终,我决定直接修改原始网站的CSS样式表,通过执行以下操作:
1. 更改页面上元素的边框半径来平滑按钮和DIV对象的边缘;
2. 模仿绘制的草图来调整边框的粗细,并添加阴影;
3. 将原有字体更改为类似手写的字体;
最终实现的流程中还增加了一个步骤,通过添加倾斜、移动和旋转来实现图像增强,来模拟实际绘制草图中的变化。
现在,我已经处理好数据集,接下来是构建模型。
我利用了图像标注中使用的模型架构,该架构由三个主要部分组成:
1. 一种使用卷积神经网络(CNN)的计算机视觉模型,从源图像提取图像特征;
2. 一种包含门控单元GRU的语言模型,对源代码令牌序列进行编码;
3. 一个解码器模型,也属于GRU单元,把前两个步骤的输出作为输入,并预测序列中的下一个令牌。
△ 以令牌序列为输入来训练模型
为了训练模型,我将源代码拆分为令牌序列。模型的输入为单个部分序列及它的源图像,其标签是文本中的下一个令牌。该模型使用交叉熵函数作为损失函数,将模型的下个预测令牌与实际的下个令牌进行比较。
在模型从头开始生成代码的过程中,该推理方式稍有不同。图像仍然通过CNN网络进行处理,但文本处理开始时仅采用一个启动序列。在每个步骤中,模型对序列中输出的下个预测令牌将会添加到当前输入序列,并作为新的输入序列送到模型中;重复此操作直到模型的预测令牌为,或该过程达到每个文本中令牌数目的预定义值。
当模型生成一组预测令牌后,编译器就会将DSL令牌转换为HTML代码,这些HTML代码可以在任何浏览器中运行。
我决定使用BLEU分数来评估模型。这是机器翻译任务中常用的一种度量标准,通过在给定相同输入的情况下,衡量机器生成的文本与人类可能产生内容的近似程度。
实际上,BLEU通过比较生成文本和参考文本的N元序列,以创建修改后的准确版本。它非常适用于这个项目,因为它会影响生成HTML代码中的实际元素,以及它们之间的相互关系。
最棒的是,我还可以通过检查生成的网站来比较当前的实际BLEU分数。
△ 观察BLEU分数
当BLEU分数为1.0时,则说明给定源图像后该模型能在正确位置设置合适的元素,而较低的BLEU分数这说明模型预测了错误元素或是把它们放在相对不合适的位置。我们最终模型在评估数据集上的BLEU分数为0.76。
后来,我还想到,由于该模型只生成当前页面的框架,即文本的令牌,因此我可以在编译过程中添加一个定制的CSS层,并立刻得到不同风格的生成网站。
△ 一个手绘图生成多种风格的网页
把风格定制和模型生成两个过程分开,在使用模型时带来了很多好处:
1.如果想要将SketchCode模型应用到自己公司的产品中,前端工程师可以直接使用该模型,只需更改一个CSS文件来匹配该公司的网页设计风格;
2. 该模型内置的可扩展性,即通过单一源图像,模型可以迅速编译出多种不同的预定义风格,因此用户可以设想出多种可能的网站风格,并在浏览器中浏览这些生成网页。
受到图像标注研究的启发,SketchCode模型能够在几秒钟内将手绘网站线框图转换为可用的HTML网站。
但是,该模型还存在一些问题,这也是我接下来可能的工作方向:
1. 由于这个模型只使用了16个元素进行训练,所以它不能预测这些数据以外的令牌。下一步方向可能是使用更多元素来生成更多的网站样本,包括网站图片,下拉菜单和窗体,可参考启动程序组件(https://getbootstrap.com/docs/4.0/components/buttons/)来获得思路;
2. 在实际网站构建中,存在很多变化。创建一个能更好反映这种变化的训练集,是提高生成效果的一种好方法,可以通过获取更多网站的HTML/CSS代码以及内容截图来提高;
3. 手绘图纸也存在很多CSS修改技巧无法捕捉到的变化。解决这个问题的一种好方法是使用生成对抗网络GAN来创建更逼真的绘制网站图像。
代码:https://github.com/ashnkumar/sketch-code
原文:https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82
— 完 —
诚挚招聘
量子位正在招募编辑/记者,工作地点在北京中关村。期待有才气、有热情的同学加入我们!相关细节,请在量子位公众号(QbitAI)对话界面,回复“招聘”两个字。
量子位 QbitAI · 头条号签约作者
վ'ᴗ' ի 追踪AI技术和产品新动态
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容:正式引入HTML网页开发,学习并了解HTML的相关知识。变身Web开发达人,做全栈程序员。这是以第一课,希望以我的方式,你将学会HTML这门课程。
今天的话,主要讲解一下HTML相关知识,同样在接下来的一段时间的安排中,也以HTML为主。崇尚全栈,也就意味着我们,需要学习主流的技术知识。在前一段时间内,主要讲解了.Net的只是教程。当然.NET并没有完毕。
C#语言
只是在这里把HTML穿插进来,一则巩固自己所得,二来学习一下这门非常简单的HTML技术。学习完毕HTML之后则会,继续进行基础加强、数据库、MVC等教程的协作工作。
PDF文档
同时在前一个阶段内,讲解的并不是很好,在这个HTML阶段内,则会吸取教训,争取写出更符合初学者学习的技术教程。当然前面的课程也会不断的修正,最后我会生成PDF的文档,发给大家。
HTML概述
HTML,超文本标记语言,超文本就意味着有多于文字的形式,比如包含超链接、图片、视频、动画等形式。HTML是应用在网站网页展现的一种语法结构。我们在使用浏览器浏览网页的时候,看到的界面都是由HTML代码表现出来的。HMTL可以说是一种展示文字图片视频等元素的一种方式。通过特定的标记就能展示出来自己想要的效果。如何展现?就让我一步步教你。
物联网
互联网的飞速发展,导致了形形色色的网站应用被创建。云计算、物联网仿佛唾手可得。把诸多应用建立在云上,通过这种浏览器与用户交互的形式让人们使用。这些所有网络应用,只要是通过浏览器进行使用的情况,都是需要HTML技术。当然HTML作为基础之用。这就要求我们程序员,必须学习并熟悉HTML语言。能在这个基础上进行Web的开发。
HTML是解释性语言,不需编译,直接书写之后,就可以运行。
HTML是纯文本类型的语言,你完全可以通过记事本程序进行创建书写。
虽然HTML可以通过记事本来创建写代码,但是并不推荐,因为以前学习过.Net,所以依旧使用Visual Studio。VS也是前端的开发神器。
自己写的HTML代码,在不同的浏览器内,可能会有不同的展示效果。这是由浏览器的渲染引擎决定的。
HTML具有平台无关性,在任何平台只要拥有一款浏览器,你就可以打开HTML网页。
HTML代码运行在浏览器中,也就是需要使用浏览器进行测试。
HTML
今天就先说一下HTML的基本知识,电脑编程系列教程,下节继续。
*请认真填写需求信息,我们会在24小时内与您取得联系。