Portfolio

Native mobilapper med JavaScript - Tabris.js

Tabris.js er et moderne rammeverk som muliggjør opprettelse av native mobilapper fra én enkelt kodebase ved bruk av JavaScript eller TypeScript. Denne løsnin...

#nettsider
Native mobilapper med JavaScript - Tabris.js

#Tabris.js, Teknologi for native mobilapper i JavaScript

Tabris.js er et moderne rammeverk som muliggjør opprettelse av native mobilapper fra én enkelt kodebase ved bruk av JavaScript eller TypeScript. Denne løsningen lar utviklere utnytte potensialet i web-språk til å bygge sikre, høyytelses enterprise-apper med et innfødt utseende og følelse, samtidig som enkelheten og fleksibiliteten i utviklingsprosessen opprettholdes. Som utvikler designet og implementerte jeg Tabris.js-nettstedet, og integrerte avanserte tekniske løsninger for å fremheve rammeverkets innovasjon og lette tilgangen til dokumentasjonen.

#Målet med Tabris.js og målgruppen

Tabris.js-nettstedet ble laget for rammeverket med samme navn, et verktøy som forenkler utviklingen av native mobilapper, og eliminerer behovet for kompleks konfigurasjon og spesialisert maskinvare, som en Mac for iOS-utvikling. Målet er å presentere rammeverkets nøkkelfunksjoner, som rask prototypfremstilling, høy UI-ytelse gjennom native widgeter og støtte for enterprise-apper. Plattformen er rettet mot individuelle utviklere, enterprise-team og bedrifter som søker effektive løsninger for å bygge sikre mobilapper. Min oppgave var å utvikle et nettsted som gjenspeiler disse fordelene gjennom en robust teknisk infrastruktur.

#Tekniske funksjonaliteter i Tabris.js

Som en del av prosjektet implementerte jag avanserte tekniske løsninger som støtter målene for Tabris.js-nettstedet:

  • Responsivitet og tilgjengelighet, Frontend-arkitektur basert på Next.js med Server-Side Rendering (SSR), som sikrer kompatibilitet med mobile og stasjonære enheter, i samsvar med WCAG 2.1-standarder.
  • Rammeverkdokumentasjon, Dynamiske dokumentasjonsseksjoner lastet via GraphQL, rendret i React med Incremental Static Regeneration (ISR)-optimalisering for rask tilgang.
  • Kontaktskjema, Forespørselsmekanisme med validering på serversiden, XSS/CSRF-beskyttelse, SMTP-integrasjon og lagring av kundeemner i en MongoDB-database med AES-256-kryptering.
  • Teknisk SEO, Optimalisering for nøkkelfraser (f.eks. “native mobilapper JavaScript”), med dynamisk generering av XML-områdekart og akselerert indeksering via Google Indexing API.
  • Sikkerhetskopiering og høy tilgjengelighet, Automatiske sikkerhetskopier til Amazon S3 med replikering på tvers av regioner, versjonering og Zstandard-komprimering for kontinuerlig drift.
  • Ytelse, Caching på serversiden med Varnish, multimediaoptimalisering av Cloudflare med AVIF-format og støtte for HTTP/3 med QUIC.
  • Interaktiv demo, En modul som presenterer rammeverkets muligheter med simulering av native widgeter i WebAssembly, bufret i Redis for lav forsinkelse.

#Tekniske utfordringer og løsninger

Under implementeringen av Tabris.js-nettstedet møtte jag flere komplekse tekniske utfordringer, som ble løst på følgende måte:

  • Dokumentasjonsbelastning, Omfattende rammeverkdokumentasjon forårsaket forsinkelser i lastingen. Jeg implementerte Redis med persistens for spørringscaching og Elasticsearch for rask søking i kodeeksempler.
  • Demo-optimalisering, Simulering av native widgeter i WebAssembly gjorder siden tregere på mobile enheter. Jeg brukte Fastly CDN med Brotli-komprimering og “lazy loading” via Intersection Observer API.
  • Dynamiske oppdateringer, Hyppige oppdateringer av dokumentasjon og demo skalerte ikke ved høy trafikk. Ich brukte RabbitMQ for asynkron behandling av endringer og “throttling” på serversiden.
  • Foreldet cache, Nye versjoner av dokumentasjonen ble ikke vist umiddelbart. Jeg implementerte Varnish med “purge” på webhooks og Edge Side Includes for dynamiske seksjoner.

#Teknologier som er brukt

For å bygge og vedlikeholde Tabris.js-nettstedet, brukte jag følgende teknologier:

  • Next.js, Rammeverk for SSR- og ISR-rendring, som optimaliserer ytelsen og SEO-en til nettstedet.
  • Yoast SEO, Metadata-optimalisering, generering av XML-områdekart og automatiske varsler til søkemotorer om oppdateringer.
  • UpdraftPlus, Automatiske sikkerhetskopier til Amazon S3 med replikering på tvers av regioner og AES-256-kryptering.
  • Cloudflare, CDN med Argo Smart Routing, Brotli-komprimering og DDoS-beskyttelse gjennom begrensing av forespørsler.
  • Redis, Caching i minnet med sharding og persistens for dokumentasjon og demo.
  • Varnish, Caching på serversiden med tilpasset VCL, som støtter “grace mode” og ESI for dynamiske blokker.
  • Lighthouse, Automatiske Core Web Vitals-revisjoner integrert i CI/CD-prosessen i GitLab.
  • RabbitMQ, Oppgavekø, som demo-oppdateringer og e-postlevering, med en “retry”-mekanisme.
  • Elasticsearch, Søkemotor for dokumentasjon med “fuzzy matching” og aggregering av kodeeksempler.
  • Fastly, Ekstra CDN for parallell multimedia-distribusjon med geografisk optimalisering.
  • WebAssembly, Teknologi for å simulere native widgeter i nettleseren med ytelsesoptimalisering.

#Ledelse og teknisk støtte

Tabris.js-nettstedet er et prosjekt som krever kontinuerlig overvåking og optimalisering for å støtte utviklere og bedrifter i å ta i bruk rammeverket. Jeg oppdaterer systemet og utvidelsene regelmessig, og utfører tester på et testmiljø med fullstendige sikkerhetskopier på Amazon S3. Jeg bruker Cloudflare, Redis og Fastly for å sikre høy ytelse med global trafikk, mens Varnish og RabbitMQ stabiliserer dynamiske prosesser som dokumentasjonsoppdateringer. Jeg overvåker indeksering med Elasticsearch, optimaliserer NoSQL-spørringer med indekser og administrerer cache ved innholdsendringer. Plattformen kan utvides med tilleggsfunksjonalitet, som integrasjon med CI/CD-verktøy, en opplæringsmodul eller en seksjon for enterprise-eksempler, for å fortsette å støtte Tabris.js i å forenkle utviklingen av native mobilapper.

Hvilket omfang hadde prosjektet Native mobilapper med JavaScript - Tabris.js?#
Native mobilapper med JavaScript er et prosjekt i kategorien nettsider, levert i 2019. Bak det står JavaScript, React, Next.js, GraphQL og Redis.
Hvordan gikk leveransen for Native mobilapper med JavaScript - Tabris.js?#
Byggingen tok rundt seks uker og gikk live i 2019. Den står på JavaScript, React, Next.js, GraphQL og Redis. Layouten kom fra kunden. På den bygget jeg maler og innholdsmodell, og stiene som bærer trafikk testet jeg på en produksjonskopi, ikke på en tom installasjon.
Hva var hardest teknisk i Native mobilapper med JavaScript - Tabris.js?#
Mest omtanke gikk med til å holde JavaScript, React, Next.js, GraphQL og Redis sammen. Innhold, konfigurasjon og kode ligger i separate lag, så en tilbakeføring etter lansering flytter ett av dem og ikke alle tre. Kanttilfeller dukker opp på en produksjonskopi, og der kjører testene.
Hvilken del av Native mobilapper med JavaScript kan gjenbrukes på et nytt bygg?#
Det som følger med er det tekniske laget: JavaScript, React, Next.js, GraphQL og Redis. Det ser omtrent likt ut på neste bygg. Det som ikke følger med er innholdsmodellen og integrasjonene, skrevet mot én kundes data og en brief i kategorien nettsider. Et nytt bygg starter med en omfangsanalyse, og tilbudet kommer etter den.

Trenger du FAQ tilpasset bransje og marked? Vi lager en versjon som støtter dine forretningsmål.

Ta kontakt