Bedste praksis: Frontend Frameworks til dit webprodukt

Hvad er det, der garanteret vil afskrække brugerne? En træg brugergrænseflade, inkonsekvente skrifttyper eller fejlplacerede knapper. Det er svært at vælge “vinderen”, men du ønsker ikke at have nogen af dem i den webapp, du arbejder på.

Godt nok kan du undgå at skabe dårlige brugergrænseflader ved at bruge den rigtige frontend-ramme. Læs videre og find ud af, hvilken der er min favorit.

Hvad er Frontend framework?

Frontend henviser typisk til den grænseflade, som brugerne interagerer med, når de surfer på nettet. Generelt henviser frontend til browseren, men det kan også betyde brugergrænsefladen i en app. Udviklere plejede at skrive alle koderne manuelt for at skabe elementerne, adfærd og udveksle data med backend.

En frontend-ramme forenkler opgaven ved at have forudskrevne koder, som du kan bygge på. Det tjener som et fundament, der indeholder almindeligt anvendte elementer som f.eks. gitteret, foruddefineret typografi og webstedselementer som knapper, rullebomme og sidepaneler.

Det sparer dig for at genopfinde hjulet for hvert projekt.

Markedsandel for UI frameworks

Der findes mere end en håndfuld UI frameworks, men 3 af dem er meget foretrukne blandt udviklerne.

Ledende i flokken er React, som har et gennemsnit på 7 millioner ugentlige downloads. Det overgår Vue.js og Angular med en betydelig afstand, da de to næstbedste i gennemsnit har 1,5 millioner og 500 tusind ugentlige downloads.

React

React blev udviklet af Facebook i deres forsøg på at skabe en højtydende og effektiv brugergrænseflade. Det er baseret på JavaScript og giver brugerne mulighed for at skabe web UI med dynamiske HTML-komponenter. Når komponenterne er designet, renderer React dem i overensstemmelse hermed baseret på de seneste data.

I React er komponenterne bygget til at indkapsle den tilstand, de befinder sig i. Dette gør det muligt for komponenterne at sende rige data rundt og kræver ikke DOM (Document Object Model) til at håndtere tilstanden.

Facebook udgav den første version af React i 2013. Et par år senere blev React Native introduceret til mobilapplikationer.

Med React er renderingslogikken tæt koblet tæt sammen med anden UI-logik. Det giver mulighed for en problemfri udførelse af hændelseshåndtering, tilstandsovergang og forberedelse af visningsdata. Dette er en afvigelse fra konventionel praksis, hvor markup og logik opbevares i separate filer.

Mens praksis med at have både markup og Javascript i den samme fil er misbilliget, giver det med React klarhed om visningen.

Den enkelhed, der kendetegner React, har betydet, at rammen er blevet brugt af nogle af de største virksomheder, herunder Twitter, Pinterest, Netflix og Udemy.

Pros ved React

• React bruger virtuel DOM, som er et udtræk af den faktiske DOM til rendering af brugergrænsefladen. Det er mere effektivt, da det tager mindre tid for komponenterne at blive vist på skærmen.
• Da komponenterne i Reacts er indkapslet, kan de bruges uafhængigt af hinanden uden begrænsninger.
• React er modelleret omkring funktionel programmering defineret af uforanderlige data, rene funktioner og deklarativ stil. Derfor er koder, der er oprettet med React, nemme at teste, vedligeholde og genbruge.
• Som det mest populære framework kan React prale af et stort globalt fællesskab. Det betyder også, at du har et stort udvalg af open source-pakker at arbejde med.
• React er proaktiv med hensyn til at opgradere og frigive nyere versioner af rammen. Du får rettidige fejlrettelser og forbedringer.
• Med React kan du implementere forskellige renderingsteknikker såsom client-side rendering(CSR), server-side rendering(SSR) eller endda statisk filgenerering

Cons of React

• Hvis du er ny i React, kan konceptet med at blande templating med logik (JSX) være forvirrende i begyndelsen.
• Der er for meget fokus på kernebiblioteket. Bekymringer som routing og global tilstandshåndtering er uddelegeret til ledsagebiblioteker. Ansvaret for, hvordan man udvikler med de forskellige biblioteker, falder i høj grad på udviklerne.
• Når projektet vokser, kan man miste “flow- og datakomponenterne”. Det faktum, at React-dokumentationen ofte er ufuldstændig, ikke takket være den hurtige vækst, forværrer sagen yderligere.

Hvornår skal du bruge React

React er det ideelle front-end framework til opbygning af en webapplikation, der forventer høj interaktion og ofte skiftende tilstande. Dens unikke tilgang med brug af den virtuelle DOM betyder, at webappen kan reagere hurtigt på brugernes input og dynamisk gengive brugergrænsefladen.

Hvis du bygger en webapplikation med lidt tid til overs, vil du også finde React som den rette løsning. Dens genanvendelige komponenter viser sig at være med til at skære udviklingstiden ned.

Vue.js

Vue.js mangler måske genkendelige navne i form af adoptanter, men det er stadig et meget populært framework blandt udviklere. Frameworket blev skabt i 2014 af Evan You. Det er enkelt og alsidigt og giver udviklere mulighed for at tackle dynamiske processer uden behov for yderligere biblioteker.

Lige React er Vue.js baseret på en virtuel DOM. Udover det er det letvægtigt og understøtter tovejs databinding. At være et framework af lille størrelse er også med til at øge frontend’ens ydeevne.

Pros ved Vue.js

• Vue.js har omfattende og kortfattet dokumentation, som hjælper dig med at lære rammen som nybegynder.
• Den bruger virtuel DOM, hvilket forbedrer renderingseffektiviteten.
• Vue.js er meget integrerbar. Mindre Vue.js-komponenter kan integreres problemfrit i eksisterende infrastruktur uden nogen negativ effekt.
• Det tilbyder reaktive og sammensættelige visningskomponenter.
• Skabeloner, der oprettes fra Vue.js, er i HTML-format. Det er et pluspunkt for udviklere, der er fortrolige med HTML.
• Den samlede rammestørrelse er kun 18 kB, hvilket gør Vue.js utrolig let og forbedrer UX-ydelsen.

Kontra ved Vue.js

• Vue.js-fællesskabet er relativt lille, da det mangler popularitet. Derfor er det ret svært at få kollegial støtte.
• De fleste diskussioner om Vue.js foregår på kinesisk, da rammen er meget populær blandt kinesiske virksomheder. Sprogbarrieren gør kommunikationen vanskelig for udviklere andre steder.
• Manglen på erfarne udviklere, support fra fællesskabet og problemer med komponentstabilitet gør det risikabelt at bruge Vue.js i store projekter.

Når man skal bruge Vue.js

Vue.js er fantastisk til at skabe en simpel applikation med én side. Det har en lav indlæringskurve, hvor udviklere hurtigt kan lære at lære rammerne at kende. Det er dog ikke beregnet til komplicerede projekter endnu, da det ikke er let at få en ekspert i Vue.js.

Angular

Angular, som er skabt på baggrund af TypeScript, er en omfattende frontend-ramme fra Google. Det blev udgivet i 2016 og er bygget med den objektorienterede programmeringstilgang. Rammerne har tovejs databinding, hvilket fungerer godt i forbindelse med udvikling af web- og mobilapps.

Der er Angular et af de mest omfattende frameworks nogensinde, da udviklere kan løse komplicerede opgaver inden for selve rammen. Der er ikke behov for yderligere biblioteker ved udvikling af komplekse UI/UX.

Pros ved Angular

• App-logikken og UI-laget er afkoblet med Angular’s Model-View-Controller-arkitektur. Den understøtter også adskillelse af bekymringer.
• Du kan omgå standard DOM-rendering af skabelonen ved at opsnappe renderingsopkald. Rendereren kan f.eks. konfigureres til at ændre brugergrænsefladen dynamisk.
• Angular har stærk understøttelse for opbygning og håndtering af dynamiske formularer. Skabeloner kan bruges til at oprette nye formularer baseret på en dynamisk skiftende datamodel.
• RxJS-biblioteket er installeret sammen med Angular. Det er et bibliotek, der understøtter reaktiv programmering med observerbare streams for nemt at håndtere asynkron kode.
• Services og afhængighedsinjektion i Angular gør det nemt at genbruge, teste og vedligeholde komponenter. Funktionen hjælper større projekter, da afhængigheder kan kaldes fra eksterne kilder i stedet for at blive oprettet i klassen.
• Angular’s ahead-of-time-kompilering resulterer i hurtigere indlæsningstid og øget sikkerhed. I denne proces oprettes JavaScript-koden under opbygningsfasen i stedet for efter download af browseren.

Cons of Angular

• Nogle personer kan have svært ved at forstå Angular-arkitekturen i flere lag, og det kan påvirke fejlfinding på rammen. Debugging af en større Angular-baseret app kan være en ulidelig proces.
• Webapplikationer, der er oprettet med Angular, har begrænsede SEO-muligheder, som kan være svære at nå for søgemaskinecrawlere.
• Udviklere, der er fortrolige med JavaScript, vil finde Angular relativt svært sammenlignet med React og Vue.
• Angular bruger Typescript i stedet for det mere almindelige JavaScript.

Hvornår skal Angular bruges

Angular er det rette framework, når der skal oprettes et stort virksomhedswebsted eller et storstilet projekt med en kompleks infrastruktur. Det er også velegnet til projekter, der involverer progressive webapplikationer (PWA).

Hvorfor bruger vi React

React er utvivlsomt vores foretrukne frontend-ramme. Her er hvorfor vi elsker det:

1. Vi er i stand til at bruge React på tværs af projekter af forskellig kompleksitet. Det fungerer til at skabe en MVP, Startup, Enterprise og E-commerce-løsning.
2. React giver os tempo til at bygge enkle og skalerbare løsninger. Det har altid været en fornøjelig oplevelse at arbejde med React.
3. Vores udviklere behøver ikke længere at bygge komponenter fra bunden. React’s store antal biblioteker og værktøjer reducerer udviklingstiden drastisk.
4. Vi får mulighed for at skabe ærefrygtindgydende brugergrænseflader til vores produkt ved at bruge open source React-komponenter som Ant Design og Material AI.
5. React er vel nok den mest populære front-end-ramme. Vi behøver ikke at bekymre os om vedligeholdelse og tilpasning, da det har et livligt fællesskab af udviklere. Det er en anden historie, hvis vi bruger Vue.js eller Angular.
6. Det er nemmere at finde en React-udvikler til vores team sammenlignet med andre frameworks.

Vi har med succes udviklet et par projekter med React, og her er to bemærkelsesværdige projekter.

Apprvl

Apprvl er en app, der er skabt til fotografer for at forenkle klientgodkendelser af deres billeder. Fotografer kan uploade deres værker via appen og få kommentarer ved at dele de genererede links med deres kunder.

Vores løsning

Vi starter med at bygge de vigtigste funktionelle dele på web-appen for at teste hypoteserne med rigtige brugere. På baggrund af tilbagemeldingerne foretager vi passende ændringer i delene.

Dernæst fortsætter vi med at opbygge en skalerbar backend-arkitektur og kickstarter webapp-udviklingen.

Vi gennemførte den fulde cyklusudvikling af apprvl baseret på MVP’en.

Resultater

Med React er vi i stand til at levere en MPV, der opfylder alle krav. Det er leveret med et minimum af fejl i hele udviklingscyklussen og skalerbart til fremtidig udvikling.

Plai

Plai er et gratis værktøj til måling af ydeevne, der hjælper med at vokse, koordinere og engagere et fjernteam.

Vores løsning

Vi startede projektet med opdagelsesfasen for at identificere de faktiske problemer og behov hos startup-ejere.

Baseret på tilbagemeldingerne bruger vi React til at skabe webappen. Det giver os mulighed for at udvikle MVP’en meget hurtigt.

Når MVP’en er blevet testet og valideret, går vores team videre med at udvikle den fulde app.

Resultat

MVP’en er leveret med den højeste kvalitet og opfylder alle krav. I dag fortsætter webappen med at vokse, da vi tilføjer flere værdifulde funktioner.

Summary

Du har ikke råd til at levere en sjusket brugergrænseflade eller spilde for meget tid på at bygge komponenter til webappen. Udnyt bekvemmeligheden og effektiviteten af en frontend-ramme til at føre dine idéer ud i livet.

Der findes ikke en ramme, der passer til alle. Hvis du skal bygge en simpel app og har meget lidt tid til overs, skal du vælge React eller Vue.js. Vælg kun Angular, hvis du bygger en kompleks webløsning, fordi smerten ved debugging af appen er reel.

Hvis du er i tvivl, vil jeg gerne vejlede dig med den bedste løsning. Smid mig en mail her.