React vs. React Native: Hvad er forskellen?

React og React Native er to effektive teknologier, der ligger bag nogle af de mest populære web- og mobilapplikationer i verden i dag. Du er sikkert ikke engang klar over det, men du bruger mindst en af de to hver eneste dag. Så hvad er forskellen mellem React vs. React Native?

React og React Native er to teknologier, der anvendes til udvikling af web- og mobilapplikationer. Begge bruger JavaScript og er kendt for at opbygge brugergrænseflader (UI) til web og mobiler.

Når du læser videre, vil vi opdele forskellene mellem React og React Native, definere deres styrker og svagheder og give nogle eksempler på virksomheder, der har taget de to teknologier i brug.

Hvad er React?

React, eller ReactJS, er et open source JavaScript-bibliotek til opbygning af brugergrænseflader, specielt til applikationer med en enkelt side. React blev først udtænkt af Jordan Walke, en softwareingeniør på Facebook tilbage i 2012 - hvor teknologien blev udviklet internt, før den blev implementeret på Facebook.com og senere på Instagram.com.

React skulle være uddraget fra Facebooks kodebase så Instagram kunne bruge det, hvilket på en måde betyder, at Instagram var den første "eksterne" bruger af React. Dette førte til open-sourcing af teknologien for resten af verden.

React er designet på en måde, der gør det nemt at integrere med eksisterende kode eller andre biblioteker. Det primære formål er at forenkle processen med at udvikle og opbygge webapplikationer, der er hurtige, skalerbare og enkle.

Hvad er React Native?

React Native er den yngre søskende til React. Efter den strålende modtagelse af React i 2013 begyndte Facebook at arbejde på en mobil ramme på tværs af platforme for at kunne følge med techgigantens voksende mobilbehov. I marts 2015 meddelte Facebook, at teknologien var åben og tilgængelig på Github.

Ligesom React er React Native også baseret på JavaScript, men er designet til at bygge native mobilapplikationer med genanvendelige komponenter. Hvad betyder det? Forestil dig, at en bygherre brugte et andet bor til at bygge et hus og en lejlighed. Det ville være besværligt og unødvendigt. Før React Native måtte app-udviklere bruge forskellige værktøjer til forskellige platforme, ligesom en bygherre har et særligt bor til hver type bygning, han bygger.

Det er her, den virkelige styrke i React Native ligger. React Native gør det muligt at skabe applikationer på tværs af flere platforme (Windows, Android, iOS) problemfrit og problemfrit. Som alle søskende har React og React Native ligheder, men også tydelige forskelle, som vi vil uddybe senere.

Kilde: Unsplash

React Native vs. React: Hvordan fungerer de?

Virtuel dokumentmålsmodel (DOM) til React

The Dokumentobjektmodellen (DOM) er en vigtig programmeringsgrænseflade, som er en repræsentation af et webdokument og alt dets indhold. Bibliotekernes og rammeværkernes evne til at håndtere DOM påvirker i høj grad, hvordan de i sidste ende bruges og ses.

Den banebrydende funktion i React er Virtuel DOM. Virtuel DOM er en virtuel repræsentation af den virkelige DOM, hvilket betyder, at alle visningsændringer foregår i hukommelsen og ikke på skærmen. For vores ikke-tekniske læsere er det vigtigt at forstå, at Virtual DOM er hurtigere, giver højere ydeevne og bedre brugeroplevelse sammenlignet med manuel håndtering af DOM-ændringer.

Native API'er til React Native

På den anden side bruger React Native native Application Program Interface (API) ved rendering af brugergrænseflader. Her er en definition fra Webopedia hvis du er usikker på API:

"API er et sæt af rutiner, protokoller og værktøjer til opbygning af softwareapplikationer. Med andre ord specificerer et API, hvordan softwarekomponenter skal interagere."

I modsætning til andre cross-platform frameworks som Cordova eller PhoneGap gør React Native visse kodekomponenter klar med native API'er. React Native leveres med native moduler og komponenter, der forbedrer ydeevnen.

Forskelle mellem React og React Native

De fleste søskende har nogle fælles træk, hvad enten det er en fælles interesse for sport, musik eller lignende personlighedstræk. Når det er sagt, vil de fleste søskende være enige om, at de har lige så mange forskelle som fælles ting. Det samme gælder for søskendeparret React og React Native. Selv om de har ligheder, er der nogle ret tydelige forskelle mellem de to. Det er bedst at opdele dem i i følgende kategorier:

Funktion:

• React er et open source JavaScript-bibliotek, der primært bruges til at skabe brugergrænseflader til webapplikationer.
• React Native er en open source-ramme til oprettelse af mobilapps på tværs af platforme på iOS, Android og Windows.
• React er primært designet til webapplikationer, mens React Native er udviklet med det formål at udvikle mobilapplikationer på tværs af platforme.
• React Native er udtrykkeligt designet til at bygge responsive mobile brugergrænseflader.

Afhængighed af platform:

• React er ikke afhængig af en bestemt platform, hvilket betyder, at den kan udføres på tværs af alle slags platforme.
• React Native er (til en vis grad) platformsafhængig. Mens en stor procentdel af koden kan deles på tværs af flere platforme, er der også en procentdel platformsspecifik kode, der er tilpasset hver enkelt platform, f.eks. iOS eller Android.

HTML-tags

• HTML-tags bruges i React. Teknologien består af to dele - Komponenter og HTML-dokument
• Der anvendes ingen HTML-tags i React Native.

Navigation

• React navigation er direkte baseret på React og er fuldstændig integreret med JavaScript, hvilket er ideelt til indlæsning af webapplikationer.
• React Native er lidt mere kompliceret og bruger sit eget navigationsbibliotek til at navigere i mobilapplikationer, hvilket muliggør vigtig mobil ydeevne.

Fordele og ulemper ved React

Fordele ved React

Nedenfor er anført nogle af de almindeligt accepterede fordele af React.

1. Let at lære/let at bruge

   Selv om ingen teknologi er let at lære, er der mange tutorials og uddannelsesressourcer til rådighed for dem, der ønsker at lære React. Det er også lettere at lære for dem, der allerede har en baggrund i JavaScript.

2. En dynamisk webapplikation gjort let

   Tidligere var det svært at skabe velfungerende webapplikationer ved hjælp af HTML på grund af kompleksiteten af koden, men React løste dette problem, fordi der kræves mindre kodning, hvilket giver større funktionalitet.

3. Genanvendelige komponenter

   En applikation, der er lavet med React, bruger flere komponenter. Disse komponenter har hver deres egen logik og rendering, som kan genbruges, når der er behov for det. Dette genbrug gør det nemt at udvikle og vedligeholde applikationen.

4. Optimeret ydeevne

   Som tidligere nævnt er Virtual DOM en af de definerende funktioner i React. Processen med Virtual DOM garanterer en minimal opdateringstid til den rigtige DOM, hvilket igen giver højere ydeevne og bedre brugeroplevelse.

5. Stort fællesskab

   Siden React blev gjort open source i 2013, har udviklere fra hele verden kunnet bruge og forbedre den. React-fællesskabet leverer værdifulde biblioteker, der letter React-udviklingsprocessen.

Ulemper ved React

Nedenfor er anført nogle af de mest almindeligt accepterede ulemper af React:

1. Udvikling i højt tempo

   React-miljøet ændrer sig konstant, hvilket gør det svært for udviklere at holde sig ajour med de konstante opdateringer. De fleste moderne webframeworks har dette træk til fælles, så selv om det måske ikke er en ulempe i sig selv, er det stadig noget at kæmpe med for React-udviklere.

2. JSX

   React bruger JavaScript XML (JSX). JSX er en udvidelse, der gør det muligt at skrive HTML i React. Mange udviklere bryder sig ikke om JSX-dokumentation og mener, at det er svært for juniorudviklere at forstå.

Fordele ved React Native

Nedenfor er nogle af de bredt accepterede fordele ved React Native:

1. Hurtigere udvikling

   React Native bruger JavaScript, hvilket får appudvikling til at føles mere som webudvikling, med flere iterationer og større fleksibilitet. Dette har også den ekstra fordel, at webudviklere nemt kan forbedre deres færdigheder og bygge React Native-apps.

2. Genanvendelig kode

   React Native's største bedrift er, at den muliggør funktionalitet på tværs af platforme. Dette opnås til dels ved hjælp af genanvendelig kode, der kan anvendes på både iOS og Android.

3. Færre insekter

   Der er mindre behov for fejlfinding og optimering med React Native, fordi det kan implementeres på flere platforme. Én app at bygge betyder overvågning af kun én backlog, ensartede versionsopdateringer og ét sæt fejl, der skal rettes.

4. Fællesskab drevet

   React Native blev oprindeligt udviklet på et Facebook-hackathon i 2013, og siden da har teknologien været drevet af fællesskabet. Det er en stor fordel, fordi et stort fællesskab, der er villigt til at dele sin viden og ekspertise, kataloger og åbent tilgængelige komponenter, vil drive udviklingen af teknologien.

5. Lavere omkostninger

   Ovennævnte fordele kan alle koges ned til én samlet fordel ved React Native - lavere omkostninger. En React Native-applikation skal bygges én gang med den ekstra fordel, at der kun bruges en enkelt kodebase (for det meste). Det betyder ét team, hvilket sparer på løn- og administrationsomkostninger. Den anden omkostningsbesparelse kommer fra den MIT-licens, som React Native distribueres under. Brugerne behøver ikke at offentliggøre kilden til koden, alle kan ændre softwaren, og ændringer i koden behøver ikke at blive rapporteret. Rammerne er helt licensfrie, så der er ingen grund til at betale eller dele for noget, der udføres inden for rammerne.

Ulemper ved React Native

Nedenfor er de mest udbredte ulemper ved React Native anført:

1. Konstante opdateringer

   React Native opdateres løbende, og det medfører fejlrettelser, nye portene native komponenter, ydelsesforbedringer og forbedrede brugerdefinerede komponenter. Opdateringer er ikke nødvendigvis en ulempe, men noget, som React Native-udviklere skal overveje i forhold til et mere udviklet framework.

2. Mangler tilpassede moduler

   React Native stadig mangler visse komponenter, mens andre endnu ikke er fuldt udviklet. De fleste React Native-udviklere vil ikke støde på dette problem, men de, der gør det, må finde måder at omgå det på ved at bygge en løsning fra bunden eller hacke en eksisterende løsning. Oprettelse af et brugerdefineret modul kan også resultere i tre separate kodebaser (Android, iOS, RN) i stedet for kun én.

React vs. React Native Eksempler

Du er nået så langt, at vi har defineret React og React Native, skitseret deres forskelle og gennemgået hver teknologis fordele og ulemper.

Nu undrer du dig sikkert over, hvor de to overhovedet bruges? Eller endnu bedre, har jeg allerede brugt en app skrevet i React eller React Native uden at vide det? Medmindre du bor på en ø eller dybt inde i en hule uden adgang til teknologi, så er svaret næsten helt sikkert ja.

Her er nogle eksempler fra den virkelige verden på både React og React Native:

React

Facebook Web-version

React blev først udviklet på Facebook i 2011, da en softwareingeniør ved navn Jordan Walke stod i spidsen for oprettelsen af biblioteket. React blev først brugt til nyhedsfeed, men bruges i vid udstrækning (sammen med andre teknologier) til webversionen af Facebook.com.

Instagram webversion

Facebook købte Instagram i 2012 og havde på det tidspunkt ikke en webversion af appen. Efter overtagelsen af den populære sociale medieplatform blev React hurtigt implementeret til at udrulle webversionen af Instagram. Siden da har webversionen været 100% baseret på React-biblioteket.

Asana

Asana er et førende projektstyringsværktøj, der bruges af virksomheder over hele verden. Værktøjet har over 30.000 betalende kunder, herunder Spotify, Uber, Autodesk og Trivago. Oprindeligt var værktøjet baseret på Luna og voksede hurtigt, og med det fulgte problemer - mest relateret til skalering. Efter dette blev beslutningen truffet om at omskrive frontend'en, og React blev valgt til at gøre det.

Netflix

Netflix er en anden stor spiller, der bruger React. Streaminggiganten bruger React på sin platform kaldet Gibbon, som bruges til tv-enheder med lav ydelse. React-biblioteket har også hjulpet med opstartshastighed, køretid, ydeevne, modularitet og forskellige andre fordele, som skrevet på Netflix-blog.

React Native

Facebook AppEfter succesen med React forsøgte Facebook at overføre alle fordelene ved React - f.eks. hurtige iterationer og et enkelt team til at bygge hele produktet - til mobilen. Slutresultatet blev React Native, som blev udnyttet til udvikling af mobilapps til iOS- og Android-apps.

Facebook-app

Efter succesen med React forsøgte Facebook at overføre alle fordelene ved React - f.eks. hurtige iterationer og et enkelt team til at bygge hele produktet - til mobilen. Slutresultatet blev React Native, som var udnyttet i udviklingen af mobilapps til iOS- og Android-apps.

Kilde: Unsplash

Instagram-app

Efter Facebooks overtagelse af Instagram blev React Native integreret i Instagrams native app, startende fra push-meddelelsesvisningen, som oprindeligt blev implementeret som WebView. Der var et par hikke undervejs, men Instagrams udviklerteam forbedrede hastigheden betydeligt. Mellem 85% og 99% kode blev delt mellem Android- og iOS-apps, hvilket resulterede i en must hurtigere udvikling af appen.

Kilde: Flickr

Skype

I 2017 meddelte Skype, at de arbejder på en helt ny app, der skal skrives i React Native. Resultatet blev en app, der blev fuldstændig fornyet, herunder layoutet, ikonerne og endda nogle nye, smarte funktioner. Microsoft besluttede endda at bruge React Native ikke kun til de mobile platforme, men også på Windows desktop-appen.

Tesla

Elbilsvirksomheden udviklede sin mobilapplikation med React Native. Appen er designet til at diagnosticere og lokalisere et køretøj og til delvist at styre det ved hjælp af en smartphone.

Kilde: Flickr

WIX

Den berømte hjemmesidebyggers mobilapplikation er helt skrevet i React Native. Tal Kol, tidligere chef for mobile engineering hos Wix, talte på ReactNext 2016 om, hvordan React Native er en teknologi, der ændrer spillet for Wix.

Resumé

React og React Native er teknologier, som kun bliver mere og mere populære blandt udviklere. Måske var du ikke klar over, at mange af dine yndlings mobil eller webapplikationer bruger den ene eller den anden, før du læste dette. Forhåbentlig har du nu fået en bedre forståelse af React vs. React Native, deres ligheder, forskelle og ulemper. Efterhånden som deres popularitet fortsætter med at vokse, kan vi forvente at se dem blive endnu mere udbredt af udviklere verden over.