Una micro biblioteca para IU similar a React

Etiquetas personalizadas • Sintaxis agradable • DOM virtual • Tamaño minúsculo

¿Porqué necesitamos otra biblioteca para IU?

El frontend está lleno de librerías pero, honestamente, sentimos que la solución está aún “ahí fuera”. Creemos que Riot ofrece el balance correcto para resolver el gran rompecabezas. Mientras React parece hacerlo, tiene serios puntos débiles que Riot resuelve.

Así que — He aquí porqué necesitamos esta nueva biblioteca:

1. Etiquetas (tags) personalizadas

Riot brinda etiquetas personalizadas para todos los navegadores.

<todo>

  <!-- diseño -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Agregar #{ items.length + 1 }</button>
  </form>

  <!-- estilos -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- lógica -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

Una etiqueta personalizada fusiona texto HTML y código JavaScript en un componente reutilizable. Piense en React + Polymer, pero con una sintaxis agradable y una mínima curva de aprendizaje.

Legible a humanos

Las etiquetas personalizadas le permiten construir vistas complejas con HTML. Su aplicación podría verse como algo así:

<body>

  <h1>Comunidad Acme</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

La sintaxis HTML es el idioma de facto de la web y está diseñado para construir interfaces de usuario. La sintaxis es explícita, la anidación es inherente al lenguaje, y los atributos ofrecen una manera limpia de proporcionar opciones a las etiquetas personalizadas.

Las etiquetas Riot son convertidas a JavaScript “puro” antes de que los navegadores las ejecuten.

DOM virtual

Cercano a los estándares

Amigable a las herramientas

2. Simple y minimalista

Su minimalismo lo coloca aparte de los otros:

1. Sintaxis agradable

Uno de los objetivos en el diseño de Riot fue introducir una sintaxis de etiquetas poderosa, con el menor código repetitivo posible:

2. Mínima curva de aprendizaje

Riot tiene entre 10 y 100 veces menos API que otras bibliotecas UI.

3. Tamaño minúsculo

polymer.min.js – 138KB

react.min.js – 119KB

riot.min.js – 10.37KB

4. Pequeño, pero completo

Riot tiene todos los bloques necesarios para construir aplicaciones modernas de lado cliente:

Riot es una “pila abierta” (open stack). Esto es importante para los desarrolladores que quieren evitar lenguajes específicos a un framework. Las herramientas genéricas le permiten mezclar y seguir patrones de diseño. Sistemas como Flux de Facebook pueden ser hechos por usted.

Vi el ejemplo de riot.js, y se siente tan limpio que da miedo. @paulbjensen

Sólo me lié con #RiotJS durante una hora. Lo tuve configurado con Gulp, Browserify y Babel al instante. Me gusta mucho lo que va! @AndrewDelPrete

Hoy usé #riotjs 2.0 por primera vez y puedo admitir que será una relación a largo plazo #js altamente recomendado. @gianlucaguarini

Me gustó la idea de #reactjs con #flux pero me gusta #riotjs con #riotcontrol aun más! @tscok

Viendo RiotJS https://muut.com/riotjs/ — impresionado por su simplicidad. @defeated

Jugué con riot.js y me gustó mucho más que React. Minimalista, rápido y con una API comprensible. @juriansluiman

Conclusión

Riot es Web Components para todos. Piense en React + Polymer, pero sin la sobrecarga. Su uso es intuitivo y pesa casi nada. Y trabaja hoy. No reinventa la rueda, sino más bien toma las partes buenas de lo que hay y crea la herramienta más simple posible.

Deberíamos enfocarnos en componentes reutilizables en lugar de plantillas. Según los desarrolladores de React:

“Las plantillas alejan tecnologías, no preocupaciones.”

Al tener el diseño y la lógica relacionada juntos en el mismo componente el sistema en general se vuelve más limpio. Nuestro reconocimiento a React por esta importante idea.

La entrada inicial del blog

De React a Riot 2.0