Mobile Applications with Angular 4 and Ionic 3
Download as PPTX, PDF2 likes2,934 views
The document discusses creating hybrid mobile applications using Angular 4 and Ionic 3, highlighting concepts such as conception, design, and implementation. It compares hybrid apps to native ones and describes the advantages of Angular 4's architecture and modularity. Additionally, it outlines the use of Cordova and Ionic plugins for accessing native device features and provides insights into the development environment and deployment strategies.
![Creating a new app
$ ionic start [name]](https://image.slidesharecdn.com/lubionic3v1-171027225528/85/Mobile-Applications-with-Angular-4-and-Ionic-3-40-320.jpg)
![Run Cordova
$ ionic cordova [whatever]](https://image.slidesharecdn.com/lubionic3v1-171027225528/85/Mobile-Applications-with-Angular-4-and-Ionic-3-43-320.jpg)
Mobile Applications with Angular 4 and Ionic 3
- 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
- 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
- 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
- 31. Not only CSS 31
- 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