CourseFlix

UI Architecture Academy

21h 37m 23s
English
Paid

Welcome to the "Academy of UI Architecture", a comprehensive 12-module program designed to empower you with the skills to develop, test, and scale cutting-edge user interfaces. Throughout this course, you'll not only gain theoretical insights but also engage in assessments, hands-on exercises, and create real-world projects to solidify your learning.

Mastering UI Testing

Experience a streamlined approach to testing UI applications, designed to enhance your development process efficiency. By integrating these techniques, you'll find that developing Single Page Applications (SPAs) becomes not just a task, but a pleasure.

Diving into Architectural Principles

Explore the core architectural principles and software design theories essential for scaling your UI application to new heights. This course will equip you with the knowledge to architect applications that can grow and adapt seamlessly as your needs evolve.

About the Author: Logic Room

Logic Room thumbnail

Logic Room is a UK-based front-end engineering teaching brand focused on the architectural and decision-making side of UI engineering — the work that separates a senior front-end engineer from someone who can ship a React component. The platform's distinctive contribution is treating front-end as a serious engineering discipline with its own architecture, testing, and decision-making craft.

The CourseFlix listing carries four Logic Room courses: UI Architecture Academy (the platform's flagship), the accompanying Q&A Calls bonus content, Decision Making & Principles (the soft-skills side of senior engineering), and Scalable TDD & Testing (the testing discipline applied to front-end work).

Material is paid and aimed at intermediate-and-up front-end developers ready to think architecturally about UI work. For broader content, see CourseFlix's Frontend System Design category page.

Watch Online 168 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 168 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (168)
#Lesson TitleDurationAccess
1
Introduction Demo
04:31
2
Debugging Guide
10:32
3
Logic Room API Spec (Books & Authors)
02:41
4
CodeSandbox (Running Code and Testing Locally)
07:59
5
The No. 1 Reason JavaScript UI Testing Fails
13:53
6
The Dangers of UI Testing Mocks
10:04
7
The UI Testing Framework Trap
10:51
8
Bonus- TDD Primer Introduction
06:21
9
Bonus- TDD Primer Demo
19:01
10
Introduction _2
07:24
11
Code Sample Updates
02:30
12
Cornerstone Files
07:29
13
Cornerstone Data Models
06:28
14
Deep Dive - The DTO (Data Transfer Object)
01:51
15
Deep Dive - The Programmers-Domain Model
02:25
16
Deep Dive - The View Model
01:46
17
Why 3 Data Model Layers
06:42
18
Data Model Flow
16:19
19
Demo (Books List with the Fast-test Architecture)
23:42
20
Exercise (Standard + Power-up)
02:17
21
Conclusion
01:40
22
Introduction _3
09:06
23
When to Use - Async-Await
07:21
24
When to Use - Observables
09:25
25
Deep Dive - App State vs Component State
04:25
26
Deep Dive - Managing State
04:45
27
Putting It All Together
04:02
28
Demo
22:22
29
Exercise (Standard + Power-up) _2
02:18
30
Conclusion _2
02:10
31
Introduction _4
01:58
32
Finite State Machine
03:30
33
Black Box
07:19
34
Test Doubles
08:36
35
Reactive Cycles & Async Test-Fake Gateways
08:24
36
Practical Example (Real UI)
07:16
37
Demo (Simple Test Books List)
19:37
38
Exercise (Standard + Power-up) _3
02:10
39
Conclusion _3
02:44
40
Accountability Exercise (1-4)
01:31
41
Introduction _5
02:01
42
Deep Dive - Multi State Control
02:46
43
Deep Dive - Multi Data Loading
02:22
44
Deep Dive - Anchoring
02:57
45
Deep Dive - Pivoting
05:04
46
Deep Dive- Spot Checking
04:07
47
Putting It All Together _2
03:18
48
Exercise (Standard + Power-up) _4
02:01
49
Demo _2
24:44
50
Conclusion _4
02:05
51
Introduction _6
02:19
52
The Problem - Scenario Duplication
04:22
53
The Solution - Test Orchestration
05:17
54
The Solution - Test Partitioning
02:42
55
Warning (Side Effe)
03:29
56
Demo (Books List Public and Private Scenaios)
23:13
57
Conclusion _5
01:41
58
Introduction _7
02:05
59
The Problem - Feature Duplication
01:29
60
The Solution - Test Harness
04:23
61
Demo - Part 1 (Adding Books - Books List)
30:19
62
Demo - Part 2 (Refactoring To The Test Harness)
13:12
63
Demo - Part 3
05:20
64
Exercise (Standard + Power-up) _5
02:35
65
Conclusion _6
01:59
66
Accountability Exercise (2-4)
05:58
67
Introduction _8
06:42
68
Blending MV- Patterns (Basic Explanation)
23:18
69
How The MV- Patterns Work(Advanced Session w-Code)
31:30
70
What Is 'Presentation'.
03:49
71
Bad UI Markup (Part 1) - Inline Formatting
05:40
72
Bad UI Markup (Part 2) - Ambiguous Falsies
02:52
73
Bad UI Markup (Part 3) - Bad Mappings
02:15
74
Bad UI Markup (Part 4) - Obscure Inp
01:59
75
Deep Dive - Separating Concerns
08:56
76
Demo - Part 1
10:59
77
Demo - Part 2
20:33
78
Demo - Part 3 _2
12:36
79
Presenters & ViewModels
01:38
80
Hierarchical ViewModels
03:47
81
Hierarchical ViewModels (Walkthrough)
07:29
82
Exercise (Standard & Power-up)
01:52
83
Conclusion _7
02:46
84
Introduction _9
04:57
85
Frontend Repositories vs Backend Repositories
09:05
86
Flat Models vs Hierarchical Models
11:16
87
Programmers Model Design Process
12:53
88
Demo - Part 1 (The First ViewModel)
20:23
89
Demo - Part 2 (Finishing the First ViewModel)
12:36
90
Demo - Part 3 (The Second ViewModel)
08:56
91
Extending The Programmers Model (Walkthrough)
04:12
92
Programmers Model & Domain Driven Design
07:29
93
Programmers Model & Concentric Architecture(s)
09:50
94
Programmers Model & Model View Architecture(s)
08:11
95
Programmers Model & State
03:35
96
Programmers Model & State (Walkthrough)
02:43
97
Exercise (Standard + Power-up) _6
02:29
98
Conclusion _8
02:26
99
Introduction _10
02:36
100
The OO vs Functional Religious Debate
06:47
101
Timing and Encapsulation
06:18
102
Deep Dive - The Observer Pattern
10:07
103
Deep Dive - The Observer Pattern Demo
11:34
104
Deep Dive - The Observer Pattern Exercise
00:42
105
Deep Dive - Functional Reactive Programming
06:37
106
Reactive Core
06:32
107
Demo (Reactive Core)
08:17
108
Exercise (Reactive Core)
00:36
109
Reactive Framework Radar
04:53
110
Reactive View
07:51
111
Demo - Part 1 (Reactive View)
22:56
112
Demo - Part 2 (Reactive View)
13:10
113
Exercise (Reactive View)
02:12
114
The Flow and Types of State
08:54
115
Reactive Forms - Theory
03:40
116
Reactive Forms (Demo-Walkthrough)
06:38
117
Conclusion _9
02:44
118
Accountability Exercise (3-4)
00:56
119
What Is 2-Way Binding (Bonus Video)
06:09
120
Introduction _11
03:42
121
What is a Dependency.
05:24
122
OO vs Functional Dependencies
03:46
123
Dependency Inversion & Inversion of Control
07:07
124
Dynamic Dependency Strategies
06:40
125
Why Use an IOC Container
08:29
126
Demo (Building an IOC Container)
15:50
127
Exercise (Building an IOC Container)
01:00
128
Dependency Lifecycle (Singleton vs Transient)
10:04
129
Composition Route
06:24
130
Advanced Dependency Inversion
17:22
131
Case Study- Inversify IOC Container
19:46
132
Demo (Inversify)
15:10
133
Exercise (Inversify)
00:56
134
Circular Dependencies
06:48
135
Circular Dependencies (Walkthrough)
08:35
136
What Should Go Into The Injector.
01:07
137
Conclusion _10
02:09
138
Introduction _12
02:20
139
Providers (HOC & Hooks Injection)
01:33
140
Mobx Bindings
01:30
141
Observe vs Computed in Mobx (Community Question)
04:30
142
Deep Dive - What is Routing.
05:46
143
View Routing vs Application Routing
11:49
144
Logic Room Router (Walkthrough)
05:28
145
Pitfalls of Static Declaration
14:45
146
Choosing the Right Abstraction
10:35
147
Navigation (Walkthrough)
18:26
148
Building Complex Relationships
05:05
149
Hierarchical Presenters
05:43
150
Polymorphic Presenters
04:48
151
Hierarchical Presenters (Walkthrough)
02:34
152
Overview
04:59
153
Reactive Update Cycles
07:29
154
Challenges
03:12
155
3rd Party Controls (Walkthrough)
24:44
156
Demo - Part 1 (Abstract Router & Navigation)
12:49
157
Demo - Part 2 (Abstract Router & Navigation)
32:39
158
Demo - Part 3 (Abstract Router & Navigation)
12:00
159
Demo - Part 4 (Abstract Router & Navigation)
23:29
160
Exercise (Standard + Power-Up) _7
05:58
161
Conclusion _11
03:13
162
Introduction System Specification
03:18
163
Introduction What Are The API Calls
01:42
164
Bootstrapping The Black Box (Part 1 of 5)
18:50
165
Fast Testing (Part 2 of 5)
08:00
166
Books Architecture (Part 4 of 5)
16:13
167
Authors Architecture (Part 5 of 5)
12:29
168
Accountability Exercise (4-4)
04:04
Unlock unlimited learning

Get instant access to all 167 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Books

Read Book UI Architecture Academy

#TitleTypeOpen
11. Syllabus —
22. The 5 Principles of UI Architecture —
33. Think Like A UI Architect —
44. Architecture_Guide —
55. Mobx-Mastery Code-dojo —
66. What is a fast test —
77. 1 module. Exercise (Standard + Power-up) —
88. 2 module. Exercise (Standard + Power-up) —
99. 3 module. Exercise (Standard + Power-up) —
1010. 4 module. Exercise (Standard + Power-up) —
1111. 5 module. Exercise (Standard + Power-up) —
1212. 6 module. Exercise (Standard + Power-up) —
1313. 7 module. Exercise (Standard + Power-up) —
1414. 8 module. Exercise (Standard + Power-up) —
1515. Deep Dive The Observer Pattern Exercise —
1616. 9.1 Exercise (Reactive View) —
1717. 9.2 Exercise (Reactive View) —
1818. 10 Exercise (Building an IOC Container) —
1919. 10. Exercise (Inversify) - 13_inversify_exercise —
2020. 11. Exercise (Standard + Power-Up) —
2121. 6_full_architecture_guide —

Course content

168 lessons · 21h 37m 23s
Show all 168 lessons
  1. 1 Introduction 04:31
  2. 2 Debugging Guide 10:32
  3. 3 Logic Room API Spec (Books & Authors) 02:41
  4. 4 CodeSandbox (Running Code and Testing Locally) 07:59
  5. 5 The No. 1 Reason JavaScript UI Testing Fails 13:53
  6. 6 The Dangers of UI Testing Mocks 10:04
  7. 7 The UI Testing Framework Trap 10:51
  8. 8 Bonus- TDD Primer Introduction 06:21
  9. 9 Bonus- TDD Primer Demo 19:01
  10. 10 Introduction _2 07:24
  11. 11 Code Sample Updates 02:30
  12. 12 Cornerstone Files 07:29
  13. 13 Cornerstone Data Models 06:28
  14. 14 Deep Dive - The DTO (Data Transfer Object) 01:51
  15. 15 Deep Dive - The Programmers-Domain Model 02:25
  16. 16 Deep Dive - The View Model 01:46
  17. 17 Why 3 Data Model Layers 06:42
  18. 18 Data Model Flow 16:19
  19. 19 Demo (Books List with the Fast-test Architecture) 23:42
  20. 20 Exercise (Standard + Power-up) 02:17
  21. 21 Conclusion 01:40
  22. 22 Introduction _3 09:06
  23. 23 When to Use - Async-Await 07:21
  24. 24 When to Use - Observables 09:25
  25. 25 Deep Dive - App State vs Component State 04:25
  26. 26 Deep Dive - Managing State 04:45
  27. 27 Putting It All Together 04:02
  28. 28 Demo 22:22
  29. 29 Exercise (Standard + Power-up) _2 02:18
  30. 30 Conclusion _2 02:10
  31. 31 Introduction _4 01:58
  32. 32 Finite State Machine 03:30
  33. 33 Black Box 07:19
  34. 34 Test Doubles 08:36
  35. 35 Reactive Cycles & Async Test-Fake Gateways 08:24
  36. 36 Practical Example (Real UI) 07:16
  37. 37 Demo (Simple Test Books List) 19:37
  38. 38 Exercise (Standard + Power-up) _3 02:10
  39. 39 Conclusion _3 02:44
  40. 40 Accountability Exercise (1-4) 01:31
  41. 41 Introduction _5 02:01
  42. 42 Deep Dive - Multi State Control 02:46
  43. 43 Deep Dive - Multi Data Loading 02:22
  44. 44 Deep Dive - Anchoring 02:57
  45. 45 Deep Dive - Pivoting 05:04
  46. 46 Deep Dive- Spot Checking 04:07
  47. 47 Putting It All Together _2 03:18
  48. 48 Exercise (Standard + Power-up) _4 02:01
  49. 49 Demo _2 24:44
  50. 50 Conclusion _4 02:05
  51. 51 Introduction _6 02:19
  52. 52 The Problem - Scenario Duplication 04:22
  53. 53 The Solution - Test Orchestration 05:17
  54. 54 The Solution - Test Partitioning 02:42
  55. 55 Warning (Side Effe) 03:29
  56. 56 Demo (Books List Public and Private Scenaios) 23:13
  57. 57 Conclusion _5 01:41
  58. 58 Introduction _7 02:05
  59. 59 The Problem - Feature Duplication 01:29
  60. 60 The Solution - Test Harness 04:23
  61. 61 Demo - Part 1 (Adding Books - Books List) 30:19
  62. 62 Demo - Part 2 (Refactoring To The Test Harness) 13:12
  63. 63 Demo - Part 3 05:20
  64. 64 Exercise (Standard + Power-up) _5 02:35
  65. 65 Conclusion _6 01:59
  66. 66 Accountability Exercise (2-4) 05:58
  67. 67 Introduction _8 06:42
  68. 68 Blending MV- Patterns (Basic Explanation) 23:18
  69. 69 How The MV- Patterns Work(Advanced Session w-Code) 31:30
  70. 70 What Is 'Presentation'. 03:49
  71. 71 Bad UI Markup (Part 1) - Inline Formatting 05:40
  72. 72 Bad UI Markup (Part 2) - Ambiguous Falsies 02:52
  73. 73 Bad UI Markup (Part 3) - Bad Mappings 02:15
  74. 74 Bad UI Markup (Part 4) - Obscure Inp 01:59
  75. 75 Deep Dive - Separating Concerns 08:56
  76. 76 Demo - Part 1 10:59
  77. 77 Demo - Part 2 20:33
  78. 78 Demo - Part 3 _2 12:36
  79. 79 Presenters & ViewModels 01:38
  80. 80 Hierarchical ViewModels 03:47
  81. 81 Hierarchical ViewModels (Walkthrough) 07:29
  82. 82 Exercise (Standard & Power-up) 01:52
  83. 83 Conclusion _7 02:46
  84. 84 Introduction _9 04:57
  85. 85 Frontend Repositories vs Backend Repositories 09:05
  86. 86 Flat Models vs Hierarchical Models 11:16
  87. 87 Programmers Model Design Process 12:53
  88. 88 Demo - Part 1 (The First ViewModel) 20:23
  89. 89 Demo - Part 2 (Finishing the First ViewModel) 12:36
  90. 90 Demo - Part 3 (The Second ViewModel) 08:56
  91. 91 Extending The Programmers Model (Walkthrough) 04:12
  92. 92 Programmers Model & Domain Driven Design 07:29
  93. 93 Programmers Model & Concentric Architecture(s) 09:50
  94. 94 Programmers Model & Model View Architecture(s) 08:11
  95. 95 Programmers Model & State 03:35
  96. 96 Programmers Model & State (Walkthrough) 02:43
  97. 97 Exercise (Standard + Power-up) _6 02:29
  98. 98 Conclusion _8 02:26
  99. 99 Introduction _10 02:36
  100. 100 The OO vs Functional Religious Debate 06:47
  101. 101 Timing and Encapsulation 06:18
  102. 102 Deep Dive - The Observer Pattern 10:07
  103. 103 Deep Dive - The Observer Pattern Demo 11:34
  104. 104 Deep Dive - The Observer Pattern Exercise 00:42
  105. 105 Deep Dive - Functional Reactive Programming 06:37
  106. 106 Reactive Core 06:32
  107. 107 Demo (Reactive Core) 08:17
  108. 108 Exercise (Reactive Core) 00:36
  109. 109 Reactive Framework Radar 04:53
  110. 110 Reactive View 07:51
  111. 111 Demo - Part 1 (Reactive View) 22:56
  112. 112 Demo - Part 2 (Reactive View) 13:10
  113. 113 Exercise (Reactive View) 02:12
  114. 114 The Flow and Types of State 08:54
  115. 115 Reactive Forms - Theory 03:40
  116. 116 Reactive Forms (Demo-Walkthrough) 06:38
  117. 117 Conclusion _9 02:44
  118. 118 Accountability Exercise (3-4) 00:56
  119. 119 What Is 2-Way Binding (Bonus Video) 06:09
  120. 120 Introduction _11 03:42
  121. 121 What is a Dependency. 05:24
  122. 122 OO vs Functional Dependencies 03:46
  123. 123 Dependency Inversion & Inversion of Control 07:07
  124. 124 Dynamic Dependency Strategies 06:40
  125. 125 Why Use an IOC Container 08:29
  126. 126 Demo (Building an IOC Container) 15:50
  127. 127 Exercise (Building an IOC Container) 01:00
  128. 128 Dependency Lifecycle (Singleton vs Transient) 10:04
  129. 129 Composition Route 06:24
  130. 130 Advanced Dependency Inversion 17:22
  131. 131 Case Study- Inversify IOC Container 19:46
  132. 132 Demo (Inversify) 15:10
  133. 133 Exercise (Inversify) 00:56
  134. 134 Circular Dependencies 06:48
  135. 135 Circular Dependencies (Walkthrough) 08:35
  136. 136 What Should Go Into The Injector. 01:07
  137. 137 Conclusion _10 02:09
  138. 138 Introduction _12 02:20
  139. 139 Providers (HOC & Hooks Injection) 01:33
  140. 140 Mobx Bindings 01:30
  141. 141 Observe vs Computed in Mobx (Community Question) 04:30
  142. 142 Deep Dive - What is Routing. 05:46
  143. 143 View Routing vs Application Routing 11:49
  144. 144 Logic Room Router (Walkthrough) 05:28
  145. 145 Pitfalls of Static Declaration 14:45
  146. 146 Choosing the Right Abstraction 10:35
  147. 147 Navigation (Walkthrough) 18:26
  148. 148 Building Complex Relationships 05:05
  149. 149 Hierarchical Presenters 05:43
  150. 150 Polymorphic Presenters 04:48
  151. 151 Hierarchical Presenters (Walkthrough) 02:34
  152. 152 Overview 04:59
  153. 153 Reactive Update Cycles 07:29
  154. 154 Challenges 03:12
  155. 155 3rd Party Controls (Walkthrough) 24:44
  156. 156 Demo - Part 1 (Abstract Router & Navigation) 12:49
  157. 157 Demo - Part 2 (Abstract Router & Navigation) 32:39
  158. 158 Demo - Part 3 (Abstract Router & Navigation) 12:00
  159. 159 Demo - Part 4 (Abstract Router & Navigation) 23:29
  160. 160 Exercise (Standard + Power-Up) _7 05:58
  161. 161 Conclusion _11 03:13
  162. 162 Introduction System Specification 03:18
  163. 163 Introduction What Are The API Calls 01:42
  164. 164 Bootstrapping The Black Box (Part 1 of 5) 18:50
  165. 165 Fast Testing (Part 2 of 5) 08:00
  166. 166 Books Architecture (Part 4 of 5) 16:13
  167. 167 Authors Architecture (Part 5 of 5) 12:29
  168. 168 Accountability Exercise (4-4) 04:04

Related courses

  • Frontend System Design thumbnail

    Frontend System Design

    Sources: Prashant Yadav (LearnersBucket)
    Become the Alpha frontend engineer by designing 30+ distinct web applications and all the fundamentals. Learn the advanced concepts, strategies, techniques, and
    5 / 5
  • Module Federation: Microservices for the Frontend thumbnail

    Module Federation: Microservices for the Frontend

    Sources: Michael Guay
    Learn how Module Federation helps in building a microservices architecture for the frontend. Understand the setup of a modular interface and independent...
    1 hour 20 minutes 26 seconds
  • Frontend architecture and patterns bootcamp thumbnail

    Frontend architecture and patterns bootcamp

    Sources: Udemy
    This comprehensive course covers a wide range of software architecture topics, including component-oriented patterns, Single Page Application (SPA)...
    4 hours 21 minutes 43 seconds

Frequently asked questions

What is UI Architecture Academy about?
Welcome to the "Academy of UI Architecture" , a comprehensive 12-module program designed to empower you with the skills to develop, test, and scale cutting-edge user interfaces. Throughout this course, you'll not only gain theoretical…
Who teaches UI Architecture Academy?
UI Architecture Academy is taught by Logic Room. You can find more courses by this instructor on the corresponding source page.
How long is UI Architecture Academy?
UI Architecture Academy contains 168 lessons with a total runtime of 21 hours 37 minutes. All lessons are available to watch online at your own pace.
Is UI Architecture Academy free to watch?
UI Architecture Academy is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch UI Architecture Academy online?
UI Architecture Academy is available to watch online on CourseFlix at https://courseflix.net/course/ui-architecture-academy. The page hosts every lesson with the integrated video player; no download is required.