This article is Part III of the “Build maintainable React apps — Series.”

Part III: Testing strategy and testable components

1. The many ways to test React code
2. A good testing strategy example
3. Make your components testable

Tests are not ubiquitous in React applications, maybe because of misconceptions around testing.
When talking about testing front-end apps, people raise the “end-to-end” test flag, which is expensive to write and maintain.
However, React applications can be tested in many useful and different ways.

—

1. The many ways to test React code

The drawing below shows four different ways to test React applications, from the most complex, complete, and expensive to the simplest, isolated, and fastest.

This article is Part II of the “Build maintainable React apps — Series.”

Part II: Ease change, future-proof component code

1. State management
2. Loosely Coupled Component
3. Components decomposition patterns
4. Enable React warning and keep your dependencies up-to-date

React applications are always evolving with refactoring from:

• new features
• existing features evolution
• bug fixing
• dependencies updates

With that in mind, and far from wanting to predict the future,
we will see how to help your application embrace future changes by having some tips and best practice on:

1. State management
2. Loosely Coupled Component
3. Components decomposition patterns
4. Enable React warning and keep your dependencies up-to-date

—

1. State management

State management is often, at scale, the root of many performances and consistency issues in React apps.
This subject has already a lot of great articles from experts in the fields, let me share…

This article is Part I of the “Build maintainable React apps — Series.”

Part I: Keep your application organized

1. Break down your application in meaningful parts
2. Reflect the defined application parts in code organization

Before actually starting talking about components’ code,
let’s step back and think about applications as a whole.

Modern web-apps are often complex, sometimes dealing with multiple products living in the same React application.

This leads to a lot of components, which are sometimes related, sharing the same state or independent.

A disorganized react application results in:

• Slow navigation in the codebase and consistency issues
  (mental model)
• Difficulties to refactor
• Harder on-boarding for…

I started writing articles in the first years of my professional life, 5 years ago.
I decided 2 years ago to be active on both writing articles and presenting at Paris meetups.

At the beginning, I was struggling a lot to write article and make presentation — thanks impostor syndrome.
I needed something to bring me “safety” and “confidence” in my creativity.

This lead me to a methodology “built over practice” that helps me a lot to be “efficient” and focus more on the content by having a solid base structure.

Like scales in music, this methodology helps me to spend more time on the “creativity” part of writing without getting lost in new ideas coming along. …

This article is part of the collection “TypeScript Essentials”,
Chapter six.

The previous chapters showed us all the principles we need to master in order to write maintainable and powerful types.
However, TypeScript is often resumed as “only being a static type checker”, meaning that, at runtime, all the gains of types are a loss.
In this chapter, we will see together that this allegation is totally untrue.

The lack of runtime type checking/assertions

One historical blame on TypeScript is the lack of “runtime checking”.

This article is part of the collection “TypeScript Essentials”,
this is Chapter five.

In the last article, “Generics and overloads”, we saw some real world usages of types with Generics Types.

We’re going to finish our journey on “real world usages” with some advanced types.

Unions and Intersection types

We already saw some examples of union types in the “Learn the basic” chapter, however, we didn’t talked about the Intersection types.

Intersection types

interface BaseConfig { version: string; name: string; }interface DynamicConfig { fromFile: string; }interface StaticConfig { configuration: object; }type Configuration = (StaticConfig | DynamicConfig) & BaseConfig;

Here, a Configuration can have 2 different shapes that
share the same BaseConfig base type. …

A new adventure.

I had very good feedback on my theoretical and feedback articles (Why use TypeScript, and TypeScript the honest trailer), I decided to achieve a dream:

Start a blog with some friends, a blog where we would talk about web engineering.

So, here comes honest.engineering, with Bryan, David.

Why “Honest Engineering”?

We want to share honest and unbiased thought about the current state of (web) tech.
Our mission is to help fellow engineers forge their own opinion on current trendy and controversial subjects.

On Honest Engineering, you will find 4 categories of articles:

Discovery

Articles about our thoughts, feedback when discovering a new technology or concept. …

I always preferred reading— paper, physical — books rather than blog posts, tutorials or watching videos.
I learnt the basics of programming with books like “Advanced PHP” or “JavaScript for Web 2.0” who helped me a lot.

I now read books to learn new concepts or theoretical things and use blog posts, videos for the practical side.

I’ve read the following books on friends recommandations or blog reviews from the internet.

That’s why I also wanted to share those books that helped me evolving in my work or changed my vision from the world surrounding me.

Software Architecture in practice