Ladda JS Caching Library @ BerlinJS, 2017/04/20

Presentation about the JS caching library Ladda (https://github.com/ladda-js/ladda) at the BerlinJS Meetup (http://berlinjs.org/) by Peter Crona (https://github.com/petercrona) and Gernot Hoeflechner (https://github.com/LFDM)

Transcript

1. Client-Side API Caching Library Peter Crona & Gernot Höflechner
2. Presentation 1. Why Caching? 2. A Naive Solution 3. Using Ladda 4. Why Ladda?
3. Performance Why Caching
4. Why Caching Amount of data
5. if (!inCache(...)) { saveInCache(...); } return fromCache(...); A Naive Solution
6. if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); A Naive Solution
7. if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); Increases application complexity! A Naive Solution
8. if (!inCache(...)) { saveInCache(...); } return fromCache(...); api.user.getAll() VS A Naive Solution
9. if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); if (!inCache(...)) { saveInCache(...); } return fromCache(...); A Naive Solution
10. api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() A Naive Solution
11. api.user.getAll() A Naive Solution api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() api.user.getAll() Tamed Application Complexity
12. Application api.users.getUsers() Using Ladda
13. build({ user: { api: usersApi } }) Ladda Config build({ user: { api: usersApi } }) Using Ladda
14. getAll.operation = “READ”; export function getAll() { return http.get(...); } API Using Ladda
15. Application Ladda Config API api.users.getUsers() build({ user: { api: usersApi } }) getAll.operation = “READ”; export function getAll() { return http.get(...); } Using Ladda
16. api.users.getUsers() build({ user: { api: usersApi } }) Application Ladda Config API getAll.operation = “READ”; export function getAll() { return http.get(...); } Using Ladda
17. Using Ladda Knows nothing about Ladda! No dependencies! Application API (Ladda’s Config and decorated API functions)
18. Quick in - Quick out Why Ladda
19. Framework Agnostic Why Ladda
20. Tamed Complexity Why Ladda
21. Invalidation Why Ladda
22. Why Ladda
23. Why Ladda
24. build({ activityStream: { api: activityStreamApi }, objective: { api: objectivesApi, invalidates: [‘activityStream’] } }) Why Ladda
25. Plugins Why Ladda
26. Dedup Why Ladda
27. // Component 1 api.user.getUsers() // Component 2 api.user.getUsers() only one request made for identical simultaneous requests! Why Ladda
28. ladda-denormalizer Why Ladda
29. Why Ladda import { denormalizer } from ‘ladda-denormalizer’; build({ objective: { api: objectivesApi, plugins: { denormalizer: { schema: { owner: ‘user’, visibleTo: [‘user’] } } } } }, [denormalizer()]);
30. // Backend response { title: ‘Give a talk at a meetup’, owner: ‘9wCWF-y’, visibleTo: [‘hWCIv*Z’, ‘VA0k1vg’] } // what client sees { title: ‘Give a talk at a meetup’, owner: { id: ‘9wCWF-y’, name: ‘Peter Crona’ }, visibleTo: [ { id: ‘hWCIv*Z’, name: ‘Paulo Catumba’ }, { id: ‘VA0k1vg’, name: ‘Gernot Höflechner } ] } import { denormalizer } from ‘ladda-denormalizer’; build({ objective: { api: objectivesApi, plugins: { denormalizer: { schema: { owner: ‘user’, visibleTo: [‘user’] } } } } }, [denormalizer()]); Why Ladda
31. ladda-observable Why Ladda
32. import { observable } from ‘ladda-observable’; const api = build(config, [observable()]); Why Ladda
33. import { observable } from ‘ladda-observable’; const api = build(config, [observable()]); const activities$ = api.activityStream.getLatest.createObservable(); activities$.subscribe((activities) => ...); Why Ladda
34. import { observable } from ‘ladda-observable’; const api = build(config, [observable()]); const activities$ = api.activityStream.getLatest.createObservable(); activities$.subscribe((activities) => ...); // Higher order component from ladda-react withData({ observe: { activities: api.activityStream.getLatest.createObservable() } })(ActivityStream) No need to manage server-side data on the client! Why Ladda
35. Your plugin! Why Ladda
36. - bindings for Angular 2 and Vue - optimistic updates - offline support/persistent cache Why Ladda
37. Dependency Free Why Ladda
38. 100% Test Coverage Why Ladda
39. Why Ladda Small Improvements
40. 1. Client-Side API caching library 2. Naive VS Ladda 3. How to use (config + decorated API functions) 4. Plugins Summary
41. Learn more and try it out: https://github.com/ladda-js/ladda - rich documentation - example applications - next release coming soon! Thank You!
42. Questions? Peter Crona & Gernot Höflechner https://github.com/ladda-js/ladda