react.js challenges with reflux architecture, server-side rendering, testing at netcom's...
TRANSCRIPT
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”!