Search for a command to run...
Decoding the Dynamics: Embracing Flexibility, Navigating Challenges, and Mastering the Art of Configurable Code in Software Development
Frontend Software Engineer with a passion for unraveling the intricacies of software and systems. Armed with a B.Tech in Mech Engg and an MS in Engg Management from SJSU. My journey spans VFX, tech logistics, and automotive retail, always seeking the harmony between technology and practical application
No comments yet. Be the first to comment.
Your app feels slow. You did all the optimizations in your code imaginable. You curbed the re-renders, lazy loaded the components, memoized where necessary. And yet, people say: “Hey, it is slow.” They aren't necessarily saying your UI is janky. What...
Streaming vs. Polling JSON: Choosing the Right Approach for Rubric Generation When designing the rubric generation system, I faced a key architectural decision: Should I stream JSON responses as they are generated, or should I poll the backend for u...
Tackling Scattered Data Challenges, One Step at a Time
Introduction Asynchronous JavaScript is a cornerstone of modern web development, enabling efficient and responsive applications. This approach allows web pages to process lengthy operations, such as API calls or data fetching, without stalling the us...
When we talk about 'configuration over code', we're essentially looking at a different way of controlling how things work in our applications. Instead of hard-coding every detail, we use external configurations. This shift can make our code more modular, easier to read, and, let's not forget, scalable.
In this piece, we are going to dive into how this concept of 'configuration over code' can be applied to the basic elements we use every day in building applications. Although this idea can fit into any framework, we will be using React as our go-to for examples – it's just easier to explain things this way. So, let's get started and see how this approach can change the way we write code.
We all strive to write code that's not just neat and efficient, but also easy to modify. To achieve this, we often organize related logic in one place and extract overly generic logic into handy helper functions. This is a great start, but let's take it a step further. Imagine if we could compose our components in such a way that their behavior is dictated by the configurations we provide. With this setup, any new behavior or modification could be managed through the config, rather than tinkering with the component itself.
Wouldn't this make our lives easier? Instead of delving into the nitty-gritty of the component code every time we need a change, we simply adjust the configurations. This method not only streamlines the development process but also opens up a world of flexibility and scalability. Let’s delve into how this approach can revolutionize the way we build and maintain our applications.
To illustrate this idea let's assume we are building a user profile form with the below personas and each user has different types of fields.
Student
Professional
Artists
In a traditional approach, we would make forms for all these individual users separately and display the ones needed by using conditionals. it sounds cumbersome, if a new persona gets added one would have to repeat the cycle of creating form and adding additional logic. There is a better way.
Configuration over code approach
Instead of creating individual forms, we create one dynamic form that consumes a config and renders the labels and fields based on the config. this way when a new persona is added, or a field needs to be updated one needs to just update the config and it will be done.
const formConfig = {
student: [
{ name: 'name', type: 'text', label: 'Full Name', required: true },
{ name: 'age', type: 'number', label: 'Age' },
{ name: 'school', type: 'text', label: 'School Name', required: true },
],
professional: [
{ name: 'name', type: 'text', label: 'Full Name', required: true },
{ name: 'company', type: 'text', label: 'Company Name', required: true },
{ name: 'position', type: 'text', label: 'Position' },
],
artist: [
{ name: 'name', type: 'text', label: 'Full Name', required: true },
{ name: 'medium', type: 'text', label: 'Medium' },
{ name: 'portfolio', type: 'url', label: 'Portfolio URL' },
]
};
A DynamicForm component looks like this
const DynamicForm = ({ userType, onSubmit }) => {
const fields = formConfig[userType] || [];
const handleSubmit = (event) => {
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
{fields.map(field => (
<FormField key={field.name} {...field} />
))}
<button type="submit">Submit</button>
</form>
);
};
const FormField = ({ name, type, label, required }) => {
return (
<div>
<label htmlFor={name}>{label}</label>
<input type={type} id={name} name={name} required={required} />
</div>
);
};
and the usage would look like this
<DynamicForm
userType="student"
onSubmit={handleStudentSubmit}
/>
<DynamicForm
userType="professional"
onSubmit={handleProfessionalSubmit}
/>
in this approach updating the form fields or labels or even adding a new persona becomes a matter of just providing config, one doesn't have to touch DynamicForm's logic. When the components are so modularized, testing these components becomes much easier. if you notice this structure encourages us to write our presentation layer and logic separately encouraging separation of concerns idealogy.
There are numerous cases where we might need to show different renderers which are unrelated to each other. let us suppose we have a build a dashboard that shows different widgets: charts, news feeds, weather information etc and each widget has a different way of presenting data. an innocent way of this is to create a separate component for each widget type and use conditional logic in a parent component to decide which widget to render based on the data type.
Instead, we create a single Dashboard component that dynamically renders widgets based on a configuration object. This configuration defines which renderer (component) to use for each widget type
const widgetConfig = {
chart: {
component: ChartWidget,
props: { },
},
news: {
component: NewsWidget,
props: { },
},
weather: {
component: WeatherWidget,
props: { },
},
};
Dynamic Dashboard component
const Dashboard = ({ widgets }) => {
return (
<div>
{widgets.map(widget => {
const WidgetComponent = widgetConfig[widget.type].component;
const widgetProps = widgetConfig[widget.type].props;
return <WidgetComponent key={widget.id} {...widgetProps} {...widget.data} />;
})}
</div>
);
};
Usage:
const dashboardWidgets = [
{ id: 1, type: 'chart', data: { }},
{ id: 2, type: 'news', data: { }},
{ id: 3, type: 'weather', data: { }},
];
<Dashboard widgets={dashboardWidgets} />
This approach allows for high flexibility and scalability. When we need to add a new widget type or modify an existing one, we can simply update the widgetConfig object. There's no need to rewrite or modify the Dashboard component's logic. Each widget component is responsible for rendering its content based on the props it receives, making the system modular and maintainable.
By using configuration objects to map data types to specific renderers, we separate the concern of what content is displayed from how it is displayed. This leads to a cleaner, more organized codebase that is easier to extend and manage
while configuration over code offers significant benefits in terms of flexibility and maintainability, it does come with some drawbacks. knowing these drawbacks will be crucial in making an informed choice of when to do it and when not to.
Like with any system or thought there is a learning curve involved. For new devs joining the team, understanding a system driven by configs can be daunting. It would require them to have a grasp on both the codebase and the configuration setup
maintainers and developers need to actively keep in mind and have a track if some configuration is being duplicated as after as configurations increase in an application
Interconnected or nested configs can become challenging to handle, main and debug.
With great power comes great responsibility. The flexibility to change the components or even applications behaviour through configuration can open the doors to misconfigurations which could lead to errors that might not be too easy to catch.
Depending on how configurations are structured the performance of the application might take a hit. if heavy configs are provided at the start of the applications it might impact response time.
As we aim to dynamically render components based on configuration might also lead to a less optimized rendering path compared to static component structure.
Over-Engineering and Configuration Bloat: Overuse of configurations can lead to complex and unwieldy configuration objects floating in all scopes of the application, making the code hard to manage and understand. This excessive complexity compromises maintainability and clarity.
Performance Overheads: Heavy reliance on configurations can introduce performance bottlenecks, especially if configurations are loaded or parsed at runtime, potentially slowing down the application's response time and efficiency
Enhanced Flexibility and Scalability: The configuration-over-code approach allows for easy modifications and scalability through external configurations, reducing the need for direct code changes.
Maintenance and Reusability: Simplifies updates and maintenance, promoting modularity and reusability, while ensuring separation of concerns in the codebase.
Complexity and Learning Curve: As it introduces complexities few developers might not be at ease at first, hence incrementally introducing it in smaller chunks is the best way to get people used to complex ideas.
Performance: this can lead to performance bottlenecks if not managed efficiently, bloating of configuration would be an overhead on the performance.
Balance is Key: Strike a balance between flexibility and maintainability, plan carefully on when we might need configurable code or components
As we conclude our discussion on 'Configurable code', I invite you to share your experiences and thoughts. Have you encountered challenges or discovered effective strategies? Let’s continue this conversation in the comments. Your perspectives are invaluable in enriching this dialogue.
Looking forward to your contributions!