Framoverlent front-end - del 3

Framoverlent front-end - del 3

Web-utvikling har kommet langt siden starten for over 20 år siden. I denne artikkelserien skal vi vise deg hvor lett du kan komme i gang med moderne front-end!

Del 3 – Så langt har vi sett på oppsett av webpack og laget enkel markup med React. I denne artikkelen skal vi knytte opp siden vår mot en skybasert database; Firebase, og hente og lagre innhold.

Del 3 - Firebase - Skybasert database for lagring og henting av data

Ofte vil du ha et behov for å persistere eller lagre data i løsningen din. Enten det er innholdet i seg selv, eller innstillinger som berører brukeren. Det finnes mange gode løsninger, både gratis og mer eller mindre kostbare. Firebase er en enkel og rimelig realtime-løsning for enkel «key/value» lagring i form av JSON-objekter.

Firebase tilbyr en gunstig «hacker-plan» med et begrenset antall tilknyttede klienter, lagrings- og overføringskapasitet som er gratis. Dette gjør den utmerket i utvikling- og demo-øyemed, men du kan også skalere opp ganske brukbart om du har behov for det. Firebase tiilbyr også veldig brukervennlige API'er for vanlig JavaScript, iOS, Android og vanlig REST, samt spesialiserte APIer for Angular, Ember, React, Ionic og Backbone i skrivende stund. 

Men det absolutt kuleste er real-time støtten, forsøk å ha vinduene med Firebase-administrasjonen og demoløsningen åpne samtidig når du legger inn en ny verdi i skjemaet, og obersver!

For å følge denne artikkelen bør du opprette en bruker og en database på Firebase. Du kan benytte min Firebase; https://reactfire-demo.firebaseio.com/ i koden din, men du får ikke åpnet administrasjonspanelet og sett oppdateringene. Bytt ut variabelen baseUrl:https://reactfire-demo.firebaseio.com/ i app/script/app.jsx med din FIrebase-url.

Til arbeidet

I denne artikkelen skal vi kun modifisere app/script/app.jsx og legge til et par linjer i bunnen av app/css/style.css, for at knappene skal bli litt enklere å se.

Vi begynner med CSS'en, hvor vi kun skal legge til litt padding på button-tagen. Legg til koden nedenfor i bunnen av style.css

Det første vi skal gjøre er å installere Firebase og ReactFire i prosjektet vårt.

npm install firebase --save
$ npm install reactfire --save

Forklaring av koden nedenfor som skal erstatte alt innholdet i app/script/app.jsx:

requires

Begynn med å importere de nødvendige dependencies med require.. 

React-klassen

Så modifiserer vi Page-variabelen som utgjør våre react-klasse;

-mixins

Vi legger til en ReactFireMixin i mixins-array'en slik at vi kan kalle ReactFires metoder direkte.

-getDefaultProps

DefaultProps er et sett med variabler som kan settes direkte i klassen, disse kan overskrives av props som sendes inn i klassen, men disse vil være tilgjengelig i det klassen initieres, i tilfelle de som sendes inn er asynkrone og ikke vil vises med en gang.

-getInitialState

Så oppretter vi en tom instans av en array-variabel; stringsgetInititalState. Dette er en variabel som skal inneholde verdiene fra vår Firebase, og som skal vises i grensesnittet. Alle endringer i variabler på state vil trigge en re-rendring av respektiv mark-up som refererer dem. Det vil si at når vi får data fra Firebase, så vil strings populeres og dermed vises på grensesnittet. Og når strings blir oppdatert, ved at noder blir lagt til eller fjernet fra Firebase, så vil dette reflekteres i grensesnittet.  - Automtisk. - uten at vi trenger å tenke noe mer på oppdatering av DOM'en. Og bare det som er direkte involvert i å vise verdiene fra strings vil bli oppdatert!

-componentWillMount

componentWillMount er en del av React-komponentets livssyklus og intreffer før dokumentet rendres, det betyr at dersom du ønsker å endre verdier før rendring, kan det gjøres med setState her, slik at det ikke trigger en unødvendig re-rendring.

-componentDidMount

Trigges umiddelbart etter at komponentet er rendret, vi setter fokus på input-feltet vårt slik at det er klart. Legg merke til at vi kaller this.refs.theInput.getDomNode() hvor theInput er et attributt som du finner igjen på input-feltet i mark-up'en nedenfor. Dette måten vi refererer til DOM'elementer direkte i React.

-addInputString

Dette er en metode vi har laget som henter ut verdien fra input-feltet, og pusher den inn i en node i vår Firebase. Enkelt og greit!

-resetFirebase

Dette er en metode som resetter hele Firebasen vår. Samme kode kjøres skedulert en gang om dagen i et annet prosjekt for å resette basen.

Til slutt har vi render-funksjonen igjen. Denne gangen med litt mer mark-up, og det interessante her er koden som ligger i <ul>-tag'en en .mapstrings-arrayen fra state som rett og slett lister ut alt innholdet i Firebasen som <li>-elementer.

Og mer skal det ikke til for å hente ut og persistere data i Firebasen vår! Veldig enkelt, ikke sant!

Artikkelserien

Del 1 – npm og webpack - Basics/Kom i gang med npm og webpack

Del 2 – CSS og React - Innhold med form og farge

Del 3 – Firebase - Skybasert database for lagring og henting av data

Del 4 – Heroku - Skybasert hosting/publisering

Mer lesing

Firebase

ReactFire

React - component Specs and Lifecycle

Kildekoden til denne artikkelen - Kildekoden til hele artikkelserien

 

Om bloggeren:
Frontendutvikler. Glad i Javascript. Har hakket sammen websider siden midten av 90-tallet, og trives godt med det.

comments powered by Disqus