React Amsterdam Conference

My personal summary in bullet points

Recording of the live stream available here.

I marked my favorite talks with a 🌟

Max Stoiber @mxstbr 🌟

  • Talking about the difference between smart and dumb components
  • Use containers (= smart components) for data fetching/logic => How things work
  • Use dumb components for styling: How things look
  • Use Max’s “Styled Components” for styling, this removes the mapping between CSS and components.
  • Using the following syntax:
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
  • Eye opener for me: h1 is just a function and the content between the backticks are its arguments! So the following someFunction`color: “red”` is the same as someFunction([‘color: “red”’]).
  • You can use props to style components
  • Use ThemeProvider for theming your React application
  • The mixins you use in LESS of SASS (like lighten) are just functions
  • Use Polished if you want to use a ready made solution for this.

Max is a great speaker and his talk about styled components really convinced me. This might really be the best way to do css styling in React.

His talk start at: https://youtu.be/m_vUUgI0bo8?t=56m21s


Jessica Chan, @missyjcat

  • Works at Pinterest
  • Migrating Jinja/Python to Node and Nunjucks to React
  • They need to do server side rendering for React for SEO purposes
  • 2014, first create an interim stack to get to React
  • Now (2017): first phase is done, now progressively updating templates and client to React
  • Great talk and speaker. Really shows how hard it is to move an “old” codebase to a new framework, there so much you have to consider.

Stefano Masini, @stefanomasini

  • Based in Amsterdam
  • Alternative to REST, less network usage, nice way to describe data.
  • Three categories: Query, Mutation, Subscription
  • Apollo, Relay: dealing with server, caching etc.
  • Tip: Use a hexagonal architecture: import module only at one location with an adapter in place so you can swap out the library and/or adapt to changes.
  • Error management example how to throw an error:

Lightning talks

  • Robert Haritonov from Zoover
  • SSR = server side rendering
  • Example solution: Electrode from Walmart
  • Better response time: from 200ms to 15ms
  • Other solution: Raspscallion from Formidable

  • Andrey Okonetchnikov @okonetchnikov 🌟
  • Member of #ReactViennaMafia like Max Stoiber
  • Talks about “Making linting great again”
  • Linting: use husky to run precommit hook for repo, this also scales to other developers working on the repo.
  • Linting: lint-staged only check staged files
  • Use eslint — fix to automatically fix errors before committing
  • You can also use prettier — fix for code beautification!
  • A quick search on Github for “fix linting” and “fix indentation” reveals that this really is a common issue: https://github.com/search?utf8=%E2%9C%93&q=fix+identation&type=Commits

Or take a look at this much better graphical summary by Pavithra Kodmad


  • Feather Knee, @featherart
  • Lift up state
  • Use setState
  • If/when using a state manager, use MobX (not redux)
  • React-select, react-icon

Michele Bertoli @michelebertoli 🌟

  • Jest: works with TypeScript!
  • Snapshot testing: takes a picture (or actually text snapshot). Use this for component testing, but also to review any changes you made to the component are okay.
  • Styled components (from Max Stoiber, see above) with Jest: You need a module to track any style changes.
  • Use jest-styled-components to match snapshots for this.
  • You can use codemon to migrate to Jest, from e.g. mocha
  • Snapguidist: create style guide for components
  • Storybook, storyshots, same idea
  • Automatically create test from error: react-fix-it. (this last one sounds to good to be true).

Slides: https://speakerdeck.com/michelebertoli/test-like-its-2017

Talk starts at: https://youtu.be/m_vUUgI0bo8?t=8h29m20s


Nick Graf @nikgraf

  • Friend of Max Stoiber, member of #ReactViennaMafia, talks about ReactVR
  • Works for serverless, autoscaling apps on servers
  • WebVR, access to VR devices from browser
  • See webvr.info for instructions
  • A-FRAME webgl automatically adds VR
  • use react-vr-cli to get started

Michel Weststrate @mweststrate 🌟

  • This talk was an eye opener for me as well: it would be so nice from a testing perspective to build an app where the view layer is completely separate from the rest of the application. This separation of concerns is well known, (Model-View-Controller pattern) but I’ve never seen such a clean separation as in Michel’s demo of a simple book store app. To prove his point he showed you could navigate through the entire app using just the console! Will definitely give MobX a try.
  • Can we make the view layer dumb enough that we can still use the app without a view layer?
  • Yes we can: check book store demo: https://github.com/mweststrate/react-mobx-shop/tree/react-amsterdam-2017
  • Fetch data from actions
  • Url changes should be actions, activating store methods
  • Testing user flow becomes easy completely without UI!
  • Free egghead course on MobX

Slides: http://divideandconquer.surge.sh/


Forbes Lindesay

  • Talks about static typing with Flow
  • Static analysis better than unit tests. Advantages:
  • 100% coverage
  • Built in documentation for every function, always up to date
  • Catches incorrect assumptions
  • Helps make refactor safe, easier
  • Type mixed: means you don’t intend interact with it
  • CoVariant is just a fancy word for Readonly
  • Using T let’s you tell Flow that a function returns same Type