Framoverlent front-end - del 2

Framoverlent front-end - del 2

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 2 - I første del av denne artikkelserien satte vi opp et enkelt prosjekt med webpack og en enkel JavaScript-funksjon som printet en setning på skjermen. Nå skal vi ta skrittet videre, lage ordentlig markup med CSS og bilder og ta i bruk webpacks utviklingsserver. Og for å krydre det hele litt skal vi bruke Facebooks React for å rendre mark-up.

Del 2 - CSS og React

Utviklingsserver

Det blir fort litt kjedelig å kjøre webpack-kommandoen i terminalvinduet hver gang du gjør en oppdatering som du ønsker å se resultatet av. Derfor skal vi installere webpack-dev-server. Denne benytter webpacks watch modus og lar webpack publisere til minnet i stedet for disk. Kommandoen nedenfor installerer serveren globalt.

$ npm install webpack-dev-server -g

Deretter kan du starte serveren med

$ webpack-dev-server

Og naviger ttil http://localhost:8080/webpack-dev-server/bundle i nettleseren din. Du stopper serveren med ctrl+c i terminalvinduet.

CSS

Så er det på tide med litt form og farge. Jeg har valgt å importere litt CSS fra minimalcss.com som blant annet gir oss en grid for layout. Det er ikke en responsiv side, kun nok til for denne demonstrasjonen. Kopier koden nedenfor inn i app/css/style.css 

Layout

Og legg deretter til noen linjer helt i bunnen av css-filen for å style layout'en med litt farge på sidekolonnene:

Innhold

Så er turen kommet for selve innholdet. Åpne app/script/app.js i editoren din. Øverst legger vi en linje for å importere CSS'en vi nettopp la til.

Deretter lager vi en variabel som vi kaller markup, og legger litt HTML inn i den som ren tekst; tre kolonner med innholdet i den midterste. Og så kjører vi ut mark-up'en med document.write(). Du kan kopiere hele innholdet nedenfor og erstatte alt som var i filen fra før.

CSS-loader til webpack

Da er vi klare med CSS og mark-up, nå skal vi ta i bruk en loader i webpack slik at CSS'en inkluderes i bundle.js, åpne og rediger webpack.config.js:

og kjør følgende kommando i terminalen (husk å navigere til prosjektmappen først.) Dette installerer loaderen lokalt i prosjektet;

--save-dev sier at vi skal lagre installasjonen som en utviklings-avhengighet (dependency.)

$ npm install style-loader css-loader --save-dev

Du bør nå kunne se at nettleseren oppdaterer seg automatisk hver gang du lagrer. Sett opp editor- og nettleser-vinduer ved siden av hverandre, gjør en endring i eksempelvis den latinske teksten, lagre app/script/app.js og se at nettleseren oppdaterer seg!

JavaScript templates

Da har vi utviklingsmiljøet nesten helt på plass. Det er jo litt tullete å bruke document.write() for å rendre innhold på siden så det skal vi bytte ut. Det finnes mange både gode og ikke fullt så gode template-systemer, og våre teknologivalg så langt vil ikke legge noen vesentlige hindringer i veien for noen av disse. Vi skal derimot benytte JSX og React for å rendre sidene våre og det krever et par små installasjoner til.

React og JSX

React er et JavaScript bibliotek fra Facebook som er laget spesielt for oppdatering av brukergrensesnitt. Veldig enkelt forklart benytter React seg av en «virtuell DOM» som biblioteket differ med den virkelige DOM'en, og deretter bestemmer hva i DOM'en som skal oppdateres til enhver tid. I tillegg finnes det en livssyklus på dokumentnivå, slik at du som programmerer for eksempel kan bestemme hvordan mark-up skal se ut før den rendres, etter den har rendret, når siden mottar data osv.

React er veldig effektivt og det enkleste moderne biblioteket jeg har jobbet med. Det har etterhvert blitt veldig populært, og er i mine øyne, mye enklere enn eksempelvis Angular, både når det gjelder oppstart og videreutvikling. Jeg skal snakke litt mer om React ved en senere anledning, og bare gi noen enkle eksempler her.

Vi trenger å installere React, og en jsx-loader til webpack, og å endre webpacks konfigurasjon til å ta hensyn til disse.

Først stopper du serveren med ctrl+c i terminalvnduet dersom den kjører, og så installerer du React og JSX-loaderen med:

$ npm install react --save
$ npm install jsx-loader --save-dev

Deretter må vi inkludere jsx-loader webpack.config.js. Legg også merke til at app/script/app.js er omdøpt til app/script/app.jsx i andre linje!

Husk å endre navnet på filen før du åpner den og endrer den tilsvarende koden nedenfor.  En kort forklaring på innholdet i app/script/app.jsx;

  • Som tidligere importerer vi CSS'en med en require.
  • Vi importerer React til en variabel.
  • Oppretter en ny variabel; Page satt til en React-klasse. Denne klassen inneholder foreløpig kun et displayName og en render-funksjon som returnerer JSX. Merk at du MÅ ha en omsluttende HTML-tag i returen til render-funksjonen. Du kan heller ikke ha flere enn én omsluttente tag; altså ikke to <div>'er etterhverandre.
  • Til slutt kaller vi Reacts render-funksjon og sender inn vår Page-klasse og dokument-noden vi ønsker å rendre til - i dette tilfellet <Body>.

Når du er ferdig starter du serveren din med
$ webpack-dev-server

Dersom du har beholdt nettleseren din på http://localhost:8080/webpack-dev-server/bundle bør du nå se at serveren har startet og server opp innholdet i JSX'en din.

Du har nå lært deg å inkludere CSS med webpack og tatt i bruk React og JSX for å rendre innhold og skrive mark-up. JSX kan nok virke litt uavnt til å begynne med, legg blant annet merke til at vi må skrive className i stedet for class i mark-upen for at CSS'en skal virke. Men dette venner du deg fort til. Det er også mange gode referanser og turorials der ute.

I neste artikkel skal vi knytte siden vår opp mot en skybasert database og konstruere dynamisk innhold, og da vil du se Reacts virkelige kraft!

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

webpack-loaders

webpack-dev-server

JavaScript Templates.

React

JSX

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