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

Building cross-platform without sacrificing performance

Building cross-platform without sacrificing performance

If you're building a competitive product, mobile is crucial and you need to build for Web, Android and iOS. Many startups hire a separate team for each platform and re-implement features in different technologies. Learn how to harness a single team and a modern tech stack to ship product across all three platforms without sacrificing user experience or performance.

A01b931867096ec8874202e233279212?s=128

Simon Sturmer
PRO

August 09, 2017
Tweet

Transcript

  1. BUILDING CROSS-PLATFORM
 WITHOUT SACRIFICING PERFORMANCE

  2. LET’S IMAGINE
 YOU’RE STARTING A NEW DIGITAL PRODUCT
 TODAY…

  3. WHAT ARE THE CHOICES
 YOU NEED TO MAKE? STARTING FRESH

  4. STARTING FRESH CHOICES ▸ Desktop, mobile, web.. or all of

    the above? ▸ Which technology stack to choose? ▸ How to recruit and build a team? ▸ Which features/platform to get to market first?
  5. ▸ Full-size computer ▸ Smartphone ▸ Smart TV ▸ Tablet

    ▸ Wearables ▸ VR INTERFACES TODAY
  6. MOBILE IS KING If you expect to compete you MUST

    prioritize mobile. ▸ Mobile is the primary interface for most users ▸ Vast majority of time is spent on mobile devices ▸ Online revenue and commerce is rapidly moving toward mobile
  7. MOBILE WEB VS MOBILE APPS LET’S TALK ABOUT

  8. MOBILE WEB VS MOBILE APP THE WEB IS A COMPELLING

    PLATFORM ▸ Open Standards ▸ Cross-platform ▸ URLs are awesome for usability ▸ Your site is just a Google search away ▸ No installation required ▸ We’ve become good at navigating the web’s limitations
  9. THE WEB PLATFORM 20 YEARS OF INFLUENCE A lot of

    the really exciting application design paradigms originated from the web. In many ways, this is a product of the innovation required to leverage the web for delivering applications.
  10. BUT…

  11. THE WEB IS NOT CAPABLE OF DELIVERING IMMERSIVE EXPERIENCES COMPARABLE

    WITH NATIVE APPS.
  12. FOR EXAMPLE ▸ Rich gestures and interactions ▸ Natural-feeling animations

    at 60fps ▸ Gyro, accelerometer ▸ Location services ▸ Push notifications ▸ Microphone, Music, Camera ▸ Bluetooth, NFC, Biometrics ▸ Offline Experiences ▸ Background services ▸ Native APIs such as contacts and sharing THE MOBILE EXPERIENCE
  13. TOP MOBILE APPS IF YOU’RE IN A HIGHLY COMPETITIVE SPACE

    Delivering a mobile app is NOT optional.
  14. IN MOST CASES You’ll need to deliver on ▸ Android

    ▸ iPhone ▸ Web … at the minimum.
  15. HOW CAN WE
 DELIVER ALL THAT?

  16. DELIVERING A PRODUCT LET’S DO THIS: 1. Hire a dedicated

    Android team that understands Java and Android Studio 2. Hire a rockstar iOS team that understands Swift and Xcode and Native SDKs 3. Hire a web team to do the HTML, CSS, JavaScript (and one of the 387 JS frameworks available today) (Protip: You’ll need a backend too)
  17. YOUR USERS WILL BE VERY HAPPY.

  18. PAYING THREE SEPARATE TEAMS YOU’LL BE BUILDING MOST FEATURES THREE

    TIMES AND…
  19. DELIVERING A PRODUCT SOME COMPANIES CAN AFFORD THREE TEAMS But

    there are still challenges to this approach… ▸ The teams tend to be somewhat siloed ▸ Keeping feature parity between platforms is challenging ▸ It’s difficult to manage all those engineers ▸ Customer support for three different products
  20. SHIP IT IDEALLY… We just want to build our App

    once and deliver it to all our awesome users. Even if they’re using Android. or iPhone. (or worse, Windows Phone)
  21. CROSS-PLATFORM LET’S TALK ABOUT

  22. CROSS-PLATFORM TECHNOLOGIES LUCKILY, WE HAVE A FEW OPTIONS

  23. CROSS-PLATFORM TECHNOLOGIES TWO APPROACHES TO CROSS-PLATFORM ▸ HTML5 Hybrid Approach

    (sometimes called a webview)
 - for example Cordova or Ionic ▸ A framework that abstracts each platform’s native view components
 - such as Xamarin, NativeScript and React Native Both approaches need to expose features from the underlying SDK such as access to camera or GPS.
  24. HTML5 HYBRID / WEBVIEW LET’S TALK ABOUT

  25. HTML5 BACK IN 2009, WE GOT
 A HOT NEW THING

    CALLED HTML5 ▸ Flash wasn’t winning on mobile ▸ HTML5 was riding a wave of excitement ▸ Everyone thought HTML5 was the answer to cross-platform ▸ PhoneGap and friends made some strong promises for mobile
  26. WHY? The HTML5 Hybrid approach essentially augments the normal web

    technologies with access to hardware features such as camera/ location/bluetooth. Everyone was already familiar with web technologies. HTML5
  27. THE FACEBOOK HYBRID APP ▸ Around that time, Facebook did

    not have a successful mobile app. ▸ They decided to build on HTML5 hybrid technology ▸ Their hybrid app was released in 2010 for both iPhone and Android
  28. 1.5 STARS

  29. “OUR BIGGEST MISTAKE WAS BETTING TOO MUCH ON HTML5“ Mark

    Zuckerberg - 2012 THE FACEBOOK HYBRID APP
  30. THE FACEBOOK HYBRID APP FACEBOOK WENT BACK AND FORMED A

    NATIVE TEAM FOR IOS
 
 AND ANOTHER FOR ANDROID
  31. IS NOT AN OPTION IF YOU'RE IN THE TOP 100


    OR YOU COMPETE IN THAT LEAGUE,
 SACRIFICING THE USER EXPERIENCE
  32. WEB-BASED TECHNOLOGY HAS IMPROVED A LOT But ultimately, it can’t

    compete with native on user experience or performance. ▸ Animations ▸ Gestures ▸ Response time ▸ Physics ▸ Memory consumption HTML5
  33. WHAT'S THE IDEAL SOLUTION for cross-platform?

  34. THE CROSS PLATFORM HOLY GRAIL WE WANT ALL OF THE

    FOLLOWING ▸ One expressive language/framework across iOS, Android (and ideally Web too) ▸ Native level performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations
  35. LET’S TALK ABOUT
 REACT

  36. REACT FOR THE WEB REACT Just a year or so

    after their Hybrid App situation,
 Facebook dreamed up a new thing called React. ▸ React was new and controversial ▸ Angular was the dominant web framework ▸ The early adopters of React were fueling some incredible innovation in the front- end space. ▸ A lot of these ideas were very unpopular
  37. “REACT IS PACKED WITH IDEAS THAT WERE RADICAL AT THE

    TIME OF ITS INTRODUCTION.” Dan Abramov REACT FOR THE WEB
  38. REACT FOR THE WEB We could spend a whole talk

    on how transformational React was at the time. ▸ Declarative UI ▸ View as a function of state ▸ Immutability ▸ Composable UI components ▸ Batched, asynchronous rendering
  39. BUT THERE’S ONE IMPORTANT CONCEPT I WANT TO EXPLORE…

  40. REACT

  41. VIEW LOGIC IT TELLS YOU VERY LITTLE ABOUT THE UNDERLYING

    DISPLAY MEDIUM If you look at that piece of code …
  42. REACT

  43. “THE BROWSER IS JUST AN IMPLEMENTATION DETAIL” Smart people in

    the React Community REACT
  44. REACT In theory, React views could target any display medium,

    not just a web browser. In fact, several teams started trying it: ▸ Flipboard -> HTML5 Canvas ▸ Netflix -> “Gibbon” for Smart TVs ▸ (Some brave people) -> Terminal Interface ▸ … even a PDF renderer
  45. REACT NATIVE REACT CONF, JANUARY 2015

  46. REACT NATIVE ▸ The same ideas powering React ▸ Truly

    native view components ▸ No HTML, CSS or Webviews ▸ Emphasis on performance ▸ Modern JavaScript ▸ iOS, Android and even Windows!
  47. REACT NATIVE FAMILIAR PRINCIPLES, NEW PRIMITIVES

  48. LEARN ONCE, WRITE ANYWHERE. React Native

  49. CODE RE-USE

  50. REACT NATIVE CODE RE-USE ‣ Reasonable amount of code re-use

    while maintaining the native look and feel for each platform. ‣ Android should feel like Android; iOS like iOS. ‣ You CAN maximize for code re-use and brand your app with a similar look/feel across platforms if you choose.
  51. REACT NATIVE CODE RE-USE ‣ Your views, styling and business

    logic is 100% JavaScript ‣ You can even get some code re-use with React for web (especially business logic)
  52. PERFORMANCE

  53. REACT NATIVE PERFORMANCE ▸ Async, batched Rendering ▸ UI on

    a separate thread ▸ Take advantage of multi-core architectures
  54. STYLING & LAYOUT

  55. REACT NATIVE STYLING & LAYOUT ▸ Styling and Layout is

    done 100% in JavaScript ▸ Some ideas are borrowed from CSS, specifically Flexbox ▸ Flexbox provides a powerful way to describe your layout.
  56. ANIMATIONS

  57. REACT NATIVE ANIMATIONS ▸ React Native provides powerful, declarative animation

    constructs. ▸ The animations run fully in native, so the performance is smooth. ▸ Once you learn the API, it’s fairly intuitive. ▸ You get access to gestures such as swipes and scroll-based animations.
  58. REACT NATIVE REACT NATIVE AS A BUSINESS DECISION

  59. DEVELOPER EXPERIENCE

  60. ONE OF THE REALLY GREAT THINGS ABOUT THE WEB… The

    Developer Experience is top notch.
  61. DEVELOPER EXPERIENCE BRINGING THE BEST OF THE WEB TO NATIVE

    ▸ Almost zero compile time ▸ Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Dev tools make debugging painless ▸ Powerful layout using Flexbox
  62. BUT…

  63. JAVASCRIPT FOR REAL? ▸ JS is not as bad as

    it used to be! ▸ React Native is built on modern JS or “ES Next” ▸ We get powerful constructs such as async/await and Promises ▸ Optional Typing and strong compile-time guarantees
  64. YOU DON’T HAVE TO USE JS ACTUALLY, TECHNICALLY

  65. JAVASCRIPT ALTERNATIVES THERE ARE LANGUAGES THAT WILL COMPILE TO JS

    ▸ TypeScript (from Microsoft) ▸ Scala ▸ ClojureScript ▸ Reason — New from the creators of React! ▸ Sound type system. Fully supported React Bindings. ▸ Used already in production by Facebook
  66. COMMUNITY

  67. JAVASCRIPT ALTERNATIVES THE COMMUNITY AROUND REACT NATIVE IS GREAT ▸

    Open Source UI kits, Navigation ▸ Dev Tooling ▸ Bindings to third-party SDKs (such as Voip or Analytics) ▸ Community Support ▸ Learning Resources
  68. EXPO SNACK

  69. INSTANTLY GET STARTED EXPO ROCKS ▸ Go to the website

    ▸ Scan the QR code with your phone ▸ Edit code and instantly see the results on your device!
  70. SO WHAT’S THE FUTURE OF NATIVE CODE?

  71. FUTURE OF NATIVE CODE CAN REACT NATIVE REPLACE JAVA/SWIFT? ▸

    Not Really ▸ React Native is written in those native languages ▸ All the components that you use in your RN app are native components built in native languages ▸ However, we’re seeing a shift where native languages are used by library/ component authors and React Native is used by app developers.
  72. REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF

    RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.
  73. THANK YOU @sstur_ I’m Simon. I run a software agency:

    
 We build and consult React Native.