Hvis du ikke har hørt om Hoodie ennå, bør du sjekke det ut.

Hettegenser er et progressivt nytt bibliotek for front-end utviklere som vedtar noen bemerkelsesverdige nye filosofier som sannsynligvis vil forandre både apputvikling og brukeropplevelse. Hettegenser setter kontrollen over full stabel , front-end apputvikling helt i hendene på front-end-utviklerne og brukeropplevelsesguruer, frigjør dem fra de til tider ubeskrivelige tekniske innvendinger fra deres motstykker. I tillegg frigjør Hoodie-apper brukere fra sjaklene til avbruddsfri tilkobling, og lar dem bruke appen din mens du er på farten, i luften eller under sjøen, uten omsorg.

Mens plattformen fremdeles er i sin spede begynnelse, tilbyr den allerede noen kraftige nye verktøy som er verdt å prøve for enhver front-end-utvikler som ønsker å komme foran spillet. Teamet bak Hoodie har en bevist bakgrunn, etter å ha jobbet med andre svært vellykkede prosjekter som CouchDB, Async, Mustache.js og mange flere .

Etter å ha lært om hva Hoodie full stack-utviklingsbiblioteket har i arbeid og ble veldig begeistret for prosjektet, bestemte jeg meg for å prøve det selv. La meg fortelle deg litt mer om Hoodie, og vise deg noe av potensialet det har for å utvikle flotte apper.

Hva er hettegenser?

Først av alt, hva er hettegenser? Hva er så bra med det? Hoodie er en åpen kildekode, JavaScript-plattform og API som kombinerer flere kraftige nye paradigmer i en full stack-utviklingspakke, til fordel for både utviklerne som bygger Hoodie-apper og sluttbrukerne som kommuniserer med dem. Hoved blant disse konseptene er 'noBackend' og 'Offline First' bevegelser, sammen med en sterk samfunnsdrevet prosess kjent som 'Dreamcode' for å bygge ut API.

noBackend

Hettegenser tror nøkkelen til flott front-end app utvikling ligger i hendene på brukeropplevelsesekspertene og utviklerne som vet hvordan man får en app til å se bra ut og være en glede å bruke, men som for ofte er begrenset av back-end-teknologier som de ikke har kontroll over. Grunnleggende serverinteraksjoner som har eksistert for alltid, som brukerregistrering / pålogging, datalagring eller e-postforsendelse, fortsetter å kreve tidkrevende tilpassede implementeringer for hver nye app, og tvinger frontend-utvikleren til å lære og kode for ny back- avslutte quirks hver gang.

noBackend betyr at du ikke trenger en back-end-utvikler!

Hettegenser setter kontrollen i hendene på frontdesigneren og utvikleren, ved å trekke bort bakenden helt. Med Hoodie front-end app-utvikling, i stedet for å bekymre deg for serversiden din, er alt du trenger å bekymre deg for, den enkle, lettlærbare og implementerende front-end-APIen innebygd i Hoodie. Vil du for eksempel registrere en ny bruker? Dette kan gjøres i en kodelinje:

hoodie.account.signUp(username, password);

Dette er ideen bak noBackend initiativ, som Hoodie er fullt forpliktet til. noBackend betyr at du ikke trenger en back-end-utvikler! Bare distribuer Hoodie-bakenden til serveren din, og glem det .

Hettegenser er skrevet helt i JavaScript. Dens selvstendige back-end bruker Node.JS med Apache CouchDB som sin database. I skrivende stund har kjernefunksjonene Hoodie allerede har implementert, inkludert brukerregistrering og administrasjon, datainnlasting, lagring og e-post. Disse kjernefunksjonene kan enkelt utvides ved å legge til flere Node.js-plugins.

Dreamcode

Hoodie er en API først og fremst - det er dette som gjør noBackend mulig. Hoodie-implementeringen kan endres og forbedres over tid, men grensesnittet som gis til utviklere vil forbli det samme, slik at du aldri trenger å bekymre deg for det.

Hettegenser vokser fortsatt raskt, og nye funksjoner blir lagt til hele tiden. Hoodie, i likhet med andre noBackend-prosjekter, bruker en fellesskapsdrevet tilnærming til å designe API-en som heter Dreamcode . I hovedsak drømmer du opp koden du ville gjort som å skrive, og hvis det får nok støtte fra samfunnet, vil Hoodie få det til å skje.

Denne API-første, store tilnærmingen til design av Hoodie API betyr at Hoodie-kode er en lek å skrive og en lek å lese. Det er drømmekoden din!

Frakoblet først

Hoodie løser mange problemer for front-end app-utviklere med sin noBackend, Dreamcode-drevne API. Men et av Hoodie's primære mål er å løse et stort problem også for brukerne - deres ofte lammende avhengighet av tilkobling.

Etter hvert som skiftet til mobile enheter med mobilapper fortsetter, har den gamle skrivebordsbaserte antagelsen om kontinuerlig tilkobling vært uendret. Hele denne tiden har løftet vært at internett vil være der hvor du går. Til denne dag blir tap av tilkobling behandlet som en anomali, som stenger brukernes mulighet til å få gjort noe til de er tilbake på nettet. Men som vi alle vet, har telenett ikke klarte å innfri dette løftet. Tilkobling går ut av vinduet på fly, i undergrunnsbaner, på landlige veier og i utallige andre situasjoner. Og det er i de utviklede deler av verden! I store områder av planeten er stabil internettilgang sjeldent unntak fra regelen .

De Frakoblet først bevegelse søker en grasiøs harmonisering med dette enkle faktum i livet. Med frakoblet først er ikke-tilkobling bare en annen normal tilstand for applikasjonen. Det er faktisk standardtilstanden! Hettegenser adopterer entusiastisk denne filosofien. Bak API-en er en fullstendig implementering av midlertidig lokal lagring og automatisk, grasiøs synkronisering når en tilkobling blir tilgjengelig.

Med Hoodie kan du legge ut kommentarer, sende e-post, redigere kontoer og gjøre mest mulig annen hverdagsaktivitet, uten å bekymre deg for å ha en forbindelse. Hele lagrings- og synkroniseringssystemet kan avbrytes når som helst, uten frykt for å miste data.

Selvfølgelig kommer denne modellen med sitt eget sett med unike designutfordringer og tilnærminger , men teamet på Hoodie er banebrytende for teknikkene for å løse disse utfordringene.

Offline First er et spennende nytt inntrykk på apputvikling, i sine tidlige stadier av adopsjon. Det er fortsatt mye å gjøre for å utvikle de nødvendige teknikkene. Ta en titt her for å se hvordan Hoodie gjør det.

En enkel app med hettegenser

For å demonstrere bruken av Hoodie som et front-end utviklingsverktøy, bestemte jeg meg for å skrive en enkel app som gjør det mulig for medlemmene i samfunnet å lage sine egne arrangementer og publisere dem for andre ingeniører å bla gjennom og legge til i timeplanen. Husk at målet her er å demonstrere hettegenser og ikke tilby en app som er produksjonsklar. Du finner koden på GitHub-siden min .

Under dekslene er Hoodie egentlig kombinasjonen av en serverside innebygd i NodeJS og et JavaScript-bibliotek på klientsiden. I tillegg til den enkle installasjons- og distribusjonsprosessen, vil utvikleren som jobber med appen bare jobbe med klientsiden. Det innebygde biblioteket kan snakke med serversiden uten at utvikleren vet noe om hvordan det fungerer.

Hva om appen vår krever at vi gjør noe tilpasset på serveren? Vi kan alltid lage Hoodie-plugins. Her er litt mer informasjon om plugins .

Komme i gang din Hoodie-app

Det første trinnet med full stack-utvikling av en hvilken som helst Hoodie-app er å bruke Hoodie-kommandolinjeverktøyet for å komme oss av bakken:

hoodie new toptalCommunity

Dette vil opprette en initialisert Hoodie-app som allerede har litt kode på plass, og vi kan allerede kjøre appen vår! Hvis vi skriver

cd toptalCommunity hoodie start

nettleseren åpner seg med en prøve-app fra Hoodie-teamet:

Jeg gjorde litt rengjøring på dette tidspunktet. Hoodie-apper kommer for tiden med Bootstrap og Prism, men jeg tok de medfølgende versjonene ut. Jeg trengte ikke prisme og ønsket å bruke min egen versjon av Bootstrap slik at jeg kunne bruke skriftene og JS som jeg ønsket å bruke. Jeg gjorde også noen endringer i main.css da jeg bygget appen, for å gi den sin egen stil og for å tillate min enkle bootstrap-mal. Jeg brukte bare jQuery for DOM-manipulering og hendelser. Hettegenser tar seg av alt annet.

Hettegenser og Dreamcode

Da jeg jobbet med å lage denne prøveappen, skjønte jeg raskt alle fordelene ved å jobbe med hettegenser. Så mange av de vanlige spørsmålene som trenger svar når du starter et prosjekt, var bare ikke der. Hettegenser tillot meg å bare skrive kode og se appen live og i arbeid.

Hvilken strategi skal vi bruke for brukerkontoadministrasjon? Hoodie-konto-plugin er svaret. Hvordan skal vi lagre dataene våre på backend? Hoodie's dead simple storage API håndterer det for oss, og gir oss Offline First-funksjonaliteten gratis! Ingen innsats var nødvendig for å få denne Hoodie-appen til å fungere offline, den fungerer bare.

La oss dykke litt dypere over noe av implementeringen :.

Brukerkontostyring

Hoodie har et plugin som tar seg av kontoadministrasjon for oss ringt hoodie-plugin-users . API-et kan ikke være enklere.

Hvordan legger vi til en ny bruker?

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

Hvordan logger vi inn en bruker?

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

Har vi en bruker logget inn?

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

Dette kan virkelig ikke være enklere. Å vent, og hvordan skal brukergrensesnittet vårt reagere på alt dette? Hoodie har arrangementer i butikken for deg

Reager når brukeren logger på:

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

Datalagring

Eksempelappen vår vil tillate brukere å lage sine egne hendelser (private data) og publisere dem hvis de vil (gjøre data offentlige), slik at andre brukere kan bli med på arrangementet.

Hoodie lar oss legge til data i sin lokale butikk uten å logge inn, så hvordan vet den hvilken bruker disse dataene tilhører? Det holder det lokalt og synkroniseres ikke med serveren før brukeren har logget på. Hoodie vil også sørge for at bare brukeren er i stand til å komme til disse dataene.

Så her er hvordan det fungerer:

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

Det er så enkelt! Ok, så det vil hjelpe oss med å lage en begivenhet, hvordan vil vi dele den med andre? Dette er hvor global share plugin vil hjelpe oss. Vi må installere det, da det ikke er et standardtillegg:

hoodie install global-share

Nå har vi pluginet på plass, la oss bruke det! Vi må publisere dataene vi allerede har lagt til i brukerbutikken vår til den globale butikken.

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

Dette vil markere alle hendelsene som er lagret for denne brukeren som offentlige, slik at når vi spør etter den globale butikken, får vi disse dataene som resultat.

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

På siden Mine hendelser kan brukeren opprette hendelser som blir publisert i den globale butikken direkte.

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

Publiserte hendelser er synlige for alle, så nå kan enhver bruker se hendelsene som er opprettet på hendelsessiden.

Så hva med data som ikke skal være offentlige? Vi lagrer hendelsene brukeren har søkt på, og viser det på hendelsessiden. Når brukeren klikker på bruk-knappen, utføres dette:

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

De to skjermbildene nedenfor viser to nettleservinduer som kjører samtidig. I den første nettleseren er brukeren logget inn som bruker [e-postbeskyttet] som har søkt på Et arrangement . I det andre, brukeren [e-postbeskyttet] er logget inn og har søkt på B Arrangement .

Lang avstemning

Ved å abonnere på noen arrangementer levert av Hoodie, kan vi gjennomsiktig bruke teknikker som lang avstemning som gir applikasjonen vår en interessant funksjon ettersom forskjellige brukere bruker og samarbeider om den.

Dette er veldig enkelt å gjøre. På prøveappen vår fikk en enkelt linje trikset gjort:

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

Den enkle linjen vil ta vare på lang avstemning på serveren for å se etter nye hendelser som kan ha blitt lagt til av andre brukere, og legge dem til på Mine hendelser-siden.

Noen bekymringer

Etter å ha bygget denne prøveappen for å leke med Hoodie og dens app-utviklingsfunksjoner, er jeg veldig spent på hva den har å tilby. Imidlertid stod noen få klare problemer for meg.

Hoodie gjør det så enkelt for utvikleren å kommunisere med serveren at enhver utvikler vil være i stand til å legge til ting i databasen vår bare ved å bruke konsollen, som helt klart har store sikkerhets- og dataintegritetsimplikasjoner.

Biblioteket mangler fortsatt mange viktige ting du trenger i en hvilken som helst produksjonsapp, som datavalidering, koblingsbare URL-er, et testrammeverk og privat deling av data (selv om de allerede gjør gode fremskritt på denne siste ). For å bruke Hoodie i produksjon akkurat nå, må vi koble den med en annen løsning som AngularJS, Ember eller noen av de mange andre løsningene som hjelper oss med å sørge for at vi har riktig strukturert og vedlikeholdbar JavaScript-kode for våre Front-End-prosjekter. Siden disse rammene selv nærmer seg kompleksiteten i back-end-teknologier i disse dager, vil denne løsningen i stor grad beseire Hoodie-formålet.

Fremtiden for hettegenser

Hettegenser er fortsatt i sterk utvikling for å løse alle disse problemene. Teamet jobber hardt for å implementere nye funksjoner og forbedre eksisterende for å gjøre plattformen klar for masseforbruk, og selvfølgelig tar denne prosessen tid. Hvis du planlegger en ny fullskala-app akkurat nå, vil du kanskje finne en annen plattform for å bygge den på denne gangen.

I mellomtiden er det absolutt ikke for tidlig å begynne å fikle med app-utvikling ved hjelp av Hoodie, som jeg håper jeg nettopp har demonstrert. Det er mange kraftige nye ideer som allerede er innebygd i Hoodie, som jeg tror sannsynligvis vil bli veldig populære. Å komme foran spillet med disse tingene er sannsynligvis ikke en dårlig idé.

Hvis teamet på Hoodie fortsetter det harde arbeidet, bør API-en være klar for prime time på kort tid. Hvis du vil holde rede på Hoodie-teamets fremgang, er det bare å ta en titt på dem milepælsporing .

Hettegenser lover å gjøre utviklingen av flotte apper for movers og shakers til en lek. Hvis ideene Hoodie legemliggjør fange på, kan vi se behovet for et team av back-end-utviklere for hvert nye prosjekt blir en saga blott. Med prosjekter som dette er det lett å forestille seg en gullalder for frontend-utviklere i en ikke altfor fjern fremtid. Tilsvarende er fordelene for brukere som tilbys av Offline First-idealet et stort skritt for tilgjengelighet, og utvider rekkevidden til vår mobile, tilkoblede livsstil til de stedene hvor internett ikke går.

Gå over til Hettegenser hjemmeside å følge Hoodies fremgang, og å bli en del av de spennende nye endringene den forbereder seg på å innlede.

---

Spesiell takk til Hoodie-teamet. Hettegenser-logo brukt med tillatelse fra Hoodie Open Source Project