Imba:与 JavaScript 兼容的编程语言 已翻译 100%

oschina 投递于 11/27 15:15 (共 13 段, 翻译完成于 12-06)
阅读 2956
收藏 14
2
加载中

Imba 是一种开源编程语言,是我们专门为构建 Web 应用程序而开发的。它会被编译成 JavaScript ,并在现有 JS 生态系统中工作,这意味着你可以将它与 Node、npm 和 Webpack 一起使用。

Imba 最大的优点是,它可以比使用基于虚拟 dom 的库(如 React 和 Vue )更快地生成应用程序。速度提高要归功于 Imba 处理 DOM 更新的方式,我的合作伙伴兼 Imba 创建者 Sindre Osen Aarsaether 在这里解释了这一点

过去几年我一直在使用 Imba ,它确实是一种令人愉快的语言,因为它的语法比 JavaScript 更干净,从而提高了代码的可读性。

在本文中,我将教你如何开始自己开发简单的 Imba 应用。在开始创建用户界面之前,我们将先介绍一些语法。最后,我将帮助你设置你的开发环境,以便你可以继续自己进行 hacking 。

雪落无痕xdj
翻译于 11/27 19:23
0

使用 Imba 的项目

但是在我们开始讨论代码之前,我想指出,这不仅仅是在业余项目中使用的一种晦涩的语言。Imba 还为大公司提供关键任务应用程序。

冰岛的鱼类拍卖市场就是一个例子。由于鱼类在冰岛很重要,这个市场占该国经济的1.6%,约3.9亿美元。

所以 Imba 实际上掌控着冰岛 1.6% 的 GDP !

雪落无痕xdj
翻译于 11/27 19:24
0

其次,整个学习平台 Scrimba.com 都是用 Imba 搭建的,包括前端和后端。这是一个复杂的应用程序,高度依赖于 Imba 的快速 DOM 协调。

因此,你今天学习的语言既可以帮助你构建大型生产应用,也可以帮助你构建较小的辅助项目。

让我们开始吧!

雪落无痕xdj
翻译于 11/27 19:25
0

语法

Imba 语法与 JavaScript 有很多相似之处,但它也受到 Ruby 和 Python 的影响。让我们从一个很容易理解的例子开始。下面你将看到一个简单的 JavaScript 函数,它返回两个数字中较大的一个,如果它们相等,则返回 false :

使用 JavaScript 写的查找最大值

现在让我们把它翻译成 Imba :

使用 Imba 写的查找最大值

雪落无痕xdj
翻译于 11/27 19:26
0

仅仅通过看这两个例子,你可能就可以推断出 Imba 和 JavaScript 之间的一些重要区别:

  1. function→def。首先,函数关键字已被重新命名为 def 。

  2. 没有圆括号。此外,函数参数没有括在括号中。实际上,在 Imba 中很少需要括号,但是如果你愿意,也可以带上括号。

  3. 缩进。Imba 是基于缩进的。这意味着我们不需要使用大括号,这节省了空间。

  4. 不需要返回。在 Imba 中,返回是隐式的,这意味着我们不必写 return 。Imba 自动返回函数的最后一个表达式。

这些都不是 Imba 最重要的方面,但是它们结合在一起可以使代码比 JavaScript 更简洁。随着本文的深入,这种优势将变得更加明显。

雪落无痕xdj
翻译于 11/27 19:29
0

创建用户界面

让我们继续创建用户界面。这就是 Imba 的真正用途。这意味着 DOM 节点被嵌入到所谓的一等公民的语言中。

如果你来自 React world ,那么可以把它看作是 Imba 在语言中内置了自己的 JSX 。

比如 React 中的以下代码,它只是呈现一个按钮,并在单击按钮时将其记录到控制台:

如果我们把这个例子用 Imba 重写,会变成:

雪落无痕xdj
翻译于 11/27 19:31
0

花点时间比较一下这两者。我希望你们注意三件事:

  1. 标签是原生的。扩展自 React.Component 的 App 类被转换成更简单的标签 App。这是因为标签是 Imba 语言的原生部分。DOM 标签和定制标签都是如此。

  2. 没有结束标签。当我们缩进时,我们不需要关闭标签(例如 </button> )。这节省了我们大量的打字和空间。

  3. 简单的类语法。在 Imba 中添加类很简单。我们只需给标签添加一个 .container,而不是麻烦的 className="container"。

您可能还注意到事件处理程序是不同的。我们的做法是:tap.logOut,而不是 onClick={this.logOut} 。这只是Imba中处理用户输入的几种方法之一,如果您感兴趣,可以在文档中了解更多。

雪落无痕xdj
翻译于 11/27 19:35
0

处理数据

现在,让我们看看Imba如何处理数据。在下面的示例中,我修改了我们的应用程序,以便在App组件的状态中包含一个count变量。此变量将根据用户单击的按钮而增加或减少。

以下是用Imba重写后的样子:

最显著的区别是代码量。

IImba示例的大小大约是一半,包括代码行数和字符数。

虽然代码行当然是一个浅显的比较,但是代码的可读性非常重要。更少的行、字符和符号使Imba程序比React更容易阅读。

雪落无痕xdj
翻译于 11/27 19:37
0

隐式的self

您可能还注意到,我们直接通过 count 访问实例变量,而不是像在 React 中那样使用 this.state.count 来获取计数值。

在 Imba 中,我们可以取到 self.count 。self 是隐式的,所以我们不需要写出来。Imba 检查作用域中是否有 count 变量,或者 count 是否是 App 本身的实例变量。

雪落无痕xdj
翻译于 11/27 19:41
0

可变性

上述两个示例之间的另一个重要区别是它们如何处理状态变化。在 Imba 示例中,状态是可变的,因为我们只是直接更改它—— count 变量。

React 中,状态被视为不可变的,而改变它的唯一方法是通过 this.setState。

如果您愿意,可以与 Imba 一起使用不可变库。这实际上是不可知论的。在 Scrimba,我们使用可变性,因为我们认为不可变的代价是不值得的。

雪落无痕xdj
翻译于 11/27 19:43
0
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(14)

爽歪歪ES
感觉就像groovy和java的关系,学习这些东西可以严重拖慢你的节奏
yong9981
yong9981
语言本身没有问题,有问题的是Web,DOM/HTML/CSS/浏览器这些垃圾堆在一起,什么样的语言都无能为力。
知尔
知尔
算了吧,有这心情都去看几部烂剧,多打两把游戏
捍卫机密
捍卫机密
好!非常好!符合人类不断追逐进步的特性!就像我预测的,即将进入一个工具爆炸的时代!
wei2011
wei2011
看起来有点像python啊, def,缩进...
东胜神洲
东胜神洲
不知是不是有 java 在前头,所有新的语言都在以少打字,少输入作为 “重要特性”。。。
开源中国顶顶顶
开源中国顶顶顶
又来了......
cyper
cyper

引用来自“smallwhite110”的评论

又一个coffee?
ES6/7 TypeScript够好用了, 尽添乱.
纵使有花兼明月何堪无酒亦无人
纵使有花兼明月何堪无酒亦无人

引用来自“fly丶叶落”的评论

没有大括号都是不好的
+1024
jackchanxj
jackchanxj
为什么有人会觉得没有括号,隐式返回是好特性。。。
返回顶部
顶部