Web assembly with PWA
Download as PPTX, PDF3 likes898 views
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.
![Most used Programming language?
Most criticized one?
[] == false ?
“” == false ?](https://image.slidesharecdn.com/final1-180831063550/85/Web-assembly-with-PWA-14-320.jpg)
![[Unite2015 박민근] 유니티 최적화 테크닉 총정리](https://cdn.slidesharecdn.com/ss_thumbnails/unite2015-150417010741-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Web assembly with PWA (20)
Ad
Recently uploaded (20)
Ad
Web assembly with PWA
- 1. Modern Web Applications with PWA & WASM - Gaurav Behere, Shashank Sharma
- 2. What is a WebApp? - It’s in the Cloud - It runs on browsers across platforms (Browsers + OS + Devices) - Not webapp - A UI software - Thick client / Thin client
- 3. How to `good UX`?
- 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. What’s 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.
- 22. Support
- 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
- 30. Code walkthrough
- 31. What’s 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