Downloaded 152 times
Uploaded byOleksandr Tryshchenko
Front end architecture patterns
The document discusses an introduction to front-end architecture patterns, covering classic and contemporary patterns in web development. It explores the evolution of web design from server-side rendering to client-side rendering, highlighting the impact of AJAX and modern frameworks. Various architectural patterns such as MVC, MVVM, Flux, and Redux are detailed, emphasizing the importance of modular architecture and state management.
More Related Content
![[NDC17] Kubernetes로 개발서버 간단히 찍어내기](https://cdn.slidesharecdn.com/ss_thumbnails/ndc-170529041601-thumbnail.jpg?width=640&height=640&fit=bounds)
![[150124 박민근] 모바일 게임 개발에서 루아 스크립트 활용하기](https://cdn.slidesharecdn.com/ss_thumbnails/150124-150202223028-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Front end architecture patterns
Front end architecture patterns
- 2. INTRODUCTION TO FRONT-END ARCHITECTURE PATTERNS OleksandrTryshchenko Senior Front-end Developer, DataArt tryshchenko.com
- 3. Agenda • Classic Back-Endarchitecture patterns • Contemporary Front-End architecture patterns 18 May 2017 3
- 4.
- 5. Web 1.0 18 May2017 5 • Server-side rendering • Static pages • ActiveX, java applets
- 6. JavaScript Usage In2004 Usage,% Snow Effect Blinking Effect Something Useful 18 May 2017 6
- 7. JavaScript Usage In2004 18 May 2017 7
- 8. Why didn’t JSEvolve 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 DataLayer 18 May 2017 9 Client Server New HTML document – Page needs to be reloaded.
- 10. User gets page Userperforms 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 Userperforms 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 May2017 12
- 13. Game Changer: AJAX •Microsoft Outlook Web Access • Gmail • Google Maps 18 May 2017 13
- 14. Game Changer: AJAX 18May 2017 14
- 15. Game Changer: 3G,Smartphones • iOS • Android • Windows Phone 18 May 2017 15
- 16. Client-side Rendering • Onecommon 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 18May 2017 17 Client Server Returns XML / JSON with data Updates DOM Tree
- 18. Front-End Frameworks • Hugeamount of code which developers must support • Spaghetti out of callbacks and events • High coupling • Awful encapsulation 18 May 2017 18
- 19. Model View Controller 18May 2017 19
- 20. MVC (Model ViewController) 18 May 2017 20 Model ControllerView
- 21.
- 22. JavaScript is Asynchronous 18May 2017 22
- 23. Sync / Async 18May 2017 23
- 24.
- 25. Asynchronous getData() WHATEVER NEXT … 18 May2017 25 modifyData() displayData() … Waiting For Server Response
- 26.
- 27.
- 28. Workarounds • Callbacks • Promises •Generators • Async / Await • Streams (ReactiveX)* 18 May 2017 28
- 29. 18 May 201729 Callbacks
- 30. 18 May 201730 Promises
- 31. 18 May 201731 ES6 Generators
- 32. 18 May 201732 Async / Await
- 33. Data Exchange • “Vertical”(through components’ composition) • “Horizontal” (through singleton) 18 May 2017 33
- 34. Data Exchange UsingComponents 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 UsingComponents 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 UsingComponents’ 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 UsingSingleton 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.
- 39. Data Exchange UsingSingleton 18 May 2017 39 App User Data Service Transactions Service Products Service Contacts Service etc
- 40. Smart / DumbComponents Contacts Component (Gets Data) Dumb Representation Layer Transactions Component (Gets Data) Dumb Representation Layer 18 May 2017 40
- 41. Event-driven Architecture • Manytypes of user input • Messages from different system components • Timeouts / intervals 18 May 2017 41
- 42. Model View ViewModel 18May 2017 42
- 43. MVVM (Model ViewViewModel) View ViewModel Model 18 May 2017 43 Data Binding Write Read
- 44. Why MVVM? • Fastinteraction with representation layer • Is suitable for events-oriented environment • Close enough to classical MVC 18 May 2017 44
- 45. MVVM (Model ViewViewModel) 18 May 2017 45
- 46. 18 May 201746 Component / Template Communication (Angular 2)
- 47. 18 May 201747 Component / Template Communication (Angular 2)
- 48. 18 May 201748 Component / Template Communication (Angular 2)
- 49. 18 May 201749 Component / Template Communication (Angular 2)
- 50. What’s Wrong Withit? 18 May 2017 50
- 51. What’s Wrong Withit? 18 May 2017 51 • State management • Data mutations
- 52.
- 53. Flux Action Dispatcher StoreView 18 May 2017 53 User input or event
- 54. Flux isn’t onlyabout 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 18May 2017 56 HTTPS://GITHUB.COM/S COTCH-IO/REACT-FLUX- CART
- 57.
- 58.
- 59. Redux is nota pattern itself! 18 May 2017 59
- 60. Redux is alibrary. A library which partly implements Flux. 18 May 2017 60
- 61.
- 62. What is State? 18May 2017 62
- 63. What is Reducer? 18May 2017 63 • It’s a pure function
- 64. Shortly • State treeinstead 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 ReactComponents Look Like 18 May 2017 65 HTTPS://GITHUB.COM/Q UANGBUULE/REDUX- EXAMPLE
- 66. Functional Programming • Noside-effects. • Immutable data structures. 18 May 2017 66
- 67. Immutability • No functionshould 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 201768 Mutable
- 69. 18 May 201769 Mutable
- 70. 18 May 201770 Mutable
- 71. 18 May 201771 Mutable
- 72. 18 May 201772 Immutable
- 73. 18 May 201773 Immutable
- 74. What Are Pureand Impure Functions 18 May 2017 74
- 75.
- 76. 18 May 2017H 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 YouCan… •MVC •MVVM •FLUX •REDUX 18 May 2017 78 Object Oriented Programming Functional Programming
- 79. And What ShouldWe Use? 18 May 2017 79
- 80. Components • Modular Architecture •Scalable 18 May 2017 80
- 81. 18 May 2017F O O T E R H E R E 81
- 82. 18 May 2017F O O T E R H E R E 82
- 83. What’s the Idea? 18May 2017 83
- 84.