React Amsterdam Conference
My personal summary in bullet points
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`
- 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:
- 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 🌟
- Wrote a book about React: React Design Patterns and Best Practices
- Talks about tests, works for Facebook
- New testing pyramid
- 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).
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
- 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