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

A01b931867096ec8874202e233279212?s=128

Simon Sturmer

July 15, 2017
Tweet

Transcript

  1. THE FUTURE OF FRONT-END ENGINEERING

  2. FRONT END
 INTERFACE LET’S START WITH THE MOST WELL-KNOWN

  3. THE WEB

  4. THE WEB INTERFACE HTML PROPOSAL, 1989-90

  5. 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”
  6. YAHOO HOME PAGE, CIRCA 1997

  7. THE WEB INTERFACE THE WEB EVOLVED INTO A PLATFORM TO

    DELIVER SOFTWARE ▸ CSS ▸ JavaScript ▸ Document Object Model ▸ AJAX ▸ Flash
  8. None
  9. THE WEB INTERFACE RICH USER INTERFACES ON THE MODERN WEB

  10. BUT FIRST… WE’LL COME BACK TO THE WEB PLATFORM

  11. LET’S TALK ABOUT FRONT-END ENGINEERING INTERFACES TODAY ▸ Smartphone ▸

    Full-size computer ▸ Smart TV ▸ Tablet ▸ Wearables ▸ VR
  12. WHAT ARE THE CHALLENGES WITH FRONT-END ENGINEERING TODAY? TODAY’S INTERFACES

  13. TODAY’S INTERFACES THE ENGINEERING CHALLENGES ▸ Users’ expectations have grown

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

    compromise: ▸ Productivity ▸ Feature scope ▸ User Experience
  15. 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.
  16. LET’S TALK ABOUT THE WEBVIEW…

  17. 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
  18. 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
  19. 1.5 STARS

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

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

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


    OR YOU COMPETE IN THAT LEAGUE, SACRIFICING THE USER EXPERIENCE
  23. 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
  24. WHAT'S THE IDEAL SOLUTION?

  25. 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
  26. LET’S TALK ABOUT THE REACT…

  27. 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
  28. “REACT IS PACKED WITH IDEAS THAT WERE RADICAL AT THE

    TIME OF ITS INTRODUCTION.” Dan Abramov THE WEB CONTINUED
  29. 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
  30. THE STORY OF REACT BUT THERE’S ONE IMPORTANT CONCEPT TO

    UNDERSTAND…
  31. CODE TIME

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

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

  34. “THE BROWSER IS JUST AN IMPLEMENTATION DETAIL” Someone in 2014

    REACT
  35. 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
  36. REACT A UNIVERSAL FRONT-END

  37. UNIVERSAL FRONT-END REACT NATIVE

  38. UNIVERSAL FRONT-END LET’S SEE AN EXAMPLE…

  39. Introducing the GeekCamp App from KodeFox kodefox.com/geekcamp

  40. 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
  41. 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
  42. REACT NATIVE DEVELOPER
 EXPERIENCE

  43. REACT NATIVE DEVELOPER EXPERIENCE ▸ Almost nonexistent compile times ▸

    Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Powerful layout using Flexbox ▸ Sane logging and debugging
  44. DEVELOPER EXPERIENCE

  45. 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
  46. 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
  47. FUTURE OF FRONT-END WHERE DO WE GO FROM HERE?

  48. 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
  49. REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF

    RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.
  50. IT’S AN EXCITING TIME TO BE A FRONT-END
 ENGINEER

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

    
 We build React Native.