SlideShare a Scribd company logo
1 of 51
MOBILE APPS WITH
ANGULAR 4 AND IONIC 3
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com
Agenda
1. Conception
2. Design
3. Implementation
3
Write once, run anywhere
(Sun Microsystems)
Write almost once, run
somewhere
(Reality)
Hybrid Mobile Applications With JS
• WebView: Apache Cordova
• “Native” ones: React Native, NativeScript.
6
Conception
Again JavaScript?!
1. You can write once and use it for all popular mobile platforms.
2. You can use it for desktop with minimal changes.
3. And oppositely, you can easily adapt your web application to mobile.
4. It’s a very fast way of prototyping
8
Are hybrid apps the silver bullet?
1. It’s always slower than the native app (but now mobiles are freaky powerful, so
it’s hard to notice)
2. Not so flexible
9
Conception
•Web App
•WebView
•Proxy Layer
•OS
10
Some ordinary app:
• Browser
• AJAX calls to server
• Persistent storage
• I/O
• Hardware interaction
• Mobile
• AJAX calls to server
• Persistent storage
• I/O
• Hardware interaction
11
Equality?
12
Differences
• Feature
• AJAX calls to server
• Persistent storage
• I/O
• Hardware interaction
• Difference
• Different security policies
• Different types of storage and it’s size
• Different API’s but the same interfaces
• Browser has access to less devices
13
Scaffolding
14
Design
Conception
•Mobile UI Kit
•Web App
•Web View
•Proxy Layer
•OS
16
Conception
•Mobile UI Kit (Ionic)
•Web App (Angular)
•Web View
•Proxy Layer
•OS
17
Cordova
18
Cordova
1. WebView
2. Proxy between native API’s and WebView
19
Angular 4
20
Angular 4 – Advantages
1. MVVM-like architecture out of the box
2. Modular by design. Components and flexible DI.
3. Powerful tooling
21
Angular 4 Modularity
App
Widget Content Form
Menu
22
Angular 4 Modularity
App
Data grid Content Form
Menu
23
App
Form Media Whatever
Menu
Angular 4 Modularity
App 1
Data grid Content Form
Menu
24
App 2
Form Media Whatever
Menu
Ionic Framework
25
What is Ionic?
1. UI Framework to imitate mobile UI.
2. UI Framework on top of Angular
3. Components set.
4. Ecosystem (not free)
26
Ideal Scenario
Default Components
28
Default Components
29
Default Components
30
Not only CSS
31
HOW
WOULD
ACCESS
FILE
SYSTEM?!
HOW
WOULD
I ACCESS
CAMERA?!
HOW
WOULD
I USE
SENSORS?!
Ideal Scenario
36
Cordova Plugins + Ionic Plugins
1. Cordova Plugins are bridges between native API and WebView
2. Quality of those plugin is a controversial point
3. Ionic Plugins are de-facto angular wrappers for Cordova plugins
4. Cordova plugins are native. You can’t fix them with JS
37
Implementation
Ionic CLI
1. Generate a new project
2. Development environment out of the box
3. Build the app
4. Generate components, services, pipes and some other stuff
5. Ionic Pro Services
39
Creating a new app
$ ionic start [name]
Scaffolding
1. Creates basic project structure for JS
2. Prepares basic cordova configuration with standard plugins
3. Installs dependencies (npm install)
4. Creates several basic components
41
Run code with watcher in browser
$ ionic serve
Run Cordova
$ ionic cordova [whatever]
Do not forget to add platforms!
$ ionic cordova platform add android
$ ionic cordova platform add ios
Code Generation
1. Create components, modules, services, unit tests.
2. Generates declarations and dependencies
45
Please
46
Building
1. You are still required to have environment for building mobile apps
2. But you can use cloud deployment for that
47
Mobile Apps CI: Issues
48
1. Handle git flow
2. Deployment should happen for iOS and Android
3. Build should be published on the internal repository / TestFlight
Mobile Apps CI: Solution
49
Stay In Touch!
1.http://tryshchenko.com/
2.https://www.facebook.com/tryshchenko
50
Mobile Applications with Angular 4 and Ionic 3

More Related Content

What's hot

What's hot (20)

Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
 
Workshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UXWorkshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UX
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
Use Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile applicationUse Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile application
 
Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
 
Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overview
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Build Consumer Apps Using Mobile SDK and Ionic Framework
Build Consumer Apps Using Mobile SDK and Ionic FrameworkBuild Consumer Apps Using Mobile SDK and Ionic Framework
Build Consumer Apps Using Mobile SDK and Ionic Framework
 

Similar to Mobile Applications with Angular 4 and Ionic 3

Similar to Mobile Applications with Angular 4 and Ionic 3 (20)

Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
 
Ionic
IonicIonic
Ionic
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
 
Introduction To Ionic3
Introduction To Ionic3Introduction To Ionic3
Introduction To Ionic3
 
Ionic2 First Lesson of Four
Ionic2 First Lesson of FourIonic2 First Lesson of Four
Ionic2 First Lesson of Four
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Building iOS app using meteor
Building iOS app using meteorBuilding iOS app using meteor
Building iOS app using meteor
 
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemTop Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
 
An overview of the architecture of electron.js
An overview of the architecture of electron.jsAn overview of the architecture of electron.js
An overview of the architecture of electron.js
 
.NET? MonoDroid Does
.NET? MonoDroid Does.NET? MonoDroid Does
.NET? MonoDroid Does
 
Developing ionic apps for android and ios
Developing ionic apps for android and iosDeveloping ionic apps for android and ios
Developing ionic apps for android and ios
 
Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
Development of a mobile app for Android
Development of a mobile app for AndroidDevelopment of a mobile app for Android
Development of a mobile app for Android
 
Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!
 
Rapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkRapid mobile app development using Ionic framework
Rapid mobile app development using Ionic framework
 

More from Oleksandr Tryshchenko

More from Oleksandr Tryshchenko (11)

PWA to React Native migration
PWA to React Native migrationPWA to React Native migration
PWA to React Native migration
 
Web Scraping
Web ScrapingWeb Scraping
Web Scraping
 
2018 grai
2018 grai2018 grai
2018 grai
 
20 000 Leagues Under The Angular 4
20 000 Leagues Under The Angular 420 000 Leagues Under The Angular 4
20 000 Leagues Under The Angular 4
 
Front end architecture patterns
Front end architecture patternsFront end architecture patterns
Front end architecture patterns
 
How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)
How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)
How To Tweak Angular 2 Performance (JavaScript Frameworks Day 2017 Kiev)
 
Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)
 
ES6 Generators On Koa.js Example
ES6 Generators On Koa.js ExampleES6 Generators On Koa.js Example
ES6 Generators On Koa.js Example
 
Angular 2 On Production
Angular 2 On ProductionAngular 2 On Production
Angular 2 On Production
 
How To Tweak Angular 2 Performance
How To Tweak Angular 2 PerformanceHow To Tweak Angular 2 Performance
How To Tweak Angular 2 Performance
 
ES6 basics
ES6 basicsES6 basics
ES6 basics
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 

Mobile Applications with Angular 4 and Ionic 3

Editor's Notes

  1. Add scheme
  2. Add scheme
  3. Add scheme