Why React Native is Different May 6, 2015

I gave this talk at a local JavaScript meetup in Richmond, VA on May 5th and recorded it using screencasting software. The sound quality is poor, but it's still very watchable. Check this out if you want a good explanation for why React Native will change how you write native mobile apps, and how the web can learn from it. To the women readers/watchers: I apologize for saying "guys" in a few places referring to groups of people ("Facebook guys"), it's a habit I'm still trying to break.

This post is actually my slides as well, so you can scroll through all of them below if you don't want to watch the video.

Why React is Different

React is a Library for Building User Interfaces

Separation of Concerns = MVC

... Really?

Components

state.post.title = "...";

Change the UI??

Object.observe(state.post)

state.post.author.name = "James";

UH OH

render :: state -> UI

DOM (and Virtual DOM) is an implementation detail

Getting Started

$ npm install -g react-native-cli

$ react-native init my-project

$ mkdir react-native-cli

$ cd react-native-cli

$ npm install react-native

Creates basic Xcode iOS project that builds and links with React Native's code

View

Text

ListView

ScrollView

TextInput

NavigatorIOS

(many others)

Flexbox

HTML APIs: fetch

StyleSheet.create({})

Incredible Debugging

The iOS<->JS Bridge and 60 FPS Interfaces

@implementation CalendarManager RCT_EXPORT_MODULE(); @end

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location) { RCTLogInfo(@ "Pretending to create an event" ); }

var CalendarManager = require ( 'NativeModules' ).CalendarManager; CalendarManager.addEvent( 'Birthday Party' , '4 Privet Drive, Surrey' );

A Better Web?

May the Cinco Be With You