Slides for the LT done at 2017 ReactiveConf. It's mainly about how we have used routing at kodify.

1. React
and
7.5M Daily Users
@solilokiam
Miquel Company

2. sites
7
Daily Users
7.5M
Daily Requests
133M
served/month
8500TB+
hours of video/day
30000+
Videos
600000+

5. We are always looking for
New Talent…

6. Join us @kodify.io

7. 1 year ago

8. 1 year ago

9. Lessons Learned
Routing
SEO
Asset Management
Error Handling Logging
Styling
User Tracking
Session handling Caching
State ManagementSecurity
Code Splitting
Server side Rendering
Styling
Animations

12. Routing

13. Routing

14. Routing
{
name: 'home',
path: '/',
component: bundle.Home,
fetchData: dataFetcher.fetchHomeData,
},

15. Routing
{
name: 'favourites',
path: '/users/:username/favourites',
component: bundle.Favorites,
requireAuth: true,
},

16. Routing
<Link
to="video_listing"
params={{ sort: 'views', time: 'month' }}
>
...
</Link>

17. Routing
<a href="/videos?sort=rating&time=month">
...
</a>

18. Data Fetching

19. Data Fetching
<Router
{...this.props}
routes={routes}
onUpdate={this.fetchData}
/>

22. Async Data Fetcher
render() {
const { children, location } = this.props;
const { previousLocation } = this.state;
return (
<Route
location={previousLocation || location}
render={() => children}
/>
);
}

23. Async Data Fetcher
componentWillReceiveProps(nextProps) {
const nextLoc = nextProps.location;
if (this.hasNavigated(nextLoc)) {
this.setState({
previousLocation: this.props.location,
});
this.loadAsyncData(nextProps.location);
}
}

24. Async Data Fetcher
loadAsyncData(location) {
const { match, route } = routeMatcher(location.pathname, routes);
const { queryParams } = routeParamsExtractor(location);
asyncDataFetcher(
route.fetchData,
this.getStore(),
Object.assign(match.params, queryParams),
).then(() => {
this.setState({
previousLocation: null,
});
})
}

25. Thanks
@solilokiam
https://beta.porntube.com