Presentamos Hoodie: desarrollo de pila completa para desarrolladores front-end

Si aún no has oído hablar de Hoodie, deberías echarle un vistazo.

Hoodie es una nueva biblioteca progresiva para desarrolladores front-end que adopta algunas filosofías nuevas y notables que probablemente transformarán tanto el desarrollo de aplicaciones como la experiencia del usuario. Hoodie pone el control sobre el desarrollo completo de aplicaciones de front-end en manos de los desarrolladores de front-end y los gurús de la experiencia del usuario, liberándolos de las objeciones técnicas a veces inescrutables de sus contrapartes de back-end. Además, las aplicaciones de Hoodie liberan a los usuarios de los grilletes de la conectividad ininterrumpida, permitiéndoles usar su aplicación mientras viajan, en el aire o bajo el mar, sin preocuparse.

Si bien la plataforma aún está en sus inicios, ya ofrece algunas herramientas nuevas y poderosas que vale la pena probar para cualquier desarrollador front-end que quiera adelantarse al juego. El equipo detrás de Hoodie tiene experiencia comprobada, habiendo trabajado en otros proyectos de gran éxito como CouchDB, Async, Mustache.js y muchos más.

Después de enterarme de lo que la biblioteca de desarrollo de pila completa de Hoodie tiene en proceso y de estar muy entusiasmado con el proyecto, decidí probarlo por mí mismo. Déjame contarte un poco más sobre Hoodie y mostrarte parte del potencial que tiene para desarrollar excelentes aplicaciones.

¿Qué es la sudadera con capucha?

En primer lugar, ¿qué es Hoodie? ¿Qué tiene de bueno? Hoodie es una plataforma y una API de código abierto, completamente JavaScript, que combina varios paradigmas nuevos y potentes en un paquete de desarrollo de pila completa, en beneficio tanto de los desarrolladores que crean las aplicaciones de Hoodie como de los usuarios finales que interactúan con ellas. El principal de estos conceptos son los movimientos "noBackend" y "Offline First", junto con un sólido proceso impulsado por la comunidad conocido como "Dreamcode" para desarrollar la API.

noBackend

Hoodie cree que la clave para un excelente desarrollo de aplicaciones de front-end está en manos de los expertos en experiencia del usuario y los desarrolladores que saben cómo hacer que una aplicación se vea genial y sea un placer usarla, pero que con demasiada frecuencia están restringidos por tecnicismos de back-end. sobre el que no tienen control. Las interacciones fundamentales del servidor que existen desde siempre, como el registro/inicio de sesión del usuario, el almacenamiento de datos o el envío de correos electrónicos, continúan requiriendo implementaciones personalizadas que consumen mucho tiempo para cada nueva aplicación, lo que obliga al desarrollador front-end a aprender y codificar para el nuevo respaldo. termina las peculiaridades cada vez.

Hoodie vuelve a poner el control en manos del diseñador y desarrollador front-end, al abstraer completamente el back-end. Con el desarrollo de aplicaciones front-end de Hoodie, en lugar de preocuparse por el lado del servidor, todo lo que tiene que preocuparse es la API front-end simple, fácil de aprender e implementar integrada en Hoodie. Por ejemplo, ¿quieres registrar un nuevo usuario? Esto se puede hacer en una línea de código:

 hoodie.account.signUp(username, password);

Esta es la idea detrás de la iniciativa noBackend, con la que Hoodie está totalmente comprometida. noBackend significa que no necesita un desarrollador de back-end. Simplemente implemente el back-end de Hoodie en su servidor y olvídese de él .

Hoodie está escrito completamente en JavaScript. Su back-end autónomo utiliza Node.JS con Apache CouchDB como base de datos. Al momento de escribir este artículo, las funciones principales que Hoodie ya ha implementado incluyen registro y administración de usuarios, carga de datos, almacenamiento y correos electrónicos. Esta característica principal se puede ampliar fácilmente agregando complementos adicionales de Node.js.

código de sueño

Hoodie es una API ante todo: esto es lo que hace posible noBackend. La implementación de Hoodie puede cambiar y mejorar con el tiempo, pero la interfaz proporcionada a los desarrolladores seguirá siendo la misma, por lo que nunca tendrás que preocuparte por ella.

Hoodie sigue creciendo rápidamente y se agregan nuevas características todo el tiempo. Hoodie, al igual que otros proyectos noBackend, utiliza un enfoque impulsado por la comunidad para diseñar la API llamada Dreamcode. Esencialmente, imaginas el código que te gustaría escribir y, si recibe suficiente apoyo de la comunidad, Hoodie lo hará posible.

Este enfoque basado en la API y de colaboración colectiva para diseñar la API de Hoodie significa que el código de Hoodie es muy fácil de escribir y de leer. ¡Es el código de tus sueños!

Desconectado primero

Hoodie resuelve muchos problemas para los desarrolladores de aplicaciones front-end con su API noBackend, impulsada por Dreamcode. Pero uno de los principales objetivos de Hoodie es resolver también un problema importante para los usuarios: su dependencia a menudo paralizante de la conectividad.

A medida que avanza el cambio a dispositivos móviles con aplicaciones móviles, la antigua suposición de conectividad continua basada en el escritorio se ha mantenido sin cambios. Durante todo este tiempo, la promesa ha sido que dondequiera que vaya, Internet estará allí. Hasta el día de hoy, la pérdida de conectividad se trata como una anomalía, lo que impide que los usuarios puedan hacer cualquier cosa hasta que vuelvan a estar en línea. Pero como todos sabemos, la red de telecomunicaciones no ha cumplido con esta promesa. La conectividad se va por la ventana en los aviones, en el metro, en los caminos rurales y en innumerables otras situaciones. ¡Y eso es en las partes desarrolladas del mundo! En grandes áreas del planeta, el acceso estable a Internet es la rara excepción a la regla.

El movimiento Offline First busca una elegante armonización con este simple hecho de la vida. Con Offline First, la falta de conectividad es solo otro estado normal de la aplicación. De hecho, ¡es el estado predeterminado! Hoodie adopta con entusiasmo esta filosofía. Detrás de la API hay una implementación frontal completa de almacenamiento local temporal y sincronización automática y elegante cada vez que una conexión está disponible.

Con Hoodie, puede publicar comentarios, enviar correos electrónicos, editar cuentas y realizar casi cualquier otra actividad cotidiana, sin preocuparse por tener una conexión. Todo el sistema de almacenamiento y sincronización se puede interrumpir en cualquier momento, sin temor a perder datos.

Por supuesto, este modelo viene con su propio conjunto de desafíos y enfoques de diseño únicos, pero el equipo de Hoodie es pionero en las técnicas para resolver estos desafíos.

Offline First es una nueva y emocionante versión del desarrollo de aplicaciones, en sus primeras etapas de adopción. Todavía queda mucho por hacer para desarrollar las técnicas requeridas. Echa un vistazo aquí para ver cómo lo hace Hoodie.

Una aplicación simple que usa sudadera con capucha

Para demostrar el uso de Hoodie como herramienta de desarrollo front-end, decidí escribir una aplicación simple que permitiría a los miembros de nuestra comunidad crear sus propios eventos y publicarlos para que otros ingenieros los busquen y los agreguen a su agenda. Tenga en cuenta que el objetivo aquí es hacer una demostración de Hoodie y no proporcionar una aplicación que esté lista para la producción. Puedes encontrar el código en mi página de GitHub.

Debajo de las cubiertas, Hoodie es esencialmente la combinación de un lado del servidor integrado en NodeJS y una biblioteca de JavaScript del lado del cliente. Además del proceso simple de instalación e implementación, el desarrollador que trabaja en la aplicación solo trabajará en el código del lado del cliente. La biblioteca integrada puede hablar con el lado del servidor sin que el desarrollador sepa nada sobre cómo funciona.

¿Qué pasa si nuestra aplicación requiere que hagamos algo personalizado en el servidor? Siempre podemos crear complementos de sudadera con capucha. Aquí hay más información sobre los complementos.

Primeros pasos con la aplicación Hoodie

El primer paso con el desarrollo completo de cualquier aplicación de Hoodie es usar la herramienta de línea de comandos de Hoodie para que podamos despegar:

 hoodie new toptalCommunity

Esto creará una aplicación de sudadera con capucha inicializada que ya tiene un código en su lugar, ¡y ya podemos ejecutar nuestra aplicación! si escribimos

 cd toptalCommunity hoodie start

el navegador se abrirá con una aplicación de muestra del equipo de Hoodie:

Hice un poco de limpieza en este momento. Las aplicaciones con capucha actualmente vienen con Bootstrap y Prism, pero eliminé las versiones provistas. No necesitaba Prism y quería usar mi propia versión de Bootstrap para poder usar las fuentes y JS que quería usar. También realicé algunos cambios en main.css mientras creaba la aplicación, para darle su propio estilo y permitir mi plantilla simple de arranque. Solo usé jQuery para eventos y manipulación de DOM. La sudadera con capucha se encarga de todo lo demás.

Sudadera con capucha y Dreamcode

Mientras trabajaba en la creación de esta aplicación de muestra, rápidamente me di cuenta de todos los beneficios de trabajar con Hoodie. Muchas de las preguntas habituales que necesitan respuesta al iniciar un proyecto simplemente no estaban allí. Hoodie me permitió simplemente escribir código y ver la aplicación en vivo y en funcionamiento.

¿Qué estrategia debemos utilizar para la gestión de cuentas de usuario? El complemento de la cuenta de Hoodie es la respuesta. ¿Cómo debemos almacenar nuestros datos en el backend? La sencilla API de almacenamiento de Hoodie maneja eso por nosotros, brindándonos la funcionalidad Offline First de forma gratuita. No se necesitó ningún esfuerzo para que esta aplicación con capucha funcione sin conexión, simplemente funciona.

Profundicemos un poco más en algunas de las implementaciones:.

Gestión de cuentas de usuario

Hoodie tiene un complemento que se encarga de la administración de cuentas para nosotros llamado hoodie-plugin-users . La API no podría ser más sencilla.

¿Cómo añadimos un nuevo usuario?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

¿Cómo iniciamos sesión como usuario?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

¿Tenemos un usuario logueado?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Esto realmente no podría ser más simple. Oh, espera, ¿cómo va a reaccionar nuestra interfaz de usuario a todo eso? Hoodie tiene eventos reservados para ti

Reaccione cuando el usuario inicie sesión:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Almacenamiento de datos

Nuestra aplicación de muestra permitirá a los usuarios crear sus propios eventos (datos privados) y publicarlos si lo desean (hacer públicos los datos), para que otros usuarios puedan unirse al evento.

Hoodie nos permite agregar datos a su tienda local sin iniciar sesión, entonces, ¿cómo sabe a qué usuario pertenecen estos datos? Bueno, lo mantiene local y no se sincronizará con el servidor hasta que el usuario haya iniciado sesión. Hoodie también se asegurará de que solo ese usuario pueda acceder a esos datos.

Pues así es como funciona:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

¡Es así de simple! Bien, eso nos ayudaría a crear un evento, ¿cómo lo compartiremos con los demás? Aquí es donde el global share plugin nos ayudará. Tenemos que instalarlo ya que no es un complemento predeterminado:

 hoodie install global-share

Ahora que tenemos el complemento en su lugar, ¡vamos a usarlo! Tenemos que publicar los datos que ya hemos agregado a nuestra tienda de usuarios en la tienda global.

 hoodie.store.findAll('event').publish();

Esto marcará todos los eventos guardados para este usuario como públicos para que cuando consultemos el almacén global obtengamos esos datos como resultado.

 hoodie.global.findAll('event'); //This is read-only

En la página Mis eventos, el usuario puede crear eventos que se publican directamente en la tienda global.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Los eventos publicados son visibles para todos, por lo que ahora cualquier usuario puede ver los eventos creados en la página Eventos.

Entonces, ¿qué pasa con los datos que no deberían ser públicos? Almacenamos los eventos a los que nuestro usuario ha aplicado y los mostramos en la página Eventos. Cuando el usuario hace clic en el botón Aplicar, esto es lo que se ejecuta:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

Las dos capturas de pantalla a continuación muestran dos ventanas del navegador que se ejecutan simultáneamente. En el primer navegador, el usuario inicia sesión como usuario a@aa que se ha aplicado al evento A. En el segundo, el usuario b@bb ha iniciado sesión y se ha aplicado a B Event .

Sondeo largo

Al suscribirnos a algunos eventos proporcionados por Hoodie, podemos usar técnicas transparentes como el sondeo largo, lo que le da a nuestra aplicación una función interesante ya que diferentes usuarios la usan y colaboran en ella.

Esto es realmente fácil de hacer. En nuestra aplicación de muestra, una sola línea hizo el truco:

 hoodie.global.on('add:event', loadEvent);

Esa línea simple se encargará de realizar un sondeo prolongado en el servidor para verificar si hay nuevos eventos que otros usuarios puedan haber agregado y agregarlos a la página Mis eventos.

Algunas preocupaciones

Después de crear esta aplicación de muestra para jugar con Hoodie y sus funciones de desarrollo de aplicaciones de front-end, estoy muy entusiasmado con lo que tiene para ofrecer. Sin embargo, algunos problemas claros se destacaron para mí.

Hoodie hace que sea tan fácil para el desarrollador comunicarse con el servidor que cualquier desarrollador podría agregar cosas a nuestra base de datos simplemente usando la consola, lo que claramente tiene importantes implicaciones de seguridad e integridad de datos.

A la biblioteca también le faltan muchas cosas esenciales que necesitaría en cualquier aplicación de producción, como la validación de datos, URL enlazables, un marco de prueba y el intercambio privado de datos (aunque ya están haciendo un buen progreso en esto último). Para usar Hoodie en producción en este momento, tendríamos que emparejarlo con otra solución como AngularJS, Ember o cualquiera de las muchas otras soluciones que nos ayudan a asegurarnos de que tenemos un código JavaScript estructurado y mantenible correctamente para nuestros proyectos front-end. Dado que estos marcos se están acercando a la complejidad de las tecnologías de back-end en estos días, esta solución anularía en gran medida el propósito de Hoodie.

El futuro de la sudadera con capucha

La sudadera con capucha aún se encuentra en un proceso de desarrollo intenso para resolver todos estos problemas. El equipo está trabajando arduamente para implementar nuevas funciones y mejorar las existentes para que la plataforma esté lista para el consumo masivo y, por supuesto, este proceso lleva tiempo. Si está planeando una nueva aplicación a gran escala en este momento, es posible que desee encontrar una plataforma diferente para construirla esta vez.

Mientras tanto, sin embargo, ciertamente no es demasiado pronto para comenzar a jugar con el desarrollo de aplicaciones front-end usando Hoodie, como espero haber demostrado. Hay muchas ideas nuevas y poderosas ya integradas en Hoodie, que creo que probablemente se volverán muy populares. Adelantarse al juego con estas cosas probablemente no sea una mala idea.

Si el equipo de Hoodie sigue trabajando duro, la API debería estar lista para el horario de máxima audiencia en poco tiempo. Si desea realizar un seguimiento del progreso del equipo de Hoodie, solo eche un vistazo a su rastreador de hitos.

Hoodie promete hacer que el desarrollo de excelentes aplicaciones para personas que mueven y coctelera sea muy fácil. Si las ideas que encarna Hoodie se ponen de moda, es posible que veamos que la necesidad de un equipo de desarrolladores de back-end para cada nuevo proyecto se convierta en una cosa del pasado. Con proyectos como este, es fácil imaginar una edad dorada para los desarrolladores front-end en un futuro no muy lejano. Del mismo modo, los beneficios para los usuarios que ofrece el ideal Offline First son un gran paso para la accesibilidad, extendiendo el alcance de nuestro estilo de vida móvil y conectado a aquellos lugares donde Internet no llega.

Dirígete a Sudadera con capucha para seguir el progreso de Sudadera con capucha y formar parte de los nuevos y emocionantes cambios que se está preparando para introducir.

Un agradecimiento especial al equipo de Hoodie. Logotipo de la sudadera con capucha utilizado con permiso del Proyecto de código abierto de la sudadera con capucha