Workshop 3: Front-End Engineering

What is Front-End Engineering?

The Front-End is the part of the application that users see, touch, and interact with.

When we’re talking about web development, the Front-End is the part of the code base that takes care of rendering the user interface in the web browser.

Over the last decade, the web has evolved from a platform that served static web pages with content to a platform that provides rich, interactive experiences to users.

What Makes Front-End Engineering Interesting + Challenging?

It Allows us to Bring Objects into the Virtual World

See the Pen Not a Fan by flaviobhlima (@flaviohblima) on CodePen.

It Presents Logical Challenges

See the Pen Cheap AI Chess! by jakealbaugh (@jakealbaugh) on CodePen.

It Can Give an Interface to Collaborate and Communicate

Project Management Dashboard screenshot

See the Project Management Dashboard project here

You Don’t Have to Be a Designer

Front-End developers often work with designers, who provide detailed comps like the one that follows. These comps allow a Front-End developer to focus on managing the complicated interactions of the site.

To Do list application One section of To Do List application, arrows pointing to each section to notate size and colors.

There’s a common misconception that the Front-End is only about colors, fonts, and having a good eye. However, this type of development is more focused on making data useful, accessible, and interactive. The code we write in JavaScript and other frameworks does a lot of heavy logical lifting.

What languages are used on the Front-End?

The Front-End of the web is based on three major programming languages:

HTML: HyperText Markup Language (HTML) defines the structure and semantics of web pages on the web.
CSS: Cascading Style Sheets (CSS) sets the look and style of a web page. CSS provides style to the structure provided by HTML.
JavaScript: JavaScript allows us to define interaction in our pages. When a user clicks a button, something happens because JavaScript code instructed the browser to do something when that button was clicked.

Fun Fact: Java is the name of a Back-End programming language, but it has nothing to do with JavaScript! We like to say that Java is to JavaScript as ham is to hamster.

It is common to write the code for each language it its own file, then “link” together all three files so the communicate and work together to create the final product.

Below are code examples of what each language looks like. We won’t go into too much detail, but it gives you a feel for both the range of syntax and what each language can do.

Frameworks

Front-End frameworks can be defined just as Back-End frameworks are - they are built to work in conjuction with a specific language. They provide building blocks and organizational structures that make it easier for developers to start an app, and maintain an app as it gets very large in size.

Some of the popular frameworks that are currently powering widely used apps are: React, Vue, Svelte and Angular. React had been the leading framework in the industry for the last several years. It was created by Facebook, and is used on Facebook’s Front-End, in addition to being used for Airbnb, Netflix and Reddit.

Because of it’s ongoing popularity and demand in the industry, our Front-End students spend several months of their time with us learning React, and building apps with it.

Talking to the Back-End

A static site - one that won’t store any information about you - is only useful up to a point. Most sites that are useful to us (we typically refer to these as applications) present information to the user on the Front-End, and also talk to the Back-End for the user. This communication allows users to log in to accounts, post status updates, upload photos, send messages, etc.

Making a Request

We won’t practice making requests to a server today, but let’s look at an example and talk through it together:

fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
  .then(response => response.json())
  .then(data => console.log(data));

The three lines of code above each have a specific job:

Go get whatever is available at the URL provided
Convert the response that is sent into a form that the Front-End code can read
Print out the data (usually we will show this data to the user instead of just printing it out)

Let’s run the code in the browser a few times and see what the responses are!

Receiving a Response

In the previous example, you may have noticed that the response we got was different to read - various colors, some {} and []. Those are things you’ll get used to as you see more responses. However, the responses do look slightly different in the “Dev Tools” of the browser than they would in code.

Below is an image of the JSON, or data, that is sent back in a similar response. We will see some special characters, color coding, etc. but it looks more like code. We see the use of indentation to show that some pieces of info belong inside of other pieces.

Screenshot of JSON

Front-End developers regularly get pieces of JSON like the one above (usually they are much larger though!). They write code that goes through all the data and instructs the browser which pieces of data to display.

We can see it in action, on a small scale, in this CodePen:

See the Pen Get request by Try Coding (@turing-trycoding) on CodePen.

Front-End and Series Wrap Up

You have heard a LOT of information about what Front-End code is responsible for and may have learned some new buzzwords. Hopefully this workshop gave you an idea of what is possible and maybe even inspired you to build something!

If you are interested in coding, join us for a full day workshop where we’ll get our hands on the keyboard and write some code in Ruby!

If you already know you are interested in coding and now want to learn more about Turing, we recommend reading about about (the FAQ page has a lot of info!) at turing.edu. Have more specific questions? Reach out to Chelsea at chelsea@turing.edu.