Skip to content

Instantly share code, notes, and snippets.

@hshoff
Created January 29, 2015 18:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hshoff/ba164dccb9fa97b33e59 to your computer and use it in GitHub Desktop.
Save hshoff/ba164dccb9fa97b33e59 to your computer and use it in GitHub Desktop.
react-native-live-slack-notes

3 pillars that make an app native:

  1. touch handling (edited)
  2. native components
  3. style & layout diving in to ReactKit in xcode you can pass in css props and the native element will translate setting the views happens in the main thread but that's the only thing happening in the main thread not transpiling js to obj-c running a real js engine (i think they are running js-call) hard to hear demoing "debug in chrome" from the iOS simulator chrome will run the same js engine websocket connect between ios simulator and chrome gives you better dev tools how do you style the native components? "css has problems" "we think we have a way to make it better. 'css in js'" "we believe colocating styles with js is a good idea" how it works? you have a style declaration var styles={movieTitle: {background: 'red' }}} then <Text style={styles.miveTitle}> (edited) on to layout the GPU only sees boxes that are full of pixels so all it is concerned with is making those boxes only computes 4 values: Top, Left, width, and height iOS autolayout has a constraint solver (moral of the story is FB didn't like how iOS does layout) So they looked at how the web does it: CSS Box Model They like FlexBox (woo flexbox!) problem is react native doesn't have a broswer so how do they have flexbox to iOS? they wrote their own JS implementation Reimplimented flexbox with all attributes in 2 weeks React Native only reimplements a subset of CSS bridge between JS and Obj-C is: Asynchronous, batched, and serializable ported JS implementation of flexbox in C and Java open sourced a few months ago at: https://github.com/facebook/css-layout there's a file watcher with react native hit save in JS file and iOS simulator updates don't have rebuild to see visual updates (this is huge) live coding JS (js css styles) updates the iOS app view (edited) react native has great expceptions not hidden in console you get a red screen of death with the problem really nice (edited) QA about build tools "copy and paste xcode project" and then something about an internal tool they use for building (edited)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment