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.

Transcript

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

   View 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 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 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 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 Slide

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

   View 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 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 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 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 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 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 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 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 Slide

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

    View 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 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 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 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 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View 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 Slide

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

    View 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 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 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 Slide