郭培

2017年值得关注的3个JavaScript库

郭培 · 2017-02-10翻译 · 1400阅读 原文链接

2017年值得关注的3个Javascript库得到 Aurelio de RosaVildan Softic的同行校审。非常感谢SitePoint的各位审稿人,是他们保证了SitePoint的内容尽可能做到最好。

Signpost pointing back to 2015/2016 and ahead into 2017

呜啦,2016结束了!对于世界和JavaScript领域来说,这是一个疯狂的一年。无数新的让人印象深刻的库和框架涌现,你也许不需要JavaScript向我们展示了一些模式,提出了使用javascript的一些问题,一张Nolan Lawson谈前端的幻灯片引起了一些骚动和响应,其中不乏一些业内的大牛,像Jeremy Keith和Christian Heilmann,被NoLan总结成了一个帖子。我开始在想也许"疯狂"用来描述这一年有点儿轻描淡写了,2016是疯了。

这一年还包括JavaScript的疲劳,许多开发人员经历了对JavaScript生态系统的疲劳,因为当开发人员在创建一个"现代化"的项目时,需要很多工具,还要做很多的配置。关于这一点,许多开发者分享了他们的想法,更多"JavaScript很累很累"的文章出现。

为了有助于你我的睡眠,我梳理了一个面向前端开发的列表,这个列表包括三个有前途的通用库/框架。

Vue.js

如果到目前为止你还没有关注到Vue.js,那现在你要注意了。Vue.js是一个轻量级的JavaScript框架。

No,先不要着急跑开!

Vue.js似乎主要关注视图,并且提供了极少数的工具来规范视图的数据。Vue.js没有在框架中塞满程序设计模式和各种限制,它采用自底向上的增量开发的设计,这是一个很好的改变。

Vue.js有两种版本:一种是包含模板编译器的独立版本,另一种是不包含模板编译器的运行时版本。几乎所有情况下,你都需要Webpack或Browserify来预编译模板,只有在客户端使用时才需要加载运行版本包。查看Vue.js安装页了解详细信息。

为了证实Vue.js的使用非常简单,下面我们实现一个展示信息的组件,该组件有个按钮,点击按钮可以翻转信息内容。

<div>
  <p>{{ message }}</p>
  &lt;button v-on:click="reverseMessage"&gt;Reverse Message&lt;/button&gt;
</div>
import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    reverseMessage: function () {
      const reversedMessage = this.message
        .split('')
        .reverse()
        .join('');

      this.message = reversedMessage;
    },
  },
});

会错过其他库中那些真正喜欢的功能么?awesome-vue 集合了来自社区贡献的数以千计的插件和库,使用和开发Vue插件提供了可用的指南。

如果你想提高开发效率,一定要试用一下这个框架。它的扩展性良好,可以随着项目的增长而扩展。值得一提的是,Vue.js这个框架是由一个人在大量的贡献者和赞助者的帮助下维护的。

无论选择独立版本还是采用运行时构建,Vue.js默认支持所有兼容ECMAScript5的浏览器 。虽然没有记录,不过我相信你可以通过手动添加ES6 shim增加支持的浏览器的范围。

有关Vue.js的更多信息,请查看Vue.js官网或其GitHub仓库。如果你有兴趣,一定要查看Nilson Jacques关于Vue.js的文章Jack Franklin对Vue.js 2.0的介绍

Svelte

Svelte仅在2016年11月中旬发布,所以它挺新的。Svelte是一个类似于Vue.js的Javascript框架,'传统'的框架需要运行时代码(译者注:当前的框架,无论是React,还是VueJS,无论你怎么编译,在使用时都必然需要引入框架本身,这就是运行时代码)来定义和执行模块,保持状态,更新视图并且还要运行这些框架。Svelte完全溶入JavaScript中。就好像没有引用这个框架,这种方式主要有益于文件大小。

该框架实际上是一个工具,可以将您的源代码编译为没有依赖关系的纯JavaScript。你可以使用Webpack,Browserify,Rollup或Gulp编译源代码,Svelte提供了相应的插件。查看各编译器可用工具的仓库

为了比较,我使用Svelte重新创建了刚才的Vue.js示例:

<p>{{ message }}</p>
&lt;button on:click="reverseMessage()"&gt;Reverse Message&lt;/button&gt;

&lt;script&gt;
export default {
  data () {
    return {
      message: 'Hello World!',
    }
  },
  methods: {
    reverseMessage () {
      const reversedMessage = this.get('message')
          .split('')
          .reverse()
          .join('');

      this.set({
        message: reversedMessage,
      });
    }
  }
};
&lt;/script&gt;

同一个模块,Vue.js生成了一个7Kb的bundle,而svelte仅生成了个2Kb的文件。

> Svelte实现的TodoMVC 压缩后为3.6kb。为了让大家有点儿概念,仅React加ReactDOM,没有任何应用的代码,压缩后就大约45kb。

js框架基准 测试证明Svelte在性能方面与Inferno是竞争对手。 如果你关心应用程序的资源占用,你一定要试试Svelte。

如果你正在考虑在生产中使用这个,我建议你再等等。 该框架真的挺新的而且没有公布未来的计划,除了文档中的待办事项提到要补充文档本身和开发相关插件外。 尽管Svelte是超级新的,而且没有经过实战检验,但是我预计明年它将获得垂青,有可能会影响库和(或)框架未来。

在文章写作时,Svelte要么没有其插件系统的记录,要么根本就没有插件。待办事项中指出Svelte将支持插件,并可能提供API使插件挂载到框架中。

编译代码的兼容性取决于你构建的工作流堆栈,因此很难说它的默认兼容性是什么。 在技术上,你应该能够通过包括ES5 shim实现ES5之前的支持。

有关Svelte的更多信息,请查看其官网或其GitHub仓库

Conditioner.js

Conditioner.js放在最后,但并非表示它最不重要。使用Conditioner.js你可以有条件的加载和调用模块。与其他模块加载器相比,Conditioner.js允许定义加载和(或)显示模块的条件。这样你可以减少加载时间并节省带宽。

对于已经有的一些功能组件,想使用渐进增强去构建时,Conditioner.js建议可以通过给定的JavaScript模块来增强这些功能组件。如何定义这些JavaScript模块完全由你决定,甚至可以从你最喜欢的框架加载模块。

Conditioner.js不向全局暴露变量,并建议使用诸如RequireJS之类的AMD加载器。它与Browserify, Webpack, Rollup 还有其他AMD打包软件兼容,但你会希望创建尽量小的包,所以Conditioner.js只会加载页面需要的模块。

您可以通过npm安装:npm install conditioner-js。更多信息,可以在项目的主页上找到。

这个示例与之前的不同,只是为了更好的说明Conditioner.js的功能。想象一下,我们希望展示一个活动的剩余时间。这个模块可能如下所示:

import moment from 'moment';

export default class RelativeTime {
  /**
   * Enhance given element to show relative time.
   * @param {HTMLElement} element - The element to enhance.
   */
  constructor(element) {
    this.startTime = moment(element.datetime);

    // Update every second
    setInterval(() =&gt; this.update(), 1000);
    this.update();
  }

  /**
   * Update displayed relative time.
   */
  update() {
    element.innerHTML = this.startDate.toNow();
  }
}

初始化这个模块非常简单:

`&lt;time datetime="2017-01-01" data-module="ui/RelativeTime"&gt;2017&lt;/time&gt;`

然后,Conditioner会在DOM中的该位置加载ui/RelativeTime模块。需要注意的是,在这里相应的日期已经存在,并且是可接受的格式,而加载的模块只是用来增加这一点。

如果您希望模块仅在用户可见时初始化,您可以使用以下条件进行初始化:


&lt;time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}"&gt;2017&lt;/time&gt;

&lt;time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}"&gt;2017&lt;/time&gt;

Conditioner.js有相当广泛的监视器列表,您可以使用它来定义条件。 不要担心! 你只需要包括你需要的,防止包含不必要的代码。

你还可以将选项指定为JSON字符串,或稍微更易读的JSON变量。


<div>...</div>

<div>...</div>

使用或避免使用Conditioner.js的原因类似于Svelte:如果你关心应用的资源占用,你一定要考虑使用这个库。另一方面,该库的未来并不明朗,因为它也没有公布未来计划。Conditioner.js允许你自定义兼视器,这样可以使其适用于所有复杂的模块加载。

默认情况下,Conditioner.js与支持ES5的浏览器兼容。与Vue.js和Svelte非常相似,可以使用特定的ES5 Shim 实现更好的兼容性。

有关Conditioner更多信息,请查看其官网其GitHub仓库

结论

作者的更多文章:

我认为这些框架和库在2017年会更棒。虽然我不是框架的粉丝,但是我相信Vue.js和Svelte在解决当前框架中存在的问题时,正朝着正确的方向努力。这个努力可能会导致行业转向新的构建方式或定义事物新的方式,但任何的改进都是我期待的改变。

在我的印象里,基于组件构建应用程序的方法,被认为是最好的构建应用程序的方法。虽然我不期望Conditioner.js会引起重大的转变,但我相信它确实解决了基于组件构建应用的常见问题,使其成为更复杂加载时不可或缺的库。

你还期望哪些库在2017年更棒?请在评论部分让我们知道你的想法!

译者郭培尚未开通打赏功能

相关文章