Skip to content

Instantly share code, notes, and snippets.

@zzz6519003

zzz6519003/2015-react-rally.md

Forked from LoganBarnett/2015-react-rally.md
Created February 25, 2016 14:01
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 zzz6519003/1c7b499c7eabf7516817 to your computer and use it in GitHub Desktop.
Save zzz6519003/1c7b499c7eabf7516817 to your computer and use it in GitHub Desktop.
Download ZIP
Notes from the 2015 React Rally conference.
Raw
2015-react-rally.md

React Rally

Github link to these notes

Some slides were not posted.

Keynote

Speaker: Jessica Kerr

Notes:

  • propTypes - Something to look at for React
  • Flux, or better, Redux

Elegant React

Speaker: Jem Young

ES6

Notes:

  • Just replace var with let.
    • Not hoisted. In the 'dead zone'.
  • const must be initialized
    • Immutable as the value/reference itself. Properties are still mutable.
  • modules
    • To import: import <modulename> from '<filename>;
    • To export: export myObj;
    • static analysis is easy to do on ES6 modules
    • Circular dependencies Just Work(tm).

React

  • Toss imports into an index.js
  • Icky classes are here to stay for React.
  • strict mode is always on now.
  • Arrow functions auto-bind in classes (only case where this works?).
  • Destructuring is the hotness
    • const {foo, bar} = {foo: 1, bar: 2};
    • const [foo, bar] = ['foo', 'bar'];
export class FooComponent extends React.Component {
    constructor() {
        super();
    }
}
  • Spread - wut? I think this is like splat. Example was weird.
  • Rest - varargs essentially. Can be used with destructuring
    • const [x, y, ...others] = [x, y, z, a, b, c];
  • Arrow functions
    • no arguments object. this is bound to where it is defined, not where it's used.
    • One line uses implicit return: (foo) => foo.toString();
    • Destructuring with arrow: ({foo}) => foo.toString();
  • Decorators
    • Use them as a mixin?
@foo
export class MyComponent extends React.Component {

};

Bringing Observable Data to React

Speaker: Andrew Imm

Notes:

Parse

A means of syncing data with a server. I think. Heavy reliance on Observables.

  • Observables are automatically cleaned up.
  • Mostly about pub/sub benefits I guess?

Testable React Components

Speaker: Julia Gao

Notes:

  • War stories of testing with React. Standard woes while learning the test incantations.

Slack notes

  • Jest is slow for even trivial apps. Read on a blog post but confirmed from several people in slack.
  • Lots of people happy with redux after checking out flux and reflux.
  • TestUtils still favored by some.
  • shallowRenderer

How is React Functional?

Speaker: John K. Paul

Notes:

  • Unidirectional data flow is inherently something React does.
  • The virtual dom is essential to this unidirectional flow.
  • Oh yeah, we should gzip our css/js resources on top of minification.

What is GraphQL?

Speaker: http://twitter.com/leeb

Notes:

  • Mobile first as a change in design philospohy

  • Must ask for exactly what you want, but recursively.

    • Can pass additional properties (only give images of this size, order by this field, etc).
    • Can also alias fields (gimmie bigImage and littleImage instead of asking for an array of all of them, or whatever).

  • Can ask for everything you want up front and get it back all at once

    • Less need to combine multiple async callback handling!

  • Addresses issues sprouting from server-client coupling, such as server versioning.

  • Not really related - saw a async function prefixed with promise, which is verby and thus a decent function name prefix. Actual example was promiseUser.

  • Can query for meta information (types, structure)

    • Server provides the schema to the client so that it can verify the server will understand a request before sending it

  • JS implementation

  • Ruby implementation

  • Spec is also published for other impls to make.

  • GraphiQL is a GraphQL testing tool that allows you to type in a query and view real results. Has auto complete to assist as well. Autocomplete shows docs. Highlights errors and provides reasons.

Graph QL Servers

Speaker: Nick Schrock

Notes:

  • Need to map to GraphQL types.
  • resolve maps App domain to GraphQL domain.
  • isDeprecation and deprecationReason mark fields for deprecation, and remove it from docs despite still working until actually removed.
  • System highly favors easy concurrency: GraphQL server -> data source requests if not dependent on each other can be made at the same time
  • Queries are validation
  • Possible to wrap a rest server.
    • This minimizes the number of outer requests and allows the GraphQL server and rest endpoints, if in the same data center for instance, to make very quick, low latency requests/responses

Questions to ask the speaker:

  • How do we avoid monolithic systems in GraphQL?

Syncing stores using socket streams

Speaker: Abhinav Rastogi

Notes:

  • Flux dispatch stuff - use one-way data flow.
  • Uses sockets.io to send actions from the server directly to the client using the same mechanism for handling events as the rest of the application
    • Have to be careful that the same server-emitted events are not sent back to the server. This will cause an infinite loop.
  • Not apparent how this is any different than any other event system.
  • Two phases used, I think. Helps build abstrations.

Making small modules actually work with webpack and npm

Speaker: Lin Clark

Notes:

  • Package != module
  • "Not labeled for individual sale"
  • Idea: Modules shouldn't be about reusability, but readability (or better - reasonability). It breaks down the problem into a really small part to help focus on the problems.
  • Cohesion - modules belonging together.
  • Coupling - interdependency between modules.
  • Webpack libraries allows nested bundling.
  • Basically, you want the dependencies in a package to be self-contained or self-declared. Don't require both jQuery and some jQuery plugin, just require the plugin.
  • Showed a cool css generation thing (styles applied per element ): <MyComponent style={styles.foo} />
  • Create an npm link to your component. If there's a shared lib (say React), both will have their own version. React expects to be a singleton. This is a problem.
  • Component should use a fallback to the app's node_modules

Interoperable CSS

Speaker: Glen Maddern

Notes:

  • Possible to change the human interface without changing the machine interface.
    • Node introduced require which made zero syntax changes but change the landscape of how modules are made today. Apply this to CSS.
  • ICSS
  • :import and :export directives addd as syntax
  • Perfect gif timing. Just perfect.
  • Options to target styles:
    • #document .content span - nested stuff. Don't nest.
    • .do-some-styling-thing-to-a-single-thing - better, but still ick.
    • Local vars in CSS would be teh awesome.
  • import styles from './submit-button.css'; => styles.normal
    • Because styles are used like Javascript objects and set directly on elements, they never leak into other styles
  • Instead of a name like .SubmitButton--normal, just use .normal.
  • Webpack does this, and creates unique class names.
  • Possibly use file path and line numbers for the class names - good for debugging?
  • Misspelled class names would probably set the class undefined, which is better than you just figuring out why your styling hasn't been applied.

Aside:

Good design should lead you to good practice.

Good abstractions should save you cognitive load

Animated

Speaker: Christopher Chedeau

Notes: All for React Native.

  • Using caching/memoizing to improve performance.
    • Why is performance an issue?
    • Suspect animation is a React Native artifact. CSS animations wouldn't have this problem.
  • Lots of work done to tear down listeners before doing updates and the like. Setting up databinding - it felt very un-react like.
  • When using setState to render animations, it can be very slow:
    • React wants to batch updates, which fights smooth animations
    • Animations want to update constantly, which fights React's rendering model
  • Options to get around React's batching render model:
    • Data-binding, not great, and speedup is not necessarily worth it
    • Manipulate the DOM by yourself, setting up safeguards in your component's "should update" method (risky, but best performance)
  • If you don't need it, it's overkill to try the above methods

Exponent - a React Native Development tool

Speaker: Charlie Cheever

Notes:

  • Things that are good for moving faster:
    • One language for everything - helpful
    • Dynamic programming language - this is not true - not all type systems are created equal
    • Rapid and frequent deployment - essential
    • Easy to test and easy to try stuff out - yes
    • All energy in one version of code - yes
  • Exponent is a (limited) React Native app repository you can upload your app to.
    • Intended for work in progress apps to be shown to other people.
    • Once anyone has an Exponent app, you can send them a link, and your Exponent app will open from there immediately

Falcor: Simplifying your data

Speaker: Brian Holt

Notes:

  • Local and remote data is treated the same.
  • Caching, cache invalidation, etc handled. and fine-grainly configurable
  • Framework agnostic.
  • Can query data using a string to address it 'stuffs[1].otherStuff.foo'
    • Can get creative as well: ranges are supported movies[0..20].title
  • Cache invalidation can come from the server
  • Easy to batch
  • Easy to paginate

React and Web Audio API: Building a MIDI interface

Speaker: Peter Piekarczyk

Notes: Can create custom waveforms. The knobs that can be turned are many: hz, attack, decay, sustain, etc. No need to transmit rasterized music files such as mp3. They can be composed on the fly.

In React you can make an Oscillator component and it will do the stateful setup of the audio API. Don't forget to tear down the audio stuffs when done.

Speaker has a lib that handles some of this already

Misc:

I think I just found my new favorite ES6 feature:
    console.log({myVar});
No need for extra typing in
    console.log('myVar', myVar)

React and WebGL

Speaker: Ricky Vetter

Notes:

  • Apps with many, many components will become slow to render and re-render
  • WebGL can do this very quickly, but it doesn't support the same rendering model as React (which does batching where possible, and WebGL does the opposite!)
  • React3(three?) and ReactCanvas to integrate
    • Can be heavyweight and opinions can clash between React and Three.
    • Still cumbersome, and best performance was when they could render on requestAnimationFrame precisely
  • React is being split into react and react-dom as of 0.14.
    • a "react-webgl" may very well appear and may make react <-> webgl interop easier (because presumably it would not reason about rendering like a DOM)

Flux for Data Visualization: A Preliminary Manifesto

Speaker: Jana Beck

Notes:

  • D3 great for doing data-viz in JS.
    • Gets procedural when interaction starts to come in.
    • SVG stuff needs manual z-ordering.
    • Don't have D3 do DOM stuff like put down tooltips. Have a list of data to tooltip and it trickles down to a react component or handled by d3 declaritively.
  • Data viz
    • Figure out the intersection between two things
    • What you have vs what you want?
    • Typically one of the two things is time (x over time). Depends on application.
  • crossFilter is a library that sees a lot of use alongside D3.
  • The hierarchy you impose in your Flux app can make a huge difference
    • Separating out "what the user wants to see" into its own, top-level store made reasoning about the app easier in its various, complex states

Connection Lost...

Speaker: Jakob Dam Jensen

Notes:

  • AppCache is picky and has a cumbersome format
  • Local storage is the intended for offline use but only in a pinch
  • Lots of wrappers - localAccess isn't pleasant to use.
  • Much easier to read offline than write online
  • Got a couple of recommendations for IndexedDB
    • Still needs to be wrapped, as not all browsers support it
  • Closing the browser kills the state
  • Adding a web page to the app list kills the state on iOS!
  • Service workers are attempting to fix the lost state problem
  • HTML5 File API

Flow or: How I learned to stop worrying and typecheck my React code!

Speaker: Jeff Morrison

Notes:

  • Bleh, linters.
  • He thinks null is ok. He's young and still discovering the world, so we'll let it slide.
  • Type annotations - I don't think they are ES6. Custom stuff for flow?
  • In a very Facebook way, Flow comes to terms with the fact that it has to write a lot of dynamically typed code.
  • Flow does what it can to do type checking over exising code.
    • Attempts to type what it can
    • Warns you when it sees common problems ("sometimes returns a string, number, or null")
    • Plugs into React with propTypes for even more type checking
function size(input: ?string): number {
    ...
}
  • Disjoint Unions: Basically ADT from functional programming
type BinaryTree =
    { kind: 'leaf', value: number } |
    { kind: 'branch', left: BinaryTree, right: BinaryTree}

Migrating critical apps to React

Speaker: Jamis Charles

Notes: Not really sure what to pull from this.

  • PayPal moved an import app from an old C++/XML code base to React
  • Try to move exactly the smallest, most insequential part possible first
  • Gradually add more pieces build on that tiny cornerstone

How React literally waters my lawn

Speaker: Dave Smith

Notes:

  • lols
  • now is mutable. Poll that stuff.
  • All compiled into a single file, incluing css and imags
  • It may not be the wild, wild west any more, but you can still shoot from the hip
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment