Evolution of front end architectures

New generation of FRONT END architectures

HELLO!

I am Luca MezzaliraSolutions Architect @ Massive InteractiveCommunity Manager of London JavaScript User Group

AGENDA▸ Overview of front end

architectures

▸ Communicating sequential processes

▸ Transducers

1.ARCHITECTURES PAST & PRESENT

Architectures Timeline

90s

MVP80s

MVC

2005

MVVM2013

FLUX

2009

DCI

2015

MVI

▸ SOLID principles▸ Encapsulation▸ Loose coupled▸ High scalability▸ Event driven

COMMONALITY

Which is one of the main challenge working with event driven architectures?

▸ Events▸ Signals▸ Pub/Sub system▸ Actions + Dispatcher▸ Commands▸ ...

OBJECTS COMMUNICATION

2.COMMUNICATINGSEQUENTIAL PROCESSES

“CSPCSP allows the description of systems in terms of component processes that operate independently, and interact with each other solely through message-passing communication. However, the "Sequential" part of the CSP name is now something of a misnomer, since modern CSP allows component processes to be defined both as sequential processes, and as the parallel composition of more primitive processes

CSP▸ Created in 1978▸ CSP-js porting from

Clojure (core.async) and GO

▸ Composition over Inheritance

▸ Easier to test▸ Loose coupled▸ Well encapsulated▸ Clean and reusable code

CHANNEL INJECTION

VIEW

controller or presentation

model or model or

intent

CHANNEL

CSP APIs▸ set a buffer inside a channel▸ put and take value from a channel▸ close a channel▸ close a channel after N ms▸ put the array values inside a channel▸ return a channel with the values inside an array▸ split, merge or pipe channels▸ pub/sub system (observer pattern)▸ broadcast values to multiple channels simultaneously▸ map, filter, remove data from a channel▸ avoid duplicated data inside a channel▸ decorate data inside a channel

“TRANSDUCERSTransducers are composable algorithmic transformations.They are independent from the context of their input and output sources and specify only the essence of the transformation in terms of an individual element. Because transducers are decoupled from input or output sources, they can be used in many different processes - collections, streams, channels, observables, etc.

TRANSDUCERSTRANSFORM: producing some value from another

REDUCER: combining values of a data structure to produce a new one

TRANSFORMATION IN MVC, MVP, MVVM

presentation model orview-model

model

TRANSFORMATION WITH TRANSDUCERS

VIEWMODEL or

PRESENTATION MODEL

CHANNEL with TRANSDUCER

Can I use CSPEVERYWHERE?

What’s the difference between RXJS and CSP-JS ?

● CSP-JS divides data production, data medium and data consumption

● RXJS divides data production and data consumption

● CSP-JS is generator dependent, RXJS is not

● CSP-JS is a simple and low-level library that could be used on function utilities only

● RXJS is a complete and more complex system

THANKS EVERYONE

Q&A

@lucamezzalirawww.lucamezzalira.comwww.londonjs.ukmezzalab@gmail.com