Front-End Development — The Mess We’re In
A short reflection on the state of Front-End development. In one of the “Strange Loop Conference” talks, Joe Armstrong talks about “The mess we’re in.” He mentioned how complexity arises because of the increased amount of states your computer can be in.
/ the-mess-were-in
The rising level of complexity applies to Front-End development as well. If you have an error from a library when you bundle your application, you must consider the Node.JS version, the package manager, the framework, and the bundler you are using.
So what is the status of Front-End development nowadays, and do we have so many possible states to consider it a mess?
Languages
There are many languages used for front-end development. This variety of languages is due to the web’s evolution and front-end developers’ needs. For example, CSS was created to style HTML pages, but as websites became more complex and dynamic, preprocessors such as Sass, Less, and Stylus were created to make writing CSS easier and maintainable.
Templating languages such as Pug and Handlebars were introduced to make it easier to generate HTML code by providing simpler syntax and the ability to reuse code snippets. This has led to a proliferation of languages used for front-end development, each with its syntax, features, and use cases.
The languages you would use are often dependent on the framework you chose. You have three types of languages: scripting, style, and templating language. Below is an incomplete list:
Scripting: JavaScript, TypeScript, CoffeeScript, PureScript, Elm, ClojureScript, and more.
Style: CSS, Sass, Less, Stylus, CSS-in-JS (styled-components, jss, emotion, styled-jsx, …), CSS modules with PostCSS, and more.
Templating: HTML, JSX (React), EJS, Handlebars, Pug, Mustache, and more.
Development tools
There are many choices for front-end development tools, and the abundance of options can make it difficult for developers to choose the right one. This is especially true regarding bundlers, as each has its own strengths, weaknesses, and use cases.
For example, Vite is a relatively new bundler that prioritizes speed and ease of use. Webpack, on the other hand, is a more feature-rich and flexible bundler that can handle complex and large projects. Rollup, meanwhile, is optimized for generating smaller and faster bundles, making it a good choice for libraries.
The choice of bundler often comes down to the specific needs of a project and the developer’s preferences. For example, a developer who values simplicity and speed may choose Vite, while a developer who needs to handle a large and complex project may prefer Webpack.
Frameworks
Front-end development frameworks are essential tools for modern web development. They provide a set of standardized components, libraries, and tools that can simplify the development process and help developers create better and more efficient web applications.
One of the key benefits of using a front-end development framework is that it provides a well-defined structure for building applications, making it easier to develop and maintain code. This structure can include components for everyday tasks such as routing, state management, and styling, reducing the code developers must write from scratch.
Another important benefit of front-end development frameworks is that they can improve performance and speed. By providing optimized and efficient solutions for common tasks, frameworks can reduce the time and resources needed to create and run web applications.
A front-end development framework can also make collaborating and sharing code between developers easier. By providing a standardized and well-documented architecture, frameworks can ensure that all developers work with the same tools and practices, making it easier to understand and maintain each other’s code.
React, Preact, Inferno, Astro, Svelte, Ember.js, Angular, Vue, Backbone, Cycle JS, Aurelia, Riot, Mithril, Solid, and other frameworks are some of the options for front-end developers to use.
This variety of options results from the rapid evolution of front-end development and the increasing demand for more powerful and efficient web applications.
0:00 Introduction
1:29 Languages
3:00 Bundlers
3:52 Frameworks
5:14 Package managers
6:02 Innovation or a mess?