Imba: lenguaje compatible con JavaScript para un trabajo rápido con DOM

Imba es un lenguaje de programación de código abierto creado por Scrimba específicamente para desarrollar aplicaciones web. Se compila en JavaScript y puede funcionar dentro del ecosistema JS existente. Estamos hablando, por ejemplo, de Node.js, de npm, de Webpack.

La principal fortaleza de Imba es que este lenguaje le permitirá crear aplicaciones mucho más rápidas que las basadas en bibliotecas que utilizan la tecnología DOM virtual, como React y Vue. Las mejoras en el rendimiento de las aplicaciones se logran a través de la forma en que Imba trabaja con las actualizaciones DOM. Los detalles sobre esto se pueden encontrar aquí .



El autor de este material, cofundador del proyecto Scrimba, dice que ha estado usando Imba durante varios años. Según él, escribir en este lenguaje es un verdadero placer, ya que, en comparación con JavaScript, tiene una sintaxis más limpia, lo que mejora la legibilidad del código.

Este material es una guía de Imba para principiantes, cuyo desarrollo le permitirá comenzar a crear aplicaciones simples. Primero, se revelarán los conceptos básicos del lenguaje aquí, luego se considerará el desarrollo de interfaces de usuario con su ayuda. Enseguida mostrará la configuración del entorno de desarrollo para la programación en Imba.

Sobre proyectos que usan Imba

Antes de entrar en el código, me gustaría llamar su atención sobre el hecho de que Imba no es algo así como otro lenguaje extraño compilado en JS y utilizado exclusivamente en proyectos de aficionados. También se utiliza en aplicaciones serias de grandes empresas.

Un ejemplo de su aplicación es la plataforma que apoya la subasta de pescado en Islandia. En este país, el comercio pesquero representa alrededor del 1.6% del PIB, que es de aproximadamente $ 390 millones.


Subasta de pescado islandés

Otro ejemplo es la plataforma de capacitación Scrimba.com , donde se usa Imba en las partes del cliente y el servidor del proyecto. La usabilidad de esta plataforma, que se basa en una aplicación compleja, depende en gran medida de la capacidad de Imba para sincronizar rápidamente los cambios DOM.


Plataforma Scrimba.com

Como resultado, podemos decir que el idioma que conocerá hoy es adecuado para desarrollar proyectos de varias escalas.

Sintaxis

La sintaxis de Imba se parece mucho a JavaScript, pero otros lenguajes como Ruby y Python también tienen un efecto. Quizás las características de sintaxis de Imba se consideren convenientemente como un ejemplo. A continuación se muestra una función JS simple que devuelve el mayor de los dos números que se le pasaron o, si estos números son iguales, false .

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

Ahora escribe lo mismo en Imba.

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

Probablemente, al comparar estos dos ejemplos, puede ver de inmediato las diferencias entre Imba y JavaScript. A saber, son los siguientes:

1. function convierte en def . La function palabra clave function reemplaza por la palabra clave def .
2. Falta de corchetes. Los parámetros de la función no están encerrados entre paréntesis. En Imba, de hecho, rara vez se necesitan paréntesis, aunque puede usarlos si lo desea.
3. Sangría La sangría juega un papel muy importante en Imba. Esto significa que las llaves no son necesarias aquí.
4. Falta la palabra clave return . En Imba, la devolución de valores de funciones se realiza implícitamente, es decir, no hay necesidad de la palabra clave return . Imba devuelve automáticamente la última expresión de función.

Esto no quiere decir que las características de sintaxis descritas anteriormente son el aspecto más importante de Imba, pero hacen que el código sea más conciso que un código similar escrito en JavaScript. Esta ventaja se hará más notable a medida que avancemos en el material.

Diseño de interfaz de usuario

Hablemos de crear interfaces de usuario usando Imba. De hecho, este lenguaje fue creado solo para esto. En particular, esto significa que los nodos DOM están incrustados en el lenguaje en forma de los llamados "objetos de primera clase".

Si tiene experiencia con el desarrollo de React, puede considerar esta característica de Imba como si Imba tuviera su propia versión de JSX integrada en el lenguaje.

Considere el siguiente código, en el que la biblioteca React se usa para representar un botón y mostrar un mensaje a la consola cuando hace clic en este botón.

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

Si reescribe esto en Imba, obtienes lo siguiente.

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

Comparemos estos dos fragmentos de código. A saber, prestamos atención a las siguientes tres características:

1. Etiquetas en línea Tenga en cuenta que la construcción de la class App extends React.Component ha convertido a una forma mucho más simple: la tag App . La palabra clave de la tag está integrada en el idioma. Las etiquetas DOM también están integradas.
2. Falta de etiquetas de cierre. Como la alineación de línea determina la estructura del programa, no es necesario cerrar las etiquetas (por ejemplo, usando la </button> ). Esto acelera la entrada de texto del programa y reduce su tamaño.
3. Sintaxis de clase simple. Imba simplifica el trabajo con clases HTML. Es decir, en lugar de la engorrosa construcción de className="container" es suficiente agregar .container a la etiqueta misma.

También puede haber notado características de los controladores de eventos en Imba. Es decir, conectamos el controlador correspondiente al botón usando la construcción :tap.logOut , utilizada en lugar de onClick={this.logOut} . Esta es solo una de varias maneras de manejar eventos que provienen del usuario. Los detalles sobre esto se pueden encontrar aquí .

Trabajar con datos

Ahora hablemos de trabajar con datos en Imba. El siguiente ejemplo muestra una aplicación React, en el estado del componente de la App del cual hay una variable de count igual a 0. El valor de esta variable disminuye o aumenta haciendo clic en los botones correspondientes.

 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>   ) } } 

Así es como se verá lo mismo en 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> 

Lo primero que llama la atención al comparar estos dos ejemplos es la diferencia en la cantidad de código.

El ejemplo de Imba es aproximadamente dos veces más corto, tanto en términos del número de líneas como de la cantidad de código.

Aunque la comparación del número de líneas de código al comparar lenguajes de programación no es tan importante, afecta la legibilidad del código, que, en la escala de una determinada base de código, ya juega un papel. Menos código en Imba significa mejor legibilidad en comparación con React.

Auto acceso implícito

Es posible que haya notado que en el ejemplo anterior, accedemos directamente a la variable de instancia del objeto, mencionando solo su count nombres. En React, lo mismo se hace usando la construcción this.state.count .

En nuestro ejemplo en Imba, uno también podría usar una construcción de la forma self.count , sin embargo, self se accede aquí implícitamente, por lo que self opcional. Imba, cuando se refiere al count , descubre si dicha variable existe en el alcance o en la instancia de la propia aplicación.

Mutabilidad

Otra diferencia importante entre los dos ejemplos anteriores es cómo implementan el cambio de estado. En un ejemplo escrito en Imba, el estado es mutable, lo que le permite cambiar el valor de la variable de count directamente.

React adopta un enfoque diferente, donde el valor de this.state considera inmutable, como resultado, la única forma de cambiarlo es usar this.setState .

Si prefiere trabajar con estado inmutable, puede usar la biblioteca apropiada con Imba. El lenguaje Imba en este sentido no está vinculado a ninguna solución en particular. Nosotros, en el proyecto Scrimba, utilizamos un estado mutable, ya que creemos que no necesitamos los costos excesivos de los recursos del sistema necesarios para garantizar la inmunidad.

Establecer un entorno de desarrollo

Ahora que se ha familiarizado con los conceptos básicos de Imba, es hora de experimentar. Para hacer esto, deberá configurar el entorno de desarrollo. Para hacer esto, simplemente ejecute los siguientes comandos.

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

Después de eso, vaya al navegador en http://localhost:8080/ y verá la página principal del proyecto. Para modificar la aplicación, edite el archivo, que se puede encontrar en src/client.imba .

Si la instalación local de Imba no le conviene, puede utilizar el entorno interactivo en línea del proyecto Scrimba.

Imba Performance

Hablemos sobre el rendimiento de las aplicaciones escritas en Imba. La razón por la que Imba le permite crear aplicaciones web extremadamente rápidas es porque este lenguaje no utiliza el concepto DOM virtual, que se ha vuelto muy popular con React. Imba usa la tecnología Memoized DOM. Es más simple que el DOM virtual y utiliza menos mecanismos intermedios para trabajar con el DOM.

En este punto de referencia, que puede ejecutar en casa simplemente haciendo clic en el botón RUN BENCHMARK en su página, comparamos el número de operaciones con el DOM que se pueden realizar en un segundo durante la modificación de la lista TODO usando Imba, React y Vue.

En la prueba, cuyos resultados se muestran a continuación, resultó que Imba es 20-30 veces más rápido que React y Vue. En diferentes computadoras, los resultados de la prueba variarán.


Mediciones de rendimiento de Imba, React y Vue

Como puede ver, usar Imba significa la capacidad de trabajar extremadamente rápido con el DOM.

Resumen

En este artículo, hemos cubierto solo los conceptos básicos de Imba. Si está interesado en este idioma, eche un vistazo a su documentación . En particular, será útil dominar su concepto de usar getters y setters y el mecanismo de llamadas implícitas. Aquí hay una lista de recursos útiles relacionados con Imba. Cabe señalar que al principio este idioma puede parecer difícil, tomará algún tiempo dominarlo, pero, como todos saben, no es fácil sacar un pez de un estanque.

Estimados lectores! ¿Planea utilizar el lenguaje Imba en sus proyectos?