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
- La mínima cantidad de actualizaciones y reflujos al DOM
- Flujo de datos de una vía: las actualizaciones y desmontajes son propagados hacia abajo, del padre a los hijos
- Las expresiones son precompiladas y guardadas en caché para un alto desempeño
- Ciclo de vida de los eventos, para un mayor control
- Renderizado de las etiquetas en el lado servidor para aplicaciones universales (isomorfas)
Cercano a los estándares
- Sin sistema de eventos propietario
- El DOM resultante puede ser libremente manipulado con otras herramientas
- Sin elementos HTML raíz adicionales o atributos
data- - Interactúa bien con jQuery
Amigable a las herramientas
- Cree etiquetas con ES6, Typescript, CoffeeScript, Jade, LiveScript o cualquier pre-procesador que desee
- Intégrelo con NPM, CommonJS, AMD, Bower o Component
- Utilícelo con conectores para Gulp, Grunt o Browserify
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:
- Poderosos atajos:
class={ enabled: is_enabled, hidden: hasErrors() } - Sin carga extra al cerebro como
render,state,constructoroshouldComponentUpdate - Interpolación:
Agregar #{ items.length + 1 }oclass="item { selected: flag }" - La etiqueta
<script>para encerrar la lógica es opcional - Sintaxis compacta ES6 para métodos
2. Mínima curva de aprendizaje
Riot tiene entre 10 y 100 veces menos API que otras bibliotecas UI.
- Menos que aprender. Pocos libros o tutoriales que ver
- Menos elementos propietarios y más elementos estándares
3. Tamaño minúsculo
polymer.min.js – 138KB
react.min.js – 119KB
riot.min.js – 10.85KB
- Menos errores
- Más fácil de analizar y rápido para descargar
- Incorporable. La biblioteca debería ser menor que la aplicación
- Menos que mantener. No necesitamos un equipo grande para mantener Riot
4. Pequeño, pero completo
Riot tiene todos los bloques necesarios para construir aplicaciones modernas de lado cliente:
- Vistas “reactivas” para construir interfaces de usuario
- Biblioteca de eventos para construir APIs con módulos aislados
- Router que administra el URL y el botón de retroceso
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.