Thread by @geekykaran

Thread: Learnings from issues I ran into while experimenting with the new JSC on Android for #reactnative in the Skyscanner app this past week. Sharing them here so someone else doesn't have to down some rabbit holes that I had to. RT for reach thx! 🙏

👇

1. Using jsc-android-buildscripts in your app, brownfield or otherwise, is ridiculously easy. I did not imagine that! Great work by folks at @expo, @callstackio, et al. The newer version on RN will ship with this by default:

https://twitter.com/geekykaran/status/1078438725611327489

One thing I had to figure out was how to use Kotlin for the gradle script instead of the default example in the docs: github.com/react-native-c… You only need it if you are going to use the JSC variant with i18n enabled.

Here's an example of how the code looks like with Kotlin:

2. Our minimum support on iOS is iOS10. So I wanted to see what are the set of features that are supported on both: the default JSC on iOS and the new JSC for Android.

For iOS, the list of completed/in-development features for iOS10 is here: trac.webkit.org/browser/webkit…

You can look for features supported by any version of iOS, depending on your app's min. OS requirement.

For Android, the list of completed/in-development features for jsc-android-buildscripts v236355.1.1 is here: trac.webkit.org/browser/webkit…

Next tweet for details on how I got there 👇

First I had to find the webkit version that the latest jsc-android-buildscripts ships with. That's available here: github.com/react-native-c… Then, you can look for the folder named "webkit-<version>" here: trac.webkit.org/browser/webkit… The JavascriptCore for that is inside Source folder.

Fun fact: if you are wondering why jsc-android-buildscripts has such a weird versioning, eg: 236355.1.1, it comes from the commit SHA for that webkit release. The minor/patch versions come from fixes needed to make the JSC work with RN, if I had to guess. @kzzzf might know more?

So essentially, on diff-ing both the feature sets, I figured that two features are missing on iOS 10:

- async/await support
- Exponentiation Syntax

This means that the babel config for bundling code for iOS needs to be adjusted accordingly.

3. I manually compared the supported feature list to remove unnecessary babel plugins from default metro babel preset. My final babel config: gist.github.com/karanjthakkar/…

Note: You need to remove .babelrc and use babel.config.js to configure babel. More info: github.com/facebook/metro…

For reference: using this new babel config reduced the production JS bundle size by ~200KB for our app. Not bad! 💯

After using the new config, our app started crashing. Fun fact I learnt: You cannot do "new Person()" if "Person" is an arrow function. I never figured it out until now because babel transpiled it to a regular function which then allowed this operation. developer.mozilla.org/en-US/docs/Web…

4. uglify-es, which is used by default by metro under the hood for minification, has some issues which were uncovered when I tried to run the app. I got this error: "Attempted to assign to readonly property". The stacktrace lead to a line in the @reactnavigation library.

Long story short: uglify-es tried to inline this function: github.com/react-navigati… at its callsite here: github.com/react-navigati… The transpiled code looks something like 👇 (Notice the "const t = ..." and then "t = t" 🙄)

This worked fine when we transpiled const's to var's. But with the new config it started throwing runtime errors because uglify-es doesn't seem to understand the const grammar. So it tries to reassign an already existing variable when it inlines the function.

Fix: Use the new terser minifier which is a fork of uglify-es but better maintained. @MetroBundler recently added support for that, thanks to @haggholm: github.com/facebook/metro…

How? Install metro-minify-terser and update the metro config to provide a new minifier

/fin