cqrs, react, docker in a nutshell

138
CQRS, REACTJS, DOCKER IN A NUTSHELL Andrea Giuliano Claudio D'Alicandro Simone Di Maulo

Upload: claudio-dalicandro

Post on 23-Jan-2018

647 views

Category:

Engineering


4 download

TRANSCRIPT

Page 1: CQRS, React, Docker in a Nutshell

CQRS, REACTJS, DOCKERIN A NUTSHELL

Andrea GiulianoClaudio D'Alicandro Simone Di Maulo

Page 2: CQRS, React, Docker in a Nutshell

NEW AMAZING PROJECT

Page 3: CQRS, React, Docker in a Nutshell

WE CAN WRITE IT FROM SCRATCH

Page 4: CQRS, React, Docker in a Nutshell

BUT

Page 5: CQRS, React, Docker in a Nutshell

immagine manager incazzato

WE NEED IT IN A VERY FEW TIME

Page 6: CQRS, React, Docker in a Nutshell

AND

Page 7: CQRS, React, Docker in a Nutshell

IT SHOULD BE

Page 8: CQRS, React, Docker in a Nutshell

WTF!

Page 9: CQRS, React, Docker in a Nutshell

WHERE DO WE START?

Page 10: CQRS, React, Docker in a Nutshell

COMFORT ZONE

Page 11: CQRS, React, Docker in a Nutshell

DOMAIN

▸ data come from and go to external entities

▸ users can configure to send a subset of data

▸ users send data based on their plan

send data from a source to a targetGOAL

Page 12: CQRS, React, Docker in a Nutshell

THE DOMAIN

▸ unpredictable data structures

▸ ad hoc workflow for each vendor

▸ variable number of steps

▸ handle rate limits from different vendors

▸ handle different error cases from different vendors

▸ handle business-oriented limits (based on plans...)

▸ some tasks need to be done asynchronously

Page 13: CQRS, React, Docker in a Nutshell

IDEA

Page 14: CQRS, React, Docker in a Nutshell

BLACK BOX REASONING▸ identify the main entities involved

▸ define a common input and output

▸ find a way to let things talk

INPUT OUTPUT

Page 15: CQRS, React, Docker in a Nutshell

FROM BLACK BOXES TO BOUNDED CONTEXTS

Page 16: CQRS, React, Docker in a Nutshell

DEPENDENCIES INFRA BC

MODEL

APPLICATION

PRESENTATION

Page 17: CQRS, React, Docker in a Nutshell

PROJECT DIRECTORY TREE

Page 18: CQRS, React, Docker in a Nutshell

APP DIRECTORY TREE

Page 19: CQRS, React, Docker in a Nutshell

INFRASTRUCTURE DIRECTORY TREE

Page 20: CQRS, React, Docker in a Nutshell

INSIDE THE BOUNDED CONTEXT

Page 21: CQRS, React, Docker in a Nutshell

BC DIRECTORY TREE

Page 22: CQRS, React, Docker in a Nutshell

BC APPLICATION DIRECTORY TREE

Page 23: CQRS, React, Docker in a Nutshell

BC MODEL DIRECTORY TREE

Page 24: CQRS, React, Docker in a Nutshell

BC PRESENTATION DIRECTORY TREE

Page 25: CQRS, React, Docker in a Nutshell

EVERYTHING'S AWESOME

▸ the framework is an implementation detail

▸ the directory structure is explicit

▸ the domain is isolated

Page 26: CQRS, React, Docker in a Nutshell

WE DON'T WANT TO MESS THINGS UP

Page 27: CQRS, React, Docker in a Nutshell

DON'T MESS UP THINGS

Page 28: CQRS, React, Docker in a Nutshell

WHAT'S THE ISSUE HERE

▸ understandable?

▸ code can't be reused

▸ high coupling

▸ untestable

▸ too many responsibilities

▸ hard to find bugs

▸ not changes-prone

Page 29: CQRS, React, Docker in a Nutshell

WHAT WE WANT

Page 30: CQRS, React, Docker in a Nutshell

COMMAND QUERY RESPONSIBILITY SEGREGATION AKA CQRS

A SOLUTION

Page 31: CQRS, React, Docker in a Nutshell

CQRS

▸ separe reads from writes

▸ commands perform actions

▸ queries return data

▸ heterogeneous data storages

▸ easy scaling

▸ deal with eventual consistency

Page 32: CQRS, React, Docker in a Nutshell

WRITE STORAGE

QUERY

COMMAND

COMMAND

COMMAND BUS

COMMAND HANDLERDOMAIN

REPOSITORY

READ STORAGEREPOSITORY

EVENT BUS

EVENT SUBSCRIBER

Page 33: CQRS, React, Docker in a Nutshell

IT'S ALL ABOUT BUSES

Page 34: CQRS, React, Docker in a Nutshell

IT'S ALL ABOUT BUSES COMMUNICATION

Page 35: CQRS, React, Docker in a Nutshell

INTERNAL COMMUNICATION

BC

EVENT

COMMAND

Page 36: CQRS, React, Docker in a Nutshell

MESSAGE BUS

$ composer require simple-bus/message-bus

Page 37: CQRS, React, Docker in a Nutshell

COMMANDS

COMMAND BUS

Represent the change that should be done in the domain

They are named with a verb in the imperative tense and may include the aggregate type, for example ScheduleATask.

Page 38: CQRS, React, Docker in a Nutshell

COMMANDS

COMMAND BUS

CONTROLLER

$commandBus->handle( ScheduleATask::fromTaskId($taskId) );

HANDLER

public function handle(Command $command) { //do something with the $command }

Page 39: CQRS, React, Docker in a Nutshell

EVENTS

BC 1 BC 2

EVENT BUS

An event represents something that took place in the domain. They are always named with a past-participle verb, such as TaskScheduled

Page 40: CQRS, React, Docker in a Nutshell

EVENTS

BC 1 BC 2

EVENT BUS

subscribes_to: 'user-created'

subscribes_to: 'task-stopped'

subscribes_to: 'task-suspended'

Page 41: CQRS, React, Docker in a Nutshell

EVENTS

BC 1 BC 2

EVENT BUS

$messageBus->handle( UserCreatedEvent::fromUser($user) );

subscribes_to: 'user-created'

subscribes_to: 'task-stopped'

subscribes_to: 'task-suspended'$messageBus->handle( TaskSuspendedEvent::fromTask($task) );

Page 42: CQRS, React, Docker in a Nutshell

COMMUNICATION AMONG BCS

BC 1 BC 2

QUEUE

NETWORK

Page 43: CQRS, React, Docker in a Nutshell

QUEUE

BC 1 BC 2

QUEUE

$producer->publish($message); $consumer->consume($message);

Page 44: CQRS, React, Docker in a Nutshell

NETWORK

BC 1 BC 2

NETWORK

$httpClient->post('/tasks/schedule');

POST /tasks/schedule

Page 45: CQRS, React, Docker in a Nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER

Page 46: CQRS, React, Docker in a Nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

Page 47: CQRS, React, Docker in a Nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

DATA STORAGE

$taskRepository->getAll()

Page 48: CQRS, React, Docker in a Nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

DATA STORAGE

$taskRepository->getAll()

TASK QUEUE

enqueue($taskId)

Page 49: CQRS, React, Docker in a Nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

DATA STORAGE

$taskRepository->getAll()

TASK QUEUE

enqueue($taskId)

W1 W2 W3 W..N...

Page 50: CQRS, React, Docker in a Nutshell

LET ME SEE WHAT YOU HAVE DONE

IT'S TIME TO SHOW DOWN

Page 51: CQRS, React, Docker in a Nutshell

WHAT THE TEAM HAS DELIVERED

Page 52: CQRS, React, Docker in a Nutshell

WHAT THE MANAGEMENT SEE

Page 53: CQRS, React, Docker in a Nutshell

WHAT THE MANAGEMENT WANTS

Page 54: CQRS, React, Docker in a Nutshell

LET'S START FROM THE TEMPLATE

Page 55: CQRS, React, Docker in a Nutshell

TWIG

Page 56: CQRS, React, Docker in a Nutshell

THE FRONTEND STUFF

Page 57: CQRS, React, Docker in a Nutshell

THE FRONTEND STUFFORDER DEPENDENT

Page 58: CQRS, React, Docker in a Nutshell

THE FRONTEND STUFF

GLOBAL SCOPE

Page 59: CQRS, React, Docker in a Nutshell

<script> $('.btn').click(function(e){

e.stopPropagation(); // Do something cool! }); </script>

NEVER TRUST THE GLOBAL SCOPE

Page 60: CQRS, React, Docker in a Nutshell

A STEP BACKWARD

Page 61: CQRS, React, Docker in a Nutshell

WE ARE BACKEND DEVELOPERS

Page 62: CQRS, React, Docker in a Nutshell

OUR COMFORT ZONE

Page 63: CQRS, React, Docker in a Nutshell

OOP

Page 64: CQRS, React, Docker in a Nutshell

ENCAPSULATION

Page 65: CQRS, React, Docker in a Nutshell

MODULES

Page 66: CQRS, React, Docker in a Nutshell

DEPENDENCY INJECTION

Page 67: CQRS, React, Docker in a Nutshell

GOOD NEWS

Page 68: CQRS, React, Docker in a Nutshell
Page 69: CQRS, React, Docker in a Nutshell

ECMASCRIPT 6

Page 70: CQRS, React, Docker in a Nutshell

DEFAULT VALUES

Page 71: CQRS, React, Docker in a Nutshell

CLASSES

Page 72: CQRS, React, Docker in a Nutshell

INHERITANCE

Page 73: CQRS, React, Docker in a Nutshell

CREATE YOUR MODULES

Page 74: CQRS, React, Docker in a Nutshell

IMPORT A MODULE

Page 75: CQRS, React, Docker in a Nutshell

IMPORT ONLY WHAT YOU NEED

Page 76: CQRS, React, Docker in a Nutshell

WHAT ABOUT THE UI?

Page 77: CQRS, React, Docker in a Nutshell
Page 78: CQRS, React, Docker in a Nutshell

var React = require('react'); var ReactDOM = require('react-dom');

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('app') );

Page 79: CQRS, React, Docker in a Nutshell
Page 80: CQRS, React, Docker in a Nutshell

https://kangax.github.io/compat-table/es6/

Page 81: CQRS, React, Docker in a Nutshell
Page 82: CQRS, React, Docker in a Nutshell

ASSETIC CUSTOM FILTERS

Page 83: CQRS, React, Docker in a Nutshell
Page 84: CQRS, React, Docker in a Nutshell

ANOTHER STEP BACKWARD

Page 85: CQRS, React, Docker in a Nutshell

REMEMBER THE BOUNDED CONTEXT

Page 86: CQRS, React, Docker in a Nutshell

A LOT OF SMALL COMPONENTS

Page 87: CQRS, React, Docker in a Nutshell

A LOT OF SMALL APPLICATIONS

Page 88: CQRS, React, Docker in a Nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 89: CQRS, React, Docker in a Nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 90: CQRS, React, Docker in a Nutshell

Gulp Bundler

+

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 91: CQRS, React, Docker in a Nutshell

DEVELOPMENT WORKFLOW

Page 92: CQRS, React, Docker in a Nutshell

$ docker/gulp

docker-compose run --rm --entrypoint bash npm -c "gulp"

Page 93: CQRS, React, Docker in a Nutshell

// gulpfile.js var gulp = require('gulp'); var hub = require('gulp-hub');

process .env .WEBPACK_CONFIG_FILE = path.join( __dirname, 'webpack.config.js' ) ;

hub(['src/**/gulpfile.js']);

Page 94: CQRS, React, Docker in a Nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

gulpfile.js gulpfile.js gulpfile.js

Page 95: CQRS, React, Docker in a Nutshell

BOUNDED CONTEXT FACEBOOK

gulpfile.js

"## FacebookPresentationBundle.php $## Resources "## assets "## config "## public $## views

Page 96: CQRS, React, Docker in a Nutshell

$ app/console assets:install

LET'S EXPOSE TO THE WEB

Page 97: CQRS, React, Docker in a Nutshell

APPLICATION ENTRYPOINT

Page 98: CQRS, React, Docker in a Nutshell

IT'S A BIG WORLD OUT THERE!

Page 99: CQRS, React, Docker in a Nutshell
Page 100: CQRS, React, Docker in a Nutshell
Page 101: CQRS, React, Docker in a Nutshell
Page 102: CQRS, React, Docker in a Nutshell
Page 103: CQRS, React, Docker in a Nutshell

THE DEVELOPMENT ENVIRONMENT

▸ Easy to use so many technologies at no installation cost

▸ Prepare the scaffolding for a new developer is extremely simple

▸ Superior performances over previous systems

Page 104: CQRS, React, Docker in a Nutshell

docker-compose.yml docker-compose.dev.yml

Page 105: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

Page 106: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

Page 107: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

Page 108: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

Page 109: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

VS

Page 110: CQRS, React, Docker in a Nutshell

THE INFRASTRUCTURE

VS

Page 111: CQRS, React, Docker in a Nutshell

STAGE

▸ Automate image building

▸ Copy the same structure used in dev

Page 112: CQRS, React, Docker in a Nutshell

STAGE

▸ Automate image building

▸ Copy the same structure used in dev

Page 113: CQRS, React, Docker in a Nutshell

AUFS: VOLUMES MIGHT BE A LITTLE HARDER THAN IT SEEMS

Page 114: CQRS, React, Docker in a Nutshell

SYMFONY PARAMETERS

Page 115: CQRS, React, Docker in a Nutshell

incenteev/composer-parameter-handler

Page 116: CQRS, React, Docker in a Nutshell

DOCKER CLOUD REPOSITORY CONFIGURATION

Page 117: CQRS, React, Docker in a Nutshell
Page 118: CQRS, React, Docker in a Nutshell
Page 119: CQRS, React, Docker in a Nutshell

DATA ONLY CONTAINER

Page 120: CQRS, React, Docker in a Nutshell

DATA ONLY CONTAINER

Page 121: CQRS, React, Docker in a Nutshell

DATA ONLY CONTAINER

Page 122: CQRS, React, Docker in a Nutshell

DATA ONLY CONTAINER

Page 123: CQRS, React, Docker in a Nutshell

FIRST DEPLOY

Page 124: CQRS, React, Docker in a Nutshell

AN ELEPHANT IN THE ROOM... WE NEED

▸ Automated deploy strategy

▸ The freedom to easily scale

Page 125: CQRS, React, Docker in a Nutshell

SCALE

$ docker-compose scale \web=2 \worker=3

Page 126: CQRS, React, Docker in a Nutshell

HARD TRUTH

fpm:

image: 'adespresso/hubespresso-staging:fpm-latest'

deployment_strategy: every_node

sequential_deployment: true

tags:

- fpm

- hubespresso

- production

volumes:

- /var/www/project

volumes_from:

- shared-fpm.hubespresso-production

SCALE CONTAINERS IS WORTHLESS IF YOU DO NOT SCALE NODES

Page 127: CQRS, React, Docker in a Nutshell

HARD TRUTH

SCALE CONTAINERS IS WORTHLESS IF YOU DO NOT SCALE NODES

fpm:

image: 'adespresso/hubespresso-staging:fpm-latest'

deployment_strategy: every_node

sequential_deployment: true

tags:

- fpm

- hubespresso

- production

volumes:

- /var/www/project

volumes_from:

- shared-fpm.hubespresso-production

Page 128: CQRS, React, Docker in a Nutshell

DATA ONLY CONTAINER IS A PAIN

Page 129: CQRS, React, Docker in a Nutshell
Page 130: CQRS, React, Docker in a Nutshell

DEPLOYMENT

▸ deploy the infrastructure is not straightforward

▸ multiple container in multiple nodes

▸ every container has its own lifecycle

▸ we are not assuring zero-downtime on deployment

Page 131: CQRS, React, Docker in a Nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 132: CQRS, React, Docker in a Nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 133: CQRS, React, Docker in a Nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 134: CQRS, React, Docker in a Nutshell

CONCLUSION

Page 135: CQRS, React, Docker in a Nutshell

CQRSPHP7

DOCKERREACTJS

MONGODBWEBPACKGULP

Page 136: CQRS, React, Docker in a Nutshell

LEAVE THE COMFORT ZONE

Page 137: CQRS, React, Docker in a Nutshell

THANKS

Page 138: CQRS, React, Docker in a Nutshell

QUESTIONS?