Native apps
Xamarin
It lets you build one app that runs on many platforms
using C#.
Use Xamarin to write native iOS, Android, and Windows
apps with native user interfaces and share code across
multiple platforms.
Slide 10
Slide 10 text
Native apps
for end users
hybrid = native
Hybrid apps must feel native, or users are going to
uninstall the app.
Slide 11
Slide 11 text
Native apps
Are built for specific platforms and are written in the
languages the platform accepts (eg. Swift and
Objective-C for iOS apps and Java or Kotlin for Android
apps).
Slide 12
Slide 12 text
Native apps
Advantages of Native Apps:
➔ Fast and responsive since they are built for a specific platform.
➔ Have the best performance.
➔ More interactive, intuitive and much smoother in terms of user I/O.
➔ Allows developers to access the full feature set of the platform.
➔ Internet connection is not required, depending on the functionality.
➔ To the user, the flow is more natural as each platform has specific UI
standards.
Slide 13
Slide 13 text
Native apps
Disadvantages of Native Apps:
➔ Difficult programming languages to learn which
means you need experienced developers.
➔ More expensive.
➔ Not the best option for very simple apps.
Slide 14
Slide 14 text
Native apps
In the end, remember:
It’s a false choice!
Slide 15
Slide 15 text
Native apps
“Pure” native can still use
the web: web views allow
native apps to make use of
web content.
Slide 16
Slide 16 text
Progressive
Web Apps
Mobile App Development with JavaScript
Slide 17
Slide 17 text
Progressive Web Apps
Are hybrids of regular web
pages and mobile apps.
Slide 18
Slide 18 text
Progressive Web Apps
Are not a technology, but a
collection of features an
application should support.
Slide 19
Slide 19 text
Progressive Web Apps
➔ WebRTC
➔ Media Capture and Streams
➔ Geolocation
➔ Web Notifications
➔ Payment Request API
➔ Web Share API
➔ Generic Sensor API
➔ Canvas
➔ WebGL
➔ Gamepad API
➔ Web Bluetooth API
➔ Speech Synthesis
➔ Shape Detection API
➔ IndexedDB
➔ WebVR
➔ Web Cryptography API
Slide 20
Slide 20 text
Progressive Web Apps
How to distinguish websites from apps?
Add a file with metadata for apps only so that apps can be
identified by search engines, app store providers etc.
Web App Manifest:
Progressive Web Apps
Aproach - Offline First
➔ Service Worker
➔ Cache API
➔ IndexedDB
Slide 23
Slide 23 text
Progressive Web Apps
Service Worker
➔ Worker snippet is executed in it’s own thread.
➔ Worker can’t manipulate the parent document’s DOM.
➔ Communication via API (postMessage) + Acts as a controller / proxy /
interceptor and performs background tasks.
Progressive Web Apps
Cache API
➔ Key-value storage
➔ Key: HTTP(S) request, value: HTTP(S) response
➔ Survives browser restarts (Safari: unused caches are cleared “after a
➔ few weeks”)
➔ Can be accessed from both service worker and website
➔ Isolated per origin (protocol + hostname + port)
➔ Multiple named caches per origin
➔ Cache operations are asynchronous (Promises)
Slide 26
Slide 26 text
Progressive Web Apps
Adding Requests to the cache
self.addEventListener('install', event => {
event.waitUntil(
caches.open('pwa-demo')
.then(cache => cache.addAll(['/', '/index.html']))
.then(() => self.skipWaiting())
);
});
Slide 27
Slide 27 text
Progressive Web Apps
Delivering from the cache
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
Slide 28
Slide 28 text
Progressive Web Apps
IndexedDB
Is a database in the browser capable of storing structured data in tables with
keys and value.
Data is stored permanently (survives browser restarts).
Service Worker and website share access to the same IndexedDB database
(e.g. for synchronization purposes).
Slide 29
Slide 29 text
Progressive Web Apps
Summary
➔ Write once, run anywhere (mobile, desktop, browser, …)
➔ One development team, one code base
➔ Limited to what the web can offer (API support is huge & growing)
➔ Can also be submitted to Google Play and Microsoft Store
➔ Can be monetized (Payment Request API or traditional checkout forms)
➔ Also run on legacy browsers (IE)
Slide 30
Slide 30 text
React Native Apps
Mobile App Development with JavaScript
Slide 31
Slide 31 text
React Native
“learn once, write everywhere”
Slide 32
Slide 32 text
React Native
It uses the same design as React,
letting you compose a rich mobile UI
from declarative components.
Slide 33
Slide 33 text
React Native
Efficient Re-rendering through Virtual DOM.
Abstracts the DOM and gives a simpler programming
model and better performance.
Minimizes the repaints focusing only on what has
changed.
Slide 34
Slide 34 text
React Native
What’s good about it anyway?
Slide 35
Slide 35 text
React Native
➔ Abstraction
➔ Community
➔ Flexibility
Slide 36
Slide 36 text
React Native
Express how the app should look at
any given point in time.
React will manage all the UI
updates when your data changes.
Slide 37
Slide 37 text
React Native
When data changes, React knows to
only update the changed parts.
Slide 38
Slide 38 text
React Native
Encapsulated and reusable
components.
Easy to reuse, test and separate
concerns.
Slide 39
Slide 39 text
React Native
Native components
➔ standard platform components such as UITabBar on
iOS or Navigation Drawer on Android
➔ consistent look and feel with the rest of the platform
ecosystem
Slide 40
Slide 40 text
React Native
Asynchronous execution
➔ bridge between JS and native platform is async
➔ JS runs in the background
➔ it makes apps fluid and responsive
React Native
$ react-native init AwesomeProject
Checkout App.js for your application code
Checkout the android and ios folders for platform specific code
React Native
Navigation
Navigation is a slight pain
Obviously, URL is not available like a web app
Routing libraries are/were still competing
Navigation can get tricky when promises are involved…
react-navigation uses navigation.navigate to change the current view
Slide 45
Slide 45 text
React Native
State
State management & updates are tricky
You can do a lot with props and state
Relationships can get complicated…
Slide 46
Slide 46 text
React Native
Platform-Specific
Android App Bar
iOS navigation
Android text components / underline
iOS SafeAreaView
Keyboard-aware layouts
Slide 47
Slide 47 text
React Native
React Native & React significantly
accelerate mobile app development.
But, they come with some pitfalls to
be aware of.
Slide 48
Slide 48 text
Hybrid Apps
Mobile App Development with JavaScript
Slide 49
Slide 49 text
Hybrid Apps
A hybrid app is essentially a
combination of a native and a web app.
Slide 50
Slide 50 text
Hybrid Apps
HTML5 with platform-specific UI
Full access to native APIs and SDKs
Familiar web development environment
Single code base across native and the web
Slide 51
Slide 51 text
Hybrid Apps
➔ Hybrid Apps: HTML5 that acts like native
➔ Web wrapped in native layer
➔ Direct access to native APIs
➔ Familiar web dev environment
➔ Develop a single code base (web platform)
Slide 52
Slide 52 text
Hybrid Apps
“Hybrid apps are slow!”
Slide 53
Slide 53 text
Hybrid Apps
Performant animation with GPU compositing
Advanced mobile device features and APIs
Web-workers to offload tasks from UI
Modern Chromium for Android
Slide 54
Slide 54 text
Hybrid Apps
It's the wild-west for hybrid apps
A gap between web and native
We need rich, native-like UI components and interactions
We need UI APIs, not just jQuery widgets
Hybrid Apps
A hybrid app consists of two parts:
1. the backend code which is built using languages such as
HTML, CSS, or JavaScript
2. native shell that is downloadable and loads the code
using a webview.
Slide 57
Slide 57 text
Hybrid Apps
HOW IT ALL COMES TOGETHER
1. Your App
2. UI Framework
3. Angular / EmberJs / VueJs / React
4. Cordova
5. Native SDKs
Ionic
VIRTUAL SCROLLING
➔ Inspired by iOS’s UICollectionView
➔ Scroll through thousands of items
➔ Only renders the viewable items
➔ Smooth scrolling!
{{ item.firstName }} {{ item.lastName }}
Slide 61
Slide 61 text
Ionic
OTHER COMPONENTS
Side Menus, Actionsheet, Modal, Pull To Refresh, Spinners,
Slidebox, Infinite Scroll, Swipeable List Options, Popup,
Popover, Loading Overlay, Inputs, Buttons etc.
Slide 62
Slide 62 text
Ionic 3 vs Ionic 4
➔ Ionic 4 was rebuilt using standard Web APIs, and each
component is packaged as a Web Component.
➔ Ionic 4 is completely agnostic of the base framework.
➔ Ionic 4 now uses the Angular Router.
Slide 63
Slide 63 text
Ionic 3 vs Ionic 4
$ npm install -g ionic@latest
$ ionic start appName blank --type=angular
$ ionic serve
$ ionic g page User
$ ionic g service services/user
Ionic 3 vs Ionic 4
Life cycles that were used in Ionic 3 such as ionWillLoad
will no longer be used in Ionic 4.
Angular life cycles such as ngOnInit and ngAfterViewInit
will be used.
Slide 66
Slide 66 text
Ionic 3 vs Ionic 4
Angular Modules
No longer necessary to import pages and services in the
app.module.ts file.
When using lazy loading, for each page there will be a
module.
Slide 67
Slide 67 text
Conclusion
Mobile App Development with JavaScript
Slide 68
Slide 68 text
Conclusion
Choosing a development method should NOT
be determined solely by cost.
User experience should be the primary factor
that helps you decide whether to build a
native, PWA, React Native or hybrid app.
Slide 69
Slide 69 text
Conclusion
The choice between all options is dependent
on a number of factors, including business
needs, app requirements, developer skill, and
timelines.
Slide 70
Slide 70 text
QA
Mobile App Development with JavaScript
Slide 71
Slide 71 text
Thanks!
➔ @stefanbc
➔ [email protected]
➔ stefancosma.xyz
Mobile App Development with JavaScript