Introducing the new "react-native upgrade"

Following React Native upgrades on an existing project has always been a pain. The process relies on a basic comparison between the existing files and the new ones. If the content differs, the developer has no other choice but to leave his file untouched or to override it...
What if we could use Git to handle changes from a React Native version to another ? Git comes with automatic-merge, 3-way merge and merge tools that could really boost the developer experience !

Transcript

1. Introducing the new react-native upgrade Meetup React Native London 18/01/2017
2. ME Nicolas Cuillery @ncuillery › JavaScript dev & trainer at Zenika. › Currently working on 6play apps.
3. The beginning react-native init
4. MyRNProject android ios ... ... ... “Host” apps Display a fullscreen React RootView. Contain the native part of RN & 3rd-parties.
5. https://github.com/facebook/react-native/tree/0.38-stable/local-cli/generator https://github.com/facebook/react-native/tree/0.38-stable/local-cli/generator-ios https://github.com/facebook/react-native/tree/0.38-stable/local-cli/generator-android Until 0.38
6. https://github.com/facebook/react-native/tree/master/local-cli/templates/HelloWorld Now
7. The upgrade Moving your project to the latest version of RN
8. How to upgrade existing project scaffolded with Yeoman ?
10. The problem The upgrading process is painful
11. Why ? Unfriendly content Conflicts generally happen in native files, unfamiliar to the JS developer. Those file can even be not supposed to be touched by hand (project.pbxproj ) Fast pace RN is released on a monthly basis, making you repeating the process for each version. Necessary changes Chance of conflicts increases each time a native is touched: linking 3rd-parties, adding assets, configuring native stuff (device orientation, splashscreen, …)
12. A A React Native 0.X.0 React Native 0.Y.0
13. A A React Native 0.X.0 React Native 0.Y.0 A B Developer’s changes
14. C A React Native 0.X.0 React Native 0.Y.0
15. C A React Native 0.X.0 React Native 0.Y.0 A B Developer’s changes
17. How to sort out the “conflicts” ? - Identify the undesirable conflicts - Knowing where do the changes come from (Developer or React Native)
18. The solution Isolate React Native changes
19. Working with a blank app By running the upgrade command on a blank app, the conflicts are only due to the React Native changes.
20. rn-diff - Git is great to print differences in file contents. - Github is great to show them. https://github.com/ncuillery/rn-diff
21. rn-diff - A branch for each version since 0.23.0. - Github compare view: https://github.com/ncuillery/rn-diff/compare /rn-0.33.0...rn-0.35.0
22. A A React Native 0.X.0 React Native 0.Y.0 A B Developer’s changes If a conflicted file doesn’t appear in the rn-diff compare view, skip it with peace of mind
23. Overwrite if the rn-diff shows the same (or almost the same) diff as Yeoman. And eventually report your changes by hand afterwards In other cases, rn-diff helps you take the good decision Do not overwrite If rn-diff shows a small amount of changes: skip the file and copy-paste the React Native changes manually
24. The automation Working with Git patches
25. Generate a Git patch › Simply append “.diff” to the compare view URL › Ready to “git apply --3way” ?
27. Project’s name in paths Replace all occurrences to fit the user arborescence.
28. Blob in the local repo index Add the rn-diff repo as remote and fetch it: git remote add rn-diff https://github.com/ncuillery/rn-diff.git git fetch rn-diff
29. Project’s name in content We can’t modify the content of the patch, otherwise the blob would change and the apply operation would fail. Leave it like that and manually update after the apply operation.
30. The integration Becoming the “official” process
31. How to get rid of the drawbacks ? Git has to be the main tool… … but Yeoman is still in the game. Yeoman generates files that fit the user’s project perfectly
32. Get the 3 files in Git index A C A Already in HEAD branch ! B Run the “upgrade” command on the current version and overwrite all files Install the new version, run the “upgrade” command and overwrite all files
33. DEMO !
34. https://github.com/facebook/react-native/pull/11110 › Automate these operations with shelljs. › Use Git env variables to create a local Git repository on-the-fly.
35. npm install -g react-native-git-upgrade › Separated package allowing upgrades from any version to any version › Will replace the upgrade command (ETA March 2017)
36. THANKS! Any questions? Keep in touch: @ncuillery · nicolas.cuillery@gmail.com
37. Credits › Integration into RN: Christopher Chedeau (@vjeux), Konstantin Raev (@bestander_nz) and Martin Konicek (@martinkonicek) › Guidance about rn-diff: Ryan Kaskel (@ryankask) & Kenny Dits (@kenny_dee) › Allocated time for Open-Source development: Zenika › Presentation template: SlidesCarnival