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.
@electrobabe
Simple Mobile Development
With Ionic
13.4.2016 WeAreDevs @electrobabe
Background
13.4.2016 WeAreDevs @electrobabe
The Challenge
13.4.2016 WeAreDevs @electrobabe
Mobile Development
13.4.2016 WeAreDevs @electrobabe
Many different
implementations
13.4.2016 WeAreDevs @electrobabe
Ionic FTW!
13.4.2016 WeAreDevs @electrobabe
Cross-Platform
13.4.2016 WeAreDevs @electrobabe
AngularJS + mobile first
13.4.2016 WeAreDevs @electrobabe
...add some Cordova
13.4.2016 WeAreDevs @electrobabe
Merge together
13.4.2016 WeAreDevs @electrobabe
Hands on Ionic
13.4.2016 WeAreDevs @electrobabe
CLI
$ npm install -g ionic
$ ionic start awesomeApp [tabs|blank|sidemenu]
$ ionic platfor...
13.4.2016 WeAreDevs @electrobabe
Tools
$ cordova plugin add
[cordova-plugin-device-motion|cordova-plugin-
vibration|cordov...
13.4.2016 WeAreDevs @electrobabe
Ionic Lab
13.4.2016 WeAreDevs @electrobabe
Results
13.4.2016 WeAreDevs @electrobabe
Best Practices
13.4.2016 WeAreDevs @electrobabe
Lessons Learned
13.4.2016 WeAreDevs @electrobabe
Any Questions?
13.4.2016 WeAreDevs @electrobabe
Links
Slides on Slideshare
http://electrobabe.at
http://likeahipster.com
Simple Mobile Development With Ionic
WeAreDevs 2016
@electrobabe
Simple Mobile Development
With Ionic
Hello!
My name is Ba...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Background
Although I’m a Java develo...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
The Challenge
Over time I developed a...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Mobile Development
Mobile development...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Many different
implementations
...but...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Ionic FTW!
Ionic is the “beautiful”, ...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Cross-Platform
...cross-platform focu...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
AngularJS + mobile first
AngularJS is...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
...add some Cordova
To make things a ...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Merge together
Despite HTML5-function...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Hands on Ionic
Ionic comes with a pow...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
CLI
$ npm install -g ionic
$ ionic st...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Tools
$ cordova plugin add
[cordova-p...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Ionic Lab
This is a screenshot of the...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Results
Here you see the two variants...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Best Practices
My personal best pract...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Lessons Learned
First of all:
-iOS de...
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Any Questions?
Simple Mobile Development With Ionic
WeAreDevs 2016
13.4.2016 WeAreDevs @electrobabe
Links
Slides on Slideshare
http://ele...
Upcoming SlideShare
Loading in …5
×

WeAreDevelopers Conference, 13.4.2016 Vienna #WAD16

509 views

Published on

Slides of my presentation "Simple Mobile development with Ionic"

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

WeAreDevelopers Conference, 13.4.2016 Vienna #WAD16

  1. 1. @electrobabe Simple Mobile Development With Ionic
  2. 2. 13.4.2016 WeAreDevs @electrobabe Background
  3. 3. 13.4.2016 WeAreDevs @electrobabe The Challenge
  4. 4. 13.4.2016 WeAreDevs @electrobabe Mobile Development
  5. 5. 13.4.2016 WeAreDevs @electrobabe Many different implementations
  6. 6. 13.4.2016 WeAreDevs @electrobabe Ionic FTW!
  7. 7. 13.4.2016 WeAreDevs @electrobabe Cross-Platform
  8. 8. 13.4.2016 WeAreDevs @electrobabe AngularJS + mobile first
  9. 9. 13.4.2016 WeAreDevs @electrobabe ...add some Cordova
  10. 10. 13.4.2016 WeAreDevs @electrobabe Merge together
  11. 11. 13.4.2016 WeAreDevs @electrobabe Hands on Ionic
  12. 12. 13.4.2016 WeAreDevs @electrobabe CLI $ npm install -g ionic $ ionic start awesomeApp [tabs|blank|sidemenu] $ ionic platform add [ios|android|wp8..] $ ionic build ios $ ionic emulate ios $ ionic run ios
  13. 13. 13.4.2016 WeAreDevs @electrobabe Tools $ cordova plugin add [cordova-plugin-device-motion|cordova-plugin- vibration|cordova-plugin-nativeaudio|..] $ ionic resources $ ionic run –livereload $ ionic serve –lab
  14. 14. 13.4.2016 WeAreDevs @electrobabe Ionic Lab
  15. 15. 13.4.2016 WeAreDevs @electrobabe Results
  16. 16. 13.4.2016 WeAreDevs @electrobabe Best Practices
  17. 17. 13.4.2016 WeAreDevs @electrobabe Lessons Learned
  18. 18. 13.4.2016 WeAreDevs @electrobabe Any Questions?
  19. 19. 13.4.2016 WeAreDevs @electrobabe Links Slides on Slideshare http://electrobabe.at http://likeahipster.com
  20. 20. Simple Mobile Development With Ionic WeAreDevs 2016 @electrobabe Simple Mobile Development With Ionic Hello! My name is Barbara Ondrisek and today I'm going to give a talk about my experience and best practices with Ionic. I’ve been working as a freelancer for more than 15 years for different companies mostly on Java web projects, but I also like mobile development a lot – especially Android.
  21. 21. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Background Although I’m a Java developer I was working lately for the Erste Bank on the new version of their netbanking system George and my group there was developing a sub-project in AngularJS. I have a strong Java background – I love Java, but I always wanted to keep in touch with the frontend, respectively the frondendS, since apps are also “frontends” of a service. My first “commercial” job was 2001 for Siemens, working on a prototype for a chat client running with J2ME. Since this job in 2001 I fell in love mobile development and I was even more happy after Android came to market 2008 because Android apps are developed in Java.
  22. 22. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe The Challenge Over time I developed a couple of Android apps, some commercial as a freelancer, others just for fun and suddenly one of my own apps gained more attention than I expected: The LIKE A HIPSTER app. LIKE A HIPSTER is a fun project I started with a friend and my cat and it became more popular over the first month, more than we expected. Due to severe group pressure and the success of the Android app I had to think about developing an iOS app too. I love to play around with new technologies so I thought – how hard can that possibly be to write an iOS version? So, what about all the other mobile operating systems?
  23. 23. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Mobile Development Mobile development is always a fight because there are many different operating systems and devices. And as you might know there is not only the war between the companies themselfes but also one between the customers which phone is better, especially between Android and iOS. When you want to implement the mobile version of your service you have to consider to implement a super-responsive, mobile optimized website too or – what most companies choose - a couple of different native apps for the various OSs...
  24. 24. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Many different implementations ...but in the end you might end up with many, many different implementations of the same stuff, which is pretty hard to maintain. So you might develop the same feature in three different teams: the web-team, the Android-team and the iOS-team. Maybe additionally also a Windows-team or a Blackberry-team etc. with a bunch of different code-bases. The cause for this “island-building” is that most developers specialize on a certain language and not many are truly "multilingual", let alone multi-OS. So the solution is...
  25. 25. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Ionic FTW! Ionic is the “beautiful”, free and open source front- end SDK for developing hybrid mobile apps with web technologies for the latest mobile devices. It utilizes the “mobile first” approach and offers a library of mobile-optimized HTML5, CSS and JS components, gestures, and tools for building highly interactive native apps. It uses one code base and is...
  26. 26. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Cross-Platform ...cross-platform focused. By building only one single AngularJS web app with Cordova extensions you now can deliver up to 8 different native mobile apps, namely: android, ios, wp8 and windows (8.1, 10, phone 8.1) / blackberry10, Ubuntu (Cordova), firefoxOS, LG webOS, amazon- fireOS and last but not least the browser app itself! But how does it work? Ionic is built on top of...
  27. 27. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe AngularJS + mobile first AngularJS is the self-called "Superheroic JavaScript MVW Framework" - a state of the art JavaScript tool for rich and robust single page web applications that offers a lot that JS alone does not - namely structure. In jQuery-apps the DOM often represents the model, but with Angular the business logic is decoupled from DOM manipulation, which leads to minimal DOM manipulation. Angular calls its principle "Model-View-Whatever": You have a single page app divided into modules such as the login-component, a main screen, sub-screens, the admin-component. Simply speaking: An Angular app is a collection of modules. Angular also offers basic stuff such as: Data binding, scope separation, dependency injection, validators, filters and also Angular-specific stuff like providers, directives, controllers, modules, factories, services.
  28. 28. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe ...add some Cordova To make things a little bit more interesting we now can add some native stuff; and this is accomplished with Cordova. Apache Cordova is a tool to access native device APIs and functions, that also supports offline scenarios. More commonly known is Adobe PhoneGap as distribution of Cordova. Core Plugin APIs are: Accelerometer, BatteryStatus, Camera, Capture, Compass, Connection, Contacts, Device-Functions, Events, File-handling and File Transfer, Geolocation, Globalization, InAppBrowser, Media, Notification, Splashscreen, StatusBar, Storage, Vibration. ...so all an app-developer needs
  29. 29. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Merge together Despite HTML5-functions and the frameworks AngularJS and Cordova, which merge perfectly together, Ionic also offers a platform for integrating services like push notifications and analytics, out of the box SASS-support and great build tools. It is actively developed and continued and there is a huge community around it. It also has a View App to quickly check implementations, live-reload (even on your device) and logging integrated during development. With Ionic you can really fast prototype! And the motto is: Develop once, deploy everywhere.
  30. 30. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Hands on Ionic Ionic comes with a powerful command line interface including build tool: You can use just one command to create, build, test, and deploy your Ionic apps onto any platform. I’ll show you a simple example:
  31. 31. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe CLI $ npm install -g ionic $ ionic start awesomeApp [tabs|blank|sidemenu] $ ionic platform add [ios|android|wp8..] $ ionic build ios $ ionic emulate ios $ ionic run ios 1. The first command is to install ionic via NPM. From there on you only use the ionic-CLI 2. 2nd command generates a project: You can create an Ionic project using one of ready-made app templates. If generates you an Angular webproject and you can just simply start expanding and altering it! 3. next you just add the platforms you want 4. now you can use Ionic to build your app 5. ..also to emulate the target environment 6. ..or even to run it on your device in debug mode
  32. 32. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Tools $ cordova plugin add [cordova-plugin-device-motion|cordova-plugin- vibration|cordova-plugin-nativeaudio|..] $ ionic resources $ ionic run –livereload $ ionic serve –lab Native implementations only make sense with use of device features. You can access these with adding Cordova plugins! Then there are other useful commands: 1. ionic resources: generates all the various (iOS) icons and splashscreens out of two png-files in all the needed resolutions – which is really pretty handy 2. livereload on your device is really awesome 3. ionic serve opens a web-browser with the two variants Android and iOS, which is super helpful to develop and looks like this:
  33. 33. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Ionic Lab This is a screenshot of the chrome browser I use when developing the LIKE A HIPSTER app. Instantly you see the differences between the iOS version and the Android version, since Ionic offers adapted CSS files per native implementation. And once you deploy a release it might look like...
  34. 34. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Results Here you see the two variants: iOS and web As you see the iOS version has an adapted status bar color. And the web version looks a little bit different. Here you see the responsive website. Obviously in the web-version all the cordova plugins such as vibration, acceleration etc. are not working.
  35. 35. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Best Practices My personal best practices are: - use WebStorm as IDE instead of text editors for Mobile Development. It includes build tools, highlighting, “debugging” etc - livereload in browser is awesome - release soon, release often! - embrace your Beta-testers, they do help a lot
  36. 36. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Lessons Learned First of all: -iOS developent sucks! It sucks really hard! See my rant “12 things I hate about iOS development” on electrobabe.at https://electrobabe.at/2016/03/29/12-things-i- hate-about-ios-development/ IOS development feels like being squeezed into something super unintuitive and complicated - not very surprising: not everything is working perfectly on native apps, ios different from android or web etc - windows development sucks as well
  37. 37. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Any Questions?
  38. 38. Simple Mobile Development With Ionic WeAreDevs 2016 13.4.2016 WeAreDevs @electrobabe Links Slides on Slideshare http://electrobabe.at http://likeahipster.com Slides on Slideshare http://electrobabe.at https://play.google.com/store/apps/details? id=at.chefbabe.hungry https://play.google.com/store/apps/details? id=com.likeahipster.app

×