SHARING CODE BETWEEN

REACT AND REaCT-NATIVE

THE GOOD, THE BAD & THE UNSHAREABLE

bene@theodo.co.uk
Ben Ellerby

Types of Code

UI Render

Business Logic

Configuration

API / Formatting

DIFFERENT RENDER ENVIRONMENT

  • Different render environments:

 

<div> != <View>

<ul> != <FlatList>

UI Render

ui rENDER coDE

UI Render

  • React-Native-Web (no longer supported by Twitter and SSR issues)
  • ReactXP (SSR issues and have not seen a project using it successfully)
  • styled-components/universal (Same SSR issues as React-Native-Web and too experimental)

Styled-components

UI Render

Visual primitives for the component age.

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
`;

Styled-components

/universal

UI Render

Styled-components

/universal

UI Render

Builds off React-Primitives

"Primitive React Interfaces Across Targets"

  • Animated
  • StyleSheet
  • View
  • Text
  • Image
  • Touchable
  • Easing
  • Dimensions
  • PixelRatio
  • Platform:(iOS, Android, Web, Sketch, VR,...)
  • TextInput

https://github.com/lelandrichardson/react-primitives

Styled-components

/universal

UI Render

Styled-components

/universal

UI Render

Sketch

React

React-Native

Styled-components

/universal

UI Render

Note that this is an experimental release: There might be bugs and there also isn’t a massive amount of documentation

Styled-components

/universal

UI Render

ui rENDER coDE

UI Render

I believe that Web, Mobile Web and Native Application environments all require a specific design and user experience.

It’s worth noting that we’re not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”

Types of Code

UI Render

Business Logic

Configuration

API / Formatting

Types of Code

API / Formatting

API calls, authentication and formatting of request & response data.

 

 

 

If we make a POST to a REST API on web, it's the same POST on native.

Types of Code

Config files, translation files and most constant data is not render environment specific.

 

If I update a translation on my app, it's likely I want that changed rolled out on my site too.

Configuration

Types of Code

Shared Config Object

Native Config Object

{

    ....,

    foo: "bar",

}

Web Config Object

Configuration

Types of Code

Again environment independent.

 

If a user can only add 20 items to their basket, this rule will hold true in web and native equally.

Business Logic

Types of Code

UI Render

Business Logic

Configuration

API / Formatting

State Management & Data

+

State Management & Data

+

  • sagas
  • translations
  • analytic event firing...
  • product data
  • search
  • pagination...

State Management & Data

UI

Render Environment Independent

Our whole redux store is shared

Our Apollo queries are shared 

Higher Order Components

HigerOrderComponent

WrappedComponent

props: { foo: "bar" }

props.foo //bar

Higher Order Components: Apollo

import React from 'react';
import { Query } from 'react-apollo';

const withData = (query) => WrappedComponent => {
  return props => (
    <Query query={query}>
      {injectedProps => 
            <WrappedComponent {...injectedProps} {...props} />};
    </Query>
  );
};

export default withData;

Higher Order Components: Apollo

All Apollo query HOCs are shared:

 

e.g. withSearchResults, withBasket, withProducts

Conditional Rendering

renderIfAuthorised
import React from 'react';
import { connect } from 'react-redux';
import { compose, branch, renderComponent } from 'recompose';
import { getUserPermissionSets } from 'login.selectors';

const mapStateToProps = state => ({
  userPermissions: getUserPermissionSets(state),
});

export default (permission, UnauthorisedComponent) =>
  compose(
    connect(mapStateToProps),
    branch(
      ({ userPermissions }) =>
         !userPermissions.includes(permission),
         renderComponent(UnauthorisedComponent),
    ),
  );

APPROACH To Sharing

MadeNative

MadeWeb

MadeShared

APPROACH To Sharing

MadeShared

   /hoc
      /queries
      /conditional-rendering
   /config
      /translations
      /colours
   /types
   /api
   /redux
      /actions
      /reducers
      /selectors
      /sagas

APPROACH To Sharing

var path = require('path');
module.exports = {
  entry: './shared/index.js',
  output: {
    path: path.resolve(__dirname),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'shared'),
        exclude: /(node_modules|bower_components|build)\//,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
          },
        },
      },
    ],
  },
  externals: {
    react: 'commonjs react',
    'react-apollo': 'commonjs react-apollo',
  },
};

Webpack config to transpile to commonjs2

MadeShared

APPROACH To Sharing

...
  "dependencies": {
    ...
    "made-shared":
      "git+https://AUTHTOKEN:x-oauth-basic@github.com/REPO/made-shared.git#master-1.05",
    ...
...
  • Using basic x-auth tokens of a 'bot' user with read-only access
  • Using git tags as versions (#BRANCH-VERSION)
  • `yarn link` for local dev

APPROACH To Sharing

...
  "dependencies": {
    ...
    "made-shared": "1.5.1",
    ...
...

Staying Generic...

Staying Generic...

 

4 Weeks with one change to the shared library!

App Center!

MadeNative

We use AppCenter as our App CI

 

It needs to pull the shared library, but it's private...

App Center!

Me: Hello, we’re wanting to have a shared library used in our project. This would require an npm install from a private NPM repo (through package cloud). What is the best practice for adding a private npm access on the AppCenter CI?

MadeNative

App Center!

Microsoft: We currently only support cloud git repositories hosted on VSTS, Bitbucket and GitHub. Support for private repos is not available yet but we are building new features all the time, you can keep an eye out on our roadmap for upcoming features.

MadeNative

App Center!

MadeNative

Conclusion

  • Code sharing is a great advantage of React & React-Native
  • Share your non-design render code.
  • Your app and web app should have a different UX
  • HOCs help share component logic
  • Publishing a private npm package creates a good workflow

Conclusion

  • Multi Repo approach can help the team build a mental model of code sharing

ben@ellerby.tech

https://www.linkedin.com/in/benjaminellerby/

Made with Slides.com