Easy React Native using Expo - SingaporeJS - Mar 2017

Slide 1

Slide 1 text

Easy React Native using Expo 16th March 2017

Slide 2

Slide 2 text

I’m Simon JavaScript and React Enthusiast Founder at KodeFox Twitter: @sstur_

Slide 3

Slide 3 text

Expo Expo enables you to build high quality native iOS and Android applications using React Native and deploy effortlessly. (previously Exponent)

Slide 4

Slide 4 text

Expo is open source and free and built-on Facebook’s React Native.

Slide 5

Slide 5 text

Expo Writing an Expo app is like writing a React Native app, except you never need to open Android Studio or Xcode and you don’t even need a Mac.

Slide 6

Slide 6 text

… and deployment is a breeze.

Slide 7

Slide 7 text

What is React Native Lets’ start with:

Slide 8

Slide 8 text

React Native •Similar to React on Web but without the browser DOM •No HTML, no CSS, no browser •Easy to build Cross Platform

Slide 9

Slide 9 text

React Native •High performance compared with other cross- platform frameworks •Exceptional developer experience compared with native iOS/Android •Easy to get started for web developers

Slide 10

Slide 10 text

React Web vs React Native

Slide 11

Slide 11 text

We could do a whole presentation on why React Native is awesome. … but this talk is about Expo

Slide 12

Slide 12 text

Expo Expo is essentially a set of tools around React Native. • Creating projects • Easy access to native features (e.g. push notifications) • Building and Running on Devices (!!)

Slide 13

Slide 13 text

How to Expo 1) Install the XDE on your computer (Mac, Win or Linux)

Slide 14

Slide 14 text

How to Expo 2) Open your favorite editor and hack on some code.

Slide 15

Slide 15 text

How to Expo 3) Send a link to any device.

Slide 16

Slide 16 text

This is where the Magic happens.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

We can run a native app effortlessly. (as easy as loading a webpage)

Slide 19

Slide 19 text

Let’s try it now…

Slide 20

Slide 20 text

The Expo client is like a browser but for native mobile apps.

Slide 21

Slide 21 text

What’s included in the SDK: Everything React Native provides, PLUS: • Audio • Simple Push Notifications • QR code reader • Accelerometer • Map View • Video • Camera / Image Picker • SVG • Location services • Social Login

Slide 22

Slide 22 text

So what about publishing my App?

Slide 23

Slide 23 text

Publishing Several Options: • Publish on the Exponent platform. • Build a standalone app for submitting to the App/Play Store • Detach to get a normal React Native app.

Slide 24

Slide 24 text

Bonus: you can push OTA updates to your published app.

Slide 25

Slide 25 text

When to use Expo: Expo is super useful for: • Easily sending clients a demo of your app during the early/middle phase of development. • Rapid Prototyping • Learning / Teaching without messing with Xcode or compilation steps

Slide 26

Slide 26 text

But some people use it throughout the entire dev process.

Slide 27

Slide 27 text

When to use React Native instead • Expo does NOT allow custom native code. • Everything must be written in JS and use the features provided in the Expo SDK • If you need to write custom native code, detach and use React Native.

Slide 28

Slide 28 text

Thanks for Listening! simon@kodefox.com github.com/sstur @sstur_