Hvad er React og hvordan skaber man moderne web- og mobilapplikationer med det?

React har i løbet af de sidste mange år opnået enorm popularitet blandt udviklere, og dens anvendelse har ændret den måde, vi udvikler applikationer på, både for web og mobile platforme. I denne sammenhæng er det vigtigt at forstå, hvad React er, hvordan det fungerer, og hvordan man bedst udnytter det til at bygge effektive, moderne applikationer.

React er et JavaScript-bibliotek, der primært bruges til at bygge brugergrænseflader (UI). Det blev oprindeligt udviklet af Facebook og gør det muligt for udviklere at opbygge dynamiske og interaktive brugergrænseflader, hvor brugerens input hurtigt og effektivt kan bearbejdes. Reacts vigtigste styrker ligger i dets enkle, deklarative syntaks og den måde, hvorpå det effektivt håndterer opdatering og rendering af UI-komponenter.

En af de grundlæggende egenskaber ved React er, at det kun håndterer "view"-laget i en applikation, hvilket betyder, at det kun er ansvarligt for at vise data og reagere på brugerinteraktioner. Dette gør det muligt for udviklere at bruge andre biblioteker eller værktøjer til at håndtere resten af applikationen, som f.eks. datahåndtering og routing. Denne adskillelse af bekymringer (separation of concerns) gør det lettere at bygge modulære og vedligeholdelsesvenlige applikationer.

En af de mest fundamentale funktioner i React er brugen af komponenter. Komponenter er byggestenene i enhver React-applikation, og de giver udviklere mulighed for at oprette genanvendelige UI-elementer. Hver komponent kan have sin egen interne tilstand (state) og modtage data som "props" fra sine forældrekomponenter. Dette giver en struktureret måde at bygge komplekse brugergrænseflader på, hvor hver komponent er ansvarlig for en del af UI'et.

React gør brug af JSX (JavaScript XML), som er en syntaks, der gør det muligt at skrive HTML-lignende kode direkte i JavaScript. JSX gør det lettere at beskrive UI-struktur og dynamisk indhold, og det adskiller sig fra traditionel HTML ved at give udvikleren mulighed for at blande JavaScript-logik med HTML-lignende markering. For eksempel kan du nemt integrere variabler og funktioner i JSX, hvilket gør det muligt at bygge interaktive elementer som knapper, formularer og dynamiske lister.

I React håndteres komponenternes tilstand ved hjælp af "state". Når tilstanden ændres, sørger React for at opdatere den relevante del af brugergrænsefladen. Dette gør det muligt at bygge applikationer, hvor UI'et automatisk reagerer på ændringer i data, hvilket giver en mere dynamisk og interaktiv brugeroplevelse.

For at håndtere ændringer i tilstanden på en effektiv måde benytter React en række hooks. Hooks er funktioner, der giver udviklere mulighed for at bruge React's tilstands- og livscyklushåndtering i funktionelle komponenter. En af de mest anvendte hooks er useState, der bruges til at oprette og opdatere tilstand i en komponent. Andre hooks som useEffect og useContext giver yderligere funktionalitet, som hjælper med at administrere sideeffekter og dele data mellem komponenter.

En vigtig faktor ved brug af React er ydeevne. Når en komponent tilstand ændres, sørger React for at opdatere UI'et effektivt uden at skulle opdatere hele siden. Dette opnås gennem en virtuel DOM, der sammenligner ændringer i tilstanden med den faktiske DOM og kun opdaterer de nødvendige dele af UI'et. Denne optimering gør React-applikationer hurtigt og responsivt.

En af de vigtigste opdateringer, der blev introduceret i nyere versioner af React, er funktionen "Hooks", som er blevet et uundværligt værktøj for udviklere. Hooks gør det muligt at bruge funktionelle komponenter uden at skulle bekymre sig om klasser, og de giver en enklere og mere elegant måde at håndtere tilstand, livscyklus og kontekst på. Med hooks kan du f.eks. nemt dele logik mellem komponenter og optimere ydeevnen ved at memoize funktioner og komponenter.

Det er også vigtigt at bemærke, at React kan bruges både til webapplikationer og mobile applikationer gennem React Native. React Native gør det muligt for udviklere at bygge native mobilapplikationer ved at bruge de samme grundlæggende principper som React. Ved at bruge React Native kan udviklere skrive applikationer, der fungerer på både iOS og Android, samtidig med at de genbruger deres eksisterende viden og kodebase fra webapplikationer.

Reacts styrke ligger i dens evne til at håndtere dynamiske og interaktive applikationer på tværs af forskellige platforme, samtidig med at den giver udviklerne frihed til at vælge de bedste værktøjer til opgaven. Ved at udnytte React og React Native kan man skabe applikationer, der er både hurtigt reagerende og lette at vedligeholde, hvilket gør det muligt at fokusere på at skabe de bedste brugeroplevelser.

Derudover er det vigtigt at forstå, at selvom React giver meget kraftfulde værktøjer, kræver det også en god forståelse af de underliggende koncepter som komponentstruktur, tilstandshåndtering, og hvordan man arbejder med sideeffekter. Det er også afgørende at forstå, hvordan React fungerer sammen med andre biblioteker og værktøjer som Redux for tilstandshåndtering, eller React Router for navigering i applikationen.

For at få det maksimale udbytte af React, bør udviklere konstant holde sig opdateret med nye versioner og funktioner, da React er et meget aktivt projekt, og der er løbende forbedringer og opdateringer. React's community er også en vigtig ressource, da det tilbyder en stor mængde dokumentation, tutorials og open-source projekter, som kan hjælpe både begyndere og erfarne udviklere.

Hvordan type-sikkerhed og validering fungerer i TypeScript: Grundlæggende typer og deres anvendelse

TypeScript tilbyder et kraftfuldt system til statisk typekontrol, som giver mulighed for at definere og sikre datatyper på en mere præcis måde end JavaScript. I dette afsnit gennemgår vi nogle af de grundlæggende typer i TypeScript, deres anvendelse, samt de sikkerhedsforanstaltninger, de giver, når man arbejder med komplekse datastrukturer.

Den unknown type er en af de mest nyttige typer, når man har brug for at repræsentere en værdi, hvis type ikke er kendt på forhånd. Denne type adskiller sig markant fra typen any, som tillader alle typer at blive tildelt uden restriktioner. Med unknown skal du dog eksplicit bekræfte eller indsnævre typen, før du kan arbejde med variablen. Dette hjælper med at forhindre fejl, da det forhindrer utilsigtede operationer på værdier af unknown-type uden først at validere deres type.

Et typisk anvendelsestilfælde for unknown findes ofte i catch-klausuler, hvor typen af fejlen ikke er kendt på forhånd. Her tvinges udvikleren til at kontrollere typen af fejlen, før den kan anvendes. Eksemplet viser, hvordan det gøres ved hjælp af TypeScript:

typescript
Copy code
try {
  // some operation that might throw
} catch (error: unknown) {
  if (error instanceof Error) {
    console.log(error.message);
  }
}

I dette tilfælde hjælper unknown typen med at sikre, at fejlhåndteringen bliver korrekt, idet vi tvinges til at validere fejlen før interaktion.

En anden grundlæggende type i TypeScript er void, som bruges til at indikere fraværet af en returværdi. Funktioner, der ikke returnerer noget, får ofte typen void:

typescript
Copy code
function warnUser(): void {
  console.log("This is my warning message");
}

Null og undefined er typer, der repræsenterer fraværet af en værdi. De er dog ikke meget nyttige alene. De spiller en væsentlig rolle i valgfri typer, hvor en værdi kan være af en given type eller undefined. Et eksempel på dette kunne være, når man definerer en funktion, hvor en parameter er valgfri:

typescript
Copy code
function greet(name?: string) {
  return `Hello ${name}`;
}

greet("Mike");
greet(undefined);  // OK
greet();  // Also OK

Never typen er måske den mest mystiske af dem alle. Den bruges til at repræsentere funktioner, der aldrig returnerer en værdi eller aldrig når slutningen af deres udførelsesvej. Eksempler på funktioner, der bruger never, er dem der kaster fejl eller indeholder uendelige løkker:

typescript
Copy code
function throwError(errorMsg: string): never {
  throw new Error(errorMsg);
}

function infiniteLoop(): never {
  while (true) {}
}

Det er essentielt at forstå disse grundlæggende typer, da de giver et stærkt fundament for TypeScripts type-sikkerhed, og gør det muligt at skrive mere robust og vedligeholdelsesvenlig kode.

Som man dykker dybere ned i TypeScript, vil man opdage, at der er behov for mere avancerede værktøjer til at definere og manipulere komplekse typer. Interfaces og type aliases er essentielle værktøjer til at arbejde med mere komplicerede datastrukturer. Interfaces definerer kontrakter for objekter, og beskriver præcist, hvilken form et objekt skal have. En interface kan defineres som følger:

typescript
Copy code
interface User {
  name: string;
  email: string;
}

Denne interface kan derefter bruges til at typechecke objekter af typen User:

typescript
Copy code
const user: User = {
  name: "Alice",
  email: "[email protected]",
};

Hvis et objekt, der ikke matcher interfacen, tildeles denne variabel, vil TypeScript kaste en fejl.

En type alias fungerer på mange måder ligesom en interface, men kan også bruges til at definere andre typer, ikke kun objekter. For eksempel kan en type alias bruges til at definere en type for et punkt i et todimensionelt rum eller en ID, der kan være enten et tal eller en streng:

typescript
Copy code
type Point = { x: number; y: number; };
type ID = number | string;

En vigtig forskel mellem interfaces og type aliases er, at interfaces kan udvides (de kan erklæres flere gange og vil blive slået sammen), mens type aliases ikke kan ændres efter deres oprindelige definition. Type aliases er dog mere fleksible, da de kan definere komplekse typer som union- og intersection-typer.

For at opsummere: Hvis du definerer formen af et objekt, er det ligegyldigt, om du bruger en interface eller type alias – det handler om præference. Hvis du arbejder med andre typer, som ikke nødvendigvis er objekter, bør du bruge type aliases.

Når du begynder at anvende TypeScript i en React-applikation, får du mulighed for at typechecke forskellige komponenter, props, tilstande og hændelseshåndterere. TypeScript kan hjælpe med at sikre, at dine React-komponenter kun modtager de rigtige typer af props, hvilket gør din applikation mere robust. Et eksempel på type-checking af props i en React-komponent kunne være:

typescript
Copy code
type GreetingProps = { name: string; };

const Greeting = ({ name }: GreetingProps) => {
  return <div>Hello, {name}!</div>;
};

Her defineres GreetingProps, som angiver, at komponenten Greeting skal modtage en prop, der hedder name, og som skal være en streng. Denne form for type-checking giver udvikleren præcise garantier om, hvilke data der kan bruges i komponenten.

Med disse typer og værktøjer i TypeScript får du mulighed for at skrive mere sikker og præcis kode. Det er et fundamentalt skridt mod at udnytte de avancerede funktioner i TypeScript og skabe bedre, fejlfri applikationer.

Hvordan opdele kode ved hjælp af Lazy Components og Suspense i React

I React-applikationer er kodeopdeling (code splitting) en central teknik til at optimere ydeevnen ved at dele applikationen op i mindre, dynamisk indlæste pakker. Denne teknik gør det muligt for applikationen at indlæse kun den nødvendige kode, når den er nødvendig, og undgår at indlæse store mængder data unødigt. I denne kontekst kommer vi til at dække, hvordan lazy components og Suspense kan bruges til at implementere kodeopdeling på en effektiv måde.

I React kan komponenter markeres som "lazy" for at indlæse dem asynkront, hvilket betyder, at komponenten først bliver hentet, når den er nødvendigt. Dette er særligt nyttigt for sider, der ikke skal være synlige ved første rendering, og som derfor kan indlæses senere, efterhånden som brugeren navigerer gennem applikationen.

Når du bruger lazy components, kan du bruge React.lazy() til at definere komponenter, der skal indlæses dynamisk. Dette kan gøres ved at kombinere det med Suspense-komponenten, der giver mulighed for at vise et fallback-indhold, mens den nødvendige kode bliver hentet.

For eksempel, i følgende kode, definerer vi to lazy page-komponenter:

javascript
Copy code
const First = React.lazy(() => import("./First"));
const Second = React.lazy(() => import("./Second"));

Disse komponenter, First og Second, er lazy-loadede komponenter, der hentes kun, når de aktiveres. Suspense-komponenten bruges til at vise et fallback-indhold, mens komponenten bliver hentet:

javascript
Copy code
function Layout() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/first" component={First} />
      <Route path="/second" component={Second} />
    </Suspense>
  );
}

Suspense hjælper med at vise en indlæsningsindikator (for eksempel en spinner eller en besked) indtil den relevante kodepakke er hentet og komponenten kan blive rendere. Dette betyder, at applikationen ikke fryser eller bliver langsom under brugen, hvilket forbedrer brugeroplevelsen betydeligt.

En vigtig overvejelse, når man anvender lazy loading, er, at ikke alle komponenter skal være lazy. Hvis flere komponenter ofte bruges samtidig, kan det være mere effektivt at inkludere dem i den samme bundle, for at undgå flere samtidige HTTP-forespørgsler, som kan forsinke indlæsningstiden. For eksempel, hvis komponenter som One, Two, og Three ofte bliver brugt sammen i en side, ville det ikke give mening at gøre dem lazy, da de ville blive hentet samtidigt uanset hvad.

Når du arbejder med lazy components i en router, er det vigtigt at forstå, hvordan routes fungerer i React. For at gøre det muligt at opdele koden ved hjælp af routes, kan du definere dine pages som lazy-loaded komponenter, og bruge en router til at indlæse den nødvendige komponent baseret på ruten.

Her er et eksempel, hvor vi bruger react-router til at navigere mellem de lazy-loaded komponenter:

javascript
Copy code
function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Route path="/first" component={First} />
        <Route path="/second" component={Second} />
      </Suspense>
    </BrowserRouter>
  );
}

Denne tilgang sikrer, at applikationen kun indlæser de nødvendige komponenter, når de skal vises, og sparer derved både båndbredde og ressourcer.

Det er også vigtigt at bemærke, at når du bruger lazy loading i en applikation, kan du have mere kontrol over, hvordan du strukturerer din kode og opnår en bedre opstartstid, fordi de tunge komponenter og deres afhængigheder først bliver hentet, når de faktisk bliver brugt.

Suspense og lazy loading fungerer sammen for at give en mere smidig oplevelse, hvor brugeren ikke behøver at vente på, at hele applikationen bliver hentet. Suspense fungerer som en wrapper omkring de komponenter, der skal være lazy, og gør det muligt at vise et indlæsningsfald, som opretholder brugerens oplevelse, mens koden bliver indlæst.

Når du arbejder med kodeopdeling, bør du også tænke på, hvordan du strukturerer dine bundles. At dele applikationen op i små, logisk adskilte pakker gør det muligt at optimere både starttiden og den generelle ydeevne. For applikationer, der har mange ruter og sider, kan det være en god idé at lave bundler for hver side og kun hente de relevante pakker, når brugeren navigerer til dem.

For at optimere din applikation endnu mere kan du også bruge React.memo for at forhindre unødvendige renderinger af komponenter, der ikke har ændret sig, og dermed reducere den overordnede belastning på browseren. Dette kan være en effektiv måde at maksimere ydeevnen på, samtidig med at du holder koden ren og lettilgængelig.

Når du bygger React-applikationer, skal du altid have for øje, at lazy loading og Suspense ikke er universelle løsninger. Der er tidspunkter, hvor du måske ikke får meget ud af at bruge lazy loading, især hvis de komponenter, der bliver hentet, skal bruges næsten med det samme. Korrekt anvendelse af disse teknikker kræver forståelse for, hvornår de vil give den bedste ydeevne.

Hvorfor React?

React er en JavaScript-bibliotek, der bruges til at bygge brugergrænseflader. Dette beskrives på en enkel og præcis måde på Reacts officielle hjemmeside: "A JavaScript library for building user interfaces." Denne beskrivelse indfanger essensen af React på en effektiv måde og viser, at det ikke er et megarammeværk eller en fuld-stack løsning, som håndterer alt fra databaser til realtidsopdateringer via WebSocket. React er, kort sagt, en løsning til at håndtere visningslaget i applikationer.

I en applikation er der typisk flere lag, såsom visningslag, logiklag og datalag. React beskæftiger sig primært med visningslaget, som handler om at renderere og opdatere brugergrænsefladen baseret på ændringer i data og applikationens tilstand. Med andre ord ændrer React de elementer, som brugeren ser på sin skærm. Denne enkelhed er kernen i React og en af de største fordele ved biblioteket.

Når vi arbejder med React, foregår udviklingen i et klart og enkelt flow:

1. Applikationslogik genererer data.

2. Dataen skal vises i UI’en.

3. Dataen sendes videre til en React-komponent.

4. React-komponenten håndterer rendering af HTML på skærmen.

Så hvorfor er dette interessant? React tilbyder en deklarativ tilgang til UI-udvikling, hvilket betyder, at du som udvikler ikke behøver at håndtere de komplekse opdateringer manuelt. I stedet beskriver du, hvordan UI’et skal se ud i forskellige tilstande, og React sørger for at opdatere brugergrænsefladen, når data ændres. Det er her, den deklarative filosofi kommer ind: i stedet for at sige præcist, hvordan ændringer skal foretages, beskriver du bare, hvad du gerne vil have, og React tager sig af resten.

React er ikke kun simpelt i sin API, men det giver også mulighed for at arbejde med mere komplekse arkitekturer og løsninger, som f.eks. routing, state management og brugen af TypeScript. Hele formålet med React er at give udviklere de rette værktøjer til at skabe højtydende webapplikationer, der er både skalerbare og tilpasselige.

Når man først dykker ned i React, vil man opdage, at selvom API’en er relativt simpel, er der en underliggende kompleksitet, der gør det muligt for biblioteket at håndtere komplekse brugergrænseflader effektivt. Denne kompleksitet bliver mere tydelig, når vi begynder at udforske de forskellige funktioner, som React tilbyder, såsom komponentlivscyklus, events, hooks og JSX. React er opdelt i to hoved-API’er: React Component API og React DOM, som arbejder sammen for at sørge for, at UI’et bliver opdateret korrekt på skærmen.

JSX, som er en syntaksudvidelse for JavaScript, er et af de mest markante kendetegn ved React. JSX giver udviklere mulighed for at blande HTML-lignende markup med JavaScript. Det betyder, at udviklere kan skrive komponenter på en måde, der både er nem at forstå og skrive, samtidig med at de får fuld kontrol over brugergrænsefladen. Denne tilgang kan virke kontraintuitiv i starten, især for dem, der er vant til at følge princippet om adskillelse af bekymringer (separation of concerns), hvor logik og præsentation holdes adskilt. Men Reacts deklarative tilgang forenkler arbejdet med UI, fordi udviklere ikke behøver at skrive manuelt kode for at ændre på komponentens indhold – React gør det automatisk, når tilstanden ændrer sig.

Når vi dykker dybere ned i React, vil vi lære at udnytte komponenternes livscyklus, som definerer de forskellige faser, en komponent går igennem, fra dens oprettelse til dens destruktion. Vi vil også se på events, som er de handlinger, der bliver trigget af brugeren, og hvordan vi kan håndtere dem i React på en effektiv og struktureret måde.

Men det er ikke kun React, vi skal fokusere på. For at skabe virkelig skalerbare og vedligeholdelsesvenlige applikationer er det også nødvendigt at lære om værktøjer som TypeScript, som giver statisk typekontrol og kan hjælpe med at undgå mange almindelige fejl i koden. Vi vil også dække emner som state management, server-side rendering og enhedstestning, som er essentielle, når du arbejder på større applikationer.

For at kunne bruge React effektivt er det afgørende at forstå, at det ikke er en altomfattende løsning. React er kun én del af den samlede applikation. Hvis du forstår denne opdeling, bliver du bedre rustet til at vælge de rette værktøjer og metoder til at bygge effektive, vedligeholdelsesvenlige og performante applikationer.

At begynde med at bygge med React kræver, at du starter med de grundlæggende koncepter og værktøjer, som dette kapitel har introduceret. Når du først har forstået de fundamentale aspekter af React og dens funktionalitet, vil du være godt rustet til at fortsætte med de mere avancerede emner i bogen. Hver ny funktionalitet, vi lærer om, bygger på de tidligere, så det er vigtigt at tage sig tid til at forstå Reacts grundlæggende principper.

Endtext

Hvordan man indsamler brugerinput i React Native

I React Native er indsamling af brugerinput en central funktion, som gør det muligt at oprette dynamiske og interaktive applikationer. I denne sektion ser vi på, hvordan man kan implementere forskellige komponenter til at indsamle input fra brugeren, som f.eks. tekstfelter, datovælger og tidsvælgere. Det interessante ved disse komponenter er, at de skal fungere på tværs af både iOS og Android, og dette kræver en vis forståelse af, hvordan komponenterne håndteres forskelligt på de to platforme.

Vi begynder med at se på en simpel Switch-komponent, der fungerer som en form for afkrydsningsboks. I stedet for at bruge flere separate komponenter til at håndtere tænd/sluk-funktionalitet på iOS og Android, kan du bruge en enkelt CustomSwitch-komponent, der fungerer på begge platforme. Ved at bruge en state, som reflekterer den aktuelle tilstand af hver switch, kan vi gøre den ene switch deaktivere den anden. Dette gøres ved at indstille disabled-egenskaben for hver switch til den anden switches tilstand. På denne måde er det muligt at aktivere én switch, mens den anden bliver deaktiveret, og dette skaber et meget brugervenligt interface.

Eksemplet, der anvender setSecond() og tilstandsvariablen second, kan ses her:

javascript
Copy code
export default function CustomSwitch() {
  const [first, setFirst] = useState(false);
  const [second, setSecond] = useState(false);

  return (
    <>
      <Switch
        value={first}
        onValueChange={setFirst}
        disabled={second}
      />
      <Switch
        value={second}
        onValueChange={setSecond}
        disabled={first}
      />
    </>
  );
}

Dette gør det muligt at håndtere toggles på begge platforme med en enkelt komponent, hvilket sparer både tid og kompleksitet.

Dernæst ser vi på, hvordan vi kan implementere komponenter til indsamling af dato- og tidsinput. Dette kan være en kompleks opgave, da der er forskelle på, hvordan iOS og Android håndterer dato- og tidsvælgere. React Native anbefaler at bruge @react-native-community/datetimepicker til både iOS og Android. Denne komponent gør det muligt at håndtere forskellene mellem de to platforme, men kræver lidt ekstra arbejde, da iOS bruger en komponent, mens Android kræver en imperativ API.

For iOS kan vi bruge en simpel DateTimePicker-komponent, som fungerer som følger:

javascript
Copy code
export default function DatePicker(props: DatePickerProps) {
  return (
    <DateTimePicker
      value={props.value}
      mode="date"
      onChange={(event, date) => {
        if (date) {
          props.onChange(date);
        }
      }}
    />
  );
}

For Android, derimod, benytter vi en imperativ tilgang med DateTimePickerAndroid.open(), som åbner en dialog, når brugeren trykker på datoen:

javascript
Copy code
export default function DatePicker({label, value, onChange }: DatePickerProps) {
  return (
    <TouchableOpacity onPress={() => {
      DateTimePickerAndroid.open({
        value: value,
        mode: "date",
        onChange: (event, date) => {
          if (event.type === "set" && date) {
            onChange(date);
          }
        },
      });
    }}>
      {value.toLocaleDateString()}
    </TouchableOpacity>
  );
}

Denne tilgang giver os mulighed for at bruge en enkelt komponent, der fungerer på tværs af platforme, selvom de underliggende implementeringer er forskellige.

Når du har oprettet en komponent til dato- og tidsvalg, kan du bruge den i din app, som vist her:

javascript
Copy code
export default function CollectingDateTimeInput() {
  const [date, setDate] = useState(new Date());
  const [time, setTime] = useState(new Date());

  return (
    <>
      <DatePicker value={date} onChange={setDate} />
      <TimePicker value={time} onChange={setTime} />
    </>
  );
}

Dette gør det muligt for brugeren at vælge både dato og tid på både iOS og Android med minimal forskel i implementeringen.

Vigtigt er det at bemærke, at mens begge platforme håndterer komponenterne forskelligt, er det muligt at abstrahere de forskelle væk og præsentere en ensartet oplevelse for brugeren. Dette er en af de store fordele ved at bruge React Native – du kan oprette en app, der fungerer på begge platforme uden at skulle skrive meget platform-specifik kode.

Når du arbejder med komponenter som DatePicker og TimePicker, skal du være opmærksom på, at der er flere måder at håndtere input på tværs af enheder. Sørg for at teste på både iOS og Android for at sikre, at brugeroplevelsen er konsekvent og funktionel. Der kan også være visse visuelle forskelle, som du bør tage højde for, især når du arbejder med Android's mere forskellige designparadigmer.

Derudover kan du også overveje at implementere funktionalitet, der giver brugerne mulighed for at vælge tid i forskellige formater, eller gøre brug af native dialogs til dato og tidsvalg for en mere platform-specifik oplevelse. At forstå og udnytte de muligheder og begrænsninger, som hver platform tilbyder, er en vigtig del af udviklingsprocessen.