Mobile JavaScript Development

Transcript

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