From Zero to Front-end Hero (Part 2)
This article is part two of the “From Zero to Front-end Hero” series. In part one, you learned how to create layouts with HTML and CSS as well as some best practices. In part two, we will focus on learning JavaScript as a standalone language, how to add interactivity to interfaces, JavaScript design and architectural patterns, and how to build web apps.
Just like with HTML and CSS, there are tons of JavaScript tutorials out there. However, especially for someone new to front-end, it’s hard to figure what tutorials to use and what order to do them in. The main goal of this series is to provide you with a road map to help you navigate learning to be a front-end.
If you haven’t already read part one, go ahead and do that before reading on.
JavaScript Basics
JavaScript is a cross-platform programming language that can be used for practically anything these days, but we’ll get into that later once you understand the basics of how developers use JavaScript for the web.
Language
Before learning how to apply JavaScript to the web, first learn about the language itself. To get started, read Mozilla Developer Network’s Language basics crash course. This tutorial will teach you basic language constructs like variables, conditionals, and functions.
After that, read through the following sections in MDN’s JavaScript guide:
Don’t worry too much about memorizing specific syntax. You can always look that up. Instead, focus on understanding important concepts like variable instantiation, loops, and functions. If the material is too dense, that’s okay. Skim through the reading; you can always go back later. And as you put these concepts into practice, they will become much clearer.
To break the monotony of text-based learning, check out the JavaScript course by Codecademy. It’s hands-on and fun. Also, if you have time, for each concept I listed above, read the corresponding chapter in Eloquent JavaScript to reinforce your learning. Eloquent JavaScript is a great free online book that every aspiring front-end developer should read.
Interactivity
Now that you have a basic understanding of JavaScript as a language, the next step is to apply it to web. To understand how JavaScript interacts with websites, you first have to know about the Document Object Model (DOM).
The DOM is a representational structure of HTML documents. It’s a tree-like structure made up of JavaScript objects that correspond to HTML nodes. For further reading about the DOM, read What is the DOM by CSSTricks. It provides a simple and straightforward explanation of the DOM.
JavaScript interacts with the DOM to change and update it. Here is an example where we select an HTML element and change its content:
var container = document.getElementById(“container”); container.innerHTML = 'New Content!';
Don’t worry, that was just a simple example. You can do a lot more than that with JavaScript DOM manipulation. To learn more about how to use JavaScript to interact with the DOM, go through the following guides in MDN’s section, The Document Object Model.
- Events
- Examples of web and XML development using the DOM
- How to create a DOM tree
- Introduction to the DOM
- Locating DOM elements using selectors
Once again, focus on concepts over syntax. Be able to answer the following questions:
- What is the DOM?
- How do you query elements?
- How do you add event listeners?
- How do you change DOM node properties?
For a list of common JavaScript DOM interactions, check out JavaScript Functions and Helpers by PlainJS. This site provides examples of how to do things like set styles on HTML elements and attach keyboard event listeners. And if you want to dig deeper, you can always read the section on the DOM in Eloquent JavaScript.
Inspector
To debug client-side JavaScript, we use developer tools built into browsers. The inspector panel is available in most browsers and lets you see the source of web pages. You can track JavaScript as it executes, print debug statements to the console, and see things like network requests and resources.
Here is a tutorial on using the Chrome developer tool. If you’re using Firefox, you can check out this tutorial.
Practicing the basics
At this point, there is still a lot more to learn about JavaScript. However, the last section contained a lot of new information. I think it’s time we took a break and tackled a few small experiments. They should help solidify some of the concepts you just learned.
Experiment 1
For experiment 1, go to AirBnB, open up your browser’s page inspector, and click on the console tab. Here you can execute JavaScript on the page. What we are going to do is have some fun with manipulating some of the elements on the page. See if you can do all of the following DOM manipulations.
I chose AirBnB’s website because their CSS class names are relatively straightforward and aren’t obfuscated by some compiler. However, you can choose to do this on any page you want.
- Select a header tag with a unique class name and change the text
- Select any element on the page and remove it
- Select any element and change one of its CSS properties
- Select a specific section tag and move it down 250 pixels
- Select any component, like a panel, and adjust its visibility
- Define a function named doSomething that alerts “Hello world” and then execute it
- Select a specific paragraph tag, add a click event listener to it, and run doSomething every time the event is fired
If you get stuck, reference the JavaScript Functions and Helpers guide. I based most of these tasks off of it. Below is an example of how to complete the first bullet point:
var header = document.querySelector(‘.text-branding’)header.innerText = ‘Boop'
The main purpose of this experiment is to take some of the things you learned about JavaScript and DOM manipulation and see it in action.
Experiment 2
Using CodePen, write a basic JavaScript heavy experiment that uses DOM manipulation and requires some programmatic logic to function. The focus of this experiment is to take some of the things you learned in From Hero to Front-end Hero Part 1 and combine it with JavaScript. Here are a few reference examples that might serve as inspiration.
More JavaScript
Now that you know some JavaScript and have had some practice with it, we’re going to move on to some more advanced concepts. The concepts below aren’t directly related to one another. I grouped them in this section because they are necessary for understanding how to build more complex front-end systems. You will better understand how to put them to use once you reach the experiments and frameworks section.
Language
As you do more work with JavaScript, you will encounter some higher level concepts. This is a list of some of those concepts. When you have time, go through each bullet point. Also, Eloquent JavaScript covers much of this material, if you want to supplement your learning.
- Prototypal inheritance
- Scoping
- Closures
- The event loop
- Event bubbling
- Apply, call, and bind
- Callbacks and promises
- Variable and function hoisting
- Currying
Imperative vs. Declarative
There are two types of approaches to how JavaScript interacts with the DOM: imperative and declarative. On one hand, declarative programming focuses on what happens. On the other hand, imperative programming focuses on what as well as the how.
var hero = document.querySelector('.hero')hero.addEventListener(‘click’, function() {
var newChild = document.createElement(‘p’) newChild.appendChild(document.createTextNode(‘Hello world!’))
newChild.setAttribute(‘class’, ‘text’)
newChild.setAttribute(‘data-info’, ‘header’)
hero.appendChild(newChild)
})
}
This is an example of imperative programming where we manually query an element and store UI state in the DOM. In other words, focusing on how to achieve something. The biggest problem with this code is that it is fragile. If someone working on the code changes the class name in HTML from hero to villain, the event listener will no longer fire since there is no hero class in the DOM.
Declarative programming solves this problem. Instead of having to select elements, you leave it up to the framework or library you are using. This lets you focus on the what instead of the how. For more reading, check out The State Of JavaScript — A Shift From Imperative To Declarative and Three D’s of Web Development #1: Declarative vs. Imperative.
This guide first teaches you the imperative approach before introducing the declarative approach with frameworks like Angular and libraries like React. I recommend learning in this order because it lets you see the problem that declarative JavaScript solves.
Ajax
Throughout some of these articles and tutorials, you’ve probably seen the term Ajax mentioned a few times. Ajax is a technique that allows web pages to interface with server using JavaScript.
For example, when you submit a form on a website, it collects your input and makes an HTTP request that sends that data to a server. When you post a tweet on Twitter, your Twitter client makes an HTTP request to Twitter’s server API and updates the page with the server response.
For reading on Ajax check out What is Ajax. If you still don’t entirely get the concept of AJAX, take a look at Explain it like i’m 5, what is Ajax. And if all that is not enough, you can read Eloquent JavaScript’s chapter on HTTP.
Today, the upcoming browser standard for making HTTP requests is Fetch. You can read more about Fetch in this article by Dan Walsh. It covers how Fetch works and how to use it. You can also find a Fetch polyfill with documentation here.
jQuery
Up until now, you’ve been doing DOM manipulations with just JavaScript. The truth is, there are a lot of DOM manipulation libraries that provide APIs to simplify the code you write.
One of the most popular DOM manipulation libraries is jQuery. Keep in mind, jQuery is an imperative library. It was written before front-end systems were as complex as they are today. Today, the answer to managing complex UIs are declarative frameworks and libraries like Angular and React. However, I still recommend that you learn jQuery because you will more than likely encounter it during your career as a front-end.
To learn the basics of jQuery, check out jQuery’s Learning Center. It goes step by step through important concepts like animations and event handling. If you want a more hands on tutorial, you can give Codecademy’s jQuery course a shot.
Keep in mind, jQuery is not always the solution for imperative DOM manipulation. PlainJS and You Might Not Need jQuery are two good resources that show you equivalent JavaScript functions to frequently used jQuery functions.
ES5 vs. ES6
Another important concept to understand about JavaScript is ECMAScript and how it relates to Javascript. There are two main flavors of JavaScript that you will encounter today: ES5 and ES6. ES5 and ES6 are ECMAScript standards that JavaScript uses. You can think of them as versions of JavaScript. The final draft of ES5 was finalized in 2009 and that’s what you’ve been using so far.
ES6, also known as ES2015, is the new standard that brings new language constructs like constants, classes, and template literals to JavaScript. It’s important to note that ES6 bring new language features but still define them semantically in terms of ES5. For example, classes in ES6 are merely syntactical sugar over JavaScript prototypal inheritance.
It’s essential to know both ES5 and ES6 as you’ll see applications today that use one or the other. A good introduction to ES6 is ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning and Dan Wahlin’s Getting Started with ES6 — The Next Version of JavaScript. After that, you can see a full list of changes from ES5 to ES6 at ES6 Features. If you want even more, check out this Github repository of ES6 features.
More Practice
If you’ve reached this point, congratulate yourself. You’ve already learned a lot about JavaScript. Let’s put some of what you’ve learned into practice.
Experiment 3
Experiment 3 will focus on teaching you how to apply skills like DOM manipulation and jQuery. For this experiment, we’re going to take a more structured approach. Experiment 3 will be to clone Flipboard’s home page by following along with Codecademy’s Flipboard’s home page and add interactivity with JavaScript tutorial.
During the tutorial, focus on understanding how to make a site interactive, when to make it interactive, and how to apply jQuery.
Experiment 4
Experiment 4 combines what you learned about HTML and CSS with your introductory course in JavaScript. For this experiment, you will create a clock of your own design and make it interactive with JavaScript. Before starting, I recommend reading Decoupling Your HTML, CSS, and JavaScript to learn basic CSS class naming conventions when JavaScript is thrown into the mix. I also prepared a list of pens on CodePen that you can you use as reference for this experiment. For more examples, search clock on CodePen.
You can do this experiment in one of two ways. You can either start by designing and creating the layout in HTML and CSS and then adding interactivity with JavaScript. Or you can write the JavaScript logic first and then move onto the layout. Also, you can use jQuery, but also feel free to use plain JavaScript.
JavaScript Frameworks
With the basics of JavaScript under your belt, it’s time to learn about JavaScript frameworks. Frameworks are JavaScript libraries that help you structure and organize your code. JavaScript frameworks provide developers with repeatable solutions to complex front-end problems, like state management, routing, and performance optimization. They are commonly used to build web apps.
I won’t include a description of every JavaScript framework. However, here is a quick list of a few frameworks: Angular, React + Flux, Ember, Aurelia, Vue, and Meteor. You don’t have to learn every framework. Pick one and learn it well. Don’t chase after frameworks. Instead, understand the underlying programming philosophies and principles that the frameworks are built on.
Architectural Patterns
Before looking at frameworks, it’s important to understand a few architectural patterns that frameworks tend to use: model-view-controller, model-view-viewmodel, and model–view–presenter. These patterns are designed to create clear separation of concerns between application layers.
Separation of concerns is a design principle that suggests splitting applications into different domain specific layers. For example, instead of having HTML hold application state, you can use a JavaScript object — usually called a model — to store state.
To learn more about these patterns, first read about MVC at Chrome Developers. After that, read Understanding MVC And MVP (For JavaScript And Backbone Developers). In that article, don’t worry about learning Backbone, just go through the parts with explanations of MVC and MVP.
Addy Osman also wrote about MVVM in Understanding MVVM — A Guide For JavaScript Developers. To learn about the origins of MVC and why it came about, read Martin Fowler’s essay on GUI Architectures. Finally, read the section, JavaScript MV* Patterns, in Learning JavaScript Design Patterns. Learning JavaScript Design Patterns is a fantastic free online book.
Design Patterns
JavaScript frameworks don’t reinvent the wheel. Most of them rely on design patterns. You can think of design patterns as general templates for solving common problems in software development.
While understanding JavaScript design patterns isn’t a prerequisite for learning a framework, I suggest looking through the following list at some point.
Understanding and being able to implement some of these design patterns will not only make you a better engineer but will also help you understand what some frameworks are doing under the hood.
AngularJS
AngularJS is a JavaScript MVC and sometimes MVVM framework. It’s maintained by Google and took the JavaScript community by storm when it was first released in 2010.
Angular is a declarative framework. One of the most helpful reading that helped me understand how to transition from imperative to declarative JavaScript programming was How is AngularJS different from jQuery on StackOverflow.
If you want to learn more about Angular, check out the Angular documentation. They also have a tutorial called Angular Cat that lets you jump into coding right away. A more complete guide to learning Angular can be found in this Github repository by Tim Jacobi. Also, check out this definitive best practice styleguide written by John Papa.
React + Flux
Angular solves a lot of problems that developers face when building complex front-end systems. Another popular tool is React, which is a library for building user interfaces. You can think of it as the V in MVC. Since React is only a library, it’s often seen with an architecture known as Flux.
Facebook designed React and Flux to address some of the shortcomings of MVC and its problems at scale. Take a look at their well-known presentation Hacker Way: Rethinking Web App Development at Facebook. It goes over Flux and it’s origins.
To get started with React and Flux, first learn React. A good primer is the React documentation. After that, check out React.js Introduction For People Who Know Just Enough jQuery To Get By to help you transition from the jQuery mindset.
Once you have a basic understanding of React, start learning Flux. A good place to start is the official Flux documentation. After that check out Awesome React, which is a curated list of links that will help you advance further in your learning.
Practicing with Frameworks
Now that you have some basic knowledge of JavaScript frameworks and architectural patterns, it’s time to put it to practice. During these two experiments, focus on applying the architectural concepts that you have learned. In particular, keep your code DRY, have a clear separation of concerns, and adhere to the single responsibility principle.
Experiment 5
Experiment 5 is to take apart and rebuild the Todo MVC app using framework agnostic JavaScript. In other words, plain old JavaScript without a framework. The purpose of this experiment is to show you how MVC works without mixing in framework specific syntax.
To get started, check out the end result at TodoMVC. The first step is to create a new project locally and first establish the three components of MVC. Since this is an involved experiment, reference the full source code in this Github repository. If you can’t completely replicate the project or don’t have time, that’s fine. Download the repo code and play around with the different MVC components until you understand how they correlate to one another.
Experiment 6
Experiment 6 was a good exercise in applying MVC. Understanding MVC is an important step towards learning JavaScript frameworks. Experiment 6 is to follow a tutorial by Scotch.io to build an Etsy clone with Angular.
Build an Etsy Clone with Angular and Stamplay will teach you how to build a web app with Angular, interface with APIs, and how to structure large projects. After doing this tutorial, be able to answer the following questions.
- What is a web app?
- How is MVC/MVVM applied with Angular?
- What is an API and what does it do?
- How do you organize and structure large code bases?
- What are the advantages of breaking your UI into directive components?
If you want to try your hand at building more Angular web apps, try Build a Real-Time Status Update App with AngularJS & Firebase.
Experiment 7
Now that you’ve applied MVC, it’s time to try Flux. Experiment 7 is to build a todo list using React and Flux architecture. You can find the full tutorial on Facebook’s Flux documentation site. It will teach you step by step how to use React to build interfaces and how Flux is applied to building web apps.
Once you’ve completed that tutorial, you can move onto more involved tutorials like How to Build a Todo App Using React, Redux, and Immutable.js and Build a Microblogging App With Flux and React.
Stay current
Just like the rest of front-end, the JavaScript landscape moves fast. It’s important to stay ahead of the curve.
Below is a list of websites, blogs, and forums that are both enjoyable to read and informative.
Learn by example
As always, the best way to learn is by example.
Styleguides
JavaScript styleguides are sets of coding conventions designed to help keep your code readable and maintainable.
- AirBnB JavaScript Styleguide
- Principles of Writing Consistent, Idiomatic JavaScript
- Node Styleguide
- MDN Coding Style
Codebases
I can’t emphasize how helpful it is to read good code. Learn how to search Github for relevant repositories whenever picking up something new.
Wrap up
By the end of this guide, you should have a solid grasp of JavaScript fundamentals and how to apply them to the web. Remember, this guide gives you a general road map. If you want to become a front-end hero, it’s important that you spend time working on projects to apply these concepts. The more projects you do and the more passionate you are about them, the more you will learn.
This article is the second part to the two part series. What’s missing from this guide is an introduction to Node, which is a platform that allows JavaScript to run on servers. In the future, I may write a part three that goes over server-side development with Node and things like noSQL databases.
If you want me to elaborate on anything or have any questions, feel free to leave me a note or Tweet out to me.
P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.
If you want more, you can follow me on Twitter where I post non-sensical ramblings about design, front-end development, bots, and machine learning.
