WORDS

Navigera i webbdjungeln: Ramverk

I förra delen gick vi igenom bibliotek, det vill säga en samling funktioner som "någon annan" har skrivit. Både bibliotek och ramverk uppfyller denna definition, men det senare styr kodstrukturen för hela din applikation. Det faktum att du har byggt upp din applikation med ett ramverk som utgångspunkt kan betyda att det är svårt att byta ut det, något som inte nödvändigtvis gäller för bibliotek.

Javascript-ramverk

Det finns flera problem som Javascript-ramverk försöker hjälpa oss att lösa:

  • Arbeta med DOM (dvs. HTML-element). Hur och när renderas uppdateringar i din applikation? Finns något templating-språk som man använder?

  • Arbeta med state. Hur håller du koll på tillståndet i din applikation och hur ser du till att uppdateringar propageras till rätt ställen?

  • Arbeta med routing och historik. Hur ändrar du url:en och hanterar när användaren trycker på webbläsarens bakåtknapp?

  • Kodstruktur. Om du inte både har stor erfarenhet av mjukvaruarkitektur och stark disciplin, så kan du behöva hjälp på traven.

  • Prestanda. Ramverk ser ofta till att inte rendera om din applikation i onödan.

  • Gemensam kodbas för frontend, backend och mobilappar. Några av dom populäraste ramverken hjälper en att skriva kod som kan fungera både på frontend (Javascript i webbläsaren), på backend (Javascript på servern, som kanske renderar statisk HTML) och mobilappar (där Javascript interagerar med nativa komponenter). Här tar vi endast upp frontend.

Vanilla Javascript

"Vanilla Javascript" är inte ett ramverk, utan syftar på Javascript som inte använder något mer än standardbiblioteket. Detta är utmärkt för att lära sig språket och hur webbläsaren och DOM fungerar, men kan bli omständligt, om du inte i praktiken skapar ett eget, informellt ramverk.

För en sajt som denna blogg, som inte bör vara Javascript-tung, är detta ett bra alternativ. Om du däremot vill skapa en större ensidesapplikation (eng. single-page application, SPA), skulle jag rekommendera att välja ett befintligt ramverk.

Angular

Angular är också känt som Angular 2+. Inte att förväxla med "AngularJS" 1.x, ett äldre Javascript-ramverk.

Angular är skrivet i Typescript, och fungerar bäst om du som använder ramverket också skriver Typescript. Ramverket är ganska stort och innehåller en stor mängd funktioner, vilket ersätter behovet av många bibliotek, men det gör också att det kan ta en liten stund att komma igång. När man väl är igång däremot, behöver man inte fundera så mycket på kodstruktur, eftersom Angular definierar hur man ska lägga upp sin kod och vilken filstruktur man ska använda.

Angular har sitt eget templating-språk, som ser mycket egendomligt ut i början: det är HTML, men attributen innehåller hakparenteser, vanliga parenteser och asterisker.

<input
  *ngIf="isNewUser"
  [(ngModel)]="username"
  [placeholder]="usernamePlaceholder | translate"
  (blur)="verifyUsername()"
/>

React & Redux

React är självt egentligen inte ett komplett ramverk, utan kan ses som ett bibliotek för att rendera HTML. Det innebär att det blir lite lättare att bädda in en React-komponent i en applikation skrivet för något annat ramverk. Detta gör React extremt flexibelt, vilket är lätt att komma igång med, men det kan vara svårt att få till en bra arkitektur.

I synnerhet hanteringen av state, applikationens tillstånd, är bristfälligt. För att lösa det, brukar man använda React tillsammans med ett bibliotek för state, ofta Redux.

React använder JSX, Javascript utökat med XML-liknande syntax. Detta gör att inget templating-språk behövs och man kan utnyttja sin Javascript-kunskap. Här följer ett exempel:

class App extends React.Component {
  state = {
    isNewUser: true,
    username: undefined
  };

  render() {
    if (!this.state.isNewUser) {
      return false;
    }

    return (
      <input
        value={this.state.username}
        onChange={event => this.setState({ username: event.target.value })}
      />
    );
  }
}

Vue

Uttalas som "view".

Jag har själv bara minimal erfarenhet av Vue, så jag ska hålla mig kort. Ramverket är lätt att komma igång med och stödjer både en templating-syntax och JSX, så utvecklarteamet kan välja vilken syntax som tilltalar dom. Det försöker ge mer guidning i arkitektur än React, och är mer flexibelt än Angular.

CSS-ramverk

CSS-ramverk hjälper oss att lösa följande problem:

  • Kodstruktur. Det är svårt att finna en bra struktur till sin CSS-kod. I vilken fil ska man lägga vad, och hur ser man till att inte upprepa sig så mycket? CSS-ramverk hjälper till genom att eliminera 90 % av den CSS som du behöver skriva.

  • Grid och responsivitet. Hur får man till en layout med kolumner i en vettig ordning, som dessutom dynamiskt ändrar sig om storleken på skärmen ändras? Vilken kombination av float och flex stöds i vilka webbläsare? Genom att tillhandahålla färdiga klasser, är det bara att välja och vraka. Det finns inbyggt stöd för att anpassa layouten efter skärmstorleken.

  • Enhetlig stil. Visst vore det bra om alla formulär såg ut på liknande sätt, om meddelanden, flikar, knappar, länkar, progress bars, dialogrutor etc. vore enhetliga? Ramverk kan hjälpa till genom att tillhandahålla klasser som man kan använda till allt detta.

  • Hjälpklasser. Visst skulle man kunna skriva egen CSS för marginaler och padding, men varför göra det om ramverket ger en alla kombinationer man kan tänka sig? Likaså för ramar, rundade hörn, text- och bakgrundsfärger, skuggning och så vidare.

Bootstrap

Ett av dom populäraste CSS-ramverken, som ger en mycket bra grundstil. Om man inte gör några egna anpassningar, så kommer andra utvecklare och designers att se att du använt Bootstrap.

Jag rekommenderar att alltid använda Bootstrap eller något annat CSS-ramverk. Hjälpen är ovärderlig, och man tjänar inte mycket på att skriva all CSS själv.

Komponenter till ramverk

Ibland finns färdiga komponenter till ramverk, som kan implementera något som man har särskilt behov av. Det kan vara snygga, stajlade Javascript-komponenter eller något annat som underlättar livet som utvecklare. Här följer ett par exempel.

  • ngx-translate: Bibliotek för språkhantering i Angular.
  • React-Bootstrap: Integration för att smidigt kunna använda Boostrap-komponenter direkt från React och JSX.

Utmattning och framtiden

Många upplever en viss utmattning, när man försöker hänga med i utvecklingen. Det är i högsta grad förståeligt, för nya webbramverk dyker upp titt som tätt. Även om denna artikel skrevs i mars 2019, så tror jag att innehållet kommer fortsätta vara relevant många år framöver, av tre anledningar.

  1. Ramverk som kommer i framtiden, kommer fungera på nya sätt, men hjälper troligtvis till med samma sorts saker.

  2. Dom ramverk jag listat har redan funnits i många år (Angular 20161, React 2013, Vue 2014, Bootstrap 2011), och har alla aktiva gemenskaper som underhåller och vidareutvecklar dom.

  3. Efter att ha lekt och jobbat med webbtekniker sedan 2002, har jag en viss intuition för vad som verkar alltför omständligt och därför kommer falla ur bruk. Jag gör bedömningen att dessa ramverk är tillräckligt väldesignade för att hålla ett tag till.

Vi får väl se om jag får äta upp mina ord.

  1. Med ursprung i AngularJS från 2010 ↩