Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile JavaScript Development

Mobile JavaScript Development


Sibiu Web Meetup

May 17, 2019

More Decks by Sibiu Web Meetup

Other Decks in Programming


  1. Mobile JavaScript Development Stefan Cosma

  2. Stefan Cosma Senior Front-end Developer @ Ropardo Developer, builder of

    open source projects, comics enthusiast and amateur photographer. ➔ @stefanbc ➔ hello@stefancosma.xyz ➔ stefancosma.xyz
  3. Overview ➔ Timeline ➔ Native apps ➔ Progressive Web Apps

    ➔ React Native apps ➔ Hybrid apps
  4. Timeline Mobile JavaScript Development

  5. 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.
  6. 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.
  7. 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
  8. Native Apps Mobile JavaScript Development

  9. Native apps Should you build a native app or not?

  10. Native apps tl;dr: It depends quite a bit on the

    context and requirements of your app.
  11. Native apps What are your other options?

  12. Native apps ➔ Progressive Web apps ➔ React Native apps

    ➔ Hybrid apps
  13. 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.
  14. Native apps for end users hybrid = native Hybrid apps

    must feel native, or users are going to uninstall the app.
  15. 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).
  16. 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.
  17. 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.
  18. Native apps In the end, remember: It’s a false choice!

  19. Native apps “Pure” native can still use the web: web

    views allow native apps to make use of web content.
  20. Progressive Web Apps Mobile JavaScript Development

  21. Progressive Web Apps Are hybrids of regular web pages and

    mobile apps.
  22. Progressive Web Apps Are not a technology, but a collection

    of features an application should support.
  23. 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
  24. 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: <link rel="manifest" href="manifest.json">
  25. Progressive Web Apps manifest.json { "short_name": "PWA Demo", "name": "PWA

    Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" }
  26. Progressive Web Apps Aproach - Offline First ➔ Service Worker

    ➔ Cache API ➔ IndexedDB
  27. 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.
  28. Progressive Web Apps Basic Implementation navigator.serviceWorker.register('sw.js') .then(subscription => console.log(subscription)) .catch(err

    => console.error('A wild error has appeared!', err)); self.addEventListener('install', event => {}); self.addEventListener('activate', () => {}); self.addEventListener('fetch', event => {});
  29. 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)
  30. 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()) ); });
  31. Progressive Web Apps Delivering from the cache self.addEventListener('fetch', event =>

    { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); });
  32. 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).
  33. 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)
  34. React Native Apps Mobile JavaScript Development

  35. React Native “learn once, write everywhere”

  36. React Native It uses the same design as React, letting

    you compose a rich mobile UI from declarative components.
  37. 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.
  38. React Native What’s good about it anyway?

  39. React Native ➔ Abstraction ➔ Community ➔ Flexibility

  40. 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.
  41. React Native When data changes, React knows to only update

    the changed parts.
  42. React Native Encapsulated and reusable components. Easy to reuse, test

    and separate concerns.
  43. 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
  44. React Native Asynchronous execution ➔ bridge between JS and native

    platform is async ➔ JS runs in the background ➔ it makes apps fluid and responsive
  45. React Native Prerequisites: node/npm $ npm install -g react-native-cli Install

    XCode and/or Android Studio $ react-native run-ios $ react-native run-android
  46. React Native $ react-native init AwesomeProject Checkout App.js for your

    application code Checkout the android and ios folders for platform specific code
  47. React Native export default class App extends Component<Props> { constructor(props)

    { super(props); this.state = { count: 0 }; } incrementCount = () => (event) => { ... }; render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Button Presses: {this.state.count} </Text> <Button onPress={this.incrementCount()} title="Click Me" /> </View> ); } } const styles = StyleSheet.create({ ... });
  48. 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
  49. React Native State State management & updates are tricky You

    can do a lot with props and state Relationships can get complicated…
  50. React Native Platform-Specific Android App Bar iOS navigation Android text

    components / underline iOS SafeAreaView Keyboard-aware layouts
  51. React Native React Native & React significantly accelerate mobile app

    development. But, they come with some pitfalls to be aware of.
  52. Hybrid Apps Mobile JavaScript Development

  53. Hybrid Apps A hybrid app is essentially a combination of

    a native and a web app.
  54. 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
  55. 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)
  56. Hybrid Apps “Hybrid apps are slow!”

  57. Hybrid Apps Performant animation with GPU compositing Advanced mobile device

    features and APIs Web-workers to offload tasks from UI Modern Chromium for Android
  58. 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
  59. Hybrid Apps Frameworks ➔ Ionic ➔ Framework7 ➔ Mobile Angular

    UI ➔ Onsen UI ➔ Sencha ➔ Kendo ➔ Quasar ➔ NativeScript
  60. 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.
  61. Hybrid Apps HOW IT ALL COMES TOGETHER 1. Your App

    2. UI Framework 3. Angular / EmberJs / VueJs / React 4. Cordova 5. Native SDKs
  62. Ionic Mobile JavaScript Development

  63. Ionic COMPLEX LISTS ➔ AngularJS Directive ➔ Buttons exposed by

    swiping ➔ Reorder / Delete <ion-list> <button ion-item *ngFor="let item of items"> {{ item.title }} </button> </ion-list>
  64. Ionic VIRTUAL SCROLLING ➔ Inspired by iOS’s UICollectionView ➔ Scroll

    through thousands of items ➔ Only renders the viewable items ➔ Smooth scrolling! <ion-list [virtualScroll]="items"> <ion-item *virtualItem="let item"> <ion-avatar item-start> <ion-img [src]="item.avatarUrl"></ion-img> </ion-avatar> {{ item.firstName }} {{ item.lastName }} </ion-item> </ion-list>
  65. Ionic OTHER COMPONENTS Side Menus, Actionsheet, Modal, Pull To Refresh,

    Spinners, Slidebox, Infinite Scroll, Swipeable List Options, Popup, Popover, Loading Overlay, Inputs, Buttons etc.
  66. 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.
  67. 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
  68. Ionic 3 vs Ionic 4 import { NgModule } from

    '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } import { Router } from '@angular/router'; constructor(private router: Router) { } navigateToHome(){ this.router.navigate(['/home']); }
  69. 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.
  70. 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.
  71. Conclusion Mobile JavaScript Development

  72. 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.
  73. Conclusion The choice between all options is dependent on a

    number of factors, including business needs, app requirements, developer skill, and timelines.
  74. QA Mobile JavaScript Development

  75. Thanks! ➔ @stefanbc ➔ hello@stefancosma.xyz ➔ stefancosma.xyz Mobile JavaScript Development