Fire fine rammeverk, én topp app

Hvilket mobilt rammeverk er best? Vi har laget samme app 4 ganger med 4 forskjellige rammeverk slik at du slipper. SwiftUI, Xamarin, React Native og Flutter slåss alle om utviklernes gunst, men kanskje er det andre aspekter enn valg av rammeverk som er viktigst?

Transcript

1. Fire fine rammeverk, én topp topp-app Ina Bjørnestad Runar Ovesen Hjerpbakk Bekk Fagdag 22.10.2021
2. Ina Runar
3. Topp or Not 🏔
4. Historikk 👴
6. Popularitet
7. SwiftUI
8. SwiftUI
9. SwiftUI
11. Model-View-ViewModel (MVVM)
12. Fordeler - Apples foretrukne måte å skrive apps på - Integrert miljø og designer i Apples IDE Xcoce - Kan lage «samme» app for iOS, iPadOS, macOS, watchOS og tvOS - Bruk pakker fra Swift Package Manager, CocoaPods eller Carthage - Swift som språk har er faktisk ganske naise - Enkelt å kombinere med UIKit - Swift og ObjectiveC kan mikses og matches ved behov
13. React Native
14. React Native
15. React Native import React from 'react'; import { Text, View } from 'react-native’; const App = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center”, backgroundColor: "#000" }}> <Text style={{ color: "#fff" }}> Hei 👋 </Text> </View> ); } export default App;
16. Expo vs React Native Cli – hvilken velger jeg?? 🤔
17. Expo vs React Native Cli – hvilken velger jeg?? Expo React Native Cli Enkelt å komme i gang ✔ － Støtter integrasjon av native modules － ✔ Bygging Tar seg av byggeprosedyren i skyen － Veldig store filer ut － Ofte lang kø i skyen Du må deale med ting selv ✔ Mindre filer (halve? ish) Teste på iOS uten Mac ✔ －
18. Fordeler - Spesielt kjapt å lære om man kommer fra React og Javascript - Stort community – også i Bekk! - Raskt å komme i gang med - God dokumentasjon
19. Xamarin Forms
21. Første dag i ny jobb
22. Xamarin
23. Arkitektur
24. XAML
26. Model View ViewModel Data Binding Events Data Model-View-ViewModel (MVVM)
28. Framtiden - .Net MAUI
29. Fordeler - C# er et moderne feature-rikt språk i stadig forbedring - Visual Studio er et fantastisk IDE med debugging-muligheter uten sidestykke - .Net har pakker på Nuget for det aller mest - MVVM-mønstret gjør testing enkelt - Hot Reload for XAML (og snaaart C# kode også) - Xamarin Forms / MAUI og native iOS/Android kan brukes om hverandre - Lett å dele kode og modeller mellom app og server
31. Flutter
33. import 'package:flutter/material.dart’; void main() { runApp( const Center( child: Text( 'Hei 👋', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 34), ), ), ); }
34. React Native import React from 'react'; import { Text, View } from 'react-native’; const App = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center”, backgroundColor: "#000" }}> <Text style={{ color: "#fff" }}> Hei 👋 </Text> </View> ); } export default App;
35. Hvorfor Dart? • Utviklerproduktivitet • Objekt-orientert • Forutsigbar, høy ytelse • Rask allokering
36. Hot reload og hot restart
37. Fordeler • Dart ligner på C# og Java i syntaks • Raskt å komme i gang • Veldig god dokumentasjon • Kommer med masse ferdige komponenter • Tusenvis av pakker
38. One more thing…
39. «Dokumentasjon, API-design, utviklermiljø.» - Anonym «De kunne godt fjernet mer legacy, åpnet ting litt mer opp. Gjennomgang av utviklerverktøy.» - Anonym SwiftUI
40. Xamarin «Csharp. Bra community. Ofte oppgraderinger. Bra dokumentert. Open source.» - Anonym «Enklere måte å skrive platform spesifikke renderers. Blir bra i MAUI.» - Anonym
41. «Kryssplattform. Skrive i React. Er du kjent med React så går det veldig raskt å produsere kode. Stort community.» - Anonym «Burde vært enklere å oppdatere versjon. Per nå er det mye arbeid i platformsspesifikke byggfiler.» - Anonym React Native
42. «Alt fungerer ut fra boksen, det er god performance, språket (Dart) er ganske enkelt, det finnes mange gode komponenter, man slipper den jææææævla XAML-dritten fra Xamarin (btw et av de verste rammeverkene jeg noensinne har jobbet med noensinne, sorry Runar).» - Anonym «Det skulle vært enda enklere med byggingen av layout» - Anonym Flutter
43. Spørreundersøkelse 📊 0 5 10 15 20 25 30 React N ative Flutter iOS - Swift Xam arin Android - Kotlin N ativescript Blazor Client (PW A) Ionic Pwa, selvutviklet 🤷 SDL2 Android - Java Cordova/PhoneGap Vue Bruk av mobile rammeverk Hvilket rammeverk bruker du i dag? Hva ville du valgt ved nytt prosjekt i dag?
44. -100 100 Ville du anbefalt en kollega eller venn å bruke rammeverket på sitt neste prosjekt? 🤔 12 -100 100 -100 100 -100 100 24 50 85
45. Konklusjon 🎯 - Kun iOS? SwiftUI fungerer fint - Teamet kan C# og har kanskje .Net backend? Xamarin - React-webside eller web-skillz? React Native - Greenfield? Flutter er enkelt å starte med for hvem som helst - Alle rammeverkene har fordeler. Og ulemper. - Velg rammeverk basert på teamets og organisasjons kompetanse og målsetninger - Fokuser på hva appen skal gjøre, for hvem og hvorfor. Når det er gjort, kan den lages uansett valg av rammeverk