- Hybrid mobile apps are built using web technologies like HTML, CSS, and JavaScript but wrapped in a native container using frameworks like Cordova or Apache Cordova. This allows them to work as native apps and access device capabilities. - Ionic is a popular framework for developing interactive hybrid mobile apps that uses Angular and supports mobile-specific components. Apps are developed using web technologies and published using Cordova. - The architecture involves a client-side single page app interacting via RESTful services with a server-side backend for business logic and data storage. Cordova tools provide access to native device features.

1. Developing a native mobile apps using
Ionic&Cordova
Damir Beylkhanov
Paragon Ind. | Saint Petersburg

2. 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

3. What is Hybrid App?

4. • 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.WebView
Windows Mobile = Edge WebView
• No URL bar
• No decorations
• No zooming
• No text selection

5. 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 ajax
Server 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

6. Cordova App architecture

7. Cordova Tools
A 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.

8. • 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)

9. • 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

10. Full Runtime Architecture
Camera Bluetooth Video Health KitTouch ID Streaming
Security &
Encryption
Push
Notifications
Audio
Code Push/
update

14. Xamarin
Pros:
• 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, gps
Cons:
• 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.
Cordova
Pros:
• 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 threading
Cons:
• 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

15. Env. to deploy Cordova apps
Common:
• 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 Manager
For 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.

16. DEMO
• Project structure
• CLI commands
• Emulating app
• Publishing app
• Debugging app

17. Thanks for your attention!
Questions? 