Timeline
1990 - 1995 : HTML, CSS and JavaScript are invented.
1996 - 1999 : Standardization efforts begin. Browser compliance is terrible.
Browser wars ignite.
2000 - 2004 : CSS frameworks begin to emerge. jQuery is born. Frontend
package management.
2005 - 2009 : W3C specification compliance is met. Chrome browser takes
the lead. Responsive designs and frameworks are introduced.
Slide 6
Slide 6 text
Timeline
2010 - 2015: JavaScript Frameworks are born - i.e. Backbone, Ember,
AngularJS, React, Angular, Vue. HTML5 is announced.
2016 - 2019: GraphQL emerges. Native HTML, CSS & JavaScript become
more powerful. New platforms built on top of existing JavaScript frameworks
emerge: Motion UI, Gatsby, Next.js.
Slide 7
Slide 7 text
Timeline
Brendan Eich wrote Mocha in 10 days in May 1995.
Mocha becomes LiveScript later.
In December 1995 the language was renamed again to it’s final name:
JavaScript
Slide 8
Slide 8 text
Native Apps
Mobile JavaScript Development
Slide 9
Slide 9 text
Native apps
Should you build a
native app or not?
Slide 10
Slide 10 text
Native apps
tl;dr: It depends quite a bit
on the context and
requirements of your app.
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 14
Slide 14 text
Native apps
for end users
hybrid = native
Hybrid apps must feel native, or users are going to
uninstall the app.
Slide 15
Slide 15 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 16
Slide 16 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 17
Slide 17 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 18
Slide 18 text
Native apps
In the end, remember:
It’s a false choice!
Slide 19
Slide 19 text
Native apps
“Pure” native can still use
the web: web views allow
native apps to make use of
web content.
Slide 20
Slide 20 text
Progressive
Web Apps
Mobile JavaScript Development
Slide 21
Slide 21 text
Progressive Web Apps
Are hybrids of regular web
pages and mobile apps.
Slide 22
Slide 22 text
Progressive Web Apps
Are not a technology, but a
collection of features an
application should support.
Slide 23
Slide 23 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 24
Slide 24 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 27
Slide 27 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 30
Slide 30 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 31
Slide 31 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 32
Slide 32 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 33
Slide 33 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 34
Slide 34 text
React Native Apps
Mobile JavaScript Development
Slide 35
Slide 35 text
React Native
“learn once, write everywhere”
Slide 36
Slide 36 text
React Native
It uses the same design as React,
letting you compose a rich mobile UI
from declarative components.
Slide 37
Slide 37 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 38
Slide 38 text
React Native
What’s good about it anyway?
Slide 39
Slide 39 text
React Native
➔ Abstraction
➔ Community
➔ Flexibility
Slide 40
Slide 40 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 41
Slide 41 text
React Native
When data changes, React knows to
only update the changed parts.
Slide 42
Slide 42 text
React Native
Encapsulated and reusable
components.
Easy to reuse, test and separate
concerns.
Slide 43
Slide 43 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 44
Slide 44 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 49
Slide 49 text
React Native
State
State management & updates are tricky
You can do a lot with props and state
Relationships can get complicated…
Slide 50
Slide 50 text
React Native
Platform-Specific
Android App Bar
iOS navigation
Android text components / underline
iOS SafeAreaView
Keyboard-aware layouts
Slide 51
Slide 51 text
React Native
React Native & React significantly
accelerate mobile app development.
But, they come with some pitfalls to
be aware of.
Slide 52
Slide 52 text
Hybrid Apps
Mobile JavaScript Development
Slide 53
Slide 53 text
Hybrid Apps
A hybrid app is essentially a
combination of a native and a web app.
Slide 54
Slide 54 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 55
Slide 55 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 56
Slide 56 text
Hybrid Apps
“Hybrid apps are slow!”
Slide 57
Slide 57 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 58
Slide 58 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 61
Slide 61 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 65
Slide 65 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 66
Slide 66 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 67
Slide 67 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 70
Slide 70 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 71
Slide 71 text
Conclusion
Mobile JavaScript Development
Slide 72
Slide 72 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 73
Slide 73 text
Conclusion
The choice between all options is dependent
on a number of factors, including business
needs, app requirements, developer skill, and
timelines.
Slide 74
Slide 74 text
QA
Mobile JavaScript Development
Slide 75
Slide 75 text
Thanks!
➔ @stefanbc
➔ [email protected]
➔ stefancosma.xyz
Mobile JavaScript Development