Evolution of front end architectures
-
Upload
luca-mezzalira -
Category
Engineering
-
view
792 -
download
1
Transcript of Evolution of front end architectures
![Page 1: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/1.jpg)
New generation of FRONT END architectures
![Page 2: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/2.jpg)
HELLO!
I am Luca MezzaliraSolutions Architect @ Massive InteractiveCommunity Manager of London JavaScript User Group
![Page 3: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/3.jpg)
AGENDA▸ Overview of front end
architectures
▸ Communicating sequential processes
▸ Transducers
![Page 4: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/4.jpg)
1.ARCHITECTURES PAST & PRESENT
![Page 5: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/5.jpg)
Architectures Timeline
90s
MVP80s
MVC
2005
MVVM2013
FLUX
2009
DCI
2015
MVI
![Page 6: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/6.jpg)
▸ SOLID principles▸ Encapsulation▸ Loose coupled▸ High scalability▸ Event driven
COMMONALITY
![Page 7: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/7.jpg)
Which is one of the main challenge working with event driven architectures?
![Page 8: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/8.jpg)
▸ Events▸ Signals▸ Pub/Sub system▸ Actions + Dispatcher▸ Commands▸ ...
OBJECTS COMMUNICATION
![Page 9: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/9.jpg)
2.COMMUNICATINGSEQUENTIAL PROCESSES
![Page 10: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/10.jpg)
“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
![Page 11: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/11.jpg)
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
![Page 12: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/12.jpg)
CHANNEL INJECTION
VIEW
controller or presentation
model or model or
intent
CHANNEL
![Page 13: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/13.jpg)
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
![Page 14: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/14.jpg)
“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.
![Page 15: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/15.jpg)
TRANSDUCERSTRANSFORM: producing some value from another
REDUCER: combining values of a data structure to produce a new one
![Page 16: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/16.jpg)
TRANSFORMATION IN MVC, MVP, MVVM
presentation model orview-model
model
![Page 17: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/17.jpg)
TRANSFORMATION WITH TRANSDUCERS
VIEWMODEL or
PRESENTATION MODEL
CHANNEL with TRANSDUCER
![Page 18: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/18.jpg)
Can I use CSPEVERYWHERE?
![Page 19: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/19.jpg)
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
![Page 20: Evolution of front end architectures](https://reader036.fdocuments.net/reader036/viewer/2022062523/587e7ff11a28abd6038b6095/html5/thumbnails/20.jpg)
THANKS EVERYONE
Q&A
@lucamezzalirawww.lucamezzalira.comwww.londonjs.ukmezzalab@gmail.com