During the talk, I've explained the difference between different approaches in contemporary JavaScript Front-End development as well as browser behavior itself. It causes different approaches of software development and makes JavaScript so "different" for newcomers. My presentation made to help back-end developers to understand what is

2. INTRODUCTION TO
FRONT-END ARCHITECTURE
PATTERNS
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt
tryshchenko.com

3. Agenda
• Classic Back-End architecture patterns
• Contemporary Front-End architecture patterns
18 May 2017 3

4. History
18 May 2017 4

5. Web 1.0
18 May 2017 5
• Server-side rendering
• Static pages
• ActiveX, java applets

6. JavaScript Usage In 2004
Usage,%
Snow Effect Blinking Effect Something Useful
18 May 2017 6

7. JavaScript Usage In 2004
18 May 2017 7

8. 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

9. Server-side Rendering
Browser
Rendering
Layer
Logic
Layer Data Layer
18 May 2017 9
Client Server
New HTML document – Page
needs to be reloaded.

10. 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

11. 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

12. What Changed?
18 May 2017 12

13. Game Changer: AJAX
• Microsoft Outlook Web Access
• Gmail
• Google Maps
18 May 2017 13

14. Game Changer: AJAX
18 May 2017 14

15. Game Changer: 3G, Smartphones
• iOS
• Android
• Windows Phone
18 May 2017 15

16. 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

17. Client-side Rendering
Browser
Front-End
Application
Data
Exchange
Layer
Logic
Layer
Data Layer
18 May 2017 17
Client Server
Returns XML / JSON with data
Updates DOM Tree

18. 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

19. Model View Controller
18 May 2017 19

20. MVC (Model View Controller)
18 May 2017 20
Model
ControllerView

21. MVC?
18 May 2017 21

22. JavaScript is Asynchronous
18 May 2017 22

23. Sync / Async
18 May 2017 23

24. Synchronous
getData() modifyData() displayData()
18 May 2017 24

25. Asynchronous
getData()
WHATEVER
NEXT …
18 May 2017 25
modifyData() displayData() …
Waiting For Server
Response

26. 18 May 2017 26

27. 18 May 2017 27

28. Workarounds
• Callbacks
• Promises
• Generators
• Async / Await
• Streams (ReactiveX)*
18 May 2017 28

29. 18 May 2017 29
Callbacks

30. 18 May 2017 30
Promises

31. 18 May 2017 31
ES6 Generators

32. 18 May 2017 32
Async / Await

33. Data Exchange
• “Vertical” (through components’ composition)
• “Horizontal” (through singleton)
18 May 2017 33

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 34

35. 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

36. 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)

37. Data Exchange Using Singleton
Main
component
(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)

38. Difference?
18 May 2017 38

39. Data Exchange Using Singleton
18 May 2017 39
App User Data
Service
Transactions
Service
Products Service
Contacts Service
etc

40. Smart / Dumb Components
Contacts
Component
(Gets Data)
Dumb
Representation
Layer
Transactions
Component
(Gets Data)
Dumb
Representation
Layer
18 May 2017 40

41. Event-driven Architecture
• Many types of user input
• Messages from different system components
• Timeouts / intervals
18 May 2017 41

42. Model View ViewModel
18 May 2017 42

43. MVVM (Model View ViewModel)
View ViewModel Model
18 May 2017 43
Data Binding
Write
Read

44. Why MVVM?
• Fast interaction with representation layer
• Is suitable for events-oriented environment
• Close enough to classical MVC
18 May 2017 44

45. MVVM (Model View ViewModel)
18 May 2017 45

46. 18 May 2017 46
Component / Template Communication (Angular 2)

47. 18 May 2017 47
Component / Template Communication (Angular 2)

48. 18 May 2017 48
Component / Template Communication (Angular 2)

49. 18 May 2017 49
Component / Template Communication (Angular 2)

50. What’s Wrong With it?
18 May 2017 50

51. What’s Wrong With it?
18 May 2017 51
• State management
• Data mutations

52. Flux
18 May 2017 52

53. Flux
Action Dispatcher Store View
18 May 2017 53
User input or event

54. Flux isn’t only about Front-End
18 May 2017 54

55. Shortly
• Multiple stores
• Store has logic
• State can be mutable
18 May 2017 55

56. Flux Application Demo
18 May 2017 56
HTTPS://GITHUB.COM/S
COTCH-IO/REACT-FLUX-
CART

57. Flux
18 May 2017 57

58. Redux
18 May 2017 58

59. Redux is not a pattern itself!
18 May 2017 59

60. Redux is a library. A library which
partly implements Flux.
18 May 2017 60

61. Redux
View
Actions
ReducerStore
State
18 May 2017 61

62. What is State?
18 May 2017 62

63. What is Reducer?
18 May 2017 63
• It’s a pure function

64. 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

65. What Does React Components Look
Like
18 May 2017 65
HTTPS://GITHUB.COM/Q
UANGBUULE/REDUX-
EXAMPLE

66. Functional Programming
• No side-effects.
• Immutable data structures.
18 May 2017 66

67. 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

68. 18 May 2017 68
Mutable

69. 18 May 2017 69
Mutable

70. 18 May 2017 70
Mutable

71. 18 May 2017 71
Mutable

72. 18 May 2017 72
Immutable

73. 18 May 2017 73
Immutable

74. What Are Pure and Impure Functions
18 May 2017 74

75. Redux
18 May 2017 75

76. 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

77. Different Patterns – Different
Workarounds
•MVC
•MVVM
•FLUX
•REDUX
18 May 2017 77
Object Oriented Programming
Functional Programming

78. But Technically You Can…
•MVC
•MVVM
•FLUX
•REDUX
18 May 2017 78
Object Oriented Programming
Functional Programming

79. And What Should We Use?
18 May 2017 79

80. Components
• Modular Architecture
• Scalable
18 May 2017 80

81. 18 May 2017 F O O T E R H E R E 81

82. 18 May 2017 F O O T E R H E R E 82

83. What’s the Idea?
18 May 2017 83

84. Questions?
18 May 2017 84