The document discusses different approaches for building cross-platform web apps: 1. Progressive Web Apps (PWAs) which work across devices and can be installed like native apps using web technologies. 2. Electron which allows building desktop apps with web technologies but results in larger apps. 3. Hybrid apps which combine a web view layer with native platform integration via plugins but have web-based UIs. 4. JavaScript-driven native apps like React Native and NativeScript which use JavaScript to build truly native mobile apps.

1. Building Cross Platform Web
Apps
David Rousset
Senior Program Manager PAX / Experiences & Devices
@davrous

2. Large Ecosystem of frameworks

3. How to build a cross-platform web app today?
1 – Progressive Web App aka PWA
2 - Electron
3 – Hybrid app
4 – JavaScript-driven Native

4. PWA

5. A PWA is
Progressive
Works on any device and enhance
functionality progressively.
Discoverable
Better discovery and integration with
search.
Linkable
Ability to retain or reload its state
and be shareable from a link.
Responsive
Fit any device’s form factor and
screen size.
App-like
Looks like a native app and uses the
application shell model with minimal
page refreshes.
Connectivity-agnostic
Works with low connectivity or offline.
Installable
Install on the device’s desktop,
start menu, or task bar making it
readily available.
Current
Application and content is up to date
when connected to the Internet.
Re-engageable
Promotes re-engagement through
features such as push notifications.
Performant
Works as fast or faster than a native app.
Connected to users
Direct feedback to you through
ratings and reviews

6. Devices + IoT Mobile PC Xbox Surface Hub HoloLens
A C R O S S W I N D O W S
C R O S S P L A T F O R M
P R O G R E S S I V E W E B A P P S
X

7. HTTPS Web App Manifest Service Worker
Minimum Viable
Progressive Web App

8. Web Application
Manifest
{
"lang": "en",
"short_name": "Wash Post",
"name": "The Washington Post",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/launcher-icon-4x.png",
"sizes": ”512x512",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}

9. Web Application
Manifest
{
"lang": "en",
"short_name": "Wash Post",
"name": "The Washington Post",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/launcher-icon-4x.png",
"sizes": ”512x512",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}

10. Web Application
Manifest
{
"lang": "en",
"short_name": "Wash Post",
"name": "The Washington Post",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/launcher-icon-4x.png",
"sizes": ”512x512",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}

11. Web Application
Manifest
{
"lang": "en",
"short_name": "Wash Post",
"name": "The Washington Post",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/launcher-icon-4x.png",
"sizes": ”512x512",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}

12. DEMO – Add to Home Screen
https://aka.ms/applescrusher

14. Network request:
Typical
Web App
Network

15. Network request:
Service Worker
in play
Web App
Service
Worker
Network Cache

16. DEMO – Offline with SW
https://aka.ms/applescrusher

18. https://www.telerik.com/blogs/choose-between-progressive-web-apps-react-native-

19. PWABuilder.com to help you
Create / Manage your manifest
Create the various images / icons
Provide some Service Workers bootstraps
Package your web app for the Windows Store or for Cordova

25. PWA ?
PROs
• It’s a web site!
• Easy updates on the web server
• Same code everywhere
• Use your favorite framework (Angular, Vue, React) or language (TypeScript,
JavaScript)
• High reach / Any device
• Indexable
CONs
• Same UI/UX on all platforms
• Don’t have a full access to the platform / hardware

27. Electron

28. Visual Studio Code

29. Microsoft Teams

30. Electron Reach
Windows
iOS & macOSAndroid

31. Electron App
Electron
Chromium
Open Source Project
Node JS Electron API
BuildSystem
App Code Win7 App
Win10 App
Mac App
Linux App
Win8 App

32. Electron ?
PROs
• Use your favorite web stack (front + node.js)
• Controlled browser’s engine
• Can interact with the system via native calls
• Linux / MacOS / Windows easy targeted
CONs
• Embed a full Chromium
• Size
• Security updates
• Desktop only

33. Hybrid app

34. 2 main options
Cordova / PhoneGap
Native app with a WebView
XAML/C#
Swift / Objective C
Java

35. Camera Plugin
Native JS
Plugin
Native JS
AppCode
Cordova
WebView
Packaged
App

36. Hybrid App?
PROs
• Can better integrate with the hardware / platform than PWA
CONs
• Still Web UI ! It’s difficult to mimic native controls
• Mainly just an enhanced WebView
• Updates on Stores

37. JavaScript-driven Native

38. Telerik’s NativeScript
Use JavaScript (or TypeScript) and CSS to write native mobile
applications.
No webview involved in rendering the app
UI is rendered by the native platform's rendering engine
Because of that the apps entire UX is native
Use specific XML or Vue or Angular approach

39. At runtime, executed on the JS engine.
In Cross platform abstraction
On Android
var file = new File(path);Cross-platform
Cross-platform API
File file = new
java.io.File(path);
On iOS
NSFileManager.defaultManager();
fileManager.createFileAtPathContentsAttributes(
path);

40. DEMO – NativeScript

42. React Native
Write your business and view logic in JavaScript, remove the
major need for native UI expertise
Business logic is shared across all platforms in JavaScript:
iOS, Android, Web, macOS
Write JS once, create UX for all platforms extremely quickly
Learn Once, Write Anywhere

43. React (Web) Components
• Written in JSX [documentation]
• (props, state) => DOM

44. React Native Components
• Also written in JSX
• (props, state) => DOM native views

45. React Native: Hello World
Markup called
“JSX”

46. React Native: Using Variables

47. React Native: Styles (CSS Lite)

48. React Native Apps

49. Teams client architecture
Browsers: Edge, IE11, latest Chrome, latest Firefox | Desktop: Windows 10, 8.1, 7(SP1), Mac OS X 10.10+
IOS Android
Swift Java
Optimized for agility
auto-updates
Angular ! React
jQuery, lodash etc.. (200+ Open Source Components)
TypeScript, Node, SASS
HTML5/CSS
C++ Objective C
Windows MacWeb AndroidiPhone/iPad
Deskto
p
Mobile
Electron
React native

50. JavaScript Native?
PROs
• Rich Native UI & perfect platform integration
• Re-use your JavaScript business layer / logic
• Target iOS & Android with a unique UI code
CONs
• Need to learn the native controls / syntax
• Debugging can be more complex than just F12
• Less reach than PWA

51. Conclusion
“The Web is for audience reach and native apps are for rich
experiences. Both are strategic. Both are valuable. So when it comes
to mobile, it’s not Web vs. Native. It’s both.”
https://www.lukew.com/ff/entry.asp?1954

52. Conclusion
Web can now build high quality apps for any device
PWA should be considered first for the higher reach & high portability
if non-native UX is not a blocker
if you don’t need to access to specific hardware
Interesting combos with Angular/Vue/React:
- PWA + JavaScript Native for mobiles
- PWA + Electron for desktop
- Electron + JavaScript Native

53. Thank you.
@davrous
@MSEdgeDev
PWABuilder.com
www.davrous.com