This content originally appeared on Telerik Blogs and was authored by Jefferson S. Motta
Designing with components allows you to sprint faster to meet your requirements and deliver consistency and quality.
In this article, I’ll give you insights into my experience with software componentization, especially with Progress Telerik and Kendo UI products.
The History of Software Componentization
Let’s examine the history of software componentization to understand the whole concept. This strategy has a long history of developing software with reusable and independent components.
1960s—Beginning of Software Engineering
The concept of producing software by utilizing reused components originated in the 1960s during a crisis in the software development industry. Because programs were becoming increasingly complex and maintenance was difficult, there had been a search for more organized techniques. Modularity and reuse were presented during the 1968 NATO Conference on Software Engineering to enhance software quality.
1970s—The Beginning of Modular Programming
The 1970s were the decade in which modular programming first started to gain popularity. Niklaus Wirth’s Modula and Ada are two examples of programming languages that introduced the concept of encapsulating functionality into separate units and separating concerns.
1980s—Object-Oriented Programming (OOP)
During the 1980s, object-oriented programming (OOP), a more recent programming paradigm, further bolstered the concept of generating reusable components. Smalltalk and C++ are two examples of programming languages that were the first to introduce the idea of objects as reusable components that encapsulate data and action.
It made it easier to create libraries and frameworks that could be utilized across various systems, bringing the practice of object-oriented programming (OOP) closer to the concept of componentization.
1990s—Formal Componentization
In the 1990s, software components were formalized due to the introduction of technologies such as Microsoft’s Component Object Model (COM) and Common Object Request Broker Architecture (CORBA). These technologies enabled separate components to communicate with one another across different platforms, facilitating the development of highly modular and distributed systems.
2000s and Beyond
The concept of components morphed into the idea of services, which are self-sufficient services that can be independently developed, maintained and scaled. These services provide reusable functionality through application programming interfaces (APIs).
In the 2010s, the microservices architecture divided massive systems into individual services that can be created, deployed and scaled. Containers (like Docker) and orchestrators (like Kubernetes) simplified constructing, deploying and managing isolated and reusable software components.
My Journey in Componentization
In 1998, Microsoft launched Visual Basic 6.0 with the UserControl concept, allowing developers to create their Controls, such as native controls, charts, lists, grids, buttons, checkboxes and text boxes. It was the beginning of the ActiveX era.
It doesn’t have an inheritance like OOP; it was only introduced in VB.NET in 2002.
Anyway, I started writing my systems using user controls. I designed modular systems in which every input, screen and button was a specialized component.
I designed this way to customize any aspect; when a change is made in one of them, the whole system is automatically updated, which is the great advantage of programming with components.
If you are unfamiliar with components, please see the image below. It demonstrates a layout where the parts are isolated by their function, and each can be built as an individual component and extended to fit the software’s requirements.
Other standard and custom controls can be included inside each layout box, and several components can fill each area, loading them according to the context.
We can build anything new with componentization by creating a button control from scratch or extending a pre-existing item.
Scalable and Customizable
Once we build a componentized system, we can expand it and customize it for other uses to provide a new version to different kinds of professionals. For example, Advocati.NET, an ERP for lawyers in Brazil, was the base for other software created by removing the pieces (components) designed specifically for the law business.
When an enterprise uses the same look and feel, functionalities and security across systems it produces, the end user also benefits from not needing to learn something entirely new. The learning curve is gentler and requires less support—a good investment.
Telerik Components
When I migrated from VB 6 to C#, I abandoned many controls; practically, I did not migrate them. I just looked for the market and chose Progress Telerik to replace my controls. I immediately felt right at home using them. Also, I implemented some extensions, like the customization of the RadOpenFileDialog, which I wrote a post about here.
Over time, Progress also created components for other languages, frameworks and platforms, such as React, Angular, Vue, jQuery, ASP.NET Core, .NET MAUI, etc.
They share a high level of quality, and most controls are standardized across platforms. So, if your enterprise has multiple developments on multiple frameworks, the look and feel can be consistent across all your properties. The Telerik DevCraft bundle allows access to several of these libraries with the same license.
Here, we have some controls for WinForms using the Material theme. You can access this demonstration on Theme Viewer after installing Telerik UI for WinForms in this path “C:\Program Files (x86)\Progress\Telerik UI for WinForms 2024 Q3\Bin462\ThemeViewer.exe”:
The ListView for WinForms component. Telerik UI for React, Telerik UI for Angular, Telerik UI for .NET MAUI, and Telerik UI for ASP.NET Core also have their version. This control was born in early versions of Windows:
The Grid component includes grouping, filtering, paging-navigation, exporting and more. Like ListView, there is a version for each framework.
Each Grid’s framework has its ways of doing things, like allowing filtering. For example, on Grid’s WinForms, we just set the Grid’s property “EnableFiltering” to true. For React, we set the property “filterable” in the Grid and each column. Here is an example:
1.import * as React from 'react';
2.import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
3.import { filterBy } from '@progress/kendo-data-query';
4.import { sampleProducts } from './shared-gd-sample-products';
5.const initialFilter = {
6. logic: "and",
7. filters: [{
8. field: "ProductName",
9. operator: "contains",
10. value: "Chef"
11. }]
12.};
13.const App = () => {
14. const [filter, setFilter] = React.useState(initialFilter);
15. return <Grid style={{
16. height: '420px'
17. }} data={filterBy(sampleProducts, filter)} navigatable={true} filterable={true} filter={filter} onFilterChange={e => setFilter(e.filter)}>
18. <Column field="ProductID" title="ID" filterable={false} width="60px" />
19. <Column field="ProductName" title="Product Name" width="240px" />
20. <Column field="FirstOrderedOn" width="240px" filter="date" format="{0:d}" />
21. <Column field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
22. <Column field="Discontinued" width="190px" filter="boolean" />
23. </Grid>;
24.};
25.export default App;
Conclusion
Designing with components allows you to sprint faster to meet your requirements and deliver consistency and quality. It also leverages the end user’s satisfaction with extraordinary UI and UX. Always remember that UX is not only while customers are in front of the screen but also what they would say about their experience to a friend or colleague.
As a development team using Telerik, we can save great time in development; for example, the components come with simplified ways to add functions like filter, sort, export and more.
I am particularly in favor of how the Progress Telerik license is structured. Your license is perpetual, with access to all updates for one year. So, you can continue to use the version you paid for even if you let your license lapse. Update to a more recent version of the product when you renew your license. Or maintain your license at a discounted rate, and you’ll have access to all the ongoing updates plus Progress’ renowned support. Progress recently announced a more agile subscription package option as well. This is the advantage of working with a reliable and future-facing product.
If you are not a Progress Telerik customer, download a trial now. You can call support anytime during this period, and I’m also available to discuss Telerik or even make a presentation for your company—that’s how strongly I feel about Telerik DevCraft. Feel free to contact me on LinkedIn if you want to talk more about it.
This content originally appeared on Telerik Blogs and was authored by Jefferson S. Motta
Jefferson S. Motta | Sciencx (2025-01-16T12:16:02+00:00) Componentization with Telerik. Retrieved from https://www.scien.cx/2025/01/16/componentization-with-telerik/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.