React Native was released as open source software by Facebook. Apps built in React Native feel native without the cost of native development.

React Native was released as open source software by Facebook. Apps built in React Native feel native without the cost of native development. Coroma produces mobile applications for iOS and Android devices with a unified development effort.

Other hybrid solutions penalize apps with sluggish user experiences, and limited functionality. By allowing mobile developers to share a unified codebase with React Native, we are able to reduce the risk, time and resource costs associated with developing two separate mobile applications per project, and spend more time developing robust, battle-tested features while retaining a native experience. 

React Native is used by large organisations including Facebook, Instagram, Airbnb, Skype and more, and has a vibrant developer community with regular new releases.

Setup

Getting setup to work on a React Native project

At each step it’s important to read through the website for each thing you’re installing to understand what features they provide.

  • Install Atom code editor, and the Nuclide extension. Once Nuclide is installed, from the Atom/Nuclide settings ensure you check the box that installs all of its optional dependencies. This will provide proper syntax highlighting for everything etc.
  • Follow the instructions on to install the React Native CLI tools.
  • Install the Forcereact tool from Salesforce which enables you to create either a Salesforce login enabled React Native project.
  • Install react-native-debugger which is a nice stand-alone debugger alternative with a bunch of tools built in to make debugging React and Redux easier.

When starting a new project with Salesforce, it’s easiest to create the project using forcereact as it bundles in all of Salesforce’s templates for Android / iOS and gives you a basic working starter template to work with in React. It is also possible to create non-Salesforce projects using the standard React Native CLI tool.

Building a React Native App with Salesforce integration

When building a React Native application with Salesforce, instead of using create-react-native-app or react-native-cli to create a project, you should use the npm package forcereact created by Salesforce. Relevant documentation and instructions on how to do this is provided by the link above.

import {oauth, net, smartstore, smartsync} from ‘react-native-force’;

The above import provides most of the Salesforce methods a mobile application will need including the ability to query APEX REST endpoints and authentication methods.

Note, you cannot use the browser-based force.js library, you need to use this React Native specific library which interfaces directly with the native Android / iOS mobile library.

The initially generated project contains some example code showing how to perform a basic query using the net module, and authentication.

Essentials Summary for a React Native app

Two (incomplete) example projects exist where we were learning how to use React Native.

Example 1: CFA Demo

    

Example 2: CCForce-Phone

CCForce-Phone is a more complete example and has more learnings over the CFA demo as it actually shows some calls to Salesforce for data, but is still incomplete as of writing. As a starting place for learning React Native based on our learnings so far, I would highly recommend reading this document and then opening up CCForce-Phone in Atom and exploring the code and trying to understand how it works. Without spending a decent amount of time with Javascript and React it will seem quite foreign as it is a different way of approaching mobile development to traditional Android, and iOS.

There are still more things to learn without a doubt. Here are my recommendations so far.

Managing application state and business logic – Redux

Redux, linked below in useful libraries, and the patterns it enables are the standard for managing most of your application state with React Native. With redux, your application state is stored in a plain javascript object, and as things (actions) occur in your app (button presses, REST request triggered, REST request response received, etc), a new state object is created each time to replace the previous one. Creating a new state object each time means you can easily inspect and replay the state of your application at any point in time. Updates to this state object then propagate to any components that depend on all or some of this state object. Redux allows you to cleanly separate all of your UI logic/state from your business logic/state. It can take a moment to wrap your head around it as it’s a different way of building up application state than you might typically encounter in Android / iOS, however it makes a lot of sense and is very easy to deal with once you’ve got some experience with it.

Source: https://www.ibm.com/developerworks/library/wa-manage-state-with-redux-p1-david-geary/index.html

The basic flow of redux goes as the above diagram:

  • Your component will create an action from, for example, a button click to login or pull some user data from Salesforce. Each action performs some behavior and will always have a type and optionally a payload (the result of an API request).
  • The action with its type and optional payload goes to the redux dispatcher, who passes the action to your reducers.
  • Your reducers take the action type and optional payload, as well as the current state, and based on the action type and any optional payload it will produce a completely new state or retains the existing state if no change is to be made. For example, a state variable indicating that you are fetching data from an API may be set from false, to true. Or, the action payload may be inserted into the state object so your components can use the data in a list. You will likely have multiple reducers, and the action will typically visit each reducer producing a new application state each time. After your reducers have processed the action, the newest state object is passed to the redux store.
  • The redux store is responsible for maintaining the latest state object, and sharing it with your components. The store takes the state produced by your reducers, and notifies all redux state-enabled components of any relevant changes. Your components that rely on particular state variables will now automatically update based on these state variables.

It’s a bit of a mouthful to explain in any detail, it’s much easier to deal with than it may sound, my recommendation is just to look at some example code and read the redux tutorial on the official website that is linked below. Redux is in my opinion currently the best way to manage the state / business logic of your react-native applications so it deserves a large portion of your attention.

Critical Learnings

  • Redux should only be used for major application state i.e. the state of async calls (fetching, loaded, failed) and other things that have a large impact on any of your components states, especially if it impacts and should be available to multiple components.
  • React comes with its own in-built component specific state management mechanism that you should use for basic state management i.e. the state of some minor UI interaction that is not impacted specifically by some global state. By keeping the global Redux application state as clean as possible you keep the global state object smaller, and minimize the number of reducers you need, which means a faster app.
  • Read up on correctly manipulating your state object within reducers. It is important you always create a completely new state object including any arrays, and do not store any references in the new state object to the old one. Each state should be entirely new even if it contains most of the same old values. There are libraries such as immutablejs which can help ensure you do this correctly. 

Recommended reading: https://redux.js.org/basics

Redux-Saga

Redux-saga is a must-have extension of redux that is used to make handling side effects, particularly async side-effects (api calls, disk stuff), way easier to deal with and very easy to test. It also allows for a consistent error handling methodology across your different library or api calls. In my opinion, it’s a better alternative to redux-thunk which aims to solve the same kind of problem, which you would probably be using in any application that did not include redux-saga. As soon as you need to perform asynchronous calls in your react-native application, you should add redux-saga. In our case, that is generally immediately as we need to call Salesforce REST api’s. A working example of redux-saga existing in the ccforce-phone app. I strongly encourage having the redux-saga documentation open while developing as there are many ways of doing things with it.

Recommended reading: https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html

Enable ESLint and use Airbnb’s linter rules

Install the ESLint / React plugin for Atom. Enable ESLint’s Airbnb rules (See CCForce-Phone for an example). This will provide some generally solid warnings within Atom to help you avoid both style and some logical errors.

BuildKite / Fastlane

The CCForce-Phone project has a working example for building both Android and iOS on the Mac Mini build server. See the fastlane/Fastline file in the build folder.

Folder Structure

Below is a typical folder structure for a React Native app, but you’ll most likely add more subfolders as relevant, particularly for tests.

Main

— index.js (Entry point to your React Native application i.e. main)

— app.js (The root component of your React Native app)

— android (React Native android project)

— assets (Any assets i.e. images, additional json configs)

— fastlane (Buildkite / Fastlane config)

— ios (React Native ios project)

— src/ (All other components besides App)

— src/actions (Redux Actions)

— src/components (All components besides App, organized in subfolders)

— src/components/common/ (Components that can be re-used across all Coroma apps)

— src/reducers (Redux Reducers)

— src/sagas (redux-saga sagas)

— src/store (Redux store)

Useful Libraries

Recommended Courses

 

-James

Leave a Reply

Your email address will not be published. Required fields are marked *