event sourcing your react-flux applications

39
React applications & Event Sourcing Maurice de Beijer Software Engineer Trainer ABL – The Problem Solver

Upload: maurice-beijer

Post on 08-Feb-2017

770 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Event sourcing your React-Flux applications

React applications & Event Sourcing

Mauricede Beijer

Software EngineerTrainer

ABL – The Problem Solver

Page 2: Event sourcing your React-Flux applications

Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb and @React_TutorialWeb:http://www.TheProblemSolver.nlE-mail: [email protected]

Page 3: Event sourcing your React-Flux applications
Page 4: Event sourcing your React-Flux applications
Page 5: Event sourcing your React-Flux applications
Page 6: Event sourcing your React-Flux applications
Page 7: Event sourcing your React-Flux applications
Page 8: Event sourcing your React-Flux applications
Page 9: Event sourcing your React-Flux applications
Page 10: Event sourcing your React-Flux applications
Page 11: Event sourcing your React-Flux applications

(Semi) Structured storage

Database CRUD Server HTTP Browser

Page 12: Event sourcing your React-Flux applications
Page 13: Event sourcing your React-Flux applications

A React component to display data

Page 14: Event sourcing your React-Flux applications

Command Query Responsibility Segregation

Page 15: Event sourcing your React-Flux applications

Command Query Responsibility Segregation

Database

Query ServiceHTTP

Browser

Command Service

HTTP

Read

Update

Page 16: Event sourcing your React-Flux applications
Page 17: Event sourcing your React-Flux applications

A command to draft a permit

Page 18: Event sourcing your React-Flux applications

The JavaScript command

Page 19: Event sourcing your React-Flux applications

A Redux Action Creator

Page 20: Event sourcing your React-Flux applications
Page 21: Event sourcing your React-Flux applications
Page 22: Event sourcing your React-Flux applications
Page 23: Event sourcing your React-Flux applications
Page 24: Event sourcing your React-Flux applications
Page 25: Event sourcing your React-Flux applications

Event Sourcing

ProjectionsDatabase

Query Service HTTP

Browser

Command Service

HTTP

Read

UpdateEventsDatabase

Projector Service

Page 26: Event sourcing your React-Flux applications

React with Redux

ViewServer

Store

Action

API

Triggers

HTTP

Use

Notifies

Updates

Page 27: Event sourcing your React-Flux applications
Page 28: Event sourcing your React-Flux applications
Page 29: Event sourcing your React-Flux applications

The permit drafted event

Page 30: Event sourcing your React-Flux applications
Page 31: Event sourcing your React-Flux applications
Page 32: Event sourcing your React-Flux applications
Page 33: Event sourcing your React-Flux applications

Projecting a permit drafted event

Page 34: Event sourcing your React-Flux applications

The permit collection reducer

Page 35: Event sourcing your React-Flux applications

The single permit reducer

Page 36: Event sourcing your React-Flux applications

The React application startup

Page 37: Event sourcing your React-Flux applications

Connecting state to a component

Page 38: Event sourcing your React-Flux applications
Page 39: Event sourcing your React-Flux applications

@mauricedb

Question?

http://theproblemsolver.nl

[email protected]

MauriceDe Beijer

Software EngineerTrainer

ABL – The Problem Solver