Building cross platform web apps

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

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

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

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

HTTPS Web App Manifest Service Worker
Minimum Viable 
Progressive Web App

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"
}

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

Building cross platform web apps

Network request: 
Typical
Web App
Network

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

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

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

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

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

Electron Reach
Windows
iOS & macOSAndroid

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

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

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

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

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

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

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);

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

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

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

React Native: Hello World
Markup called
“JSX”

React Native: Styles (CSS Lite)

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

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

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

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

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

Building cross platform web apps

Recommended

More Related Content

What's hot (20)

Similar to Building cross platform web apps (20)

More from ITEM (20)

Recently uploaded (20)

Building cross platform web apps