2. MOBILE APPS WITH
ANGULAR 4 AND IONIC 3
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com

3. Agenda
1. Conception
2. Design
3. Implementation
3

4. Write once, run anywhere
(Sun Microsystems)

5. Write almost once, run
somewhere
(Reality)

6. Hybrid Mobile Applications With JS
• WebView: Apache Cordova
• “Native” ones: React Native, NativeScript.
6

7. Conception

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

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

10. Conception
•Web App
•WebView
•Proxy Layer
•OS
10

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

12. Equality?
12

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

14. Scaffolding
14

15. Design

16. Conception
•Mobile UI Kit
•Web App
•Web View
•Proxy Layer
•OS
16

17. Conception
•Mobile UI Kit (Ionic)
•Web App (Angular)
•Web View
•Proxy Layer
•OS
17

18. Cordova
18

19. Cordova
1. WebView
2. Proxy between native API’s and WebView
19

20. Angular 4
20

21. Angular 4 – Advantages
1. MVVM-like architecture out of the box
2. Modular by design. Components and flexible DI.
3. Powerful tooling
21

22. Angular 4 Modularity
App
Widget Content Form
Menu
22

23. Angular 4 Modularity
App
Data grid Content Form
Menu
23
App
Form Media Whatever
Menu

24. Angular 4 Modularity
App 1
Data grid Content Form
Menu
24
App 2
Form Media Whatever
Menu

25. Ionic Framework
25

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

27. Ideal Scenario

28. Default Components
28

29. Default Components
29

30. Default Components
30

31. Not only CSS
31

32. HOW
WOULD
ACCESS
FILE
SYSTEM?!

33. HOW
WOULD
I ACCESS
CAMERA?!

34. HOW
WOULD
I USE
SENSORS?!

35. Ideal Scenario

36. 36

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

38. Implementation

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

40. Creating a new app
$ ionic start [name]

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

42. Run code with watcher in browser
$ ionic serve

43. Run Cordova
$ ionic cordova [whatever]

44. Do not forget to add platforms!
$ ionic cordova platform add android
$ ionic cordova platform add ios

45. Code Generation
1. Create components, modules, services, unit tests.
2. Generates declarations and dependencies
45

46. Please
46

47. Building
1. You are still required to have environment for building mobile apps
2. But you can use cloud deployment for that
47

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

49. Mobile Apps CI: Solution
49

50. Stay In Touch!
1.http://tryshchenko.com/
2.https://www.facebook.com/tryshchenko
50