Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 m...
Are hybrid apps the silver bullet?
1. It’s always slower than the native app (but now mobiles are freaky powerful, so
it’s...
Conception
•Web App
•WebView
•Proxy Layer
•OS
10
Some ordinary app:
• Browser
• AJAX calls to server
• Persistent storage
• I/O
• Hardware interaction
• Mobile
• AJAX call...
Equality?
12
Differences
• Feature
• AJAX calls to server
• Persistent storage
• I/O
• Hardware interaction
• Difference
• Different se...
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. Power...
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 (no...
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 i...
Implementation
Ionic CLI
1. Generate a new project
2. Development environment out of the box
3. Build the app
4. Generate components, ser...
Creating a new app
$ ionic start [name]
Scaffolding
1. Creates basic project structure for JS
2. Prepares basic cordova configuration with standard plugins
3. Ins...
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 th...
Mobile Apps CI: Issues
48
1. Handle git flow
2. Deployment should happen for iOS and Android
3. Build should be published ...
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
Mobile Applications with Angular 4 and Ionic 3
Upcoming SlideShare
Loading in …5
×

Mobile Applications with Angular 4 and Ionic 3

1,469 views

Published on

Presentation from my conference in Lublin. Details, photos and video could be found there http://tryshchenko.com/events/ . Feel free to ask any questions.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mobile Applications with Angular 4 and Ionic 3

  1. 1. MOBILE APPS WITH ANGULAR 4 AND IONIC 3 Oleksandr Tryshchenko Senior Front-end Developer, DataArt tryshchenko.com
  2. 2. Agenda 1. Conception 2. Design 3. Implementation 3
  3. 3. Write once, run anywhere (Sun Microsystems)
  4. 4. Write almost once, run somewhere (Reality)
  5. 5. Hybrid Mobile Applications With JS • WebView: Apache Cordova • “Native” ones: React Native, NativeScript. 6
  6. 6. Conception
  7. 7. 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
  8. 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
  9. 9. Conception •Web App •WebView •Proxy Layer •OS 10
  10. 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
  11. 11. Equality? 12
  12. 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
  13. 13. Scaffolding 14
  14. 14. Design
  15. 15. Conception •Mobile UI Kit •Web App •Web View •Proxy Layer •OS 16
  16. 16. Conception •Mobile UI Kit (Ionic) •Web App (Angular) •Web View •Proxy Layer •OS 17
  17. 17. Cordova 18
  18. 18. Cordova 1. WebView 2. Proxy between native API’s and WebView 19
  19. 19. Angular 4 20
  20. 20. Angular 4 – Advantages 1. MVVM-like architecture out of the box 2. Modular by design. Components and flexible DI. 3. Powerful tooling 21
  21. 21. Angular 4 Modularity App Widget Content Form Menu 22
  22. 22. Angular 4 Modularity App Data grid Content Form Menu 23 App Form Media Whatever Menu
  23. 23. Angular 4 Modularity App 1 Data grid Content Form Menu 24 App 2 Form Media Whatever Menu
  24. 24. Ionic Framework 25
  25. 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
  26. 26. Ideal Scenario
  27. 27. Default Components 28
  28. 28. Default Components 29
  29. 29. Default Components 30
  30. 30. Not only CSS 31
  31. 31. HOW WOULD ACCESS FILE SYSTEM?!
  32. 32. HOW WOULD I ACCESS CAMERA?!
  33. 33. HOW WOULD I USE SENSORS?!
  34. 34. Ideal Scenario
  35. 35. 36
  36. 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
  37. 37. Implementation
  38. 38. 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
  39. 39. Creating a new app $ ionic start [name]
  40. 40. 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
  41. 41. Run code with watcher in browser $ ionic serve
  42. 42. Run Cordova $ ionic cordova [whatever]
  43. 43. Do not forget to add platforms! $ ionic cordova platform add android $ ionic cordova platform add ios
  44. 44. Code Generation 1. Create components, modules, services, unit tests. 2. Generates declarations and dependencies 45
  45. 45. Please 46
  46. 46. Building 1. You are still required to have environment for building mobile apps 2. But you can use cloud deployment for that 47
  47. 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
  48. 48. Mobile Apps CI: Solution 49
  49. 49. Stay In Touch! 1.http://tryshchenko.com/ 2.https://www.facebook.com/tryshchenko 50

×