Framoverlent front-end - del 1

Framoverlent front-end - del 1

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 1 - Basisoppsett med npm og webpack.

Del 1 - npm og webpack

Da jeg startet på min første HTML-fil, en gang i 1995, visste jeg svært lite om hvordan det skulle påvirke livet mitt, eller hva jeg drev med der og da. Nå vet jeg mer om hva livet har ført med seg, men lurer stadig på hva jeg driver med.

Og det er kanskje ikke så rart, for selv om jeg har drevet med web-utvikling i 20 år, så lærer jeg noe nytt hver eneste dag!

Språket kan kanskje sies å være det samme; HTML, selv om vi etterhvert har sett HTML5, med mer logisk semantikk og støtte for moderne teknologier. Men sannheten er vel at jeg skriver mer JavaScript enn HTML for tiden.

Måten vi bygger opp sidene på har, med hjelp av blant annet HTML5, blitt mer forståelig. Jeg kan eksempelvis bruke en <footer> eller en <section>, og der hvor jeg i 1995 bestemte layout med kompliserte tabellkonstruksjoner, etterhvert umulige å vedlikeholde uten syntaks-utheving eller andre hjelpemidler, bruker jeg nå gjerne et av mange avanserte CSS-rammeverk.

Dynamisk innhold har jeg laget med Java-applets, Adobes Flash og etterhvert asynkront-JavaScript (Ajax). Nå bruker jeg moderne JavaScript-bibliotek eller -rammeverk som Facebooks React eller Googles Angular for å oppdatere kun deler av skjermbildet.

Jeg er først og fremst interessert i det å lage noe, ganske utålmodig av natur og har aldri gravd så dypt i server-teknologi. Men der hvor jeg tidligere måtte sette opp en web-server, på en fysisk maskin, overføre statiske HTML-filer, via FTP, til et filområde som ble servet ut på internett, kan jeg nå bruke Git for å overføre HTML, JavaScript, CSS og andre ressurser til en Node-server lokalisert i skyen. Kanskje er applikasjonen isomorfisk, slik at serveren renderer all dynamisk HTML for meg, og jeg ikke trenger å tenke så mye på SEO-problematikk, nettleser-klientenes forskjellige JavaScript-implementasjoner, eller deres manglende båndbredde og/eller prosessorkraft.

Det er altså mange begreper og teknologier involvert, ny kompetanse og kunnskap, så i denne artikkelserien skal jeg forsøke å vise litt vei i jungelen av moderne web-utvikling.

Hva trenger du?

Selv har jeg Mac, og mener det er det beste utgangspunktet for web-utvikling i dag, men mye av det som nevnes her kan du bruke på andre plattformer også. Google er din venn om du lurer på noe!

Du kan laste ned de fleste ressurser, pakke ut filer og installere biblioteker, men jeg anbefaler at du venner deg til å bruke et Unix-shell, Bash eller terminal om du vil. Selv benytter jeg iTerm, men den medfølgende kommandolinjen eller Cygwin for PC-brukere er gode alternativer å starte med (Alternativt Git-bash som følger med Git for Windows). Fra terminalvinduet vil du installere biblioteker du trenger i prosjektet, og kanskje overføre filer som skal publiseres til serveren. Dersom du ikke er helt komfortabel med kommandolinjen er dette en grei innføring.

Tips! Dersom du støter på problemer med bruk av Bash, feilmeldinger etc, søk med feilmeldingen på Google, sjansen for at andre har dokumentert både problem og løsning er rimelig stor!


Videre trenger du et sted å skrive kode, du trenger strengt tatt bare en tekst-editor, men det er mange fantastisk gode verktøy som, når du har gjort deg kjent med dem, garantert vil gi deg en effektivitetsøkning. Selv har jeg brukt IntelliJ og WebStorm i flere år takket være generøse arbeidsgivere, men det finnes mange andre alternativer som er rimeligere eller gratis, eksempelvis Sublime Text eller Brackets. Et kjapt søk på Google vil gi deg «10 på topp lister» og tester.

Da starter vi

Vi baserer oss på at du har Node installert på maskinen din, og dermed npm som vi skal benytte for å installere nødvendige verktøy, rammeverk og verktøy. Gå til https://nodejs.org/en/ og last ned Node om du ikke allerede har det installert.

Deretter verifiserer du at Node og npm er tilgjengelig ved å skrive følgende i terminalvinduet (merk at $ i eksemplene her indikerer at det som følger er en kjørbar kommando, og ikke skal skrives inn!):

$ node –v


og

$ npm -v


Dersom du støter på problemer ifbm tilgang til mapper når du kjører npm-installasjoner kan denne artikkelen være hjelpsom.

Vi skal benytte min foretrukne «module bundler»; webpack for å pakke sammen og klargjøre koden til en distribusjon som skal overføres til web-serveren. Det finnes alternativer til webpack, men i min erfaring er webpack den som er best tilpasset litt større prosjekter og i tilleg synes jeg den er enkel og grei å bruke.

Derfor skal vi installere webpack; vi bruker npm og opsjonen -g for å installere globalt:

$ npm install webpack -g

Det anbefales ofte å installere webpack lokalt i prosjektet også slik det blir en «dependency» i prosjektet:

opprett prosjekt-mappen:

$ mkdir demo1

naviger dit:

$ cd demo1

lag en package.json fil som brukes av npm for å holde rede på alle avhengigheter (dependencies) i prosjektet:

$ npm init


Når du kjører npm init blir du møtt med 9 spørsmål som du, i denne omgang, kan svare bekreftende på ved å trykke Enter. Les mer her om package.json.

Deretter installer du webpack:

$ npm install webpack --save-dev

Jeg er tilhenger av en viss struktur og har etterhvert landet på et mer eller mindre fast oppsett på mine prosjekter, men har erfart at mange utviklere gjør ting forskjellige, så denne prosjektstrukturen er bare et forslag. Dog kan det være greit å skille de filer som skal distribueres fra de som utgjør utviklingsmiljøet ditt. Lag derfor følgende filstruktur (package.json og node-modules bør allerede være på plass etter webpack-installasjonene):

I dist-mappen oppretter du en HTML-fil som du kaller index.html, den skal se slik ut:

Dette er i grunnen det vi skal skrive av HTML i denne omgang, merk at det eneste body inneholder er en referanse til et JavaScript som heter bundle.js. Denne bundle-filen er den webpack lager for oss basert på det innholdet som ligger i app-mappen. Webpack trenger en konfigurasjonsfil for å gjøre dette. Opprett en JavaScript-fil som heter webpack.config.js og legg denne ved siden av package.json. Prosjektmappen din vil da se slik ut:

webpack.config.js:

entry er utgangspunktet for koden som vil utgjøre applikasjonen vår, her har jeg valgt å kalle filen app.js og legge den i en mappe som heter app/script for å skille den fra distribusjonen.

Deretter variablen output, en fil som heter bundle.js, og som legges i mappen dist.

Til slutt er det bare å skrive noe fornuftig innhold i app/script/app.js, for eksempel:

document.write('Min fantastiske webpack-app!');


Så er det bare å skrive webpack i terminalvinduet, når du står prosjektmappen. Da vil webpack pakke koden inn i JavaScript-filen bundle.js slik at når du åpner index.html vil den bli referert.

$ webpack

Verre er det ikke å komme i gang med moderne web-utvikling!

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

Node-dokumentasjon
npm-dokumentasjon
webpack-dokumentasjon
Pete Hunts webpack-how to

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