Going cross-platform
with React

By Hugo Di Francesco

Artificial Labs
hugo@artificial.io
@hugo__df

Warning:

DRY Developer humour incoming

Hugo Di Francesco

@hugo__df

💜 Async

Too much async...

                
                  setTimeout(function(){
                    $('input').css({'color': '#fff'});
                  },
                  500);
                
              

Enough about me

What is the problem?

Cross-platform development:

  • Fast development
  • Cheap development
  • App performance

Pick two

Why do we even care about mutiple platforms?

A quick history lesson

Corporation-centered design

Money is king

Product requirements:

IE8

Desktop app

Punch-card interface...

I don't remember a time like this...

User-centered design

The user is king

(Modern) Product requirements:

Web
Mobile
Desktop

So we need three platforms (at least)

Do I know all three to a decent level?

Does anyone?

Usual solutions

Build x4 apps

Only build a web/iOS/Android/Desktop app

Only build a web app and put it everywhere

Drawbacks

Time/money cost

Business cost

UX cost

Who do we know that needs to do things fast and cross-platform?

Facebook - "Move fast and break things"

React

View library, built by Facebook

V in MVC

A Native JavaScript App

Does native ==> java || objectivec?

Since we all love JavaScript:
(native ==> java || objectivec) === false

Think of native code as "doesn't run in a webview (on a mobile device)"

A Native JavaScript App

Not Hybrid

Not Java

Not Objective-Cor Swift

Why JavaScript?

Code reuse
Fewer context switches
Over the air updates

Why React Native?

React

The problem React solves

UIs that are easier to reason about

State => UI

Android (Java) and JavaScript projects look surprisingly similar

              
                public class MainActivity extends Activity {
                  int counter = 0;
                  @Override
                  public boolean onCreateMenu(Menu menu) {
                    Button button = (Button) findViewById(R.id.button1);
                    button.setOnClickListener(new OnClickListener() {
                      @Override
                      public void onClick(View view) {
                        counter++;
                        button.setText(Integer.toString(counter));
                      }
                    });
                    return true;
                  }
                }
              
            
  1. Wait until app is loaded
  2. Attach a listener/handler combo
  3. When event is fired, execute handler
              
                window.onLoad = function(){
                  window.counter = 0;
                  var button = document.getElementById('button');
                  var handleClick = function(){
                    counter++;
                    button.innerHTML = counter;
                  }
                  button.addEventListener("click", handleClick);
                }
              
            
  1. Wait until window is loaded
  2. Attach a listener/handler combo
  3. When event is fired, execute handler

State vs UI

Every time counter changes we need to "manually" update all the elements that display it

Doesn't scale/increases headaches

Button?

              
                Button button = (Button) findViewById(R.id.button1);
              
            
              
                var button = document.getElementById('button');
              
            

Tight coupling but other half of the code is in another file

Doesn't scale/increases headaches

              
                class Button extends React.Component{
                  //ES6 syntax? I think so
                  constructor(props){
                    super(props);
                    this.state = {counter: 0;}
                  }
                  render(){
                    return (
                    
{this.state.counter}
) } handleClick(){ this.setState({counter: this.state.counter + 1}); } }

Component-contained State

Declarative UI: what, not how

Scales/fewer headaches

The way we build Android, iOS and Web apps is very similar.

They have the same advantages and drawbacks.

Using JavaScript is a win, using React is a bigger win.

The importance of the React API

The hardest part of learning iOS Development
3% Objective-C Syntax, 97% iOS APIs

Brandon Keepers, Ruby at GitHub, 2013

to build on mobile across three platforms, you need three different engineers because there are three different sets of tool chains, languages, and API’s

Christopher Chedeau on the Core Philosophies that Underlie React, 2016

React Native is more about writing native apps in React

than it is about writing native apps in JavaScript

Why?

Ruby guys at GitHub say it

PHP guys at Facebook say it

It must be true ;)

The API is a bigger deal than the language

Some features

The target platform as an implementation detail

You build the exact same way as for the web

  • Flex Box
  • Logic
  • Web APIs

There's more

React Native Web (react-native-web)

That's right

React Native and Web: 1 codebase

0 context switching

React Native checklist

1. Abuse high-level components


Abstract away platform-specific code

High-level components are portable

2. Use JSX styles

What?

As web developers we like our CSS

We're not talking about web development

Will fridges CSS? Does the terminal CSS?

4. Profit


Challenge: make a Web, Android, iOS app in no time

APIs you know, without a speed/performance tradeoff

The result

  • iOS
  • Android
  • ~Web

Your Other Options

  • NativeScript
  • Appcelerator/Titanium
  • RubyMotion not trolling

But...

The language doesn't matter, the architecture does

Dive In!!

http://facebook.github.io/react-native/

https://github.com/necolas/react-native-web

This presentation: talks.artificial.io/cross-platform-react

That checklist again

  1. Abuse high-level components
  2. Use JSX styles
  3. Profit

Thanks to the React contributors for making awesome things
and LNUG for hosting :)

Get in touch

HugoDF

We are looking for Developers:
team@artificial.io

Warning: we use PHP