Nylig kom vi over en video fra fjorårets NDC. Det var en talk som het “Choosing a javascript framework” av Rob Eisenberg. Denne videoen inspirerte oss til å se litt nærmere på nettopp javascript rammeverk.

I talken til Eisenberg plukket han ut et sett med javascript rammeverk og sammenligner så disse. Vi ville kjøre en litt lik approach, men valgt å legge til et bibliotek som vi vet mange i Ciber har erfaring med; knockout.js. Ofte er det enklere å sammenligne med noe man kjenner.

Rammeverk / Bibliotek?

Som vi ser på bildet over er det noen som blir klassifisert som rammeverk og noen som blir klassifisert som bibliotek. Hva er forskjellen?

En kan tenke på et rammeverk som et hus. Når et hus blir laget må du følge visse retningslinjer.

Du må ha en noen dører, et vindu osv.

Mens i et bibliotek står du friere, du får masse tømmer som du kan utforme slik du vil, uten å følge for mange retningslinjer.

Hva er en toveis binding?

1. Når data i modellen blir oppdatert, blir også UI’et oppdatert
2. Når UI elementer blir oppdatert, blir endringene propagert tilbake til modellen

Det er nettopp dette vi har implementert for hvert rammeverk, en toveis databinding. Dette kan forhåpentligvis gi oss et lite inntrykk av rammeverkene.

Koden er tilgjengelig her

Wappalyzer

En nyttig chrome extension vi har brukt litt for å gjøre research er wappalyzer. Du får den til firefox, chrome, opera og som «bookmarklet» på https://wappalyzer.com/download.

Med denne kan du lett se hvilke teknologier nettsidene du besøker bruker. Kategorier av teknologier inkluderer JavaScript rammeverk, web server, Ecommerce platform og CMS.

Vi har tittet litt rundt på store sider for å se hva de bruker

Wappalyzer tilgjengeliggjør også noe av dataen sin på hjemmesiden sin wappalyzer.com – Vi har sett litt på topplistene for de ulike rammeverkene. For å se om det er noen store sider vi har hørt om som bruker de ulike rammeverkene

 

Angular1

• 52,899 stjerner
• Første release på github
• 21 oktober 2010
• Google
• Superpopulært når det kom ut
• Foreldet

Angular1 ble raskt en supersuksess, og alle som ville gjøre noe som helst med frontend måtte ha kjennskap til Angular1.

Måten Angular1 henger sammen er ved at ng-controller blir reflektert i .controller. For å koble Angular1 opp mot html-en bruker du ng-app attributten som blir reflektert i .moudle.

For å sette opp en to-veis-binding i Angular1 må du ha propertien i en ng-model for så og skrive ut resultatet, i dette eksempelet en funksjon som skriver ut hele navnet, inneklemt i {{ }}.

Angular2

• 17,538 stjerner
• Første release på github
• 14 mars 2014
• Google
• Typescript
• Tidkrevende å sette opp

Når du bruker Angular2 så er det veldig sterkt anbefalt at du også bruker typescript. Og typescript kan en ramse opp slik:

• Superset av javascript
• Sterkt typet javascript
• Laget av microsoft
• Må transpiles til javascript

Som vi kan lese på siste punkt er at typescript må transpiles til javascript, men hva er forskjellen på kompilering og transpilering?

Forskjellen er at når du kompilerer noe så blir det gjort om til et nytt språk, slik som i bildet der C blir gjort om til binærkode. Når vi bruker begrepet transpiling snakker vi da om å gjøre om fra et språk til et tilnærmet lik språk, slik som typescript og javascript.

I Angular2 kobler du html-templaten opp mot templateUrl og selector blir gjenspeilt html-en for å kunne vise komponenten.

For å sette opp en to-veis-binding i Angular2 må du ha propertien i en [(ngModel)] for så og skrive ut resultatet, i dette eksempelet en funksjon som skriver ut hele navnet, inneklemt i {{ }}.

Aurelia

Aurelia, rammeverket fra Rob Eisenberg som inspirerte oss til å se på de ulike rammeverkene.

Nytt, men populært

Dette er et veldig nytt rammeverk, release candidaten kom 22. Juni 2016. Allikevel har de 8, 167 stjerner på github, som er mer enn knockout.js som har 7796. Allikevel klarte vi ikke å finne noen store nettsider som brukte Aurelia. Noen eksempler kan du allikevel finne på: http://builtwithaurelia.com/ . Eisenberg, som står bak rammeverket var tidligere en del av angular 2 teamet, men brøt ut fordi han var uenig i hvordan en del ting ble gjort. Han lagde så et nytt rammeverk, på bakgrunn av hva han ikke likte ved angular 2.

Selvstendig

I talken sin argumenterer Eisenberg også med at det er en stor fordel å ikke være underlagt et stort selskap. Google har Angular og Polymer. Facebook har React. Dersom du er enig i at det er positivt med rammeverk som er “selvstendig” kan Aurelia være noe for deg.

Raskt, lite og lett å ta i bruk

Videre argumenterer Eisenberg med at Aurelia er lite, da han sammenligner Aurelia sin filstørelse med konkurentenes vinner Aurelia. Raskt er det også, se mer om dette lenger nede i dette innlegget under performance…

I tillegg skal det være lett å ta i bruk, da Aurelia ikke krever at du benytter noen forkunnskaper eller at du setter deg inn i f.eks JSX eller TypeScript.

Under ser du toveis bindingseksempelet

export class App {
 firstName = 'Kalle';
 lastName = 'Klovn';

 get fullName() {
 return this.firstName + ' ' + this.lastName;
 }
}

<template>
    First Name: <input type="text" value.bind="firstName">
    Last Name: <input type="text" value.bind="lastName">
    Full Name: ${fullName}
</template>

Knockout

• 7,796 stjerner
• Første release på github
  • 5 juli 2010
• Støtter IE6
• MVVM
• …dødt?

function AppViewModel() {
 this.firstName = ko.observable("Kalle");
 this.lastName = ko.observable("Klovn");

 this.fullName = ko.computed(function () {
 return "Full name: " + this.firstName() + " " + this.lastName();
 }, this);
}

<html>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
<script type='text/javascript' src='script.js'></script>

<body>

 <!--TODO: flytt ut htmlen til en egen html side og inkluder i index.html-->
 First name: <input type="text" data-bind="textInput: firstName"><br>
 Last name: <input type="text" data-bind="textInput: lastName"><br>
 <div data-bind="text: fullName"></div>

 <script>
 ko.applyBindings(new AppViewModel());
 </script>
</body>

</html>

Hvem bruker knockout?

#	WEBSITE	DETECTIONS
1	duckduckgo.com	49,213
2	login.live.com	43,224
3	mamba.ru	9,655
4	mediafire.com	8,960
5	my2.siteimprove.com	8,011
6	fetlife.com	8,006
7	kooora.com	7,812
8	portal.azure.com	7,231
9	portal.leadforensics.com	6,646
10	dell.com	6,301

Kilde: https://wappalyzer.com/applications/knockoutjs

Er knockout dødt?

Kilde: https://github.com/knockout/knockout

Det er ikke kommet en commit på knockout sin github siden 15. Januar 2016 i skrivende stund. Hva betyr det? Dødt? Eller bare fungerer alt for bra?

#KnockoutJS på twitter

Dersom man går på twitter og tar en titt på #knockoutjs finner man fort ut at det fortsatt er mange som både bruker og lærer seg knockoutjs i dag. Knockout er nok ikke dødt, men i ferd med å dø ut…?

Polymer

• 16,221 stjerner
• Første release på github
• 11 juli 2013
• Veldig forskjellig fra de andre
• Kun html filer
• Laget av google chrome teamet

Polymer skiller seg veldig fra de andre javascriptene i denne sammenligningen. Dette er fordi alt skrives i html, ved hjelp av webcomponents-standarder.

Når vi lager en to-veis-binding i polymer må vi bruke to {{ og putte inn navnet til propertien og html-typen bak :: . Måten du binder opp Polymer med komponenten er Polymer.is og dom-module.id. Når du skal bruke en polymer-komponent på siden må du da importere komponenten med en link tag for så og bruke den som en html-tag.

React

• 52,313 stjerner
• Første release på github
  • 29 mai 2013
• Må skrive JSX (sort of)
• Lawyer up

• “Alle” bruker det
• Redux? Flux? states

Som du kan se så er det litt tungvint å sette opp en to-veis-binding.

Du må ha en onChange-attributt som kaller en funksjon som oppdaterer en state som skriver til verdien du vil oppdatere. Så må du rendre react-klassen i en ReactDOM.render, her må du også skrive iden som skal brukes for å kalle react-komponenten.

Isomorfi? Server Side Rendering? (SSR)

Etter å ha lest litt om react har vi sett at det er populært å lage noe som blir kalt «isomorfiske apper». Men hva er egentlig dette? Vi vet ikke om dette er noe alle gjør, men man kan visstnok få en utrolig rask webapp med det.

Vi fant et eksempel som forklarer isomorfi ganske bra: https://www.lullabot.com/articles/what-is-an-isomorphic-application. La oss se litt nærmere på hva de forklarer.

I web utvikling, er en isomorfisk app en app der koden (i dette tilfellet JavaScript kan kjøre både på serveren og i klienten

I en isomorfisk app vil det første requestet gjort av nettleseren bli prosessert av serveren, mens de følgende requestene blir gjort av klienten. La oss se på eksempelet fra lullabot.

Eksempelapplikasjonen deres er en app som viser artikler.

Dersom vi laster appen og ser på kildekoden, vil vi se HTML, CSS og bilder. Ser vi i bunnen finner vi noen JavaScript filer. build/bundle.js er react appen, som inneholder listen av routes, templates og komponentene som trengs for å navigere seg i siden. La oss se trinn for trinn hvordan requesten blir prosessert.

1. Vi skrev inn http://localhost:3000/articles/importing-huge-databases-faster i nettleseren og trykket enter
2. Requesten nådde serveren, som hentet artikkelens data fra CouchDB, bygget hele siden, og returnerte den til node.js
3. Brukeren ser responsen i HTML, mens nettleseren laster ned React appen (build/bundle.js) async…

Trikset: Den samme requesten er prosessert forskjellig hvis man navigerer seg til artikkelen ved å trykke på linken til den istedenfor å skrive inn urle’en i nettleseren.

Nå som vi har artikkelen og applikasjonen lastet inn i nettleseren vår, kan vi se på listen over artikler og trykke på den samme artikkelen som vi lastet inn i sted…

Her er responsen sett i chrome developer tools

Det vi ser er en XHR request (XML Http Request Object)

La oss se på det steg for steg…

1. Vi trykket på artikkelens link mens vi var på /articles
2. React tolket click eventen og stoppet propageringen (forplantingen?)
3. React sente en XMLHttpRequest til CouchDB for å hente artikkelen
4. React sendte artikkelens data til artikkel templaten og rendret den

Okay, hæ?

CouchDB har et HTTP/JSON API som gjør at det kan kalles direkte fra klienten

Derfor henter vi kun ut dataen vi trenger direkte, og mater denne inn i DOM’en…

Det gjør at ting går raskere enn om vi måtte gått via serveren

 

Riot

• 10,729 stjerner
• 8 november 2013
• Alternativ til React
• Tok med pga the Eisenberg Effect nevnte det

Riot er inspirert av react, men i motsetning til react så er det ikke noen klausuler som kan gi deg hindringer i fremtiden.

 

Som du kan se på bildet så har riot en relativt liten størrelse i forhold til andre rammeverker.

Når vi lager en to-veis-binding i riot legger vi propertien som skal endre seg inni det som skal trigge en event. I bildet er det onkeyup som er eventen, og editFirstName som er propertien. For å koble javascript opp mot taggen bruker man navnet på taggen etterfulgt av Tag, for så og kalle på javascriptet.

For å ta i bruk taggen på siden må skrive inn html-attributtet i htmlen, for så og binde opp tag-navnet samt valgene til taggen, hvis de eksisterer.

Performance

La oss se litt på performance..

Vi hadde hørt at react var så sykt raskt, så vi søkte litt på performance rundt javascript rammeverk

Etter verdt fant vi en fyr som heter Stefen Krause, han har laget noen performance tester som blant annet lager rader, sletter rader, bytter rader osv osv

Disse oprasjonene har han implementert på mange forskjellige rammeverk og kjørt dem på sin macbook pro. Tidene er i millisekunder, den endelige scoren er hvor raskt rammeverket var sammenlignet med vanlig javascript uten bruk av rammverk.

Kilde: http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Testene ligger tilgjengelig på github, så du kan laste de ned og kjøre de på din egen maskin

Hvis du syns implementasjonen av testene for et av rammeverkene er dårlig implementert, eller tester av et rammeverk mangler kan du gå inn og legge inn en pull request

https://github.com/krausest/js-framework-benchmark

Nettop dette gjorde selvfølgelig “Eisenberg effect”, som ikke var fornøyd med aurelia implementasjonen, han syns den var “poorly written” og sendte inn en pull request. Dette økte performancen på aurelia fra 2.17 til 1.66

Så hvordan gikk det egentlig med våre utvalgte rammeverk?

3 av de var ikke med de nyeste testresultatene Stefan har publisert på bloggen sin, men i github repoet har jeg sett at det nå er kommet en knockout implementasjon

Uansett, etter at pull requestet til Eisenberg ble tatt inn er det aurelia som er det raskeste av “våre”, det gjør det også til en 6. plass totalt i testen. Før hans implementasjon hadde aurelia 2.66, som ville lagt det etter angular 1

Uansett ser vi at react kommer etter aurelia, så angular 2, så angular, og så ember til sist med en veldig treg score

Så, hvem var de raskeste i denne testen?

For oss var disse rammeverkene totalt ukjente, med unntak av vue som vi så vidt hadde hørt om.

Det første vi legger merke til er at inferno skiller seg veldig ut på performance, 1.07 er nesten like raskt som vanillajs

Ellers er de andre her også ganske kjappe, det er hele 8 rammeverk som er raskere enn aurelia

Stefan, som han som har laget testen heter, er selv overasket over hvor sykt rask inferno er, og måtte til og med endre litt på testen for at vanlig javascript skulle matche inferno.

Kanskje vi må se litt nærmere på inferno…

Men hva med de andre her? Hvem er de? For å få et bilde av hvor populære disse er har vi inkludert antall github stars i tabellen her.

Vi ser da umiddelbart at Vue er ganske mye mer populær enn de andre, med 31 000 stars.

For oss var vue et noe nytt, men det ser da ut som noe som er verdt å titte nærmere på.

Konklusjon

Det eneste vi kan «konkludere» med er å dele rammeverkene opp i noen grupper ift. hvor mye vi anbefaler de eller ikke. Det vil ikke være noe fasitsvar på hva du bør velge til ditt neste prosjekt, men vi kan foreslå noen du kanskje bør vurdere. Som tidligere nevnt har vi kun gjort en overfladisk analyse og har ingen erfaring med bruk av dem, med unntak av knockout og angular2.

Hva mener du er fremtiden? Hvilket bibliotek/rammeverk bruker du og hva mener du en bør satse på? Bruk kommentarfeltet under!

Se gjerne mer på

Kanskje se mer på?

Bankers?

Kanskje?

Litt usikker…

La ligge..

Anbefalte lenker

https://github.com/njaal/js-frameworks-example
Vår implementasjon av inputfelt eksempelet med de ulike rammeverkene/bibliotekene

https://vuejs.org/guide/comparison.html
Fin oversikt som sammenligner vue med andre rammeverk

https://vuejs.org/guide/ssr.html
Hvordan gjøre isomorfi/Server Side Rendering med VUE

https://www.lullabot.com/articles/what-is-an-isomorphic-application
Eksempel på isomorfisk applikasjon

http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Performance overview over de fleste rammeverk

https://www.youtube.com/watch?v=6I_GwgoGm1w
Rob Eisenberg sin talk: Choosing a JavaScript framework

 

Njaal Almestad Gjerde
Frontend fagansvarlig

 @njaalG

Bjørn Vegard Thoresen
.NET/frontend utvikler

 @bvst89