Wir stellen vor: Hoodie: Full-Stack-Entwicklung für Front-End-Entwickler

Wenn Sie noch nichts von Hoodie gehört haben, sollten Sie es sich ansehen.

Hoodie ist eine fortschrittliche neue Bibliothek für Front-End-Entwickler, die einige bemerkenswerte neue Philosophien anwendet, die wahrscheinlich sowohl die App-Entwicklung als auch die Benutzererfahrung verändern werden. Hoodie legt die Kontrolle über die Entwicklung von Full-Stack-Front-End-Apps vollständig in die Hände der Front-End-Entwickler und User-Experience-Gurus und befreit sie von den manchmal unergründlichen technischen Einwänden ihrer Back-End-Pendants. Darüber hinaus befreien Hoodie-Apps Benutzer von den Fesseln der unterbrechungsfreien Konnektivität, sodass sie Ihre App unterwegs, in der Luft oder unter Wasser sorglos nutzen können.

Obwohl die Plattform noch in den Kinderschuhen steckt, bietet sie bereits einige leistungsstarke neue Tools, die es wert sind, von jedem Front-End-Entwickler ausprobiert zu werden, der dem Spiel voraus sein möchte. Das Team hinter Hoodie hat einen bewährten Hintergrund und hat an anderen äußerst erfolgreichen Projekten wie CouchDB, Async, Moustache.js und vielen mehr gearbeitet.

Nachdem ich erfahren hatte, was die Hoodie-Full-Stack-Entwicklungsbibliothek in Arbeit hat, und mich sehr auf das Projekt gefreut hatte, beschloss ich, es selbst auszuprobieren. Lassen Sie mich Ihnen etwas mehr über Hoodie erzählen und Ihnen zeigen, welches Potenzial es für die Entwicklung großartiger Apps hat.

Was ist Hoodie?

Zunächst einmal, was ist Hoodie? Was ist daran so toll? Hoodie ist eine vollständig auf Open Source basierende JavaScript-Plattform und -API, die mehrere leistungsstarke neue Paradigmen in einem vollständigen Entwicklungspaket kombiniert, was sowohl den Entwicklern, die Hoodie-Apps erstellen, als auch den Endbenutzern, die mit ihnen interagieren, zugute kommt. Zu diesen Konzepten zählen vor allem die „noBackend“- und „Offline First“-Bewegungen sowie ein starker Community-gesteuerter Prozess namens „Dreamcode“ zum Aufbau der API.

kein Backend

Hoodie glaubt, dass der Schlüssel zu einer großartigen Entwicklung von Front-End-Apps in den Händen von Experten für Benutzererfahrung und Entwicklern liegt, die wissen, wie man eine App großartig aussehen lässt und angenehm zu bedienen ist, die aber allzu oft durch Back-End-Techniken eingeschränkt sind über die sie keine Kontrolle haben. Grundlegende Serverinteraktionen, die es schon seit Ewigkeiten gibt, wie Benutzerregistrierung/-anmeldung, Datenspeicherung oder E-Mail-Versand, erfordern weiterhin zeitaufwändige benutzerdefinierte Implementierungen für jede neue App, was den Front-End-Entwickler zwingt, zu lernen und für neue Back-Programme zu programmieren. jedes Mal Macken beenden.

Hoodie legt die Kontrolle wieder in die Hände des Front-End-Designers und -Entwicklers, indem das Back-End vollständig abstrahiert wird. Bei der Front-End-App-Entwicklung von Hoodie brauchen Sie sich nur um die einfache, leicht zu erlernende und zu implementierende Front-End-API zu kümmern, anstatt sich um Ihre Serverseite zu kümmern. Möchten Sie beispielsweise einen neuen Benutzer registrieren? Dies kann in einer Codezeile erfolgen:

 hoodie.account.signUp(username, password);

Das ist die Idee hinter der noBackend-Initiative, der sich Hoodie voll und ganz verschrieben hat. noBackend bedeutet, dass Sie keinen Backend-Entwickler benötigen! Stellen Sie einfach das Hoodie-Back-End auf Ihrem Server bereit und vergessen Sie es .

Hoodie ist vollständig in JavaScript geschrieben. Sein eigenständiges Backend verwendet Node.JS mit Apache CouchDB als Datenbank. Zu den Kernfunktionen, die Hoodie bereits implementiert hat, gehören zum jetzigen Zeitpunkt die Benutzeranmeldung und -verwaltung, das Laden von Daten, die Speicherung und E-Mails. Diese Kernfunktion kann einfach erweitert werden, indem zusätzliche Node.js-Plugins hinzugefügt werden.

Traumcode

Hoodie ist in erster Linie eine API - das macht noBackend möglich. Die Implementierung von Hoodie kann sich im Laufe der Zeit ändern und verbessern, aber die Benutzeroberfläche, die den Entwicklern zur Verfügung gestellt wird, bleibt gleich, sodass Sie sich nie darum kümmern müssen.

Hoodie wächst immer noch schnell und es werden ständig neue Funktionen hinzugefügt. Hoodie verwendet wie andere noBackend-Projekte einen Community-gesteuerten Ansatz zum Entwerfen der API namens Dreamcode. Im Wesentlichen denken Sie sich den Code aus, den Sie schreiben möchten , und wenn er genügend Unterstützung von der Community erhält, wird Hoodie ihn verwirklichen.

Dieser API-first-Crowdsourcing-Ansatz zum Entwerfen der Hoodie-API bedeutet, dass Hoodie-Code ein Kinderspiel zu schreiben und zu lesen ist. Es ist der Code Ihrer Träume!

Zuerst offline

Hoodie löst viele Probleme für Front-End-App-Entwickler mit seiner noBackend, Dreamcode-gesteuerten API. Aber eines der Hauptziele von Hoodie ist es, auch ein großes Problem für die Benutzer zu lösen – ihre oft lähmende Abhängigkeit von Konnektivität.

Während die Umstellung auf mobile Geräte mit mobilen Apps weitergeht, ist die alte Desktop-basierte Annahme der kontinuierlichen Konnektivität unverändert geblieben. Die ganze Zeit war das Versprechen, dass das Internet überall da sein wird, wo Sie hingehen. Bis heute wird der Verlust der Konnektivität als Anomalie behandelt, wodurch Benutzer daran gehindert werden, irgendetwas zu erledigen, bis sie wieder online sind. Aber wie wir alle wissen, hat das Telekommunikationsnetz dieses Versprechen nicht eingelöst. Konnektivität geht in Flugzeugen, U-Bahnen, auf Landstraßen und in unzähligen anderen Situationen aus dem Fenster. Und das in den entwickelten Teilen der Welt! In weiten Teilen der Erde ist ein stabiler Internetzugang die seltene Ausnahme von der Regel.

Die Offline-First-Bewegung sucht eine anmutige Harmonie mit dieser einfachen Tatsache des Lebens. Bei Offline First ist Nichtkonnektivität nur ein weiterer normaler Zustand der Anwendung. Tatsächlich ist es der Standardzustand! Hoodie übernimmt diese Philosophie mit Begeisterung. Hinter der API verbirgt sich eine vollständige Front-End-Implementierung von temporärem lokalem Speicher und automatischer, ordnungsgemäßer Synchronisierung, sobald eine Verbindung verfügbar wird.

Mit Hoodie können Sie Kommentare posten, E-Mails senden, Konten bearbeiten und die meisten anderen alltäglichen Aktivitäten ausführen, ohne sich Gedanken über eine Verbindung machen zu müssen. Das gesamte Speicher- und Synchronisierungssystem kann jederzeit unterbrochen werden, ohne Datenverlust befürchten zu müssen.

Natürlich bringt dieses Modell seine eigenen einzigartigen Designherausforderungen und -ansätze mit sich, aber das Team von Hoodie leistet Pionierarbeit bei den Techniken zur Lösung dieser Herausforderungen.

Offline First ist eine aufregende neue Herangehensweise an die App-Entwicklung in den frühen Stadien der Einführung. Es gibt noch viel zu tun, um die erforderlichen Techniken zu entwickeln. Sehen Sie sich hier an, wie Hoodie das macht.

Eine einfache App mit Hoodie

Um die Verwendung von Hoodie als Front-End-Entwicklungstool zu demonstrieren, entschied ich mich, eine einfache App zu schreiben, die es unseren Community-Mitgliedern ermöglichen würde, ihre eigenen Veranstaltungen zu erstellen und sie zu veröffentlichen, damit andere Ingenieure sie durchsuchen und zu ihrem Zeitplan hinzufügen können. Denken Sie daran, dass das Ziel hier darin besteht, Hoodie zu demonstrieren und keine produktionsreife App bereitzustellen. Sie finden den Code auf meiner GitHub-Seite.

Unter der Decke ist Hoodie im Wesentlichen die Kombination aus einer in NodeJS integrierten Serverseite und einer clientseitigen JavaScript-Bibliothek. Neben dem einfachen Installations- und Bereitstellungsprozess arbeitet der Entwickler, der an der App arbeitet, nur am clientseitigen Code. Die eingebaute Bibliothek kann mit der Serverseite kommunizieren, ohne dass der Entwickler etwas darüber weiß, wie sie funktioniert.

Was ist, wenn unsere App erfordert, dass wir etwas Benutzerdefiniertes auf dem Server tun? Wir können immer Hoodie-Plugins erstellen. Hier finden Sie weitere Informationen zu Plugins.

So starten Sie Ihre Hoodie-App

Der erste Schritt bei der Full-Stack-Entwicklung einer Hoodie-App besteht darin, das Hoodie-Befehlszeilentool zu verwenden, um uns auf den Weg zu bringen:

 hoodie new toptalCommunity

Dadurch wird eine initialisierte Hoodie-App erstellt, die bereits Code enthält, und wir können unsere App bereits ausführen! Wenn wir tippen

 cd toptalCommunity hoodie start

Der Browser öffnet sich mit einer Beispiel-App des Hoodie-Teams:

Ich habe an dieser Stelle ein wenig Haushalt gemacht. Hoodie-Apps werden derzeit mit Bootstrap und Prism geliefert, aber ich habe die bereitgestellten Versionen herausgenommen. Ich brauchte Prism nicht und wollte meine eigene Version von Bootstrap verwenden, damit ich die Schriftarten und JS verwenden konnte, die ich verwenden wollte. Ich habe beim Erstellen der App auch einige Änderungen an main.css vorgenommen, um ihr einen eigenen Stil zu geben und mein einfaches Bootstrap-Template zu ermöglichen. Ich habe jQuery nur für die DOM-Manipulation und Ereignisse verwendet. Hoodie kümmert sich um alles andere.

Hoodie und Dreamcode

Als ich an der Erstellung dieser Beispiel-App arbeitete, erkannte ich schnell alle Vorteile der Arbeit mit Hoodie. So viele der üblichen Fragen, die zu Beginn eines Projekts beantwortet werden müssen, waren einfach nicht da. Hoodie erlaubte mir, einfach Code zu schreiben und die App live und in Betrieb zu sehen.

Welche Strategie sollten wir für die Verwaltung von Benutzerkonten verwenden? Das Hoodie-Konto-Plugin ist die Antwort. Wie sollten wir unsere Daten im Backend speichern? Die tot einfache Speicher-API von Hoodie erledigt das für uns und gibt uns die Offline-First-Funktionalität kostenlos! Es war kein Aufwand erforderlich, um diese Hoodie-App offline zum Laufen zu bringen, sie funktioniert einfach.

Lassen Sie uns ein wenig tiefer in einige der Implementierungen eintauchen:.

Benutzerkontenverwaltung

Hoodie hat ein Plugin namens hoodie-plugin-users , das sich um die Kontoverwaltung für uns kümmert. Die API könnte nicht einfacher sein.

Wie fügen wir einen neuen Benutzer hinzu?

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

Wie melden wir einen Benutzer an?

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

Haben wir einen angemeldeten Benutzer?

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

Das könnte wirklich nicht einfacher sein. Oh warte und wie wird unsere Benutzeroberfläche auf all das reagieren? Hoodie hält Events für dich bereit

Reagieren Sie, wenn sich der Benutzer anmeldet:

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

Datenspeicher

Unsere Beispiel-App ermöglicht es Benutzern, ihre eigenen Ereignisse zu erstellen (private Daten) und sie zu veröffentlichen, wenn sie möchten (Daten öffentlich machen), damit andere Benutzer an dem Ereignis teilnehmen können.

Hoodie ermöglicht es uns, Daten zu seinem lokalen Speicher hinzuzufügen, ohne uns anzumelden. Woher weiß es also, zu welchem ​​​​Benutzer diese Daten gehören? Nun, es hält es lokal und wird nicht mit dem Server synchronisiert, bis sich dieser Benutzer angemeldet hat. Hoodie stellt auch sicher, dass nur dieser Benutzer auf diese Daten zugreifen kann.

So funktioniert es:

 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

So einfach ist das! Ok, das würde uns also helfen, ein Ereignis zu erstellen. Wie werden wir es mit anderen teilen? Hier hilft uns das global share plugin . Wir müssen es installieren, da es kein Standard-Plugin ist:

 hoodie install global-share

Jetzt haben wir das Plugin an Ort und Stelle, lass es uns verwenden! Wir müssen die Daten, die wir bereits zu unserem Benutzerspeicher hinzugefügt haben, im globalen Speicher veröffentlichen.

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

Dadurch werden alle für diesen Benutzer gespeicherten Ereignisse als öffentlich gekennzeichnet, sodass wir diese Daten als Ergebnis erhalten, wenn wir den globalen Speicher abfragen.

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

Auf der Seite Meine Veranstaltungen kann der Benutzer Veranstaltungen erstellen, die direkt im globalen Store veröffentlicht werden.

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

Veröffentlichte Ereignisse sind für alle sichtbar, sodass jetzt jeder Benutzer die auf der Seite „Ereignisse“ erstellten Ereignisse sehen kann.

Was ist also mit Daten, die nicht öffentlich sein sollten? Wir speichern die Veranstaltungen, für die sich unser Benutzer beworben hat, und zeigen sie auf der Seite „Veranstaltungen“ an. Wenn der Benutzer auf die Schaltfläche „Anwenden“ klickt, wird Folgendes ausgeführt:

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

Die beiden folgenden Screenshots zeigen zwei gleichzeitig laufende Browserfenster. Im ersten Browser ist der Benutzer als Benutzer a@aa angemeldet, der sich für das A-Event beworben hat. Im zweiten ist der Benutzer b@bb eingeloggt und hat sich bei B Event beworben.

Lange Abfrage

Indem wir einige von Hoodie bereitgestellte Ereignisse abonnieren, können wir Techniken wie lange Abfragen transparent verwenden, was unserer Anwendung eine interessante Funktion verleiht, da verschiedene Benutzer sie verwenden und daran zusammenarbeiten.

Das geht ganz einfach. In unserer Beispiel-App hat eine einzelne Zeile den Trick erledigt:

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

Diese einfache Zeile sorgt dafür, dass der Server lange abgefragt wird, um nach neuen Ereignissen zu suchen, die möglicherweise von anderen Benutzern hinzugefügt wurden, und fügt sie der Seite „Meine Ereignisse“ hinzu.

Einige Bedenken

Nachdem ich diese Beispiel-App zum Spielen mit Hoodie und seinen Front-End-App-Entwicklungsfunktionen erstellt habe, bin ich sehr gespannt auf das, was sie zu bieten hat. Allerdings sind mir ein paar klare Probleme aufgefallen.

Hoodie macht es dem Entwickler so einfach, mit dem Server zu kommunizieren, dass jeder Entwickler in der Lage wäre, Dinge zu unserer Datenbank hinzuzufügen, indem er einfach die Konsole verwendet, was eindeutig erhebliche Auswirkungen auf Sicherheit und Datenintegrität hat.

Der Bibliothek fehlen auch noch viele wesentliche Dinge, die Sie in jeder Produktionsanwendung benötigen würden, wie Datenvalidierung, verknüpfbare URLs, ein Testframework und privates Teilen von Daten (obwohl sie bei letzterem bereits gute Fortschritte machen). Um Hoodie jetzt in der Produktion zu verwenden, müssten wir es mit einer anderen Lösung wie AngularJS, Ember oder einer der vielen anderen Lösungen koppeln, die uns helfen sicherzustellen, dass wir richtig strukturierten und wartbaren JavaScript-Code für unsere Front-End-Projekte haben. Da diese Frameworks heutzutage selbst an die Komplexität von Back-End-Technologien heranreichen, würde diese Lösung den Zweck von Hoodie weitgehend zunichte machen.

Die Zukunft des Hoodies

Hoodie wird immer noch intensiv weiterentwickelt, um all diese Probleme zu lösen. Das Team arbeitet hart daran, neue Funktionen zu implementieren und bestehende zu verbessern, um die Plattform für den Massenkonsum bereit zu machen, und natürlich braucht dieser Prozess Zeit. Wenn Sie gerade eine neue umfassende App planen, möchten Sie vielleicht diesmal eine andere Plattform finden, auf der Sie sie aufbauen können.

In der Zwischenzeit ist es jedoch sicherlich nicht zu früh, mit Hoodie an der Entwicklung von Front-End-Apps zu basteln, wie ich hoffentlich gerade demonstriert habe. In Hoodie sind bereits viele starke neue Ideen integriert, von denen ich denke, dass sie sehr beliebt werden werden. Mit diesen Dingen einen Schritt voraus zu sein, ist wahrscheinlich keine schlechte Idee.

Wenn das Team von Hoodie die harte Arbeit fortsetzt, sollte die API in kürzester Zeit für die Hauptsendezeit bereit sein. Wenn Sie den Fortschritt des Hoodie-Teams verfolgen möchten, werfen Sie einfach einen Blick auf ihren Meilenstein-Tracker.

Hoodie verspricht, die Entwicklung großartiger Apps für Macher und Macher zum Kinderspiel zu machen. Wenn sich die Ideen, die Hoodie verkörpert, durchsetzen, sehen wir möglicherweise, dass die Notwendigkeit eines Teams von Back-End-Entwicklern für jedes neue Projekt der Vergangenheit angehört. Bei Projekten wie diesem kann man sich leicht ein goldenes Zeitalter für Frontend-Entwickler in nicht allzu ferner Zukunft vorstellen. In ähnlicher Weise sind die Vorteile, die das Offline-First-Ideal für Benutzer bietet, ein großer Schritt in Richtung Barrierefreiheit und erweitern die Reichweite unseres mobilen, vernetzten Lebensstils auf jene Orte, an denen das Internet selbst nicht verfügbar ist.

Gehen Sie zum Hoodie, um den Fortschritt von Hoodie zu verfolgen und ein Teil der aufregenden neuen Änderungen zu werden, die es einleiten wird.

Besonderer Dank geht an das Hoodie-Team. Das Hoodie-Logo wird mit Genehmigung des Hoodie Open Source Project verwendet