Anda di halaman 1dari 54

La guía definitiva para los

marcos de JavaScript

John

Hannah16 DE ENERO DE 2018


Desplazarse hacia abajo
Actualizado el 4 de marzo de 2018: Se agregó CxJS, Stencil y Stimulus.
Mantenerse al día con los marcos de JavaScript puede ser un desafío. Hay
muchos de ellos, y aparentemente uno más cada mes. ¿Cómo sabes
cuáles podrían ser los adecuados para tu proyecto? Cuales son sus
fortalezas y debilidades? ¿Cómo empiezas?

Ahí es donde entra esta guía. Es un documento vivo que es una referencia
para todos los frameworks de front-end de JavaScript conocidos (los
proyectos archivados o desaprobados no están incluidos). En este caso, el
término "marcos" se está utilizando en un sentido amplio. Incluye
bibliotecas de interfaz de usuario (UI) como React, así como marcos
completos como Angular.

¿Por qué es esto útil?


Algunos de ustedes se estarán preguntando por qué una guía como esta
es útil. La mayoría de los lectores terminarán usando uno de los
frameworks que llamo los "Tres Grandes": React, Angular y Vue. Está
bien. Son excelentes opciones. Dicho esto, una guía como esta tiene
valor. Aquí hay un ejemplo ...

Es trabajo en equipo, pero más simple, más agradable y más productivo.ANUNCIOS A


TRA VÉS DE CA RBON

Quizás hayas oído hablar del marco Dojo . Probablemente no, sin
embargo. Dojo se centra en un par de cosas que lo hacen único:
accesibilidad e internacionalización. Todos los widgets de Dojo son
accesibles por defecto y proporcionan todo lo necesario para
internacionalizar una aplicación.

Otro ejemplo ... tal vez está haciendo una aplicación que necesita un
rendimiento excelente en redes móviles. Hay una cantidad de bibliotecas
y marcos muy buenos y de alto rendimiento que se enumeran a
continuación que pueden ajustarse a la factura.
También hay pequeños marcos que brindan una fantástica oportunidad
de aprendizaje. Puedes profundizar en el código y descubrir por ti mismo
cómo se construye este tipo de software. Ultradom es una biblioteca que
puedes utilizar para construir tu propio marco . Muy bueno, ¿verdad?

Cómo está organizada esta guía


Los marcos están divididos en categorías amplias: lo verá en las tablas de
listados a continuación. En la medida de lo posible, cada marco tendrá
una sección que explica la justificación del marco, sus ventajas y
desventajas y algunos recursos de aprendizaje adicionales.

Si usted es autor de un framework o admirador de uno, y no ve su


estructura en la lista, o desea corregir cierta información, comuníquese
conmigo en Twitter. Estaré encantado de agregar o actualizar la lista.

Guía de iconos:
Los iconos a continuación están destinados a ayudar a los lectores a
comprender las características y tendencias del marco general. Ellos son
solo guías ásperas.

🔥 Rendimiento: uno de los cinco mejores intérpretes en los benchmarks


paradigma de programación funcional paradigma de
programación reactiva paradigma
de programación orientada a objetos
TypeScript como lenguaje de desarrollo primario

Los tres grandes


Reaccionar
Angular
Vue.js
Históricamente Significativo
AngularJS
Columna vertebral
Ascua

Incapaz
Aurelia
Olmo
Infierno 🔥
Polímero
Preact
ReasonML
Svelte 🔥

Resto del paquete


AppRun
Binding.scala
Bobril 🔥
Choo
CxJS
Cycle.js
DIO 🔥
Dojo
Domvm 🔥
DoneJS
Grabar al agua fuerte
Gruu
Luz tenue
Hyperapp 🔥
Hiperdominio
hyperHTML
Ivi 🔥
Knockear
Maqueta
Marko
Mithril
Luna
Nerv
NX
petit-dom 🔥
Pux
Ractivo
reaccionar-lite
RE: DOM 🔥
Reflejo
Alboroto
rxdomh
San
Simulacra.js
Slim.js
Stem JS
Plantilla
Estímulo
Excedente Sur
Termita
TSERS
Ultradom 🔥
Vidom
Vuera

Los tres grandes


Los tres marcos que actualmente dominan en popularidad y uso son
React, Angular y Vue. Cada uno tiene comunidades grandes y muchos
recursos de capacitación disponibles. Si eres un desarrollador nuevo que
está aprendiendo un marco para ayudarte a conseguir un trabajo, estas
tres son tus mejores apuestas. Aquí hay un vistazo a sus descargas npm
en los últimos seis meses:
Podemos ver que React está muy por delante de Angular y Vue. Lo que es
menos evidente es que Vue ha tenido aproximadamente el doble de la
tasa de crecimiento durante el año pasado en comparación con
Angular. Si las estrellas de GitHub son un indicador del entusiasmo o
interés de los desarrolladores, entonces Vue se ve fuerte allí también, con
79,000 estrellas en comparación con las 32,000 de Angular. React tiene
casi 86,000 estrellas en este momento.

Reaccionar
React se presentó como un proyecto de código abierto en mayo de 2013.
El autor original fue Jordan Walke, un ingeniero de Facebook.

Reacciona las facturas como "una biblioteca de JavaScript para crear


interfaces de usuario", a diferencia de un marco completo como
Angular. Las preocupaciones como el enrutamiento, la administración del
estado y la obtención de datos se han dejado a terceros. Esto ha
resultado en un ecosistema grande y muy activo alrededor de React.
Muchas aplicaciones grandes de React utilizarán la popular biblioteca
de Redux para la administración del estado y el enrutador React para el
enrutamiento, pero hay otras buenas alternativas disponibles.

React es responsable de popularizar los principios de programación


funcional entre una nueva generación de desarrolladores. Aunque no es
una biblioteca puramente funcional, permite a los desarrolladores trabajar
en un estilo en gran parte funcional, particularmente cuando se combina
con Redux.

Para obtener más información sobre cómo React se compara con otros
marcos populares, consulte mi artículo en React y Angular , y este
en React y Vue .

Pros

 Muy popular con un fuerte mercado de trabajo


 Muchos recursos de capacitación y bibliotecas de terceros para ayudar a
acelerar el desarrollo
 La mejor opción para equipos multiplataforma (web, móvil, escritorio,
otros dispositivos)
 Versátil
 Soporte corporativo fuerte (Facebook)

Contras

 La abundancia de opciones puede ser abrumadora al principio


 Las mejores prácticas no siempre son claras para los recién llegados
 La curva de aprendizaje puede ser pronunciada para crear aplicaciones
más grandes

Recursos adicionales

 Sí, React está asumiendo el desarrollo de front-end. La pregunta es por


qué.
 10 razones por las que me mudé de Angular a Reaccionar
 Un front-end funcional con React
 La guía para principiantes para ReactJS ( Curso gratuito de video)

⬆️ Volver al comienzo

Angular

Angular es el sucesor de AngularJS. Es un marco completo y


obstinado que proporciona valores predeterminados para la obtención de
datos, la gestión del estado, el lenguaje de desarrollo y la cadena de
herramientas de compilación.

Quizás la característica más notable de Angular es su uso


de TypeScript como el lenguaje de desarrollo. Esto ha hecho que el marco
sea adecuado para aquellos que provienen de lenguajes tradicionales
orientados a objetos como Java y C #, ya que TypeScript se inspira en
esos lenguajes.

Se ha dicho que las "empresas" son los usuarios objetivo de Angular. En el


sentido de que muchas compañías grandes tienen equipos familiarizados
con Java y otros lenguajes orientados a objetos, esto puede ser correcto.

Pros

 Marco con todas las funciones con valores predeterminados bien


probados
 TypeScript proporciona un lenguaje familiar para aquellos con
antecedentes en programación orientada a objetos
 Soporte corporativo fuerte (Google)
 Borrar las mejores prácticas
Contras

 La curva de aprendizaje puede ser empinada


 TypeScript puede ser una barrera para la adopción
 Pobre puesta en marcha de las métricas en los puntos de referencia

Recursos adicionales

 ¿Por qué debería usar Angular?


 El caso para usar Angular 2 en un nuevo proyecto
 Angular 4 en 60 minutos (video tutorial gratuito)
 Haciendo uso de RxJS en Angular
 Aprendizaje de Angular 5 como desarrollador React y Vue

⬆️ Volver al comienzo

Vue.js

Aunque a menudo se lo ve como el "nuevo chico en el


bloque", Vue existe desde 2013. Evan You es el creador y desarrollador
principal, ya diferencia de React y Angular, Vue no cuenta con el respaldo
directo de una gran empresa. En cambio, depende de donaciones
individuales y corporativas.

De los tres marcos más populares, Vue es ampliamente considerado


como el más fácil de aprender. Es similar a React en muchos aspectos,
pero también tiene cosas en común con AngularJS, por ejemplo,
directivas y plantillas.

La relativa simplicidad de Vue, la experiencia del desarrollador y el buen


desempeño han contribuido a un gran aumento en su popularidad.
Una característica notable de Vue es que es un "marco progresivo" y se
puede utilizar como un reemplazo de jQuery, así como para aplicaciones
de una sola página grandes. De la documentación de Vue:

A diferencia de otros marcos monolíticos, Vue está diseñado desde cero


para ser adoptable incrementalmente. La biblioteca central está enfocada
solo en la capa de visualización, y es fácil de seleccionar e integrar con
otras bibliotecas o proyectos existentes.

Mientras que Angular es obstinado y reacciona con agnóstico ante


problemas como el enrutamiento y la administración estatal, Vue adopta
un enfoque intermedio, con enrutamiento oficial y soluciones de
administración del estado que son opcionales, pero se mantienen
sincronizados con la biblioteca central.

Para obtener más información sobre cómo Vue se compara con React,
consulte mi artículoque revisa las diferencias.

Pros

 Fácil de aprender
 Buena documentación
 Aumentando en popularidad y uso
 El mejor rendimiento de los tres mejores marcos

Contras

 El mercado laboral actual es menor que el de React y Angular

Recursos adicionales

 Comparación con otros marcos


 Por qué elegimos Vue.js
 Learn Vue 2: Paso a paso (curso de video gratuito)
 Reactividad en profundidad
⬆️ Volver al comienzo

Históricamente Significativo
Hubo un tiempo hace algunos años cuando estos marcos se habrían
considerado los "Tres Grandes". Aunque hoy son menos populares,
todavía se usan ampliamente y han sido influyentes en el desarrollo de
marcos posteriores.

AngularJS
En 2013, AngularJS fue el marco más popular. Algunos de los
factores que contribuyeron a su popularidad durante ese período fueron
su arquitectura MVC, el estilo de programación declarativa, el enlace de
datos bidireccional y el sólido conjunto de características.

AngularJS tiene un enfoque obstinado y su objetivo es proporcionar a los


desarrolladores una solución completa :

AngularJS no es una pieza única en el rompecabezas general de construir el


lado del cliente de una aplicación web. Maneja todo el código de
pegamento DOM y AJAX que una vez escribió a mano y lo coloca en una
estructura bien definida. Esto hace que AngularJS exprese su opinión acerca
de cómo debe crearse una aplicación CRUD (Crear, Leer, Actualizar,
Eliminar). Pero si bien es obstinado, también intenta asegurarse de que su
opinión sea solo un punto de partida que pueda cambiar fácilmente.

A finales de 2013 se introdujo React. Reaccionó el flujo de datos


unidireccional utilizado y argumentó que el enlace de datos bidireccional
dificultaba la comprensión de las aplicaciones, particularmente a medida
que escalaban. En 2014, el equipo angular anunció Angular 2, que
posteriormente se renombraría simplemente Angular . Esta nueva versión
introduciría flujo de datos unidireccional entre otros cambios
importantes . Esto marcó el comienzo de un largo declive en la
popularidad de AngularJS.

A pesar del crecimiento de su proyecto sucesor, AngularJS todavía se usa


ampliamente y está en desarrollo activo.

Pros

 Abundantes recursos de entrenamiento


 Buena documentación
 Muy bien establecido
 Completo destacado

Contras

 Enlace de datos bidireccional, otros problemas técnicos que pueden no


ser deseables
 Disminución de la popularidad

Recursos adicionales

 Comprender AngularJS
 Aplicación de tutorial de PhoneCat
 Usos prácticos de AngularJS

⬆️ Volver al comienzo

Columna vertebral
Escrito por Jeremy Ashkenas, quien también creó
CoffeeScript, Backbonefue lanzado inicialmente en el otoño de 2010. Una
parte clave del ecosistema Backbone es Marionette , un marco que
simplifica el desarrollo.

El backbone es significativo porque fue uno de los primeros frameworks


que trajo más estructura a las aplicaciones frontales mediante la
implementación de un patrón MVC . De la documentación:

Lo más importante con lo que Backbone puede ayudarle es mantener su


lógica de negocio separada de su interfaz de usuario. Cuando los dos están
enredados, el cambio es difícil; cuando la lógica no depende de la interfaz
de usuario, es más fácil trabajar con su interfaz.

En los últimos años, Backbone ha visto una disminución en el uso, aunque


continúa enviándose en la última versión del sistema de administración
de contenido de Drupal. Un comentario relevante sobre una posible razón
para el declive:

El autor de Backbone, Jeremy Ashkenas tomó la decisión de llamar


Backbone "terminado" en términos de API y conjunto de características
después de la versión 1.0. Esto tiene la ventaja de dejar a Backbone como el
framework principal de JavaScript más estable, pero dificulta los esfuerzos
para extraer lecciones de otros frameworks.

Pros

 Proporciona estructura de código


 Proyecto estable

Contras
 Disminución de la popularidad
 Estilo de programación imperativo (a diferencia del estilo declarativo
popular)

Recursos adicionales

 BackBone Tutorial - Parte 1: Introducción a Backbone.Js


 Comenzando con Backbone.js

⬆️ Volver al comienzo

Ascua

Ember fue escrito por Yehuda Katz, un creador prolífico o


colaborador de numerosos proyectos de código abierto. Ember se basa
en el patrón MVVM y tiene un amplio conjunto de
características. También tiene un fuerte punto de vista filosófico :

Ember se propone proporcionar una solución completa al problema de la


aplicación del lado del cliente. Esto está en contraste con muchos
frameworks de JavaScript que comienzan brindando una solución a la V en
MVC (Model-View-Controller) e intentan crecer a partir de ahí ...

Ember es un componente de un conjunto de herramientas que trabajan


juntas para proporcionar una pila de desarrollo completa. El objetivo de
estas herramientas es hacer que el desarrollador sea productivo de
inmediato. Por ejemplo Ember CLI, proporciona una estructura de
aplicación estándar y una línea de construcción. También tiene una
arquitectura conectable y más de 3500 complementos para mejorarlo y
ampliarlo.

Una de las principales críticas de Ember es su gran tamaño, que tiene un


impacto negativo en el rendimiento. Ember también se considera que
tiene una curva de aprendizaje empinada y difícil de dominar.
Pros

 Borrar las mejores prácticas


 Muy bien establecido
 Completo destacado

Contras

 Talla grande
 Curva de aprendizaje empinada
 Disminución de la popularidad

Recursos adicionales

 Creando tu aplicación
 Ember.js Tutorial
 Calentando con Ember.js

⬆️ Volver al comienzo

Incapaz
Los marcos enumerados en esta sección tienen una buena
documentación y comunidades saludables a su alrededor. Aunque no son
tan ampliamente utilizados como "Los Tres Grandes", ocupan nichos
importantes y son notables por sus enfoques únicos o innovadores.

Aurelia

Aurelia , cuyo autor es Rob Eisenberg, puede verse como un


descendiente tanto de AngularJS como del marco anterior de Eisenberg,
Durandal. Antes de crear Aurelia, Eisenberg formó parte del equipo
Angular, dejando a fines de 2014 por desacuerdo con la dirección del
proyecto Angular 2.

Aurelia es un marco completo. Aquí está el tono básico de la


documentación:

Aurelia proporciona capacidades básicas como inyección de dependencias,


plantillas, enrutamiento y pub / sub, por lo que no es necesario armar un
conjunto de bibliotecas para crear una aplicación. Además de este núcleo
enriquecido, Aurelia también proporciona una serie de complementos
adicionales para la internacionalización, validación, diálogos modales,
virtualización de IU y mucho más.

Tampoco tiene que improvisar un montón de herramientas


diferentes. Aurelia proporciona una CLI para generar y construir proyectos,
un complemento de navegador para la depuración y un complemento de
código VS también. Sin embargo, no está obligado a utilizar ninguno de
estos, ya que Aurelia está estructurada para permitirle intercambiar
cualquier detalle, incluso el motor de plantillas / vinculaciones, para
garantizar la máxima flexibilidad.

Pros

 Solución completa
 Sin tener en cuenta el idioma, trabaja con JavaScript, TypeScript y otros
idiomas
 API estable

Contras

 Comunidad más pequeña frente a los marcos superiores


 Menos oportunidades de trabajo

Recursos adicionales
 Aurelia vs. Angular 2: ¿Qué debería elegir?
 Crear una aplicación de Todo
 Rob Eisenberg sobre Aurelia y cómo se compara contra Angular 2 y React

⬆️ Volver al comienzo

Olmo

Elm es algo único en esta lista. En lugar de un marco típico,


en realidad es un lenguaje separado que se compila en JavaScript, similar
a Reason . Sin embargo, se posiciona como una alternativa para
Reaccionar:

Elm es un lenguaje funcional que se compila en JavaScript. Compite con


proyectos como React como una herramienta para crear sitios web y
aplicaciones web. Elm tiene un fuerte énfasis en la simplicidad, facilidad de
uso y herramientas de calidad ... Puedo garantizar con seguridad que si le
das una oportunidad a Elm y realmente haces un proyecto en ella,
terminarás escribiendo mejor código JavaScript y Reaccionando .

Elm también ha sido muy influyente, incluida la de ser una de las fuentes
de inspiración para la popular biblioteca de gestión estatal de Redux .

Las ventajas básicas de Elm:

Olvida lo que has escuchado sobre la programación funcional. Palabras de


lujo, ideas extrañas, malas herramientas. Barf. Elm está a punto:

 Sin errores de tiempo de ejecución en la práctica. Sin nulo No indefinido no


es una función.
 Mensajes de error amistosos que lo ayudan a agregar funciones más
rápidamente.
 Código bien estructurado que se mantiene bien estructurado a medida que
crece tu aplicación.
 Versiones semánticas aplicadas automáticamente para todos los paquetes
de Elm.

Ninguna combinación de bibliotecas JS puede ofrecerle esto, pero todo es


gratis y fácil en Elm. Ahora estas cosas buenas solo son posibles porque Elm
se basa en más de 40 años de trabajo en lenguajes funcionales tipados.

Pros

 Eliminación de prácticamente todos los errores de tiempo de ejecución


 Arquitectura fuerte
 Refactorización simplificada

Contras

 En algunos casos se requiere interoperabilidad con JavaScript


(complejidad añadida)
 Comunidad más pequeña
 Menos oportunidades de trabajo

Recursos adicionales

 Una introducción a Elm


 Comience a usar Elm para crear aplicaciones web

⬆️ Volver al comienzo

Infierno
Si el rendimiento es su principal preocupación, Inferno podría
ser el marco para usted. Originalmente creado por Dominic Gannaway,
ahora miembro del equipo React, inicialmente Inferno fue diseñado para
demostrar que un marco de JavaScript podría funcionar bien en
dispositivos móviles.

Inferno comenzó como una idea hace dos años, para ver si una biblioteca
de UI realmente podría mejorar la experiencia, la batería, el uso de
memoria y el rendimiento en dispositivos móviles. En ese momento,
realmente teníamos problemas para obtener un buen rendimiento en
cualquier biblioteca / marco de IU, simplemente no estaba sucediendo ...

Inferno demuestra que es posible ser rápido en los dispositivos móviles ... En
términos de rendimiento, Inferno es actualmente la biblioteca de IU de
JavaScript más rápida que existe, tanto en los puntos de referencia como en
los escenarios reales del mundo real. Se destaca en el navegador en la
carga de la página inicial, los tiempos de análisis, los tiempos de render y
los tiempos de actualización. La renderización del lado del servidor de
Inferno es alrededor de 5 veces más rápida que React, alrededor de 3 veces
más rápido que Angular 2 y alrededor de 1.5 veces más rápido que Preact y
Vue.

Inferno tiene una API que es muy similar a React y es posible portar una
aplicación React directamente a Inferno utilizando la inferno-
compatbiblioteca.

Inferno también tiene su propio enrutador, que pronto se actualizará para


que coincida con la API de React Router 4, y es compatible con las
bibliotecas de administración de estado de Redux y MobX.

Pros

 Excelente actuación
 API familiar para desarrolladores de React
 Buena documentación

Contras

 Pequeña comunidad
 El uso inferno-compat puede afectar el rendimiento

Recursos adicionales

 Guía de Inferno
 Aprenda sobre Inferno JS: compile y autentique una aplicación
 Entrevista con Dominic Gannaway

⬆️ Volver al comienzo

Polímero

Polymer es una biblioteca respaldada por Google enfocada


en Web Components , un grupo propuesto de tecnologías que
actualmente no cuentan con un buen soporte en los
navegadores. Polymer, junto con Polymer App Toolbox, ayuda a los
desarrolladores a utilizar estas tecnologías hoy para construir aplicaciones
web.

Polymer es una biblioteca liviana que lo ayuda a aprovechar al máximo los


componentes web.

Con Web Components, puede crear elementos personalizados reutilizables


que interactúen sin problemas con los elementos integrados del navegador,
o divida su aplicación en componentes de tamaño adecuado, haciendo que
su código sea más limpio y menos costoso de mantener.
El polímero rocía un poco de azúcar con respecto a las API estándar de
componentes web, lo que facilita la obtención de excelentes resultados.

Una de las principales motivaciones del proyecto Polymer es avanzar en la


plataforma web. El equipo de Polymer tiene un hashtag #UseThePlatform
que explican en su página Acerca de:

... hay costos reales por hacer demasiado fuera y encima de la plataforma
en sí, costos que pagan tanto los desarrolladores como los usuarios. Los
costos del desarrollador vienen en forma de complejidad y lock-in.

Con el tiempo, los stacks que hemos construido sobre la plataforma han
llevado al desarrollo web cada vez más lejos de la simplicidad de view-
source y shift-refresh, a un lugar donde cada proyecto comienza con un
abrumador mar de opciones.

Gracias a las nuevas primitivas de la plataforma web, muchas de las


necesidades que hemos abordado al construir sobre y alrededor de la
plataforma ahora pueden ser satisfechas por la plataforma misma ...

Creemos que los patrones, las bibliotecas y las herramientas en las que
trabajamos son beneficiosos, y nos complace verlos ampliamente
adoptados. Pero nuestra campaña para #UseThePlatform no se trata en
última instancia de conducir a las personas a usar las cosas que construye
Polymer Project. Se trata de promover el uso de la plataforma web para
ofrecer las mejores aplicaciones posibles

Si ha seguido los esfuerzos muy apreciados de Google para promover la


plataforma web a lo largo de los años, mucho de esto le resultará familiar
y en línea con otros esfuerzos de la empresa.

Pros

 Soporte corporativo fuerte (Google)


 Admite estándares web emergentes

Contras
 Quejas de la comunidad sobre comunicación
 Un navegador deficiente limita las opciones / implementación de la visión

Recursos adicionales

 Construya una aplicación de tareas de polímeros en tiempo real


 Polímero: Comience
 Cree su primera aplicación con componentes de polímero y web
 La promesa rota de Web Components
 Equipo de Polímero - ¡Estoy realmente frustrado!

⬆️ Volver al comienzo

Preact

Escrito por Jason Miller, Preact es una alternativa React bien


establecida que enfatiza el tamaño de una biblioteca
pequeña. Procedente de 3 kB con gzip, Preact usa la misma API que React
y es compatible con gran parte del ecosistema.

Preact no tiene la intención de ser una reimplementación de React. Hay


diferencias. Muchas de estas diferencias son triviales, o pueden eliminarse
completamente mediante el uso de preact-compat, que es una capa
delgada sobre Preact que intenta lograr una compatibilidad del 100% con
React.

La razón por la que Preact no intenta incluir todas las características de


React es para mantenerse pequeño y enfocado; de lo contrario, tendría más
sentido simplemente enviar optimizaciones al proyecto React, que ya es una
base de código muy compleja y bien estructurada.
Preact es utilizado por una serie de grandes organizaciones, incluidas Lyft,
Pepsi y Uber . Aunque Preact tiene un mejor rendimiento de inicio (carga
de página, por ejemplo) que React, en los últimos benchmarks Reaccionar
es más rápido al actualizar la UI una vez que se carga la página.

Pros

 Ligero
 Buena documentación
 React compatible

Contras

 Comunidad más pequeña que React (pero mucha superposición, mezcla)


 El uso preact-compatpuede afectar el rendimiento

Recursos adicionales

 Empezando
 Comenzando con PreactJS - Una guía paso a paso
 Introducción a Preact: una alternativa React más pequeña y más rápida

⬆️ Volver al comienzo

Razón

En cierto modo, se puede pensar en Reason como parte del


ecosistema React. Sin embargo, es mucho más que eso. La razón es una
sintaxis en la parte superior del idioma OCaml. Se puede compilar a
JavaScript, pero también se puede compilar para ensamblar y se puede
usar para crear aplicaciones móviles y de escritorio. Aquí hay alguna
explicación adicional de la documentación:
La razón no es un idioma nuevo; es una nueva sintaxis y una cadena de
herramientas impulsada por el lenguaje probado en batalla,
OCaml. Reason le da a OCaml una sintaxis familiar orientada a los
programadores de JavaScript, y atiende al flujo de trabajo existente de NPM
/ Yarn que ya conocen ...

Reason se compila en JavaScript gracias a nuestro proyecto asociado,


BuckleScript, que compila OCaml / Reason en JavaScript legible con
interoperabilidad uniforme. La razón también se compila para un
ensamblaje rápido y barebone, gracias a OCaml.

El motivo (a veces denominado ReasonML) tiene un proyecto


complementario, ReasonReact :

ReasonReact es una forma más segura y simple de crear componentes


React, en Reason.

Al aprovechar el excelente sistema de tipos de este último, las


características del lenguaje expresivo y la fluida interoperabilidad con JS,
ReasonReact empaqueta las características de ReactJS en una API que es:

 Seguro y estáticamente tipado


 Simple y delgado
 Familiar y fácil de insertar en una base de código ReactJS existente
 Bien pensado (¡hecho por el creador del propio ReactJS!)

A menudo se dice que escribir código ReactJS se siente como "solo usar
JavaScript". Lo mismo se aplica a ReasonReact, pero lo impulsamos aún
más; el enrutamiento de la escritura, la administración de datos, la
composición de los componentes y los componentes en sí mismos se sienten
como "simplemente usando el Reason".

Pros

 Soporte corporativo fuerte (Facebook)


 Buena documentación
 Versátil
 Familiar para los desarrolladores de React

Contras

 ¿¿Muy nuevo??

Recursos adicionales

 Primeras impresiones de ReasonML


 ReasonReact Documentation
 ReasonML vs TypeScript

⬆️ Volver al comienzo

Esbelto

Escrito por Rich Harris, Svelte adopta un enfoque


único. Compila tu aplicación en tiempo de compilación para que puedas
enviar el código de peso más ligero posible. De la documentación:

... Svelte tiene una diferencia crucial: en lugar de interpretar el código de su


aplicación en tiempo de ejecución, su aplicación se convierte en JavaScript
ideal en tiempo de compilación. Eso significa que no paga el costo de
rendimiento de las abstracciones del marco, o incurre en una multa cuando
su aplicación se carga por primera vez.

Y como no hay gastos generales, puede adoptar Svelte de forma gradual en


una aplicación existente de forma incremental o enviar widgets como
paquetes independientes que funcionan en cualquier lugar.

Un proyecto interesante relacionado con Svelte es Sapper , un marco


similar en filosofía a Next.js , pero con un mayor énfasis en el rendimiento.

Sapper es un marco para crear aplicaciones web de alto rendimiento ... Hay
dos conceptos básicos:
 Cada página de tu aplicación es un componente de Svelte
 Puede crear páginas agregando archivos al directorio de rutas de su
proyecto. Estos serán procesados por el servidor para que la primera visita
de un usuario a su aplicación sea lo más rápida posible, luego se aplica una
aplicación del lado del cliente

Crear una aplicación con todas las mejores prácticas modernas (dividir el
código, soporte fuera de línea, vistas renderizadas por el servidor con
hidratación del lado del cliente) es terriblemente complicado. Sapper hace
todas las cosas aburridas para que puedas seguir con la parte creativa.

Pros

 Rápido y ligero
 Buena documentación
 Innovador

Contras

 Pequeña comunidad
 Muy nuevo (¡pero prometedor!)

Recursos adicionales

 Guía de Svelte
 Svelte - El marco de la interfaz de usuario que desaparece mágicamente -
Entrevista con Rich Harris
 El delgado y veloz marco Svelte pone a JavaScript en una dieta
 Marcos sin el marco: ¿por qué no pensamos en esto antes?

⬆️ Volver al comienzo

El resto del paquete


Hay muchos marcos interesantes aquí. Algunos son producto de un único
desarrollador, mientras que otros tienen comunidades fuertes con una
gran cantidad de contribuyentes y patrocinios corporativos.

Si usted es autor o colaborador de uno de estos proyectos y desea


proporcionar más información o información actualizada,
comuníquese conmigo .

AppRun
Escrito por Yiyi Sun, AppRun en una pequeña biblioteca (3KB) que usa
TypeScript como lenguaje de desarrollo y toma inspiración de Elm:

AppRun es una biblioteca liviana ... que utiliza la arquitectura de modelo-


vista-actualización de estilo de olmo y publicación y suscripción de eventos.

Recursos adicionales

 Creación de aplicaciones con AppRun


 Creación de aplicaciones con AppRun, parte 1 - Primeros pasos (YouTube)

⬆️ Volver al comienzo

Binding.scala
Binding.scala es una biblioteca unidireccional de enlace de datos escrita
en Scala, aunque está orientada tanto a JavaScript como a JVM. De
la documentación :

Binding.scala se puede utilizar como un lenguaje de plantillas reactivas en


el desarrollo de GUI de escritorio y web. Le permite usar la sintaxis literal
nativa XHTML para crear nodos DOM reactivos, que pueden cambiar
automáticamente cada vez que cambia la fuente de datos ... Binding.scala
tiene más funciones y menos conceptos que otros marcos web reactivos
como ReactJS.

Recursos adicionales

 Haciendo la interfaz de usuario fácilmente con Binding.scala


 Binding.scala Todo MVC

⬆️ Volver al comienzo

Bobril
Bobril se inspira en React y Mithril . De la documentación:

Es un framework rápido y de bajo tamaño con renderizado basado en DOM


virtual. El foco principal está en la velocidad y la simplicidad de la
generación de código ... El contenido y el comportamiento de cualquier
página pueden definirse simplemente mediante la composición de objetos
de JavaScript.

La representación del contenido de la página se basa en la comparación de


DOM virtuales. La aplicación tiene algún estado en el tiempo y la aplicación
bobril genera el DOM virtual según este estado. DOM virtual es una
representación de objeto del DOM resultante. Si ocurre algún evento de
cambio de estado y el DOM virtual anterior es diferente al DOM virtual
generado actualmente, el DOM real cambiará de acuerdo con este cambio.

Recursos adicionales

 Bobril - I - Comenzando

⬆️ Volver al comienzo

Choo
Choo es una biblioteca funcional para construir interfaces de usuario. Es
pequeño (4 KB) y admite la representación del servidor. La filosofía de
Choo:

Creemos que los marcos deben ser desechables y los componentes


reciclables. No queremos una web donde los jardines amurallados
compitan celosamente entre sí. Al hacer que el DOM sea el denominador
común más bajo, el cambio de un marco a otro se convierte en sin
fricción. Choo es modesto en su diseño; no creemos que será el mejor de la
clase para siempre, por lo que hemos hecho que sea tan fácil descartarlo
como lo es recogerlo ... Queremos que todos en un equipo, sin importar el
tamaño, comprendan completamente cómo se presenta una aplicación. Y
una vez que se crea una aplicación, queremos que sea pequeña, eficiente y
fácil de razonar. Todo lo cual hace que sea fácil depurar el código, mejores
resultados y super caras sonrientes.

Recursos adicionales

 Tu primera aplicación
 Programación Fun Funcional con el Marco Choo

⬆️ Volver al comienzo

CxJS
CxJS, o simplemente Cx, es un marco de JavaScript rico en características
para construir front-ends complejos de web, como herramientas de BI,
paneles y aplicaciones de administración. Los marcos modernos como React
y Angular proporcionan una base excelente para construir componentes de
interfaz de usuario, sin embargo, la implementación de los componentes y
muchos otros aspectos de la aplicación se dejan al desarrollador para que
lo descubra. CxJS intenta llenar ese vacío y proporcionar todos los
ingredientes necesarios requeridos para las aplicaciones web modernas.
Recursos adicionales

 Documentación oficial
 Noticias CxJS Hacker

⬆️ Volver al comienzo

Cycle.js
Facturado como un "marco de JavaScript funcional y reactivo para código
predecible" Cycle.js es principalmente el trabajo de André Staltz . Tiene
más de 100 colaboradores y patrocinio corporativo. De la documentación:

La abstracción del núcleo de Cycle es su aplicación como una función pura


main () donde las entradas son efectos de lectura (fuentes) del mundo
externo y las salidas (sumideros) son efectos de escritura para afectar el
mundo externo. Estos efectos de E / S en el mundo externo son gestionados
por controladores: complementos que manejan efectos DOM, efectos HTTP,
etc.

Recursos adicionales

 Fundamentos de Cycle.js (curso de video gratuito)


 Una introducción suave a Cycle.js

⬆️ Volver al comienzo

DIO
DIO es una biblioteca de interfaz de usuario declarativa liviana (7KB) que
ofrece una alternativa a Reaccionar:

Hay muchos pequeños detalles que le dan a DIO una ventaja que
realmente no afecta a las nuevas API, sino más bien a la creación de un
área de superficie más grande de lo que React ya admite y a lo que se
agrega.

Por ejemplo, React puede representar cadenas, números, elementos y


componentes, pero ¿qué pasaría si pudiera hacer promesas o
Thenables? Esto ayudaría a resolver una gran cantidad de "problemas" con
la obtención de datos y la carga diferida que es posible con React pero no
incentivado declarativamente a nivel de biblioteca.

Recursos adicionales

 Comparación con React

⬆️ Volver al comienzo

Dojo
Uno de los principios importantes detrás de Dojo es la accesibilidad, lo
que me hace pensar que es un candidato potencial para proyectos en el
gobierno y la educación superior, donde a menudo hay requisitos de
cumplimiento estrictos. Desde el sitio web:

Dojo 2 se basa en la creencia de que la accesibilidad es tan importante en


línea como en nuestros entornos físicos, y los arquitectos de ambos
comparten una responsabilidad similar para proporcionar acceso a todos ...
todos los widgets de Dojo 2 se han diseñado para ser accesibles por defecto,
y todas las herramientas necesarias para cumplir con los estándares de
WCAG se han integrado en @dojo / widget-core y @ dojo / widgets.

La internacionalización es otra área de enfoque:

La internacionalización, o i18n, es el proceso de desacoplamiento de una


aplicación de un idioma o cultura en particular, y es un requisito
importante de la mayoría de las aplicaciones empresariales. Como tal, la
internacionalización es una de las principales preocupaciones de Dojo 2. @
dojo / i18n, el ecosistema de internacionalización de Dojo 2, proporciona
todo lo que se necesita para internacionalizar y localizar una aplicación,
desde la mensajería específica del lugar hasta la fecha, el número y el
formato de la unidad.

Al igual que Angular, Dojo usa TypeScript como su lenguaje de desarrollo.

Recursos adicionales

 El camino largo y sinuoso hacia Dojo 2


 Una introducción en profundidad a Dojo 2

⬆️ Volver al comienzo

Domvm
Domvm es una "capa de vista vdom delgada, rápida y libre de
dependencia". Al igual que Vue, puede usarse como un reemplazo
jQuery. Similar a React, deja las preocupaciones más allá de las vistas a
otras bibliotecas (pero ofrece una buena lista de opciones). De la
documentación:

domvm es una capa de vista flexible y pura para la creación de aplicaciones


web de alto rendimiento. Al igual que jQuery, encajará felizmente en
cualquier base de código existente sin introducir nuevas herramientas o
requerir cambios arquitectónicos importantes ... Como una capa de vista,
domvm no incluye algunas cosas que podrías encontrar en un marco más
amplio. Esto le da la libertad de elegir libs que ya conoce o prefiere para
tareas comunes. domvm proporciona una superficie pequeña y común para
la integración de enrutadores, flujos y bibliotecas inmutables.

Recursos adicionales

 Demostración de tic-tac-toe de React usando domvm


⬆️ Volver al comienzo

DoneJS
DoneJS es un sucesor de JavaScriptMVC, que se lanzó por primera vez en
2008. Desde el sitio web:

DoneJS ofrece todo lo que necesita para construir una aplicación web
moderna. Viene con un cargador de módulos, sistema de compilación,
utilidades MVVM, capa de prueba completa, generador de documentación,
utilidades de representación del lado del servidor, una capa de datos y
más. Su integridad es en sí misma una característica.

Recursos adicionales

 Guía de inicio rápido


 Cómo crear una aplicación DoneJS en 3 sencillos pasos

⬆️ Volver al comienzo

Grabar al agua fuerte


Aunque Etch se puede usar para aplicaciones web front-end, su uso
objetivo está en paquetes Atom y en el framework de escritorio
Electron. De la documentación:

Etch es una biblioteca para escribir componentes de interfaz de usuario


basada en HTML que proporciona la comodidad de un DOM virtual,
mientras que al mismo tiempo se esfuerza por ser mínimo, interoperable y
explícito. Etch se puede usar en cualquier lugar, pero se diseñó
específicamente teniendo en cuenta los paquetes Atom y las aplicaciones
electrón.
Recursos adicionales

 Etch Router

⬆️ Volver al comienzo

Gruu
Gruu es un marco relativamente nuevo de Marek Łabuz. Del artículo de
Marek que presenta a Gruu:

Creo que ninguna de las bibliotecas existentes es perfecta. Cada vez que se
crea una nueva biblioteca / marco, se revela una nueva idea. No importa si
la nueva biblioteca es buena o mala. Siempre trae algo único que es
valioso.

Muchas bibliotecas de frontend se basan en una función de representación


que se invoca cada vez que algo cambia, sin importar a qué afecte el
cambio. Conduce a representaciones innecesarias de las partes de la
aplicación que no han cambiado, pero aún tenemos que verificarlo porque
no estamos seguros ... Gruu se deshace de una función de renderizado. En
cambio, solo se representa una vez al comienzo, luego cambia solo las
partes de la vista que realmente han cambiado sin representar
componentes completos.

Recursos adicionales

 Crear aplicaciones de una sola página en Gruu

⬆️ Volver al comienzo

Luz tenue
Glimmer es parte del ecosistema Ember e incluso utiliza el Ember CLI para
gestionar proyectos. Como se mencionó al hablar de Ember, es un gran
marco. Glimmer proporciona a los desarrolladores de Ember una opción
más liviana para crear aplicaciones de una sola página. Si es necesario, los
componentes de Glimmer se pueden colocar directamente en Ember sin
ningún problema.

Recursos adicionales

 Glimmer.js: ¿Cuál es el trato con TypeScript?


 Crear componentes web con Glimmer

⬆️ Volver al comienzo

Hyperapp
Al llegar a un muy delgado 1KB, Hyperapp es una biblioteca con una API
minimalista. Sin embargo, admite la representación del servidor. El
enfoque de Hyperapp:

Hyperapp es una biblioteca de JavaScript para crear aplicaciones web.

Mínimo: Hyperapp nació del intento de hacer más con menos. Hemos
minimizado de forma agresiva los conceptos que necesita comprender y
permanece a la par con lo que otros marcos pueden hacer.

Funcional: el diseño de Hyperapp está inspirado en The Elm


Architecture. Cree aplicaciones escalables basadas en navegador utilizando
un paradigma funcional. El giro es que no tienes que aprender un nuevo
idioma.

Baterías incluidas: de fábrica, Hyperapp combina la gestión del estado con


un motor VDOM que admite actualizaciones con clave y eventos del ciclo
de vida, todo sin dependencias.

Recursos adicionales
 Programación pura con la aplicación Hyper
 HyperApp - Tiny Library for Frontend Applications - Entrevista con Jorge
Bucaran

⬆️ Volver al comienzo

Hiperdominio
Anteriormente llamado, Plastiq, Hyperdom , es un "marco
de dominación virtual rápido y rico en características para la construcción
de aplicaciones de navegador dinámicas". De la documentación:

Las aplicaciones de Hiperdom están hechas de objetos regulares de


JavaScript que representan el estado de la aplicación con los métodos de
render () que definen cómo se representa ese estado en HTML. Hyperdom
admite un ciclo de renderizado de actualización de eventos simple,
promesas para operaciones asincrónicas, JSX, no JSX, enrutamiento del lado
del cliente, SVG, enlace de datos bidireccional y optimiza el rendimiento, la
usabilidad del desarrollador y la simplicidad de la arquitectura de la
aplicación.

⬆️ Volver al comienzo

hyperHTML
Independiente del marco, hyperHTML fue creado para, "simplificar las
mejores prácticas de rendimiento de DOM ... es 100% compatible con
ECMAScript y pesa menos de 4Kb". Del artículo introductorio:

No es más que una función, que funciona con nodos DOM y fragmentos
como contexto. Vincula a su nodo de destino una vez, o incluso más si no le
importa, y renderiza los mismos literales de plantilla una y otra vez
simplemente pasando nuevos datos.
Recursos adicionales

 hyperHTML: una alternativa Virtual DOM


 Nuevo en hyperHTML v1

⬆️ Volver al comienzo

Ivi
La documentación de Ivi señala que, aunque Ivi es pequeño, el tamaño se
encuentra en la parte inferior de su lista de prioridades:

Parece que hoy en día muchas personas en la comunidad javascript se


lavaron el cerebro que el tamaño de la pequeña biblioteca es sinónimo de
un rendimiento rápido y una implementación simple. En realidad,
generalmente significa que la biblioteca utiliza diferentes trucos para
reducir el tamaño del código utilizando estructuras de datos inapropiadas
(rendimiento más lento), inicializando estructuras de datos en tiempo de
ejecución (rendimiento de arranque más lento), reutilizando código para
muchos tipos de datos diferentes (rendimiento más lento), etc.

El tamaño de la biblioteca en ivi está en la parte inferior de la lista de


prioridades:

 Exactitud
 Consistencia / comportamiento predecible
 Experiencia de rendimiento / desarrollador
 Tamaño de la biblioteca

Recursos adicionales

 Ivi Todo MVC

⬆️ Volver al comienzo
Knockear
Usando el patrón MVVM, Knockout es una biblioteca que ha existido por
un tiempo. De la documentación:

Knockout es una biblioteca JavaScript MVVM (una variante moderna de


MVC) que facilita la creación de interfaces de usuario ricas, similares a las
de un escritorio, con JavaScript y HTML. Utiliza observadores para hacer
que su UI permanezca automáticamente sincronizada con un modelo de
datos subyacente, junto con un conjunto poderoso y extensible de enlaces
declarativos para permitir el desarrollo productivo.

Recursos adicionales

 Aprende Knockout
 ¿Cuál es la diferencia entre Knockout.js y Rx.js?

⬆️ Volver al comienzo

Maqueta
Maquette es una biblioteca liviana (3KB) inspirada en React, Mithril y
Mercury:

Maquette es una implementación DOM virtual que sobresale tanto en


velocidad como en simplicidad. Resuelve el problema de mantener la
interfaz de usuario sincronizada con los datos subyacentes.

Maquette le permite especificar la interfaz de usuario utilizando Javascript


simple. Esto hace que maquette sea fácil de aprender, fácil de depurar y
fácil de implementar. Maquette es muy poco coordinado por diseño, por lo
que la integración con otros marcos y bibliotecas es lo más indolora posible.

Aunque no es el predeterminado, puede usar TypeScript con Maquette.


Recursos adicionales

 El tutorial de Maquette
 Maquette con inicio rápido de Typescript

⬆️ Volver al comienzo

Marko
Producto de eBay Open Source, Marko es un marco reactivo que enfatiza
el rendimiento de UI. Al igual que Vue, puede usar componentes de un
solo archivo que incluyen lógica de componentes, plantilla y CSS.

Aquí hay una cita sobre Marko vs React del desarrollador principal, Patrick
Steele-Idem:

Si bien muchas de las características de Marko se inspiraron en React,


Marko y React ofrecen características de uso y rendimiento muy
diferentes. Marko fue diseñado para evitar casi todos los estándares y está
más alineado con HTML. En casi todos los casos, un componente de interfaz
de usuario de Marko requerirá menos líneas de código que su equivalente
React JSX, mientras que mantiene la legibilidad y permite la misma
expresividad que JSX.

Recursos adicionales

 Marko vs React: una mirada profunda


 Construyendo un componente selector de color

⬆️ Volver al comienzo

Mithril
Mithril es un marco livweight. A diferencia de React, incluye funcionalidad
para enrutamiento, XHR y gestión estatal. El lanzamiento para Mithril:

¿Por qué usar Mithril? En una oración: porque Mithril es pragmático. Esta
guía de 10 minutos es un buen ejemplo: es cuánto tiempo lleva aprender
los componentes, el XHR y el enrutamiento, y esa es casi la cantidad
correcta de conocimiento necesaria para crear aplicaciones útiles.

Mithril se trata de lograr que el trabajo significativo se realice de manera


eficiente. ¿Haciendo cargas de archivos? Los documentos te muestran
cómo. ¿Autenticación? Documentado también ¿Salir de animaciones? Lo
tienes. Sin bibliotecas adicionales, sin magia.

Recursos adicionales

 Aplicación web isomorfa con Mithril.js


 Mithril: el mejor marco pequeño que nunca has escuchado (YouTube)

⬆️ Volver al comienzo

Luna
Una pequeña biblioteca (7KB), Moon se posiciona como una alternativa a
React, Vue y Mithril.

Moon es una biblioteca mínima y extremadamente rápida para construir


interfaces de usuario. Combina los aspectos positivos de las bibliotecas
populares en un paquete pequeño. Es súper ligero e incluye optimizaciones
avanzadas para garantizar tiempos de renderizado rápidos. La API es
pequeña e intuitiva, sin dejar de ser poderosa. Moon es compatible con IE9
+.

Sí, se han lanzado muchas bibliotecas de front-end últimamente, y muchas


personas prefieren diferentes partes sobre cada una de estas bibliotecas. Por
ejemplo, React proporciona la capacidad de usar JSX y utiliza un DOM
virtual, Angular proporciona directivas fáciles de usar y Ember proporciona
un buen motor de plantillas incorporado.

Moon tiene como objetivo combinar las mejores partes de estas bibliotecas
en un paquete único y liviano, a la vez que proporciona un mejor
rendimiento.

Recursos adicionales

 Comenzando con Moon.js

⬆️ Volver al comienzo

Nerv
Nerv es un nuevo marco fuera de China. Se anuncia a sí mismo como una
"alternativa React rápida y ardiente, compatible con IE8 y React 16." De
hecho, puede convertir una aplicación React en Nerv simplemente
agregando un alias en la configuración de su paquete web. Todo eso y un
tamaño de biblioteca de 4.4 KB.

Debido a que es tan nuevo y hace reclamos de un rendimiento superior


frente a React, algunos miembros de la comunidad React solicitaron
aclaraciones sobre esos reclamos, así como más información sobre
Nerv. De la respuesta del autor:

En mi humilde opinión, la mayor diferencia entre preact, Inferno y Nerv no


es un problema técnico como cuál es la forma correcta de implementar una
función Reaccionar. Se trata de lo que la biblioteca quiere lograr. En preact,
tal vez solo quieran una biblioteca Lite, Inferno quiere ser lo más rápido
posible, Reaccionan la compatibilidad solo como una bonificación, ambos
necesitan un módulo compatible para hacer eso. Pero para Nerv,
compatible con React es nuestro principal objetivo, al hacer eso, podemos
sacrificar el rendimiento y el tamaño.
La crítica de Peter Mikitsh es correcta. Nerv no puede pasar la prueba React
fiber (16) 100% de la unidad, lo cual es predecible: el equipo de React tarda
todo el año en alcanzar el objetivo. ¿Cómo pueden dos tipos salir de la
nada (dice un tipo en Hacker News) para poder ¿Haz eso?

Entonces, ¿cuáles son las compensaciones? Obviamente, algún componente


/ biblioteca de React de un tercero no podría funcionar correctamente en
Nerv. ¿Pero cual? Para ser honesto, no sé. Me alegra que me hayan
escuchado que las próximas noticias de Next.js funcionaron en el primer
intento, pero mientras tanto, las pestañas de Benchmark no funcionan en
Firefox (arregladas). Todo esto, no sabríamos si lo hacemos. no publiques.

Roma no fue construida en un día. Nerv no es perfecto, no hay biblioteca,


particularmente en las primeras etapas, tal vez todavía hay toneladas de
errores que no conocemos. Por lo tanto, decidimos abrir la fuente, hacerla
pública, necesitamos la ayuda de la comunidad, necesitamos su ayuda.

Recursos adicionales

 ¿Cuál es la compensación?

⬆️ Volver al comienzo

NX
NX es el trabajo de Bertalan Miklos, ingeniero de JavaScript en
RisingStack. De la documentación de NX :

NX es un framework front-end modular, construido con ES6 y Web


Components. Los componentes básicos de NX son el núcleo, los
middlewares, los componentes y las utilidades. Todos están alojados en
paquetes separados de GitHub repos y npm.

El núcleo de NX es una pequeña biblioteca, responsable de una sola


cosa. Le permite crear componentes tontos y aumentarlos con
middlewares. Un componente ejecuta sus middlewares cuando está
conectado al DOM y obtiene todas las funcionalidades adicionales de
ellos. NX viene con algunos middlewares básicos listos para usar, que
puedes encontrar a continuación.

Recursos adicionales

 Escribir un marco JavaScript - Estructuración de proyectos


 TodoMVC

⬆️ Volver al comienzo

petit-dom
Escrito por Yassine Elouafi y uno de los puntos de referencia de
rendimiento más rápidos, petit-dom adopta un enfoque minimalista:

Diff algroithm se basa en pre-optimizaciones descritas


en https://neil.fraser.name/writing/diff/ y el algoritmo presentado en el
documento "An O (ND) Diferencia Algoritmo y sus variaciones. También
hay un excelente artículo que explica cómo funciona el algoritmo. El
artículo incluye una aplicación GUI para jugar con el algoritmo

⬆️ Volver al comienzo

Pux
Pux es un framework que usa PureScript , un lenguaje de programación
funcional fuertemente tipado que cumple con JavaScript. Actualmente
hay problemas con el rendimiento:

El bajo rendimiento se debe a la traducción del DOM virtual de Pux


(smolder) al DOM virtual de React. El objetivo es escribir un módulo DOM
virtual purescript para smolder, lo que evitaría ese paso de traducción y
podría optimizarse para una estructura de datos monádica. Sospecho que
esto alcanzaría un rendimiento a la par con Halogen.

Recursos adicionales

 Ejemplos de Pux

⬆️ Volver al comienzo

Ractive.js
Originalmente creado para su uso en el sitio web de Guardian, Ractive es
una biblioteca de IU reactiva, impulsada por una plantilla:

A diferencia de otros marcos, Ractive trabaja para usted, no al revés. No


tiene una opinión sobre las otras herramientas que desea usar con
ella. También se adapta al enfoque que desea tomar. No estás encerrado en
una forma de pensar específica del marco. Si odias alguna de tus
herramientas por alguna razón, puedes cambiarla fácilmente por otra y
seguir con la vida.

Recursos adicionales

 ¡Hola Mundo!
 Todo MVC

⬆️ Volver al comienzo

reaccionar-lite
Con el objetivo de ser una versión más ligera de React, reaccionar-lite , es
una "implementación de React que optimiza para el tamaño de script
pequeño". De la documentación:
React-lite es compatible con las API principales de React, como Virtual
DOM, pensado como un reemplazo directo para React, cuando no se
necesita la representación del lado del servidor en el navegador (no
ReactDOM.renderToString y ReactDOM.renderToStaticMarkup).

Recursos adicionales

 react-lite - Implementación de React optimizado para tamaño pequeño -


Entrevista con Jade

⬆️ Volver al comienzo

RE: DOM
Escrito por Juha Lindstedt, RE: DOM es una pequeña (2KB) y rápida
biblioteca de UI. De hecho, es uno de los mejores en los últimos puntos
de referencia. Desde el sitio web:

RE: DOM es una pequeña biblioteca DOM (2 KB) de Juha Lindstedt y


colaboradores, que agrega útiles ayudantes para crear elementos DOM y
mantenerlos sincronizados con los datos.

Debido a que RE: DOM está tan cerca del metal y no usa dom virtual, en
realidad es más rápido y usa menos memoria que casi todas las bibliotecas
basadas en dom virtuales, incluyendo React (benchmark).

También es fácil crear componentes reutilizables con RE: DOM.

Otra ventaja es que puede usar solo JavaScript puro, por lo que no hay que
complicarse el idioma de plantillas para aprender. Además, RE: DOM juega
muy bien con los demás. No es necesario escribir wrappers para cosas como
Google Maps.

Recursos adicionales
Sitio de documentación
⬆️ Volver al comienzo

Reflejo
Escrito por Irakli Gozalishvili de Mozilla, Reflex es una biblioteca
fuertemente inspirada por Elm:

Reflex es una biblioteca de IU reactiva funcional que está fuertemente


inspirada en (prácticamente es un puerto de) el olmo y su arquitectura
increíblemente simple pero potente donde el "flujo" en términos de reacción
es simplemente un subproducto de un patrón. Con el fin de mantener una
gran atracción de los tipos de datos de tipo olmo - algebraico y seguridad
tipo - la biblioteca utiliza flujo, un verificador de tipo estático para JS. Sin
embargo, todos los tipos están separados de la implementación, por lo que
es su decisión si desea aprovecharlo o simplemente ignorarlo.

⬆️ Volver al comienzo

Alboroto
La documentación de Riot va directamente al grano:

El espacio frontend está de hecho atestado, pero honestamente sentimos


que la solución todavía está "allá afuera". Creemos que Riot ofrece el
equilibrio adecuado para resolver el gran rompecabezas. Mientras que
React parece hacerlo, tienen graves puntos débiles que Riot resolverá.

Una característica importante de Riot son las etiquetas personalizadas


(que se parecen mucho a un componente de archivo único de Vue):

Una etiqueta personalizada combina HTML y JavaScript relevantes


formando un componente reutilizable. Piense en React + Polymer pero con
una sintaxis agradable y una pequeña curva de aprendizaje.
Y...

Riot es Web Components para todos. Piensa en React + Polymer pero sin la
hinchazón. Es intuitivo de usar y no pesa casi nada. Y funciona hoy. No
reinventar la rueda, sino tomar las partes buenas de lo que hay allí y hacer
la herramienta más simple posible.

Recursos adicionales

 Demo en vivo
 Tutorial de Riot.js

⬆️ Volver al comienzo

rxdomh
Aunque interesante, rxdomh tiene el aspecto de un proyecto
experimental. Fue inspirado por Binding.scala y react-flyd.

⬆️ Volver al comienzo

San
San es otro proyecto de desarrolladores chinos. La documentación está
en chino, pero Chrome hace un buen trabajo con la traducción:

San, es un marco de componentes MVVM. Su pequeño tamaño (12K),


buena compatibilidad (IE6), alto rendimiento es una solución confiable y
confiable para implementar una interfaz de usuario receptiva.

San también admite instrucciones de enlace de datos a vista, las ramas más
comúnmente utilizadas en el desarrollo de negocios, instrucciones de bucle,
etc. además de soportar las características de sintaxis de todo el HTML
nativo a través de plantillas de vista tipo HTML que permanecen bien
usadas en el basado en, basado en el análisis sintáctico de cadena de
plantilla de trama completo, y construir una vista del árbol de relación de
nodo de capa generado por la vista de IU de la vista rápida de un motor de
alto rendimiento.

Recursos adicionales

 Tutorial de San

⬆️ Volver al comienzo

Simulacra.js
Es justo decir que ningún otro marco tiene una API más pequeña
que Simulacra :

Simulacra.js devuelve un nodo DOM que se actualiza cuando cambia un


objeto. Su API es una función única, y no introduce ninguna sintaxis nueva
o un lenguaje de plantilla. Recurrentemente agrega funciones de
metaprogramación a las estructuras de datos de vanilla para que
funcionen.

Es una abstracción de costo bastante bajo, aunque puede no ser tan rápido
como el código optimizado a mano. El tamaño aproximado de esta
biblioteca es ~ 5 KB (minified y gzipped).

⬆️ Volver al comienzo

Slim.js
Escrito por Avichay Eyal, Slim.js es una biblioteca liviana de autoría de
componentes web:
Slim.js es una biblioteca rapidísima para el desarrollo de componentes web
nativos y aplicaciones modernas basadas en elementos personalizados. No
hay magia negra involucrada. Utiliza la API nativa es6 + DOM y aumenta
los elementos HTML con superpoderes.

Recursos adicionales

 Sitio de documentación

⬆️ Volver al comienzo

Stem JS
Escrito por Mihai Ciucu, Stem JS es el marco que intenta no ser un marco:

La sintaxis puede parecer familiar, pero Stem está diseñado para potenciar
los componentes individuales y no el marco ...

Stem fue diseñado con mantenimiento de código como propósito principal,


independientemente de si su proyecto tiene 100 o 100k líneas de código.

También lo odiamos cuando las bibliotecas fuerzan a los programadores a


pasar por los aros para hacer cualquier cambio no estándar en él, por lo
que todo está diseñado para ser modificado fácilmente.

Recursos adicionales

 Otro marco de Javascript

⬆️ Volver al comienzo

Plantilla
Del equipo Ionic, Stencil es un "compilador que genera componentes
web". Pero también un poco más que eso:
Stencil combina los mejores conceptos de los marcos de frontend más
populares en una herramienta de tiempo de compilación en lugar de
herramienta de tiempo de ejecución. Stencil toma TypeScript, JSX, una
pequeña capa DOM virtual, enlace de datos unidireccional eficiente, una
canalización de renderizado asíncrono (similar a React Fiber) y carga lenta
desde el primer momento, y genera componentes web 100% basados en
estándares que se ejecutan en cualquier navegador compatible con la
especificación Custom Elements v1.

Recursos adicionales

 Stencil App Starter

⬆️ Volver al comienzo

Estímulo
El estímulo es un marco de la gente que te trajo Basecamp.

El estímulo es un marco de JavaScript con ambiciones modestas. A


diferencia de otros marcos, Stimulus no se hace cargo de todo el front-end
de su aplicación. Más bien, está diseñado para aumentar su HTML al
conectar elementos a objetos JavaScript automáticamente.

Recursos adicionales

 Manual de Estímulo

⬆️ Volver al comienzo

Superávit
En los puntos de referencia de rendimiento, Surplus fue muy
rápido. También tiene un enfoque diferente, utilizando S.js:
Surplus es un compilador y tiempo de ejecución para permitir que las
aplicaciones de S.js creen vistas web de alto rendimiento usando
JSX. Gracias a JSX, las vistas son claras, definiciones declarativas de su
UI. Gracias a S, se actualizan de manera automática y eficiente a medida
que cambian los datos.

También...

El excedente no es un React "similar al trabajo", sino que utiliza la sintaxis


JSX popularizada por React para definir sus puntos de vista ... JSX mitiga
parte del riesgo de adoptar (o abandonar) Surplus. Mucho código JSX
excedente ya funciona como componentes funcionales sin estado
Reaccionar, y viceversa. El excedente evita las diferencias arbitrarias con
React cuando sea factible.

Diferencias con React:

1. Surplus crea elementos DOM reales, no virtuales, y se actualizan


automáticamente. Esto elimina la mayor parte de la API React.
2. La propiedad ref toma una referencia asignable, no una función.
3. Los eventos son eventos nativos, no eventos sintéticos de React.
4. Surplus es un poco más liberal en los nombres de propiedad que acepta,
como onClick / onclick, className / class, etc.

⬆️ Volver al comienzo

Termita
Thermite es otra biblioteca que usa PureScript , el lenguaje funcional que
compila en JavaScript. De la documentación:

No proporciona toda la funcionalidad de React, sino que proporciona una


API limpia para las partes más utilizadas de su API. Es posible usar
purescript-react para casos de uso más especializados.
Recursos adicionales

 Aplicación de ejemplo

⬆️ Volver al comienzo

TSERS
TSERS significa marco de transformación-señal-ejecutor para flujos
reactivos. De la documentación:

En la era de la fatiga de JavaScript, los nuevos marcos de JS aparecen como


hongos después de la lluvia, cada uno de ellos brindando algunos conceptos
nuevos y revolucionarios. ¡Tan abrumador! Es por eso que se creó
TSERS. No proporciona nada nuevo. En su lugar, combina algunas técnicas
y conceptos antiguos y conocidos y los empaqueta en una sola forma
compacta adecuada para el desarrollo moderno de aplicaciones web.

Técnicamente, el pariente más cercano al TSERS es Cycle.js, pero


conceptualmente el más cercano es CALM ^ 2. A grandes rasgos, se podría
decir que TSERS intenta combinar la excelente coherencia de estado
manteniendo estrategias de CALM ^ 2 y puertas de entrada / salida
explícitas de Cycle: lo mejor de ambos mundos.

Recursos adicionales

 TSERSful ejemplos

⬆️ Volver al comienzo

Ultradom
Ultradom (anteriormente picodom) es interesante porque es del mismo
tipo detrás de Hyperapp , Jorge Bucaran.
Ultradom es una capa de vista de DOM virtual mínima para crear
aplicaciones y marcos basados en navegador. Mézclalo con tu arquitectura
de solución de estado favorita o úsalo de forma independiente para obtener
la máxima flexibilidad. Las características incluyen el reciclaje DOM
procesado por el servidor, las actualizaciones con clave y los eventos del
ciclo de vida, todos sin dependencias.

⬆️ Volver al comienzo

Vidom
Escrito por Filatov Dmitry, Vidom es otra biblioteca inspirada en React:

Vidom es solo una biblioteca para construir UI. Está muy inspirado en React
y se basa en las mismas ideas. Su objetivo principal es proporcionar una
implementación liviana lo más rápida posible con API similar a React.

Recursos adicionales

 Tutorial
 Todo MVC

⬆️ Volver al comienzo

Vuera
Vuera es una biblioteca inusual. Le permite usar componentes de React
dentro de Vue y viceversa. Los casos de uso anticipados son cuando se
migra entre React y Vue o cuando se utilizan ambos frameworks con un
solo proyecto.

Recursos adicionales

 Integración de los componentes de React y Vue en una aplicación


⬆️ Volver al comienzo

¡Oye! ¡Hiciste todo el camino hasta aquí! Si has disfrutado de esta


publicación, suscríbete a mi boletín semanal. Selecciono la mejor
redacción de JavaScript de la Web y la envío a los lectores todos los
jueves. El formulario de registro está justo debajo de este artículo.

Hasta la próxima, feliz codificación ...