Dear UI Engineer,
To be able to ship web applications reliably, consistently and confidently is the pinnacle of what we aspire to do. It is not only why we are paid, but it makes us fulfilled as professionals too!
But… I KNOW, you get frustrated because as your codebase grows your UI architecture doesn’t.
Maybe you have implemented all the shiny UI frameworks like React, Angular or Vue. Or perhaps you reached out to libraries like Redux and RXJS to help you manage your state. Maybe you have begun writing complex end-2-end tests in whatever test framework is the _flavour_of_the_month_.
Sadly, these things were meant to help you but they haven’t…
Because your code is turning into a jumbled mish-mash that makes you feel queasy.
You MUST know what I am talking about … right?
That slow anxious feeling that comes up in your gut because your code and its structure is becoming more complex and MORE difficult to work with as time goes on. Instead of becoming EASIER.
Perhaps… this is you?
The thing is… a professional UI developer should NOT be having these problems.
They SHOULD have the ability to consistently grow, scale and test a significantly large codebase. With maintainability, scalability and high-quality code no matter how big it gets.
But… the sad fact is many of us just haven’t figured out how to do this… yet!
We keep focussing on all these fancy ‘UI frameworks’ and these tools only to be let down time and time again at the sight of our own confused and sprawling codebases!
“He Who Chases Two Rabbits Catches None” – Confucius
Well, never fear my engineering friend … this is going to change!
You could follow a proven process that would help you become a UI Architect by learning to leverage the deep relationship between architecture and testability.
In a way that… brings you pleasure not PAIN?
All of these things are what a good UI architect can do! Being a UI architect is a skill, and like all skills… they can be learned!
My name is Pete Heard; I am the founder of Logic Room a REAL consulting and training company based in Reading, UK.
At Logic Room we help engineers transform their careers by teaching them how to break down complex engineering problems using simple and repeatable processes.
Let me tell you how it started...
It was 2014 and I got a new gig as a consultant engineer; I was ‘told’ by the manager interviewing me that his team was building a complex UI app and had the cleanest code!
I excitedly joined the project but within days I realised his team had BIG problems…
I quickly found out the engineers WERE doing all the right things technically. However they were all complaining that their architecture was confusing and their testing efforts were getting worse over time not better. NONE of them were happy with the results!
There is nothing that annoys me more than seeing intelligent engineers who cannot connect with their work. So … I decided to fix this problem…
I realised that the one main problem that they seemed to have was that their approach to development and code structure varied wildly between each engineer.
Some of them were writing unit tests to prove their code instead of writing end-2-end tests. Some of them were using object-oriented approaches some of them using functional. Some of them were using several data models in their architecture while some were using none.
It was a patchwork of different conceptual approaches that nobody seemed to agree on. I realised what this team needed was a methodology that would holistically let them build, architect AND test their code in one simple process. This ‘guard-rails’ technique would NOT focus on UI frameworks but instead on architecture, because by removing the UI framework from the architecture we would give total control to the engineers.
I began documenting a blueprint and approach for this team and we IMMEDIATELY got spectacular results. Because it was giving everyone the same basic philosophy and foundation to work from. We were able to suddenly all start communicating and architecting our code and tests in a consistent and simple way!
I have spent many years since that project refining this blueprint, and today this is what I want to talk to you about...
I have never met an engineer who's told me they are truly happy with their ability to grow code consistently - no matter how large the codebase gets.
What do you want from your career?
Do you want to keep pretending that you like testing when really you think it sucks?
Would you like to be able to do work YOU LOVE? At the speed you NEED TO?
It IS possible to grow your apps reliably.
The problem is; everyone keeps teaching you the detail and technicality of tooling and frameworks instead of the ‘PHILOSOPHY' of architecture and testability.
RIGHT NOW, before you my fellow engineer…
You have the OPPORTUNITY to purchase from me the exact method, blueprint and APPROACH that I have developed which will….
GUARANTEE … that WHEN you build your UI apps you can do it consistently, long term, with fluidity and with grace. But most importantly… happily!
Today I am excited to present our FLAGSHIP coaching programme called the 'UI Architecture Academy'.
Here is why it's special...
Most front-end training on the market presents you with trivial approaches which do not help you grow your code, because they take you down the wrong path from day one.
They give bad advice because they force you to follow the UI framework (React, Angular or Vue etc).
And because of this you have the frameworks opinion FORCED on you which means you are not in control.
These 'traditional' approaches significantly slow you down because you end up spending too much time focussing on the WRONG things.
In our ‘UI Architecture Academy’ we do things differently.
We show you how to focus on the RIGHT things, in the right way and avoid being forced to follow the frameworks.
We do this because we want to show you what a good architect does...
Because they apply architectural rules as they build their apps, they will always apply a thinking first paradigm not a framework or technology first one.
This is because architecture isn’t about technology, it’s about the human brain, specifically how we understand the problem not how the framework understands it.
When we focus on our brain to build code like this it has two monumental advantages.
Firstly, the architecture stays simple enough to understand.
Secondly, the code will always be easier to test.
By following an architectural first approach you will see that we can keep refining our code. This means that when we need to maintain and test it, we can. No matter how complicated it gets. This is the exact approach that I started introducing into that team all those years ago.
The way we have designed the approach you will learn is to take all the knowledge you could get from books, blogs, gurus and training. Then we have stripped out the parts you actually need, and dumped the parts you don’t.
In our training you will find the right parts from the following topics and sources…
We wrap it up and explain it in the right way. In one holistic system which lets you learn and apply in an efficient manner, instead of struggling to figure it out alone - like I had to!
The coaching and mentoring is delivered with 4 elemental building blocks;
During the programme, we deliver you core methodology training which will accelerate you from a simple framework engineer to an architect engineer.
The entire mentorship programme consists of a two part system which are designed to show you, to support you, but most importantly to challenge you to be a UI Architect!
But… unlike most companies you train with we are very proud to tell you that we don’t just let our students rush in and learn what they want.
No, what we do at Logic Room is to start with what they NEED.
And we know as experts in the field of UI architecture, that our students need to learn the thing that is the highest priority FIRST, you already know what I’m about to say.
That’s right, you need to learn testing...
In the first 1-6 modules we learn to make testing a UI app so fast, you will never want to ship another SPA without doing it!
In this first week we explore what you ‘think’ software architecture is about and what it is ‘really’ about…
We learn why testing is so slow because you do not have a go-to ruleset to help you lay out your files and data structures in a way that is consistent and repeatable, no matter how large your components become.
You can stop relying on complicated frameworks like Redux and instead learn the rules that stop your code and tests getting TANGLED.
Then we learn how to map UI architecture to your BRAIN and not React/Angular or Vue meaning you can process it faster.
We know the grisly mess that asynchronous programming causes!
If we aren’t deep in spaghetti call-backs then we are trying to swat a promise!
Instead, we learn to manually create and then leverage the observer pattern to gain fine grain control of our app state and therefore get TOTAL control over the Single Page App, and that means your TESTS become easy to READ and WRITE.
In training slide...
Now you have the requisite architecture knowledge, it’s time to write your first simple test.
But unless you have a repeatable pattern for making your test call your production code in EXACTLY the same way as the PRODUCTION code does, your tests are WORTHLESS.
Luckily in this module we learn the control patterns to fully control our app that so that it will load data and track state. Then we leverage the power of ‘black box’ design and test doubles to setup a clean, and clear System Under Test (SUT).
How DO we test COMPLEX app events such as user actions, API responses and application transitions in a single test?
We take principles from the last module and learn how to create consistent test code. This can then layer all of our app events in successive steps which we control without our tests becoming fragmented.
In this lesson we will learn how to build our complex tests meaning no matter the requirement that the suits from the business hand you, you can test it like a BOSS!
In training slide...
Testing at scale becomes slow when you cannot easily VISUALISE multiple paths through your features.
In this module we will learn how you can leverage patterns to build re-usable blocks of setup code in your test suite. It will give you confidence that your production apps are being tested like a real production app, WITHOUT coupling to the framework.
Wave bye-bye to duplicate code and lost ideas, and say hello to tests getting FASTER to write the more you have NOT SLOWER.
Ever wondered how you can do end-to-end testing in completely different parts of your UI without using end-2-end frameworks like Cypress, Selenium or Protractor?
Probably not, because you didn’t even think it was possible…right?
In this final module you will learn how to test ACROSS your UI that has multiple components, states and views.
Then you will find out how to make your tests work without using end-2-end tests, horrible snapshots OR confusing UI mocks – in fact to do this testing you won’t even need to use React or Angular – how cool is that?
This final module is the mastery to the first part of the training and you WILL walk away with your mind BLOWN.
The final technique you learn here will transform you from an engineer that says you DO TESTING to a UI Architect that says you LOVE TESTING!
In training slide...
In modules 7-12 of the training we further advance your knowledge and show you the architectural rules and software design theory that will let you scale up your UI app to any size.
Do you find yourself spending too much time wrestling with React props? Got way too many complex objects in Redux? or perhaps you end up always fighting with Angular directives?
You could have... a presentation problem!
Left unchecked a UI app subtly buries too much information in the markup of your chosen UI framework. This week is going to blow-the-lid off this simple rule; good architecture starts with good presentation.
In this module we learn the fundamental difference between hierarchical data models and flat models, and how we can detect and fix bad views through the power of better presentation architecture.
In this module we will;
Let's face it, with all the hot air about software architecture why does nobody ever give us the ONE rule which makes all the difference?
In this module you will learn what that ONE most important rule in a UI app is! By discovering how an engineer cannot ‘see’ architecture unless they can 'control' it!
We do this by taking what we learned in the last module and creating 'breathing space' in our architecture. Then we can centralise a conceptual model which is designed to let us ‘think’. Trust me, if there is one thing you want to get better at when you are building architecture it's THINK, so...
In this module we will;
In training slide...
We do NOT want our UI apps to behave unpredictably and start throwing out data in odd situations or at the wrong time. Because apart from being stressful it also makes testing near on... __impossible__!
We will learn to leverage the paradigm of functional reactive architecture to cleanly solve both timing AND encapsulation issues properly. We are going to show you how to force a 'one-way' data flow on your app but without using a sea of complex tools. We will demonstrate to you the simplest way using the lightweight MOBX framework (but you can use any other FRP framework once you learn the rules).
So, in this module we go deep on the following;
If you have been shipping UI apps for more than a few years you will have seen the dizzying array of ways that module dependency loading works. Dependency loading is critical to a UI app, but the normal module loading tools do not give us the flexibility we need to SCALE because we are not in 'control' of the lifecycle.
We need control because often our dependencies are hard to test and hard to extend. For this reason we must have a way to centralise and dynamically load some of them. This will enable more flexible and testable code.
Learning all the subtle differences between the sub-topics of Dependency Inversion, Dependency Injection and Inversion of Control will enable you to confidently apply dependency management in your UI apps.
So, this module takes you deep into;
In training slide...
Do you dream of being able to create a multi-level, location aware, and configurable navigation menu and sub-menu-system, driven by simple JSON that works on both desktop AND mobile screens WITHOUT having to duplicate HTML?
Pssst, only JOKING 😃
That's exactly the sort of power I want in my UI apps!
If THIS is the sort of power you also crave, then don't fear this module... ABSTRACTIONS is what you need!
Everything you have learned so far has been helping you connect up the major architectural concepts in your UI app confidently. But you are going to need to manage some 'cross-cutting' concerns too. For example there are common features that almost every UI app needs; such as routing, navigation and 3rd party controls.
At best engineers tightly couple these concerns to the wrong places using the wrong interfaces. At worst they don't even have a design which defines them in the first place! They just bury these subtle but HIGHLY important abstractions in all the other parts of their app, like in-the-markup, noooo....
So, in this module we teach you how to interface your highly scalable UI architecture to all the cross cutting concerns. We do this by ABSTRACTING them into clear and unambiguous patterns that... WORK. We are going to tear apart your very real integration concerns that you WILL encounter in the wild, we cover;
By this point in the academy you have now learned all of the foundation and critical knowledge you are going to need to confidently tackle and architect complex UI apps!
But your work isn't done until you have completed a 'final project' where you will holistically cement the knowledge you have learned so far! We have designed this final project to give you exposure to all the interlocking concepts you need.
In this module we will complete the 'Books and Authors' sample app by going through 4 stages together and building it one stage at a time.
During the mentoring programme you will get access to the advanced technology stack code samples, strategies for team leadership and career coaching to accelerate your seniority and salary.
Advanced Tech Stack Integration
Get the code samples and integration training for next generation tools and popular frameworks such as NextJs, Angular, React-Redux/Redux, VueJS, Micro-frontends, Apollo-GraphQl, Svelte.
Strategies For Team Leadership
Weekly calls to help you influence your team or company to take up new approaches.
Architect Career Accellerator
Build an online portfolio, create evergreen presentation designed to open doors in your current job or community. Or for the adventurous learn secret skills in personal branding and influence that will put your CV to the top of the hiring managers pile!
Anyone who has ever trained with us will tell you we are different to most coaching companies because we do not claim to be ‘Gurus’.
Instead we teach simple ways of doing complex work that are not based on theory, they are based on the battle tested experience of real projects that our company does commercially!
Yes, that’s right.
Myself and my team use these techniques that I teach on actual live projects for companies that we consult with.
This means that you are not gaining information which is based on subjective opinion but on the hard-learned lessons of commercial reality and real case-studies.
This means our training is simpler because we don’t have time to teach our clients pointless theory when they have actual deadlines to hit.
This means you get results first not theory.
Learn each low-level code structure rule from our training in simple exercises with a personal cloud API deployed for each student. You combine these rules in the final project giving you the conclusive skills you need to begin scaling and testing your production apps infinitely!
“Anyone thinking in enrolling in the Academy should know it can save you a lot of time in understanding the entire picture of Architecture and Testing in UI apps.”
“It’s been a game-changer now I’ve done this course … I have even sent my engineers back to Logic Room for the same programme!”
“Great course! you should attend this training if you would like to know more about clean frontend architecture and testing.”
What is the biggest barrier to learning something new?
It's easy to buy a course on Udemy and file it away in your todo list (never to see it again) but if you really want to succeed in life you need a 'coach'.
The secret sauce at Logic Room is that our content was put together by people that actually use what we teach every day.
So you will get personal access to our coaches every single week! It's super easy to do you just join a call on Zoom with us and we will do a deep dive for whatever you need from us!
This means you will not have to worry about struggling to integrate your very real production concerns, or architectural challenges ever again.
You can ask our experts anything; you can even ask us about leadership and building the team of your dreams!
And don't worry if you can't make the call simply send us your questions and we will record the answer for you to pick up at a time that is convenient!
At Logic Room we have stretched ourselves to bring you the most exclusive UI Architecture community designed to support you...
When you join the programme, we will be able to track your progress in real-time through daily updates as you complete the material.
Then you will be invited to a private mentoring channel during the coaching; where we will help you quickly implement our methodology in your production apps.
We use a system of 'video' questions and responses. You record your questions every day with video and our UI Architecture coaches will respond.
You can post code, samples and architectural diagrams from your working projects and get feedback and help in real-time.
At the end of your coaching we give you the option to maintain access to mentoring so you can get support as long as you need it...
The final project helps you put together all of the ideas you learned through the course in one single final portfolio project. Once you are completed then four final project will be personally reviewed by a Logic Room coach.
What is so awesome about the final project is that all our students project and code structure are very similar meaning if you pass, you are essentially qualified to write 'consistent code' in line with how we taught you.
We will keep you in mind for our future projects knowing we can count on the standard of code you write! And if you want to be introduced to our hiring partners we will be happy to recommend you.
Certification from Logic Room is not just a piece of paper; it carries significant value. This distinction is earned not merely by completing content, but because we meticulously analyze your output and assess your professional capability. We don't automatically issue a certification upon content completion.
Once you finish the final project, you'll have a graduation call with Pete, the founder of the UI Architecture Academy. In this call, not only will you have the chance to be invited into his inner leadership circle and receive official recognition through our certification, but Pete will also work closely with you to understand your career goals. With his extensive referral network, he's committed to helping you elevate your career to the next level.
“It’s like a recipe … you can have all these ingredients ... but the right master is the one who knows exactly how to combine them.”
“The course takes a very practical approach ... The value you take out of it is comparable to having your own mentor … I highly recommend it!”
“I now see a path for setting up my applications so that they can be tested thouroughly and without the need to completely re-write the tests when the application grows/changes.”
Yes, but you will need to purchase the full 3 month package to do this so it's much cheaper if you purchase the 3 month coaching package from the outset. If you need more coaching at the end then you be given the option to purchase a monthly subscription to the coaching for a reasonable fee.
This is a great question because this is exactly what our approach is designed to do – to be integrated into your current codebase by you and your team (with us coaching you and you coaching them - step by step).
The academy has 24 battle tested exercises that represent the specific UI Architecture challenges you will encounter – you also get 4 Accountability exercises on top; these are practical hands-on challenges designed to get you taking action on your current project and getting full team buy-in (you will learn to influence and sell the underlying principles that we teach you).
Typically, our students will want to get to module 4/12 (The Anatomy of a Complex Test) before they feel confident enough to branch and refactor code into the architecture they are learning. But the reason we give you group coaching and mentoring is so that we can help you move at the speed you want to in a low-risk way!
See a review from Fred Linqist who became a tech lead after studying with us and integrated our approach into the entire company stack with 15 engineers -> https://www.logicroom.co/reviews
And one of our commercial case studies with Cutover who rolled out the techniques to a team that has 40 engineers on -> https://www.logicroom.co/case-study
Sometimes engineers will ask what the difference is between our premium offering compared to low priced training websites. It's simple; they make money through high volume sales. We make our money through low volume sales so that we can give each student our dedicated attention. This means we don't need as many students to make our business work. The result? More time spent with you so we give you guaranteed results. If you want real help in your journey to become a UI architect then Logic Room helps you by ‘actually’ helping you.
The course is remote, you use our platform to get lessons and material and then we have group coaching calls which are remote.
Yes, you have access to the material in our portal, at the end of the program you will be given the opportunity to extend your access.
Just a modern browser – nothing more. It’s all 100% cloud based, you even get your own online test DB. You are able to reset it too.
Yes! We use React and Mobx but you will learn how to port the specific framework code we write over to your chosen framework (React, Angular, Vue, Redux etc).
3 Months, but you get lifetime access to our community!
So, you typically need to know less than you do with other training or bootcamps.
Version 8 (ES 2017), Jest and React to demonstrate the techniques and give you exercises.
The techniques are 'framework agnostic' so you can begin using them in any app using any framework (Angular, Vue, Backbone etc).
We are a consultancy that teaches programmers REAL skills not just dry theory. We serve engineers first, and businesses second.
As soon as you pay you get access to the core methodology training.
Places on our coaching calls are limited so we reserve space for you when you join the academy.
The coaching the calls are every week at 7pm GMT. We send you reminders so you don't miss any.
But, if you can't attend you submit your question at your leisure and we will record answers for you to pick up later.
We use Zoom. You can post questions before the group call if they are complex so we can investigate your questions in depth with you.
At Logic Room we like to get you to your objective as soon as possible.
Your coaching lasts for 8 weeks and if you decide to consume all the core training material during that time (optional) then you will need to put about 60 hours of time in (about 1 hour per day). This includes the exercises.
You have lifetime access to the material, but the coaching is 8 weeks limited so we may give you a gentle nudge ;-)
Yes you can choose to split your payments over several months to make the cost of the coaching more manageable.
This is a coaching programme designed for frontend engineers. Typically our students get most benefit by putting the techniques into React, Angular or Vue apps.
However since what we teach is broadly about good software engineering principles you can adapt many of the patterns on the backed also, but you would need to work with us on group coaching calls for specific advice on backend tech like Node and NextJs.