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.

Transcript

1. BUILDING CROSS-PLATFORM

   WITHOUT SACRIFICING PERFORMANCE
   

   View Slide

2. LET’S IMAGINE

   YOU’RE STARTING A
   NEW DIGITAL PRODUCT

   TODAY…
   

   View Slide

3. WHAT ARE THE CHOICES

   YOU NEED TO MAKE?
   STARTING FRESH
   

   View Slide

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?
   

   View Slide

5. ▸ Full-size computer
   ▸ Smartphone
   ▸ Smart TV
   ▸ Tablet
   ▸ Wearables
   ▸ VR
   INTERFACES TODAY
   

   View Slide

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
   

   View Slide

7. MOBILE WEB VS MOBILE APPS
   LET’S TALK ABOUT
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

10. BUT…
    

    View Slide

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

    View Slide

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
    

    View Slide

13. TOP MOBILE APPS
    IF YOU’RE IN A HIGHLY COMPETITIVE SPACE
    Delivering a mobile app is NOT optional.
    

    View Slide

14. IN MOST CASES
    You’ll need to deliver on
    ▸ Android
    ▸ iPhone
    ▸ Web
    … at the minimum.
    

    View Slide

15. HOW CAN WE

    DELIVER ALL THAT?
    

    View Slide

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)
    

    View Slide

17. YOUR USERS WILL BE
    VERY HAPPY.
    

    View Slide

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

    View Slide

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
    

    View Slide

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)
    

    View Slide

21. CROSS-PLATFORM
    LET’S TALK ABOUT
    

    View Slide

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

    View Slide

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.
    

    View Slide

24. HTML5 HYBRID / WEBVIEW
    LET’S TALK ABOUT
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. 1.5 STARS
    

    View Slide

29. “OUR BIGGEST MISTAKE WAS
    BETTING TOO MUCH ON
    HTML5“
    Mark Zuckerberg - 2012
    THE FACEBOOK HYBRID APP
    

    View Slide

30. THE FACEBOOK HYBRID APP
    FACEBOOK WENT BACK AND FORMED
    A NATIVE TEAM FOR IOS

    

    AND ANOTHER FOR ANDROID
    

    View Slide

31. IS NOT AN OPTION
    IF YOU'RE IN THE TOP 100

    OR YOU COMPETE IN THAT LEAGUE,

    SACRIFICING THE USER EXPERIENCE
    

    View Slide

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
    

    View Slide

33. WHAT'S THE IDEAL
    SOLUTION
    for cross-platform?
    

    View Slide

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
    

    View Slide

35. LET’S TALK ABOUT

    REACT
    

    View Slide

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
    

    View Slide

37. “REACT IS PACKED WITH IDEAS
    THAT WERE RADICAL AT THE TIME
    OF ITS INTRODUCTION.”
    Dan Abramov
    REACT FOR THE WEB
    

    View Slide

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
    

    View Slide

39. BUT THERE’S ONE IMPORTANT CONCEPT
    I WANT TO EXPLORE…
    

    View Slide

40. REACT
    

    View Slide

41. VIEW LOGIC
    IT TELLS YOU VERY LITTLE ABOUT THE
    UNDERLYING DISPLAY MEDIUM
    If you look at that piece of code …
    

    View Slide

42. REACT
    

    View Slide

43. “THE BROWSER IS JUST AN
    IMPLEMENTATION DETAIL”
    Smart people in the React Community
    REACT
    

    View Slide

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
    

    View Slide

45. REACT NATIVE
    REACT CONF, JANUARY 2015
    

    View Slide

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!
    

    View Slide

47. REACT NATIVE
    FAMILIAR PRINCIPLES, NEW PRIMITIVES
    

    View Slide

48. LEARN ONCE, WRITE ANYWHERE.
    React Native
    

    View Slide

49. CODE RE-USE
    

    View Slide

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.
    

    View Slide

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)
    

    View Slide

52. PERFORMANCE
    

    View Slide

53. REACT NATIVE
    PERFORMANCE
    ▸ Async, batched Rendering
    ▸ UI on a separate thread
    ▸ Take advantage of multi-core architectures
    

    View Slide

54. STYLING & LAYOUT
    

    View Slide

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.
    

    View Slide

56. ANIMATIONS
    

    View Slide

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.
    

    View Slide

58. REACT NATIVE
    REACT NATIVE AS A BUSINESS DECISION
    

    View Slide

59. DEVELOPER
    EXPERIENCE
    

    View Slide

60. ONE OF THE REALLY GREAT
    THINGS ABOUT THE
    WEB…
    The Developer Experience is top
    notch.
    

    View Slide

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
    

    View Slide

62. BUT…
    

    View Slide

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
    

    View Slide

64. YOU DON’T HAVE TO USE JS
    ACTUALLY, TECHNICALLY
    

    View Slide

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
    

    View Slide

66. COMMUNITY
    

    View Slide

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
    

    View Slide

68. EXPO SNACK
    

    View Slide

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!
    

    View Slide

70. SO WHAT’S THE FUTURE
    OF NATIVE CODE?
    

    View Slide

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.
    

    View Slide

72. REACT NATIVE
    FRONT-END ENGINEERING IS GOING
    THROUGH A SORT OF RENAISSANCE
    ▸ Languages are evolving.
    ▸ Developer experience is improving.
    ▸ Barriers are coming down.
    

    View Slide

73. THANK YOU
    @sstur_
    I’m Simon.
    I run a software agency:
    

    We build and consult React Native.
    

    View Slide