跳到主要内容

您应该使用15个必要的JavaScript工具

Javascript in 2019

JavaScript是任何Web开发人员的重要工具。为了帮助您从这种强大的编程语言中获得最佳效果,您将需要一些专用工具的帮助。好消息是,这里并不缺少选择:有很多JavaScript工具可供选择。困难的部分是选择适合你和你的工作流程的那些。

在本文中,我们总结了我们认为目前最好的JavaScript工具。

01.Web组件

Web Components homepage

在JavaScript框架中,组件的概念被大量使用。它们被用来将一个项目分解成几个可重用的块,这些块可以相互独立地移动。但是,当到了改变框架的时候,会发生什么呢?以前编写的组件将不再工作。要么增加了转换组件的工作负载,要么项目与该框架保持联系。

Web组件是解决这个问题的办法。它们是使用本地Web技术编写的,是独立的,并通过属性(如任何其他HTML元素)公开值和行为。

它们由三个独立的规范组成:HTML模板、阴影DOM和自定义元素。

HTML模板
这些定义了组件的可视外观。它们包含内容的结构,然后可以对页面上的每个组件进行复制和重用。

影子DOM
使组件的内部标记远离文档其余部分的概念。这样可以防止样式和其他逻辑发生变化并影响到其他组件。

自定义元素
这些胶水把所有的东西都粘合在一起。它们负责组件的生命周期,这可以包括添加或从页面中删除组件的额外逻辑。

Web组件可以与其框架对应方一起使用。由于它们应该像本机元素一样工作,所以大多数框架都可以在没有问题的情况下与它们一起工作。有些框架,如角形框架,可能需要提前告知它们的存在才能正常工作。

由于它们可以很容易地组合在一起,所以可以从许多来源导入组件。像这样的网站WebComponents.org提供几个现成的元素,可以放在和立即使用。

虽然Web组件的概念自2011年以来就已经出现,但规范却在不断变化。2018年,随着Firefox在10月份实现了最新版本的影子DOM和自定义元素规范,事情就尘埃落定了。由于Edge将在2019年发布其实现,所有主要浏览器都将对其进行本地支持。

02.WebAssembly

使用浏览器托管应用程序的一个抱怨是,当涉及处理器密集型任务(如游戏引擎或视频编辑)时,JavaScript运行得太慢。

WebAssembly-或“WASM”-是用其他语言编写的代码的编译目标,更适合于繁重的工作。这使得用C+、RUST或Go等语言编写的现有程序能够进入网络。通过将它们编译成二进制格式,可以将它们分割成块并高效地下载。

然后在内存中编译这些二进制文件,并使用新的WebAssembly对象实例化这些二进制文件。与任何其他JavaScript模块一样,我们也在努力使这些模块变得重要,但这方面的工作仍在进行中。

虽然WASM是一种可以在浏览器中使用的新语言,但它并不是JavaScript的竞争对手。这两种语言都有各自的好处,JavaScript仍然可以更好地在浏览器中进行日常操作。它们可以一起工作,并对应用程序的不同部分具有自主权。

WASM有跨浏览器支持,现在包括移动。这为以前仅限于本地应用程序的许多机会打开了大门。在接下来的一年里,我们可能会看到更多的游戏和应用程序开发人员采用这种技术。

03.VUE

Green Vue logo

2019年将发布VUE 3.0

Vue公司在过去的一年里一直在稳步增长。最近的更新更侧重于开发人员的经验和质量改进。VUE 2.5早在2017年就发布了,包括对错误处理、服务器呈现和类型记录定义的更新。单个功能组件-Vue最受欢迎的特性之一-被更新以支持作用域CSS和改进的模板编译。

从那时起,对核心Vue体验的更新主要集中在bug修复和性能改进上。现在的重点已经转移到互补的开发产品上。

Vue的CLI工具的第3版转向了一种更可配置的方法。在初始化过程中,选择了路由、线缆和数据管理等功能。这些特性可以根据需要添加和删除,而无需分离构建过程。

除了CLI之外,还有一个Web界面可用于可视化应用程序的不同部分。这作为一个仪表板,以帮助分析加载时间,大小和痛点在构建运行。

展望未来,2019年将推出VUE 3.0。虽然打破的变化将保持在最低限度,这个版本将侧重于使用ES 2015类的组件。它还将支持片段和门户,就像Reaction中的特性一样。

04.打字本

TypeScript homepage

为JavaScript带来类型安全打字稿..此工具使您能够定义变量的预期类型,并具有生成工具和IDE警告您有任何问题。第3版更好地支持较新的概念,如REST和SPAND操作符。

05.反应

应对16.6带来了“悬念”功能,使动态内容更易于使用。结合反应懒惰(),它创建了一个将代码分割成较小块的点。悬念可以在组件加载时呈现回退组件,例如加载旋转器。2019年,悬念将成为一种更加灵活的工具。通过触发数据获取作为流程的一部分,用户将获得无缝的、类似于本地的体验。

使用Reaction启动和运行最简单的方法之一是使用“CreateResiveApp”工具来消灭一个项目。最近的一个更新升级了它的依赖项并改进了它的特性。CreateReactiveApp2.0使用Babel 7和webpack 4来构建项目,这使得构建更快,并为更新的特性(如速记片段语法)打开了大门。

使用上一个版本创建的项目可以通过更新“Reacti-script”依赖项来升级。更新弹出式应用程序是一个更手动的过程,但它们可以一片地升级。

今年的反应没有放缓的迹象。钩子使功能组件能够状态和生命周期行为。并发模式提高了慢渲染组件的性能.这两个特性都将在2019年上半年发布。

06.角形

Angular shield logo

RANGN的第7版对框架的每个部分都增加了改进。

是一个框架,涉及到应用程序的所有部分,包括数据处理和接口更新。虽然它可以膨胀包的大小,但应用程序的所有部分都将无缝地工作。

RANGN的第7版对框架的每个部分都增加了改进。虽然开发人员几乎没有什么变化可玩,但在幕后有许多有利于速度和可靠性的变化。现在可以为包大小添加性能预算。这将确保在没有被告知的情况下,构建不会变得过大。

作为材料设计整体更新的一部分,相应的角度CDK组件也被更新。例如,滚动模块支持虚拟滚动,这有助于保持长列表滚动顺利。

对大多数人来说,升级到Version 7将涉及使用CLI运行一行。

更新“角/cli”角/核心

未来的更新将集中在新的常春藤渲染引擎。这将提高从包中删除未使用代码的能力,从而大大减少文件大小。由于角度应用程序的结构,渲染引擎可以被替换,而不需要对内部逻辑进行任何更改。

07.高聚物

在第一次迭代中,聚合物库是未来定制元素的门户。通过采用当时即将发布的web组件规范,开发人员能够从现成的构建块中将网站拼凑在一起。

随着时间的推移,这些规范已经发展,其中一个构建块-HTML导入-不再是计划的一部分。最近发布的聚合物3.0解决了这个问题,并更多地关注如何使用更平易近人的ES模块来实现类似的目标。

聚合物库的最初目标是随着对这些规范的支持的增加而变得更轻,但最终它却在增长。为了重新关注这个目标,3.0是即将发布的库的最后一个版本。接下来,我们建议使用利门特Lit-html

类MyElement扩展LitElement{Render(){返回html`
这是LitElement
`;}

利门特是Web组件的轻量级包装器,使它们更易于使用。这个HTML标记模板文字是Lit-html,它是一个具有DOM差异的模板库,以使页面更新尽可能小。

利门特Lit-html目前处于预释放状态,但聚合物团队的目标是在今年年初将其释放。

08.更漂亮

Prettier homepage

这个JavaScript工具专门用于确保代码格式在整个项目中保持一致。有漂亮梳理文件并自动更新格式。一些编辑器还支持每次保存时的格式设置。

09.服务工作者

服务人员启用应用程序来运行管理一些较低级别功能的后台进程。这可以包括推送通知,在后台同步数据,甚至提供设备脱机时的体验。控制级别由开发人员决定。

服务人员已经在Android上工作了一段时间,但他们最近也转向了iOS。虽然他们关注的是移动设备,但他们也在桌面上工作。现在大多数的访问者都可以访问该功能了,现在没有更好的时间开始改进用户的体验了。

10.非屏幕Canvas

有时画布元素是作业的最佳工具。例如,在线游戏可以使用它们生成精灵,或者视频可以具有应用于它们的处理效果。

问题是,任何与元素的交互都会在主线程上工作,这会降低用户的速度。对于重复的动画或繁重的处理,这可能成为一个问题。

非屏幕Canvas将画布逻辑与元素分离。如果没有指向DOM的链接,就可以在工作人员中使用它来释放主线程。目前只有Chrome支持此功能,Firefox将其包含在标志后面。

11.电子

Electron homepage

使用HTML、CSS和JavaScript为Windows、MacOS和Linux构建本机应用程序。电子支持许多流行的应用程序,如VisualStudioCode、Sack和skype用于桌面。

12.苗条

苗条它是一个相对未知的框架,自几年前发布以来一直在稳步增长。最近的JavaScript调查显示,去年它比骨干和jQuery的历史巨人更受欢迎。

Svelte的目标是通过根本不发布框架来降低文件的大小。作为构建过程的一部分,它在编译为普通JavaScript之前对组件进行分析和优化。结果是一个尽可能小的应用程序。

在第2版中,对语法进行了改进,使组件尽可能可读性和可预测性。对生命周期挂钩和计算值的更新使编译器更容易知道在哪里进行优化。

功能是有意轻,以保持每个应用程序的快速。自版本2以来的许多更新都集中于避免导致编译输出性能差的情况。

正在讨论在Svelte中重写组件逻辑,以使其与其他框架保持一致。作为一个编译器,它能够进行自己的修改以帮助更好地工作,同时为开发人员保留一个干净的环境。

13.调整观察员的规模

一种真正基于组件的web开发方法比以往任何时候都更加接近。虽然CSS和JavaScript可以捆绑在一个包中,但是很难在页面之间可靠地重用该组件。

将元素添加到调整观测器,当元素的边界发生变化时,会通知它。然后,可以根据可用的空间更新视觉效果。例如,同一卡组件在侧栏或主体中可能看起来不同。

这个观察者目前只能在Chrome上使用,而它正在Firefox中开发。其他浏览器可能会退回到监视浏览器调整大小的事件,但这会影响性能。

14.科多瓦

Cordova homepage

使用web技术和一个代码库构建多个不同的移动和桌面应用程序科尔多瓦..PhoneGap-Adobe的Cordova发行版-提供了额外的工具,例如Windows上的iOS开发。

15.故事书

故事书使您能够在与任何应用程序分离的可自定义环境中创建UI元素库。它与诸如Reaction和Vue等流行框架以及对HTML片段的支持一起工作。

Generate 2019

生成,获奖大会网页设计师,返回纽约4月24日-25日!订票地点:Www.generateconf.com

本文最初发表于创意网页设计杂志网页设计者购买第283期要么订阅这里

阅读更多:



翻译字数超限