CQRS, ReactJS, Docker in a nutshell

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

Transcript of CQRS, ReactJS, Docker in a nutshell

Page 1: CQRS, ReactJS, Docker in a nutshell

CQRS, REACTJS, DOCKERIN A NUTSHELL

Andrea GiulianoClaudio D'Alicandro Simone Di Maulo

Page 2: CQRS, ReactJS, Docker in a nutshell

NEW AMAZING PROJECT

Page 3: CQRS, ReactJS, Docker in a nutshell

WE CAN WRITE IT FROM SCRATCH

Page 4: CQRS, ReactJS, Docker in a nutshell

BUT

Page 5: CQRS, ReactJS, Docker in a nutshell

immagine manager incazzato

WE NEED IT IN A VERY FEW TIME

Page 6: CQRS, ReactJS, Docker in a nutshell

AND

Page 7: CQRS, ReactJS, Docker in a nutshell

IT SHOULD BE

Page 8: CQRS, ReactJS, Docker in a nutshell

WTF!

Page 9: CQRS, ReactJS, Docker in a nutshell

WHERE DO WE START?

Page 10: CQRS, ReactJS, Docker in a nutshell

COMFORT ZONE

Page 11: CQRS, ReactJS, 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, ReactJS, 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, ReactJS, Docker in a nutshell

IDEA

Page 14: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

FROM BLACK BOXES TO BOUNDED CONTEXTS

Page 16: CQRS, ReactJS, Docker in a nutshell

DEPENDENCIES INFRA BC

MODEL

APPLICATION

PRESENTATION

Page 17: CQRS, ReactJS, Docker in a nutshell

PROJECT DIRECTORY TREE

Page 18: CQRS, ReactJS, Docker in a nutshell

APP DIRECTORY TREE

Page 19: CQRS, ReactJS, Docker in a nutshell

INFRASTRUCTURE DIRECTORY TREE

Page 20: CQRS, ReactJS, Docker in a nutshell

INSIDE THE BOUNDED CONTEXT

Page 21: CQRS, ReactJS, Docker in a nutshell

BC DIRECTORY TREE

Page 22: CQRS, ReactJS, Docker in a nutshell

BC APPLICATION DIRECTORY TREE

Page 23: CQRS, ReactJS, Docker in a nutshell

BC MODEL DIRECTORY TREE

Page 24: CQRS, ReactJS, Docker in a nutshell

BC PRESENTATION DIRECTORY TREE

Page 25: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

WE DON'T WANT TO MESS THINGS UP

Page 27: CQRS, ReactJS, Docker in a nutshell

DON'T MESS UP THINGS

Page 28: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

WHAT WE WANT

Page 30: CQRS, ReactJS, Docker in a nutshell

COMMAND QUERY RESPONSIBILITY SEGREGATION AKA CQRS

A SOLUTION

Page 31: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

WRITE STORAGE

QUERY

COMMAND

COMMAND

COMMAND BUS

COMMAND HANDLERDOMAIN

REPOSITORY

READ STORAGEREPOSITORY

EVENT BUS

EVENT SUBSCRIBER

Page 33: CQRS, ReactJS, Docker in a nutshell

IT'S ALL ABOUT BUSES

Page 34: CQRS, ReactJS, Docker in a nutshell

IT'S ALL ABOUT BUSES COMMUNICATION

Page 35: CQRS, ReactJS, Docker in a nutshell

INTERNAL COMMUNICATION

BC

EVENT

COMMAND

Page 36: CQRS, ReactJS, Docker in a nutshell

MESSAGE BUS

$ composer require simple-bus/message-bus

Page 37: CQRS, ReactJS, 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, ReactJS, 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, ReactJS, 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, ReactJS, 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, ReactJS, 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, ReactJS, Docker in a nutshell

COMMUNICATION AMONG BCS

BC 1 BC 2

QUEUE

NETWORK

Page 43: CQRS, ReactJS, Docker in a nutshell

QUEUE

BC 1 BC 2

QUEUE

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

Page 44: CQRS, ReactJS, Docker in a nutshell

NETWORK

BC 1 BC 2

NETWORK

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

POST /tasks/schedule

Page 45: CQRS, ReactJS, Docker in a nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER

Page 46: CQRS, ReactJS, Docker in a nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

Page 47: CQRS, ReactJS, Docker in a nutshell

SCENARIO: TRIGGER THE TASKS SCHEDULE EVERY 10 MINUTES

TIMER SCHEDULERPOST /tasks/schedule

DATA STORAGE

$taskRepository->getAll()

Page 48: CQRS, ReactJS, 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, ReactJS, 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, ReactJS, Docker in a nutshell

LET ME SEE WHAT YOU HAVE DONE

IT'S TIME TO SHOW DOWN

Page 51: CQRS, ReactJS, Docker in a nutshell

WHAT THE TEAM HAS DELIVERED

Page 52: CQRS, ReactJS, Docker in a nutshell

WHAT THE MANAGEMENT SEE

Page 53: CQRS, ReactJS, Docker in a nutshell

WHAT THE MANAGEMENT WANTS

Page 54: CQRS, ReactJS, Docker in a nutshell

LET'S START FROM THE TEMPLATE

Page 55: CQRS, ReactJS, Docker in a nutshell

TWIG

Page 56: CQRS, ReactJS, Docker in a nutshell

THE FRONTEND STUFF

Page 57: CQRS, ReactJS, Docker in a nutshell

THE FRONTEND STUFFORDER DEPENDENT

Page 58: CQRS, ReactJS, Docker in a nutshell

THE FRONTEND STUFF

GLOBAL SCOPE

Page 59: CQRS, ReactJS, Docker in a nutshell

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

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

NEVER TRUST THE GLOBAL SCOPE

Page 60: CQRS, ReactJS, Docker in a nutshell

A STEP BACKWARD

Page 61: CQRS, ReactJS, Docker in a nutshell

WE ARE BACKEND DEVELOPERS

Page 62: CQRS, ReactJS, Docker in a nutshell

OUR COMFORT ZONE

Page 63: CQRS, ReactJS, Docker in a nutshell

OOP

Page 64: CQRS, ReactJS, Docker in a nutshell

ENCAPSULATION

Page 65: CQRS, ReactJS, Docker in a nutshell

MODULES

Page 66: CQRS, ReactJS, Docker in a nutshell

DEPENDENCY INJECTION

Page 67: CQRS, ReactJS, Docker in a nutshell

GOOD NEWS

Page 68: CQRS, ReactJS, Docker in a nutshell
Page 69: CQRS, ReactJS, Docker in a nutshell

ECMASCRIPT 6

Page 70: CQRS, ReactJS, Docker in a nutshell

DEFAULT VALUES

Page 71: CQRS, ReactJS, Docker in a nutshell

CLASSES

Page 72: CQRS, ReactJS, Docker in a nutshell

INHERITANCE

Page 73: CQRS, ReactJS, Docker in a nutshell

CREATE YOUR MODULES

Page 74: CQRS, ReactJS, Docker in a nutshell

IMPORT A MODULE

Page 75: CQRS, ReactJS, Docker in a nutshell

IMPORT ONLY WHAT YOU NEED

Page 76: CQRS, ReactJS, Docker in a nutshell

WHAT ABOUT THE UI?

Page 77: CQRS, ReactJS, Docker in a nutshell
Page 78: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell
Page 80: CQRS, ReactJS, Docker in a nutshell

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

Page 81: CQRS, ReactJS, Docker in a nutshell
Page 82: CQRS, ReactJS, Docker in a nutshell

ASSETIC CUSTOM FILTERS

Page 83: CQRS, ReactJS, Docker in a nutshell
Page 84: CQRS, ReactJS, Docker in a nutshell

ANOTHER STEP BACKWARD

Page 85: CQRS, ReactJS, Docker in a nutshell

REMEMBER THE BOUNDED CONTEXT

Page 86: CQRS, ReactJS, Docker in a nutshell

A LOT OF SMALL COMPONENTS

Page 87: CQRS, ReactJS, Docker in a nutshell

A LOT OF SMALL APPLICATIONS

Page 88: CQRS, ReactJS, Docker in a nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 89: CQRS, ReactJS, Docker in a nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 90: CQRS, ReactJS, Docker in a nutshell

Gulp Bundler

+

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

Page 91: CQRS, ReactJS, Docker in a nutshell

DEVELOPMENT WORKFLOW

Page 92: CQRS, ReactJS, Docker in a nutshell

$ docker/gulp

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

Page 93: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

BOUNDED CONTEXT FACEBOOK BOUNDED CONTEXT MAILCHIMPBOUNDED CONTEXT MAPPING

gulpfile.js gulpfile.js gulpfile.js

Page 95: CQRS, ReactJS, Docker in a nutshell

BOUNDED CONTEXT FACEBOOK

gulpfile.js

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

Page 96: CQRS, ReactJS, Docker in a nutshell

$ app/console assets:install

LET'S EXPOSE TO THE WEB

Page 97: CQRS, ReactJS, Docker in a nutshell

APPLICATION ENTRYPOINT

Page 98: CQRS, ReactJS, Docker in a nutshell

IT'S A BIG WORLD OUT THERE!

Page 99: CQRS, ReactJS, Docker in a nutshell
Page 100: CQRS, ReactJS, Docker in a nutshell
Page 101: CQRS, ReactJS, Docker in a nutshell
Page 102: CQRS, ReactJS, Docker in a nutshell
Page 103: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

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

Page 105: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

Page 106: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

Page 107: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

Page 108: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

Page 109: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

VS

Page 110: CQRS, ReactJS, Docker in a nutshell

THE INFRASTRUCTURE

VS

Page 111: CQRS, ReactJS, Docker in a nutshell

STAGE

▸ Automate image building

▸ Copy the same structure used in dev

Page 112: CQRS, ReactJS, Docker in a nutshell

STAGE

▸ Automate image building

▸ Copy the same structure used in dev

Page 113: CQRS, ReactJS, Docker in a nutshell

AUFS: VOLUMES MIGHT BE A LITTLE HARDER THAN IT SEEMS

Page 114: CQRS, ReactJS, Docker in a nutshell

SYMFONY PARAMETERS

Page 115: CQRS, ReactJS, Docker in a nutshell

incenteev/composer-parameter-handler

Page 116: CQRS, ReactJS, Docker in a nutshell

DOCKER CLOUD REPOSITORY CONFIGURATION

Page 117: CQRS, ReactJS, Docker in a nutshell
Page 118: CQRS, ReactJS, Docker in a nutshell
Page 119: CQRS, ReactJS, Docker in a nutshell

DATA ONLY CONTAINER

Page 120: CQRS, ReactJS, Docker in a nutshell

DATA ONLY CONTAINER

Page 121: CQRS, ReactJS, Docker in a nutshell

DATA ONLY CONTAINER

Page 122: CQRS, ReactJS, Docker in a nutshell

DATA ONLY CONTAINER

Page 123: CQRS, ReactJS, Docker in a nutshell

FIRST DEPLOY

Page 124: CQRS, ReactJS, Docker in a nutshell

AN ELEPHANT IN THE ROOM... WE NEED

▸ Automated deploy strategy

▸ The freedom to easily scale

Page 125: CQRS, ReactJS, Docker in a nutshell

SCALE

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

Page 126: CQRS, ReactJS, 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, ReactJS, 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, ReactJS, Docker in a nutshell

DATA ONLY CONTAINER IS A PAIN

Page 129: CQRS, ReactJS, Docker in a nutshell
Page 130: CQRS, ReactJS, 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, ReactJS, Docker in a nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 132: CQRS, ReactJS, Docker in a nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 133: CQRS, ReactJS, Docker in a nutshell

THE SOLUTION: GREEN BLUE DEPLOYMENT

Page 134: CQRS, ReactJS, Docker in a nutshell

CONCLUSION

Page 135: CQRS, ReactJS, Docker in a nutshell

CQRSPHP7

DOCKERREACTJS

MONGODBWEBPACKGULP

Page 136: CQRS, ReactJS, Docker in a nutshell

LEAVE THE COMFORT ZONE

Page 137: CQRS, ReactJS, Docker in a nutshell

THANKS

Page 138: CQRS, ReactJS, Docker in a nutshell

QUESTIONS?