Development, Continuous Integration
In the development of HappyFresh Fleet Tracker, we’ve implemented some of the well-known design principles and practices in order to make our application more … In this article, I will discuss these implementations from the front-end point-of-view.
MVC
MVC (Models, Views, Controllers) is a structural design pattern that is used by many frameworks such as django, spring, and rails. The architecture stems from the flow of web applications. Our react-based front-end acts as a view to visualize the data we have processed. In the back-end, we use BeeGo as the MVC framework to process the data needed in the views.
- View
The visualization of the data to the user. This aspect of the MVC is client-side, and the states within are dictated by the controller.
2. Controller
The processing of server-side logic. Controller acts as a middle-ware between view and model, and controls the flow of the data.
3. Model
The transaction of data from and to the database. It is what supplies the controller in the process of data consumption.
States and Props
React conforms to the state behavioral pattern, which lets it’s objects alter it’s behavior when it’s internal state changes. With the implementation of states and props, we could create versatile and reusable components to use in our application.
An integral part of what makes React useful is the feature of lifecycles. With the combination of all these features, React conforms to the composition design principle and is one of the keys that can enable different components written by different people to work together and be reusable.
Refactoring
Refactoring is a systematic process of improving existing code, without adding new functionalities that can transform a mess into clean code and simple design.
In designing and writing code, a “Rule of Three” can be applied to improve clean code:
- When you’re doing something for the first time, just get it done.
- When you’re doing something similar for the second time, cringe at having to repeat but do the same thing anyway.
- When you’re doing something for the third time, start refactoring.
This improves the process of cycle-development, focusing on product delivery and iteration of improvements.
While there aren’t that many obvious design pattern used in front-end, or more specifically React, the effect of best practices used by programmers around the world can be felt when we’re developing the HappyFresh Fleet Tracker application, and it certainly drives us to not just code harder, but smarter.
