Unlocking the power of Modern Web APIs

Explore how Modern Web APIs empower developers to build powerful, efficient, and interactive web applications by leveraging native browser capabilities.

Transcript

1. Unlocking the power of Modern Web APIs Building the web of Tomorrow Ayantunji Timilehin
2. Outline of Our discussion 1. The Web 2. Evolution and pre-web Api 3. API (Application Programming Interface) 4. Core Web Apis and the Navigation Object 5. Harnessing the power of Web APis for innovation 6. The future of the Web
3. The Web Source: Pixabay
4. An information space where documents and other resources are identified by URLs, interlinked by hypertext, and accessible via the Internet Tim Berners-Lee
5. Evolution of the Web
6. What is an API?
7. API EXPLAINED Source: CNN Source: OysterLink
8. How APIs work ➢ Request-Response Model ➢ HTTP(s) ➢ Endpoints ➢ Methods - GET, PUT, POST, DELETE, PATCH ➢ The browser environment
9. API Architecture Source: Medium
10. API Architecture Source: Medium
11. The Navigator Object and Core Web APIs
12. The Navigator Object The navigator object is a built-in JavaScript object that provides information about the user's browser and the environment in which the page is running. It’s part of the Window interface and is typically accessed through window.navigator ➢ navigator.userAgent ➢ navigator.onLine ➢ navigator.language ➢ navigator.permissions
13. Core Web APIs ➢ Fetch ➢ Geolocation ➢ Service Worker ➢ Web Notification
14. The Fetch Api ➢ Promised based ➢ Interact with Apis ➢ Cross origin resource sharing support ➢ Supports HTTP request methods ➢ Streamlined error handling
15. The Fetch Api
16. Geolocation ➢ Access user’s geolocation ➢ Perfect for applications requiring location tracking, but mindful use is essential. ➢ Requires Https or localhost ➢ getCurrentPosition(), watchPosition(), clearWatch() ➢ Allows for geocoding
18. Service Worker ➢ Runs in the background of a browser ➢ Intercept and Cache requests ➢ Offline availability - Cache resources and assets ➢ Supports push notifications ➢ Background syncing ➢ Works over HTTPS or localhost ➢ Can’t access the DOM, interact through postMessage()
19. Source: simicart
20. Lifecycle of the service worker Source: Js in plain English
22. The Notification API ➢ Display native notifications to user ➢ Real time communication ➢ Requires user’s permission ➢ Supported by most browsers ➢ Allow users to control notification preferences in your app.
23. Other Web APIS ➢ WebRTC API ➢ Web Sockets ➢ Web Storage ➢ Payment API ➢ Canvas API
24. Harnessing the power of Web APIs ➢ Real time collaboration ➢ Cross-effective development ➢ Scalability ➢ Simplified Integrations ➢ Encouraging innovation
25. ➢ Web 3.0 ➢ Artificial Intelligence Future of The Web Source: The cryptonomist
26. Thank you Osogbo Ayantunji Timilehin @timi471 Timilehin Ayantunji