Imba: JavaScript-compatible language for quick work with DOM

 3r? 3517. 3r3-31. Imba is an open source programming language created by Scrimba specifically for developing web applications. It compiles into jаvascript and is able to work inside an existing JS ecosystem. It is, for example, about Node.js, about npm, about Webpack. 3r3501.  3r? 3517. 3r3501.  3r? 3517. Imba’s main strength is that it will allow you to create much faster applications than those based on libraries using Virtual DOM technology, like React and Vue. Application performance increases due to how Imba handles DOM updates. Details about this can be read here is . 3r3501.  3r? 3517. 3r3501.  3r? 3517. Imba: JavaScript-compatible language for quick work with DOM 3r3501.  3r? 3517. 3r3501.  3r? 3517. The author of this material, the co-founder of the Scrimba project, says that Imba has been using it for several years. According to him, writing in this language is a real pleasure, since, in comparison with jаvascript, it has a cleaner syntax, which improves the readability of the code. 3r3501.  3r? 3517. 3r3501.  3r? 3517. This material is an Imba Beginner's Guide, which will enable you to start building simple applications. First, the basics of the language will be revealed here, then the development of user interfaces with its help will be considered. The setup of the development environment for programming on Imba will also be shown here. 3r3501.  3r? 3517.
3r3501.  3r? 3517.


On projects that use Imba

3r3501.  3r? 3517. Before we go into the code, I would like to draw your attention to the fact that Imba is not something like another strange language compiled in JS and used exclusively in amateur projects. It is used in serious applications of large companies. 3r3501.  3r? 3517. 3r3501.  3r? 3517. One example of its use is a platform that supports 3r3339. fish auction 3r3505. in Iceland. In this country, fish trade accounts for about 1.6% of GDP, which is about $ 390 million. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33466. Icelandic Fish Auction
3r37474. 3r3501.  3r? 3517. 3r3501.  3r? 3517. Another example is the 3r3358 learning platform. Scrimba.com 3r3505. where Imba is used on the client and server parts of the project. The convenience of working with this platform, which is based on a complex application, depends heavily on Imba's ability to quickly synchronize changes to DOM. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33466. 3r3365. 3r? 3513. 3r3501.  3r? 3517. 3r33471.
Scrimba.com platform
3r37474. 3r3501.  3r? 3517. 3r3501.  3r? 3517. As a result, we can say that the language with which you will meet today is suitable for the development of projects of various scales. 3r3501.  3r? 3517. 3r3501.  3r? 3517.


Syntax

3r3501.  3r? 3517. Imba syntax is a lot like jаvascript, but other languages ​​such as Ruby and Python also influenced it. Perhaps the features of syntax Imba will be convenient to consider an example. Below is a simple JS function that returns the largest of the two numbers passed to it, or, if these numbers are equal, the value of false . 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. function findGreatest (num? num2) {
if (num1> num2) {3r3353517. return num1
} else if (num2> num1) {
return num2
} else {
return false
}
} 3r33434. 3r3501.  3r? 3517. Now write the same thing on Imba. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. def findGreatest num? num2
if num1> num2
num1
elif num2> num1
num2
else
false 3r33434. 3r3501.  3r? 3517. Perhaps comparing these two examples, you can immediately see the differences between Imba and jаvascript. Namely, they are as follows:
 3r? 3517. 3r3501.  3r? 3517.
  1.  3r? 3517.
  2. function turns into 3r3456. def . Keyword function replaced by the keyword def .  3r? 3517.
  3. Lack of brackets. Function parameters are not enclosed in brackets. In Imba, in fact, brackets are rarely needed, although you can use them if you like.  3r? 3517.
  4. Indentation. Indentations play a very important role in Imba. This means that braces are not needed here.  3r? 3517.
  5. Absence of the keyword 3r3456. return . In Imba, the return of values ​​from functions is performed implicitly, that is, in the keyword return need not arise. Imba automatically returns the last function expression.  3r? 3517.
3r3501.  3r? 3517. This is not to say that the above syntax features are the most important aspect of Imba, but they make the code more concise than similar code written in jаvascript. This advantage will become more noticeable as we move through the material. 3r3501.  3r? 3517. 3r3501.  3r? 3517.

Constructing user interfaces

3r3501.  3r? 3517. Let's talk about creating user interfaces using Imba. Strictly speaking, this language was created precisely for this. In particular, this means that the DOM nodes are built into the language in the form of so-called "first-class objects." 3r3501.  3r? 3517. 3r3501.  3r? 3517. If you have experience with React development, you can consider this feature of Imba as if Imba has its own version of JSX built into the language. 3r3501.  3r? 3517. 3r3501.  3r? 3517. Consider the following code, in which the React library is used to render a button and to display a message in the console when this button is clicked. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. class App extends React.Component {3r3353517. 3r? 3517. logOut () {
console.log ('button clicked!')
}
3r? 3517. render () {
return (3r? 351? 3r? 3300. 3r? 3517. 3r? 3190. click me! 3r? 3306. 3r? 351? 3r? 3513. 3r? 3517.) 3r33517.}
} 3r33434. 3r3501.  3r? 3517. If this is rewritten on Imba, then we get the following 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. tag App 3r33517. 3r? 3517. def logOut e
log 'button clicked!' 3r? 3517. 3r? 3517. def render
3r33336. 3r? 3517. 'Click me!' 3r? 3517. 3r? 3517. Imba.mount here is . 3r3501.  3r? 3517. 3r3501.  3r? 3517.

Work with data 3r3485.

3r3501.  3r? 3517. Now let's talk about working with data in Imba. The following example shows a React application in the state of the component. App whose variable is count equal to 0. The value of this variable decreases or increases when you click on the corresponding buttons. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. class App extends React.Component {3r3353517. 3r? 3517. state = {
count: 0
}
3r? 3517. increase = () => {
this.setState ({
count: this.state.count + 1
})
}
3r? 3517. decrease = () => {
this.setState ({
count: this.state.count - 1
})
}
3r? 3517. render () {
the contacts are another (3r?335. 3r???. 3r3-3517. 3r3302. 3r3-37173. 3r333173.}
} 3r33434. 3r3501.  3r? 3517. Here's how the same will look on Imba. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33421. 3r33434. tag App 3r33517. 3r? 3517. prop count default: 0
3r? 3517. def increase
count + = 1 r3r3517. 3r? 3517. def decrease
count - = 1
3r? 3517. def render
3r33336. 3r? 3517. 3r33338. 'Increase!' 3r? 3517. 3r33333. 'Decrease!' 3r? 3517. 3r33333. count
Imba.mount online sandbox Scrimba project. 3r3501.  3r? 3517. 3r3501.  3r? 3517.

Performance Imba

3r3501.  3r? 3517. Let's talk about the performance of applications written on Imba. The reason Imba allows you to create extremely fast web applications is that this language does not use the concept of Virtual DOM, which has become very popular with the introduction of React. Imba uses technologyI have a memoized dom. It is simpler than the Virtual DOM, and uses fewer intermediate mechanisms for working with the DOM. 3r3501.  3r? 3517. 3r3501.  3r? 3517. In 3r3454. This benchmark, which you can run at your place by simply pressing the button. RUN BENCHMARK on its page, a comparison was made of the number of operations with DOM, which can be performed in a second in the process of modifying the TODO list with Imba, React and Vue. 3r3501.  3r? 3517. 3r3501.  3r? 3517. In the test, the results of which are shown below, it turned out that Imba is 20-30 times faster than React and Vue. On different computers the test results will vary. 3r3501.  3r? 3517. 3r3501.  3r? 3517. 3r33466. Results of performance measurements Imba, React and Vue
3r37474. 3r3501.  3r? 3517. 3r3501.  3r? 3517. As you can see, using Imba means the ability to work extremely fast with the DOM. 3r3501.  3r? 3517. 3r3501.  3r? 3517.


Results

3r3501.  3r? 3517. In this article, we have considered only the very basics of Imba. If you are interested in this language - take a look at its documentation 3r3505. . In particular, it will be useful to master his concept of using getters and setters and the mechanism of implicit calls.
Here is
list of helpful resources related to imba. It should be noted that at first this language may seem complicated, it will take some time to master it, but, as everyone knows, you cannot easily pull a fish out of the pond. 3r3501.  3r? 3517. 3r3501.  3r? 3517. Dear readers! Do you plan to use the Imba language in your projects? 3r3501.  3r? 3517. 3r3501.  3r? 3517.
3r? 3513. 3r? 3517. 3r? 3517. 3r? 3517. 3r? 3510. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33511. 3r? 3517. 3r? 3513. 3r? 3517. 3r? 3517. 3r? 3517. 3r? 3517.
+ 0 -

Add comment