Some slides were not posted.
Speaker: Jessica Kerr
Notes:
propTypes
- Something to look at for React- Flux, or better, Redux
Speaker: Jem Young
Notes:
- Just replace
var
withlet
.- 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).
- To import:
- 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();
- no
- Decorators
- Use them as a mixin?
@foo
export class MyComponent extends React.Component {
};
Speaker: Andrew Imm
Notes:
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?
Speaker: Julia Gao
Notes:
- War stories of testing with React. Standard woes while learning the test incantations.
- 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
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.
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
andlittleImage
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 waspromiseUser
. -
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
-
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.
Speaker: Nick Schrock
Notes:
- Need to map to GraphQL types.
resolve
maps App domain to GraphQL domain.isDeprecation
anddeprecationReason
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?
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.
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
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.
- Node introduced
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
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
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
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
- Can get creative as well: ranges are supported
- Cache invalidation can come from the server
- Easy to batch
- Easy to paginate
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)
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
andreact-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)
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
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
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}
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
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