Developing a native mobile apps using Ionic&Cordova

Damir BeylkhanovParagon Ind. | Saint Petersburg

Roadmap• What is Hybrid App?• Cordova framework (hybrid app)• Cordova App Architecture• Cordova Tools• Ionic (better hybrid apps) • Full Runtime Architecture• Ionic App Samples• Cordova vs Xamarin• Native vs Hybrid• Env. to deploy Cordova apps• Demo

What is Hybrid App?

• An open-source (MIT License) mobile development framework for building natively mobile apps (https://cordova.apache.org/)• Standards-compliant API bindings to access each device's capabilities • Use standard web technologies - HTML5, CSS3, and JavaScript (Typescript) for cross-platform development• Native wrapper around a web browser view (100% width, 100% height):

iOS = UIWebView (WKWebView) WebKit Android = android.webkit.WebViewWindows Mobile = Edge WebView

• No URL bar• No decorations• No zooming• No text selection

How is app works?Client side:• SPA model• Page is never unloaded from memory• Data will be displayed by updating the HTML DOM• Data is retrieved from the application server using ajaxServer side:• Server scripting language such as .NET, Java, PHP, etc..• Communication based on:• RESTful services (XML, JSON, etc…)• SOAP

• Business logic performs on server side in generally• Data repository may be standard DB or external API

Cordova App architecture

Cordova ToolsA diverse ecosystem of command line tools, JavaScript frameworks, and cloud services exist that augment Cordova:• Ionic• Visual Studio• Tools for Apache Cordova (TACO)• Adobe PhoneGap• PlugReg• Telerik• App Builder• Onsen UI• etc.

• Ionic is most popular cross-platform mobile technology which created in 2013. World have built over 1.2 million mobile apps with Ionic.

• Used everywhere from Fortune 500 co’s to YC/TechStars companies• Ionic is mobile app development framework for interactive mobile apps using HTML5

and Angular for a lot of the core functionality of the framework• Support for a broad range of common native mobile components, slick animations, and beautiful

design• It needs a native wrapper like Cordova• Provides access to native device features via Cordova• Have apps that have top rating in the App Store (e.g., Joule)• Supports Gulp, Sass, Less• Ionic market with Ionic starter apps, pre-built and ready to go (market)

• Integration with TypeScript 2 (types, classes, enums, etc…) + Angular 2• Stack style navigation (push/pop)• ES6 (Modular, Scoping, Promises, Classes)• Ionic Native components (Keyboard, Camera, Action sheets, Calendar, Date picker)• Strong typing by way of TypeScript• Easier to customize

Full Runtime Architecture

Native Plugins and Features

Apache Cordova

Camera Bluetooth Video Health KitTouch ID Streaming

Security &Encryption

Push Notifications

AudioCode Push/ update

Embedded Web Browser (Edge, Chrome, Webkit)

Angular

Ionic

XamarinPros:• C# can be used to code all platforms.• Performance is pretty good and comparable to native. • Customizable to allow users to create native look and feel for each platform + support for hardware features like camera, accelerometer, gpsCons:• Xamarin.Forms is not a complete replacement for native API programming, i.e. Xamarin.Forms != Mobile Native App• Xamarin.iOS & Xamarin.Android doesn’t support XAML• If you want to use native API features (UI controls or widgets), then you need to use Xamarin.iOS(Android) • Xamarin.iOS requires a high performance from hardware, in particular, for storyboards rendering • You still are not using a «write once» solution, you still need to understand architecture and frameworks of an iOS or Android app.

CordovaPros:• Faster development with «write once» solution• Developing a custom Native Component – Yes!• Huge qty of plugins on markets – Ionic Components, Ionic Native, PlugReg (~2k plugins in total)• Widest community support• Multi threadingCons:• Difficulties of making apps appear native• View render is a bit slower (but with using an external API plugins, problem can be resolved)• Performance to be a bit slower

Env. to deploy Cordova appsCommon:• NPM [v.^3.10]

• Node.js [v.^6]

• Cordova (npm install –g cordova) [v.6.4.0 - latest stable]

• Ionic (npm install –g ionic) [v.2.0 RC 2 - latest stable]

• Visual Studio 2013+• Tools for Apache Cordova (extension for VS)For deploy to Android:• Java Development Kit (JDK) [v.8+]

• Android SDK Manager• Hyper-V ManagerFor deploy to iOS:• Mac • OS X [v.10+]

• Xcode [v.7+]

• iOS SDK [v.9+]

Another way it’s use Cloud Services (e.g., Ionic Cloud) with pre-built Docker containers for deploy on iOS or Android.

DEMO

• Project structure• CLI commands• Emulating app• Publishing app• Debugging app

Thanks for your attention!

Questions?