CF

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in the course?
While the course is designed to accommodate learners from various backgrounds, a basic understanding of JavaScript and web development concepts is recommended. Familiarity with Single Page Applications (SPAs) and UI testing frameworks will help you get the most out of the course material, such as the lessons on UI testing and architectural principles.
What types of projects will I build during the course?
The course includes hands-on exercises and real-world projects, such as developing a Books List application using the Fast-test Architecture. This practical experience is designed to reinforce your understanding of the core concepts and allow you to apply the architectural principles and testing frameworks covered in the lessons.
Who is the target audience for this course?
This course is ideal for software developers and engineers interested in enhancing their skills in UI architecture and testing. It caters to those looking to deepen their understanding of architectural principles, software design theories, and efficient UI testing methods within the context of developing scalable UI applications.
How does this course compare to similar courses in terms of depth and scope?
The course offers a comprehensive 12-module program that addresses both theoretical insights and practical skills. It covers a broad range of topics, from debugging and data models to advanced state management and test orchestration. With 168 lessons, it provides a thorough understanding of UI architecture and testing, more detailed than many shorter courses.
What specific tools and platforms will I learn to use in this course?
The course includes lessons on using CodeSandbox for running code and testing locally. It also covers various UI testing frameworks and architectural tools, focusing on enhancing your development process and understanding the potential pitfalls of UI testing, such as the dangers of using mocks and the framework trap.
What topics are not covered in this course?
The course does not cover non-JavaScript UI frameworks or server-side architecture. Its focus remains on UI architecture principles, testing methodologies, and building scalable user interfaces, primarily within the JavaScript ecosystem.
How can the skills learned in this course be applied to other courses or career paths?
The architectural principles and testing methodologies taught in this course are applicable beyond UI development. Skills such as managing state, understanding data model layers, and test orchestration can be valuable in various software engineering roles and can serve as a foundation for advanced studies in software architecture and design patterns.