Web Developers are now Mobile Developers

of 82/82
@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
  • date post

    16-Apr-2017
  • Category

    Mobile

  • view

    1.681
  • download

    3

Embed Size (px)

Transcript of 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

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

  • @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

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

  • @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)

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

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

    WORLDWIDE MOBILE APP REVENUES FROM 2011 TO 2017

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

  • @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

    http://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

    http://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

    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

    http://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

    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/

    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