Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Delivery

87 views

Published on

Konstantin is a Web Developer at Facebook who is lucky to work at React Native Open Source team. For the last few years his passions were infrastructure, Continuous Delivery, JavaScript and stable builds. Before joining Facebook he worked at a New Zealand startup www.booktrack.com.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Delivery

  1. 1. Why don't you build faster? What tools Facebook uses to waste less
  2. 2. React Native
  3. 3. When I joined Facebook
  4. 4. My first task
  5. 5. My first code fix
  6. 6. Not what expected
  7. 7. Software development is iterative
  8. 8. "You loose ability to deliver when development iterations are interrupted"
  9. 9. • Rebuilding UI with React Native • Rebuilding native code Bucking fast • Rerunning tests continuously to prevent breaking your code
  10. 10. React Native... Is it like Phonegap?
  11. 11. React Native apps are very much indeed native
  12. 12. React Native is running React
  13. 13. Imperative (old) way if (userLikes()) { if (!hasBlueLike()) { removeGrayLike(); addBlueLike(); } } else { if (hasBlueLike()) { removeBlueLike(); addGrayLike(); } }
  14. 14. Declarative (new) way if (this.state.liked) { return (<BlueLike/>); } else { return (<GrayLike/>); }
  15. 15. React calculates the smallest set of changes to transition between states
  16. 16. React Native brings React to Native Mobile
  17. 17. var Toggle = React.createClass({ getInitialState: function() { return {on: false}; }, handlePress: function(event) { this.setState({on: !this.state.on}); }, render: function() { var text = this.state.on ? 'Toggle on' : 'Toggle off'; return ( <TouchableWithoutFeedback onPress={this.handlePress}> <View> <Text> {text} </Text> </View> </TouchableWithoutFeedback> ); } });
  18. 18. NOT DOM NOT WEBVIEW React Native is
  19. 19. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted'
  20. 20. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Thinking to give it a try... Some time later?How about now?
  21. 21. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted'
  22. 22. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' There is nothing that stops you to try it
  23. 23. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' • Rebuilding UI with React Native • Rebuilding native code Bucking fast • Rerunning tests continuously to prevent breaking your code
  24. 24. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' When compiling native code is inevitable
  25. 25. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Gradle is good because • A long time open source and has many solutions to common problems • Great scripting language • Integration with Maven and familiar dependency resolution
  26. 26. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted'• Reliable, scalable and distributable build caching • Consistent dependency resolution • Exopackage for Android: a shell app that speeds up build time by 5X Buck was created to deal with an ever growing codebase
  27. 27. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted'
  28. 28. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' https://buckbuild.com/article/exopackage.html
  29. 29. Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' Some people may complain 'Eew you are running JavaScript, it is slow and interpreted' React Native: Gradle -> Buck === 226 seconds -> 64 seconds
  30. 30. Only your project matters
  31. 31. READ THE MANUAL AT BUCKBUILD.COM
  32. 32. Gradle resolves dependencies
  33. 33. https://github.com/Piasy/OkBuck generates BUCK files from Gradle
  34. 34. • Rebuilding UI with React Native • Rebuilding native code Bucking fast • Rerunning tests continuously to prevent breaking your code
  35. 35. Building fast and right
  36. 36. Does everyone run tests for mobile apps in CI?
  37. 37. CI for mobile platforms is hard • Requires SDK or specific OS • Emulators are resource hungry • iOS requires a Mac OS VM
  38. 38. iOS tests are more stable
  39. 39. Android tests are not
  40. 40. VS
  41. 41. Shell is not the only language
  42. 42. https://github.com/shelljs/shelljs
  43. 43. Follow the best practices • github.com/Originate/guide/blob/master/android/guide/ Continuous%20Integration.md • github.com/circleci/EspressoSample • github.com/facebook/react-native/blob/master/circle.yml
  44. 44. • Rebuilding UI with React Native • Rebuilding native code Bucking fast • Rerunning tests continuously to prevent breaking your code Questions?

×