Jos et ole vielä kuullut Hupparista, kannattaa tarkistaa se.

Huppari on progressiivinen uusi kirjasto etupään kehittäjät joka omaksuu joitain merkittäviä uusia filosofioita, jotka todennäköisesti muuttavat sekä sovelluskehitystä että käyttökokemusta. Huppari antaa hallinnan täysi pino , käyttöliittymän sovelluskehitys kokonaan käyttöliittymän kehittäjien ja käyttäjäkokemuksen gurujen käsissä, vapauttamalla heidät taustakumppaniensa toisinaan käsittelemättömistä teknisistä vastaväitteistä. Lisäksi Hupparisovellukset vapauttavat käyttäjät keskeytymättömien yhteyksien kahleista ja antavat heidän käyttää sovellustasi tien päällä, ilmassa tai meren alla ilman huolta.

Alusta on vielä lapsenkengissään, mutta se tarjoaa jo joitain tehokkaita uusia työkaluja, jotka kannattaa kokeilla jokaiselle käyttöliittymäkehittäjälle, joka haluaa päästä eteenpäin pelistä. Hoodien takana olevalla tiimillä on todistettu tausta, joka on työskennellyt muissa erittäin onnistuneissa projekteissa, kuten CouchDB, Async, Mustache.js ja monta lisää .

Saatuani tietää, mitä Hoodie full stack -kirjastossa on töissä, ja innostunut projektista, päätin kokeilla sitä itse. Haluan kertoa sinulle hieman enemmän hupparista ja näyttää sinulle potentiaalia hienojen sovellusten kehittämiseen.

Mikä on huppari?

Ensinnäkin, mikä on huppari? Mikä siinä on niin hienoa? Huppari on avoimen lähdekoodin, täysin JavaScriptiä käyttävä alusta ja sovellusliittymä, joka yhdistää useita tehokkaita uusia paradigmoja yhteen täyden pinon kehityspakettiin hyödyksi sekä Hoodie-sovelluksia rakentaville kehittäjille että heidän kanssaan vuorovaikutuksessa oleville loppukäyttäjille. Tärkeimmät näistä käsitteistä ovat 'noBackend' ja 'Offline First' -liikkeet sekä vahva yhteisövetoinen prosessi, joka tunnetaan nimellä 'Dreamcode' API: n rakentamiseksi.

noBackend

Huppari uskoo avaimen hyvään etupään sovelluskehitys on käyttäjäkokemuksen asiantuntijoiden ja kehittäjien käsissä, jotka osaavat tehdä sovelluksesta hyvännäköisen ja miellyttävän käyttää, mutta joita liian usein rajoittavat taustajärjestelmät, joita he eivät voi hallita. Perinteiset palvelinten vuorovaikutukset, jotka ovat olleet ikuisesti, kuten käyttäjien rekisteröityminen / kirjautuminen, tietojen tallennus tai sähköpostin lähettäminen, edellyttävät edelleen aikaa vieviä mukautettuja toteutuksia jokaiselle uudelle sovellukselle, pakottaen käyttöliittymän kehittäjän oppimaan ja koodaamaan uusia taustoja loppuvinkkejä joka kerta.

noBackend tarkoittaa, että et tarvitse taustakehittäjää!

Huppari antaa ohjauksen takaisin käyttöliittymäsuunnittelijan ja -kehittäjän käsiin abstraktioimalla taustakuvan kokonaan pois. Hoodie-käyttöliittymän kehityksen avulla sinun ei tarvitse huolehtia palvelinpuolestasi vaan vain yksinkertainen, helposti opittava ja toteutettava huppuun sisäänrakennettu käyttöliittymä-sovellusliittymä. Haluatko esimerkiksi rekisteröidä uuden käyttäjän? Tämä voidaan tehdä yhdellä rivillä koodia:

hoodie.account.signUp(username, password);

Tämä on idea noBackend aloite, johon Hoodie on täysin sitoutunut. noBackend tarkoittaa, että et tarvitse taustakehittäjää! Ota vain käyttöön huppari-palvelin palvelimellesi, ja unohda se .

Huppari on kirjoitettu kokonaan JavaScriptiä. Sen itsenäinen taustakäyttö Solmu.JS kanssa Apache CouchDB sen tietokantana. Tässä kirjoituksessa Hoodie on jo toteuttanut ydinominaisuuksia, kuten käyttäjien rekisteröinti ja hallinta, tietojen lataaminen, tallennus ja sähköpostit. Nämä ydinominaisuudet voidaan helposti laajentaa lisäämällä lisää Node.js-laajennuksia.

Unelmakoodi

Huppari on ennen kaikkea API - tämä tekee noBackendistä mahdollisen. Hupparin toteutus voi muuttua ja parantua ajan myötä, mutta kehittäjille tarkoitettu käyttöliittymä pysyy samana, joten sinun ei tarvitse koskaan huolehtia siitä.

Huppari kasvaa edelleen nopeasti, ja uusia ominaisuuksia lisätään koko ajan. Huppari, kuten muut noBackend-projektit, käyttää yhteisölähtöistä lähestymistapaa kutsutun API: n suunnittelussa Unelmakoodi . Pohjimmiltaan haaveilet koodin, jonka haluaisit Kuten kirjoittaa, ja jos se saa tarpeeksi tukea yhteisöltä, Hoodie saa sen tapahtumaan.

Tämä API: n ensimmäinen, joukosta hankittu lähestymistapa Hoodie-sovellusliittymän suunnitteluun tarkoittaa, että Hoodie-koodi on helppoa kirjoittaa ja helppo lukea. Se on unelmiesi koodi!

Offline ensin

Huppari ratkaisee paljon ongelmia käyttöliittymän kehittäjille noBackend, Dreamcode -pohjaisen sovellusliittymän avulla. Mutta yksi Hoodien ensisijaisista tavoitteista on ratkaista suuri ongelma myös käyttäjille - heidän usein lamauttavan riippuvuutensa liitettävyydestä.

Kun siirtyminen mobiilisovelluksiin, joissa on mobiilisovelluksia, jatkuu, vanha työpöytäpohjainen oletus jatkuvasta yhteydestä on pysynyt muuttumattomana. Koko tämän ajan lupaus on ollut, että minne menetkin, Internet on siellä. Tähän päivään mennessä yhteyden katoamista pidetään poikkeavuutena, joka sulkee käyttäjien mahdollisuuden tehdä mitä tahansa, kunnes he ovat taas verkossa. Mutta kuten me kaikki tiedämme, televerkko ei ole onnistunut täyttämään tätä lupausta. Yhteydet menevät ulos ikkunasta lentokoneissa, metroissa, maaseututeillä ja lukemattomissa muissa tilanteissa. Ja se on kehittyneissä osissa maailmaa! Valtavilla alueilla planeetalla vakaa Internet-yhteys on harvinainen poikkeus säännöstä .

Offline ensin liike etsii sulavaa harmoniaa tämän yksinkertaisen elämän tosiasian kanssa. Offline First -ominaisuuden avulla yhteyden muodostaminen on vain yksi sovelluksen normaali tila. Itse asiassa se on oletustila! Huppari omaksuu innokkaasti tämän filosofian. API: n takana on tilapäisen paikallisen tallennustilan täydellinen käyttöliittymä ja automaattinen, siro synkronointi aina, kun yhteys on käytettävissä.

Hupparin avulla voit lähettää kommentteja, lähettää sähköposteja, muokata tilejä ja tehdä kaiken muun päivittäisen toiminnan huolimatta yhteyden muodostumisesta. Koko tallennus- ja synkronointijärjestelmä voidaan keskeyttää milloin tahansa pelkäämättä tietojen menetystä.

Tietenkin tällä mallilla on oma sarja ainutlaatuiset suunnitteluhaasteet ja lähestymistavat , mutta Hoodie-tiimi on edelläkävijä tekniikoille näiden haasteiden ratkaisemiseksi.

Offline First on uusi mielenkiintoinen sovelluskehitys, sen käyttöönoton alkuvaiheessa. Vaadittavien tekniikoiden kehittämiseen on vielä paljon tehtävää. Katso tässä nähdä kuinka huppari tekee sen.

Yksinkertainen sovellus, jossa huppari

Osoittaaksesi hupparin käytön etupään kehitystyökaluna, päätin kirjoittaa yksinkertaisen sovelluksen, jonka avulla yhteisön jäsenemme voivat luoda omia tapahtumiaan ja julkaista ne muille insinööreille selata ja lisätä aikatauluihinsa. Pidä mielessä, että tässä tavoitteena on esitellä huppari eikä tarjota sovellusta, joka on valmis. Löydät koodin GitHub-sivullani .

Huppari on kansien alla olennaisesti NodeJS: n sisäänrakennetun palvelinpuolen ja asiakaspuolen JavaScript-kirjaston yhdistelmä. Yksinkertaisen asennus- ja käyttöönottoprosessin lisäksi sovelluksessa työskentelevä kehittäjä toimii vain asiakaspuolen koodilla. Sisäänrakennettu kirjasto voi puhua palvelimen puolella ilman, että kehittäjä tietää mitään sen toiminnasta.

Entä jos sovelluksemme vaatii meitä tekemään jotain mukautettua palvelimella? Voimme aina luoda Hoodie-laajennuksia. Tässä on lisätietoja laajennuksista .

Huppari-sovelluksen aloittaminen

Ensimmäinen askel minkä tahansa Hoodie-sovelluksen täyden pinon kehittämisessä on käyttää Hoodie-komentorivityökalua saadaksesi meidät maasta:

hoodie new toptalCommunity

Tämä luo alustetun Hoodie-sovelluksen, jolla on jo koodi paikallaan, ja voimme jo suorittaa sovelluksemme! Jos kirjoitamme

cd toptalCommunity hoodie start

selain avautuu Hoodie-tiimin esimerkkisovelluksella:

Tein vähän siivouspalvelua tässä vaiheessa. Hupparisovelluksissa on tällä hetkellä Bootstrap ja Prism, mutta otin toimitetut versiot ulos. En tarvinnut Prismia ja halusin käyttää omaa versiota Bootstrapista, jotta voisin käyttää fontteja ja JS: ää, joita halusin käyttää. Tein myös joitain muutoksia main.css-tiedostoon rakentaessani sovellusta, jotta voisin antaa sille oman tyylinsä ja sallia yksinkertaisen käynnistystyökalumallini. Käytin jQueryä vain DOM-manipulointiin ja tapahtumiin. Huppari huolehtii kaikesta muusta.

Huppari ja unelmakoodi

Työskennellessäni tämän mallisovelluksen luomisessa tajusin nopeasti kaikki Hupparin kanssa työskentelemisen edut. Niin monet tavallisista kysymyksistä, jotka tarvitsevat vastauksen aloittaessasi projektia, eivät vain olleet siellä. Huppari antoi minulle vain kirjoittaa koodin ja nähdä sovelluksen elävän ja toimivan.

Mitä strategiaa meidän tulisi käyttää käyttäjätilin hallinnassa? Hoodie-tilin laajennus on vastaus. Kuinka meidän pitäisi tallentaa tietomme taustajärjestelmään? Hupparin kuollut yksinkertainen tallennustilan sovellusliittymä hoitaa sen meille, mikä antaa meille Offline First -toiminnon ilmaiseksi! Tämän huppisovelluksen toimimiseksi offline-tilassa ei tarvittu, se vain toimii.

Sukelletaan hieman syvemmälle joihinkin toteutuksiin :.

Käyttäjätilien hallinta

Hupparilla on laajennus, joka huolehtii tilin hallinnasta meille hoodie-plugin-users . Sovellusliittymä ei voisi olla yksinkertaisempi.

Kuinka lisätään uusi käyttäjä?

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

Kuinka kirjaamme käyttäjän sisään?

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

Onko meillä kirjautunut käyttäjä?

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

Tämä ei todellakaan voisi olla yksinkertaisempaa. Voi odota ja miten käyttöliittymämme reagoi kaikkeen tähän? Huppari on varannut tapahtumia sinulle

Reagoi käyttäjän kirjautumisen yhteydessä:

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

Tietovarasto

Esimerkkisovelluksemme avulla käyttäjät voivat luoda omia tapahtumiaan (yksityiset tiedot) ja julkaista ne, jos haluavat (tietojen julkistaminen), jotta muut käyttäjät voivat liittyä tapahtumaan.

Huppari antaa meille mahdollisuuden lisätä tietoja paikalliseen kauppaansa kirjautumatta sisään, joten mistä se tietää, kenelle käyttäjälle nämä tiedot kuuluvat? No, se pitää sen paikallisena eikä synkronoidu palvelimen kanssa ennen kuin käyttäjä on kirjautunut sisään. Huppari varmistaa myös, että vain kyseinen käyttäjä pääsee kyseisiin tietoihin.

Joten tässä se toimii:

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

Se on niin yksinkertaista! Okei, niin mikä auttaisi meitä luomaan tapahtuman, kuinka jaamme sen muiden kanssa? Tässä on global share plugin auttaa meitä ulos. Meidän on asennettava se, koska se ei ole oletuslaajennus:

hoodie install global-share

Nyt laajennus on paikallaan, käytämme sitä! Meidän on julkaistava tiedot, jotka olemme jo lisänneet käyttäjäkauppaan, globaaliin myymälään.

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

Tämä merkitsee kaikki tälle käyttäjälle tallennetut tapahtumat julkisiksi, joten kun haemme kyselyä maailmankaupasta, saamme kyseiset tiedot tuloksena.

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

Omat tapahtumat -sivulla käyttäjä voi luoda tapahtumia, jotka julkaistaan ​​suoraan maailmanlaajuiseen kauppaan.

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

Julkaistut tapahtumat ovat kaikkien nähtävissä, joten nyt kuka tahansa käyttäjä voi nähdä Tapahtumat-sivulla luodut tapahtumat.

Joten entä tiedot, joiden ei pitäisi olla julkisia? Tallennamme tapahtumat, joihin käyttäjä on hakenut, ja näytämme ne Tapahtumat-sivulla. Kun käyttäjä napsauttaa Käytä-painiketta, tämä suoritetaan:

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

Alla olevat kaksi kuvakaappausta osoittavat, että kaksi selainikkunaa toimii samanaikaisesti. Ensimmäisessä selaimessa käyttäjä kirjautuu sisään käyttäjänä [sähköposti suojattu] kuka on hakenut Tapahtuma . Toisessa käyttäjä [sähköposti suojattu] on kirjautunut sisään ja on tehnyt hakemuksen B Tapahtuma .

Pitkä äänestys

Tilaamalla joitain Hoodien tarjoamia tapahtumia voimme käyttää avoimesti tekniikoita, kuten pitkä äänestys, mikä antaa sovelluksellemme mielenkiintoisen ominaisuuden, kun eri käyttäjät käyttävät ja tekevät yhteistyötä siinä.

Tämä on todella helppo tehdä. Näytesovelluksessamme yksi rivi sai temppun:

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

Tämä yksinkertainen rivi huolehtii palvelimen pitkästä kyselystä uusien käyttäjien mahdollisesti lisäämien tapahtumien tarkistamiseksi ja lisää ne Omat tapahtumat -sivulle.

Jotkut huolenaiheet

Kun olen rakentanut tämän näytesovelluksen pelaamaan Hoodien ja sen etupään sovelluskehitysominaisuuksien kanssa, olen erittäin innoissani sen tarjoamasta. Muutama selkeä asia erottui kuitenkin minulle.

Hupparin avulla kehittäjän on niin helppoa kommunikoida palvelimen kanssa, että kuka tahansa kehittäjä pystyy lisäämään asioita tietokantaan pelkästään konsolin avulla, jolla on selvästi merkittäviä turvallisuus- ja tietojen eheyttä.

Kirjastosta puuttuu edelleen paljon olennaisia ​​asioita, joita tarvitset missä tahansa tuotantosovelluksessa, kuten tietojen vahvistus, linkitettävät URL-osoitteet, testauskehys ja yksityinen tietojen jakaminen (vaikka ne edistyvät jo hyvin tämä viimeinen ). Jotta voisimme käyttää huppua tuotannossa juuri nyt, meidän on yhdistettävä se toiseen ratkaisuun, kuten AngularJS, Ember tai mihin tahansa monista muista ratkaisuista, jotka auttavat meitä varmistamaan, että meillä on oikein jäsennelty ja ylläpidettävä JavaScript-koodi Front-End-projekteihimme. Koska nämä kehykset ovat itse lähestymässä back-end-tekniikoiden monimutkaisuutta näinä päivinä, tämä ratkaisu kumoaisi pitkälti Hoodien tarkoituksen.

Hupparin tulevaisuus

Huppari on edelleen kovassa kehityksessä kaikkien näiden ongelmien ratkaisemiseksi. Tiimi työskentelee kovasti uusien ominaisuuksien ja nykyisten parantamiseksi, jotta alustasta saataisiin valmis massakulutukseen, ja tietysti tämä prosessi vie aikaa. Jos suunnittelet uutta täysimittaista sovellusta juuri nyt, saatat haluta löytää toisen alustan sen rakentamiseksi tällä kertaa.

Sillä välin ei kuitenkaan todellakaan ole liian aikaista ryöstää etupään sovelluskehitystä hupparilla, kuten toivon juuri osoittaneen. Huppariin on jo rakennettu paljon voimakkaita uusia ideoita, joista uskon todennäköisesti tulleen erittäin suosittuja. Pelin eteen pääseminen näillä asioilla ei todennäköisesti ole huono idea.

Jos Hoodie-tiimi jatkaa kovaa työtä, API: n pitäisi olla valmis parhaaseen aikaan hetkessä. Jos haluat seurata Hoodie-tiimin edistymistä, katso vain heidän virstanpylvään seuranta .

Huppari lupaa tehdä hienojen sovellusten kehittämisestä liikkujille ja ravistajille tuulta. Jos huppari ilmentää ideoita, saatamme nähdä, että jokaiselle uudelle projektille tarvitaan taustakehittäjien tiimi. Tällaisten projektien avulla on helppo kuvitella kulta-aikaa käyttöliittymäkehittäjille aivan liian kaukaisessa tulevaisuudessa. Vastaavasti Offline First -ideaalin tarjoamat edut käyttäjille ovat valtava askel saavutettavuuden kannalta, mikä laajentaa mobiilin, yhdistetyn elämäntavan ulottuvuutta niihin paikkoihin, joissa Internet itse ei mene.

Pään yli Huppari kotisivu seurata Hoodien edistymistä ja tulla osaksi uusia jännittäviä muutoksia, joita se valmistautuu aloittamaan.

---

Erityiskiitokset huppari-tiimille. Huppari-logoa käytetään Hoodie Open Source -projektin luvalla