React at NetComnettbutikk.netcom.no

Intro on us● Alex York

○ Bouvet

● Jakub Holy○ Iterate

● Jakob Lind○ Freelance

Project goalsEnable business to experiment & change the

site with rapid idea-to-prod time.

In-house site with co-located developers.

Ultimately, increase conversion rate and revenue.

Stats + key info● Traffic? Revenue? Large!

● 2 Pages, 17 Components, 1 Store● LOC: 1,400 client + 1,200 server

○ Not the whole WebShop!

● Summary: We <3 React. It is so simple, compared with other frameworks.

Technology/libraries● React + Reflux *● Node + Express● NPM as build tool (no grunt, gulp, etc) *● Webpack *● Jest Mocha, Chai + plugins, Sinon (, Proxyquire) *● lodash● react-mini-router● Promise● LESS CSS● Slowly introducing ES6 in frontend

Challenge + Solution #1Stores and Actions

● Initially we had many Stores○ Resulted in too many Actions○ Which led to complexity

● Big refactoring: aligned the Stores with data○ Not the UI

Challenge + Solution #2Server-side renderingImportant for customer-facing sites (SEO).● Online examples were too simple.● We had data. Getting data into Store. How?

○ Webpack hides modules○ Caching of require()’d modules.

● Solution: expose a fn(data) > App.jsx > Store

Challenge + Solution #3Jest / TestingGood in theory, weak in practice.● Runs slowly (100s ms - few s / test)● Few developers => node 0.10, Jasmine 1.3,...● Mocking causes problems● User un-friendly communication● Weird bugs, non-standard require, ...

Challenge + Solution #3Jest / Testing: SolutionMocha, Chai, Sinon, (Proxyquire)● Fast (~3s the whole suite)● Elegant promise testing● Very nice output, clear it.only indication● Sinon: mock time, HTTP, …● Chai: chain assertions, custom err msgs, ...

What now?● Project was a success!

○ Continue with React: more features/pages○ React is spreading further in NetCom

● Immutable.js

● Omniscient● More ES6, iojs when AWS supports it, ...

Thanks!Questions? (At the end?)

PS: NetCom is hiring for our project, “RapidShop”!