LevelUp conference - Large applications cross device

32
Plaatje met android en iphone met de app draaiend

Transcript of LevelUp conference - Large applications cross device

Page 1: LevelUp conference - Large applications cross device

Plaatje met android en iphone met de app draaiend

Page 2: LevelUp conference - Large applications cross device
Page 3: LevelUp conference - Large applications cross device

WAAROM ?&

HOE ?

Page 4: LevelUp conference - Large applications cross device

• 10.000 klanten (bedrijven)• 1.500.000 gebruikers• 2.000+ pagina’s• 1 pakket voor je hele organisatie

• Elke klant een unieke applicatie• Zelf functionaliteit toevoegen

AFAS Next ERP Pakket

• Boekhouden • Salaris• Orders• Project administratie• Website • Intranet• HRM• Payroll• Abonnementen• 4 Eenhoorns• Logistiek• CRM• Cursussen• Fiscaal• Financieel• Workflows

Page 5: LevelUp conference - Large applications cross device
Page 6: LevelUp conference - Large applications cross device
Page 7: LevelUp conference - Large applications cross device

Requirements NEXT• Alle ERP functionaliteit beschikbaar• Alle 2000+ schermen• Elke klant eigen aanpassingen• Vaak updates• Applicatie is door de klant uitbreidbaar

•Desktop, tablet en mobiel•Optimale UX

Page 8: LevelUp conference - Large applications cross device

HOE ?

Page 9: LevelUp conference - Large applications cross device

Frontend 1.0

Page 10: LevelUp conference - Large applications cross device
Page 11: LevelUp conference - Large applications cross device

Frontend 2.0 (web technologie)

Page 12: LevelUp conference - Large applications cross device
Page 13: LevelUp conference - Large applications cross device
Page 14: LevelUp conference - Large applications cross device

Frontend 3.0

?

Page 15: LevelUp conference - Large applications cross device

Render Diff Patch

Virtual DOM

Page 16: LevelUp conference - Large applications cross device

• Library• Eenvoud• Hyperscript notatie• Geanimeerde transities• Snelheid• Typescript

Wensen

Page 17: LevelUp conference - Large applications cross device

Isaac Newton: "If I have seen further, it is by standing on the shoulders of giants."

Page 18: LevelUp conference - Large applications cross device

• Library• Eenvoud• Hyperscript notatie• Geanimeerde transities• Snelheid• Typescript

maquettejs.orggithub.com/AFASSoftware/maquette

Page 19: LevelUp conference - Large applications cross device

SHOW ME CODE!!!1

Page 20: LevelUp conference - Large applications cross device

Frontend 3.0

Herbruikbare bouwblokkenIsolatierenderMaquette functies die elkaar aanroepen

iOS: ControlAndroid: Widget

Component gebaseerd

Page 21: LevelUp conference - Large applications cross device

Styling• Component gebaseerd• Cascading stylesheet

• Componenten naast elkaar, centreren, uitrekken• Flexbox• Box sizing: content-box border-box

Page 22: LevelUp conference - Large applications cross device

Programmeer omgeving• Typescript• Compile-time checks• Autocomplete/Intellisense• Refactoring

Page 23: LevelUp conference - Large applications cross device

Blueprint• De beste UX op elk device• Wat staat er functioneel op de pagina

Page 24: LevelUp conference - Large applications cross device

Website App

Page 25: LevelUp conference - Large applications cross device
Page 26: LevelUp conference - Large applications cross device
Page 27: LevelUp conference - Large applications cross device

Plaatje met android en iphone met de app draaiend

Page 28: LevelUp conference - Large applications cross device

Frontend 3.0• Maquette• Component gebaseerd• Styling• Typescript• Blueprint• Website App

Page 29: LevelUp conference - Large applications cross device

Blik in de toekomst

Page 30: LevelUp conference - Large applications cross device

Service worker• Network proxy• Offline• Opstart performance

• Push messages ontvangen

Page 31: LevelUp conference - Large applications cross device

Web based experimentsAndroid iOS Desktop

Bellen ✔ ✔ ✘Live camera streamen (barcodes) ✔ ✘ ✔

Locatie bepaling ✔ ✔ ✔

Adres openen in maps applicatie ✔ ✔ ✔

Push messages ontvangen ✔ ✘ ✘Voice input ✔ ✘ ✔

Bluetooth ✘ ✘ ✘Gyroscoop ✔ ✔ ✘Virtual Reality ✔ ✔ ✘