Présentation de Hoodie : développement de la pile complète pour les développeurs front-end

Si vous n'avez pas encore entendu parler de Hoodie, vous devriez le vérifier.

Hoodie est une nouvelle bibliothèque progressive pour les développeurs frontaux qui adopte de nouvelles philosophies remarquables susceptibles de transformer à la fois le développement d'applications et l'expérience utilisateur. Hoodie place le contrôle du développement d'applications front-end complètes entre les mains des développeurs front-end et des gourous de l'expérience utilisateur, les libérant des objections techniques parfois impénétrables de leurs homologues back-end. De plus, les applications Hoodie libèrent les utilisateurs des chaînes d'une connectivité ininterrompue, leur permettant d'utiliser votre application en déplacement, dans les airs ou sous la mer, sans souci.

Bien que la plate-forme en soit encore à ses balbutiements, elle propose déjà de nouveaux outils puissants qui valent la peine d'être essayés pour tout développeur front-end qui souhaite prendre une longueur d'avance. L'équipe derrière Hoodie a une expérience éprouvée, ayant travaillé sur d'autres projets très réussis tels que CouchDB, Async, Moustache.js et bien d'autres.

Après avoir découvert ce que la bibliothèque de développement de pile complète Hoodie a en préparation et être très enthousiaste à propos du projet, j'ai décidé de l'essayer par moi-même. Permettez-moi de vous en dire un peu plus sur Hoodie et de vous montrer une partie de son potentiel pour développer de superbes applications.

Qu'est-ce qu'un sweat à capuche ?

Tout d'abord, qu'est-ce que Hoodie ? Qu'est-ce qu'il y a de si génial ? Hoodie est une plate-forme et une API open source entièrement JavaScript qui combinent plusieurs nouveaux paradigmes puissants dans un package de développement complet, au profit à la fois des développeurs qui créent des applications Hoodie et des utilisateurs finaux qui interagissent avec elles. Parmi ces concepts, les principaux sont les mouvements « noBackend » et « Offline First », ainsi qu'un solide processus communautaire appelé « Dreamcode » pour la construction de l'API.

pas de Backend

Hoodie pense que la clé d'un excellent développement d'applications frontales réside entre les mains des experts en expérience utilisateur et des développeurs qui savent comment rendre une application attrayante et agréable à utiliser, mais qui sont trop souvent limités par les aspects techniques du back-end. sur lesquels ils n'ont aucun contrôle. Les interactions serveur fondamentales qui existent depuis toujours, telles que l'inscription/la connexion des utilisateurs, le stockage des données ou l'envoi d'e-mails, continuent de nécessiter des implémentations personnalisées chronophages pour chaque nouvelle application, obligeant le développeur frontal à apprendre et à coder pour de nouveaux back- mettre fin aux bizarreries à chaque fois.

Hoodie remet le contrôle entre les mains du concepteur et du développeur front-end, en supprimant complètement le back-end. Avec le développement d'applications frontales Hoodie, au lieu de vous soucier de votre côté serveur, tout ce dont vous avez à vous soucier est l'API frontale simple, facile à apprendre et à mettre en œuvre intégrée à Hoodie. Par exemple, vous souhaitez inscrire un nouvel utilisateur ? Cela peut être fait en une seule ligne de code :

 hoodie.account.signUp(username, password);

C'est l'idée derrière l'initiative noBackend, à laquelle Hoodie s'engage pleinement. noBackend signifie que vous n'avez pas besoin d'un développeur back-end ! Déployez simplement le back-end Hoodie sur votre serveur et oubliez-le .

Hoodie est entièrement écrit en JavaScript. Son back-end autonome utilise Node.JS avec Apache CouchDB comme base de données. Au moment d'écrire ces lignes, les principales fonctionnalités que Hoodie a déjà implémentées incluent l'inscription et l'administration des utilisateurs, le chargement des données, le stockage et les e-mails. Ces fonctionnalités de base peuvent être facilement étendues en ajoutant des plugins Node.js supplémentaires.

Code de rêve

Hoodie est avant tout une API - c'est ce qui rend noBackend possible. L'implémentation de Hoodie peut changer et s'améliorer avec le temps, mais l'interface fournie aux développeurs restera la même, de sorte que vous n'aurez jamais à vous en soucier.

Hoodie continue de croître rapidement et de nouvelles fonctionnalités sont ajoutées en permanence. Hoodie, comme d'autres projets noBackend, utilise une approche communautaire pour concevoir l'API appelée Dreamcode. Essentiellement, vous imaginez le code que vous aimeriez écrire, et s'il reçoit suffisamment de soutien de la part de la communauté, Hoodie le réalisera.

Cette approche participative et axée sur l'API pour la conception de l'API Hoodie signifie que le code Hoodie est un jeu d'enfant à écrire et un jeu d'enfant à lire. C'est le code de vos rêves !

Hors ligne d'abord

Hoodie résout de nombreux problèmes pour les développeurs d'applications frontaux grâce à son API noBackend pilotée par Dreamcode. Mais l'un des principaux objectifs de Hoodie est de résoudre également un problème majeur pour les utilisateurs - leur dépendance souvent paralysante à la connectivité.

Alors que le passage aux appareils mobiles avec des applications mobiles se poursuit, l'ancienne hypothèse de connectivité continue basée sur les ordinateurs de bureau est restée inchangée. Pendant tout ce temps, la promesse a été que partout où vous irez, Internet sera là. À ce jour, la perte de connectivité est traitée comme une anomalie, empêchant les utilisateurs de faire quoi que ce soit jusqu'à ce qu'ils soient de nouveau en ligne. Mais comme nous le savons tous, le réseau de télécommunications n'a pas tenu cette promesse. La connectivité passe par la fenêtre dans les avions, dans les métros, sur les routes rurales et dans d'innombrables autres situations. Et c'est dans les parties développées du monde ! Dans de vastes régions de la planète, un accès Internet stable est la rare exception à la règle.

Le mouvement Offline First cherche une harmonie gracieuse avec ce simple fait de la vie. Avec Offline First, la non-connectivité n'est qu'un autre état normal de l'application. En fait c'est l'état par défaut ! Hoodie adopte avec enthousiasme cette philosophie. Derrière l'API se trouve une implémentation frontale complète du stockage local temporaire et une synchronisation automatique et gracieuse chaque fois qu'une connexion devient disponible.

Avec Hoodie, vous pouvez publier des commentaires, envoyer des e-mails, modifier des comptes et effectuer la plupart des autres activités quotidiennes, sans vous soucier d'avoir une connexion. L'ensemble du système de stockage et de synchronisation peut être interrompu à tout moment, sans crainte de perdre des données.

Bien sûr, ce modèle est livré avec son propre ensemble de défis et d'approches de conception uniques, mais l'équipe de Hoodie est pionnière dans les techniques pour résoudre ces défis.

Offline First est une nouvelle approche passionnante du développement d'applications, à ses premiers stades d'adoption. Il reste encore beaucoup à faire pour développer les techniques requises. Jetez un œil ici pour voir comment Hoodie le fait.

Une application simple utilisant Hoodie

Pour démontrer l'utilisation de Hoodie en tant qu'outil de développement frontal, j'ai décidé d'écrire une application simple qui permettrait aux membres de notre communauté de créer leurs propres événements et de les publier pour que d'autres ingénieurs puissent les parcourir et les ajouter à leur emploi du temps. Gardez à l'esprit que l'objectif ici est de faire la démonstration de Hoodie et non de fournir une application prête pour la production. Vous pouvez trouver le code sur ma page GitHub.

Sous les couvertures, Hoodie est essentiellement la combinaison d'un côté serveur construit en NodeJS et d'une bibliothèque JavaScript côté client. Outre le processus d'installation et de déploiement simple, le développeur travaillant sur l'application ne travaillera que sur le code côté client. La bibliothèque intégrée peut parler au côté serveur sans que le développeur sache quoi que ce soit sur son fonctionnement.

Et si notre application nous oblige à faire quelque chose de personnalisé sur le serveur ? Nous pouvons toujours créer des plugins Hoodie. Voici quelques informations supplémentaires sur les plugins.

Démarrage de votre application Hoodie

La première étape du développement complet de toute application Hoodie consiste à utiliser l'outil de ligne de commande Hoodie pour nous faire décoller :

 hoodie new toptalCommunity

Cela créera une application Hoodie initialisée qui a déjà du code en place, et nous pouvons déjà exécuter notre application ! Si nous tapons

 cd toptalCommunity hoodie start

le navigateur s'ouvrira avec un exemple d'application de l'équipe Hoodie :

J'ai fait un peu de ménage à ce moment-là. Les applications Hoodie sont actuellement fournies avec Bootstrap et Prism, mais j'ai retiré les versions fournies. Je n'avais pas besoin de Prism et je voulais utiliser ma propre version de Bootstrap pour pouvoir utiliser les polices et JS que je voulais utiliser. J'ai également apporté quelques modifications à main.css lors de la création de l'application, pour lui donner son propre style et pour permettre mon modèle de démarrage simple. Je n'ai utilisé jQuery que pour la manipulation et les événements DOM. Hoodie s'occupe de tout le reste.

Sweat à capuche et Dreamcode

Alors que je travaillais sur la création de cet exemple d'application, j'ai rapidement réalisé tous les avantages de travailler avec Hoodie. Tant de questions régulières auxquelles il faut répondre lors du démarrage d'un projet n'étaient tout simplement pas là. Hoodie m'a permis d'écrire du code et de voir l'application en direct et en fonctionnement.

Quelle stratégie devrions-nous utiliser pour la gestion des comptes utilisateurs ? Le plugin de compte Hoodie est la réponse. Comment devrions-nous stocker nos données sur le backend ? L'API de stockage extrêmement simple de Hoodie gère cela pour nous, nous offrant la fonctionnalité Offline First gratuitement ! Aucun effort n'a été nécessaire pour que cette application Hoodie fonctionne hors ligne, elle fonctionne tout simplement.

Plongeons un peu plus dans certaines implémentations :.

Gestion des comptes utilisateurs

Hoodie a un plugin qui s'occupe de la gestion des comptes pour nous appelé hoodie-plugin-users . L'API ne pourrait pas être plus simple.

Comment ajouter un nouvel utilisateur ?

 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'); }); }

Comment connectons-nous un utilisateur ?

 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'); }); }

Avons-nous un utilisateur connecté ?

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

Cela ne pourrait vraiment pas être plus simple. Oh attendez et comment notre interface utilisateur va-t-elle réagir à tout cela ? Hoodie vous réserve des événements

Réagissez lorsque l'utilisateur se connecte :

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

Stockage de données

Notre exemple d'application permettra aux utilisateurs de créer leurs propres événements (données privées) et de les publier s'ils le souhaitent (rendre les données publiques), afin que d'autres utilisateurs puissent rejoindre l'événement.

Hoodie nous permet d'ajouter des données à son magasin local sans se connecter, alors comment sait-il à quel utilisateur appartiennent ces données ? Eh bien, il reste local et ne se synchronise pas avec le serveur tant que cet utilisateur ne s'est pas connecté. Hoodie s'assurera également que seul cet utilisateur est en mesure d'accéder à ces données.

Voici donc comment cela fonctionne :

 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

C'est si simple! Ok, donc cela nous aiderait à créer un événement, comment allons-nous le partager avec les autres ? C'est là que le global share plugin nous aidera. Nous devons l'installer car ce n'est pas un plugin par défaut :

 hoodie install global-share

Maintenant que nous avons le plugin en place, utilisons-le ! Nous devons publier les données que nous avons déjà ajoutées à notre magasin d'utilisateurs dans le magasin global.

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

Cela marquera tous les événements enregistrés pour cet utilisateur comme publics afin que lorsque nous interrogeons le magasin global, nous obtenions ces données en conséquence.

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

Sur la page Mes événements, l'utilisateur peut créer des événements qui sont publiés directement dans le magasin global.

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

Les événements publiés sont visibles par tout le monde, donc maintenant n'importe quel utilisateur peut voir les événements créés sur la page Événements.

Qu'en est-il des données qui ne devraient pas être publiques ? Nous stockons les événements auxquels notre utilisateur a postulé et les affichons sur la page Événements. Lorsque l'utilisateur clique sur le bouton Appliquer, voici ce qui est exécuté :

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

Les deux captures d'écran ci-dessous montrent deux fenêtres de navigateur s'exécutant simultanément. Dans le premier navigateur, l'utilisateur est connecté en tant qu'utilisateur a@aa qui a postulé à l' événement A . Dans le second, l'utilisateur b@bb est connecté et a postulé à B Event .

Interrogation longue

En vous abonnant à certains événements fournis par Hoodie, nous pouvons utiliser de manière transparente des techniques telles que les sondages longs, ce qui confère à notre application une fonctionnalité intéressante car différents utilisateurs l'utilisent et y collaborent.

C'est vraiment facile à faire. Sur notre exemple d'application, une seule ligne a fait l'affaire :

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

Cette simple ligne se chargera d'interroger longuement le serveur pour vérifier les nouveaux événements qui auraient pu être ajoutés par d'autres utilisateurs et les ajouter à la page Mes événements.

Quelques préoccupations

Après avoir créé cet exemple d'application pour jouer avec Hoodie et ses fonctionnalités de développement d'applications frontales, je suis très enthousiasmé par ce qu'il a à offrir. Cependant, quelques problèmes clairs se sont imposés à moi.

Hoodie permet au développeur de communiquer si facilement avec le serveur que n'importe quel développeur pourrait ajouter des éléments à notre base de données simplement en utilisant la console, ce qui a clairement des implications majeures en matière de sécurité et d'intégrité des données.

Il manque également à la bibliothèque de nombreux éléments essentiels dont vous auriez besoin dans toute application de production, tels que la validation des données, les URL pouvant être liées, un cadre de test et le partage privé des données (bien qu'ils progressent déjà bien sur ce dernier). Pour utiliser Hoodie en production en ce moment, nous devrions l'associer à une autre solution comme AngularJS, Ember ou l'une des nombreuses autres solutions qui nous aident à nous assurer que nous avons un code JavaScript correctement structuré et maintenable pour nos projets Front-End. Étant donné que ces frameworks se rapprochent eux-mêmes de la complexité des technologies back-end de nos jours, cette solution irait largement à l'encontre de l'objectif de Hoodie.

L'avenir du sweat à capuche

Hoodie est toujours en cours de développement pour résoudre tous ces problèmes. L'équipe travaille dur pour implémenter de nouvelles fonctionnalités et améliorer celles existantes afin de rendre la plate-forme prête pour une consommation de masse, et bien sûr, ce processus prend du temps. Si vous planifiez une nouvelle application à grande échelle en ce moment, vous voudrez peut-être trouver une plate-forme différente pour la développer cette fois-ci.

En attendant, cependant, il n'est certainement pas trop tôt pour commencer à bricoler avec le développement d'applications frontales à l'aide de Hoodie, comme j'espère que je viens de le démontrer. Il y a beaucoup de nouvelles idées puissantes déjà intégrées dans Hoodie, qui, je pense, sont susceptibles de devenir très populaires. Prendre une longueur d'avance avec ces choses n'est probablement pas une mauvaise idée.

Si l'équipe de Hoodie continue son travail acharné, l'API devrait être prête pour les heures de grande écoute en un rien de temps. Si vous souhaitez suivre les progrès de l'équipe Hoodie, jetez simplement un coup d'œil à leur outil de suivi des étapes.

Hoodie promet de faciliter le développement d'excellentes applications pour les déménageurs et les shakers. Si les idées qu'incarne Hoodie font leur chemin, nous verrons peut-être le besoin d'une équipe de développeurs back-end pour chaque nouveau projet devenir une chose du passé. Avec des projets comme celui-ci, il est facile d'imaginer un âge d'or pour les développeurs front-end dans un avenir pas trop lointain. De même, les avantages offerts aux utilisateurs par l'idéal Offline First sont un grand pas en avant pour l'accessibilité, étendant la portée de notre mode de vie mobile et connecté dans les endroits où Internet lui-même ne va pas.

Rendez-vous sur Hoodie pour suivre les progrès de Hoodie et pour faire partie des nouveaux changements passionnants qu'il se prépare à inaugurer.

Un merci spécial à l'équipe de Hoodie. Logo Hoodie utilisé avec la permission du Hoodie Open Source Project