This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Avoid being overrun by tech debt with these 5 pieces of advice
As technology evolves, web applications need to keep up with the pace of change. While it may be tempting to stick with what’s familiar, it’s essential to modernize your web app to ensure its longevity and relevance.
Sometimes the “if it ain’t broke don’t fix it”a mindset can help tech debt to creep up on us and bite us in the proverbial behind.
So to avoid that, let’s look at five ways to modernize your web app and keep it competitive in today’s fast-paced digital world.
Going the Composable Software Route
Building Composable Software Composable software is a relatively new approach to software development that allows developers to build applications by assembling pre-existing components.
These components are usually designed to perform a specific function and can be combined to create a more complex application. Sort of like what function composition is for functional programming, but at a component level.
The idea behind composable software is to make it easier to build and maintain applications by using pre-built components instead of building everything from scratch.
To modernize your web app, you can start by breaking it down into smaller components that can be composed together to create the final application. This can be actual UI components, like React components, or modules sharing common functions. As long as you can identify the potential for reusability, then it should be extracted.
With Bit, you can create composable components right from the codebase of your existing application. Learn how to do that with this example tutorial.
This approach has several interesting benefits:
- It allows you to reuse components across different applications. Whatever components you create out of your codebase can then be used everywhere you want, even for new projects. This effectively reduces development time and increases the speed at which you can deliver new features.
How to reuse React components across your projects
- You can distribute responsibilities between multiple team members or even full-blown teams. Now instead of having 10 developers all messing with the same codebase, you can have individual teams working on their own little isolated components. This simplifies the workload and allows for better control over the quality and delivery of each component.
- Another benefit of composable software is that it makes it easier to scale your application. You can add new components as needed to handle increased traffic or new features without having to redesign the entire application.
Overall, composable software provides some very interesting benefits. The major problem with it is extracting the code from the original application into a central repository where it can be shared between multiple applications.
Going the Micro Frontends Route
Micro frontends are a new approach to building web applications that allow developers to break down the front end of the application into smaller, more manageable pieces.
While it might sound similar to the previous method, there is a thin line between them that is worth exploring.
The idea behind micro frontends is to break down the front end into smaller, more manageable pieces that can be developed and deployed independently. And this is the key difference, microservices can be deployed individually and on their own, they would function.
Of course, you’ll want to compose them together to create the final application (you can read more about that process here). This approach makes it easier to add new features or update existing ones without having to redesign the entire application.
One of the major benefits of micro frontends is that they tend to be maintained by individual teams, which means they can grow at their own pace and scale a lot faster.
If you have no idea how to start building your micro frontends, you can check out Bit. It allows you to quickly build, share and reuse components, all while improving the developer experience and their performance. This article shows you how you can easily build micro frontends using Bit.
To modernize your web app, you can start by breaking down the front end into smaller, more manageable pieces. You can then turn these pieces into small independent micro frontends, making it easier to deploy updates and new features.
Update the Design/CSS to Make Sure It’s Responsive and Mobile-Friendly
Leaving aside the internal architecture of your web application, something you might want to look into is your CSS. I know, not what you were expecting but hear me out!
Today, more people are accessing the internet on their mobile devices than ever before. As a result, it’s essential to ensure that your web app is responsive and mobile-friendly. In fact, some people go as far as to design the CSS mobile-first, making sure everything works fine for mobile devices and only then worrying about the desktop.
To modernize your web app, you can start by validating whether or not your app is mobile-friendly. For that there are several tools, but my favorite one is Google’s Mobile-Friendly Test (catchy name, I know!). You can just input your URL and let it go crazy on it. If there are improvements to be made, it’ll give you a full report on them.
Tip: Keep in mind that you can also extract your components and their CSS styles together as a Bit component and create a company-standard component library. That way you can ensure mobile-friendly code and other standards are always part of every project. Here is a nice tutorial on how to build your own component library using Bit.
You can also use Chrome’s WebTools and change the dimensions of the viewport to those of pre-defined mobile devices to see how your site responds:
Once you do this, if you find any issues you should either individually tackle them, or go for a CSS library that is already mobile-friendly. Something like TailwindCSS or Bulma will do just fine.
Did you like what you read? Consider subscribing to my FREE newsletter where I share my 2 decades’ worth of wisdom in the IT industry with everyone. Join “The Rambling of an old developer” !
Consider Breaking Down Your Monolith into Microservices
If this is your case and you’re working with a monolith, it may be time to start thinking about breaking it up into smaller chunks.
Mind you, if things work well right now and you have no plans or problems scaling the app, then skip this point altogether. However, if you’ve tried to scale it in the past and failed, or if you’re experiencing crashes during peak hours, keep reading.
A monolithic application is an application that is built as a single, unified system. While monolithic applications can be easy to build and deploy, they can be challenging to scale and maintain.
To modernize your web app, you can consider breaking down your monolith into smaller, more manageable pieces also known as Microservices.
If you’re wondering how to get started, here is an interesting video showcasing how you can use Bit to create component-based microservices:
Otherwise, you can also read this other article covering some of the best practices to keep in mind while planning the migration.
In the end, microservices is just an umbrella term for a lot of different approaches:
- You can go with an API-first approach, completely rethinking your back-end and planning the entire architecture without taking the front-end into account. This will yield a very powerful and versatile public interface for your business logic that you can later consume through multiple, dummy front-end clients (like a web app and a mobile app).
- You can use an event-driven architecture to improve the performance of the inter-service communication and the user experience at the same time.
- You can follow REST and create a standard API while you re-work your client applications (similar to the API-first approach but not quite like it).
And more.
The point here is to break down your monolith into smaller pieces making it easier to manage and maintain your application.
Use Serverless Functions to Help Scale Certain Features
What if instead of wanting to restructure your entire back-end, you just want to improve the performance of certain processes?
Maybe you have some functionalities that require parallelization to go through a lot of data at the same time, or perhaps you have to process many database records concurrently. In either case, setting that up from scratch can be somewhat challenging. You have to deal with the infra update, the code changes to support multi-threading, and all the associated updates to deal with the data once it’s been processed.
Instead, you can extract those functions into serverless functions and run them on the cloud.
Serverless functions are small pieces of code that can be deployed and run independently. These functions can be used to handle specific tasks or features in your web app.
To modernize your web app, you can use serverless functions to help scale certain features. For example, you can use serverless functions to handle tasks such as image resizing or video processing. By offloading these tasks to serverless functions, you can free up resources on your servers and improve the performance of your web app.
Another benefit of using serverless functions is that they are highly scalable. You can easily add or remove functions as needed to handle changes in traffic or new features.
If you want to try them out, while you can definitely go with something like AWS’ Lambda, I would strongly suggest trying Supabase’s Edge functions. They’re incredibly easy to set up and run.
In conclusion, modernizing your web app is essential to keep it relevant and competitive in today’s digital world. Chances are you’ll either want it to scale without you having to change too many things, or you’ll want to keep adding relevant features. By following the advice presented here, you’ll ensure that your project stays relevant, updated and tech-debt free for a long time.
It’s time to embrace the future of web development and start modernizing your web applications today.
From monolithic to composable software with Bit
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
5 Ways to Modernize Your Web Application was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Fernando Doglio | Sciencx (2023-03-20T08:01:35+00:00) 5 Ways to Modernize Your Web Application. Retrieved from https://www.scien.cx/2023/03/20/5-ways-to-modernize-your-web-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.