Tweet
Tweet

Slide 1

Slide 1 text

Engineer Better Apps REACT NATIVE with

Slide 2

Slide 2 text

Nutshell.com @andrewa2 github.com/andrewsardone ANDREW SARDONE

Slide 3

Slide 3 text

CURRENT LANDSCAPE

Slide 4

Slide 4 text

LOTS OF PLATFORMS

Slide 5

Slide 5 text

USER EXPERIENCE

Slide 6

Slide 6 text

ALL NON-NEGOTIABLE Feels Good Bug Free Consistent Shipped

Slide 7

Slide 7 text

HOW DO PEOPLE DO THIS?

Slide 8

Slide 8 text

THEY DON’T ¯\_(ϑ)_/¯ or…

Slide 9

Slide 9 text

MASTER LOTS OF STACKS or…

Slide 10

Slide 10 text

DEPLOY MULTIPLE TEAMS

Slide 11

Slide 11 text

PROBLEMS? MORE CODE MORE COORDINATION MORE SILOS POOR DEVELOPER EXPERIENCE

Slide 12

Slide 12 text

Clients Server {} {}

Slide 13

Slide 13 text

{} {}

Slide 14

Slide 14 text

POOR DEV EXPERIENCE slow feedback loops

Slide 15

Slide 15 text

POOR UI DEVELOPMENT PARADIGMS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

SO WHAT’S REACT?

Slide 18

Slide 18 text

UI AS A PURE FUNCTION {}

Slide 19

Slide 19 text

BENEFITS PLAIN OL’ INERT DATA EASIER TO PERSIST EASIER TO TEST EASIER TO REASON ABOUT

Slide 20

Slide 20 text

https://twitter.com/andy_matuschak/status/560511204867575808

Slide 21

Slide 21 text

REACT NATIVE “Learn once, write anywhere”

Slide 22

Slide 22 text

Main Thread JS Thread class Component { render() { return ; } } NATIVE VIEWS JavaScriptCore Virtual Layout Send data to main thread

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Slide 26

Slide 26 text

NATIVE SIMPLE AUTO LAYOUT REACT NATIVE DATA, FLEXBOX

Slide 27

Slide 27 text

DEMO

Slide 28

Slide 28 text

SO… HOW DO I DO THIS?

Slide 29

Slide 29 text

CURRENT PROJECT pod 'React' compile "com.facebook.react:react-native:+"

Slide 30

Slide 30 text

START FRESH react-native init MyNewProject

Slide 31

Slide 31 text

Sources, Further Reading Why React Native Matters Khan Academy’s Mobile Code Sharing Strategies ECMAScript 6 git.io/es6features Why iOS developers should try React Native The Skeptic's Guide to React Native Beyond UXKit github.com/andrewsardone/glsec-2016-presentation