web developers are now mobile developers

@boyney123

Mobile development is easy

Mobile app development is on the decline

Mobile development is boring

I can't write mobile applications

You have to be a specialist to write mobile apps

2014

@boyney123

WEB DEVELOPERS ARE NOW

MOBILE APP DEVELOPERSand much more…

@boyney123

WHAT WE WILL COVERBrief history and current stats on mobile development

Why hybrid? Why native?

Look at hybrid frameworks & how to getting started

Experience, tools and lessons learnt using hybrid in production

Future of hybrid development

Summary

@boyney123

INTRODUCTION

@boyney123

@boyney123

MEERKAT MOVIES

@boyney123

HISTORY OF MOBILE DEVELOPMENT

@boyney123

2007

iPhone

Source : https://en.wikipedia.org/wiki/Smartphone

2008

HTC Dream

@boyney123Source: http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store/

APPLE APP STORE DOWNLOAD FROM JULY 2008 TO JUNE 2015

@boyney123

10 BILLION…..

@boyney123Source: http://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/

NUMBER OF FREE AND PAID APP DOWNLOADS FROM 2011 TO 2017 (IN BILLIONS)

@boyney123Source: http://www.statista.com/statistics/269025/worldwide-mobile-app-revenue-forecast/

WORLDWIDE MOBILE APP REVENUES FROM 2011 TO 2017

@boyney123

FACEBOOK DRAWS 1 BILLION USERS IN A SINGLE DAY

“1 in 7 people on Earth used Facebook to connect with their friends and family”

Mark Zuckerberg

@boyney123

1 IN 7…

@boyney123

CONNECTING THROUGH TECH

@boyney123

TECH GROWTH

@boyney123

NodeJS

Java

C#

Objective-C

Swift

XML

.netReact

AngularJS

Sql

MongoDB

C++

RubyPHP

Python

HTMLCSS

JavaScript

XCode

Android StudioJava

Swift

Objective-C

XML

Android Studio

XCode

@boyney123

JUST IMAGINE…

@boyney123http://hdwallpapers.cat/wallpaper/fantasy_land_nature_horse_unicorn_animals_hd-wallpaper-1878044.jpg

@boyney123

@boyney123

HTML, CSS AND JS STACK

Leap Motion

Oculus

Pebble

NestCylon.js

@boyney123

MAKES ME FEEL…

@boyney123

STORY AT

COMPARETHEMARKET.COM

@boyney123

NodeJS MongoDB Jade

KnockoutJS SASS ExpressJS

@boyney123

NATIVE MOBILE APP

@boyney123

PARTY!

@boyney123

BRING NATIVE IN HOUSEAdd new features

Maintain the code

Remove dependency of third party

Cheaper

@boyney123

PROBLEM WITH NATIVE FOR TEAM

Didn't want to change career

Time consuming

Support multiple platforms

Ramp up skill set

Huge learning curve for team

@boyney123

WHAT OPTIONS DID WE HAVE?

@boyney123

WHAT OPTIONS DID WE HAVE?

Spike / Try / Hack Hybrid Development

Hire people to do native development

Keep outsourcing the project

Give up

@boyney123

LET THE 7 DAY HACK BEGIN

@boyney123

WHAT WE ACHIEVED IN 7 DAYS Proved we could get setup and building mobile applications within minutes

Rebuilt (hacked) the app for a POC in a week

Found the right hybrid framework for the team

Got approval to use hybrid going forward

@boyney123

0 years

40 yearsvs

@boyney123

WHAT FRAMEWORK?

@boyney123

“Ionic empowers web developers to build compelling mobile apps without having to change career…”

- Ionic Team

@boyney123

IONIC FRAMEWORK

Started in 2014

19,398 stars on Github

Top 50 most popular open source projects in the world

Set of tools to create hybrid apps: Directives, Services, Web server, Cli, Components….

@boyney123

IONIC FRAMEWORK - WHY?Great tech stack for the team

Powerful CLI

Open source and FREE Performance obsessed

Slick UI Components

Easy to use

Awesome Community Easy to debug

@boyney123

IONIC STACK

@boyney123source : http://image.slidesharecdn.com/buildingmobileapplicationswithionic-140921151746-phpapp01/95/building-mobile-applications-with-ionic-21-638.jpg?cb=1411312779

@boyney123

IONIC CLI

@boyney123

IONIC CLI - INSTALL

npm install -g ionic

@boyney123

IONIC CLI ionic start myApp [type]

@boyney123

IONIC CLI ionic serve

@boyney123

IONIC CLI ionic emulate [platform]

@boyney123

ANDROID EMULATOR

@boyney123

IONIC CLIionic resources

@boyney123

IONIC CLIionic build [platform]

@boyney123

SLICK UI COMPONENTS

@boyney123

APPS - SWORKIT

@boyney123

APPS - MALLZEE

@boyney123

APPS - PACIFICA

@boyney123

ANIMATIONS AND PERFORMANCEBuilt with minimal DOM manipulation

Hardware accelerated transitions

Pre-made components for common animations

Is it good enough for our customers?

@boyney123

BUILDING WITH IONIC AT COMPARETHEMARKET.COM

@boyney123

IS HYBRID GOOD ENOUGH FOR OUR CUSTOMERS?

@boyney123

USER TESTING

“How it feels to watch a user test your product for the first time”~ Source: The Hipper Element

@boyney123

USER TESTING - RESULTSNo mention of performance issues

Most users happy with the experience

Refocused our ideas and features

Hybrid was correct for our team

Dont care about the technology used, but the apps experience

@boyney123

BUILDING THE APPS FOR PRODUCTION

@boyney123

WORKFLOW!Code and push to devices

Live Reload

Phone emulators

WebStorm IDE

HockeyApp

Debug Tools

@boyney123

ANDROID SCRIPT

https://gist.github.com/boyney123/ea4326510ed25ca32013

@boyney123

LAUNCHING DEVICES

@boyney123

CI - BUILD PROCESS

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

Release Live

Sign apps

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

git clone

install-plugins.sh

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

Sign apps

Angular Mocks

Testing Controllers, Directives, Services

400+ Unit Tests

CI - BUILD PROCESS

Release Live

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

ionic build [platform]

Build Hooks - Gulp commandsMinify, Uglify and Concatenate CSS and JS

Build custom svg fontsCompress images(1/2 the app size)

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

Meerkat Movies

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

Upload to HockeyApp

Setup project

Build .ipa and .apk

Run Unit Tests

Run cloud e2e tests

CI - BUILD PROCESS

Release Live

Sign apps

@boyney123

TEAM THOUGHTS & LEARNING ON IONIC & HYBRID DEVELOPMENT?

@boyney123RETROSPECTIVE

Good Bad Ugly

@boyney123

Quick prototyping

Ionic components

A lot of plugins and open source

Ionic tools

Ionic Services (Push)

HTML, CSS and JS

Great community

THE GOOD

@boyney123

Building .ipa and .apk files

Dealing with screen sizes is harder

Angular 1 forces patterns

Cross platform issues

Ionic is too new…

Angular mocking is horrid

Angular 2

Still have to understand mobile development

THE BAD

@boyney123

Angular testing

Deployment of apps

Mocking plugins in browsers

Brittle tests

Build process

Angular pain in general

API will be behind

THE UGLY

@boyney123

OVERALL THE TEAM ENJOYED IT AND LEARNT A LOT ON THE WAY

@boyney123

FUTURE OF HYBRID?

@boyney123

FUTURE UPDATESThings will break (iOS9)

Things will get fixed

Hardware will get better

Community grows stronger

@boyney123

IONIC & ANGULAR 2

@boyney123Source : http://blog.ionic.io/ionic-and-the-internet-of-things/

@boyney123

SUMMARY

Have Fun

Right tool for the job (native or hybrid)

Explore your stack and markets

Community

“Fixes issues but introduces new ones”

@boyney123

Mobile app development is on the declineMobile app development is on the rise

Mobile development is easyMobile development is easy

Mobile development is boringMobile development is interesting

I can't write mobile applicationsAnybody can write mobile applications

You have to be a specialist to write mobile appsYou don't have to be a specialist to write mobile apps

2015

@boyney123

QUESTIONS?

THANK YOU