Teknologien vår på framsida — Creuna Tech Radar 2020

Vi har laget en Tech Radar i Creuna for å reflektere over verktøy, teknologier, teknikker og biblioteker vi ønsker å bruke, burde bruke, kan bruke og ikke vil bruke.

Frontend Tech Radaren fra 2020 ble laget av en gruppe frontend (og noen full stack) utviklere gjennom en 1.5 time lang workshop. Vi brukte både fysisk tilstedeværelse, og Teams deltakelse. Totalt 9 personer var med på utformingen av årets radar. For å se den, klikk her!

Vår Frontend Tech Radar 2020 — Flere detaljer under hver kategori

Hva er en Tech Radar

Radaren deles inn i 4 kategorier (Quadrants) og 4 grader (Rings) for å lage et bilde av relevant teknologi for eksempel for en bedrift, et marked eller en bransje. Vi har tatt utgangspunkt i Creuna sin teknologi for Frontend.

Merk at radaren vår fortsatt kan endres, og at denne versjonen vil være oppdatert, mens bildene i denne artikkelen kan reflektere en utdatert versjon. Noen av teknologiene vi har lagt til vil også kunne passe bedre inn i en annen kategori. Dette skal helst ikke skje, men noen ting kan være enkle å blande, f. eks “GraphQL som et interface for FE/BE”. Dette kan både være et verktøy (GraphQL delen), eller en teknikk (interface for FE/BE delen).

Kategoriene er

1. Programmeringsspråk og rammeverk. Kan være alt fra JS, TypeScript, #C, Java, Rust, React, VueJS o.l.
2. Verktøy. Kan være komponenter, databaser, npm biblioteker, Devtools o.l.
3. Platform. Kan være byggeverktøy, skyleverandører, JVM, Android, Web o.l.
4. Teknikker. Innebærer utviklingsprosessen, applikasjonens livssyklus, metodikker o.l.

Ringene er

1. Adopt. Teknologi som burde brukes.
2. Trial Teknologi vi tenker er klart til å brukes og burde testes ut i enkelte prosjekter.
3. Assess. Teknologi vi burde vurdere å begynne å bruke, men som kanskje ikke er helt optimalt for oss enda.
4. Hold. Teknologi vi holder oss unna, faser ut eller ikke ønsker å jobbe med.

Bakgrunn fra tidligere prosjekter

Hos oss i Creuna har vi en interessant tilnærming til verktøy hos teknologene. Over tid har det blitt utviklet et Creuna CLI som bygger create-react-app og React.NET for å lage server rendering og statiske filer som brukes av .NET på en datadrevet måte. Dette betyr at mange av våre prosjekter er satt opp på en unik måte, som er skreddersydd for våre front- og backend utviklere. Du kan finne listen over våre Github biblioteker her.

Selv om mange av våre prosjekter starter opp via et standard CLI, har vi møtt på problemer på både vedlikehold, oppgraderinger og fleksibilitet. I Creuna er vi åpne for å prøve nye teknologier, og verktøykassen for en frontend utvikler skal være åpen nok til å trikse med nye biblioteker.

I Creuna er Big Leap Engineering en stor satsing. Det betyr at vi skal være det riktige valget for ambisiøse oppdragsgivere som står overfor store sprang i en uforutsigbar verden — og som trenger riktige ferdigheter og et kreativt samspill som skaper løsninger som er bra for mennesker og for business. Vi er åpne med kunden i alle steg av applikasjonens livssyklus, og iterer aktivt for et best mulig sluttprodukt. Teknologien vår skal reflektere dette til enhver tid.

Programmeringsspråk og rammeverk

Vi bruker i all hovedsak React. Dette ser ikke ut til å endre seg med det første, da både utviklerne våre, og kundene våre ønsker React. Det finnes et unntak der VueJS er brukt, og utviklerne våre er positive til dette som teknologi, men ønsker stort sett ikke å bruke det.

Det er også et ønske om å bruke mer anerkjente løsninger enn vårt skreddersydde oppsett med React CLI og statiske React komponenter + React.NET. Vi ser på mulighetene for å bruke Create React App out-of-the-box, eller Gatsby/NextJS for SSR. Foreløpig har vi et prosjekt på Gatsby, og flere utviklere som har testet dette ut.

Vi utvikler ikke noen applikasjoner på mobil, men ved fremtidige potensielle løsninger er det naturlig å bruke React Native, ettersom alle frontend utviklere er på React.

Blitz.JS ble snakket mye om etter at noen av utviklerne våre har vært på React Summit. Med dette verktøyet kan man direkte kalle backend funksjoner fra frontend ettersom de blir definert som et mellomlag for backend og frontend. Noe lignende vil GraphQL funksjonalitet være. Vi bruker gjerne Swagger for API dokumentasjon, og vi er klar over at det finnes teknologi for å få full “type-completion” via Swagger og Typescript. Alle disse teknologiene nevnt i denne paragrafen tar del i en potensiell framtid der vi finner nye metoder for å gjøre koblingen mellom front- og backend enklere. Til nå har vi brukt mange hjemmelagde biblioteker som Creuna sine prop-types-csharp, codegen og Creuna CLI.

Siden vi har veldig mange erfarne backend utviklere, og mange nysgjerrige frontend utviklere ser vi også på muligheten til å bruke WebAssembly med Webworkers for å kjøre raske logiske funksjoner i frontend. I tillegg er mange av frontend utviklerne veldig interessert i WebGL teknologi, og bruk av Three JS og React Three Fiber for web animasjon på GPU.

Verktøy

Vi har allerede nevnt mange av verktøyene vi bruker, som de hjemmelagde Creuna bibliotekene. Foreløpig ser vi i tech radaren at det er mange teknologier under Trial og Assess; altså at vi ønsker mer informasjon og erfaring før vi definerer teknologiene som Adopt. Dette er teknologier som potensielt kan erstatte Creuna byggerne. Derfor har vi også lagt prop-types-csharp og Creuna CLI på Assess og Trial respektivt. På sikt vil disse falle ned til Hold, men foreløpig er Creuna CLI en så stor del av arbeidsmetodikken vår.

For React testing har vi lagt lista ganske klart; React Testing Library brukes med Jest for å teste React applikasjoner. Vi er også interessert i å bruke Cypress for E2E testing, mens Enzyme ryker helt ned på Hold i forhold til RTL.

Verktøyene i Trial er bl.a. Framer Motion for animasjoner. Dette er et veldig modent React animasjonsbibliotek som enkelt kan integreres i verktøyene som designerne våre bruker for å lage web animasjoner. Redux var det et stort spørsmål om burde ligge på Trial eller Assess, da få av oss bruker det. Om man ønsker global state i et mindre prosjekt burde vi nesten alltid bruke Context API’et. I tillegg er det muligheter for å ta i bruk Recoil, det nye globale state biblioteket som enda er i alpha. Når dette kommer ut, påstår skaperne at det ikke vil være noen grunn til å bruke Redux lenger. Vi får se.

Platformer

Først og fremst er .NET Core noe som brukes i nesten alle prosjektene vi jobber på. I fremtiden kan dette bli utfordret av både Node og Serverless, eller andre verktøy som Deno. Likevel er .NET Core en så stor del av Creuna at vi holder den på Adopt, og de fleste prosjekter vil inkludere en form for dette.

Det er også ingen grunn til å ikke bruke PWA’er, om web applikasjonen er mobile-first designet. Dette er en enkel implementasjon som gir mye til sluttbrukeren i form av å komme tilbake i appen igjen.

Azure Functions, Pipelines og egentlig hele Azure pakka er noe vi satser høyt på i Creuna, og det vil det trolig bare bli mer av. For mindre prosjekter er det også lovt til å spekulere i Netlify om det passer seg. Sammen med f. eks Sanity og Gatsby kan dette være en rask vei til mål på statiske applikasjoner.

Teknikker

Vi bruker Sprinter med Azure Pipelines og Atlassian verktøy for å være effektive og transparente ovenfor kunder. Utviklerne har en standard for “code reviews” under hele utviklingen og “architecture reviews” under prosjektoppstart. Vi ønsker også å utvikle Microservices i den grad det lar seg gjøre, og vil være med kunden til å modernisere hele løsningen sin på tvers av selskapet, i form av små modulære deler for hver applikasjon.

I koden har vi et godt samarbeid mellom front- og backend, og ønsker på sikt å ta dette videre med GraphQL som en felles platform der .NET Core modeller blir til TypeScript props. Vi setter også React Suspense/Lazy Loading som en teknikk, men fokus er nok heller på at vi er tidlig ute med å teste ny teknologi som tilgjengeliggjøres for utviklere i både React og .NET. Dette gjelder også CSS animasjoner, der vi tror bruken av dette (og også WebGL) vil gi oss en edge i markedet. Det er viktig å utnytte animasjoner for en mer konsistent følelse av UX gjennom applikasjonen.

Oppsummering

Tech radaren ble laget av frontend utviklere i Creuna, men vi ser at mange av valgene og ønskene vil påvirke backend utviklere også. På sikt vil vi bruke denne for å finne ut hvilke av Trial og Assess verktøyene som er på vei mot Adopt, og hva som er på vei mot Hold.

Vi ser at måten vi har kodet på de siste årene vil endre seg i nær fremtid, og at det er mange interessante verktøy for å gjøre hverdagen vår enklere.