From Frustrated JavaScript Engineer to Empowered UI Architect!

Breakthrough Mentoring Programme Shows you the Secret to Architect & Test Complex UI Applications at Scale in any UI Framework (React, Angular & Vue), And Then Up-level Your Career

Table of Contents (TOC)

 

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

 

Extensions (NextJS, Angular and beyond...)

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!

Weekly Coaching Calls (7pm UK Time)

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!

Frequently Asked Questions

Your access to material starts as soon as you complete the checkout. You can work at your own pace, the quicker you work the more help you can get on the coaching calls and day-to-day mentoring.

Your coaching lasts for 12 weeks the core material will take roughly 60 hours to complete. We recommend you try and finish the core material in the first 8 weeks and spend weeks 8-12 integrating what you learn into your production apps.

The course is remote, you use our platform to get lessons and material and then we have group coaching calls which are remote.

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.

The coaching calls are every Thursday at 7pm UK time. So as soon as you enrol you can join the next call for your introduction to the rest of the group.

You get 3 months access to the coaching calls and personal mentorship, and lifetime access to the course material and resources.

You just need to know JavaScript, ideally up to version 8 (ES 2017), but we teach you 'consistency 'in your approach first...

So, you typically need to know less than you do with other training or bootcamps.

We use React but examples are provided so you don’t need to be a React developer - just know and be able to use JavaScript competently. We also give you a React 'bootstrapper' training module as a bonus to help you get enough to use the concepts in your production apps.

Yes you can choose to split your payments over several months to make the cost of the coaching more manageable.

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

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.

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.

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

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

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.

If you are a manual tester then no, the academy is not suitable. However if you are interested in learning to create deeper integration testing at the code level (taking a technical approach to testing) then the academy can help you. But you need to know JavaScript and have experience with it.

Yes, you have 14 days* from starting to ask for your money back if you are not happy and we will refund you!

*does not apply to trial offers

Close

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.