Una comparación entre Vulcan y AUSK: cómo usar Node, React y GraphQL en todo su potencial

La pila NRG para un desarrollo más rápido

Probablemente nunca hayas oído hablar de Vulcan.js o Apollo Universal Starter Kit, al menos no todavía.

Pero estoy bastante seguro de que has oído hablar de React, Node.js y GraphQL. Bien, eso es lo que llamamos un eufemismo: probablemente hayas visto millones de tweets, artículos de blogs, reuniones y podcasts sobre esos tres y sus poderes mágicos.

Hay muchas buenas razones por las que los desarrolladores web elogian esas tecnologías. Sin embargo, si alguna vez intentó escribir una aplicación JavaScript de pila completa moderna desde cero, es posible que haya notado la cantidad de texto estándar que puede producir.

Esto es especialmente molesto con las funciones genéricas: configurar la autenticación, configurar la base de datos, configurar el componente principal de la aplicación, configurar la configuración ...

Tanto Vulcan.js como AUSK tienen como objetivo convertirlo en un desarrollador de JavaScript de pila completa rápido y eficiente. Ambos se basan en una arquitectura modular, con React para la interfaz de usuario, Node para el backend y Apollo graphQL para la capa de comunicación cliente / servidor. Ambos proporcionan toneladas de módulos precodificados para que pueda concentrarse en funciones valiosas.

Sin embargo, cada uno tiene enfoques muy diferentes para el problema, por lo que pensé que podría disfrutar de una comparación.

En primer lugar, presentemos a los competidores.

Descargo de responsabilidad: soy un colaborador de Vulcan.js, sin embargo, usé ambas tecnologías para los proyectos de mi cliente, así que seré lo más objetivo posible.

Kit de inicio Apollo UNIVERSAL

Bien, cuando dicen universal, se refieren a UNIVERSAL. ¿Alguna vez ha visto un código estándar de JavaScript que incluye un servidor Scala para un gran trabajo? ¿Y una configuración completa de React Native con Expo? Incluso cierran el eterno (y molesto) debate de Angular versus React apoyando ambos.

No tengo mucho más que decir. Quiero decir, mira de nuevo esta pila, ¡ese es el sueño más salvaje de un desarrollador web!

De hecho, tengo algo que agregar: también incluye Bootstrap y Ant Design como marcos de estilo, Knex para conectarse a la base de datos SQL (la conexión MongoDB no está incluida pero es fácil de hacer), y está escrito en TypeScript. Todas las características principales de una aplicación JS / GraphQL se proporcionan en el modelo estándar (menú, autenticación, etc.) + algunos módulos de nivel superior que sirven como ejemplos.

Enlace: //github.com/sysgears/apollo-universal-starter-kit

Vulcano: más allá de lo universal, isomorfo

¿Recuerdas Meteor and Telescope? Sé que el ecosistema JS se mueve rápido, pero esta era dorada fue como hace solo 2 o 3 años.

Meteor fue el primer marco en explotar completamente la combinación de JavaScript del lado del servidor y del lado del cliente, al permitir escribir código isomórfico que se ejecuta en ambos entornos. Telescope era una aplicación estándar de Meteor destinada a disfrutar plenamente de su arquitectura orientada a paquetes.

Aunque todavía se usa en muchas aplicaciones profesionales y es conocido por una gran cantidad de desarrolladores, Meteor se ve afectado por algunas limitaciones técnicas que impiden un uso más amplio: su sistema de compilación incompatible con el paquete web, su administrador de paquetes que ahora es superado por NPM, o su RAM. que consume el protocolo de intercambio de datos en tiempo real.

Y todavía tengo que descubrir un marco que haga que los desarrolladores sean la mitad de productivos que Meteor. Pero no se preocupe, ahora hay un competidor serio. Lo entiendes: ¡Vulcano!

El uso de Apollo GraphQL y una arquitectura racional orientada a paquetes permiten a Vulcan superar las limitaciones de Meteor mientras disfruta de las mismas ventajas: arquitectura completamente modular, programación declarativa, isomorfismo, etc.

Vulcan está destinado a ser los rieles del ecosistema JavaScript. Fácil de comenzar, pero lo suficientemente completo como para escribir cualquier aplicación.

Consulte mi artículo anterior para obtener una descripción más completa de los patrones de Vulcan que apuntan a la velocidad de desarrollo.

Enlace: //vulcanjs.org/

# 1: Framework VS Boilerplate

Primera gran diferencia entre estas herramientas: AUSK es un modelo estándar, mientras que Vulcan es un marco. ¿Dónde radica la distinción, te preguntarás?

Vulcan, un marco

Un marco está destinado a convertirlo en un desarrollador más eficiente a diario al proporcionar un conjunto específico de funciones y ayudantes. Por lo general, está diseñado para mantenerse separado de su aplicación. Puede actualizar su aplicación de vez en cuando cada vez que se publica una nueva versión del marco.

Por lo general, distinguimos marcos y bibliotecas según el nivel de especialización. Un marco generalmente permite ofrecer funciones de nivel empresarial, mientras que una biblioteca es una herramienta técnica más especializada. Pero ambos funcionan principalmente de la misma manera.

La limitación de los frameworks o libs es que puede sentirse perdido cuando lo abandonan. ¿Qué haces cuando el error no está en tu aplicación, sino en React o Apollo?

Mi regla general es que al usar un marco, debe estar listo para contribuir a su desarrollo, al menos abriendo problemas cada vez que encuentre un error.

AUSK, una repetición

Una plantilla es una pieza de código bien escrita con un entorno de desarrollo completamente funcional. Eso es todo. Con un modelo estándar es más difícil mantenerse al día con las actualizaciones porque el código estándar no está claramente separado de su aplicación. Algo así como la aplicación Create React después de expulsarla.

Por lo general, solo proporciona algunos métodos personalizados. Se sentirá más rápido durante el primer mes y se beneficiará de una arquitectura probada en batalla, pero su velocidad de crucero terminará siendo prácticamente la misma que sin un modelo estándar.

Un texto estándar es mucha más libertad que un marco, pero también tiene menos impacto en su eficiencia.

# 2 Curva de aprendizaje

Vulcan: GraphQL simplificado

Vulcan puede ser una buena manera de obtener una primera comprensión de GraphQL porque ... no es necesario que realmente escriba GraphQL. El marco genera el esquema GraphQL y los resolutores para usted según su modelo de datos. Con herramientas de desarrollo como GraphiQL o GraphQL Voyager, puede visualizar y jugar con el esquema para comprender cómo se traducen sus características en GraphQL.

El segundo paso es comprender la lógica del propio Vulcano. Se incluye un tutorial en vivo en la aplicación "Vulcan Starter" para ayudarlo en el proceso.

AUSK: para puristas

La arquitectura AUSK está mucho más cerca de lo que los desarrolladores Express están acostumbrados. Piense en su aplicación canónica Express, pero con GraphQL instalado y una arquitectura basada en paquetes. No hay sorpresas.

Esto también significa que deberá comprender los conceptos básicos de GraphQL para usar AUSK, además, por supuesto, de Node, Express y React y cualquier base de datos que use (pero lo mismo ocurre con Vulcan). Afortunadamente, proporciona algunos ejemplos para ayudarlo en el proceso, incluida la creación y lista de datos e incluso la carga de archivos.

Conclusión: los desarrolladores de pila completa tienen mucho que dominar

El ecosistema de JavaScript está madurando cada vez más, lo que también significa que es más difícil de aprender y comprender para los principiantes.

Para disfrutar plenamente de esas tecnologías, necesitará al menos algún conocimiento del desarrollo moderno de JavaScript y React.

No espere ser completamente productivo el primer día. Dicho esto, hay muchos cursos, gratuitos o de pago, para aprender el desarrollo moderno de JavaScript de pila completa. Estudiar AUSK y Vulcan puede ser una fuente de inspiración increíble.

# 3 Velocidad de desarrollo

Vulcan: automatiza todas las cosas

Cuando se usa bien, Vulcan es increíblemente rápido en la entrega de funciones. Esto se debe a que depende mucho de la generación automatizada, por lo que puede producir las partes más relevantes de una aplicación en cuestión de horas, siempre que su modelo de datos esté correctamente definido.

Este patrón se llama programación declarativa: usted "declara" cómo funciona su aplicación y deja que el marco haga el trabajo. Es difícil de implementar pero puede ser extremadamente poderoso.

AUSK: más libertad

Dado que AUSK se centra en el modelo estándar, es un poco más difícil agregar funciones básicas ya que es un proceso de varios pasos:

  • escribe tu esquema GraphQL
  • lo mismo para resolutores, mutaciones
  • lo mismo para su modelo de base de datos (usando Knex o Mongoose)
  • lo mismo para sus componentes React
  • ...

Sin embargo,Si necesita escribir una característica personalizada, será más fácil con AUSK que con Vulcan. Entonces, si tiene muy pocos modelos de datos pero características complejas, AUSK será más eficiente que Vulcan.

Con suerte, hay un trabajo en curso para hacer que AUSK sea más declarativo, a través de un innovador sistema de esquema inspirado en el diseño dirigido por el dominio, el esquema de dominio.

Conclusión: seleccione la herramienta adecuada para el caso de uso adecuado

No existe una tecnología universal mágica para el desarrollo JS de pila completa. La velocidad de desarrollo con cada marco depende mucho del caso de uso subyacente. Tiendo a preferir Vulcan para plataformas orientadas a datos y herramientas profesionales, y AUSK para plataformas B2C SaaS que requieren más funciones personalizadas.

# 4 Comunidad, apoyo y madurez

Vulcano: heredero de Meteor

Vulcan es un framework de Sacha Greif, quien es un desarrollador de Meteor desde hace mucho tiempo y muy involucrado en la comunidad JavaScript (State of JS y State of CSS, entre otras cosas).

Hay un Slack activo donde los principiantes y otros entusiastas pueden encontrar rápidamente respuestas a sus preguntas.

AUSK: un proyecto mantenido activamente

AUSK es mantenido por SysGears, en particular por Victor Vlasenko, el fundador de la empresa.

El proyecto está asociado con Gitter. Durante mi última misión independiente con AUSK, Victor respondió muy rápidamente a mis problemas y preguntas. Incluso fusionó el soporte de Storybook después de que le di una oportunidad.

Conclusión: comunidades pequeñas pero ricas

Ambas tecnologías se utilizan en producción en múltiples proyectos, por lo que ya son seguras de usar. Las comunidades están creciendo activamente y son amigables para los principiantes.

Si necesita formar un equipo, no espere encontrar autónomos que conozcan con precisión esas tecnologías, son demasiado específicas. En su lugar, concéntrese en encontrar desarrolladores de JavaScript de pila completa que puedan aprenderlos rápidamente. Alternativamente, puede ir a la fuente y encontrar verdaderos especialistas entre las comunidades Vulcan o AUSK.

# 5 Implementación

No hay mucho que comparar, ambos marcos permiten la implementación en plataformas que ofrecen servicios gratuitos como Zeit Now y Heroku, así como la implementación en su propio servidor personalizado.

# 6 Escalabilidad de código y patrones modulares

Vulcan: compartir esfuerzos

Una ventaja de un marco es el esfuerzo compartido. El uso final es más claro y, por lo tanto, nos permite integrar varias optimizaciones dentro del marco en sí.

Vulcan proporciona patrones como devoluciones de llamada / ganchos, mejoras y registro central para beneficiarse plenamente de su arquitectura orientada a paquetes. Por ejemplo, podemos agregar Material UI a una aplicación, incluido SSR, sin cambiar una sola línea de código en el módulo Vulcan Core.

Más precisamente, Vulcan proporciona diferentes registermétodos para cada estructura de datos, como registerComponent, y también devoluciones de llamada, como las router.wrapperque permiten envolver el Appcomponente raíz de React. Solo necesita importar su archivo una vez en el nivel de entrada del paquete ( mainarchivos).

AUSK: comience por el camino correcto, termine solo

La arquitectura modular limita la tentación de escribir código espagueti. Favorece la reutilización del código en todas las aplicaciones. Cada paquete posee un index.tsarchivo que declara middlewares relevantes, funciones de inicio, funciones graphQL compartidas con otros módulos.

El modulemódulo bien nombrado proporciona clases para que cada entorno registre un nuevo módulo, como ServerModuley ClientModule. Ese es el único módulo que realmente se usa directamente a nivel de la aplicación.

 export default new ServerModule({ onAppCreate: [ callback1, callback2] }) 

Internamente, todos los módulos se fusionarán en un módulo grande, que eventualmente se usará para crear la aplicación. Por ejemplo, todas las onAppCreatedevoluciones de llamada se ejecutarán una tras otra.

Ese es un patrón relativamente limpio y una arquitectura muy inteligente. Quiero decir, incluso el administrador de módulos es un módulo, ¿no es hermoso?

Pero el resto depende de ti. ¡Bien, podrás optimizar todo! Entonces, ¿va a perder un par de sus resolutores GraphQL y su base de datos Mongo? ¿Con qué herramientas? ¿Cómo se convierte su esquema GraphQL en proyecciones de Mongo? ¿Vas a escribir conectores, usar DataLoader?

Aquí está el punto: escribir una aplicación escalable es difícil. Muy duro. Si quieres aprender, bien por ti. Estoy muy contento de usar AUSK por esta misma razón, hacer las cosas solo es la mejor manera de aprender.

Conclusión: ¿tiene aversión al riesgo?

Tanto para AUSK como para Vulcan, la escalabilidad del código significa una arquitectura modular. Siempre que el código se vuelve demasiado complejo o ilegible, la solución es fácil: córtelo en partes más pequeñas y simples.

La arquitectura de Vulcan es más atrevida, todo puede ser modular. Esta ambición entraña un riesgo, a veces puede ser difícil saber quién registró qué y cuándo.

Los patrones modulares de AUSK son más fáciles de leer, pero también un poco menos potentes. Por ejemplo, puede resultar difícil agregar características globales complejas sin tocar el código del paquete principal. Sin embargo, definitivamente son suficientes para la mayoría de los casos de uso, no es necesario ser un purista de la modularidad para escribir buenas aplicaciones.

# 6 Móvil

Vulcano: con Córdoba

Meteor, en el que se basa Vulcan, incorpora Cordova. Por lo tanto, su aplicación web se puede empaquetar como una aplicación móvil con una sola línea de comando.

Sin embargo, Vulcan no proporciona herramientas para aplicaciones nativas. Por supuesto, aún puede crear una aplicación React Native independiente y conectarla a Vulcan. Se planean mejoras en el sistema de autenticación (actualmente la última pieza de Vulcan que realmente depende de Meteor) en los próximos meses para facilitar tales conexiones.

AUSK: con React Native

La combinación de una configuración para React "vainilla" y React Native es una de las mejores características de AUSK. Después de todo, ¡es un kit de inicio universal! Yo no utilizo muchos dispositivos móviles, pero es reconfortante poder crear rápidamente una aplicación móvil nativa que comparta el mismo servidor que mi interfaz web.

Conclusión: AUSK es mejor en dispositivos móviles

AUSK será más adecuado si necesita específicamente escribir una aplicación móvil. No obstante, Vulcan permite crear una aplicación móvil a partir de su código en una sola línea de comandos, lo cual está bien si la versión móvil es más secundaria para usted.

# 7 Cambiar la interfaz de usuario: un tema difícil

Crear un marco de trabajo completo que permita el cambio instantáneo de la biblioteca de la interfaz de usuario es un sueño que solo se logró durante la era de CSS. ¿Recuerda esos sitios web que permitían cambiar de tema haciendo clic en un solo botón?

Entonces las naciones de JS atacaron. Usando componentes React, es muy difícil proporcionar tal característica (excepto por cambios de color triviales), porque el estilo y el diseño ahora están muy ligados a los componentes subyacentes React / Angular / Vue.

Cada lib de React UI tiene su propia manera de definir un botón, sin siquiera hablar de temas. Ese es un problema para las tecnologías de pila completa como AUSK y Vulcan, porque elegir un marco de estilo es una cuestión de gustos. No pueden simplemente proponer una elección definitiva y obligarte a ceñirte a ella. Bootstrap ya no es un monopolio y cada desarrollador tiene su propia biblioteca favorita.

Para abordar este problema, ambos tienen un enfoque similar. Escribieron un conjunto canónico de componentes con Bootstrap, luego intentaron permitir el reemplazo de esos componentes con otra biblioteca como Ant Design o Material UI.

Hace que el código sea extraño. Por ejemplo, AUSK Button tomará un coloraccesorio, porque así es como funciona Bootstrap. Si cambia a Ant Design, también deberá usar el accesorio de color, incluso si Ant Design usa un typeaccesorio en su lugar.

Dado que la selección del marco de interfaz de usuario generalmente ocurre solo una vez, estar obligado a usar un conjunto de accesorios no canónicos durante todos los desarrollos parece un precio muy alto para el soporte de múltiples marcos de interfaz de usuario.

Durante el desarrollo, sugiero que evite el uso de esos componentes precodificados para la interfaz de usuario personalizada tanto como sea posible. Son geniales para construir el ejemplo y las características genéricas proporcionadas por el modelo / marco, pero no tanto cuando se trata de escribir las partes personalizadas de su aplicación.

En su lugar, use los componentes subyacentes proporcionados por Ant Design o Bootstrap o Material UI según su elección, e intente escribir su propia biblioteca de UI. Puede consultar Storybook para ayudarlo en el proceso, ya que está incluido tanto en AUSK como en Vulcan.

# 8 LUCHA LIBRE

Si conservara las características diferenciadoras específicas de cada una de estas tecnologías, serían estas.

Vulcano

El sistema de esquemas. Hasta donde yo sé, ningún marco es capaz de generar la estructura de la base de datos, los puntos de entrada del servidor, la capa de comunicación cliente / servidor y una interfaz lista para producción (formularios, listas, etc.) a partir de un solo esquema JSON.

Vulcan.js puede hacer eso mientras usa las últimas tecnologías JS.

AUSK

No logré elegir solo una, por lo que mis características preferidas de AUSK serían TypeScript y React Native.

Ha habido debates durante algunos años en torno a los beneficios de JavaScript tipado estáticamente, ya sea para preferir Flow o TypeScript ... Y TypeScript definitivamente ganó la pelea. Trabajar con TypeScript es posible en Vulcan pero, debido al uso de Meteor, actualmente se siente antinatural y la compilación es lenta. AUSK usa TypeScript por defecto y eso es increíble.

Y React Native ... bueno, también haydebate si el uso de React para escribir aplicaciones móviles es relevante. Puede optar por utilizar una aplicación web receptiva, pero al menos sabe que todo está configurado para usted, dado que configurar un entorno de desarrollo para React Native no siempre es una tarea fácil.

Entonces, ¿ha hecho su elección?

Hay tantos puntos que deben tenerse en cuenta, como el rendimiento, la seguridad, DevOps, la gestión de autenticación ... Elegir la herramienta adecuada para crear su aplicación JavaScript no es una elección fácil. Espero que este artículo le haya brindado información valiosa para ayudarlo en esta decisión.

Si todavía tiene dudas, comuníquese conmigo en Vulcan's Slack, estaré encantado de responderles :)

También puede dirigir cualquier pregunta sobre AUSK a Victor Vlasenko y su equipo en SysGears, y unirse al Slack dedicado de Vulcan para acceder a la comunidad de Vulcan.

Mi último consejo será así de simple: dale una oportunidad a Vulcan y AUSK, ¡valen la pena!

Gracias a Sacha Greif y Victor Vlasenko por revisar este artículo.

LBKE banner twitter

Soy cofundador de la empresa francesa Lebrun Burel Knowledge Engineering (LBKE) - //www.lbke.fr

¡Siempre feliz de hablar sobre código, aprendizaje automático, innovación y espíritu empresarial!