Offline Apps with Angular WebAPI and SQL Server

Slides from my talk at BASTACon on building Apps with offline capabilities using Angular, WebAPI and SQL

Transcript

1. Offline Apps Angular, WebAPI and SQL Server Thorsten Hans @thorstenhans thorsten.hans@gmail.com thorsten-hans.com @thinktecture thorsten.hans@thinktecture.com thinktecture.com Consultant @thinktecture
2. Special Day “Cross-Plattform HTML5” Thema Sprecher Datum, Uhrzeit Raum Anfassen erlaubt: Mobile Apps mit Angular und Cordova Thomas Hilzendegen DO, 28. September 2017, 09.00 bis 10.00 Gutenberg-Saal 4 Fenster überall: Desktopanwendungen mit Angular und Electron Fabian Gosebrink DO, 28. September 2017, 10.45 bis 11.45 Gutenberg-Saal 4 Offline First mit Angular und SQL Server – Es geht auch ohne Netz Thorsten Hans DO, 28. September 2017, 12.00 bis 13.00 Gutenberg-Saal 4 Von Windows Forms und WPF in die neue HTML5-Welt Sebastian Gingter DO, 28. September 2017, 15.45 bis 16.45 Gutenberg-Saal 4 Web goes Native: Progressive Web Apps (PWA) – with Angular Shmuela Jacobs DO, 28. September 2017, 17.00 bis 18.00 Gutenberg-Saal 4
3. What to expect • Definition of Offline • Architecture • Reference Implementation What not to expect • Angular Introduction • SQL Server deep dive
4. The guy who is talking Consultant @ Thinktecture AG thinktecture.com thorsten.hans@thinktecture.com thorsten-hans.com @ThorstenHans Thorsten Hans
5. • Introduction to offline scenarios • Application Architecture • Challenges • Demo • Recap • Q&A Talking-Points
6. What should “offline” mean to you, as a consumer? • Work without network • Data is always available • Interactions are executed once connected again Introduction to offline scenarios
7. What does “offline” mean to you, as a dev? • Manually solve conflicts when syncing • Implement concurrency • Makes the App more complicated Introduction to offline scenarios
8. When are your app consumers really offline? • Inside of complex buildings • Within many geographical areas • train, countryside • when network issues occur Introduction to offline scenarios
9. When are your app consumers really offline? • It depends on the scenario • if a lot of data is being transferred … • Edge or 3G means offline • LTE with bad quality means offline • Apps are offline if your API is offline or not reachable Introduction to offline scenarios
10. DEMO
11. How may look like Application Architecture
12. How may look like Application Architecture
13. How may look like Application Architecture
14. • Primary-Keys must be GUIDs (SQL uniqueidentifier) • Tables need row versions (SQL rowversion) • Triggers are required to mark related tables as modified Challenges at database tier
15. • It’s a readonly column on a table • It’s automatically incremented by SQL Server • It’s scoped on the database level • It may exist only once on a table • It’s internally a binary(8) field à think of uint64 (shown as timestamp) RowVersion
16. • Both tables are synced • No special requirements SQL Triggers
17. • GamesCategories is only synced indirectly • Triggers mark related entities as modified • Enforce a new RowVersion SQL Triggers
18. DEMO
19. • Provide changed data since last GET request (for bigger amounts of data) • Deal with bulk requests (connection has been recovered) • Add / Update / Delete Items • Deal with conflicts • Write data to database using local transactions Challenges at API tier
20. DEMO
21. • Store data locally • sensitive data à deploy as a native app using Electron / Cordova • Switch form HTTP calls to offline data storage immediately • Identify a proper connection state • No binary online/offline checks • Connection Restored Events • Provide conflict resolution UX / UI Challenges at SPA tier
22. An OfflineDetectionService Interface Challenges at SPA tier
23. • SQLite (cordova or electron) • SQLiteCypher (cordova or electron) • IndexedDB • LocalStorage • SessionStorage Local Data Storages for HTML apps
24. DEMO
25. Tips from offline implementations we did • Design offline first • Implement adaptive UI and remove Actions which rely on network • Implement proper connectivity checks • Define concurrency • Implement conflict resolution • Trace / Log / Audit everything • Don’t underestimate implementation and specification efforts From the field
26. • Real definition of offline • Impact on application architectures • Implementation for connectivity checks • Actual sync implementation is no magic • Can and will be time-consuming • Some tips from the field Recap
27. Code https://github.com/ThorstenHans/boardz aka https://goo.gl/y6NdEv Slides https://speakerdeck.com/thorstenhans/offline-apps-with-angular-webapi-and-sql-server aka https://goo.gl/5iijXs Code & Slides
28. Q&A If you’ve further questions later on: shoot me a mail at thorsten.hans@thinktecture.com or thorsten.hans@gmail.com or tweet at @ThorstenHans