際際滷

際際滷Share a Scribd company logo

Web assembly with PWA

Download as PPTX, PDF
Shashank Sharma
Shashank Sharma

This document discusses modern web applications using progressive web apps (PWA) and WebAssembly (WASM). It begins by defining a web application and describing challenges like performance issues. It then introduces PWAs and WASM as solutions, explaining what they are, how they work, and providing examples. The document shares links to starter kits and success stories to help readers get started with building modern web apps using these technologies.

1 of 33
Download to read offline
Modern Web Applications with PWA & WASM - Gaurav Behere, Shashank Sharma
What is a WebApp? - Its in the Cloud - It runs on browsers across platforms (Browsers + OS + Devices) - Not webapp - A UI software - Thick client / Thin client
How to `good UX`?
Problems User experience & Browser limitation Performance Network latency + stable FPS (~60) JavaScript limitations on browsers Knowledge is readily available but key information is not!
Still Buffering ?
Web assembly with PWA
How Did We Optimize ? - Caching Server Side/ Client Side - Writing optimized code, SQL queries - Making use of the power of browser: app cache/ local storage/ indexedDB/ web workers etc - Reducing network calls by code minification/uglification + combining files, image sprites etc (There are many)
Whats PWA? - Mobile App + Web App = PWA Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience. Linkable/Shareable PWA is a hosted web app, can be shared with a link, not like an APK.
Why PWA? Success Stories: https://developers.google.com/web/showcase/region/#asia
How to PWA ? - PWA Checklist + Lighthouse - Site is served over HTTPS - Pages are responsive on tablets & mobile devices - All app URLs load while offline - Metadata provided for Add to Home screen - First load fast even on 3G - Site works cross-browser - Page transitions don't feel like they block on the network - Each page has a URL - ---- etc - https://developers.google.com/web/progressive-web-apps/checklist
How Stuff Works? Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more. We can handle that event with full control, checking for cached data and returning immediately, or allowing the request to continue to the remote server. Our script acts as a proxy, or middleware, for the request.
Showtime - https://gauravbehere.github.io/pwa-starter-demo - https://shankscript.github.io/wasm-starter-kit/dist/
History History JavaScript (created in 10 days in May 1995,byBrendanEich) DHTML? RIA? Java Applets ActiveX Flash Silverlight Dart 2018 - JavaScript (still!)
Most used Programming language? Most criticized one? [] == false ? == false ?
2018 - JavaScript (still!) ...but the way we are using it has changed 2018 - JavaScript (still!) ...but the way we are using it has changed We are writing a lot of JavaScript the Web has become the most ubiquitous application platform ever, and yet by historical accident the only natively supported programming language for that platform is JavaScript!
Web assembly with PWA
History JavaScript (createdin 10 daysin May 1995,byBrendanEich) Java Applets ActiveX Flash Silverlight Dart 2018 - JavaScript (still!) ...but the way weareusingithaschanged
Web assembly with PWA
The open standards for WebAssembly are developed in a W3C Community Group (that includes representatives from all major browsers) as well as a W3C Working Group.
Web assembly with PWA
Web assembly with PWA
Support
WebAssembly Architecture A stack machine, 4 types, 67 instructions Designed to support streaming compilation Simple validation rules Exports / imports functions Linear memory is shared with JavaScript
WebAssembly(.WASM) S Expression (.WAT) func $stackAlloc (param i32) (result i32) (local i32) get_global 5 set_local 1 get_global 5 get_local 0 i32.add set_global 5 get_global 5 i32.const 15 i32.add i32.const -16 i32.and set_global 5 get_local 1 end
WebAssembly Language Support (and what people are doing with it) C/C++ Emscripten Based on LLVM Rust, C, C++ used in production for performance critical, algorithmic tasks Webpack Java, C#, Typescript lots of creative experiments / POCs Native node modules GC support
Web assembly with PWA
Web assembly with PWA
Web assembly with PWA
Showtime - https://shankscript.github.io/wasm-starter-kit
Code walkthrough
Whats next ? Heavy weight softwares (Thin client)- Photoshop/3D Max/Simulators/IDE/CAD/DSP/AI/NLP/MatLab Gaming Thin client migration where heavy cloud computing is used Existing web apps can be improved and/or can deliver more feature CUIC
Take away? - Some gyan! - Modern webapp = PWA + WASM Service Worker Webworker Webassembly http2 Web Components .. - Minimal starter kits to start playing with PWA/WASM
Thank You ! - PWA Starter Kit: - https://github.com/gauravbehere/pwa-starter-demo - WASM Starter Kit - https://github.com/shankscript/wasm-starter-kit - Gaurav Behere - http://gauravbehere.in - Shashank Sharma - http://shankscript.me

More Related Content

Web assembly with PWA

  • 1. Modern Web Applications with PWA & WASM - Gaurav Behere, Shashank Sharma
  • 2. What is a WebApp? - Its in the Cloud - It runs on browsers across platforms (Browsers + OS + Devices) - Not webapp - A UI software - Thick client / Thin client
  • 4. Problems User experience & Browser limitation Performance Network latency + stable FPS (~60) JavaScript limitations on browsers Knowledge is readily available but key information is not!
  • 7. How Did We Optimize ? - Caching Server Side/ Client Side - Writing optimized code, SQL queries - Making use of the power of browser: app cache/ local storage/ indexedDB/ web workers etc - Reducing network calls by code minification/uglification + combining files, image sprites etc (There are many)
  • 8. Whats PWA? - Mobile App + Web App = PWA Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience. Linkable/Shareable PWA is a hosted web app, can be shared with a link, not like an APK.
  • 9. Why PWA? Success Stories: https://developers.google.com/web/showcase/region/#asia
  • 10. How to PWA ? - PWA Checklist + Lighthouse - Site is served over HTTPS - Pages are responsive on tablets & mobile devices - All app URLs load while offline - Metadata provided for Add to Home screen - First load fast even on 3G - Site works cross-browser - Page transitions don't feel like they block on the network - Each page has a URL - ---- etc - https://developers.google.com/web/progressive-web-apps/checklist
  • 11. How Stuff Works? Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more. We can handle that event with full control, checking for cached data and returning immediately, or allowing the request to continue to the remote server. Our script acts as a proxy, or middleware, for the request.
  • 13. History History JavaScript (created in 10 days in May 1995,byBrendanEich) DHTML? RIA? Java Applets ActiveX Flash Silverlight Dart 2018 - JavaScript (still!)
  • 14. Most used Programming language? Most criticized one? [] == false ? == false ?
  • 15. 2018 - JavaScript (still!) ...but the way we are using it has changed 2018 - JavaScript (still!) ...but the way we are using it has changed We are writing a lot of JavaScript the Web has become the most ubiquitous application platform ever, and yet by historical accident the only natively supported programming language for that platform is JavaScript!
  • 17. History JavaScript (createdin 10 daysin May 1995,byBrendanEich) Java Applets ActiveX Flash Silverlight Dart 2018 - JavaScript (still!) ...but the way weareusingithaschanged
  • 19. The open standards for WebAssembly are developed in a W3C Community Group (that includes representatives from all major browsers) as well as a W3C Working Group.
  • 23. WebAssembly Architecture A stack machine, 4 types, 67 instructions Designed to support streaming compilation Simple validation rules Exports / imports functions Linear memory is shared with JavaScript
  • 24. WebAssembly(.WASM) S Expression (.WAT) func $stackAlloc (param i32) (result i32) (local i32) get_global 5 set_local 1 get_global 5 get_local 0 i32.add set_global 5 get_global 5 i32.const 15 i32.add i32.const -16 i32.and set_global 5 get_local 1 end
  • 25. WebAssembly Language Support (and what people are doing with it) C/C++ Emscripten Based on LLVM Rust, C, C++ used in production for performance critical, algorithmic tasks Webpack Java, C#, Typescript lots of creative experiments / POCs Native node modules GC support
  • 31. Whats next ? Heavy weight softwares (Thin client)- Photoshop/3D Max/Simulators/IDE/CAD/DSP/AI/NLP/MatLab Gaming Thin client migration where heavy cloud computing is used Existing web apps can be improved and/or can deliver more feature CUIC
  • 32. Take away? - Some gyan! - Modern webapp = PWA + WASM Service Worker Webworker Webassembly http2 Web Components .. - Minimal starter kits to start playing with PWA/WASM
  • 33. Thank You ! - PWA Starter Kit: - https://github.com/gauravbehere/pwa-starter-demo - WASM Starter Kit - https://github.com/shankscript/wasm-starter-kit - Gaurav Behere - http://gauravbehere.in - Shashank Sharma - http://shankscript.me