Becoming a Web Developer in 2022
Concepts, technologies and tools you should know if you want to embark on the path to becoming a Web Developer.
This article is intended for those who would like to embark on, or have recently embarked on, the path to becoming a web developer but also for those who have to deal with a team of developers in their work.
The article provides a mental map of the concepts and technologies that are at the heart of modern web development and is the result of my experience of almost 8 years as a Full Stack Web Developer.
ps: today I have abandoned this activity to devote most of my time to the design and management of Digital Transformation projects for large corporates. I am in fact part of the Corporate Transformation team at Talent Garden which, with its community of Tech Creatives and over 26 campuses in 19 cities, is today one of the most vibrant innovation ecosystems in Europe.
All that remains is to wish you a good read! <❤️/>
Before starting I would like to spend a few words to say that today there are mainly three profiles of Web Developers.
Front-end Developers: they are responsible for the visible part of a website/web application. They are in charge of developing the interface of a website/application ensuring the best user experience. They have advanced web development skills (client side) but must also know the basics of User Experience Design (UX).
Back-end Developers: they are responsible for all activities that are not strictly visible to the user (server side). They work to ensure that a web application is robust, functional, reliable and fast.
Full Stack Developers: they are most often professionals with senior developer experience and with both front-end and back-end development skills.
These profiles have different responsibilities and perform different activities. Nevertheless, as is inevitable, there are concepts and technologies that they both need to know regardless of their area of specialisation.
It is highly unlikely that a Front-end Developer does not know the basics of server-side development. Probably in his daily activities, at a certain point in his career, he will no longer have to “put his hand” on a database, but it is essential that he knows the basics and is able to relate adequately with the profiles that deal with that part of development. Vice versa, the same applies to a Back-end Developer.
Here are the concepts, tools and technologies that all Web Developers should know, with different degrees of depth.
1 — Prepare the ground
Web Fundamentals
It may seem obvious, but knowing the basics of the web is the most effective way to better understand the concepts and technologies that you will encounter later on in your journey to becoming a web developer.
Where to start? My suggestion is the basics of a client/server network architecture and its main protocols such as HTTP/HTTPS and FTP.
Command-line interface (CLI)
Often ignored or neglected, especially by beginners, this is actually a tool that will prove very useful over time.
My suggestion is to start getting familiar with it as soon as possible.
It will allow you to save time and energy in the future and will greatly optimise the development of your web applications.
Code Editor
This is the main tool used to write code and develop applications. There are many of them (Atom, Sublime Text, Brackets just to name a few). Personally I suggest Visual Studio Code. At the beginning you won’t understand its full potential, but with time, thanks to the many plugins and customization levels, it will become your faithful companion you can’t give up.
🎓 Visual Studio Code Crash Course
tip: at the beginning of the path you can remove complexity by using a very simple and intuitive text editor like Notepad. However, the advice is to switch as soon as possible to a more structured code editor such as VSCode.
APIs
In the modern development of web applications, it is essential to know the principles and functioning of APIs (Application Programming Interfaces).
To simplify, we can say that APIs allow two applications (services) to exchange information using standard protocols.
🎓 Introduction to web APIs
🎓 Understanding APIs and RESTful APIs Crash Course
2 — Front-End Technologies
HTML
HTML (HyperText Markup Language) constitutes the foundation of the web. It is not a programming language but is defined as a markup language. Through the use of tags (‘markers’), documents on the web are structured. It is the first language to know if you want to build websites and web applications.
CSS
CSS (Cascading Style Sheets) is the language used to format HTML documents. Through this language it is possible to design the pages of a website by deciding on the appearance of each individual element such as fonts, colours, spaces etc.
Over time, this technology has also evolved and been ‘enriched’ with new features such as variables, operators, interpolation and mixins. This was made possible by CSS pre-processors, the most common of which are SASS and LESS. These scripting tools have in fact enhanced CSS, making it possible to write cleaner code and simplifying the management of large and highly complex stylesheets.
🎓 Getting started with CSS
🎓 Sass Basics
Javascript
Javascript is a programming language that allows you to add interactivity to a site / web application.
Let’s assume for example that through HTML we have inserted a button inside our document. With the style sheets (CSS) we have decided that that button must appear in orange color and must have rounded edges. With Javascript we can decide which action to activate when the user clicks on that button (ex. change the background of the whole site, open a pop-up, add a paragraph etc.).
Javascript according to the 2020 Developer Survey is the most popular technology among programmers. This is because if until a few years ago it was mainly used to add interactivity to a site and perform actions in the browser (client side), today thanks to the creation of the NodeJS platform is used for many activities on the server side. For example, you can use Javascript to query a database and build dynamic web applications. We can therefore say that Javascript today is no longer relegated to the domain of “Front-end” but is increasingly used in the domain of “Back-end” becoming a powerful weapon for those who want to become a Full Stack Developer.
3 — Back-end Technologies
The technologies met so far constitute the basic stack for building static web pages. If we want to build dynamic web applications, it is essential to understand the logic of server-side programming.
In this chapter we’ll deepen technologies and tools of server-side programming, or back-end development.
🎓 Server-side website programming
PHP
PHP is one of the most popular programming languages to develop dynamic web applications.
PHP and Javascript allow us to introduce two very important topics when we talk about programming: the Object Oriented Programming (OOP) paradigm and the Model-View-Controller architecture (MVC Pattern). They are two concepts initially not easy to understand but that I recommend to deepen as soon as possible.
Databases
Fundamental in Back-end development is the use of a database for data storage. There are many different types of databases. One of the main classifications is relational databases (SQL) and non-relational databases (NoSQL).
MySQL is perhaps one of the best known relational databases.
MongoDB is instead one of the most popular non-relational databases made “famous” by the rise of NodeJS.
Following our example of the button, we can assume that when the user clicks on it, a PHP function on the server is executed. This function can for example run a query to retrieve a specific data (record) in our MySQL database (e.g. the stock of a certain product).
Well, we’ve introduced some of the concepts and technologies that are fundamental to taking the first steps on the path to becoming a Web Developer.
Having defined these concepts it’s time to take a further step forward.
As mentioned at the beginning of the article developing web sites and applications can be an extremely complex activity. Over time, technologies and tools have emerged that seek to reduce this complexity by facilitating and speeding up the development of new applications.
4 — Framework
“[…] in software development, [a framework] is a supporting logical architecture […] on which a software can be designed and implemented, often facilitating its development for the programmer.”
If we think of a web application we can say with a high degree of certainty that some of the basic functionality that characterizes it can easily be found in other applications. Let’s think about the login function, for example.
With this simple example in head we can say that a framework is a tool that allows the Web Developer to optimize and speed up the process of development of a web application avoiding that some of the base functionalities that characterize it are every time written from zero.
🎓 Introduction to client-side frameworks
🎓 Server-side web frameworks
There are many frameworks both Front-end and Back-End.
Here is a list of the most popular ones today:
Bootstrap
It is not a real framework but it is one of the most popular front-end tools for layout development. It allows the rapid implementation of web interfaces thanks to a multitude of pre-built elements (buttons, modals, navigation menus, etc.).
Vue.js
It is one of the Front-end frameworks for developing user interfaces and single-page applications that is becoming more popular in recent years. Although it is not yet the first choice when it comes to Front-end frameworks, it is definitely an interesting option especially for its very low learning curve.
The other two Front-end frameworks that dominate the market, also based on Javascript, are Angular and React.
Express.js
We mentioned a few paragraphs above that Javascript is now the most popular web programming language because it allows you to develop both client-side and server-side code. This is thanks to the invention and implementation of the NodeJS platform that actually “ took Javascript out of the browser “. Express.js is the king of NodeJS-based frameworks for server-side web application development.
Laravel
Remaining in the domain of server-side web application development one of the most popular frameworks is definitely Laravel, written in PHP. We can also find a “lite version” of Laravel called Lumen.
There are many other frameworks not only based on Javascript and PHP programming languages.
It is worth mentioning:
- Ember.js (Javascript);
- ASP.NET (high-level languages such as Visual Basic);
- Spring (Java);
- Django (Python);
- Symfony (PHP).
Before ending with the framework topic, it is useful to know that web application development has also evolved over time in terms of design. Today there are mainly two design patterns for web apps development: multi-page application (MPA) and single-page application (SPA). This is also a topic that you will certainly find along the way.
5 — Code Management
Package Managers
We have said that frameworks help a lot the Web Developer because they allow to simplify and speed up the development activity of new web applications. In addition to frameworks, there are hundreds of other code libraries that can support programmers in the development of their projects.
It’s good to know that the use of these software libraries, if from one side facilitates the life of the Web Developer because it allows him to exploit already existing code to carry out a series of activities, from the other side it can complicate it because these libraries must be managed, updated and very often they are interdependent one from the other.
This is why over the years there have been created some programs, the Package Managers, which allow the developer to optimize the installation, updating, removal and management of interdependencies of these libraries within their projects.
Two Package Managers are worth mentioning here: npm for managing software packages written in Javascript and Composer for managing software packages written in PHP.
Version Control
Working on complex web applications often means collaborating with other developers. To better manage the collaboration — but also and more generally the project — it is essential to know how to use modern systems of version control, i.e. those tools such as Git that allow the saving and management of different versions of the application.
6 — Conclusions
I hope the concepts and technologies listed in this article can help and support you on your path to becoming a Web Developer.
Summarizing:
- We said that to get started, it is essential to know the fundamentals of the web and in particular the client/server network architecture.
- It is useful to know and become familiar with the command line interface right away.
- That the basic technology stack for a Front-end Developer is composed of HTML, CSS and Javascript.
- That the basic technology stack for a Back-end Developer is composed of a programming language (e.g. PHP or Javascript) and a database (e.g. MySQL or MondoDB).
- That Javascript is now one of the most popular programming languages because it is no longer relegated to the “client” domain but thanks to technologies such as NodeJS can also be used to develop server-side applications.
- That there are many frameworks that can support the Web Developer in the development of new dynamic web applications.
- Finally, thanks to tools such as package managers and version control systems we can better manage the development of complex applications.
If you have found interesting the article and if you like to deepen some argument you can find me on linkedin.
Bye 👋🏼
