from 0 to universal react in production
in 4 months
EZ PZ
AuchanDirect
traditional e-commerce
website
Auchan:D
web app focusing on
customer experience
(react) single page application
web server
web browser
<html>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>empty DOM with script tag
huge javascript file
API server
react universal application
web server
web browser
<html>
<body data-reactid="18">
<div id="react-root" data-reactid="19">
<div class="app" data-reactroot="" data-reactid="1" data-react-checksum="-2052352663">
Hello world!
</div>
</div>
<script src="/client.bundle.js" data-reactid="21"></script>
</body>
</html>full DOM with script tag
huge javascript file
API server
server.jsx
client.jsx
shared code
react universal codebase
How to deliver value as fast as possible ?
- dev
- deploy
- learn
- repeat
dev fast, don't break anything
- developer experience: hot reload
- state management: redux + immutable.js
- lint: eslint + eslint-plugin-react
- test: mocha + expect + enzyme + sinon
- test coverage: karma + isparta
trunk based development
- only one shared branch
- release from trunk, roll forward
github flow
trunk based development
build once, run anywhere
- webpack: client & server bundles
- docker
- ansible
how do we learn?
- new relic for monitoring
- sentry for crash reports
- aircall to let our customers call us directly
results from march to june
- 1 to 4 developers (wanna join?)
- 1 branch
- 1 universal app
- 100+ orders
questions
universal-react
By bastoche
