Evolution of front end architectures

Evolution of front end architectures

• 1.
  New generation of FRONTEND architectures
• 2.
  HELLO! I am LucaMezzalira Solutions Architect @ Massive Interactive Community Manager of London JavaScript User Group
• 3.
  AGENDA ▸ Overview offront end architectures ▸ Communicating sequential processes ▸ Transducers
• 4.
  1. ARCHITECTURES PAST & PRESENT
• 5.
  Architectures Timeline 90s MVP 80s MVC 2005 MVVM 2013 FLUX 2009 DCI 2015 MVI
• 6.
  ▸SOLID principles ▸Encapsulation ▸Loose coupled ▸Highscalability ▸Event driven COMMONALITY
• 7.
  Which is oneof the main challenge working with event driven architectures?
• 8.
  ▸Events ▸Signals ▸Pub/Sub system ▸Actions +Dispatcher ▸Commands ▸... OBJECTS COMMUNICATION
• 9.
  2. COMMUNICATING SEQUENTIAL PROCESSES
• 10.
  “CSPCSP allows thedescription 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
• 11.
  CSP ▸Created in 1978 ▸CSP-jsporting from Clojure (core.async) and GO ▸Composition over Inheritance ▸Easier to test ▸Loose coupled ▸Well encapsulated ▸Clean and reusable code
• 12.
  CHANNEL INJECTION VIEW controller or presentation model or modelor intent CHANNEL
• 13.
  CSP APIs ▸set abuffer 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
• 14.
  “TRANSDUCERS Transducers are composablealgorithmic 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.
• 15.
  TRANSDUCERS TRANSFORM: producing some valuefrom another REDUCER: combining values of a data structure to produce a new one
• 16.
  TRANSFORMATION IN MVC, MVP,MVVM presentation model or view-model model
• 17.
  TRANSFORMATION WITH TRANSDUCERS VIEW MODEL or PRESENTATI ON MODEL CHANNEL with TRANSDUCER
• 18.
  Can I useCSP EVERYWHERE?
• 19.
  What’s the difference between RXJSand 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
• 20.
  THANKS EVERYONE Q&A @lucamezzalira www.lucamezzalira.com www.londonjs.uk [email protected]