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
It Presents Logical Challenges
It Can Give an Interface to Collaborate and Communicate
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.
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.
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.
HTML and CSS
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
. 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.
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:
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 firstname.lastname@example.org.