@@@ @@@ @@@ @@@ @@@
# e2e modular architecture at the BBC 4th June 2015 — [web2day](http://web2day.co)
# Node + React + Docker… *Hype* Driven Development? ~~~~ It is more than just names. It is about concepts, common concept. And actually the language does not matter much. @@@ ## State + immutability + functions It's all and only about that. ~~~~ How are they related? And are they a concern to the previous concepts? @@@ ## `stdin` + `stdout` + `stderr` It's all and only about that. ~~~~ How are they related? And are they a concern to the previous concepts?
## Bonjour,
I am **Thomas** [thom4.net](https://thom4.net) – [@thom4parisot](https://twitter.com/thom4parisot) {.footer} @@@ ![Pardon my French](../../images/pardon-my-french.jpg) @@@ ## BBC R&D [github.com/bbcrd](https://github.com/bbcrd) [bbc.co.uk/rd](http://bbc.co.uk/rd) @@@ ![Full Stack JavaScript](../../images/javascript.png) [thom4.net/node.js](https://thom4.net/node.js) @@@ ![Sud Web](../../images/sudweb.png) [sudweb.fr](http://sudweb.fr) @@@ ~~~~ And photography.
## BBC R&D Some additional context. @@@ # *Multi-disciplinary* team Engineering, UX, design, science etc. @@@ # Prototyping Iterate, *analyse*, explore. @@@ # Pivot Stakeholders, partnerships, user study *findings* etc. @@@ # Quality ~ *flexibility* ~~~~ Both are important. We need both. @@@ # *Flow* > block ~~~~ You don't want to be pushed back by your code design. You want to bin code because you want it, not because you need to rewrite it.
# Example @@@ ![](images/webapp-demo.gif) @@@ # Webapp - Web interface - Visual elements - Data interface - Web Application - Host system - Host machine ~~~~ It is more than a single page you push over FTP.
# #1 Browser @@@ ![](images/browser.png) @@@ ```bash open 'http://localhost:3000' ``` @@@ ## `stdin` = URL @@@ ## `stdout` = screen buffer @@@ ## `stderr` = *Aw snap* ![](images/aw-snap.jpg) @@@ ## State = *navigation controls* `Cmd + R`, URL, Save as… @@@ ## Reproducibility = *varies* Static vs. dynamic, Web application changed or not, DNS outage, in memory data etc.
# #2 UI Element @@@ ![](images/ui-element.png) @@@ ```javascript import Component from './lib/Cover.jsx' React.render(Component, { … }) ``` @@@ ## `stdin` = state data @@@ ## `stdout` = React Element Renders as HTML, DOM tree. @@@ ## `stderr` = *varies* Syntax, runtime. @@@ ## State = *predictable* It is only a JavaScript object. @@@ ## Reproducibility = *exact* Same data should guaranty same behaviour. @@@ ```javascript exports Cover extends React.Element { render(){ let className = this.state.active ? 'active' : ''; return (

{this.props.title}

); } } ``` @@@ ## browserify! Scoped assets, isolated transforms. @@@ ```javascript // index.js require('./stylesheet.scss'); module.exports = { Cover: require('./lib/Cover.jsx') }; ```
# #3 WebApp @@@ ![](images/webapp.png) @@@ ```bash PORT=3000 npm start # static -p ${PORT:-5000} --gzip dist/ ``` @@@ ## `stdin` = env variables @@@ ## `stdout` = i/o HTTP responses. @@@ ## `stderr` = *varies* HTTP error codes, SEGFAULT, network misconfiguration. @@@ ## State = *varies* In memory, data store, ephemeral files. ~~~~ Nothing guarantees its integrity. @@@ ## Reproducibility = *should* Same args should produce same result. Depends of integrity. @@@ ## `npm install` Cannot be guaranteed. ~~~~ Package version can be deleted, semver madness, registry can be down. @@@ ## `npm shrinkwrap` Guarantees exact same version. @@@ ## `npm pack` Guarantees exact same artefacts.
# #4 Container @@@ ![](images/dockerfile.png) @@@ ```bash docker run -ti -p 5000:5000 bbcrd/webapp ``` @@@ ## `stdin` = env variables, `VOLUME` @@@ ## `stdout` = i/o HTTP responses. @@@ ## `stderr` = *varies* Same as Webapp + Docker bugs. @@@ ## State = *predictable* Data store, `VOLUME`, container to image, void containers. @@@ ## Reproducibility = *exact* (re)start from predictable point. @@@ ## `docker {push,pull}` Move install state over network.
# #5 System image @@@ ![](images/system-image.png) @@@ ```bash vagrant up packer build aws ec2 create-image ``` @@@ ## `stdin` = env variables @@@ ## `stdout` = file a.k.a. *Golden image*. @@@ ## `stderr` = *varies* Linux exit codes. @@@ ## State = *predictable* Mountable filesystem and executable environment. @@@ ## Reproducibility = *exact* (re)start from predictable point. @@@ ## Chef, puppet, Ansible? Reproducible provisioning. Consecutive provisioning does not guarantee state though.
# #6 Machine @@@ ```bash aws ec2 run-instances --image-id=... --user-data=... aws ec2 create-tags --tags ... --resources i-... ``` @@@ ## `stdin` = machine tags, user data @@@ ## `stdout` = i/o Network connections, local filesystem. @@@ ## `stderr` = *varies* Guru meditation, monitoring alerts, internal logs. @@@ ## State = *mostly predictable* Load and app issues will interfere (like memory leaks, memory swap etc.). @@@ ## Reproducibility = *exact* If from immutable image. @@@ ## Chef, puppet, Ansible? Install time increased, state not guaranteed.
@@@ # Wrap up @@@ # Composition *Add* and *combine* — no implicit expectation. @@@ # State *Explicit* over implicit. @@@ # Functions Simplest interface. Their internal state does not leak. Reproducible from input/arguments. @@@ # Artifacts Immutable and *solid assets* are best to deploy. Easier to transfer. Easier to reproduce. @@@ # Automation / packaging / *provisionning* More important than monolith vs. microservice sterile debate. @@@ # Mono-myth Balance of *flexibility* and *explorability*. @@@ # Data layer Maintain the data state *outside of the app* stack. ~~~~ And if no data layer, provide an API client package.
~~~~ Although we talked about programming, humans are also good at repetition. As human beings, we need variables and variability to maintain our sanity, and to sustain a good *state* of mind.
# Merci 👍 (en Français dans le texte) @@@