React libraries

  • Redux (1.0 RC) Flux inspired architecture: https://github.com/gaearon/redux
  • React Router (1.0 beta) Ember-inspired router that enables nested views, lazy loading, animations, and not breaking the back button: https://github.com/rackt/react-router
  • FormatJs react-intl Internationalization date, time, string utility library supported by Yahoo: https://github.com/yahoo/react-intl
  • Babel Transcompiles future version of JS like ECMAScript 2015 and 2016 into ES5 that you can use today in the browser. Officially used by React to transcompile from JSX to JS.
  • Jest (by Facebook) Helper library built on top of Jasmine testing framework that auto-mocks, detects specs, and helps test async code. Doesn't seem very popular and when I briefly tried using it, it runs quite slowly: https://github.com/facebook/jest
  • React Native Targets mobile platform (iOS and eventually Android) instead of the web: https://github.com/facebook/react-native
  • Webpack Module loader (seems like the most popular in the React community and works particularly well with React Router for lazy loading): http://webpack.github.io/

Solutions to hard parts of web apps

  • Managing UI state. Good solution through unidirectional data flow as popularized by React and Flux (although these concepts can be applied to other frameworks like Angular).
  • Offline-capable / Persistence. When a user goes offline, will it send updates after they reconnect? What if they close the browser and re-open it, will it persist the changes to local storage?
  • Good mobile performance & responsive design. The first part is making sure that even on a less powerful computer like a smart phone (particularly for phones like cheaper Androids) your web app has a reasonable load time. The second part is having a design that's responsive to various dimensions of the viewport.
  • Scaling your data store / database. When you first start out, you can use something as small as SQLite, and then you can use dedicated VMs to host a database like MySQL, Postgres, or MongoDB. Managing a very large dataset will usually require a special solution but things like AWS Aurora are making it more accessible to every development team.
  • Monitoring & health in production. Keeping your web apps running smoothly in production requires sophisticated tooling (sometimes homegrown or open-source projects) but more often using dedicated solutions like New Relic, Loggly, and so on.
  • A/B testing & measuring business metrics. I separate this from monitoring because for more monitoring is more about getting very timely information (e.g. within the last 10 minutes) of how fast your response times, and how many errors you have received. Measuring is more about looking at which parts of the product have the biggest impact on the business. The most obvious KPI is revenue - can you attribute a set of features to an improvement to revenue? Mixpanel seems like an increasingly popular choice for this.
  • Continuous integration & deployment. Few people will disagree these are good practices, yet they are practiced consistently in most places. Using an open-source tool like Jenkins, Go.cd, or Buildbot or a solution like CircleCI, Codeship, and so on can help address this. Dropbox is developing a very interesting solution on Mesos but it's still highly experimental (https://github.com/dropbox/changes)
  • Cross-browser compatibility.  Subtle things break amongst the four different browser vendors like a button that can't be clicked on. The reactive solution is to use a tool like Sauce Labs or Browser Stack to automate cross-browser and the proactive solution is to use a battle-tested framework like Bootstrap or Foundation. While those popular frameworks will deal with most issues, you will still probably need to do some sanity checking to make sure your site is OK across browsers.
  • I18n. Scaling an app from just US to a truly global product takes a lot of effort. First, you need to get translations done (risky to rely on automatic translations using a service even like Google's). Second, you need to properly detect locale and display the right strings of text to users. Finally, you need to QA that the translations really work, which is hard to QA well with an English-speaking staff.

Links on Facebook Relay

Videos

React.js Conf 2015 - Data fetching for React applications at Facebook by Jing Chen / Daniel Schafer. Introduction video to GraphQL and Relay.


Mutations and Subscriptions in Relay by Laney Kuenzel. A dive into how the Relay framework makes it simple for developers to implement mutations (data writes) and real-time updates. 

Note: I'm still waiting for JSConf US 2015 to actually release the video. The speaker notes are quite detailed but I think it would be a lot easier to understand with the actual talk :)


Joseph Savona - Relay: An Application Framework For React at react-europe 2015 Follow-up talk on Relay. 


Articles

https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html

Notes on React: Up and Running

Notes from React: Up and Running (I purchased the early release book, use WCYAZ coupon code to get 50% off):

  • React.DOM shows you a list of HTML elements that you can use as React components
    • Ex: React.DOM.h1(DOMAttributeObject, childComponent, e.g. a textString)
    • This is just another way of doing React.createElement("h1", DOMAttributeObj, childComponent)
  • Special DOM attributes
    • className - because 'class' is a reserved keyword in JS
    • htmlFor - because 'for' is a reserved keyword in JS
    • style - cannot pass string, use JS object
      • Properties must be camel cased (e.g. fontFamily instead of font-family)
  • React.render(component, DOM location)
  • Render is the only required method for a React component
    • Must return only a single DOM node
  • componentFactory = React.createFactory(Component); component = componentFactory()
  • Treat this.props as read-only; it should only be changed by having new properties passed in from parent component
  • Treat this.state as read-only; it should only be changed using this.setState()
  • this.propTypes allows you to do run-time validation to make sure you received the expected types for the properties passed in
    • ex: React.PropTypes.func.isRequired - see full list on React's docs
    • Shows a warning in console only during development mode
    • you can have additional properties in addition to propTypes (which is optional having at all)
  • DOMAttributeObject
    • <h1 className="{willStyles}" onChange="{this._changeHandler}">
  • React does event handling for you because doing it by hand has several issues:
    • Inconsistencies between browsers (hence the need for libraries like jQuery)
    • Event Delegation - to improve performance you listen to one parent element and then figure out which sub-element was clicked.
  • Lifecycle Methods
    • First-time loading:
      • componentWillMount(): before render()
      • componentDidMount(): after initial render() and node is on DOM
    • Updating:
      • componentWillUpdate(object nextProps, object nextState): before render() and changes are on the DOM
      • componentDidUpdate(object prevProps, object prevState): after render() and changes are on on the DOM
      • componentWillReceiveProps(object nextProps): if you need to do this.setState on receiving new props
      • shouldComponentUpdate(object nextProps, object nextState): for performance reasons (use immutable-js)
    • Removing:
      • componentWillUnmount(): before a component is unmounted from the DOM
      • componentDidUnmount(): after a component is unmounted from the DOM
  • Parent-child component lifecycles:
    • Parent will mount or update
    • Child will mount or update
    • Child mounted or updated
    • Parent mounted or updated
  • Mixins are a way of extending methods from one object to another in JS
    • example: mixins: [mixin1, mixin2]
  • JSX is just syntax sugar. Using '{' and '}' inside of the HTML-like syntax allows you to use Javascript. For example: <a className="{jsObjWithStyles}">text</a>
    • Must close every tag (e.g. <br />
  • Best way of commenting JSX: { /** **/ }
  • HTML to JSX (https://facebook.github.io/react/html-jsx.html)
  • React automatically escapes HTML tags
  • Spread operator for React reduces boilerplate:
    • var attributes = {href="google.com", styles={font: 14px} }
    • Instead of: render( return <a href={attributes.href} styles={attributes.styles}>)
    • Just do: render( return <a {...attributes}>)