SlideShare a Scribd company logo
HYBRID APPS WITH
FRAMEWORK
Fronteers 19/11/15 @ Kunstmaan
@bramus
Yo!
@bramus https://www.bram.usBram(us)Van Damme
All work, no and play
#ikdoeict SmallTown Heroes
I’m a former lecturer Web & Mobile, now into breaking builds at Small Town Heroes
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
This talk is not about learning Ionic
←This book is
https://www.packtpub.com/application-development/learning-ionic


(disclaimer: I was lead tech reviewer for this book)
EV-Point
(3RDS)
De allesweter
(Small Town Heroes)
This talk is about these two Ionic apps I built
HYBRID APPS WITH
IONIC FRAMEWORK
Fronteers 19/11/15 @ Kunstmaan
@bramus
Fronteers 19/11/15 @ Kunstmaan
@bramus
HYBRID APPS WITH
IONIC FRAMEWORK
HOW I FELL IN LOVE
WITH IONIC
Fronteers 19/11/15 @ Kunstmaan
@bramus
HOW IONIC MIGHT

NOT WORK FORYOU
Fronteers 19/11/15 @ Kunstmaan
@bramus
https://adactio.com/journal/4437
If you’re looking for the more honest, truthful
answer to pretty much any question on web
design and usability, here it is:
It depends.
EV-Point
(3RDS)
Video not playing? https://youtu.be/4AhOKtXowgs
App development time?
(from no code to working prototype in Simulator)
App development time?
(from no code to working prototype in Simulator)
App development time?
(from no code to working prototype in Simulator)
Here’s a hint:
App development time
(in hours)
Let’s do the math
Apache Cordova
https://cordova.apache.org/
→ If you know HTML/CSS/JavaScript, you know how to build a mobile app
Apache Cordova
AngularJS
https://angularjs.org/
→ If you know AngularJS, you know how Ionic works
AngularJS
Ionic = Framework (with documentation)
http://ionicframework.com/docs/
→ If you can read, you know Ionic
Ionic = Framework (with documentation)
→ If you can read, you know Ionic
Pff, Frameworks!?
https://aerotwist.com/blog/the-cost-of-frameworks/
→ If you can read, you know Ionic
Pff, Frameworks!?
“Frameworks make it quicker
to build an MVP”
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
HOW I FELL IN LOVE
WITH IONIC
Fronteers 19/11/15 @ Kunstmaan
@bramus
Ionic CLI > Cordova CLI
→ Ionic CLI augments Cordova CLI
• cordova platform add|rm ios|android
• cordova plugin add X
• cordova emulate ios|android
• cordova build ios|android
• cordova run ios|android
• cordova prepare ios|android
• ionic serve
• ionic resources
• ionic emulate ios|android -l -c
• ionic …
Cordova Functions Ionic Functions
Ionic CLI: ionic serve
$	
  ionic	
  serve
← with livereload
→ If you know HTML/CSS/JavaScript, you know how to build a mobile app
Ionic CLI: ionic serve
Ionic = CSS Framework
http://ionicframework.com/docs/components/
Ionic = CSS Framework
Cross-Platform CSS, yay!
Ionic = JavaScript Components
Ionic Component = Angular directive + behavior (+ Angular delegate)
Bootstrapitis?
http://www.novolume.co.uk/blog/all-websites-look-the-same/
De allesweter
(Small Town Heroes)
← Designed by
Video not playing? https://youtu.be/gtSxQ9E9jVA
That CSS must be broken on older devices!?
https://crosswalk-project.org/
How can I access native functions?
https://cordova.apache.org/plugins/
Example: online/offline
var onOnline = function() {
$rootScope.connectionState = 'online';
}
var onOffline = function() {
$rootScope.connectionState = 'offline';
}
// To trigger these manually:
// - window.dispatchEvent(new CustomEvent("online"));
// - window.dispatchEvent(new CustomEvent("offline"));
if (window.cordova) {
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
} else {
window.addEventListener && window.addEventListener('online', onOnline);
window.addEventListener && window.addEventListener('offline', onOffline);
}
https://github.com/apache/cordova-plugin-network-information
Video not playing? https://youtu.be/duVbYspZtFY
Plugins used in “De allesweter”
• cordova-­‐plugin-­‐device – Get device info (UUID et al)
• cordova-­‐plugin-­‐statusbar – Style the statusbar
• cordova-­‐plugin-­‐splashscreen – Control the splash screen yourself
• cordova-­‐plugin-­‐google-­‐analytics – Google Analytics Integration
• com.ionic.keyboard – Keyboard events
• us.cordova.gigya – Gigya Integration (VRT/Facebook Login)
• cordova-­‐plugin-­‐customurlscheme – Deeplink into app
• cordova-­‐plugin-­‐x-­‐socialsharing – Share integration
• phonegap-­‐plugin-­‐push – Push Notifications
• cordova-­‐plugin-­‐inappbrowser – In app browser
• cordova-­‐plugin-­‐app-­‐version – Get app info (build number et al)
• cordova-­‐plugin-­‐nativeaudio – Play sounds
• cordova-­‐plugin-­‐network-­‐information – Get network info
Easy there cowboy?!
cordova-­‐plugin-­‐nativeaudio
vs
How can I access native functions? (redux)
http://ngcordova.com/
→ If you can read, you know Ionic
Cordova has Hooks
#!/bin/bash
# @ref https://www.bram.us/2015/09/29/ionic-emulate-vs-xcode-7/
XCODEVERSION=`xcodebuild -version | grep Xcode | sed 's/Xcode //g'`
XCODEMAINVERSION=`echo $XCODEVERSION | cut -d "." -f 1`
PROJECTNAME=`xmllint --format --xpath "//*[local-name()='widget']/*[local-name()='name'][1]/text()" config.xml`
if [[ "$CORDOVA_PLATFORMS" == "ios" ]]
then
if [[ "$XCODEMAINVERSION" > 6 ]]
then
echo "iPhone Simulator (XCode $XCODEVERSION): Adjusting $PROJECTNAME-Info.plist to allow Arbitrary Loads!"
PLISTBUDDY="/usr/libexec/PlistBuddy"
TARGET="platforms/ios/$PROJECTNAME/$PROJECTNAME-Info.plist"
HASSETTING=`$PLISTBUDDY -c "print :NSAppTransportSecurity:NSAllowsArbitraryLoads" "$TARGET" 2>&1`
if [[ "$HASSETTING" == "true" ]]
then
echo " - NSAllowsArbitraryLoads already enabled. Not adjusting $PROJECTNAME-Info.plist"
else
echo " - NSAllowsArbitraryLoads not enabled. Adjusting $PROJECTNAME-Info.plist"
$PLISTBUDDY -c "Add :NSAppTransportSecurity dict" "$TARGET"
$PLISTBUDDY -c "Add :NSAppTransportSecurity:NSAllowsArbitraryLoads bool YES" "$TARGET"
fi
fi
fi
(Apologies if this gave you a headache)
Using a preprocessor is still possible
→ Have your sources in src/, run grunt (which compiles it all to www/) and ionic	
  serve in parallel
// copy
module.exports = function(grunt, options) {
return {
// Copy all non-compilable files from src/ to www/
// Exceptions: stylus & sass sources, coffeescript sources, self-written js files, jade sources, and psd files
build: {
cwd: 'src',
src: [
'**', // All files by default
'!css/*.styl', // Exclude .styl source files (processed separately)
'!js/**', // Exclude entire JS folder (processed separately)
'!*.jade','!templates/*.jade', '!templates/**/*.jade', // Exclude .jade temoplates (processed separately)
'!img/*.psd', // Exclude .psd files from the img folder
],
dest: 'www',
expand: true
}
}
}
Parallel aye?!
→ Use tmux
(https://gist.github.com/MohamedAlaa/2961058)
Reading logs from real devices
$ brew install libimobiledevice
$ idevicesyslog | grep allesweter
$ adb logcat | grep 'I/chromium'
Continuous Integration: Circle CI
https://circleci.com/
Continuous Integration: how?
→ It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works
# Inject settings for BUILD_ENV into config files
- BUILD_ENV=$(ENVIRONMENT) grunt string-replace:settings
# Compile src into www, with staging environment
- BUILD_ENV=staging grunt build
## Build Android
- BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make android
- ./scripts-ci/archive_apk.sh staging
- ./scripts-ci/distribute_apk.sh
# Build IOS
- BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make ios
- ./scripts-ci/archive_ipa.sh staging
- ./scripts-ci/distribute_ipa.sh staging
Continuous Integration: how?
→ It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works
# Inject build number and bundle id into config.xml
APP_BUILD=$(BUILD) APP_ID=$(BUNDLE_ID) node scripts-ci/update_config_xml.js
# Install Ionic Platforms and Plugins
rm -rf platforms
rm -rf plugins
ionic platform add android
# Inject Crashlytics
./scripts-ci/crashlytics-android.sh
# Build it
ANDROID_NAME="$(DISPLAY_NAME)" ionic build android --device --release
About BUILD_ENV
Continuous Integration: ionic.io
Note: ionic.io is the commercial part of Ionic.
$	
  ionic	
  package	
  build	
  ios
Distributing beta builds using Fabric
https://www.fabric.io/
Distributing beta builds using Fabric
Recommend Read: Gone Hybrid
http://gonehybrid.com/
Thank you.
Fronteers 19/11/15 @ Kunstmaan
@bramus
HYBRID APPS WITH
FRAMEWORK

More Related Content

What's hot

Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
Julien Renaux
 
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)
Mark Leusink
 
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
Zvika Epstein
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
Fuat Buğra AYDIN
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
Eddie Lau
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
Lukas Ruebbelke
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Thinh VoXuan
 
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentIonic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
Justin James
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Cihad Horuzoğlu
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and Ionic
Liju Pillai
 
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
Kadhem Soltani
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
Oleksandr Tryshchenko
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Dylan Swartz
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
Malan Amarasinghe
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
Shyjal Raazi
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!
Matheus Cardoso
 
App forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with IonicApp forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with Ionic
robgalvinjr
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
Raymond Camden
 
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
Max Kaplan
 
Ionic CLI Adventures
Ionic CLI AdventuresIonic CLI Adventures
Ionic CLI Adventures
Juarez Filho
 

What's hot (20)

Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with 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)
 
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
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentIonic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Hybrid mobile and Ionic
Hybrid mobile and IonicHybrid mobile and Ionic
Hybrid mobile and Ionic
 
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
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!
 
App forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with IonicApp forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with Ionic
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
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
 
Ionic CLI Adventures
Ionic CLI AdventuresIonic CLI Adventures
Ionic CLI Adventures
 

Viewers also liked

Ionic
IonicIonic
Ionic: Hybrid Mobile Apps... made simple
Ionic: Hybrid Mobile Apps... made simpleIonic: Hybrid Mobile Apps... made simple
Ionic: Hybrid Mobile Apps... made simple
Commit University
 
Cross-Platform Mobile Development with Ionic Framework and Angular
Cross-Platform Mobile Development with Ionic Framework and AngularCross-Platform Mobile Development with Ionic Framework and Angular
Cross-Platform Mobile Development with Ionic Framework and Angular
Movel
 
Welcome to ionic 2
Welcome to ionic 2Welcome to ionic 2
Welcome to ionic 2
codeandyou forums
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
Ivano Malavolta
 
Building cross platform app with Xamarin Forms
Building cross platform app with Xamarin FormsBuilding cross platform app with Xamarin Forms
Building cross platform app with Xamarin Forms
Aurelian Maga
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
Marios Fakiolas
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
Ivano Malavolta
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
ColdFusionConference
 
Rethinking Mobile with Ionic
Rethinking Mobile with IonicRethinking Mobile with Ionic
Rethinking Mobile with Ionic
Mike Hartington
 
Effective Communication Of Data Inspired by Stephen Few
Effective Communication Of Data Inspired by Stephen FewEffective Communication Of Data Inspired by Stephen Few
Effective Communication Of Data Inspired by Stephen Few
Cory Grenier
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Gabriel Huecas
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
Hendrik Lösch
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
Andreas Sahle
 
Art and Science of Dashboard Design
Art and Science of Dashboard DesignArt and Science of Dashboard Design
Art and Science of Dashboard Design
SavvyData
 
Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overview
Sanket Devlekar
 
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Juliano Martins
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 

Viewers also liked (18)

Ionic
IonicIonic
Ionic
 
Ionic: Hybrid Mobile Apps... made simple
Ionic: Hybrid Mobile Apps... made simpleIonic: Hybrid Mobile Apps... made simple
Ionic: Hybrid Mobile Apps... made simple
 
Cross-Platform Mobile Development with Ionic Framework and Angular
Cross-Platform Mobile Development with Ionic Framework and AngularCross-Platform Mobile Development with Ionic Framework and Angular
Cross-Platform Mobile Development with Ionic Framework and Angular
 
Welcome to ionic 2
Welcome to ionic 2Welcome to ionic 2
Welcome to ionic 2
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
Building cross platform app with Xamarin Forms
Building cross platform app with Xamarin FormsBuilding cross platform app with Xamarin Forms
Building cross platform app with Xamarin Forms
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
 
Rethinking Mobile with Ionic
Rethinking Mobile with IonicRethinking Mobile with Ionic
Rethinking Mobile with Ionic
 
Effective Communication Of Data Inspired by Stephen Few
Effective Communication Of Data Inspired by Stephen FewEffective Communication Of Data Inspired by Stephen Few
Effective Communication Of Data Inspired by Stephen Few
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
 
Art and Science of Dashboard Design
Art and Science of Dashboard DesignArt and Science of Dashboard Design
Art and Science of Dashboard Design
 
Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overview
 
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 

Similar to Hybrid Apps with Ionic Framework

HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
Abraham Barrera
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
MartinSotirov
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build Artifacts
Clay Smith
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
Software Infrastructure
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
DevelopmentArc LLC
 
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
Troy Miles
 
Txjs
TxjsTxjs
Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!
Commit University
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
Alex Blom
 
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
Jad Salhani
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
Enough Software
 
Cross-Platform Mobile Development in Visual Studio
Cross-Platform Mobile Development in Visual StudioCross-Platform Mobile Development in Visual Studio
Cross-Platform Mobile Development in Visual Studio
bryan costanich
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Juarez Filho
 
Hybrid HTML5 Apps
Hybrid HTML5 AppsHybrid HTML5 Apps
Hybrid HTML5 Apps
Hugo Rodrigues
 
Introduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual StudioIntroduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual Studio
IndyMobileNetDev
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
Caesar Chi
 
Kendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile OptimizedKendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile Optimized
Mikita Manko
 
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
DevDay Dresden
 

Similar to Hybrid Apps with Ionic Framework (20)

HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build Artifacts
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
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
 
Txjs
TxjsTxjs
Txjs
 
Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
 
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
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
 
Cross-Platform Mobile Development in Visual Studio
Cross-Platform Mobile Development in Visual StudioCross-Platform Mobile Development in Visual Studio
Cross-Platform Mobile Development in Visual Studio
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Hybrid HTML5 Apps
Hybrid HTML5 AppsHybrid HTML5 Apps
Hybrid HTML5 Apps
 
Introduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual StudioIntroduction to Cross Platform Development with Xamarin/ Visual Studio
Introduction to Cross Platform Development with Xamarin/ Visual Studio
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
Kendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile OptimizedKendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile Optimized
 
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
DevDay 2018: Ulrich Deiters - Offline First - kein Netz, kein Fehler, zufried...
 

Recently uploaded

leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
Priyanka Aash
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
Arpan Buwa
 
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
Priyanka Aash
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 

Recently uploaded (20)

leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
 
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 

Hybrid Apps with Ionic Framework

  • 1. HYBRID APPS WITH FRAMEWORK Fronteers 19/11/15 @ Kunstmaan @bramus
  • 3. All work, no and play #ikdoeict SmallTown Heroes I’m a former lecturer Web & Mobile, now into breaking builds at Small Town Heroes
  • 6. This talk is not about learning Ionic ←This book is https://www.packtpub.com/application-development/learning-ionic 
 (disclaimer: I was lead tech reviewer for this book)
  • 7. EV-Point (3RDS) De allesweter (Small Town Heroes) This talk is about these two Ionic apps I built
  • 8. HYBRID APPS WITH IONIC FRAMEWORK Fronteers 19/11/15 @ Kunstmaan @bramus
  • 9. Fronteers 19/11/15 @ Kunstmaan @bramus HYBRID APPS WITH IONIC FRAMEWORK
  • 10. HOW I FELL IN LOVE WITH IONIC Fronteers 19/11/15 @ Kunstmaan @bramus
  • 11. HOW IONIC MIGHT
 NOT WORK FORYOU Fronteers 19/11/15 @ Kunstmaan @bramus
  • 12. https://adactio.com/journal/4437 If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is: It depends.
  • 14. Video not playing? https://youtu.be/4AhOKtXowgs
  • 15. App development time? (from no code to working prototype in Simulator)
  • 16. App development time? (from no code to working prototype in Simulator)
  • 17. App development time? (from no code to working prototype in Simulator)
  • 22. → If you know HTML/CSS/JavaScript, you know how to build a mobile app Apache Cordova
  • 24. → If you know AngularJS, you know how Ionic works AngularJS
  • 25. Ionic = Framework (with documentation) http://ionicframework.com/docs/
  • 26. → If you can read, you know Ionic Ionic = Framework (with documentation)
  • 27. → If you can read, you know Ionic Pff, Frameworks!? https://aerotwist.com/blog/the-cost-of-frameworks/
  • 28. → If you can read, you know Ionic Pff, Frameworks!? “Frameworks make it quicker to build an MVP”
  • 31. HOW I FELL IN LOVE WITH IONIC Fronteers 19/11/15 @ Kunstmaan @bramus
  • 32. Ionic CLI > Cordova CLI → Ionic CLI augments Cordova CLI • cordova platform add|rm ios|android • cordova plugin add X • cordova emulate ios|android • cordova build ios|android • cordova run ios|android • cordova prepare ios|android • ionic serve • ionic resources • ionic emulate ios|android -l -c • ionic … Cordova Functions Ionic Functions
  • 33. Ionic CLI: ionic serve $  ionic  serve ← with livereload
  • 34. → If you know HTML/CSS/JavaScript, you know how to build a mobile app Ionic CLI: ionic serve
  • 35. Ionic = CSS Framework http://ionicframework.com/docs/components/
  • 36. Ionic = CSS Framework Cross-Platform CSS, yay!
  • 37. Ionic = JavaScript Components Ionic Component = Angular directive + behavior (+ Angular delegate)
  • 40. ← Designed by Video not playing? https://youtu.be/gtSxQ9E9jVA
  • 41. That CSS must be broken on older devices!? https://crosswalk-project.org/
  • 42. How can I access native functions? https://cordova.apache.org/plugins/
  • 43. Example: online/offline var onOnline = function() { $rootScope.connectionState = 'online'; } var onOffline = function() { $rootScope.connectionState = 'offline'; } // To trigger these manually: // - window.dispatchEvent(new CustomEvent("online")); // - window.dispatchEvent(new CustomEvent("offline")); if (window.cordova) { document.addEventListener('online', onOnline, false); document.addEventListener('offline', onOffline, false); } else { window.addEventListener && window.addEventListener('online', onOnline); window.addEventListener && window.addEventListener('offline', onOffline); } https://github.com/apache/cordova-plugin-network-information Video not playing? https://youtu.be/duVbYspZtFY
  • 44. Plugins used in “De allesweter” • cordova-­‐plugin-­‐device – Get device info (UUID et al) • cordova-­‐plugin-­‐statusbar – Style the statusbar • cordova-­‐plugin-­‐splashscreen – Control the splash screen yourself • cordova-­‐plugin-­‐google-­‐analytics – Google Analytics Integration • com.ionic.keyboard – Keyboard events • us.cordova.gigya – Gigya Integration (VRT/Facebook Login) • cordova-­‐plugin-­‐customurlscheme – Deeplink into app • cordova-­‐plugin-­‐x-­‐socialsharing – Share integration • phonegap-­‐plugin-­‐push – Push Notifications • cordova-­‐plugin-­‐inappbrowser – In app browser • cordova-­‐plugin-­‐app-­‐version – Get app info (build number et al) • cordova-­‐plugin-­‐nativeaudio – Play sounds • cordova-­‐plugin-­‐network-­‐information – Get network info
  • 46. How can I access native functions? (redux) http://ngcordova.com/
  • 47. → If you can read, you know Ionic
  • 48. Cordova has Hooks #!/bin/bash # @ref https://www.bram.us/2015/09/29/ionic-emulate-vs-xcode-7/ XCODEVERSION=`xcodebuild -version | grep Xcode | sed 's/Xcode //g'` XCODEMAINVERSION=`echo $XCODEVERSION | cut -d "." -f 1` PROJECTNAME=`xmllint --format --xpath "//*[local-name()='widget']/*[local-name()='name'][1]/text()" config.xml` if [[ "$CORDOVA_PLATFORMS" == "ios" ]] then if [[ "$XCODEMAINVERSION" > 6 ]] then echo "iPhone Simulator (XCode $XCODEVERSION): Adjusting $PROJECTNAME-Info.plist to allow Arbitrary Loads!" PLISTBUDDY="/usr/libexec/PlistBuddy" TARGET="platforms/ios/$PROJECTNAME/$PROJECTNAME-Info.plist" HASSETTING=`$PLISTBUDDY -c "print :NSAppTransportSecurity:NSAllowsArbitraryLoads" "$TARGET" 2>&1` if [[ "$HASSETTING" == "true" ]] then echo " - NSAllowsArbitraryLoads already enabled. Not adjusting $PROJECTNAME-Info.plist" else echo " - NSAllowsArbitraryLoads not enabled. Adjusting $PROJECTNAME-Info.plist" $PLISTBUDDY -c "Add :NSAppTransportSecurity dict" "$TARGET" $PLISTBUDDY -c "Add :NSAppTransportSecurity:NSAllowsArbitraryLoads bool YES" "$TARGET" fi fi fi (Apologies if this gave you a headache)
  • 49. Using a preprocessor is still possible → Have your sources in src/, run grunt (which compiles it all to www/) and ionic  serve in parallel // copy module.exports = function(grunt, options) { return { // Copy all non-compilable files from src/ to www/ // Exceptions: stylus & sass sources, coffeescript sources, self-written js files, jade sources, and psd files build: { cwd: 'src', src: [ '**', // All files by default '!css/*.styl', // Exclude .styl source files (processed separately) '!js/**', // Exclude entire JS folder (processed separately) '!*.jade','!templates/*.jade', '!templates/**/*.jade', // Exclude .jade temoplates (processed separately) '!img/*.psd', // Exclude .psd files from the img folder ], dest: 'www', expand: true } } }
  • 50. Parallel aye?! → Use tmux (https://gist.github.com/MohamedAlaa/2961058)
  • 51. Reading logs from real devices $ brew install libimobiledevice $ idevicesyslog | grep allesweter $ adb logcat | grep 'I/chromium'
  • 52. Continuous Integration: Circle CI https://circleci.com/
  • 53. Continuous Integration: how? → It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works # Inject settings for BUILD_ENV into config files - BUILD_ENV=$(ENVIRONMENT) grunt string-replace:settings # Compile src into www, with staging environment - BUILD_ENV=staging grunt build ## Build Android - BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make android - ./scripts-ci/archive_apk.sh staging - ./scripts-ci/distribute_apk.sh # Build IOS - BUILD=$CIRCLE_BUILD_NUM BUNDLE_ID="be.smalltownheroes.vrt.allesweter.$ENVIRONMENT" BUILD_ENV=$(ENVIRONMENT) make ios - ./scripts-ci/archive_ipa.sh staging - ./scripts-ci/distribute_ipa.sh staging
  • 54. Continuous Integration: how? → It’s one big hack (Combination of circle.yml, Makefile, bash scripts, build hooks, etc) but it works # Inject build number and bundle id into config.xml APP_BUILD=$(BUILD) APP_ID=$(BUNDLE_ID) node scripts-ci/update_config_xml.js # Install Ionic Platforms and Plugins rm -rf platforms rm -rf plugins ionic platform add android # Inject Crashlytics ./scripts-ci/crashlytics-android.sh # Build it ANDROID_NAME="$(DISPLAY_NAME)" ionic build android --device --release
  • 56. Continuous Integration: ionic.io Note: ionic.io is the commercial part of Ionic. $  ionic  package  build  ios
  • 57. Distributing beta builds using Fabric https://www.fabric.io/
  • 58. Distributing beta builds using Fabric
  • 59. Recommend Read: Gone Hybrid http://gonehybrid.com/
  • 61. Fronteers 19/11/15 @ Kunstmaan @bramus HYBRID APPS WITH FRAMEWORK