Switching between React and React Native [EN]

We talk about JavaScript. Each month in Warsaw, Poland.

Speaker

Piotr Zientara

Switching between React and React Native [EN]

2018-09-12

@Piotr_Zientara

Presentation Plan and assumptions

  1. No stories on suffering!

Let's go!

Why React Native?

We know how to write in React!

Know how to write action creators and reducers

Have concepts for functional components, class components and containers

Facebook support

React Native is a framework!

Other Benefits

Quickly prototype layouts in a tight loop with UI designers

Reuse JS business logic code for the native app

Iteration without a compile cycle

Flux architecture!*

Where can we start?

Excellent documentation

Know how to write action creators and reducers

Have concepts for functional components, class components and containers

React Native is a framework!

Summon your enthusiasm!

Chess Clock app was a great success!

but had no dependencies...

and was rewritten from a JavaScript app

Homework for ambicious listeners!

Risks

Deploy might not work out

Dynamic development of the technlology

Finding libraries, dependecies

Mobile is different from Web

Slower rebuids

Deploy needs 3rd person approvement

You need a stronger machine

Excellent error messages

We want fun! Show us some code!

JS injection in WebView

            
      <WebView
        {...props}
        javaScriptEnabled
        injectedJavaScript={injectedJavaScript}
        source={source ? source : html ? { html } : url}
        ref={x => {this.WebView = x;}}
        onMessage={e => onMessage(e)}
        />
            
        

JS injection in WebView

            
    const injectedJavaScript = `(${String(() => {
      document.querySelectorAll('a[href][target="_blank"]').forEach( link => {
        link.onclick = (e) => {
          e.preventDefault();
          window.postMessage(JSON.stringify({
            href: link.href
        }))};
      })
    })})();`;
            
        

Why not React Native?

In complex apps knowledge of native languages is indispensable

Wins versus Objective-C / Java, but today it fights against Swift / Kotlin

Airbnb is dropping RN

Why Airbnb is dropping RN?

Refactoring was too hard and it was too late to use TypeScript

Libraries always support one platform in a better way

They had to use and maintain their own fork of RN

They ended up in maintaining 3 different versions of the app

React Native for Mobile is like Rails for Web

You'd love to have the problems that rise from this technology limitations, because this means you have millions of users and are rich enough to rewrite your app!

Sources

  1. React Native Documentation
  2. Articles
  3. Tutorials

Thank you for your attention!

See you next month at WarsawJS