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

React Native - The Future of Front-end Engineering

React Native - The Future of Front-end Engineering

This talk was originally presented on July 15, 2017 at GeekCamp in Jakarta.

Video for this talk at: https://youtu.be/48uXzHKGhjI

Simon Sturmer

July 15, 2017
Tweet

More Decks by Simon Sturmer

Other Decks in Technology

Transcript

  1. ORIGINS OF THE WEB INTERFACE HYPER TEXT MARKUP LANGUAGE ▸

    Conceived in 1989 for researchers at CERN ▸ Created to display pages of text linked to other pages of text ▸ Simple text, with no styling, ugly tables and later, low-res images sprinkled in. ▸ Each document has a “Universal Resource Locator”
  2. THE WEB INTERFACE THE WEB EVOLVED INTO A PLATFORM TO

    DELIVER SOFTWARE ▸ CSS ▸ JavaScript ▸ Document Object Model ▸ AJAX ▸ Flash
  3. LET’S TALK ABOUT FRONT-END ENGINEERING INTERFACES TODAY ▸ Smartphone ▸

    Full-size computer ▸ Smart TV ▸ Tablet ▸ Wearables ▸ VR
  4. TODAY’S INTERFACES THE ENGINEERING CHALLENGES ▸ Users’ expectations have grown

    tremendously ▸ Multiple platforms ▸ Incompatible technologies ▸ Building for mobile is difficult and expensive
  5. MOBILE ENGINEERING HOW DO LARGE ORGS
 APPROACH MOBILE? Choose a

    compromise: ▸ Productivity ▸ Feature scope ▸ User Experience
  6. MOBILE ENGINEERING CHOOSE YOUR COMPROMISE ▸ Building dedicated teams for

    web, iOS and Android can triple your engineering cost (or split your productivity). ▸ You could use dedicated teams, but cut features to keep engineering costs in line. ▸ HTML-based web-views promise productivity and features at the expense of quality and user experience.
  7. THE HYBRID APPROACH BACK IN 2009, WE GOT A HOT

    NEW THING CALLED HTML5 ▸ Flash couldn’t keep up with Mobile ▸ Chrome started the second browser war ▸ Everyone thought HTML5 was the answer to everything ▸ PhoneGap and friends made some strong Cross-Platform promises
  8. THE FACEBOOK HYBRID APP ▸ In the early days of

    mobile, Facebook did not have a successful mobile app. ▸ They decided to build on HTML5 hybrid technology ▸ It was released in 2010 for both iPhone and Android
  9. “OUR BIGGEST MISTAKE WAS BETTING TOO MUCH ON HTML5“ Mark

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

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


    OR YOU COMPETE IN THAT LEAGUE, SACRIFICING THE USER EXPERIENCE
  12. THE DEDICATED TEAM APPROACH IT’S NOT A PERFECT SOLUTION ▸

    Not every company can afford the resources for multiple teams. ▸ Even with dedicated teams, you have multiple codebases. ▸ Keeping feature parity is hard ▸ Keeping UX consistency is hard
  13. THE CROSS PLATFORM HOLY GRAIL WE WANT ALL OF THE

    FOLLOWING ▸ One expressive language/framework across Web, Desktop and Mobile ▸ Performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations
  14. THE WEB CONTINUED REACT Let's continue our web story just

    a few years after HTML5 ▸ Mid 2013: Angular is the dominant web framework ▸ React is new and controversial ▸ The early adopters of React were fueling some incredible innovation in the front-end space. ▸ A lot of these ideas were very unpopular
  15. “REACT IS PACKED WITH IDEAS THAT WERE RADICAL AT THE

    TIME OF ITS INTRODUCTION.” Dan Abramov THE WEB CONTINUED
  16. THE WEB CONTINUED We could do a whole talk about

    how transformational React was at this time ▸ Declarative UI ▸ View as a function of state ▸ Immutability ▸ Composable UI components ▸ Batched, asynchronous rendering
  17. VIEW LOGIC IT TELLS YOU VERY LITTLE ABOUT THE UNDERLYING

    DISPLAY MEDIUM If you look at that piece of code …
  18. REACT This same code could target any display medium. In

    fact, several teams started doing this: ▸ Flipboard -> HTML5 Canvas ▸ Netflix -> “Gibbon” for Smart TVs ▸ (Some brave people) -> Terminal Interface ▸ … even a PDF renderer
  19. kodefox.com/geekcamp ▸ 100% React Native ▸ 100% Modern JS ▸

    ~2 months using two developers (part-time) ▸ Redux, React Navigation, RN Elements, Animatable ▸ Type system using Flow
  20. THE CROSS PLATFORM HOLY GRAIL REACT NATIVE GIVES US ▸

    One expressive language/framework across Web, Android, iOS and Windows ▸ Performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations
  21. REACT NATIVE DEVELOPER EXPERIENCE ▸ Almost nonexistent compile times ▸

    Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Powerful layout using Flexbox ▸ Sane logging and debugging
  22. REACT NATIVE MODERN JAVASCRIPT React Native is built on modern

    JS or “ES Next” ▸ Expressive new language features ▸ Promises and Async/Await - possibly the best thing to happen to asynchronous programming. ▸ Optional Typing for strong compile-time guarantees
  23. REACT NATIVE REACT NATIVE IS A BUSINESS CHOICE TOO ▸

    Ship quality products across platforms ▸ Effective use of engineering resources ▸ One set of tech to hire and train for ▸ Load balance engineers between teams
  24. FRONT-END ENGINEERING EXCITING TRENDS IN FRONT-END ▸ Styles in JS

    ▸ Strong types and type inference. ▸ Shift away from imperative programming, OOP, and MVC ▸ Powerful build tools and code analysis (Prepack) ▸ Languages that compile to JS:
 Scala, Dart, Elm, TypeScript, Kotlin, Reason
  25. REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF

    RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.