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