Byg Web og Mobil Apps med Angular & NativeScript

I en verden hvor brugere forventer problemfri oplevelser på tværs af både web og mobile enheder, står udviklere ofte over for en betydelig udfordring: hvordan man effektivt bygger og vedligeholder applikationer til flere platforme. Traditionelt har dette betydet separate udviklingsprojekter for web, iOS og Android, hvilket fører til duplikeret arbejde, øgede omkostninger og potentielt inkonsekvente brugeroplevelser. Men hvad nu hvis der var en bedre måde? En måde at samle alt under ét tag, maksimere genbrug af kode og strømline udviklingsprocessen?

Netop denne udfordring har drevet innovationen bag en spændende ny tilgang til app-udvikling, der kombinerer styrken fra Angular med NativeScript. Denne synergi giver udviklere mulighed for at bygge sande native mobilapps samt webapplikationer fra en enkelt kodebase. Dette er ikke blot en lille forbedring; det er en fundamental ændring, der kan transformere, hvordan vi tænker om og implementerer tværplatformsløsninger. Lad os dykke ned i, hvordan denne kraftfulde kombination åbner op for en verden af muligheder for effektiv og højtydende app-udvikling.

Baggrunden for Kode-Deling

Siden de tidlige dage af Angular har det været muligt at bruge NativeScript i kombination med Angular til at bygge mobile apps. NativeScript er et open source-framework, der gør det muligt at skabe ægte native mobilapps ved brug af JavaScript. Fordelen er åbenlys: udviklere kan udnytte deres eksisterende Angular-færdigheder og derved opnå en fuldt ud native brugerflade og ydeevne på både iOS og Android.

Men selvom denne tilgang var effektiv til mobiludvikling, opstod der et problem, når behovet for både en web- og en native mobilapp meldte sig. Løsningen var at oprette, udvikle og vedligeholde to separate projekter. Dette fik jobbet gjort, men det blev hurtigt klart, at der måtte være en mere optimal løsning. Tanken om at skulle duplikere forretningslogik, vedligeholde to separate UI-lag og håndtere uafhængige byggeprocesser var ineffektiv og tidskrævende. Dette scenarie var ikke bæredygtigt for komplekse applikationer, der krævede hyppige opdateringer på tværs af platforme.

Denne udfordring førte til drømmen om et kode-delings projekt. Et projekt, der ville tillade udviklere at opbevare koden til web- og mobilapps ét sted. Et projekt, der ville gøre det muligt at dele forretningslogikken mellem web, iOS og Android, men stadig være fleksibelt nok til at inkludere platformsspecifik kode, hvor det var nødvendigt. Med fremkomsten af Schematics og ng add i Angular øjnedes helt nye muligheder for at realisere denne vision. Angular- og NativeScript-teamsne slog sig sammen for at skabe nativescript-schematics, et schematic, der netop muliggør opbygning af både web- og mobilapps fra et enkelt projekt. Dette markerer et kvantespring i effektiviteten af tværplatformsudvikling.

Kom i Gang med Dit Fælles Projekt

At komme i gang med et kode-delingsprojekt er overraskende ligetil, takket være integrationen med Angular CLI. Du har primært to veje at gå, alt efter om du starter et nyt projekt fra bunden eller ønsker at konvertere et eksisterende webprojekt.

Opret et Nyt Kode-Delingsprojekt

Hvis du starter et helt nyt projekt, kan du nemt oprette det med en kode-delingsstruktur direkte. Dette gøres ved at køre ng new kommandoen med @nativescript/schematics som samling. Det er vigtigt at bemærke, at @nativescript/schematics fungerer med @angular/cli 6.1.0 eller nyere.

ng new mit-app --collection=@nativescript/schematics

Før du kører denne kommando, skal du muligvis installere @nativescript/schematics globalt eller lokalt i dit projekt:

npm install -g @nativescript/schematics

Denne kommando sætter automatisk den nødvendige mappestruktur og konfiguration op, så du er klar til at udvikle til både web og mobil fra dag ét.

Konverter et Eksisterende Webprojekt

Har du allerede et Angular webprojekt, som du ønsker at udvide med mobilfunktionalitet? Intet problem. Du kan konvertere dit eksisterende webprojekt til en kode-delingsstruktur ved at kalde ng add kommandoen:

ng add @nativescript/schematics

Denne kommando tilføjer automatisk de NativeScript-specifikke elementer til dit projekt, herunder:

• De nødvendige npm moduler.
• AppModule definitioner, der tager højde for både web og mobil.
• AppComponent definitioner, der kan tilpasses platformen.
• Opdateringer til tsconfig filer for at understøtte den nye struktur.

Efter konverteringen kan du begynde at omdanne eksisterende komponenter og moduler til et kode-delingsformat og generere nye komponenter og moduler direkte i dette format. Dette sikrer en glidende overgang og maksimerer genbrug af din eksisterende kode.

Hvornår Skal Koden Deles, og Hvornår Ikke?

Målet med et kode-delingsprojekt er at dele så meget kode som muligt og opdele den platformsspecifikke kode i separate filer. Dette er kernen i effektiv tværplatformsudvikling og giver den fleksibilitet, der er nødvendig for at levere optimerede oplevelser på hver enkelt platform.

Hvad kan deles?

Typisk kan vi dele koden for:

• Ruter for navigationen: Appens overordnede navigationsstruktur og logik kan ofte være den samme på tværs af web og mobil, hvilket forenkler administrationen af appens flow.
• Services for den fælles forretningslogik: Alle API-kald, datahåndtering, autentificeringslogik og andre kerneforretningsfunktioner kan deles. Dette er en kæmpe tidsbesparelse og sikrer konsistens i applikationens kernefunktionalitet.
• Komponentklasse-definitionen for den fælles adfærd af hver komponent: Selve TypeScript-koden for en komponent, der håndterer tilstand, logik og databinding, kan ofte genbruges. Det er præsentationslaget (HTML/CSS), der typisk adskiller sig.

Hvad skal adskilles?

Mens forretningslogikken forbliver samlet, er der visse dele, der skal adskilles for at opnå en optimal brugeroplevelse på hver platform:

• UI-laget (stylesheets og HTML): Du skal bruge forskellige brugergrænsefladekomponenter i web- og NativeScript-byggede native apps. Webapps bruger standard HTML-elementer og CSS, mens NativeScript bruger abstrakte UI-komponenter, der oversættes til native UI-elementer på iOS og Android. Derfor er det nødvendigt med separate skabeloner og stylesheets.
• NgModules: For at kunne importere platformsspecifikke moduler uden at skabe konflikter (f.eks. Angular Material Design, som kun er web-specifikt), skal NgModules ofte adskilles. Dette giver mulighed for at indlæse de rigtige moduler til den specifikke platform.

For at muliggøre denne kodeadskillelse anvendes en simpel navngivningskonvention. Ved at tilføje .tns før filendelsen kan du angive, at en fil er NativeScript-specifik. Den samme fil uden .tns-endelsen markeres som web-specifik. Hvis der kun er én fil uden .tns-endelsen, betragtes den som en delt fil. Dette system gør det utroligt nemt at organisere og vedligeholde platformsspecifikke versioner af dine filer.

Byggeprocessen: Fra Én Kodebase til Flere Platforme

For at fuldende historien om kode-deling har vi brug for en byggeproces, der er i stand til at bruge både de delte filer og de platformsspecifikke filer, og som resulterer i enten en web- eller mobilapplikation. Denne intelligente byggeproces er nøglen til at gøre kode-deling praktisk og effektiv.

Bygning til Web

Når du bygger til web, er det "Business as usual". Du bruger simpelthen Angular CLI til at udføre jobbet. Når du kalder ng serve eller ng build, ignorerer Angular CLI alle NativeScript-specifikke filer. Dette skyldes, at ingen af webfilerne direkte vil referere til nogen .tns-filer. Dette betyder, at din webbyggeproces forbliver uændret og effektiv, selvom dit projekt indeholder mobil-specifik kode.

ng serve

Denne kommando serverer en webapp fra dit kode-delingsprojekt, præcis som du ville forvente fra et standard Angular-projekt.

Bygning til Mobil

For at bygge en iOS- eller Android-app med NativeScript skal vi bruge NativeScript CLI sammen med NativeScript Webpack-pluginet. Dette plugin er afgørende for at håndtere kodeadskillelsen og pakke den korrekte kode til den native app.

tns run ios --bundle

Denne kommando bygger en iOS-app fra kode-delingsprojektet.

tns run android --bundle

Denne kommando bygger en Android-app fra kode-delingsprojektet.

Under byggeprocessen tager Webpack sig af at levere .tns-filerne, når de er tilgængelige, og skjuler derved webversionerne af de samme filer. Virtuelt bliver filer som home.component.tns.html til home.component.html i den mobile byggekontekst. Samtidig er NativeScript CLI ansvarlig for at bygge en ægte native mobilapp ud fra den behandlede kode. Denne automatiske filhåndtering er det, der gør kode-deling så gnidningsfri.

Struktur af Komponenter i et Kode-Delingsprojekt

Det mest almindelige scenarie for kode-deling er komponentkode. Her vil du typisk have en kombination af delte filer og platformsspecifikke filer for at optimere både logik og brugergrænseflade for hver platform.

• name.component.ts – En delt fil for komponentklassens definition. Denne fil indeholder al den logik, tilstand og adfærd, der er fælles for både web- og mobilversionen af komponenten. Dette maksimerer genbrug af forretningslogikken.
• name.component.html – En web-specifik skabelon. Denne fil indeholder HTML-markup og web-specifikke Angular-direktiver, der er designet til browserbaserede applikationer.
• name.component.tns.html – En mobil-specifik skabelon. Denne fil indeholder NativeScript UI-komponenter, der kompileres til native iOS- og Android-elementer, hvilket sikrer en ægte native brugeroplevelse.
• name.component.css – Et web-specifikt stylesheet. Denne fil indeholder CSS-regler, der styler webversionen af komponenten.
• name.component.tns.css – Et mobil-specifikt stylesheet. Denne fil indeholder styles, der er specifikke for NativeScript-miljøet, ofte ved brug af et subset af CSS eller NativeScript-specifikke stylingegenskaber.

Det er værd at bemærke, at i din @Component Decorator peger templateUrl og styleUrls på filer uden at inkludere .tns-udvidelsen. Dette håndteres af byggeprocessen, som automatisk vælger den korrekte fil baseret på den platform, du bygger til. Dette holder din komponentdefinition ren og platformsuafhængig.

Håndtering af Moduler: Eksemplet med HttpClient

Kodeadskillelse er også yderst nyttig, når du arbejder med NgModules, da du ofte skal importere web- eller NativeScript-specifikke moduler. Et fremragende eksempel er, når du skal foretage et HTTP-kald. I en webapp skal du importere HttpClientModule, som giver dig implementeringen for HttpClient.

Måden HTTP-kald udføres på i en browser er imidlertid forskellig fra, hvordan de fungerer i iOS og Android. I NativeScript bør du bruge NativeScriptHttpClientModule, som giver den tilsvarende implementering for HttpClient i det native miljø. Det ville være problematisk at importere begge moduler i den samme AppModule, da det ville føre til konflikter og unødvendig kode.

Nu kan du bruge kodeadskillelsesteknikken til at oprette to versioner af @NgModule – hver især bruger en forskellig version af HttpClientModule. Derefter kan du ved hjælp af Dependency Injection levere den rigtige implementering af HttpClient til din service.

• my.module.ts – En web-modulfil, der importerer HttpClientModule.
• my.module.tns.ts – En mobil-modulfil, der importerer NativeScriptHttpClientModule.
• my.service.ts – En delt servicefil, der injicerer HttpClient.

Denne metode sikrer, at din forretningslogik (repræsenteret af my.service.ts) forbliver delt og uafhængig af den underliggende HTTP-implementering, mens den specifikke modulimport håndteres på modulniveau. Kodeadskillelse for moduler udgør en enkel og ret elegant løsning, der giver dig mulighed for at inkludere funktionalitet med forskellige implementeringer (til web- og mobilapps) under ét tag og derved maksimere den delte kode.

Et Praktisk Eksempel: Pet-Bros-Lite

Hvis du er nysgerrig efter at se et eksempel på et kode-delingsprojekt i aktion, kan du tjekke prøveprojektet pet-bros-lite. Dette projekt demonstrerer alle de vigtige kode-delingskoncepter, herunder:

• Delt navigation, der sikrer en ensartet brugerflow på tværs af platforme.
• Lazy loading, for optimeret ydeevne ved at indlæse moduler efter behov.
• En auth guard, der beskytter ruter og sikrer korrekt adgangskontrol.
• Kodeadskillelse på et NgModule med både Angular Material-komponenter (til web) og NativeScript UI-plugins (til mobil).
• En enkelt delt brugerservice, der håndterer brugerdata uanset platform.
• Delte komponenter og adskillelse på komponent-UI, der viser, hvordan logik kan deles, mens præsentationen tilpasses.
• Og ja, søde kæledyr til adoption, for at gøre eksemplet mere engagerende!

Dette eksempelprojekt er en fremragende ressource til at forstå, hvordan de forskellige principper for kode-deling arbejder sammen i en realistisk applikation, og hvordan du kan strukturere dine egne projekter effektivt.

Ofte Stillede Spørgsmål (FAQ)

Her er nogle af de mest almindelige spørgsmål vedrørende kode-deling med Angular og NativeScript:

Kan jeg bruge et eksisterende Angular webprojekt til kode-deling?

Ja, absolut! Du kan nemt konvertere et eksisterende Angular webprojekt til et kode-delingsprojekt ved hjælp af kommandoen ng add @nativescript/schematics. Dette tilføjer de nødvendige NativeScript-specifikke filer og konfigurationer til dit projekt, så du kan begynde at udvikle mobile apps ved siden af din webapp.

Hvad er @nativescript/schematics, og hvorfor er det vigtigt?

@nativescript/schematics er et værktøj, der er udviklet i samarbejde mellem Angular- og NativeScript-teamsne. Det er afgørende, fordi det automatiserer opsætningen af et kode-delingsprojekt. Det giver dig mulighed for at oprette nye projekter med en fælles struktur eller konvertere eksisterende projekter, hvilket sparer dig for en masse manuel konfiguration og sikrer, at alt er korrekt indstillet fra starten.

Hvordan adskiller byggeprocessen web- og mobilkode?

Byggeprocessen er intelligent designet. Når du bygger til web (f.eks. med ng serve eller ng build), ignorerer Angular CLI automatisk alle filer med .tns-udvidelsen. Når du bygger til mobil (med tns run kommandoerne), tager Webpack og NativeScript CLI over. Webpack vil prioritere .tns-filerne, hvis de findes, og i praksis omdøbe dem (f.eks. home.component.tns.html bliver home.component.html i den mobile byggekontekst), mens NativeScript CLI derefter bygger den native app.

Hvilken type kode kan jeg dele mellem web og mobil?

Du kan dele det meste af din forretningslogik. Dette inkluderer ruter for navigation, services, der håndterer data og API-kald, og komponenternes TypeScript-klassedefinitioner (dvs. logikken bag UI-elementerne). Det, der typisk ikke deles, er selve brugergrænsefladen (HTML-skabeloner og CSS-stylesheets) og platformsspecifikke moduler, da web- og native UI-komponenter er forskellige.

Skal jeg lære et nyt sprog for at bygge native apps med NativeScript?

Nej, det er en af de største fordele! NativeScript giver dig mulighed for at bygge ægte native mobilapps ved hjælp af JavaScript eller TypeScript – de samme sprog, du allerede bruger med Angular. Du genbruger dine eksisterende Angular-færdigheder og -viden, hvilket gør overgangen til mobiludvikling meget nemmere.

Opsummering

Som du kan se, er det relativt ligetil at bygge til både web og mobil fra et enkelt projekt. Du kan enten starte med et friskt projekt ved hjælp af ng new, eller du kan tilføje mobilfunktionalitet til et eksisterende projekt ved hjælp af ng add. Der er også en enkel navngivningskonvention, der muliggør kodeadskillelse, hvilket giver dig mulighed for at dække mange scenarier med stor fleksibilitet.

Denne tilgang til kode-deling i Angular med NativeScript repræsenterer en betydelig forbedring i effektiviteten af tværplatformsudvikling. Det reducerer kompleksiteten, minimerer duplikeret kode og accelererer udviklingsprocessen, samtidig med at det leverer højtydende, ægte native applikationer. Vi opfordrer dig til at prøve kode-deling; det er virkelig så simpelt. Du er kun en simpel ng add eller ng new kommando væk fra vidunderne ved kode-deling i Angular.

Vi vil meget gerne høre fra dig. Lad os vide, hvad der fungerer for dig, hvad der ikke gør, og hvordan tingene kan forbedres. Al konstruktiv feedback er altid velkommen.

Yderligere Læring

Denne artikel dækker kernefunktionaliteten omkring deling af kode mellem web- og mobilapps med Angular og NativeScript. Der er stadig mere, du måtte være interesseret i:

• Hvordan man udvikler i et kode-delingsprojekt i praksis.
• Migrationsprocessen – med migrate-component og migrate-module kommandoer for at strømline konvertering af eksisterende kode.
• De NativeScript-specifikke generatorer, der hjælper med at skabe platformsspecifikke filer.
• Håndtering af biblioteker med uoverensstemmende API'er – det vil sige, når vi har to lignende biblioteker med en forskellig API-grænseflade for web og mobil.

For at lære mere, se den officielle dokumentation på docs.nativescript.org/angular/code-sharing/intro.

Hvis du vil læse andre artikler, der ligner Byg Web og Mobil Apps med Angular & NativeScript, kan du besøge kategorien Teknologi.