<aside> 💡 Proposal Origin Story
I joined Wrike shortly after the company made the decision to use TypeScript and React for developing new features. This decision was made in response to Google's announcement to discontinue the Dart Angular framework. Adopting a new technology stack is a significant undertaking. In this case, it involves transitioning approximately 100 frontend developers, 150+ Micro-Frontends and UI Components, and 400+ repositories from Dart to TypeScript, replacing Dart Angular, a well-established framework, with React, primarily a presentation layer library, and creating our own architecture.
I have decided to share my experience in designing React applications. This proposal was a part of my successful initiative to create and adopt a maintainable architecture for new applications developed at Wrike.
Wrike is sunsetting its AngularDart usage
</aside>
Every company dreams about never-ending growth. Skyrocketing customer conversion rate. But having a great product is not enough. The product has to be constantly evolving. The company must be able to deliver new features fast and without bugs. In other words, the success depends on architectural decisions made by the development team.
Creating maintainable, flexible and scalable software architecture is not an easy task. But sometimes one pattern can be the game changer. One of these miracles is the design pattern called Dependency injection / Inversion of Control. It makes testing and maintainability simpler. So developers can focus more on customers and their needs.
Purpose of this proposal is to bring unified DI support to our TS + React apps. The DI / IoC concept and its benefits should not be new for our developers, they are used to it from the Dart + Angular framework.
It is probably a strange concept for typical React / FE developers, because DI / IoC adoption is sadly very rare in the common FE stack. It is overall overlooked pattern in the JS / FE world.
There are three most popular DI container libs. I had the pleasure to work with all of them on different projects. It gives me the ultimate power to compare them and select the best one.
Written in TypeScript. Very powerful. Not so easy to learn and use. Uses decorators and symbols for defining class dependencies.
It is basically extracted DI engine from the Angular 5 framework. Uses decorators and reflection. Straightforward and not complicated.
https://github.com/mgechev/injection-js
Powerful, easy to learn and small library. It has seamless integration with TS. Supports several types of injections - constructor, property etc. Does not rely on decorators, so it can be easily replaced and does not introduce vendor lock.