Code Generators, Vanilla Code, Frameworks, Libraries, and CMS

In both life and web development, various approaches exist for solving problems. Depending on an investor’s objectives, some methods for creating websites and web applications may introduce more challenges than others.

Web development has come a long way since the late 80s and early 90s, with today’s methods differing significantly from the industry’s early days. If you’re new to all of this, navigating through different methods and their purposes might be confusing. We’ll simplify it and provide guidance on when and why to use them.

So, when to use code generators and the other methods we mentioned?

Code generators in web development

Code generators in web development gained popularity around 2008. They provided a user-friendly method for building website and web application interfaces from design. However, their performance back then was bad, and as of 2023, we anticipate improvements with the introduction of AI in code generation.

How do User Interface Code Generators Work?

When a graphic or web designer completes a website’s design within software equipped with an integrated code generator, it can export the design to HTML, CSS, and JavaScript. The quality of the generated code depends on the skills of the developers who developed the code generator. Tools capable of exporting generated code from a design include Figma, Anima, Handoff (abandoned), and Zeplin.

Pros of Code Generators

1. Code generators excel in prototyping and repetitive tasks.
2. They reduce human coding errors but may introduce machine errors due to inherent bugs.
3. No writing of code.
4. They are ideal for development among those who do not understand the code.
5. They ensure consistency in coding styles and errors.

Cons of Code Generators

1. Code generators have limited customization and flexibility.
2. The code they produce tends to be bloated, containing excessive elements that increase loading times.
3. They exhibit high dependency, with more dependencies leading to reduced quality and longer loading times.
4. Code generators are unsuitable for production type projects requiring customised approaches and maintenance.
5. The generated code is uniform, regardless of the user, and can lead to increased security vulnerabilities.

When and Why Should You Consider Using Code Generators

We recommend using code generators exclusively in closed, non-production environments, primarily for testing purposes, such as prototyping. Many IT agencies, in their pursuit of faster project completion, sometimes incorrectly treat prototypes as final products. If your business continually requires website or web app repairs or similar interventions, it’s highly likely that your IT agency has made this misjudgment.

Vanilla code in web development

Vanilla code in web development refers to unaltered, non-framework-specific code written in machine languages like HTML, CSS, JavaScript, and PHP. It stands as code in its raw form, devoid of additional abstractions or dependencies. While vanilla coding yields superior results, it does come with a significant drawback: it consumes more time. Developers opting for vanilla code often craft their own reusable libraries and patterns. Over time, these libraries and patterns evolve into custom frameworks.

Since vanilla coding isn’t reliant on other technological solutions, websites and web apps developed with vanilla coding enjoy a prolonged lifespan.

However, this approach may not align with the objectives of larger tech companies, particularly those with substantial expenses and a business model dependent on continuous website updates and repairs. For such companies, delivering a permanent solution or one with minimal issues may not serve their best interests.

Pros of Vanilla Coding

1. You have full control over your code without framework restrictions.
2. Faster website and web app loading, as code can be optimised for quicker load times.
3. Enhanced comprehension of core language concepts and logic, leads to a better understanding of code and the digital environment. This results in the delivery of long-lasting, high-quality solutions.
4. Code can be customised to meet specific project requirements.
5. Minimal reliance on third-party dependencies, which significantly reduces security risks.

Cons of Vanilla Coding

1. Vanilla coding demands more time for implementing features.
2. If vanilla code lacks proper structuring, maintaining the code can be challenging.
3. The vanilla approach lacks pre-built features found in frameworks.
4. Incompatibility issues may arise if compatibility hasn’t been considered when writing vanilla code, leading to inconsistencies across different browsers.
5. The learning curve is steeper for beginners, as they need to grasp the fundamental logic and nature of coding and the problem-solving environment. This abstraction can confuse their understanding of the technology they’re using by limiting their creativity and problem-solving skills.

When and Why to Use the Vanilla Approach

We recommend using the vanilla approach in combination with libraries or frameworks. This approach offers the necessary quality and control while minimising the “reinvention of the wheel”. Not everything needs to be reinvented when there are already effective solutions available. For developers, showcasing the ability to write vanilla code demonstrates their expertise, making it easier for them to adapt to different frameworks and libraries.

Frameworks in web development

HTML, CSS, and JavaScript frameworks are indispensable tools for web development. Often built on top of libraries, they provide a structured foundation for websites and web applications, offering pre-written code, libraries, and tools to streamline development.

Popular HTML Frameworks

1. Bootstrap: Widely used for responsive, mobile-first website design.
2. Foundation: Primarily focused on responsive and accessible web design, commonly used in web app development.

Notable CSS Frameworks

1. SASS/SCSS: Extends vanilla CSS with variables and more, though it’s slowly becoming obsolete.
2. LESS: Offers dynamic stylesheet capabilities, similar to SASS/SCSS.

Prominent JavaScript Frameworks

1. Next JS: Developed by Jordan Walke at Facebook, renowned for building complex user interfaces.
2. Angular JS: Created by Google engineers Misko Hevery and Adam Abrons, built on TypeScript, excelling in complex user interfaces.
3. Vue JS: Developed by Evan You, a popular JavaScript framework for building user interfaces and single-page applications (SPAs).

Frameworks facilitate the development of large websites and web applications, thanks to their user-friendly components and simplified maintenance. However, a potential drawback is that websites and web apps created with popular frameworks may appear generic and similar, requiring extensive code customization for a unique style. For unique customizations, combining vanilla coding, pre-written patterns, and libraries is a cost-effective approach.

Pros of Frameworks

1. They have pre-built UI components for accelerated development.
2. Frameworks ensure uniform design and user experience.
3. They include responsive design features.
4. They offer extensive documentation and community support.
5. Frameworks are designed with accessibility standards in mind.

Cons of Frameworks

1. Learning curve and adaptation time.
2. Frameworks are limiting creative design choices.
3. They may include unused or unnecessary code affecting performance.
4. Dependency on frameworks can make changes challenging.
5. Framework updates can lead to compatibility issues.

When and Why to Use Frameworks

We recommend using frameworks for large, complex projects with many components. While they may result in slower websites or web apps compared to the vanilla approach, the focus for substantial projects is on ease of maintenance and faster development. Small to midsize projects, on the other hand, should avoid fixed frameworks meant for large systems, as they tend to migrate to different technologies over time. Migrations create future financial burdens for investors. With proper development approach, migrations can stay affordable.

Libraries in web development

An HTML, CSS, and JavaScript library is a collection of pre-written code, functions, and components that simplify and speed up web development. These libraries offer reusable solutions for common tasks and challenges in web development. Unlike frameworks, libraries are typically more flexible and allow developers to use them in various ways. While libraries are often extremely helpful, it’s crucial to note that they can also contain malicious code that may pose a serious threat to websites and web apps. Therefore, before using an unfamiliar third-party library, developers should ensure its code is clean and secure. One of the most well-known JavaScript libraries today is React.

Pros of Libraries

1. Libraries provide pre-written code, saving time and effort in web development.
2. Their code can be used in multiple projects, reducing redundancy.
3. Libraries frequently boast active communities for assistance and updates.
4. Regularly maintained libraries tend to be more reliable.
5. The use of libraries is at the discretion of developers, offering them significant freedom for customizations and maintenance.

Cons of Libraries

1. Developers must invest time in learning how to use libraries effectively.
2. Projects can become cluttered with libraries, increasing the dependency on them, making updates challenging.
3. Unused code within libraries can impact the performance of websites and web apps.
4. Some libraries may not be compatible with others or with certain frameworks (e.g., jQuery UI and Bootstrap UI).
5. Keeping all libraries up to date can be time-consuming.

Most issues associated with libraries revolve around compatibility. Problems can arise in highly customizable websites and web apps that require the integration of libraries developers haven’t previously worked with. While this won’t cause significant problems, developers will need to invest time in studying and learning how to use the code of a new library before finding a way to combine two libraries that are initially incompatible. Compatibility issues usually arise when two libraries share variable names or function names that overlap or overwrite each other, rendering their simultaneous execution impossible.

When and Why to Use Libraries

We recommend using libraries whenever the opportunity arises. If you’re working on small to midsize projects and aiming for uniqueness, longevity, and fast loading times, the vanilla approach in combination with libraries is the way to go. For larger or more complex projects that demand swift completion, introducing frameworks into the equation is the next logical step.

Content management system (CMS) in web development

A Content Management System (CMS) is a software application that empowers users to create, manage, and organise digital content, primarily for websites or web applications. CMS systems are carefully crafted to streamline content creation and publication, ensuring accessibility to individuals with diverse levels of technical proficiency. Some of the most popular CMS systems include WordPress, Shopify, Magento, OpenCart, and more.

Pros of CMS systems

1. CMS systems are user-friendly, catering to non-technical users who require efficient content management.
2. They offer a swift and straightforward content editing and publishing process.
3. CMS systems facilitate the creation of consistent and visually appealing website layouts.
4. Many CMSs come equipped with built-in SEO features to enhance search engine rankings.
5. Most CMSs maintain active communities and abundant resources for troubleshooting and updates, with popular CMS platforms (WordPress) enjoying enhanced support.

Cons of CMS systems

1. The initial setup and learning curve for CMS usage can be time-consuming.
2. Neglecting updates for the CMS and its plugins may lead to vulnerabilities.
3. Achieving complex customizations can pose challenges with certain CMSs.
4. Regular updates and backups are essential for security and functionality.
5. Integrating websites and web apps with a chosen CMS renders them dependent on that specific CMS, potentially making migration complex, although not impossible.

Once a user interface is constructed for a website or web app, the next logical step is integrating it into one of the numerous CMS systems. This allows investors and their companies to independently create and manage content. Websites integrated into CMS become CMS themes, which CMS uses to present both existing and newly generated content. CMS software can be developed using a variety of technologies and languages, with PHP being the most common, though JavaScript is also a viable option.

When and Why to Use CMS

If investors intend to regularly update their website or web app by adding new content, managing existing content, and updating the services and products they offer, integrating their user interface into a CMS system is a logical choice. CMS themes typically employ a combination of vanilla coding, frameworks, and libraries to ensure smooth operation. This approach is well-suited for those seeking an efficient and flexible way to manage their web content.

What not to do as web developer (real-life example)

Web development can go so wrong that even seasoned IT agencies refuse to handle the mess. Occasionally, we’re called in for UI migrations when investors want to keep their existing UI but move to a new platform. This often happens because the company outgrows the limitations of its current website or web app and needs a more flexible platform.

One memorable case we encountered baffled us. An existing website’s UI was developed using a code generator, Vue JS/Nuxt (Nuxt is a JavaScript framework of Vue JS who is another JavaScript Framework), a JavaScript library for animations, and an additional CSS library for animations also. To top it off, the IT agency who developed the website chopped the “head” off WordPress to get a headless CMS. While this may seem like a good idea to some people, this approach resulted in a tangled mess of dependencies, bad HTML and CSS, SEO issues, broken JavaScript code, and broken core functions of WordPress, causing the website to break repeatedly, which resulted in loss of clients for the investor (pretty expensive outcome for businesses that seek stable platform to offer their services and reach new customers/clients). This kind of development is financially burdensome as it demands constant fixes and workarounds throughout the website’s lifespan.

When a new IT agency was hired to migrate the UI, they struggled to untangle the dependencies. They brought us in to extract the UI from this complex web of code. The cost for preparing the UI for migration exceeded $2000. Task included rebuilding parts that were too entangled to remove, fixing poorly written HTML, CSS, reconstructing some JavaScript, and organising the code for backend developers of new IT agency who took over the migration and integration process.

Mentioned scenario underscores a common problem in the IT sector, where certain agencies engage in dubious practices that take advantage of their clients. It’s crucial for investors to realise that technology can operate seamlessly, sparing them from dealing with website or web app crises every week or month. When IT agency decides to commit a tech overkill on simple projects, investors should seek another IT agency instead.

Conclusion

When approaching the design and development of new solutions, the primary consideration should be the number of dependencies required for the project. In the context of small to midsize websites and web apps, simplicity is the key to success. In highly competitive markets, emphasis is placed on achieving uniqueness, maintaining high quality, and ensuring fast loading times.

Developers should avoid using code generators in production and JavaScript libraries or frameworks that add unnecessary complexity without providing real benefits to the investor’s website or web app. Similarly, it’s advisable to steer clear of complex setups like headless WordPress. Although WordPress is a versatile CMS, it has limitations, particularly when developers lack a deep understanding of its core functionality.

If an IT agency overcomplicates straightforward projects or tasks, it could lead to unnecessary costs or reveal a lack of expertise. Investors should always ask creative or IT agencies to explain the process they plan to use in a project.

If your website or web app faces UI issues, don’t hesitate to reach out to us for a free analysis.