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

Cross-first Mobile App

Hazem Khaled
November 21, 2014

Cross-first Mobile App

Hazem Khaled

November 21, 2014
Tweet

More Decks by Hazem Khaled

Other Decks in Technology

Transcript

  1. CROSS-FIRST MOBILE APP
    GDG DevFest Cairo

    View Slide

  2. ABOUT ME
    11+ Overall experience
    Building Web & Mobile Apps


    +SocialGood Connector

    View Slide

  3. MOBILE APP PROJECTS!
    • Fast updates
    • Multi platforms
    • Dependencies on another services
    • Potential to scale

    View Slide

  4. WHAT’S CROSS-PLATFORM?
    • Build and HTML5 App?
    • Use one of Cross-platform Mobile SDK?




    Com
    pletely
    not

    View Slide

  5. CROSS-FIRST
    design your system to share code, assets, experience … etc
    across your apps.

    View Slide

  6. YOU CAN USE
    Native SDKs

    View Slide

  7. SHARE
    • System Design
    • Assets
    • Code

    View Slide

  8. SYSTEM DESIGN
    • One system design team
    • Shared logic & flow
    • Shared Library
    • Shared Web services & versioning
    • Follow Standards

    View Slide

  9. ASSETS
    • Images sizes & type
    • Video & Audio files
    • Streaming encoding

    View Slide

  10. CODE
    • Dependencies availability across platforms
    • A lot of times Cross-platform SDK working fine
    • Revision control Submodule or Subtree

    View Slide

  11. CAN WE?
    • Q1: Can we use .dll files into Android or iPhone apps?
    • Q2: Can we share libraries across Mobile & Web App?

    View Slide

  12. CROSS-PLATFORM CHOICES
    • Easy way : HTML5
    • Pick a Framework : ionic, jQuery … etc
    • Pick a Wrapper : PhoneGap usually
    • Better user experience
    • HTML5, but more effort in UX
    • Titanium or Xamarin
    • Better performance
    • Native, but more code
    • Qt, but losing UX
    • Xamarin

    View Slide

  13. UX & UI CONTROLS

    View Slide

  14. FOLLOW NATIVE GUIDELINE

    View Slide

  15. FORCE YOUR EXPERIENCE

    View Slide

  16. MY RECOMMENDATION

    View Slide

  17. Side-menu or Tabs?
    Android iPhone

    View Slide

  18. Tabs on Android
    Scrollable Tabs Tabs on Phone
    Tabs on Tablet

    View Slide

  19. Tabs on iOS
    iPhone Up to 5 tabs
    More tabs
    Tabs on iPad

    View Slide

  20. Action Bar & UINavigation

    View Slide