Front-end vs. Back-end Development. Which Should You Learn And Why?
There is so much buzz right now about becoming a developer.
But with so much noise out there, it can be difficult to know where to even start.
Should you start learning to become a front-end developer?
A back-end developer?
A full stack developer?
What do these terms even mean?
To help you understand, we’ll start by explaining the difference between front-end and back-end development at a high level.
Then we’ll dive deeper into each discipline and talk about the different technologies and responsibilities involved.
Here we go.
Let’s start with an analogy of a brick-and-mortar store.
Think about the average store. Almost all of these have a front-end and a back-end.
The front-end of the store is where customers come in and buy things. Merchandisers spend a lot of time thinking about which products should be positioned where and how they can optimize the customer’s experience in walking around the store.
The back-end of the store is the part that customers never see. It’s the backrooms, filled with boxes and boxes of product that hasn’t yet been placed on the shelves.
A store that has a front-end but not a back-end would quickly run out of products for its shelves. It wouldn’t be able to restock them restock them fast enough.
A store that has a back-end but not a front-end would be super difficult to navigate for the customers. Costoco is an example. At Costco, it’s pretty hard to find what you’re looking for without getting a ton of help.
Both the front-end and the back-end are critical for the store as a whole to function. Each end serves different needs and requirements. The “full-stack” of the store needs to work in order for the store to be successful.
The same is true with web applications.
What is a Front-end Developer?
It’s the front-end developer’s job to be laser focused on the experience that the user has when visiting web pages. Front-end developers often work closely with designers to help turn their ideas into reality.
Here are some technologies that front-end developers use very often:
HTML (HyperText Markup Language) is the cornerstone of the web. All web pages and web applications are built up of HTML documents that the browser interacts with. HTML is pretty easy to learn. So while it’s technically a front-end technology, it’s useful for all developers to at least have a certain level of familiarity with it.
CSS (Cascading Stylesheets) is the ability to specify how parts of a web page look. With HTML, you can indicate that a snippet of text is a headline. But with CSS, you can change how the text looks (change color, add an underline, make it bold, change the font, etc).
JavaScript is a programming language that runs inside web browsers. Front-end developers focus on writing JavaScript code that runs directly within a web browser. JavaScript can help build fluid user interactions. Gmail and Google Maps are examples of very JavaScript-intensive apps.
Front-end developers generally focus their efforts on using these three technologies to create fluid user experiences.
Front-end Developer Best Practices
Since front-end developers focus on a narrow aspect of web development, they have opinions on how things should be built.
CSS Pre-Processors
In 1996, a standards committee initially defined the specification for how all web browsers should display the various aspects. Since there are many different web browsers and you want web pages to be consistent across all web browsers, the W3C (the World Wide Web Consortium) created standards.
Since then, developers wanted to add additional features to CSS. So they built additional languages that get converted into regular CSS. This transformation is known as CSS Pre-Processing. That’s because web browsers don’t actually understand this code, but they don’t need to since it’s written in a different language.
The languages of Less and Saas are the most commonly used preprocessor languages. Here’s how they’re different:
- Less is a different language than CSS entirely. Regular CSS works in Sass, but it also supports additional features.
- Sass’ website calls sass “CSS with Superpowers”.
Once you get a handle for regular CSS, both Sass and Less are pretty easy to pick up.
Developers generally use these because they’re more powerful than regular CSS and can allow cleaner code.
Advanced CSS Patterns
A Firehose student gave a talk about Intermediate CSS, which covers modern thoughts about the best ways to properly organize CSS.
You can use patterns like these to clean up and organize sloppy CSS code.
JavaScript Frameworks
In programming, frameworks help give your code structure. Front-end frameworks exist to add structure to web applications with complex user interactions.
Right now there are three major frameworks:
- Angular was developed by Google and has been used by many web applications. The next generation of Angular is Angular 2, and there are some major differences between the two.
- Ember is a front-end framework with origins at Apple. Apple created a framework called SproutCore, which was later renamed to Ember.
- React is a front-end framework created by the engineers at Facebook. React’s ecosystem is fast-evolving but is starting to stabilize. React-Fiber is a complete rewrite of the framework designed to be faster but also to maintain compatibility with older React code.
Other notable frameworks are Backbone & VueJS.
Right now there isn’t a “correct” framework to use. Different companies use different frameworks.
So don’t worry too much about the one you choose. If you’re interested in front-end development, it’s more important to get a solid understanding of the fundamentals than to pick the “right” framework.
JavaScript Transpilers
Web browsers all understand JavaScript. Some transpilers will re-write code from other programming languages into JavaScript. Web developers often learn these tools too.
Here are some common transpilers:
- ES6 is the next version of JavaScript. It’s backwards-compatible with older versions of JavaScript but has additional features.The conversion tool that is used to change ES6 into regular JavaScript code is called babel. ES6 is fairly new, but I’m pretty bullish on its future.
- CoffeeScript is a ruby-like programming language that gets converted into JavaScript. It’s built into the rails framework by default and is used by many developers.
- TypeScript takes a radical approach to fundamentally change JavaScript from a dynamically-typed language to a statically-typed one. This means it’s a fundamentally different language. TypeScript is a Microsoft initiative. Its success largely hinges on adoption rates of Angular 2.
The Bottom Line With Front-end Development
Things are evolving very quickly. This is exciting. It’s also daunting.
The term JavaScript Fatigue is used to describe the JavaScript community’s tendency to move towards new and shiny objects.
Don’t worry too much about not using the latest technology.
What is a Back-end Developer?
Front-end developers focus on working with tools, technologies, and programming languages that run inside web browsers. Back-end developers focus on…. everything else.
So what does this actually entail? Let’s zoom out a bit.
Let’s talk about how web applications actually work.
- To start, a web browser reaches out to the Internet and performs what’s known as an HTTP GET request to the URL that is visited.
- Magic happens through the pipes in the Internet
- Eventually, it will reach a server (a computer) that you as a web developer have control of.
It’s your job as a back-end developer to “make the magic happen” and give the user what they expect to see.
So let’s talk about what’s involved in making the magic happen.
Databases
On your computer, you probably store most of the data in files in your file system. Your servers will have files that you can access too, but generally, you’ll want to store data in databases.
Databases allow you to add, remove, change, and access things, like user-generated data, more easily. Nearly all web applications use databases, and there are two major different types of databases: SQL and NoSQL.
Most web applications use SQL databases. It’s common to build web applications that allow you to create rows, read them, update them and destroy them. This is called “CRUD” for short.
By nature, these databases typically always run on the server where the requests happen (instead of inside the browser). It’s one of the furthest aspects from the user, but it’s super important to keep track of user-generated data for obvious reasons.
Model / View / Controller Architecture. Nearly all modern web applications follow a standard Model / View / Controller architecture. Ruby on Rails does it, and other frameworks like ExpressJS do too. This framework breaks apart different responsibilities within an app and allows different parts of the app to deal with each responsibility.
Model is the part of the web application that interacts directly with the database. This acts as a layer that performs any database query that needs to happen.
View is the HTML page that the web browser should see. While the view is a front-end component, most back-end developers are capable of quickly adding something to a web page if it’s needed.
Controller is the glue between the various other pieces of a web application.
RESTful Architecture. REST is a concept of thinking about the underlying meaning of what HTTP requests actually are. Back-end developers are able to think through what HTTP requests a web application should expect to see and know how to hook it up to their app (specifically their controllers) using something known as routing.
Business Logic. In computer software, business logic or domain logic is the part of the program that encodes the real-world business rules that determine how data can be created, stored, and changed.
If you were to think about building a chess game, an example of business logic would be to encode the information that a rook moves in a different way than a queen.
The Bottom Line With Back-end Development
Back-end developers deal with servers and databases. They also help convert HTTP requests into actual responses from the internet.
Here’s Why Being a Full Stack Developer is Best
Full-stack developers are capable of writing both front-end code and dealing with code that runs on servers.
There are a number of reasons you’ll want to focus your efforts on becoming a full-stack developer.
First, full-stack developers can work on any facet of a feature. This means that a full-stack developer can turn their ideas into reality, instead of only being able to get halfway there.
This means that whether you’re…
- Working for a company adding a feature
- Building an idea for a side project
- Fixing a bug with an existing application
…you will be able to work with all the aspects of the code.
Second, even if you gravitate more towards front-end code or back-end code, you should have a foundation in the other aspect.
You can’t be a great front-end developer without being able to talk to a back-end developer about the implication of database structures.
You also can’t be a great back-end developer if you don’t appreciate how to build the types of RESTful API’s that are easy for front-end developers to integrate with.
Third, web applications will always consist of both parts. In order to have a full understanding of what’s happening in a web application, you will need to have a strong understanding of both the front-end and the back-end.
Let’s return to the brick-and-mortar store analogy. If you manage a store, you want to understand how to design the experience that customers see. You also want to understand how the part that the customers don’t see, the storage, works. The best possible store manager, the “full-stack” store manager, understands how each part works and how each part influences the other.
The exact same thing is true in development.
A developer who understands how the entire application works will always be more valuable than a developer who understands only half. A developer capable of writing code in any area in their project will be a lot more versatile.
So, for most people looking to break into web development, you should focus on building up a foundation in both front-end and back-end development first. Then you can gravitate towards a specialty later on.
