Why React Native is Different

May 06, 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


// CalendarManager.m
@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