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?