New Kids in BrowserLand

Transcript

1. NEW KIDS IN BROWSERLAND  Supercharge your web apps using the new browser APIs  Navigate : Space / Arrow Keys | ­ Menu | ­ Fullscreen | ­ Overview | ­ Blackout | ­ Speaker | ­ Help M F O B S ?  1 / 44
2. So ware Engineer at Obsessed with Sindre's lists  geek Open Source Contributor at Night Co-Organizer at Meesho awesome Vue Bangalore SWAPNIL AGARWAL swapagarwal That swag guy!   devswag.io [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  2 / 44
3. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  3 / 44
4. SNEAK PEEK Intersection Observer API Credential Management API Network Information API Web Share API Device Memory API Payment Request API [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  4 / 44
5. LET'S START! [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  5 / 44
6. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  6 / 44
7. INTERSECTION OBSERVER API This API lets you know when an observed element enters or exits the browser's viewport (user's visible area of a web page). [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  7 / 44
8. Demo [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  8 / 44
9. Thresholds = [0, 0.25, 0.5, 0.75, 1] [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  9 / 44
10. USE CASES Lazy Loading Reporting of visibility of advertisements in order to calculate ad revenues Better Navigation Bar Check which feed cards are seen by user to avoid showing duplicate cards [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  10 / 44
11. Browser Support https://caniuse.com/#feat=intersectionobserver [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  11 / 44
12. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  12 / 44
13. CREDENTIAL MANAGEMENT API This API lets a website store and retrieve password credentials. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  13 / 44
14. API Spec [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  14 / 44
15. Demo [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  15 / 44
16. USE CASES Removes friction from sign-in flows One tap sign-in with account chooser Stores and syncs credentials [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  16 / 44
17. Browser Support https://caniuse.com/#feat=credential- management [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  17 / 44
18. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  18 / 44
19. NETWORK INFORMATION API This API lets you retrieve the current network type and monitor for network type changes. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  19 / 44
20. EXAMPLE Write connection-aware components, rendering different elements for different speeds. For example, a component in a news article might output: offline: a placeholder with alt text 2g / reduced data mode: a low-resolution image, ~30kb 3g: a high resolution retina image, ~200kb 4g: a HD video ~1.8MB [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  20 / 44
21. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  21 / 44
22. Preload Assets [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  22 / 44
23. Monitor [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  23 / 44
24. Browser Support https://caniuse.com/#feat=netinfo [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  24 / 44
25. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  25 / 44
26. HOW DO YOU ADD SHARING FUNCTIONALITY ON A WEBSITE TODAY? [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  26 / 44
27. WEB SHARE API This API offers a simple way to allow websites to invoke the native sharing capabilities of the host platform. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  27 / 44
28. Code Sample [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  28 / 44
29. Demo [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  29 / 44
30. Browser Support https://caniuse.com/#feat=web- share [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  30 / 44
31. LET'S TALK ABOUT MEMORY [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  31 / 44
32. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  32 / 44
33. DEVICE MEMORY API This API returns the amount of device memory (RAM) on a user's machine in gigabytes. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  33 / 44
34. Code Sample [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  34 / 44
35. USE CASES Serve a "lite" app to users on low-end devices Add context to metrics [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  35 / 44
36. Browser Support Reference [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  36 / 44
37. Typical Checkout Form [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  37 / 44
38. PAYMENT REQUEST API This API is meant to reduce the number of steps needed to complete a payment online, potentially doing away with (long) checkout forms. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  38 / 44
39. Demo [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  39 / 44
40. USE CASES Fast checkout experience Consistent error handling Express checkout [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  40 / 44
41. Browser Support https://caniuse.com/#feat=payment- request [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  41 / 44
42. RECAP A modern solution to handle scroll events (Intersection Observer API) Keep login simple for your users (Credential Management API) Make your website network-responsive (Network Information API) [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  42 / 44
43. RECAP Sharing made ridiculously easy (Web Share API) Tailor content dynamically based on device memory (Device Memory API) Buy seamlessly on the web (Payment Request API) [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  43 / 44
44. fin. [ GitPitch @ github/swapagarwal/new­kids­in­browserland ]  44 / 44