Plaatje met android en iphone met de app draaiend

WAAROM ?&

HOE ?

• 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

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

HOE ?

Frontend 1.0

Frontend 2.0 (web technologie)

Frontend 3.0

?

Render Diff Patch

Virtual DOM

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

Wensen

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

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

maquettejs.orggithub.com/AFASSoftware/maquette

SHOW ME CODE!!!1

Frontend 3.0

Herbruikbare bouwblokkenIsolatierenderMaquette functies die elkaar aanroepen

iOS: ControlAndroid: Widget

Component gebaseerd

Styling• Component gebaseerd• Cascading stylesheet

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

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

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

Website App

Plaatje met android en iphone met de app draaiend

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

Blik in de toekomst

Service worker• Network proxy• Offline• Opstart performance

• Push messages ontvangen

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 ✔ ✔ ✘

Meer informatie?dev.afas.nlmaquettejs.orggithub.com/AFASSoftware/maquette