INTRODUCTION TOFRONT-END ARCHITECTURE PATTERNS
Oleksandr TryshchenkoSenior Front-end Developer, DataArttryshchenko.com
Agenda
• Classic Back-End architecture patterns• Contemporary Front-End architecture patterns
18 May 2017 3
History
18 May 2017 4
Web 1.0
18 May 2017 5
• Server-side rendering• Static pages• ActiveX, java applets
JavaScript Usage In 2004
Usage, %
Snow Effect Blinking Effect Something Useful
18 May 2017 6
JavaScript Usage In 2004
18 May 2017 7
Why didn’t JS Evolve Earlier?
• Limited browser API’s• Lack of protocols for client-server communication• Slow and expensive internet connection
18 May 2017 8
Server-side Rendering
Browser Rendering Layer
LogicLayer Data Layer
18 May 2017 9
Client Server
New HTML document – Page needs to be reloaded.
User gets page
User performs action (clicks link, submits
form, etc)
Browser sends request to server
Server handles request and
generates new page
Browser loads new page
18 May 2017 10
SERVER-SIDE RENDERING
User gets page
User performs action (clicks link, submits
form, etc)
Browser sends request to server
Server handles request and
generates new page
Browser loads new page
18 May 2017 11
SERVER-SIDE RENDERING
What Changed?
18 May 2017 12
Game Changer: AJAX
• Microsoft Outlook Web Access• Gmail• Google Maps
18 May 2017 13
Game Changer: AJAX
18 May 2017 14
Game Changer: 3G, Smartphones
• iOS• Android• Windows Phone
18 May 2017 15
Client-side Rendering
• One common way to interact with a server for different platforms.
• Performance expenses moved to client’s device.• Separated delivery process.
18 May 2017 16
Client-side Rendering
Browser Front-EndApplication
Data Exchange
LayerLogic Layer Data Layer
18 May 2017 17
Client Server
Returns XML / JSON with data
Updates DOM Tree
Front-End Frameworks
• Huge amount of code which developers must support• Spaghetti out of callbacks and events• High coupling• Awful encapsulation
18 May 2017 18
Model View Controller
18 May 2017 19
MVC (Model View Controller)
18 May 2017 20
Model
ControllerView
MVC?
18 May 2017 21
JavaScript is Asynchronous
18 May 2017 22
Sync / Async
18 May 2017 23
Synchronous
getData() modifyData() displayData()
18 May 2017 24
Asynchronous
getData() WHATEVERNEXT …
18 May 2017 25
modifyData() displayData() …
Waiting For Server Response
18 May 2017 26
18 May 2017 27
Workarounds
• Callbacks• Promises• Generators• Async / Await• Streams (ReactiveX)*
18 May 2017 28
18 May 2017 29
Callbacks
18 May 2017 30
Promises
18 May 2017 31
ES6 Generators
18 May 2017 32
Async / Await
Data Exchange
• “Vertical” (through components’ composition)• “Horizontal” (through singleton)
18 May 2017 33
Data Exchange Using Components Composition
Main component (Declares variable)
Widget 1(Uses variable)
Widget 2(Uses variable)
Widget 3(Uses variable)
Header Component
(Uses variable)
18 May 2017 34
Data Exchange Using Components Composition
Main component (Declares variable)
Widget 1(Uses variable)
Widget 2(Uses variable)
Widget 3(Uses variable)
Header Component
(Uses variable)
18 May 2017 35
Emits Change Event + Value (any of the boxes)
Emits Change Event + Value
Data Exchange Using Components’ Composition
Main component (Declares variable)
Widget 1(Uses variable)
Widget 2(Uses variable)
Widget 3(Uses variable)
Header Component
(Uses variable)
18 May 2017 36
Checks changes and updates components
Checks changes and updates components (each one)
Data Exchange Using Singleton
Maincomponent
(Uses variable)
Widget 1(Uses variable)
Widget 2(Uses variable)
Widget 3(Uses variable)
Header Component
(Uses variable)
18 May 2017 37
Data Service (Declares variable)
Difference?
18 May 2017 38
Data Exchange Using Singleton
18 May 2017 39
App User Data Service
Transactions Service
Products Service
Contacts Service
etc
Smart / Dumb Components
ContactsComponent(Gets Data)
DumbRepresentation
Layer
TransactionsComponent(Gets Data)
DumbRepresentation
Layer
18 May 2017 40
Event-driven Architecture
• Many types of user input• Messages from different system components• Timeouts / intervals
18 May 2017 41
Model View ViewModel
18 May 2017 42
MVVM (Model View ViewModel)
View ViewModel Model
18 May 2017 43
Data BindingWrite
Read
Why MVVM?
• Fast interaction with representation layer• Is suitable for events-oriented environment• Close enough to classical MVC
18 May 2017 44
MVVM (Model View ViewModel)
18 May 2017 45
18 May 2017 46
Component / Template Communication (Angular 2)
18 May 2017 47
Component / Template Communication (Angular 2)
18 May 2017 48
Component / Template Communication (Angular 2)
18 May 2017 49
Component / Template Communication (Angular 2)
What’s Wrong With it?
18 May 2017 50
What’s Wrong With it?
18 May 2017 51
• State management• Data mutations
Flux
18 May 2017 52
Flux
Action Dispatcher Store View
18 May 2017 53
User input or event
Flux isn’t only about Front-End
18 May 2017 54
Shortly
• Multiple stores• Store has logic• State can be mutable
18 May 2017 55
Flux Application Demo
18 May 2017 56
HTTPS://GITHUB.COM/SCOTCH-IO/REACT-FLUX-CART
Flux
18 May 2017 57
Redux
18 May 2017 58
Redux is not a pattern itself!
18 May 2017 59
Redux is a library. A library which partly implements Flux.
18 May 2017 60
Redux
View
Actions
ReducerStore
State
18 May 2017 61
What is State?
18 May 2017 62
What is Reducer?
18 May 2017 63
• It’s a pure function
Shortly
• State tree instead of multiple states• Pure function as reducers• Time Travel• Redux has no dispatcher entity, its store exposes API to
dispatch actions• The most logical are in reducers
18 May 2017 64
What Does React Components Look Like
18 May 2017 65
HTTPS://GITHUB.COM/QUANGBUULE/REDUX-EXAMPLE
Functional Programming
• No side-effects.• Immutable data structures.
18 May 2017 66
Immutability
• No function should change anything outside it.• Every function should return a new value.• Function shouldn’t modify it’s arguments.
18 May 2017 67
18 May 2017 68
Mutable
18 May 2017 69
Mutable
18 May 2017 70
Mutable
18 May 2017 71
Mutable
18 May 2017 72
Immutable
18 May 2017 73
Immutable
What Are Pure and Impure Functions
18 May 2017 74
Redux
18 May 2017 75
18 May 2017 H T T P : / / W W W . J C H A P R O N . C O M / 2 0 1 5 / 0 8 / 1 4 / G E T T I N G - S T A R T E D - W I T H - R E D U X / 76
Different Patterns – Different Workarounds
• MVC• MVVM• FLUX• REDUX
18 May 2017 77
Object Oriented Programming
Functional Programming
But Technically You Can…
• MVC• MVVM• FLUX• REDUX
18 May 2017 78
Object Oriented Programming
Functional Programming
And What Should We Use?
18 May 2017 79
Components
• Modular Architecture• Scalable
18 May 2017 80
18 May 2017 F O O T E R H E R E 81
18 May 2017 F O O T E R H E R E 82
What’s the Idea?
18 May 2017 83
Questions?
18 May 2017 84
Top Related