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

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
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.