What Modern Web Development Looks Like
Nowadays, web development is a job that you love and hate at the same time. This field evolves so fast, that the huge amount of new tools that are made available to you every day is enough to make you dizzy. The way we build websites now differs greatly from what it was just a few years ago. I feel like the below image, created by Kamran Ahmed, best illustrates this level of complexity, and reflects the training path of a front-end developer in 2019.
If we do not devote enough time to learning new technologies and choosing proper tools, it might turn out we’re trying to “dig a tunnel under Mordor with a screwdriver”.
Today’s approach to web development
Modern web developer should be able first and foremost to use the solutions created by those that came before them. The times where most of the web was based on and
table and, gifs constituted majority of the content, are long gone. Implementing a modern website is much more demanding. Luckily, we also have a number of libraries, frameworks, scripts, snippets and other solutions at our disposal, to help us create a site that is up to today’s standards. So much so, that it’s impossible to familiarize yourself with all of these technologies. A good developer should then first and foremost be able to skillfully analyze a problem, and choose a suitable solution.
Styling has gone a long way from a thousands-lines-long
style.css file to its current format. I am talking of course about preprocessors, which enable us to widen the possibilities of the CSS language by a lot. They allow us to use advanced logic in stylesheets, e.g. variables, nesting, inheritance, mixins, functions and mathematical operations. We also have a possibility to divide the code into smaller modules, which makes it more readable and easier to debug. Preprocessors have their own syntax, which is then compiled to the CSS format that browsers can understand. Right now the most popular preprocessors are Sass, Less and Stylus.
Good old HTML. For many people it is a question of debate whether it should even be considered a programming language since it is made up of tags only. In itself HTML is quite limited, but here we can use the help of so-called template engines. NunJucks, Pug and Handlebars are some of the more popular, but I assure you there are many many more. In my opinion, the most important feature they introduce is modularity, which increases the reusability of code. If you’ve never used a template engine, just imagine that you could use loops, conditional operators, reusable blocks and layouts, module imports, module imports or iterating over JSON data. Sounds great, right? An interesting and less challenging alternative for template engines is using PostHTML. This tool expands the possibilities of HTML, without forcing you to learn new syntax.
While writing complex scripts, we have tens of thousands of packages created by developers from all around the globe available on npmjs.
The above technologies are just the tip of the iceberg when it comes to web development. Back in the day, everything was simpler but not necessarily better. The tools we now have at our fingertips make the development process faster and easier. Developers do not have to waste time reinventing the wheel and instead focus on implementing new features for the application. Choosing these tools should always come from a good understanding of the project and clients’ needs.
Here at Chop-Chop, we make sure to use the right technologies for each project. We believe that this is key to providing well-optimized, quality products. If you would like to see firsthand how we do this, do not hesitate to drop us a line.