levelup conference - large applications cross device
TRANSCRIPT
![Page 1: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/1.jpg)
Plaatje met android en iphone met de app draaiend
![Page 2: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/2.jpg)
![Page 3: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/3.jpg)
WAAROM ?&
HOE ?
![Page 4: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/4.jpg)
• 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](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/5.jpg)
![Page 6: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/6.jpg)
![Page 7: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/7.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/8.jpg)
HOE ?
![Page 9: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/9.jpg)
Frontend 1.0
![Page 10: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/10.jpg)
![Page 11: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/11.jpg)
Frontend 2.0 (web technologie)
![Page 12: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/12.jpg)
![Page 13: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/13.jpg)
![Page 14: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/14.jpg)
Frontend 3.0
?
![Page 15: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/15.jpg)
Render Diff Patch
Virtual DOM
![Page 16: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/16.jpg)
• Library• Eenvoud• Hyperscript notatie• Geanimeerde transities• Snelheid• Typescript
Wensen
![Page 17: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/17.jpg)
Isaac Newton: "If I have seen further, it is by standing on the shoulders of giants."
![Page 18: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/18.jpg)
• Library• Eenvoud• Hyperscript notatie• Geanimeerde transities• Snelheid• Typescript
maquettejs.orggithub.com/AFASSoftware/maquette
![Page 19: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/19.jpg)
SHOW ME CODE!!!1
![Page 20: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/20.jpg)
Frontend 3.0
Herbruikbare bouwblokkenIsolatierenderMaquette functies die elkaar aanroepen
iOS: ControlAndroid: Widget
Component gebaseerd
![Page 21: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/21.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/22.jpg)
Programmeer omgeving• Typescript• Compile-time checks• Autocomplete/Intellisense• Refactoring
![Page 23: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/23.jpg)
Blueprint• De beste UX op elk device• Wat staat er functioneel op de pagina
![Page 24: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/24.jpg)
Website App
![Page 25: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/25.jpg)
![Page 26: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/26.jpg)
![Page 27: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/27.jpg)
Plaatje met android en iphone met de app draaiend
![Page 28: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/28.jpg)
Frontend 3.0• Maquette• Component gebaseerd• Styling• Typescript• Blueprint• Website App
![Page 29: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/29.jpg)
Blik in de toekomst
![Page 30: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/30.jpg)
Service worker• Network proxy• Offline• Opstart performance
• Push messages ontvangen
![Page 31: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/31.jpg)
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 ✔ ✔ ✘
![Page 32: LevelUp conference - Large applications cross device](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58f2a32e1a28ab256b8b4583/html5/thumbnails/32.jpg)
Meer informatie?dev.afas.nlmaquettejs.orggithub.com/AFASSoftware/maquette