Building cross platform web apps
0 likes71 views
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.
![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"
}](https://image.slidesharecdn.com/buildingcrossplatformwebapps-181023081831/85/Building-cross-platform-web-apps-8-320.jpg)
![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"
}](https://image.slidesharecdn.com/buildingcrossplatformwebapps-181023081831/85/Building-cross-platform-web-apps-9-320.jpg)
![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"
}](https://image.slidesharecdn.com/buildingcrossplatformwebapps-181023081831/85/Building-cross-platform-web-apps-10-320.jpg)
![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"
}](https://image.slidesharecdn.com/buildingcrossplatformwebapps-181023081831/85/Building-cross-platform-web-apps-11-320.jpg)
![React (Web) Components
• Written in JSX [documentation]
• (props, state) => DOM](https://image.slidesharecdn.com/buildingcrossplatformwebapps-181023081831/85/Building-cross-platform-web-apps-43-320.jpg)
Building cross platform web 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
- 15. Network request: Service Worker in play Web App Service Worker Network Cache
- 16. DEMO – Offline with SW https://aka.ms/applescrusher
- 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
- 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
- 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);
- 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)
- 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