👊 ⬜️ 🤶🏽 Imba：JavaScript兼容语言，可快速使用DOM 🚯 🏻 💎

Imba是Scrimba创建的一种开放源代码编程语言，专门用于开发Web应用程序。它可以用JavaScript编译，并且可以在现有的JS生态系统中工作。例如，我们谈论的是Node.js，npm和Webpack。

Imba的主要优势在于，与使用React和Vue等虚拟DOM技术基于库的应用程序相比，该语言使您可以创建速度更快的应用程序。通过Imba处理DOM更新的方式可以提高应用程序性能。可以在这里找到有关此内容的详细信息。

该材料的作者是Scrimba项目的共同创始人，他说他已经使用Imba几年了。据他介绍，用这种语言编写是一种真正的乐趣，因为与JavaScript相比，它具有更简洁的语法，从而提高了代码的可读性。

本材料是面向初学者的Imba指南，其开发将使您开始创建简单的应用程序。首先，将在此处介绍该语言的基础知识，然后考虑在其帮助下开发用户界面。它将立即显示在Imba上进行编程的开发环境的设置。

关于使用Imba的项目

在进入代码之前，我想提请您注意一个事实，即Imba并不像是用JS编译并专门用于业余项目的另一种奇怪的语言。它也用于大型公司的严重应用中。

它的应用示例之一是支持冰岛鱼类拍卖的平台。在这个国家，鱼品贸易约占国内生产总值的1.6％，约为3.9亿美元。

冰岛鱼类拍卖

另一个示例是培训平台Scrimba.com ，其中项目的客户端和服务器部分使用了Imba。基于复杂应用程序的该平台的可用性高度依赖于Imba快速同步DOM更改的能力。

Scrimba.com平台

结果，我们可以说您今天将要使用的语言适合于开发各种规模的项目。

句法

Imba语法与JavaScript非常相似，但是其他语言（如Ruby和Python）也可以起作用。也许可以方便地将Imba的语法功能视为一个示例。下面是一个简单的JS函数，该函数返回传递给它的两个数字中的最大值，或者，如果这些数字相等，则返回false 。

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } }

现在在Imba上写同样的东西。

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false

大概比较这两个示例，您可以立即看到Imba和JavaScript之间的区别。即，它们如下：

function变成def 。关键字function由关键字def代替。
缺少括号。函数参数未包含在括号中。实际上，在Imba中，极不需要括号，尽管您可以根据需要使用括号。
缩进。压痕在Imba中起着非常重要的作用。这意味着此处不需要花括号。
缺少return关键字。在Imba中，从函数返回值是隐式执行的，也就是说，不需要return关键字。 Imba自动返回最后一个函数表达式。

这并不是说上述语法功能是Imba最重要的方面，但它们使代码比用JavaScript编写的类似代码更简洁。随着我们逐步学习材料，这一优势将变得更加明显。

用户界面设计

让我们谈谈使用Imba创建用户界面。实际上，该语言就是为此而创建的。特别是，这意味着DOM节点以所谓的“一流对象”的形式嵌入到语言中。

如果您具有React开发的经验，则可以考虑Imba的此功能，就像Imba在语言中内置了自己的JSX版本一样。

考虑以下代码，其中的React库用于渲染按钮并在您单击该按钮时向控制台显示消息。

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } }

如果在Imba上重写此代码，则会得到以下信息。

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App>

让我们比较一下这两个代码片段。即，我们注意以下三个功能：

内联标签。请注意， class App extends React.Component的构造class App extends React.Component ，该结构class App extends React.Component被转换为更简单的形式- tag App 。语言中内置了tag关键字。 DOM标签也是内置的。
缺少结束标签。由于行的对齐方式决定了程序的结构，因此您不需要关闭标签（例如，使用</button> ）。这样可以加快程序文本的输入速度并减小其大小。
简单的类语法。 Imba简化了HTML类的使用。即，不是将className="container"构造繁琐，而是将.container添加到标签本身就足够了。

您可能还已经注意到Imba中事件处理程序的功能。也就是说，我们使用以下结构将相应的处理程序连接到按钮:tap.logOut ，而不是onClick={this.logOut} 。这只是处理来自用户的事件的几种方式之一。可以在这里找到有关此内容的详细信息。

处理数据

现在，让我们谈谈在Imba中处理数据的问题。以下示例显示了一个React应用程序，该App组件的状态下有一个count变量等于0。通过单击相应的按钮，此变量的值减小或增大。

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } }

这就是Imba的外观。

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App>

比较这两个示例时，引起您注意的第一件事是代码量的差异。

Imba示例的行数和代码量都短了大约两倍。

尽管在比较编程语言时对代码行数的比较不是很重要，但是它会影响代码的可读性，在某些代码库的规模上，代码的可读性已经发挥了作用。与React相比，Imba上更少的代码意味着更好的可读性。

隐式自我访问

您可能已经注意到，在上面的示例中，我们直接访问对象的实例变量，仅提及其名称count 。在React中，使用this.state.count构造完成相同的事情。

在我们关于Imba的示例中，也可以使用self.count形式的self.count ，但是， self是在此处隐式访问的，因此self可选的。当引用count ，Imba会发现此类变量是否存在于应用程序本身的范围内或实例中。

变异性

前面两个示例之间的另一个主要区别是它们如何实现状态更改。在用Imba编写的示例中，状态是可变的，这使您可以直接更改count变量的值。

React采用了另一种方法，其中this.state的值this.state认为是不可变的，因此更改它的唯一方法是使用this.setState 。

如果您希望使用不可变状态，则可以将适当的库与Imba一起使用。从这个意义上说，Imba语言与任何特定解决方案无关。在Scrimba项目中，我们使用可变状态，因为我们认为我们不需要确保免疫力所需的过多系统资源成本。

建立开发环境

既然您已经熟悉了Imba的基础知识，就该开始进行实验了。为此，您将需要配置开发环境。为此，只需执行以下命令。

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev

之后，转到浏览器，位于http://localhost:8080/ ，您将看到项目的主页。为了修改应用程序-编辑文件，该文件可以在src/client.imba找到。

如果Imba的本地安装不适合您，则可以使用Scrimba项目的交互式在线沙箱。

英巴表演

让我们谈谈用Imba编写的应用程序的性能。 Imba允许您创建非常快速的Web应用程序的原因是因为该语言未使用Virtual DOM概念，该概念已在React中变得非常流行。 Imba使用记忆化DOM技术。它比虚拟DOM简单，并且使用较少的中间机制来处理DOM。

在此基准测试中，您只需单击其页面上的RUN BENCHMARK按钮即可在家里RUN BENCHMARK ，我们将使用Imba，React和Vue修改TODO列表时在一秒钟内可以执行的操作数与DOM进行了比较。

在测试中，结果显示如下，结果表明Imba比React和Vue快20-30倍。在不同的计算机上，测试结果将有所不同。

Imba，React和Vue性能测量

如您所见，使用Imba意味着可以非常快速地使用DOM。

总结

在本文中，我们仅研究了最基本的Imba。如果您对此语言感兴趣，请参阅其文档。特别是，掌握他使用getter和setter的概念以及隐式调用的机制将非常有用。这是与Imba相关的有用资源的列表。应该指出的是，这种语言乍一看似乎很困难，要花一些时间才能熟练掌握，但是，众所周知，您不能轻易地从池塘中捞出一条鱼。

亲爱的读者们！ 您打算在项目中使用Imba语言吗？

Imba：JavaScript兼容语言，可快速使用DOM