Web Development for Dummies

Many people spend their days surfing the web without really knowing who built the webpage they’re currently browsing or how the online store they buy from really works. The short answer is — magic. If you’re not satisfied with that answer, here’s another one. The answer is web development.

This answer looks simple enough, but the looks can deceive. Web development actually encompasses a lot of things, from the way your website looks to its “behind-the-scenes” structure.

Taking that into account, one would assume that those areas are handled by different people. And that certainly is true, from a certain point of view. When manufacturing was first introduced in the old days, work was split between people that possessed skills which were required at different points in the manufacturing process. For example, we are making a toy car. I would be the one to make the shell of the toy car, you would put on wheels and the third person would paint it. This speeds up the manufacturing process but requires more workers. Smaller shops had just one or two workers that did everything a five-man team would do, but of course, slower. Just like the force, your website is split into two distinct parts the light side and the dark, the Jedi and the Sith. But what about the middle? The Bendu?

You see, most of the time web development is split between the frontend, the backend, and the small(er) number of developers called full stack developers. So what do each of these guys do? First and foremost we’ll start from the front because that’s the first thing you see when you go to a webpage.

Front and Center

Frontend developers are usually the ones that design the look and feel of the webpage. The responsibility of a frontend developer may vary from job to job. For example, if the developers can be tasked just with designing the look of the webpage without touching any code, they are called web designers. On other jobs, they may assume the position of a UI/UX designer. These people are tasked with creating the User Interface, or the look of your website, while at the same time studying and researching how people use the sites and make the necessary changes through a lot of testing. People who are working as a frontend developer usually need to know HTML, CSS and lastly Javascript, depending on the job requirements.

Hyper Text Markup Language (or HTML for short) represents a markup language that was invented during the 90’s by a guy named Tim Berners-Lee. HTML represents the bones of your webpage, the text, the paragraphs, images and etc.

The sad days of gray and un-appealing web pages are long gone thanks to Håkon Wium Lie, who introduced us to Cascading Style Sheets (or CSS for short).

CSS is responsible for making your webpage look pretty and fashionable. Changing fonts, colors and even layout of the text or images on your webpage.

Last but not least comes the ugly duckling of programming languages Javascript. Invented by Brendan Eich in 1995, it was developed by the name Mocha, but at launch, the name was changed to LiveScript which in turn later became Javascript. This is where the age-old question comes to play. Are Javascript and Java related? No, they are not. The name Javascript was chosen because it would make Javascript more popular since Java had gained a huge popularity in the programming community at the time. Introduction aside, what does Javascript, (or JS for short) do? JS is responsible for making your webpage interactive. For example, if you want your text to appear out of nowhere when you click a button, you would use JS. Things get a little more complicated from here. You see, a lot of developers use these “things” called frameworks. These frameworks are here to make a developers job easier by providing certain features that might, for example, require less code from the developer. JS represents a kind of framework hell, because it spawned a lot of frameworks that made JS easier to use. The language itself isn’t all that confusing, it just has a lot of strange quirks that some people find annoying or completely unnecessary and downright awful. So to combat these quirks, developers started making frameworks. Some of the most well known are Angular.js, React, Vue, Ember and so on. This all makes for frontend developer jobs that clearly specify for a developer by requesting him/her to know a specific framework. You might find a job offer, but it’s only for people that know React or Angular. Taking this into account some people say that it’s best to focus on just learning the frameworks since there are not many job offerings based on plain JS. That has some merit but in the recent years, there is a resurgence of plain JS developers, since many quirks that have plagued the language have been fixed. Also, JS has learned from its “children” and has adopted some much-needed features. So, you could always argue that you should learn plain JS first and then jump onto the framework train. Either way, there is no right or wrong way.

This is all fine and dandy if you want to create a static webpage that has no other functionality. But what about those times when you need to create a website that has an online shopping feature? This is where the backend development guys come in.

Behind the scenes

Backend developers are responsible for the “behind-the-scenes” workings of a website. The database that stores all the articles in the webshop was probably made and maintained by a backend developer. There are also the ones responsible for safekeeping your credentials and confirming your identity when you purchase something. That “back-end” runs on a server, which is why backend development is sometimes called server-side development.

So, which technologies do these people use? While usually knowing the basics such as HTML and CSS, they are also quite skilled with a server-side language such as Python, Ruby, C# or PHP. Also, they utilize databases such as PostgreSQL, MySQL, Oracle SQL and such. So, with all these technologies to choose from, there must be some sort of encompassing term that includes all the technologies used in a certain project and that term is the stack. Two of the more popular ones are LAMP and MEAN. LAMP is a stack that consists of Linux, Apache (server), MySQL (database) and PHP the programming language.

MEAN in turn consists of MongoDB (database), ExpressJS (framework), AngularJS (framework) and Node.js the server-side programming languages. These are one of the more common stacks, although there are many of them. A stack is chosen depending on the size of the project or the needs it has to meet. So, it’s more than likely that a backend programmer would know more than one database or programming language at the same time.

There are times when both frontend and backend are being done by the same person, and that person is a full-stack developer. So, if it can all be done by the same person why split it?

First of all, it’s really difficult for one person to know it all, and it takes a lot of time and effort. And as we all know time is money, and with the ever-changing landscape, that is programming, it’s really hard to stay up to date with the latest technologies used. This is one reason but there are others that I would like to mention. The first one being the ease of maintainability. It’s easier to maintain a webpage when many people have been doing a project and have a good understanding of how their part works as opposed to having one person to do everything and trying to keep it all together. Also, when a worker quits it’s easier to find a replacement since that person has been tasked with doing just one part of the webpage and you still have 90% of the team that was working on the rest of it. If the one person that has done the webpage by himself leaves, then the company would have a hard time finding a suitable replacement that would know how to maintain said webpage. Lastly, you may wind up in a situation where you would have many frontend apps linked to one backend app and vice-versa.

Saying all of this it would be a good idea to sum up how a project would look like when split between the frontend and backend developers.

The development process

First of all, we have Mark, a web designer, then we have Susan the frontend developer and Igor a backend developer. The three of them are making a registration page for example.

he look of the web page starts from Mark. He uses Photoshop or InDesign to design the look of the website. This consists of choosing a font, colors, input fields, buttons, their layout and etc. When Mark finishes his design he sends it to Susan with the specification of the project. Now, we come to coding. Susan’s job is to convert Marks idea into a website. So Susan starts coding, utilizing HTML, CSS, and Javascript to achieve the desired effect. After she’s done with her work we have the webpage with all its buttons and fields, ready for use. You start typing in the required data in the fields and submitting them but nothing happens. Why? Well, Igor was watching cat videos and forgot to do his work. So, it’s time for Igor to do his magic. He starts by making a validation for errors like invalid email, invalid password or username. If your data was entered correctly it will move on to the database Igor made and you, the user will be able to register yourself. Now that web page needs to be maintained and scaled. Again, these three will do what’s required of them and scale the app. But what if Susan quits her job? No problem, here comes Angela, a new frontend developer in your company. She has the skill set required, so she only needs to get acquainted with the code Susan wrote and she’s good to go. The backend is still maintained by Igor and a new design is being brewed up by Mark.