SlideShare uma empresa Scribd logo
1 de 27
< my real life experience >
    Native, HTML5 & Hybrid Mobile Development


                                      Eran Zinman
                                          @ zzeran
                                          eran @conduit.com
ABOUT ME

      Manages R&D in Conduit Mobile
Mobile App Development




HTML5             NATIVE               HYBRID
                  Objective C, Java,   Native code +
CSS / HTML / JS
                  C# / XAML, C++          HTML5
Chapter 1




            theBIG
            BANG
Chapter 1

  Product
  requirements:
     •   Cross-platform Native app
     •   Mobile web app
     •   Web Simulator
     •   Small, agile team
  The solution:
     • Cross platform, cross browser
       HTML5 native app & web app
Chapter 1


Initial POC
  Technologies:
   • PhoneGap 0.7.1
   • jQTouch beta / jQuery      LOOKING
                                 GOOD!
  POC included:
                   NOT SO FAST…
  Design app in HTML / CSS
  Native features (PhoneGap)
  RESTful services (ajax)
  iPhone + Android
Chapter 1


First Real
Problem
  Scrolling
  × No support for “position: fixed”
  × Can’t place fixed position elements

  Alternative scrolling
   • iScroll.js (3.7.1 ?!)
   • 11K lines of Javascript code (yikes …)
Chapter 1


Inconsistent
experience
  All browsers WebKit based, but:
   × No H/W acceleration
   × Slow performance
   × Render breaks
   × Missing events
   × Memory problems
Chapter 1
                                   SUMMARY
                 HTML5                                           Native




            The Good                              The Bad
            •   Cross platform dev. / bug fixes   • Bad performance on Android
            •   New features are easy             • Bad performance on BlackBerry
            •   New platforms are easy            • Same UI for all platforms
            •   Small, agile team (2 dev.)
Chapter 2

Android
Performance
Chapter 2


 Problem:
   Slow scrolling performance              Native UI


 Solution:
   Move fixed position
   elements to native UI        WebView   WebView

  Needed to create a
  2 - way bridge
                                          Native Tabs

   HTML5            Native
Chapter 2


 Problem:
   Slow page transition

 Solution:
   Use native code to make
   the transition, by taking
   a screenshot and moving
   the webview underneath
Chapter 2
                              SUMMARY
              HTML5                                  Native




            The Good                The Bad
            • Smooth Android exp.   • Bad performance on BlackBerry
            • Good iPhone exp.      • Some spaghetti code
                                    • Dedicated Android dev.
Chapter 3

The Era
of the
Windows
Phone
Chapter 3



            VERY
            UNIQUE
            UI but…                 7.0
            × No HTML5 and CSS3
            × No H/W acceleration
            × No touch events
Chapter 3
       WE NEED TO RETHINK OUR STRATEGY
            Moving to Cross Platform MVC (BackBone.js)




                 Javascript                HTML / CSS

             Data          Business
                                              Views
            Models          Logic
                                                      C# / XAML

                                                         Views
Chapter 3
                               SUMMARY
              HTML5                                       Native




            The Good                   The Bad
            • Good, native WP7 exp.    • The pain of cross platform dev.
            • Separated WP7 solution   • Dedicated WP7 developer
Chapter 4             This what we do now

                                    NATIVE UI
                                          Services   Cache


                          Notifications                      Logic

                                               Core
                           Settings                          Usages

                                           Data
                                          Models     Login


            Objective C            Java                C#             HTML5 / CSS
Chapter 4
                               SUMMARY
              HTML5                                          Native




            The Good                           The Bad
            • Smooth UI                        • Big team, dedicated dev.
            • Doesn’t rely on browser render   • New features are hard
            • Core sharing                     • Platform specific bugs
Let’s have a look
at the big players
iPad




• One of the best HTML5 hybrid apps
• Native / HTML5 combined UI
• 4MB of minified JS / HTML / CSS
• Same code for web / native
• Different Web / Native UI per platform
• Great engineering blog
  http://engineering.linkedin.com/blog

     HTML5                  Native
iPad




• Native → HTML5 → Native
• Server based HTML / JS / CSS
• Same code for web / native
• App got bad reviews, very slow
• Android is next to move to native UI

     HTML5                  Native
SUMMARY   HTML5 vs. Native is not just about
          technology.

          Development is an ongoing
          process, you can make
          amendments along the way and
          adjust your product.

          Don’t be afraid to experiment and
          admit you were wrong!
< / Thank you >
                      Questions?
about.me/eranzinman
   eran@conduit.com
   @zzeran
   Eran Zinman

Mais conteúdo relacionado

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

Destaque

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Destaque (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

FOWA 2012: Native, HTML5, and Hybrid Mobile App Development: Real-Life Experiences - Eran Zinman

  • 1. < my real life experience > Native, HTML5 & Hybrid Mobile Development Eran Zinman @ zzeran eran @conduit.com
  • 2. ABOUT ME Manages R&D in Conduit Mobile
  • 3. Mobile App Development HTML5 NATIVE HYBRID Objective C, Java, Native code + CSS / HTML / JS C# / XAML, C++ HTML5
  • 4.
  • 5.
  • 6. Chapter 1 theBIG BANG
  • 7. Chapter 1 Product requirements: • Cross-platform Native app • Mobile web app • Web Simulator • Small, agile team The solution: • Cross platform, cross browser HTML5 native app & web app
  • 8. Chapter 1 Initial POC Technologies: • PhoneGap 0.7.1 • jQTouch beta / jQuery LOOKING GOOD! POC included: NOT SO FAST… Design app in HTML / CSS Native features (PhoneGap) RESTful services (ajax) iPhone + Android
  • 9. Chapter 1 First Real Problem Scrolling × No support for “position: fixed” × Can’t place fixed position elements Alternative scrolling • iScroll.js (3.7.1 ?!) • 11K lines of Javascript code (yikes …)
  • 10. Chapter 1 Inconsistent experience All browsers WebKit based, but: × No H/W acceleration × Slow performance × Render breaks × Missing events × Memory problems
  • 11. Chapter 1 SUMMARY HTML5 Native The Good The Bad • Cross platform dev. / bug fixes • Bad performance on Android • New features are easy • Bad performance on BlackBerry • New platforms are easy • Same UI for all platforms • Small, agile team (2 dev.)
  • 13. Chapter 2 Problem: Slow scrolling performance Native UI Solution: Move fixed position elements to native UI WebView WebView Needed to create a 2 - way bridge Native Tabs HTML5 Native
  • 14. Chapter 2 Problem: Slow page transition Solution: Use native code to make the transition, by taking a screenshot and moving the webview underneath
  • 15. Chapter 2 SUMMARY HTML5 Native The Good The Bad • Smooth Android exp. • Bad performance on BlackBerry • Good iPhone exp. • Some spaghetti code • Dedicated Android dev.
  • 16. Chapter 3 The Era of the Windows Phone
  • 17. Chapter 3 VERY UNIQUE UI but… 7.0 × No HTML5 and CSS3 × No H/W acceleration × No touch events
  • 18. Chapter 3 WE NEED TO RETHINK OUR STRATEGY Moving to Cross Platform MVC (BackBone.js) Javascript HTML / CSS Data Business Views Models Logic C# / XAML Views
  • 19. Chapter 3 SUMMARY HTML5 Native The Good The Bad • Good, native WP7 exp. • The pain of cross platform dev. • Separated WP7 solution • Dedicated WP7 developer
  • 20. Chapter 4 This what we do now NATIVE UI Services Cache Notifications Logic Core Settings Usages Data Models Login Objective C Java C# HTML5 / CSS
  • 21. Chapter 4 SUMMARY HTML5 Native The Good The Bad • Smooth UI • Big team, dedicated dev. • Doesn’t rely on browser render • New features are hard • Core sharing • Platform specific bugs
  • 22. Let’s have a look at the big players
  • 23. iPad • One of the best HTML5 hybrid apps • Native / HTML5 combined UI • 4MB of minified JS / HTML / CSS • Same code for web / native • Different Web / Native UI per platform • Great engineering blog http://engineering.linkedin.com/blog HTML5 Native
  • 24. iPad • Native → HTML5 → Native • Server based HTML / JS / CSS • Same code for web / native • App got bad reviews, very slow • Android is next to move to native UI HTML5 Native
  • 25. SUMMARY HTML5 vs. Native is not just about technology. Development is an ongoing process, you can make amendments along the way and adjust your product. Don’t be afraid to experiment and admit you were wrong!
  • 26.
  • 27. < / Thank you > Questions? about.me/eranzinman eran@conduit.com @zzeran Eran Zinman