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.
@boyney123
Mobile development is easy
Mobile app development is on the decline
Mobile development is boring
I can't write ...
@boyney123
WEB DEVELOPERS
ARE NOW
MOBILE APP DEVELOPERS
and much more…
@boyney123
WHAT WE WILL COVER
Brief history and current stats on mobile development
Why hybrid? Why native?
Look at hybrid...
@boyney123
INTRODUCTION
@boyney123
@boyney123
MEERKAT MOVIES
@boyney123
HISTORY OF MOBILE DEVELOPMENT
@boyney123
2007
iPhone
Source : https://en.wikipedia.org/wiki/Smartphone
2008
HTC Dream
@boyney123
Source: http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store/
APPLE APP STORE...
@boyney123
10 BILLION…..
@boyney123
Source: http://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/
NUMBER OF...
@boyney123
Source: http://www.statista.com/statistics/269025/worldwide-mobile-app-revenue-forecast/
WORLDWIDE MOBILE APP R...
@boyney123
FACEBOOK DRAWS 1 BILLION USERS IN A
SINGLE DAY
“1 in 7 people on Earth used Facebook to connect with their
frie...
@boyney123
1 IN 7…
@boyney123
CONNECTING THROUGH TECH
@boyney123
TECH GROWTH
@boyney123
NodeJS
Java
C#
Objective-C
Swift
XML
.net
React
AngularJS
Sql
MongoDB
C++
Ruby
PHP
Python
HTML
CSS
JavaScript
X...
@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 HOUSE
Add 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 ski...
@boyney123
WHAT OPTIONS DID WE HAVE?
@boyney123
WHAT OPTIONS DID WE HAVE?
Spike / Try / Hack Hybrid Development
Hire people to do native development
Keep outso...
@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 (h...
@boyney123
0 years
40 years
vs
@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
Se...
@boyney123
IONIC FRAMEWORK - WHY?
Great tech stack for the team
Powerful CLI
Open source and FREE Performance obsessed
Sli...
@boyney123
IONIC STACK
@boyney123
source : http://image.slidesharecdn.com/buildingmobileapplicationswithionic-140921151746-phpapp01/95/building-m...
@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 CLI
ionic resources
@boyney123
IONIC CLI
ionic build [platform]
@boyney123
SLICK UI COMPONENTS
@boyney123
APPS - SWORKIT
@boyney123
APPS - MALLZEE
@boyney123
APPS - PACIFICA
@boyney123
ANIMATIONS AND PERFORMANCE
Built with minimal DOM manipulation
Hardware accelerated transitions
Pre-made compon...
@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 - RESULTS
No mention of performance issues
Most users happy with the experience
Refocused our idea...
@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
Rel...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
git clone
install-plug...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
Sign apps
Angular Mock...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
ionic build [platform]...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
CI - BUILD PROCESS
Rel...
@boyney123
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
Meerkat Movies
CI - BU...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
CI - BUILD PROCESS
Rel...
@boyney123
Upload to HockeyApp
Setup project
Build .ipa and .apk
Run Unit Tests
Run cloud e2e tests
CI - BUILD PROCESS
Rel...
@boyney123
TEAM THOUGHTS & LEARNING ON
IONIC & HYBRID DEVELOPMENT?
@boyney123
RETROSPECTIVE
Good Bad Ugly
@boyney123
Quick prototyping
Ionic components
A lot of plugins and
open source
Ionic tools
Ionic Services (Push)
HTML, CSS...
@boyney123
Building .ipa and .apk files
Dealing with screen sizes is harder
Angular 1 forces patterns
Cross platform issues...
@boyney123
Angular testing
Deployment of apps
Mocking plugins in browsers
Brittle tests
Build process
Angular pain in gene...
@boyney123
OVERALL THE TEAM ENJOYED IT AND
LEARNT A LOT ON THE WAY
@boyney123
FUTURE OF HYBRID?
@boyney123
FUTURE UPDATES
Things will break (iOS9)
Things will get fixed
Hardware will get better
Community grows stronger
@boyney123
IONIC & ANGULAR 2
@boyney123
Source : 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 issu...
@boyney123
Mobile app development is on the decline
Mobile app development is on the rise
Mobile development is easy
Mobil...
@boyney123
QUESTIONS?
THANK YOU
Upcoming SlideShare
Loading in …5
×

Web Developers are now Mobile Developers

1,912 views

Published on

Talk I presented at DDDCambridge 2015. Talking about techniques and methods web developers can use to become mobile developers.

Also cover what lessons were learnt and techniques used at comparethemarket.com when working with the Ionic framework to build hybrid mobile applications.

Published in: Mobile

Web Developers are now Mobile Developers

  1. 1. @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
  2. 2. @boyney123 WEB DEVELOPERS ARE NOW MOBILE APP DEVELOPERS and much more…
  3. 3. @boyney123 WHAT WE WILL COVER Brief 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
  4. 4. @boyney123 INTRODUCTION
  5. 5. @boyney123
  6. 6. @boyney123 MEERKAT MOVIES
  7. 7. @boyney123 HISTORY OF MOBILE DEVELOPMENT
  8. 8. @boyney123 2007 iPhone Source : https://en.wikipedia.org/wiki/Smartphone 2008 HTC Dream
  9. 9. @boyney123 Source: http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store/ APPLE APP STORE DOWNLOAD FROM JULY 2008 TO JUNE 2015
  10. 10. @boyney123 10 BILLION…..
  11. 11. @boyney123 Source: 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)
  12. 12. @boyney123 Source: http://www.statista.com/statistics/269025/worldwide-mobile-app-revenue-forecast/ WORLDWIDE MOBILE APP REVENUES FROM 2011 TO 2017
  13. 13. @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
  14. 14. @boyney123 1 IN 7…
  15. 15. @boyney123 CONNECTING THROUGH TECH
  16. 16. @boyney123 TECH GROWTH
  17. 17. @boyney123 NodeJS Java C# Objective-C Swift XML .net React AngularJS Sql MongoDB C++ Ruby PHP Python HTML CSS JavaScript XCode Android StudioJava Swift Objective-C XML Android Studio XCode
  18. 18. @boyney123 JUST IMAGINE…
  19. 19. @boyney123http://hdwallpapers.cat/wallpaper/fantasy_land_nature_horse_unicorn_animals_hd-wallpaper-1878044.jpg
  20. 20. @boyney123
  21. 21. @boyney123 HTML, CSS AND JS STACK Leap Motion Oculus Pebble NestCylon.js
  22. 22. @boyney123 MAKES ME FEEL…
  23. 23. @boyney123 STORY AT COMPARETHEMARKET.COM
  24. 24. @boyney123 NodeJS MongoDB Jade KnockoutJS SASS ExpressJS
  25. 25. @boyney123 NATIVE MOBILE APP
  26. 26. @boyney123 PARTY!
  27. 27. @boyney123 BRING NATIVE IN HOUSE Add new features Maintain the code Remove dependency of third party Cheaper
  28. 28. @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
  29. 29. @boyney123 WHAT OPTIONS DID WE HAVE?
  30. 30. @boyney123 WHAT OPTIONS DID WE HAVE? Spike / Try / Hack Hybrid Development Hire people to do native development Keep outsourcing the project Give up
  31. 31. @boyney123 LET THE 7 DAY HACK BEGIN
  32. 32. @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
  33. 33. @boyney123 0 years 40 years vs
  34. 34. @boyney123 WHAT FRAMEWORK?
  35. 35. @boyney123 “Ionic empowers web developers to build compelling mobile apps without having to change career…” - Ionic Team
  36. 36. @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….
  37. 37. @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
  38. 38. @boyney123 IONIC STACK
  39. 39. @boyney123 source : http://image.slidesharecdn.com/buildingmobileapplicationswithionic-140921151746-phpapp01/95/building-mobile-applications-with-ionic-21-638.jpg?cb=1411312779
  40. 40. @boyney123 IONIC CLI
  41. 41. @boyney123 IONIC CLI - INSTALL npm install -g ionic
  42. 42. @boyney123 IONIC CLI ionic start myApp [type]
  43. 43. @boyney123 IONIC CLI ionic serve
  44. 44. @boyney123 IONIC CLI ionic emulate [platform]
  45. 45. @boyney123 ANDROID EMULATOR
  46. 46. @boyney123 IONIC CLI ionic resources
  47. 47. @boyney123 IONIC CLI ionic build [platform]
  48. 48. @boyney123 SLICK UI COMPONENTS
  49. 49. @boyney123 APPS - SWORKIT
  50. 50. @boyney123 APPS - MALLZEE
  51. 51. @boyney123 APPS - PACIFICA
  52. 52. @boyney123 ANIMATIONS AND PERFORMANCE Built with minimal DOM manipulation Hardware accelerated transitions Pre-made components for common animations Is it good enough for our customers?
  53. 53. @boyney123 BUILDING WITH IONIC AT COMPARETHEMARKET.COM
  54. 54. @boyney123 IS HYBRID GOOD ENOUGH FOR OUR CUSTOMERS?
  55. 55. @boyney123 USER TESTING “How it feels to watch a user test your product for the first time” ~ Source: The Hipper Element
  56. 56. @boyney123 USER TESTING - RESULTS No 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
  57. 57. @boyney123 BUILDING THE APPS FOR PRODUCTION
  58. 58. @boyney123 WORKFLOW! Code and push to devices Live Reload Phone emulators WebStorm IDE HockeyApp Debug Tools
  59. 59. @boyney123 ANDROID SCRIPT https://gist.github.com/boyney123/ea4326510ed25ca32013
  60. 60. @boyney123 LAUNCHING DEVICES
  61. 61. @boyney123 CI - BUILD PROCESS Upload to HockeyApp Setup project Build .ipa and .apk Run Unit Tests Run cloud e2e tests Release Live Sign apps
  62. 62. @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
  63. 63. @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
  64. 64. @boyney123 Upload to HockeyApp Setup project Build .ipa and .apk Run Unit Tests Run cloud e2e tests ionic build [platform] Build Hooks - Gulp commands Minify, Uglify and Concatenate CSS and JS Build custom svg fonts Compress images (1/2 the app size) CI - BUILD PROCESS Release Live Sign apps
  65. 65. @boyney123 Upload to HockeyApp Setup project Build .ipa and .apk Run Unit Tests Run cloud e2e tests CI - BUILD PROCESS Release Live Sign apps
  66. 66. @boyney123
  67. 67. @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
  68. 68. @boyney123 Upload to HockeyApp Setup project Build .ipa and .apk Run Unit Tests Run cloud e2e tests CI - BUILD PROCESS Release Live Sign apps
  69. 69. @boyney123 Upload to HockeyApp Setup project Build .ipa and .apk Run Unit Tests Run cloud e2e tests CI - BUILD PROCESS Release Live Sign apps
  70. 70. @boyney123 TEAM THOUGHTS & LEARNING ON IONIC & HYBRID DEVELOPMENT?
  71. 71. @boyney123 RETROSPECTIVE Good Bad Ugly
  72. 72. @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
  73. 73. @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
  74. 74. @boyney123 Angular testing Deployment of apps Mocking plugins in browsers Brittle tests Build process Angular pain in general API will be behind THE UGLY
  75. 75. @boyney123 OVERALL THE TEAM ENJOYED IT AND LEARNT A LOT ON THE WAY
  76. 76. @boyney123 FUTURE OF HYBRID?
  77. 77. @boyney123 FUTURE UPDATES Things will break (iOS9) Things will get fixed Hardware will get better Community grows stronger
  78. 78. @boyney123 IONIC & ANGULAR 2
  79. 79. @boyney123 Source : http://blog.ionic.io/ionic-and-the-internet-of-things/
  80. 80. @boyney123 SUMMARY Have Fun Right tool for the job (native or hybrid) Explore your stack and markets Community “Fixes issues but introduces new ones”
  81. 81. @boyney123 Mobile app development is on the decline Mobile app development is on the rise Mobile development is easy Mobile development is easy Mobile development is boring Mobile development is interesting I can't write mobile applications Anybody can write mobile applications You have to be a specialist to write mobile apps You don't have to be a specialist to write mobile apps 2015
  82. 82. @boyney123 QUESTIONS? THANK YOU

×