Presentazione di Hoodie: sviluppo full stack per sviluppatori front-end

Se non hai ancora sentito parlare di Hoodie, dovresti dare un'occhiata.

Hoodie è una nuova libreria progressiva per sviluppatori front-end che adotta alcune nuove straordinarie filosofie che probabilmente trasformeranno sia lo sviluppo delle app che l'esperienza dell'utente. Hoodie mette il controllo sull'intero stack, lo sviluppo di app front-end completamente nelle mani degli sviluppatori front-end e dei guru dell'esperienza utente, liberandoli dalle obiezioni tecniche a volte imperscrutabili delle loro controparti back-end. Inoltre, le app Hoodie liberano gli utenti dalle catene della connettività ininterrotta, consentendo loro di utilizzare la tua app in movimento, in aria o sotto il mare, senza preoccupazioni.

Sebbene la piattaforma sia ancora agli inizi, offre già alcuni nuovi potenti strumenti che vale la pena provare per qualsiasi sviluppatore front-end che vuole anticipare il gioco. Il team dietro Hoodie ha una comprovata esperienza, avendo lavorato su altri progetti di grande successo come CouchDB, Async, Moustache.js e molti altri.

Dopo aver appreso ciò che la libreria di sviluppo dello stack completo di Hoodie ha in lavorazione ed essere molto entusiasta del progetto, ho deciso di provarlo di persona. Lascia che ti dica qualcosa in più su Hoodie e ti mostri alcune delle potenzialità che ha per lo sviluppo di fantastiche app.

Cos'è la felpa con cappuccio?

Prima di tutto, cos'è la felpa con cappuccio? Cosa c'è di così bello? Hoodie è una piattaforma e un'API open source completamente JavaScript che combina diversi nuovi e potenti paradigmi in un pacchetto di sviluppo stack completo, a vantaggio sia degli sviluppatori che creano app Hoodie, sia degli utenti finali che interagiscono con esse. I principali tra questi concetti sono i movimenti "noBackend" e "Offline First", insieme a un forte processo guidato dalla comunità noto come "Dreamcode" per la creazione dell'API.

noBackend

Hoodie crede che la chiave per un ottimo sviluppo di app front-end risieda nelle mani degli esperti di esperienza utente e degli sviluppatori che sanno come rendere un'app fantastica ed essere un piacere da usare, ma che troppo spesso sono limitati da tecnicismi di back-end su cui non hanno alcun controllo. Le interazioni fondamentali con il server che esistono da sempre, come la registrazione/accesso degli utenti, l'archiviazione dei dati o l'invio di e-mail, continuano a richiedere implementazioni personalizzate dispendiose in termini di tempo per ogni nuova app, costringendo lo sviluppatore front-end a imparare e programmare per il nuovo back- porre fine alle stranezze ogni volta.

La felpa con cappuccio riporta il controllo nelle mani del designer e dello sviluppatore front-end, astraendo completamente il back-end. Con lo sviluppo dell'app front-end di Hoodie, invece di preoccuparti del tuo lato server, tutto ciò di cui devi preoccuparti è l'API front-end semplice, facile da imparare e da implementare integrata in Hoodie. Ad esempio, vuoi iscrivere un nuovo utente? Questo può essere fatto in una riga di codice:

 hoodie.account.signUp(username, password);

Questa è l'idea alla base dell'iniziativa noBackend, in cui Hoodie è pienamente impegnata. noBackend significa che non hai bisogno di uno sviluppatore back-end! Distribuisci semplicemente il back-end Hoodie sul tuo server e non pensarci più .

La felpa con cappuccio è scritta interamente in JavaScript. Il suo back-end autonomo utilizza Node.JS con Apache CouchDB come database. In questo momento, le funzionalità principali che Hoodie ha già implementato includono la registrazione e l'amministrazione degli utenti, il caricamento dei dati, l'archiviazione e le e-mail. Queste funzionalità principali possono essere facilmente estese aggiungendo ulteriori plug-in Node.js.

Codice dei sogni

Hoodie è prima di tutto un'API: questo è ciò che rende possibile noBackend. L'implementazione di Hoodie potrebbe cambiare e migliorare nel tempo, ma l'interfaccia fornita agli sviluppatori rimarrà la stessa, così non dovrai mai preoccupartene.

La felpa con cappuccio sta ancora crescendo rapidamente e vengono aggiunte continuamente nuove funzionalità. Hoodie, come altri progetti noBackend, utilizza un approccio guidato dalla community alla progettazione dell'API chiamato Dreamcode. In sostanza, sogni il codice che vorresti scrivere e, se riceve abbastanza supporto dalla community, Hoodie lo realizzerà.

Questo approccio basato sul crowdsourcing per la progettazione dell'API Hoodie significa che il codice di Hoodie è un gioco da ragazzi da scrivere e da leggere. È il codice dei tuoi sogni!

Prima offline

Hoodie risolve molti problemi per gli sviluppatori di app front-end con la sua API noBackend, basata su Dreamcode. Ma uno degli obiettivi primari di Hoodie è risolvere anche un grave problema per gli utenti: la loro spesso paralizzante dipendenza dalla connettività.

Con il passaggio ai dispositivi mobili con app mobili, il vecchio presupposto basato su desktop di connettività continua è rimasto invariato. Per tutto questo tempo, la promessa è stata che ovunque tu vada, Internet sarà lì. Fino ad oggi, la perdita di connettività è considerata un'anomalia, in quanto interrompe la capacità degli utenti di fare qualsiasi cosa fino a quando non sono di nuovo online. Ma come tutti sappiamo, la rete di telecomunicazioni non è riuscita a mantenere questa promessa. La connettività va fuori dalla finestra sugli aerei, nelle metropolitane, sulle strade rurali e in innumerevoli altre situazioni. E questo è nelle parti sviluppate del mondo! In vaste aree del pianeta, l'accesso stabile a Internet è la rara eccezione alla regola.

Il movimento Offline First cerca un'armoniosa armonizzazione con questo semplice fatto della vita. Con Offline First, la non connettività è solo un altro stato normale dell'applicazione. In effetti è lo stato predefinito! Hoodie adotta con entusiasmo questa filosofia. Dietro l'API c'è un'implementazione front-end completa dell'archiviazione locale temporanea e una sincronizzazione automatica e regolare ogni volta che una connessione diventa disponibile.

Con Hoodie puoi pubblicare commenti, inviare e-mail, modificare account e svolgere la maggior parte delle altre attività quotidiane, senza preoccuparti di avere una connessione. L'intero sistema di archiviazione e sincronizzazione può essere interrotto in qualsiasi momento, senza timore di perdere dati.

Naturalmente, questo modello viene fornito con una serie di sfide e approcci di design unici, ma il team di Hoodie sta sperimentando le tecniche per risolvere queste sfide.

Offline First è una nuova entusiasmante interpretazione dello sviluppo di app, nelle sue prime fasi di adozione. C'è ancora molto da fare per sviluppare le tecniche richieste. Dai un'occhiata qui per vedere come funziona Hoodie.

Una semplice app che utilizza felpa con cappuccio

Per dimostrare l'utilizzo di Hoodie come strumento di sviluppo front-end, ho deciso di scrivere una semplice app che consentisse ai membri della nostra community di creare i propri eventi e pubblicarli affinché altri ingegneri li sfogliassero e li aggiungessero al loro programma. Tieni presente che l'obiettivo qui è dimostrare Hoodie e non fornire un'app pronta per la produzione. Puoi trovare il codice sulla mia pagina GitHub.

Sotto le coperte Hoodie è essenzialmente la combinazione di un lato server integrato in NodeJS e una libreria JavaScript lato client. Oltre al semplice processo di installazione e distribuzione, lo sviluppatore che lavora sull'app lavorerà solo sul codice lato client. La libreria integrata può parlare con il lato server senza che lo sviluppatore sappia nulla di come funziona.

Cosa succede se la nostra app ci richiede di fare qualcosa di personalizzato sul server? Possiamo sempre creare plugin per Hoodie. Ecco qualche informazione in più sui plugin.

Come avviare la tua app con cappuccio

Il primo passo con lo sviluppo dello stack completo di qualsiasi app Hoodie è utilizzare lo strumento da riga di comando Hoodie per farci decollare:

 hoodie new toptalCommunity

Questo creerà un'app Hoodie inizializzata che ha già del codice in atto e possiamo già eseguire la nostra app! Se scriviamo

 cd toptalCommunity hoodie start

il browser si aprirà con un'app di esempio del team di Hoodie:

Ho fatto un po' di pulizie a questo punto. Le app con cappuccio attualmente vengono fornite con Bootstrap e Prism, ma ho eliminato le versioni fornite. Non avevo bisogno di Prism e volevo usare la mia versione di Bootstrap in modo da poter usare i caratteri e JS che volevo usare. Ho anche apportato alcune modifiche a main.css durante la creazione dell'app, per darle il suo stile e per consentire il mio semplice modello di bootstrap. Ho usato jQuery solo per la manipolazione e gli eventi DOM. Hoodie si occupa di tutto il resto.

Felpa con cappuccio e Dreamcode

Mentre stavo lavorando alla creazione di questa app di esempio, ho subito capito tutti i vantaggi di lavorare con Hoodie. Così tante delle domande regolari a cui è necessario rispondere quando si avvia un progetto semplicemente non c'erano. Felpa con cappuccio mi ha permesso di scrivere codice e vedere l'app in diretta e funzionante.

Quale strategia dovremmo utilizzare per la gestione dell'account utente? Il plugin dell'account Hoodie è la risposta. Come dovremmo archiviare i nostri dati sul back-end? L'API di archiviazione semplicissima di Hoodie lo gestisce per noi, offrendoci la funzionalità Offline First gratuitamente! Non è stato necessario alcuno sforzo per far funzionare questa app con cappuccio offline, funziona e basta.

Diamo un'occhiata un po' più a fondo su alcune delle implementazioni:.

Gestione dell'account utente

Hoodie ha un plug-in che si occupa della gestione dell'account per noi chiamato hoodie-plugin-users . L'API non potrebbe essere più semplice.

Come si aggiunge un nuovo utente?

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

Come accediamo un utente?

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

Abbiamo un utente registrato?

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

Questo non potrebbe essere più semplice. Oh aspetta e come reagirà la nostra interfaccia utente a tutto ciò? Hoodie ha eventi in serbo per te

Reagisci quando l'utente effettua l'accesso:

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

Archivio dati

La nostra app di esempio consentirà agli utenti di creare i propri eventi (dati privati) e pubblicarli se lo desiderano (rendendo i dati pubblici), in modo che altri utenti possano partecipare all'evento.

Hoodie ci consente di aggiungere dati al suo negozio locale senza effettuare l'accesso, quindi come fa a sapere a quale utente appartengono questi dati? Bene, lo mantiene locale e non si sincronizzerà con il server fino a quando l'utente non avrà effettuato l'accesso. Hoodie si assicurerà anche che solo quell'utente sia in grado di accedere a quei dati.

Quindi ecco come funziona:

 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

È così semplice! Ok, quindi questo ci aiuterebbe a creare un evento, come lo condivideremo con gli altri? È qui che il global share plugin ci aiuterà. Dobbiamo installarlo in quanto non è un plug-in predefinito:

 hoodie install global-share

Ora abbiamo il plugin in atto, usiamolo! Dobbiamo pubblicare i dati che abbiamo già aggiunto al nostro negozio utente nel negozio globale.

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

Questo contrassegnerà tutti gli eventi salvati per questo utente come pubblici in modo che quando interroghiamo l'archivio globale otterremo quei dati come risultato.

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

Nella pagina I miei eventi, l'utente può creare eventi che vengono pubblicati direttamente nel negozio globale.

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

Gli eventi pubblicati sono visibili a tutti, quindi ora qualsiasi utente può vedere gli eventi creati nella pagina Eventi.

Quindi che dire dei dati che non dovrebbero essere pubblici? Archiviamo gli eventi a cui il nostro utente si è applicato e li mostriamo nella pagina Eventi. Quando l'utente fa clic sul pulsante Applica, questo è ciò che viene eseguito:

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

I due screenshot seguenti mostrano due finestre del browser in esecuzione contemporaneamente. Nel primo browser, l'utente ha effettuato l'accesso come utente a@aa che ha fatto domanda all'evento A. Nella seconda, l'utente b@bb è loggato e ha applicato a B Event .

Sondaggio lungo

Iscrivendoci ad alcuni eventi forniti da Hoodie possiamo utilizzare in modo trasparente tecniche come il lungo polling che offre alla nostra applicazione una funzionalità interessante poiché diversi utenti la utilizzano e collaborano su di essa.

Questo è davvero facile da fare. Sulla nostra app di esempio una singola riga ha fatto il trucco:

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

Quella semplice riga si occuperà del lungo polling del server per verificare la presenza di nuovi eventi che potrebbero essere stati aggiunti da altri utenti e aggiungerli alla pagina I miei eventi.

Alcune preoccupazioni

Dopo aver creato questa app di esempio per giocare con Hoodie e le sue funzionalità di sviluppo di app front-end, sono molto entusiasta di ciò che ha da offrire. Tuttavia, alcuni problemi chiari mi hanno colpito.

Hoodie rende così facile per lo sviluppatore comunicare con il server che qualsiasi sviluppatore sarebbe in grado di aggiungere elementi al nostro database semplicemente utilizzando la console, il che ha chiaramente importanti implicazioni sulla sicurezza e sull'integrità dei dati.

Alla libreria mancano ancora molte cose essenziali di cui avresti bisogno in qualsiasi app di produzione, come la convalida dei dati, gli URL collegabili, un framework di test e la condivisione privata dei dati (sebbene stiano già facendo buoni progressi su quest'ultima). Per utilizzare Hoodie in produzione in questo momento, dovremmo accoppiarlo con un'altra soluzione come AngularJS, Ember o una qualsiasi delle tante altre soluzioni che ci aiutano ad assicurarci di avere un codice JavaScript adeguatamente strutturato e manutenibile per i nostri progetti front-end. Dal momento che questi framework si stanno avvicinando alla complessità delle tecnologie di back-end in questi giorni, questa soluzione vanificherebbe ampiamente lo scopo di Hoodie.

Il futuro della felpa con cappuccio

La felpa con cappuccio è ancora in fase di forte sviluppo per risolvere tutti questi problemi. Il team sta lavorando duramente per implementare nuove funzionalità e migliorare quelle esistenti al fine di rendere la piattaforma pronta per il consumo di massa e, naturalmente, questo processo richiede tempo. Se stai pianificando una nuova app su vasta scala in questo momento, potresti voler trovare una piattaforma diversa su cui costruirla questa volta.

Nel frattempo, tuttavia, non è certo troppo presto per iniziare ad armeggiare con lo sviluppo di app front-end utilizzando Hoodie, come spero di aver appena dimostrato. Ci sono molte nuove idee potenti già integrate in Hoodie, che penso possano diventare molto popolari. Andare avanti con queste cose probabilmente non è una cattiva idea.

Se il team di Hoodie continua il duro lavoro, l'API dovrebbe essere pronta per la prima serata in men che non si dica. Se vuoi tenere traccia dei progressi del team Hoodie, dai un'occhiata al loro tracker traguardo.

Felpa con cappuccio promette di rendere lo sviluppo di fantastiche app per motori e agitatori un gioco da ragazzi. Se le idee incarnate da Hoodie prenderanno piede, potremmo vedere la necessità di un team di sviluppatori back-end per ogni nuovo progetto diventare un ricordo del passato. Con progetti come questo, è facile immaginare un'età dell'oro per gli sviluppatori front-end in un futuro non troppo lontano. Allo stesso modo, i vantaggi offerti agli utenti dall'ideale Offline First rappresentano un enorme passo avanti verso l'accessibilità, estendendo la portata del nostro stile di vita mobile e connesso a quei luoghi dove Internet stesso non va.

Vai alla felpa con cappuccio per seguire i progressi di Hoodie e per entrare a far parte dei nuovi entusiasmanti cambiamenti che si sta preparando a introdurre.

Un ringraziamento speciale al team di Hoodie. Logo della felpa con cappuccio utilizzato con il permesso del progetto Hoodie Open Source