Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

jarretmoses

RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.50 -  watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.63 - watchman watch-del-all && rm -rf node_modules && npm install && rm -rf /tmp/metro-* && npm run start --reset-cache

npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

markerikson

[10:57 PM] acemarke: so, the canonical "bad perf for React+Redux" example is a todo list of 10,000 items
[10:58 PM] Sinistral: I always thought passing an object through was just a typical JS pointer
[10:58 PM] acemarke: the trivially obvious store shape is a single array of all 10K todo objects
[10:58 PM] acemarke: with a single connected list component
[10:58 PM] Sinistral: eh, ignore me, finish
[10:59 PM] acemarke: the list's mapState retrieves the array, and the list component renders this.props.todos.map(todo => <TodoListItem todo={todo} /> )
[10:59 PM] acemarke: which works fine the first time around
[10:59 PM] acemarke: but if you edit, say, the "text" field in a single todo
[11:00 PM] acemarke: your reducer returns a new updated todo object inside of a new array reference, shallow-copied
[11:00 PM] Sinistral: You are re-drawing the enti...oh

abhiaiyer91

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:

remarkablemark

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

longtimeago

How to squash commits in a GitHub pull request

o you've contributed some code to an open source project, say, Rails. And they'd like you to squash all of the commits in your pull request. But you're not a git wizard; how do you make this happen?

Normally, you'd do something like this. I'm assuming upstream is a git remote that is pointing at the official project repository, and that your changes are in your 'omgpull' branch:

andrey-skl

To run on ios:

1. Install XCode (recommended) or XCode command line tools by xcode-select --install
2. Into XCode settings, go to "Downloads" tab and download iOS 9.2 emulator
3. Compile native app and run it on simulator via npm run ios

To run on Android:

1. Set up Android environment
2. Create emulator via npm run android-emulator-create
3. Run emulator via npm run android-emulator
4. Compile native code and run it on emulator via npm run android

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

chenglou

key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:

• Clone state

<Comp key={1} /><Comp key={1} />

• Preserve component state across different parents:

chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't