Is it better to use free and open source components or paid components or develop from scratch for Web Development?
With the endless myriad of libraries, plugins and addons; from jQuery plugins to modern front end frameworks and libraries — such as Angular, React and Vue, do you develop applications with these tools or do you start from scratch, or do you prefer using paid solutions such as DevExpress or KendoUI?
Generally, your choice depends on the context and the project’s goal. For rapid iteration or Rapid Application Development (RAD) — without a big enough development team or a start-up without massive budget, I recommend open source projects. For using consistent and attractive components, Angular Material or Material UI are good choices.
As these technologies are free and open source, you can customise them to suit your needs. But doing so usually comes at an expense; iteration takes more time to deliver to your customers.
I prefer not developing from scratch for most of the time because of the required time to develop and test. Moreover, with web development, you have to develop components or solutions that are both responsive and cross browser compatible, unless you are targeting solely a specific platform and browser such as Chrome on the Desktop.
The gap has reduced over the past few years for the development of cross browser, cross platform solutions with the use of Electron.js among others— but you still need consistent work, vigour and tenacity — to ensure a quality product, which can take years depending on the team’s resources, expertise and project scope.
However, your biggest advantage with this approach is individuality; your application becomes different from every other project on the Internet built either with bootstrap, it’s countless derivations or variations of Material Design.
Moreover, you can customise your screens and workflow exactly as you want when you develop from scratch; for example, using icons in tables headers instead of labels. If you use libraries such as Material UI with React, it’s more cumbersome. You have to understand how the library has been designed — what part of the codes can you change or is it possible to extend the component to change the headers to use icons. Or, can you change components via CSS ?
When I developed a grid layout from scratch, at some point, I had to change from using header labels to icons. I only adjusted a few CSS codes. Nevertheless, the solution was not trivial — I needed additional testing to see if previous grids did not break as a result of regression.
I had more work to do as I needed to improve the UI for responsive screens and ensure the grids worked well on Firefox browser.
As I developed the grid element, however, I knew exactly what to change. I had only a few lines to consider modifying instead of going through hundreds of lines and documents trying to understand where to start — if I had been using a UI Framework such as Bulma CSS.
Most popular Open Source projects are well documented. However, in some companies, they do not document their codes well, if at all; they do not have clear documented routines or checklists. This becomes a problem or a difficult task to understand where to begin in a system. This is true for huge monolithic system built and used for years.
I think if a company can afford paid solutions such as DevExtreme or KendoUI, they should pay for it because of the huge amount of flexibility and proven solutions. You don’t need to cater for responsive and cross browser. They have already been developed for that in mind. And they are well documented with several clear examples to use. They are also not limited to one framework or platform. WebExtreme for example, can be used with jQuery, AngularJS or Angular but also with .NET MVC framework.
These solutions have a wealth of components that you plug and use in your application. For example, I had to implement a pivot grid for a customer and doing so manually would have taken months of work without any guarantee it would work; I needed to start with the data structure and work my way through representing it in the UI. Did I mention the drag and drop feature?
With DevExtreme pivot grid component, I just needed an array of flat objects. It did everything for me, including drag and drop of properties dynamically, saving them via local storage so that when the user reloads the page or opens it then next time, the properties positioning stayed the same. It also exported the selected layout to CSV, all by itself. You can easily add translation and localisation.
It’s fair to say using this pivot grid component saved me months of development.
