Power of web assembly with Progressive Web App development

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!

5. Still Buffering ?

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.

12. Showtime
- https://gauravbehere.github.io/pwa-starter-demo
- https://shankscript.github.io/wasm-starter-kit/dist/

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

29. Showtime
- https://shankscript.github.io/wasm-starter-kit

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