rescript-react-native.github.io/blog/rss.xml at main · rescript-react-native/rescript-react-native.github.io

96 lines (96 loc) · 22.2 KB

<?xml version="1.0" encoding="utf-8"?>

<title>ReScript React Native Blog</title>

<description>ReScript React Native Blog</description>

<docs>https://validator.w3.org/feed/docs/rss2.html</docs>

<generator>https://github.com/jpmonette/feed</generator>

<item>

<guid>https://rescript-react-native.github.io/blog/2021-05-04-hello-rescript-react-native</guid>

<content:encoded><![CDATA[<p>Following <a href="https://rescript-lang.org/blog/bucklescript-is-rebranding" target="_blank" rel="noopener noreferrer">BuckleScript & Reason Rebranding</a> to offer a unified experience, what was know as <em>Reason React Native</em> is now <a href="https://rescript-react-native.github.io" target="_blank" rel="noopener noreferrer">ReScript React Native</a>.</p><p>To make this short: all packages that were published on the behalf of Reason React Native organisation are now published as the <em>ReScript React Native</em> organisation.</p><p>This means:</p><ul><li><a href="https://www.npmjs.com/package/reason-react-native" target="_blank" rel="noopener noreferrer"><code>reason-react-native</code></a> is now <a href="https://www.npmjs.com/package/rescript-react-native" target="_blank" rel="noopener noreferrer"><code>rescript-react-native</code></a></li><li><a href="https://www.npmjs.com/package/reason-react-navigation" target="_blank" rel="noopener noreferrer"><code>reason-react-navigation</code></a> is now <a href="https://www.npmjs.com/package/rescript-react-navigation" target="_blank" rel="noopener noreferrer"><code>rescript-react-navigation</code></a></li><li><a href="https://www.npmjs.com/settings/reason-react-native/packages" target="_blank" rel="noopener noreferrer"><code>@reason-react-native/*</code></a> are now <a href="https://www.npmjs.com/settings/rescript-react-native/packages" target="_blank" rel="noopener noreferrer"><code>@rescript-react-native/*</code></a></li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="should-i-migrate-now-all-my-packages">Should I migrate now all my packages?<a href="#should-i-migrate-now-all-my-packages" class="hash-link" aria-label="Direct link to Should I migrate now all my packages?" title="Direct link to Should I migrate now all my packages?"></a></h2><p>It depends on what version of React Native your are using. There is no rush, really.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="you-use-react-native-063">You use React Native 0.63<a href="#you-use-react-native-063" class="hash-link" aria-label="Direct link to You use React Native 0.63" title="Direct link to You use React Native 0.63"></a></h3><p>You can keep using <code>reason-react-native</code> and friends for now. Revisit this post when you will need to upgrade to 0.64.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="you-use-react-native-064">You use React Native 0.64<a href="#you-use-react-native-064" class="hash-link" aria-label="Direct link to You use React Native 0.64" title="Direct link to You use React Native 0.64"></a></h3><p>Here you have 2 possibles upgrades path:</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="keep-using-reason-react-native">Keep using <code>reason-react-native</code><a href="#keep-using-reason-react-native" class="hash-link" aria-label="Direct link to keep-using-reason-react-native" title="Direct link to keep-using-reason-react-native"></a></h4><p>Before renaming all packages, we offered a <a href="https://github.com/rescript-react-native/rescript-react-native/releases/tag/0.64.0" target="_blank" rel="noopener noreferrer">last release for <code>reason-react-native</code></a> to cover React Native 0.64. You can use that until you are ready to switch to ReScript named packages. If you want to know what this will involve, keep reading.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="switch-to-rescript-react-native">Switch to <code>rescript-react-native</code><a href="#switch-to-rescript-react-native" class="hash-link" aria-label="Direct link to switch-to-rescript-react-native" title="Direct link to switch-to-rescript-react-native"></a></h4><p>The package <a href="https://github.com/rescript-react-native/rescript-react-native/releases/tag/0.64.1" target="_blank" rel="noopener noreferrer"><code>rescript-react-native</code> starts with version 0.64.1</a>. You can try to use it for earlier version of React Native of course, but you might end up to minor inconsistencies, especially for bindings that have been tuned for 0.64. Check out <a href="https://github.com/rescript-react-native/rescript-react-native/releases/tag/0.64.0" target="_blank" rel="noopener noreferrer">breaking changes in release notes</a> to know what this is all about.</p><p>If you are ready to move to ReScript naming, you can use all the new packages. Except <code>rescript-react-native</code>, other packages of this organisation have just been renamed for most of them, without any changes.</p><p>You can expects minor change between <code>reason-react-native@0.64</code> & <code>rescript-react-native@0.64</code> but this should not cause you any major trouble to switch.

You will probably notice some Js.t have been converted to record syntax, some polymorphic variants changes and minor things like that, but compiler should just tell you what to do.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="please-note-that-rescriptreact-is-required-for-switching">Please note that <code>@rescript/react</code> is required for switching<a href="#please-note-that-rescriptreact-is-required-for-switching" class="hash-link" aria-label="Direct link to please-note-that-rescriptreact-is-required-for-switching" title="Direct link to please-note-that-rescriptreact-is-required-for-switching"></a></h4><p>You cannot use <code>reason-react</code> and <code>@rescript/react</code> as they exposes the same module.

This means this will be "all or nothing".

Some bindings rely on <code>React</code> module, so they now depend on <code>@rescript/react</code>. This is true for <code>rescript-react-native</code> and some other modules.</p><p>This is briefly mentionned in <a href="https://github.com/rescript-react-native/rescript-react-native/releases/tag/0.64.1" target="_blank" rel="noopener noreferrer"><code>rescript-react-native@0.64.1</code> release notes</a> but you will also need <code>bs-platform@^9.0.0</code>.</p><p>Before you ask, <code>rescript</code> package is now a thing and up for testing (you can track this using the <a href="https://forum.rescript-lang.org/c/announcements/7" target="_blank" rel="noopener noreferrer">ReScript forum, Announcements section</a>). This is considered beta at the time of writing this post, so we will change this peer dependency in a near future, when it's officially stable. This will replace <code>bs-platform</code>, probably in next "major" release (0.65 or maybe a 0.64.x-rescript).</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="tldr">tl;dr<a href="#tldr" class="hash-link" aria-label="Direct link to tl;dr" title="Direct link to tl;dr"></a></h2><p>If you want to switch to the new naming, you need to be ready to use</p><ul><li>React 17 and <code>@rescript/react@^0.10</code></li><li>React Native 0.64 with <code>rescript-react-native@^0.64.1</code></li><li>ReScript 9 via <code>bs-platform@^9.0.0</code></li></ul><p>If you have any questions regarding these changes and how to proceed, feel free to <a href="https://github.com/rescript-react-native/rescript-react-native/discussions/new" target="_blank" rel="noopener noreferrer">open a discussion on GitHub</a>, or use <a href="https://forum.rescript-lang.org" target="_blank" rel="noopener noreferrer">ReScript forum</a>.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="wait-thats-it">Wait.. That's it?<a href="#wait-thats-it" class="hash-link" aria-label="Direct link to Wait.. That's it?" title="Direct link to Wait.. That's it?"></a></h2><p>You might have a question that is still pending: "where is gone the promise of cross-platform code that ReasonML was supposed to offer? I was thinking I could someday use my Reason React Native code to compile it to a lower level language that JavaScript to have blazing fast performance... "</p><p>Like I did in the past in my sweet dreams, you may be looking for this. And maybe this will be a reality one day in the future. Some people want this <em>JSX like</em> convenience to build native apps. Some will argue that there are things that you can use today.

But React Native ecosytem is more mature than existing solutions.</p><p>React Native can safely be used in production today, and it is for <a href="https://reactnative.dev/showcase" target="_blank" rel="noopener noreferrer">many successful companies</a>. All the modules availables (from the core or the community) make it very easy to avoid writing specific code per platform.

Performance is better and better for every release. Recently <a href="https://reactnative.dev/blog/2021/03/12/version-0.64" target="_blank" rel="noopener noreferrer">Hermes JavaScript engine was released for iOS</a> and it's <a href="https://callstack.com/blog/hermes-performance-on-ios/" target="_blank" rel="noopener noreferrer">really fast</a>. And don't forget <a href="https://github.com/react-native-community/discussions-and-proposals/issues/40" target="_blank" rel="noopener noreferrer">TurboModules</a>!</p><p>You can not only write mobile apps this days, but also web apps, thanks to <a href="https://necolas.github.io/react-native-web/" target="_blank" rel="noopener noreferrer">React Native for Web</a>, and even native desktop apps, thanks to <a href="https://microsoft.github.io/react-native-windows/" target="_blank" rel="noopener noreferrer">React Native Windows + macOS</a>. More than enough to ship amazing products to production, today.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="whats-next">What's next<a href="#whats-next" class="hash-link" aria-label="Direct link to What's next" title="Direct link to What's next"></a></h2><p>I guess for the near future, nothing crazy will happen for ReScript React Native. We have to update some bindings from time to time, but beside having to switch from <code>bs-platform</code> to <code>rescript</code>, things should go smoothly.

Feel free to <a href="https://github.com/rescript-react-native/rescript-react-native/discussions/new" target="_blank" rel="noopener noreferrer">open a discussion</a> if you want bindings for some modules (or just help to write them).</p><p>When stars are not correctly aligned and some package have incorrect bindings, remember that you can always use the fantastic <a href="https://www.npmjs.com/package/patch-package" target="_blank" rel="noopener noreferrer">patch-package</a> to fix things real quick, and then open an issue at the right place.</p><p>❤️ <em>I mostly maintain all this packages all by myself this days, so feel free to <a href="https://github.com/sponsors/MoOx" target="_blank" rel="noopener noreferrer">Sponsor Me on GitHub</a> and just <a href="https://twitter.com/MoOx" target="_blank" rel="noopener noreferrer">share kind words on Twitter</a> to keep me motivated</em>. I hope you enjoy this work like I do.</p>]]></content:encoded>

<category>hello</category>

<category>rescript</category>

</item>

<item>

<guid>https://rescript-react-native.github.io/blog/2019-06-17-hello-reason-react-native</guid>

<content:encoded><![CDATA[<p>Today is a big day for the ReasonML community as we are releasing the fruits of

a long effort started about 4 months ago.</p><p>As more and more people were starting to use ReasonML on production apps using

React Native, we wanted to make the ReScript / BuckleScript bindings for React Native,

known has <code>bs-react-native</code>, more accessible. This would have involved several

breaking changes in order to simplify some APIs that have been designed with a

high level of security in mind, but at some costs. The cost of being harder to

start with (for newcomers to ReasonML) as well as the cost in terms of code size

and performance.</p><p>While some of us were thinking about some simplifications, some others, involved

in Reason React incoming changes, directly started a new approach for this

bindings, following

<a href="https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks" target="_blank" rel="noopener noreferrer">the zero-cost approach offered by reason-react 0.7.0</a>.</p><p><a href="https://www.cca.io" target="_blank" rel="noopener noreferrer">CCA</a> started this effort on what is now know as the new

<code>reason-react-native</code> bindings, that eliminates a huge part of the additional

JavaScript code produced by the bindings.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="zero-cost">Zero-cost<a href="#zero-cost" class="hash-link" aria-label="Direct link to Zero-cost" title="Direct link to Zero-cost"></a></h2><p>By zero-cost, we means zero additional cost. The JavaScript code ReScript / BuckleScript

produces using this bindings will most of the time directly hit React Native

JavaScript code without creating an unnecessary abstraction above it 🙌.</p><p>Here are some random examples:</p><ul><li><a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/bs-react-native/src/components/ViewProps.bs.js" target="_blank" rel="noopener noreferrer"><code>bs-react-native</code> <code>View</code></a>

<a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/reason-react-native/src/components/View.bs.js" target="_blank" rel="noopener noreferrer"><code>reason-react-native</code> <code>View</code></a></li><li><a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/bs-react-native/src/style.bs.js" target="_blank" rel="noopener noreferrer"><code>bs-react-native</code> <code>Style</code></a>

<a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/reason-react-native/src/apis/Style.bs.js" target="_blank" rel="noopener noreferrer"><code>reason-react-native</code> <code>Style</code></a></li><li><a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/bs-react-native/src/platform.bs.js" target="_blank" rel="noopener noreferrer"><code>bs-react-native</code> <code>Platform</code></a>

<a href="https://github.com/reason-react-native/reason-react-native/blob/958cd4e3a5ffa303304a0b2404cd53b5f49e649f/reason-react-native/src/apis/Platform.bs.js" target="_blank" rel="noopener noreferrer"><code>reason-react-native</code> <code>Platform</code></a></li></ul><p>Some modules are even empty or with some minor <code>require()</code> that can be

themselves almost empty and easily removed by some JavaScript bundlers.</p><p>How cool is that?</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="but-why-reason-react-native-">But why <code>reason-react-native</code> ?<a href="#but-why-reason-react-native-" class="hash-link" aria-label="Direct link to but-why-reason-react-native-" title="Direct link to but-why-reason-react-native-"></a></h2><p><code>bs-react-native</code> already had multiple breaking changes in the past and we

didn't really want to offer a poor experience by creating a new release with

tons of changes that won't be easy to codemod (or would require much more work

from us).</p><p>On top of that, <code>reason-react</code> latest release already added an important

breaking change with

<a href="https://reasonml.github.io/reason-react/docs/en/jsx" target="_blank" rel="noopener noreferrer">JSX 3</a>.</p><p>That's why we had this idea about offering an easy and smooth transition by

offering 2 packages to say goodbye to <code>bs-react-native</code> without pain.</p><ul><li><code>bs-react-native-jsx3-compat</code> (0.11.1)</li><li><code>reason-react-native</code>

(<a href="/docs/install/#note-about-reason-react-native-version-number">0.60.0</a>)</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="wait-what-is-bs-react-native-jsx3-compat-">Wait, what is <code>bs-react-native-jsx3-compat</code> ?<a href="#wait-what-is-bs-react-native-jsx3-compat-" class="hash-link" aria-label="Direct link to wait-what-is-bs-react-native-jsx3-compat-" title="Direct link to wait-what-is-bs-react-native-jsx3-compat-"></a></h2><p><code>bs-react-native</code> is using JSX 2 so in order to use it with JSX 3 we would have

to create an additional layer on top of the current bindings to offer both JSX 2

and 3 bindings. And since we wanted to do away with some current APIs of

<code>bs-react-native</code> we started to think about a new approach.</p><p>We knew that we wanted to:</p><ul><li>offer to <code>bs-react-native</code> users a migration plan, so they can start very

easily to use JSX 3 and new <code>reason-react</code> (so they can use hooks),</li><li>offer new <code>reason-react-native</code> bindings, more accessible and with a zero cost

approach.</li><li>offer a smooth transition between these two packages so people can slowly

upgrade their codebase without having to make an insane PR that switches from

one to the other.</li></ul><p>We don't want your co-workers to hate you with a PR that comes directly from

hell 😅.</p><p>That's where we thought about offering <code>bs-react-native-jsx3-compat</code>. It's a

package that has the same APIs <code>bs-react-native</code> has but that uses

<code>reason-react-native</code> under the hood.</p><p><strong>This means you will have to make a migration from JSX 2 to 3</strong>. That's the

only thing you will have to do, then with a single change from <code>bs-react-native</code>

with <code>bs-react-native-jsx3-compat</code> in your <code>bs-dependencies</code> you will be ready

to use hooks and directly benefit of (almost) zero-cost bindings!</p><p>And since we care about you and don't want you to upgrade from JSX 2 to 3 by

hand, we got you covered with a script made with love to help you with that.</p><p><a href="https://reason-react-native.github.io/en/docs/migration/jsx3/" target="_blank" rel="noopener noreferrer">You will find all the required instructions to migrate from <code>bs-react-native</code> to <code>bs-react-native-jsx3-compat</code> in our documentation</a>.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="tldr">tl;dr<a href="#tldr" class="hash-link" aria-label="Direct link to tl;dr" title="Direct link to tl;dr"></a></h2><ul><li><code>bs-react-native</code> has now entered a frozen state and won't receive any upgrade</li><li><code>bs-react-native-jsx3-compat</code> allows you to use existing code based on

<code>bs-react-native</code> with <code>reason-react</code> 0.7.0 and JSX 3</li><li><code>reason-react-native</code> package contains the new bindings for React Native, that

offers more accessible APIs and that is almost zero-cost</li><li><a href="https://reason-react-native.github.io/en/docs/migration/jsx3/" target="_blank" rel="noopener noreferrer">We offer you an easy and smooth migration plan so you can start using <code>reason-react-native</code> and slowly say bye to <code>bs-react-native</code></a>.</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="thanks">Thanks<a href="#thanks" class="hash-link" aria-label="Direct link to Thanks" title="Direct link to Thanks"></a></h2><p>This required effort has been keeping us busy for weeks and wouldn't have been

possible without the following people:</p><ul><li>CCA team and especially <a href="https://github.com/cknitt" target="_blank" rel="noopener noreferrer">@cknitt</a> for leading us to

the right direction for the new zero-cost bindings and all the contributions

that come with this move</li><li><a href="https://github.com/sgny" target="_blank" rel="noopener noreferrer">@sgny</a> for all his contributions to the new bindings</li><li><a href="https://github.com/MoOx" target="_blank" rel="noopener noreferrer">@MoOx</a> for leading the effort, the compat layer and

the new website you are seeing here</li><li><a href="https://github.com/bloodyowl" target="_blank" rel="noopener noreferrer">@bloodyowl</a> for his magical

<a href="https://github.com/bloodyowl/reason-react-compat" target="_blank" rel="noopener noreferrer">reason-react-compat</a> layer

and

<a href="https://bloodyowl.github.io/blog/2019-04-19-an-alternative-migration-path-for-reason-react/" target="_blank" rel="noopener noreferrer">the alternate JSX 3 upgrade path</a>

that goes with it</li><li>all the people that helped us on Discord and GitHub in various code reviews

and improvements like the react native template (thanks

<a href="https://github.com/dawee" target="_blank" rel="noopener noreferrer">@dawee</a>)</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="whats-next">What's next?<a href="#whats-next" class="hash-link" aria-label="Direct link to What's next?" title="Direct link to What's next?"></a></h2><p>Now that <code>reason-react-native</code> is ready to be used and that our migration plan

is usable, we will probably be focused on documentation as lots of APIs and

Components need to be documented. We really want to offer the best developer

experience possible and that's definitely part of it.</p><p>👉Now it's time for you to check our

<a href="/docs/">Getting Started with Reason React Native documentation</a></p>]]></content:encoded>

<category>hello</category>

<category>reason</category>

</item>

</channel>

</rss>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

FilesExpand file tree

rss.xml

Latest commit

History

rss.xml

File metadata and controls