Coding Dojo

frontend-versus-backend-development

Frontend vs Backend vs Full Stack – A Career in Web Development

The web development field is expected to grow more than 20 percent in the next 10 years, and web developers will undoubtedly enjoy steady growth in demand for their services.

However, if you want a career in web development it’s likely you many be questioning what web development languages to learn– HTLM, Python, Ruby on Rails, iOS, C+…the list goes on and on.

For the most part, what languages you end up learning depends on whether you want to tackle frontend vs backend vs full-stack web development.

To help make a selection, we’ll start by breaking down how modern websites work and how different languages serves different needs of web developers.

Let’s Start Here – Website 101
Let’s begin our journey by understanding how information is displayed from a website onto your screen. All websites utilize HTML to process the structure of the website, as well as display its content. Now, you can think of HTML (Hypertext Markup Language) as the bare bones skeleton of the actual site.
Back in the early days of the web, this is how most websites operated. A static HTML file would have to be updated whenever the web developer wanted to display new information on the website. This led to developers constantly having to rework the HTML files in order to display new information on the user’s screen.

At first, this doesn’t seem like such a bad idea–after all, how often do you need to update a website anyways? A couple times a week? Sure, this method works well for small websites with limited information and infrequent updates, but what about websites such as www.nytimes.com?

In 2013, The New York Times published around 350 stories, generating 17 million page views, each day! Imagine having to create 350 new files each day with a different article on each. Sounds pretty time consuming, doesn’t it?

Frontend vs backend

Of course, The New York Times doesn’t operate by publishing new articles on individual web pages, but rather by creating a “template” in which data (in this case, news articles) can be inserted in the correct sections of webpage.

Well, if we aren’t including the actual articles in the HTML files, then how do we store our data? This is where we begin to differentiate between static and dynamic websites.

A dynamic webpage will utilize a database to store all of our articles in text, as well as an HTML file to display our information from our database. We can begin to think of these two entities as the back-end and front-end of our website. HTML itself cannot retrieve any information from a database. We need to use a server-side language to grab that information and feed it into our HTML files.

One of the most popular and widely used server-side programming languages on the web today is PHP, which stands for PHP: Hypertext Pre-processor.

Here’s a look at what we have so far:

  • News articles contained in our database
  • PHP Code to grab information
  • HTML for our webpage to display

We can begin to note a linear progression here. Our database holds all of our information →PHP takes that information out of our database →HTML displays that information onto our screen. This is how most modern websites currently operate. Without having to store all the information on the actual webpage, developers can spend more time optimizing the actual “look & feel” of the website rather than worrying about the content.
Remember the back-end and front-end of a website? Well, we can break web development into two main categories: Front-end development and back-end development.

Front-End Web Development

Now, let’s take a look at front-end web development. What is the role of a front-end developer and what are their daily programming tasks?

A front-end web developer is mainly in charge of the user interface and the style of the website. The most commonly used languages a front-end Web developer uses are: HTML, CSS3, as well as JavaScript. These three languages are essential to any aspiring front-end web developer and are very important in defining the actual design of a website.

frontend vs backend web development languages

Going back earlier to when we thought of HTML as a skeleton of our webpage, we can think of CSS (Cascading Style Sheets) as clothes a person might wear. People want to express their fashion sense in their own way and CSS allows us to do that by pre-defining certain sections of a website to be a certain style.

Think of it this way: We usually wear a shirt, pants and shoes (the most basic outfit, I know). We can define the “shirt,” or a certain section of the webpage (lets say, the news article body in the example used above) to be a specific color. We can define these colors into our CSS file and include it at the top of our HTML file.

Now, whenever we decide to wear a “shirt,” we can simply refer to its “type” from our CSS file, which contains all of our predefined styles. JavaScript on the other hand is very versatile. A common application of JavaScript can be seen by the “Add to Favorites” buttons on websites. Or simply even displaying the time and date will use JavaScript. There’s much, much more JavaScript can do, but it’s important to remember that it works alongside both HTML and CSS (CSS3 is the third evolution of CSS).

Back-End Web Development

Though it’s essential to have a good-looking website, it’s also important to be able to fill our attractive website with good wholesome content. Now we begin to approach back-end web development.

Commonly used back-end web technologies are: Python, Ruby and PHP. Since we’ve mentioned PHP before, we’ll use that as our example here. PHP is a scripting language that works alongside SQL (Structured Query Language, MySQL is a common example), which is our database, to pull the information from our database and insert it into our HTML file. We can even change the data that’s being displayed or update it in our database.

Examples of this can be seen everywhere. Whenever you update your status on Facebook, the information you submitted gets stored in the database, not the actual webpage itself. If you decide to update your status, the updated information also gets pushed to the database. This seamless integration is what allows for Facebook to load so quickly instead of having to display everyone’s’ information all the time.

There are many more things back-end Web languages can do, but the takeaway is that for a dynamic website to exist with a large amount of content, a database is almost always a necessity–in conjunction with a server-side language, of course.

Full-Stack Web Development

Now let’s get back to the main question we asked in the first place: What web development technology should I learn? Well, here’s the thing. There’s not really one language you should learn, or “one main technology” that everyone uses all the time. Instead, it’s a culmination of many, using different specific features of each, which are the ingredients of a great website.

We now approach the full-stack web developer.

A full-stack web developer’s role in a website’s development lies in both the front-end and Back-End categories. “Stack,” means layer in this case. A full-stack web developer has expertise in all layers of a website’s development. This includes, but not limited to: the server, client and hosting, a form of data structuring or modeling, user interface and experience, as well as the needs of the actual business.

By becoming a full-stack web developer, we can begin to plan out our projects by finding which tools perform the best job for our task. Certain languages are better at certain things and that’s how it should be seen. Instead of focusing on a singular, one-track solution, it’s much better to get experience in every aspect of web development.

In any case, learning multiple web languages and technologies is the best route to take. However, there is one approach that is good to keep in mind: learn the most widely used and popular technologies/languages, as the more support you have for your product, the better.

If you’re interested in getting started as a full-stack developer check out Coding Dojo’s 12-week on-site program in Seattle, San Jose and LA!