BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Basecamp发布JavaScript框架Stimulus 1.0

| 作者 Dylan Schiemann 关注 4 他的粉丝 ,译者 刘嘉洋 关注 0 他的粉丝 发布于 2018年2月22日. 估计阅读时间: 6 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

Basecamp全新推出Stimulus 1.0,该产品强调HTML页面上JavaScript轻量级的实现,取代了固有的全功能JavaScript应用程序。

Basecamp称其为“你所拥有的最适用于HTML的JavaScript框架”。

在Stimulus推出之前,Basecamp团队尝试使用了一系列的技术和库(例如jQuery)来搭建Basecamp,但他们并没有获得一个比较全面的解决方案,并且他们发现自己的代码库中有太多不同的模式,很难实现一致性、复用性,对于新入职的团队成员来说很难上手。Basecamp团队认为大多数现代的框架和Basecamp需要解决的问题相违背,它们大多数强调HTML,而JavaScript仅仅起到辅助作用,可是Basecamp恰恰相反。

单页面JavaScript应用程序提供了更及时的用户交互反馈,在页面加载之间不会白屏,并在内存中保存了JavaScript库,因此受到了越来越多的欢迎。Stimulus旨在通过搭建库Turbolinks来保持单页面应用程序的优势,Turbolinks库可以通过后台持续过程的HTTP请求拦截链接,并加载新的HTML视图。Turbolinks起源于pjax,pjax是由GitHub开发的。和大多数框架不同的是,Stimulus加载来自服务器的新HTML片段,而不是在客户端将JSON数据转换为新的HTML。

与大多数通用或同构的JavaScript框架有所不同,Stimulus重点仍然加载新的HTML视图,而大多数同构的框架仅使用服务器端呈现初始页面视图。

Stimulus发布强调了三个主要的方面:控制器、动作和目标,并不断增强HTML上这些功能。开发人员可以在HTML配置一些自定义属性:

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-target="hello.name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-target="hello.output">
  </span>
</div>

然后写一个控制器作用于HTML:


// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

Basecamp CTO兼Ruby on Rails创造者David Heinemeier Hansson称

Stimulus关注于如何处理现有的HTML文档。有时候这就是增加一个CSS类,可以隐藏、动画或强调一个元素。有时候这就是重新以组排列元素。有时候这就是操作元素的内容,比如转换UTC时间为本地时间,并显示本地时间。

有时候你希望用Stimulus来创建新的DOM元素,当然你可以这样做。在未来,我们甚至会开发新的功能让它变得更加简单。但这只是少数人的用例,重点还是在操作而不是创建元素。

从很多方面来说,Stimulus可以说是回到了十年前,当框架不能完全控制web应用程序的时候,创建并渲染DOM并追踪状态。它旨在为需要逐步增强的内容网站服务,而不是为已成熟的JavaScript web应用程序服务。

HOOQ的软件工程师Zufrizal Yordan在Twitter评论

我喜欢Stimulus的原因是其逐渐增强,而不是通过JS为UI服务,有时候这样做比较容易。不同的人,不同的方法。很高兴在现在的大环境下能有一款产品不提供完全的JS。

和一些小的JavaScript框架不同的是,Stimulus是由TypeScript编写的。

Basecamp团队选择TypeScript有几个原因,包括适宜的类型注解、工具、重构、防止错误产生、类、代码完善和内嵌文档。Basecamp工程师Sam Stephenson向InfoQ解释了使用TypeScript的好处:

首先,无论我写不写,这些类型都在我的代码中。TypeScript的可选注解让编辑和重构过程变得更加适宜。我不喜欢使用类似Cocoa风格的委托接口紧耦合地组合类。TypeScript的接口系统在这里很实用,因为编译器和编辑器会在实现的时候给我列出很多待写的方法。

Stimulus基于MIT开源协议,可以在GitHub上下载使用。

查看英文原文:Basecamp Releases Stimulus 1.0 JavaScript Framework


感谢罗远航对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT