Why use component based web development?
Recycling and reusing code is not a new thing by any stretch of the imagination, but JavaScript’s best frontend frameworks have made it even easier. React, VueJS, and Angular(2) have adopted this concept of component based development in the last few years to allow more efficient chopping and changing of code when building out the user interface of a website.
What is a component?
A component can be thought of an independent piece of code that is seperate in functionality from the rest of the webpage, but still works in harmony with the rest of the page. For example, if you are looking for restaurants on Yelp, each restaurant that comes back from your query is handled by a restaurant component that takes the information from the API and transforms it into what we see on the frontend. This restaurants component differs from that of the map component because the maps obvious function is to show how far each place is in relation to your current position. You can see how Yelp’s website can be broken down into separate components based on the aestheticm and functionality.
Why develop in a Component Based Architecture(CBA)?
A perk of using a component based architecture for your website, rather than that of the Model/View/Controller layout, is that all functionality and pertinent code for that component is housed inside of that class or that of a parent class. CBA eliminates the confusion of finding each piece of code that contributes to the UI and allows for a much faster debugging process.
CBA fits in nicely with the programmatic concept of the Separation of Concerns. If not done correctly, developing a website in vanilla JavaScript can be quite daunting when you run into an error. Separating each component into different files by the “concern” they handle will not only help you but also your fellow coworkers when you hand the project off.
Components are reusable. Whether you are developing a component for a list of restaurants queried from Yelp, or listing our business professionals you’ve connected with on LinkedIn, the reuse of that same component for a variety of purposes will be much faster than if you’d used vanilla JavaScript each time.
Use it
I would thoroughly suggest that new developers like myself get used to building with a CBA in mind. It is definitely the way of the future as many companies are not only starting to phase out their vanilla JavaScript websites for more current, performant ones, but they are looking for talent that are comfortable in a variety of frontend frameworks.
