Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
REAL-WORLD REACT
NATIVE & ES7
JOE STANTON / RED BADGER
CAVEATS...
REACT NATIVE
1,903 COMMITS LATER...
COOL FEATURES
ES6/7 Compatibility
Continuous Delivery (!)
LONDON REACT
MEETUP APP
ES7 TRANSPILATION
JSTRANSFORM -> BABEL
Template Strings
Modules
Classes + Class Properties
Arrow Functions
Async/Await
Dec...
.BABELRC
ASYNC/AWAIT
GOODBYE, CALLBACK HELL.
ASYNC/AWAIT
async _fetchAttendees() {
const apiKey = process.env.MEETUP_API_KEY;
const eventId = 223123000;
const url = `h...
PROMISES, CALLBACKS
RCT_EXPORT_METHOD(readUTF8FileAsync:(NSString *)filename
resolver:(RCTPromiseResolveBlock)resolve
reje...
HIGHER ORDER
COMPONENTS
WITH ES7 DECORATORS
(COMPONENT, DECORATOR) ->
HIGHER ORDER COMPONENT
@PureRender
class Talks extends React.Component {
render() { ... }
}
CONTINUOUS
DEPLOYMENT
10 DAYS -> 1 MINUTE
3.3.2 An Application may not download or install executable
code.
...
The only exception to the foregoing is scripts and c...
CONTINUOUS
DEPLOYMENT
Ship app with Bundle
On launch, download latest bundle (if possible), and stash
it for offline use
B...
DEMO!
Commit to Master
CircleCI runs react-native bundle --minify
CircleCI pushes the bundle to S3
Changes deployed...
THANKS!
@joe_stant
https://github.com/JoeStanton/london-react
Upcoming SlideShare
Loading in …5
×

Real World React Native & ES7

2,720 views

Published on

Not very useful slides on my React London talk on React Native, ES7 and hot code loading.

Published in: Technology
  • For those looking for React Native, open source, bigger then a toy example, but yet succinct enough to wrap your head around it, you might try my React-Native starter mobile app, Snowflake, a iOS and Android app with a single code base: see https://github.com/bartonhammond/snowflake. The application is fully testable with Jest with over 86% coverage. Snowflake supports Hot Reloading of its state. Snowflake uses CI with Bitrise.io and has extensive docs and 45+ min of video demonstrating the CI implementation. For those wanting a jump start with React Native, this might be a valuable resource. Note: I am the developer.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Real World React Native & ES7

  1. 1. REAL-WORLD REACT NATIVE & ES7 JOE STANTON / RED BADGER
  2. 2. CAVEATS...
  3. 3. REACT NATIVE 1,903 COMMITS LATER...
  4. 4. COOL FEATURES ES6/7 Compatibility Continuous Delivery (!)
  5. 5. LONDON REACT MEETUP APP
  6. 6. ES7 TRANSPILATION JSTRANSFORM -> BABEL Template Strings Modules Classes + Class Properties Arrow Functions Async/Await Decorators
  7. 7. .BABELRC
  8. 8. ASYNC/AWAIT GOODBYE, CALLBACK HELL.
  9. 9. ASYNC/AWAIT async _fetchAttendees() { const apiKey = process.env.MEETUP_API_KEY; const eventId = 223123000; const url = `https://api.meetup.com/2/event/${eventId}?key=${apiKey}&sign=t let json; try { let response = await fetch(url); json = await response.json(); } catch(e) { AlertIOS.alert('Failed to fetch attendees'); } this.setState({attending: json.yes_rsvp_count}); }
  10. 10. PROMISES, CALLBACKS RCT_EXPORT_METHOD(readUTF8FileAsync:(NSString *)filename resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) let contents = await readUTF8FileAsync('my-file.txt');
  11. 11. HIGHER ORDER COMPONENTS WITH ES7 DECORATORS
  12. 12. (COMPONENT, DECORATOR) -> HIGHER ORDER COMPONENT
  13. 13. @PureRender class Talks extends React.Component { render() { ... } }
  14. 14. CONTINUOUS DEPLOYMENT 10 DAYS -> 1 MINUTE
  15. 15. 3.3.2 An Application may not download or install executable code. ... The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore
  16. 16. CONTINUOUS DEPLOYMENT Ship app with Bundle On launch, download latest bundle (if possible), and stash it for offline use Boot App
  17. 17. DEMO! Commit to Master CircleCI runs react-native bundle --minify CircleCI pushes the bundle to S3 Changes deployed...
  18. 18. THANKS! @joe_stant https://github.com/JoeStanton/london-react

×