LevelUp conference - Large applications cross device
•Download as PPTX, PDF•
0 likes•819 views
By Rick Hoving and Johan Gorter
Recommended
Recommended
More Related Content
Similar to LevelUp conference - Large applications cross device
Similar to LevelUp conference - Large applications cross device (20)
LevelUp conference - Large applications cross device
- 1. Plaatje met android en iphone met de app draaiend
- 4. • 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
- 7. 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
- 8. HOE ?
- 9. Frontend 1.0
- 11. Frontend 2.0 (web technologie)
- 14. Frontend 3.0
- 15. Render Diff Patch Virtual DOM
- 16. • Library • Eenvoud • Hyperscript notatie • Geanimeerde transities • Snelheid • Typescript Wensen
- 17. Isaac Newton: "If I have seen further, it is by standing on the shoulders of giants."
- 18. • Library • Eenvoud • Hyperscript notatie • Geanimeerde transities • Snelheid • Typescript maquettejs.org github.com/AFASSoftware/maquette
- 19. SHOW ME CODE!!!1
- 20. Frontend 3.0 • Herbruikbare bouwblokken • Isolatie • renderMaquette functies die elkaar aanroepen iOS: Control Android: Widget Component gebaseerd
- 21. Styling • Component gebaseerd • Cascading stylesheet • Componenten naast elkaar, centreren, uitrekken • Flexbox • Box sizing: content-box border-box
- 22. Programmeer omgeving • Typescript • Compile-time checks • Autocomplete/Intellisense • Refactoring
- 23. Blueprint • De beste UX op elk device • Wat staat er functioneel op de pagina
- 24. Website App
- 27. Plaatje met android en iphone met de app draaiend
- 28. Frontend 3.0 • Maquette • Component gebaseerd • Styling • Typescript • Blueprint • Website App
- 29. Blik in de toekomst
- 30. Service worker • Network proxy • Offline • Opstart performance • Push messages ontvangen
- 31. Web based experiments Android iOS Desktop Bellen ✔ ✔ ✘ Live camera streamen (barcodes) ✔ ✘ ✔ Locatie bepaling ✔ ✔ ✔ Adres openen in maps applicatie ✔ ✔ ✔ Push messages ontvangen ✔ ✘ ✘ Voice input ✔ ✘ ✔ Bluetooth ✘ ✘ ✘ Gyroscoop ✔ ✔ ✘ Virtual Reality ✔ ✔ ✘
Editor's Notes
- Wie denkt dat dit een website is?
- Wij hebben bij AFAS gekozen voor web technologie Grote applicatie Meerdere devices ‘Tijdens deze sessie waarom en wat onze ervaringen zijn’
- Een kleine subset van onze applicatie zou deze schermen produceren (nu al 600 blokjes) Cross device Alle functionaliteit op elk platform Optimale UX
- Niet performant genoeg Statefullness is lastig (zeker met complexe schermen)
- We gaan niet in een keurslijf dus library niet framework
- React teveel functionaliteit Mithril was framework
- Maar wat willen we dan wel in Frontend 3.0 Inzichten gegeven Virtual DOM lijkt de beste performance en onderhoudbaarheid.
- User interface (DOM) is zwaar (aanpassen, uitvragen) Lichtgewicht Javascript Objecten Klik, UI verandert (dakkapel) Maar wacht eens even… Snelste technologie? Ja: enkele milliseconden overhead Aanpassingen aan de DOM minimal Nooit een query in de DOM Je hebt toch altijd 16ms de tijd tussen frames Uitgelezen technologie voor mobile
- Waarom ander framework Zelf koers bepalen
- Waarom ander framework Zelf koers bepalen
- 2 teams
- 2 teams
- Zonder url balk
- Wie denkt dat dit een website is?
- Hoe gebruiken wij web technologie om apps mee te maken
- Onze ervaringen: volop in ontwikkeling!