Good practices and tips for maintainability

Image for post
Image for post
Photo by Omar Flores

The complexity of front-ends drastically increased in the last 20 years; we went very quickly from widgets JavaScript to Single Page Applications.
The pace is still fast, we went from Redux to Mobx and now React hooks in the span of only a few years, making it more than ever essential to welcome change in our applications.


Testing strategy and testable components

Image for post
Image for post
Photo by Omar Flores

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.


Ease change: future-proof component code

Image for post
Image for post
Photo by Omar Flores

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…


Keep your application organized

Image for post
Image for post
Photo by Omar Flores

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…

Sharing a methodology

Image for post
Image for post
Writing presentation for Paris.js #82

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


Image for post
Image for post
https://unsplash.com/photos/qTLyiHW1nIc

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


Image for post
Image for post
https://unsplash.com/photos/6yjAC0-OwkA

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.

Image for post
Image for post
http://honest.engineering/

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


Image for post
Image for post
https://unsplash.com/photos/dERxI-Rna2E

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

About

Charly Poly

Helping you to get the most of new web technologies ✍️🎙 | https://noti.st/charlypoly

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store