Choosing the Right Software Tools: How Much JavaScript Do We Really Need?

In the realm of web development, the key to success lies in selecting the right tools and approaches tailored to your project’s specific requirements. This blog post is your guide to the world of software tools, honing in on the dynamic realm of JavaScript.

By Mike Webb

January 16, 2024
Advice

Selecting the right software tools, languages, and frameworks is crucial for any software development project, especially when you are on a tight budget. In this blog post, we’ll look into JavaScript specifically, which will be required to some degree with any website project. We’ll explore when to choose between vanilla JavaScript, using Custom Web Elements, and JavaScript frameworks for web development.

JavaScript, Custom Web Elements, and JavaScript Frameworks

When to Choose Vanilla JavaScript

Vanilla JavaScript refers to plain JavaScript without the use of any libraries or frameworks. At the time of writing, there is even a joke website for it here. Using Vanilla JavaScript is a great choice for/when:

Small Projects: For small-scale projects like personal websites or simple landing pages, using a framework is probably overkill. Vanilla JavaScript is lightweight and easy to set up.
Performance Matters: In scenarios where performance is a critical concern, avoiding the additional overhead of a framework can lead to faster load times and a snappier user experience, as well as less code being loaded on the page.
Learning and Skill Building: If you’re learning JavaScript or want to improve your core language skills, working with vanilla JavaScript is the way to understand the language thoroughly.

The last few projects I have worked on personally at BizStream have had more focus on back-end functionality, which we have built as a team with C#. Also, there has not been much complexity needed on the front-end, so we decided to forego a JavaScript framework and improve our vanilla chops instead. For these simpler sites, it has been a good decision.

Using Custom Web Elements

Custom Web Elements (also known as Web Components) are a part of modern web development that allows you to create your own reusable HTML elements with encapsulated functionality and styling. They are an excellent choice when:

Reusability Matters: If you need to create custom UI components that you can reuse across different projects, custom web elements are a powerful option.
Isolation and Encapsulation: Custom web elements allow you to encapsulate HTML, CSS, and JavaScript within a single component, reducing the risk of style or functionality conflicts in larger applications.
Interoperability: Web components work seamlessly with other web technologies and frameworks, making them a versatile choice for enhancing the functionality of your applications.

I am a big fan of Custom Elements. One of their greatest features is that they can be used in all evergreen browsers, and you can use vanilla JavaScript to build them. In the same projects I mentioned above, there were cases where vanilla JavaScript was more cumbersome and complex to write. In these cases, we wrote Custom Web Elements with vanilla JavaScript to help us write simpler and more maintainable code. These complex cases included features like Paging for search results, custom tab controls, and carousels.

Recently, the term “HTML Web Components” has been changing to refer to Custom Elements without utilizing the Shadow DOM. This is the way we have been using them at BizStream. This method also works extremely well when implementing custom Kentico Sections and Widgets that require JavaScript to function. There is a great article with other references about this emerging trend here.

When to Choose JavaScript Frameworks

JavaScript frameworks provide pre-built structures and libraries to simplify web development. They shine in the following situations:

Complex Web Applications: When you’re building a complex, data-driven web application, a framework like Svelte, React (which really might just be a library), Angular, or Vue.js can streamline development by offering a structured, component-based approach.
Team Collaboration: Frameworks provide a consistent structure and coding conventions, making it easier for team members to collaborate. This is particularly important in larger projects.
Rapid Development: Frameworks come with a rich set of pre-built components, which accelerates development. If you need to release a product quickly, a framework can be a lifesaver.
Single-Page Applications (SPAs): For building SPAs where content is dynamically loaded and changed without full page reloads, frameworks offer the tools necessary to manage complex state and routing.

There have been several projects here at BizStream where we have chosen to use a JavaScript framework. All of these cases involved highly complex interactions, usually spanning across multiple pages containing complex state management.

Using Meta-Frameworks

One more thing to mention are Meta-frameworks like Next.js, Gatsby.js, SvelteKit, and Nuxt.js. They provide an additional layer of abstraction and simplification in web development. These frameworks offer the following benefits:

Efficient Development: Meta-frameworks build on top of JavaScript frameworks and provide advanced tools for server-side rendering, routing, and other common tasks. This can significantly accelerate your development process.
Built-In Optimizations: Meta-frameworks often come with built-in optimizations for SEO, performance, and code splitting, making it easier to create fast and efficient web applications.
Developer-Friendly: These frameworks enhance developer productivity by offering a streamlined development experience and best practices out of the box.
Hybrid Applications: They are well-suited for creating hybrid applications that can run both on the server and the client, making them a solid choice for projects with complex requirements.

Meta-frameworks can be a great choice when working with Kontent.ai or any headless CMS since they are not tied to a specific programming language or website architecture. So far at BizStream, we have used Kontent.ai with Gatsby.js and, more recently, Next.js.

Other Considerations

There are other things to consider when choosing how to implement the front-end architecture of a website. If the site is eventually going to be maintained by the client, their environment has a heavy reliance on Microsoft IIS, and they mostly have C# developers, then building the site with ASP.NET should be considered before writing the site entirely in one of the meta-frameworks mentioned above. But, if they know JavaScript and/or Node development well, then writing with mostly JavaScript is probably the best.

Another thing to think about is the project budget and the learning curve of using a larger framework or meta-framework. If no one has experience with Next.js and the budget is tight, it might pose too high of a risk to implement the site with it. On the other hand, if the budget allows the investment, frameworks, and meta-frameworks can be a joy to learn and work in.

Conclusion

At the end of the day, choosing the right software tools, languages, and approaches depends on the specific requirements of your web development project. JavaScript offers a wide range of possibilities, from simple, lightweight solutions with vanilla JavaScript and Web Components to complex, feature-rich applications with the help of JavaScript frameworks and meta-frameworks. You might not always want to reach for a framework or meta-framework when starting a new project, but they should not be disregarded either. To make the best decision, really learn what the options are, carefully consider the project’s scale, complexity, and goals, and choose the approach that aligns with the development needs.

About the Author

Mike Webb

Mike started his programming career in high school on a TI83+ calculator. In college, he continued with C++. His desire to code came from playing video games and wanting to know how they worked and from his mother, who also worked in software. After getting the bug for coding and with the insatiable thirst for learning, he never looked back. Aside from programming, Mike loves hiking, fishing, listening to and playing music, being involved at church, and spending time with his family and friends.