Dear UI Engineer,

As JavaScript developers me and you both KNOW, that having complete and total mastery over software architecture is the most important thing we can do to propel our careers forward.

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?

• You never know where to start with your architectural UI decisions. You are worried that mistakes you make now will cost you later down the line
• You keep finding that as your test automation gets longer and more complex your desire to test goes DOWN not UP
• You don’t have a repeatable process to architect and test your code so the two things can be done at the same time fluidly, quickly and with consistency

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!

Imagine this…

What if you could learn to setup a JavaScript UI codebase so that your ability to scale it was not limited.

What if you could understand the right generic principles, optimised for JavaScript that would let you make fast and accurate decisions. What would it mean if you can keep growing your code sustainably without complexity?

What if…

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?

Well…

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!

Simple Rules for Complex Problems

Hi,

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

The Solution IS as Simple as You Know It Should Be

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 like wasting time cobbling together your approach to building JavaScript apps and being constantly told what to do by all the frameworks?

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.

So…

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!

If ONLY Someone Had Shown Me Sooner

Today I am excited to present our FLAGSHIP coaching programme called the 'UI Architecture Academy'.

It gives JavaScript engineers cutting-edge framework agnostic skills they need to architect and test complex UI applications at scale!

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…

• Test Driven Development (TDD) and Behaviour Driven Development (BDD)
• Software Architecture, Domain Driven Design (DDD) and the Clean Architecture
• The relevant parts of the SOLID principles
• All the major testing framework documentation(s)
• All of the major UI framework documentation(s)
• JavaScript asynchronous and event driven programming
• Functional and Object-Oriented programming
• JavaScript Design Patterns
• Observable libraries such as Mobx and RXJS
• Stack Overflow debates
• Guru presentations
• The best evergreen content on the web
• Google results
  
  And more…

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!

How It WORKS….

Elite Level Coaching and Mentoring Programme

The coaching and mentoring is delivered with 4 elemental building blocks;

• Firstly, you watch bite-size video lessons over 12 modules. Then you take a quiz to assess your understanding of our core concepts meaning you will build your knowledge one step at a time.
• Secondly, theory without practice is pointless, so we carefully designed real-world exercises. You take 2 of them with each module. Meaning you get commercial insight that will work in the wild with your production apps.
• Thirdly, you may need to ask a question from someone who has been there and done it already. Our live group coaching lets you ask our core UI architecture team questions about the core methodology we teach and get help and advice with your production apps.
• Finally, you get access to our exclusive community where you can get help from other students online, network in real events (post pandemic) and see your own progress and results on our UI Architecture 'leaderboard'.

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

Part (1 of 2) - Ultra Fast 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!

Module 1: The Fast-test Architecture

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.

• Get more control of your app and feel empowered
• Reduce your dependency on frameworks meaning you are in charge not the UI Framework
• Be able to communicate your intent much more easily in your code and with your team
• Your brain will be happy because the rules make decisions EASY

Module 2: Execution Patterns for Testing Asynchronous Apps

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!

We learn why JavaScript forces unstable and tightly coupled testing architectures when using only callbacks, promises or async and await.

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.

• Learn to make state in your tests predictable meaning you save time
• Know how to load data properly during your test so you have certainty on your test framework expectations

Module 3: The Anatomy of a Simple Test

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

• Make your tests look like business specs and get the confidence of REAL tests not FAUX tests
• Step through your production scenario ‘in the test’ meaning you know if the test is accurate
• Get consistency in all your tests meaning you won’t be confused next time you look at it

Module 4: The Anatomy of a Complex Test

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!

• Learn to avoid ‘false positives’ using 3 architectural principles. This will mean you can test no matter how complex the use case
• Get consistency amongst your tests and avoid fragmentation, meaning your code stays valuable

Module 5: Vertically Scaling your Test-Suite

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.

• Learn how to cover any and all use cases which helps you mitigate against unexpected user behaviour
• See how to build faster tests over time meaning you improve your ability within the tests

Module 6: Horizontally Scaling your Test-Suite

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!

• Get the final rules for you to be able to test ANY UI pattern
• Find out how to use less tests not more, meaning you spend more time architecting instead of fixing bugs
• Avoid the complexities of END to END HTML manipulation and view coupled testing
• Learn to get the ULTRA decoupled UI test architecture!

Part (2 of 2) - Infinite UI Architecture

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.

Module 7: Flat UI Presentation

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;

• Understand why information should only ever flow 'down' through a view
• Learn the patterns of bad markup and what we should do about them
• Identify when to use hierarchical and when to use flat models in your architecture
• Watch a 3-part refactoring demo which shows how to start cleaning up your views and making them use flat presentation
• Solve a real world complex business problem by cleaning up bad markup and implementing flat presentation concepts

Module 8: The Programmer's Model

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;

• Learn to visualise and iterate the design of the Programmer’s model using a simple output visualisation technique
• Iterate on older Programmer's models and pull their design into shape using a 'refinement' process
• Explore the relationship between the Programmer's Model and the Presentation ViewModel
• See how the most common types of architectural principles such as Domain Driven Design, The Clean Architecture and MV* patterns can be used with the Programmer's model and integrated into Single Page Applications in general!

Module 9: Reactive Architecture

Whats your biggest fear in a JavaScript UI app? Let me guess. Is it being FORCED to use ES5? Perhaps you need to support IE10 still? {Giggle}, no, no, NO, the true ENEMY at the gates in a JavaScript UI app is... UNWANTED side-effects!

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 are going to shine a SPOTLIGHT right on this issue. Side-effects in a JavaScript UI app are caused by two categories of problem; timing and encapsulation. It's these two things which give rise to BRITTLE behaviour, odd side effects and unhappy engineers who can't keep control!

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;

• The observer pattern and what it is. We practice writing one to make sure you can spot it in other places
• We learn what functional reactive programming ‘actually’ is and how we can leverage it to guard against unwanted side effects
• What the Reactive core is and how we can use it in our UI architecture to get a stable ‘middle’ to our app
• What the Reactive view is and how we bind it to our Reactive core using markup
• How we enable state to flow in our app in a predictable manner without relying upon the constraint of a state container like Redux (although you can still use one once you learn the rules)

Module 10: Dependencies

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;

• A clear definition of the problem of dependencies in general. Then why you need to understand them perfectly before moving forward
• How to use TypeScript interfaces and understand the biggest power of strong typing
• The sort of problems you will face in scaling your app when you simply rely on normal module loading and do not centralise your dependency management
• The difference between functional and object-oriented dependencies
• How dynamic dependency strategies work in general
• What an IOC container is and why one is critically important in a UI app
• How to build your own IOC (Inversion of Control) container to see how they work (this makes you better at using them)
• Connecting the dependency management lifecycle into the lifecycle of your chosen UI framework

Module 11: Abstractions

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?

No?

Me NEITHER! 

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;

• The very important difference between view routing and application routing and where React, Angular and Vue fail to naturally insulate you from this oversight - but what you can do about it
• The theory behind routing abstraction and building applications which are navigationally 'aware'
• The pitfalls of static navigation and why you shouldn't use it (especially in responsive apps)
• A decision making matrix to help you choose the right navigation 'abstraction'
• The 'proper way' to implement 2-way binding at screen level
• How to build contextually insightful screens with 'polymorphic' presentation concerns; helping you navigate your own screen design easily
• How to fluidly and safely integrate 3rd party tools into your app, so you can communicate with them without falling foul of 'their' lifecycle which can conflict with yours

Module 12: Final Project

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.

• In part 1 we lay down our application 'wireframe' skeleton where we learn to plumb together our Fast-test architecture with all of our 'abstractions' that will power navigation and routing
• In part 2 we start by using Fast-tests to flesh out our first feature 'Books'
• In part 3 we will then begin to chip away at our aggregated repositories for books and introduce authors, you will make a decision on how best to model the problem using the visualisation process we showed you earlier in your training
• Finally, in part 4 we will connect up the 3rd party controls to our Fast-test architecture assets and you will see how to make this work with everything else

Battle-Tested UI Architecture Methodology

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.

Our online reviews...