Universal Web Apps

Universal Web Apps 101

• Code is shared between client and server
   
• Both client and server can render all pages (HTML)
   
• First request is loaded as HTML from the server
  • Subsequent pages are rendered client-side

Pros

• Faster first render
   
• No "skipping" as things eventually load
   
• Works on all devices!
  • … no need for JS!
     
• Better Search Engine Optimisation (SEO)

Tradeoffs

• Much more complex server
   
• Node lock-in
   
• react-dom/server isn't great; FB doesn't use it
   
• Requires Babel for JSX

UWA

Server-side rendering w/React

const React = require('react');
const ReactDOMServer = require('react-dom/server');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
 
const html = ReactDOMServer.renderToString(
  <MyComponent />
);

https://www.npmjs.com/package/react-dom

Progressive Web Apps!

Progressive Web Apps 101

• Progressive enhancement (use features if they're available)
   
• Backed by Service Workers
  • Offline support with storage like IndexedDB
  • Push notifications
  • Background data sync
  • Geofencing (in the future)
     
• Act like native apps
  • Add to home screen
  • Share via URL (no need for app store)

Why aren't we seeing tons of PWAs?

http://caniuse.com/#search=service%20worker

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

There is hope!

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

React Native!

React compiled for apps!

• Build an app with familiar React code!
   
• Android + iOS
   
• Components compile to native widgets, not WebView
   
• Great developer tools with Hot Reloading

Native bridge

• Develop stuff natively if you need to
  • Android SDK (Java)
  • Objective-C/Swift (iOS)
     
• Bridge it together with JS
   
• We're going to just use JS

Separate code for iOS & Android

• (If you want it)
   
• file-name.ios.js | file-name.android.js
   
• Useful for native components
   
• Design guides differ!

https://developer.apple.com/design/

https://design.google/

Style a component!

https://facebook.github.io/react-native/docs/style.html

Flexbox

https://facebook.github.io/react-native/docs/flexbox.html#content
 

http://flexboxfroggy.com/

DEMO: Hello RN!

Holy crap this works in

the browser too!

https://github.com/necolas/react-native-web