Building native apps with Ionic: a first look

https://slides.com/agesteira/ionic-native-apps-first-look

Andrés Gesteira
Twitter: Andres Gesteira (@GeorgeKaplan_G)

Berlin Lover
Prehistory with Wordpres & Drupal
E-mail: gesteira2046@gmail.com
Angular Developer
Mobile Apps
The 3 recipes
Native Apps
Hybrid Apps
Progressive Web Apps
Native Apps
They run on a mobile device.
They are native to either iOS, Android or Windows Phone.
They are built on Swift, Java or Visual C# and Visual Basic.
They keep their own look and feel.
They can access any hardware capabilities of the mobile device.
They get installed through a store like App Store or Google Play.
Hybrid Apps
They ALSO run on a mobile device.
BUT they are built on HTML, CSS and Javascript.
They look like a Native App.
They access the hardware through plugins.
They also get installed through a store.
AND compiled to the corresponding mobile native language.
Progressive Web Apps
They are destined to bring balance to the Force. AND WHY?
They are built on HTML, CSS and JS but never compiled to native.
They rely on a technology called Service Workers.
BECAUSE they run on Android and Windows.
They have a restricted access to hardware capabilities.
Installation is optional.
AND we hope for an Apple commitment in the future.
Ionic
What is Ionic?
It is the most popular SDK to build Hybrid Apps.
It combines 2 frameworks: Angular (>=2) and Apache Cordova.
Ionic UI Components make the deployed app look native.
Ionic Native Wrappers for plugins provide access to hardware.
Ionic Apps are hosted in a WebView.
What is Angular?
It is the most extended Front End framework.
A complete re-write from Angular JS into a Typescript version.
Absolutely agnostic from the platform.
Angular + NativeScript produces native mobile applications.
Angular + Electron produces desktop applications.
Angular + Ionic wrappers + Cordova produces hybrid apps.
Based on Web Components.
What is Apache Cordova?
It is the key technology that allows cross-platform development.
From Web (HTML + CSS + JS) to mobile.
Provides an API for web developers to create their own plugins.
The plugins used by Ionic wrappers are, in fact, Cordova plugins.
It is configured by a config.xml on the root of your project.
What is a WebView?
Hybrid Apps are hosted inside a native application container.
That container uses this mobile sub-platform called WebView.
It is like a browser without the browser always set to fullscreen.
Cordova produces mobile web components for a WebView.
It accesses the hardware in the same way a native app does.
WebViews can even drive desktop apps using tools like Electron.
Why Ionic?
It follows the philosophy of Write once, run anywhere.
Its CLI leverages both the capabilities of Angular and Cordova.
Ionic 3 Grid System.
UI components and Ionicons get the native look.
Ionic 3 improved performance.
Demo
Prerequisites
npm i -g cordova ionic
sudo xcode-select --install
npm install -g ios-deploy --unsafe-perm=true
Up and emulate
ionic start --list
ionic start myApp tabs
ionic serve
ionic cordova build ios
ionic cordova build android
First time on XCode you will have to enable the development options.
First time on Android Studio you will have to install SDKs and configure the AVD Manager.
Inspect in Safari: Development -> Simulator
Inspect in Chrome: chrome://inspect/#devices
The End
Building native apps with Ionic: a first look
By Andres Gesteira
Building native apps with Ionic: a first look
- 870