Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Mobile Development

Intro to Mobile Development

Mobile app development is both a huge opportunity and a constant challenge. In this talk we’ll look at the mobile development landscape – from native apps to multi-platform development and mobile web. We’ll talk about design challenges and personalizing user experiences to match diverse contexts. And we’ll look at emerging paradigms in dual-screen and multi-posture devices (e.g., Surface Duo) and talk about how we can leverage these technology advances to rethink the modern mobile app.

Nitya Narasimhan, PhD

October 14, 2020
Tweet

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

Transcript

  1. Nitya Narasimhan, PhD
    Senior Cloud Advocate | Microsoft
    @nitya
    Introduction to
    Mobile Development
    October 14 & 15, 2020
    #startdevchange

    View full-size slide

  2. Build Dual-Screen
    Xamarin.Forms apps by
    using TwoPane View
    aka.ms/sdc-mobile
    Explore dual-screen development
    for the Surface Duo Device using
    Xamarin.Forms

    View full-size slide

  3. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Introduction To
    Mobile
    Development
    Nitya Narasimhan, PhD
    @nitya | dev.to/nitya
    https://aka.ms/intro-to-mobile-dev
    Image Credit: unsplash/@woctechinchat

    View full-size slide

  4. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Research
    patents
    Development
    products
    Advocacy
    people
    Motorola / Labs
    Seamless Mobility
    Multi-Screen Apps
    Consulting / Startups
    Mobile Web Apps
    Cross-Platform Apps
    SUNY / Microsoft
    Android Courses
    Dual Screen Foldables
    About Me | My Journey In Mobile Development

    View full-size slide

  5. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Setting
    The Stage
    Building Your
    First App
    Continuing
    Your Journey
    Motivation
    Ecosystem
    Approach
    Quick Demo
    Behind The Demo
    App Fundamentals
    Dual Screen Design
    Cloud + AI Services
    Android Dev Guides
    Roadmap | A Beginner's Intro To Mobile / Android
    Image Credit: The Noun Project

    View full-size slide

  6. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Introduction To
    Mobile
    Development
    Setting The Stage:
    Why should you care?

    View full-size slide

  7. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Motivation | 1. Mobile application usage growing!
    Source: App Annie / The State of Mobile in 2020
    The average consumer spends 3.7 hours per day on their device—up
    10 percent year-over-year, and up 35 percent
    since 2017 (Dice Insights)

    View full-size slide

  8. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Motivation | 2. Mobile dev skills are in demand!
    Source: Dice Insights / The Mobile App Developer (Jan 2020)
    Burning Glass, which compiles and analyzes millions of job postings from across the country, estimates that mobile app developer
    jobs will grow 30.7 percent over the next decade. The firm also estimates the median salary for mobile app developers
    at $103,805 (analyst firm Robert Half, meanwhile, pegs the median salary for a mobile app developer at $141,000 per year).
    Source: GitHub/ The State Of The Octoverse (2019)
    Kotlin and Dart lang
    growth powered by
    mobile developers

    View full-size slide

  9. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Motivation | 3. Mobile OS share favors Android
    Source: IDC | Smartphone Market Share (Sep 2020)
    While the second quarter of 2020 (2Q20)
    resulted in slightly better than expected
    numbers, the market was still
    down year over year with visible signs of
    economic concerns in 2020Q2 …..
    IDC expect the market to return
    to grow in 2021 mostly sped up by
    the 5G devices launches picking up from
    the damage of the pandemic.
    Android = 85% market share
    iOS = 15% market share

    View full-size slide

  10. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Ecosystem | Mobile Role solidified by COVID-19
    Source: App Annie / The State of Mobile in 2020
    Consumer spend in apps reached record highs
    amidst COVID-19-influenced social distancing
    measures and lockdown policies. Source: App Annie
    As communities rebound from the first wave of COVID-19 and brace for a second wave, mobile usage
    remains high globally — solidifying mobile’s role in our lives as consumers embed new app-habits and
    prioritize socially distant, yet connective, activities for remote learning, working from home, and
    shopping from the comfort and ease of their mobile devices. Mobile data is more important than ever
    before in navigating these times of massive change. These changes are reshaping the world and
    people need to understand how to adapt to new user behavior and preferences.

    View full-size slide

  11. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Approach | What are my mobile developer options?
    Source: @codetraveler / Choosing the Best Mobile Framework (Oct 2020)
    Language OS / Framework
    Native Apps
    (Android or iOS)
    Java / Kotlin OS = Android
    Swift / ObjC OS = iOS
    Cross-Platform
    (Android + iOS)
    (+ desktop)
    (+ web)
    JavaScript React Native
    Dart Flutter
    .NET, C#, F# Xamarin
    Kotlin Kotlin Mobile Multiplatform
    Progressive Web Apps
    (mobile web)
    JavaScript Various
    .NET, C# Microsoft Blazor
    Considerations for picking
    a mobile framework:
    ü Dev + Maintenance costs
    ü Language familiarity
    ü Feature availability
    ü Dev Tools support
    ü App performance
    ü …

    View full-size slide

  12. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Question | How do you eat an elephant?
    Image Credit: Noun Project
    "Take one bite at a time"
    • Start with a "small step"
    • Take time to learn the core idea
    • Savor your achievement
    • Pick your next "small step"
    • Go again!

    View full-size slide

  13. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Approach | Design, Data and Development
    Slides: Resources For Rapid Prototyping
    Do you have just an app idea?
    Try designing the UI/UX
    Wireframing Tools
    Design Systems
    Do you have data + an idea?
    Try low-code platforms!
    Data Connectors
    Drag-n-Drop Solutions
    Do you have data, an idea +
    UI/UX or performance needs?
    Mobile/Web Toolkits
    Development SDKs
    Images Credit: undraw.co

    View full-size slide

  14. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Introduction To
    Mobile Android
    Development
    Building Your First App
    (Getting Started with Android)

    View full-size slide

  15. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Quick Demo | "Hello Bit World!!"
    Demo Video / Refresher For Post-Event

    View full-size slide

  16. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | Let's walk through a few things!
    1. Install Android Studio | SDK & IDE
    2. Create New Project | App Wizard
    3. Create New Android Virtual Device | AVD
    4. Deploy App to Android Virtual Device | Emulator
    5. Update Boilerplate App | Layout Editor
    6. Fix Warnings | Debug Assist
    7. Run Updated App | Celebrate – then Explore!

    View full-size slide

  17. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 1. Android Studio (IDE + SDK)
    Preferred IDE for
    Android (native app
    development)
    Gradle Build system
    (plugin) to configure &
    extend build process
    AVD Manager (test app
    on emulator vs. real device)
    SDK Manager (update
    SDK tools & platforms dist)
    Tools (editors, wizards,
    debuggers, profilers etc.)

    View full-size slide

  18. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Demo | SDK Manager – Install required SDKs
    Demo Video / Refresher For Post-Event
    What is your target
    device audience?
    What is your app
    feature dependency?

    View full-size slide

  19. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 2. Create New Project (App)
    Wizard scaffolds basic app with boilerplate
    code for specified initial activity (UI/UX)
    Empty Activity
    List/Detail Flow
    Navigation Drawer Activity
    Login Activity
    Tabbed Activity
    Fragment + View Model
    Etc.

    View full-size slide

  20. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Demo | Create New Android App Project
    Demo Video / Refresher For Post-Event
    Explore:
    Look at your mobile
    phone apps.
    Can you recognize some
    of these patterns?
    What kinds of UI/UX do
    you want to build?
    Try creating and running
    the default app for each

    View full-size slide

  21. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 3. Create New AVD (emulator)
    Android Virtual Device (AVD) models the
    characteristics of a real Android device (hardware
    profiles, system images, storage)
    AVD "emulator skin" models the physical
    appearance of that Android device
    AVD "configuration" properties override default
    hardware profile for more customized test settings

    View full-size slide

  22. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Demo | Create New Android Virtual Device (AVD)
    Demo Video / Refresher For Post-Event
    Explore:
    Create AVD for each category of
    Android Device
    • Phone
    • Tablet
    • Wearable
    • TV, Automotive
    you may need to download
    additional system images...
    Explore the emulator features
    and capabilities (send an SMS!)

    View full-size slide

  23. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 4. Review The Boilerplate
    App Manifest –
    think packing slip for
    Android app package
    App Source – code
    for app components
    and processing
    Resources – non
    code assets packaged
    with the app (images,
    fonts, layouts, values)
    Gradle Scripts –
    configure your build
    process (app, module)
    MAIN activity – the main entry point for a
    launched app. It identifies the view (layout
    resource) to be inflated when a "create" lifecycle
    event happens

    View full-size slide

  24. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 5. Review Core App Concepts
    Programming
    Language
    Distribution
    (APK)
    Security
    (VM sandbox)
    App
    Components
    • Activities
    • Services
    • Broadcast Receivers
    • Content Providers
    App
    Messaging
    App
    Manifest
    • Implicit Intents
    • Explicit Intents
    Kotlin or Java
    Compiled code
    + Resources
    Principle of Least
    Privilege
    • Components
    • Permissions
    • Dependencies (HW, SW)
    • Intent Filters …

    View full-size slide

  25. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Behind The Demo | 6. Edit Boilerplate (Layout)
    Drawable Resource
    add a new image asset
    to be used in view
    Design Layout
    drag and drop a new
    image view with asset
    Fix Warnings
    update image layout
    constraints, convert
    hardwired strings to
    reusable resources

    View full-size slide

  26. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Demo | Make changes to the default app
    Demo Video / Refresher For Post-Event
    Recommendations:
    Get familiar with Kotlin ..
    (preferred language for Android)
    Understand Android Activity
    Lifecycle … (callbacks)
    Explore adding interactive UI
    elements ... (event handling)
    Explore adding other components
    and integrating with cloud APIs

    View full-size slide

  27. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Introduction To
    Mobile
    Development
    Continuing Your Journey
    (Skilling Up & Scaling Out)

    View full-size slide

  28. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Skilling Up | Kotlin Language Fundamentals

    View full-size slide

  29. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Skilling Up | Android Development Guides

    View full-size slide

  30. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Scaling Out | Add a Cloud + AI backend to your app
    Bookmark this | Currently showcases Xamarin.Forms examples | expect Android and cross-platform updates soon!

    View full-size slide

  31. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Surface Duo Dev | Hello Dual-Screen Android!
    Thin
    Lightweight
    Portable
    Foldable
    360 rotation
    Multiple postures
    Dual Screen
    Symmetric screens
    "Spanned Apps"
    Productivity
    Android + M365
    "App Groups"

    View full-size slide

  32. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Surface Duo Dev | Dual Screen & Foldable Devices
    Ref: Android Developers
    Building Apps For Foldables
    Ref: Microsoft Developers
    Surface Duo Overview
    Portability +
    Productivity
    erases "form factor"
    Multi-display / seam
    single, dual, spanned
    Multi-posture / hinge
    16 discrete postures
    360-degree angles
    Opportunity:
    innovative apps, paired
    experiences, adaptation
    Challenges:
    evolving features, APIs.
    app UX continuity

    View full-size slide

  33. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Surface Duo Dev | Dual Screen & Foldable Devices

    View full-size slide

  34. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya
    Setting
    The Stage
    Building Your
    First App
    Continuing
    Your Journey
    ü Motivation – Market Size
    ü Ecosystem – App Domains
    ü Approach – Developer Paths
    ü Quick Demo – "Hello Bit World"
    ü Behind The Demo - Tooling
    ü App Fundamentals – Concepts
    ü Dual Screen – Surface Duo Dev
    ü Cloud + AI Services – Scale Out
    ü Android Dev Guides – Skill Up
    Recap | Why, How and What Next

    View full-size slide

  35. https://aka.ms/intro-to-mobile-dev r

    View full-size slide

  36. Nitya Narasimhan, PhD
    Senior Cloud Advocate | Microsoft
    @nitya
    Thank you
    for listening!
    https://aka.ms/intro-mobile-dev
    October 14 & 15, 2020
    #startdevchange

    View full-size slide

  37. Build Dual-Screen
    Xamarin.Forms apps by
    using TwoPane View
    Explore dual-screen development
    for the Surface Duo Device using
    Xamarin.Forms
    aka.ms/sdc-mobile

    View full-size slide

  38. Hang out with us and ask questions live as you learn from
    Microsoft Developers on a variety of Tech concepts!
    Visit twitch.tv/MicrosoftDeveloper

    View full-size slide