This article is part two of the “Front-end Development, From Grassroots to Hero” series. In part one, you learned best practices for creating layouts using HTML and CSS. In Part 2, we’ll look at JavaScript as a standalone language, we’ll learn how to add interactive interfaces, JavaScript design, and design patterns, and finally we’ll learn how to create Web applications.

As with HTML and CSS, there are plenty of JavaScript tutorials on the web, and it can be hard for a novice to tell what they are for or in what order to learn them. The purpose of this article is to provide you with a roadmap to navigate your way to becoming a front end engineer.

If you haven’t read the first article yet, you can read it by clicking on the link below before you read this one




JavaScript based




JavaScript is a cross-platform programming language that can do almost anything. After you understand the basics of how developers use JavaScript, we’ll explore the language in more detail.

language

Before learning how JavaScript is applied to the Web, learn about the language itself. Read the Language Basics Crash Course from the Mozilla Developer Network. This guide describes basic Language structures, including variables, conditions, and functions.

After that, read the following sections of MDN’s JavaScript guide:

  • Syntax and types
  • Control flow and error handling
  • Loop and traverse
  • function

Don’t worry too much about remembering specific grammar; always go back to it. Instead, focus on concepts like variable instantiation, loops, and functions. If it is normal that you can’t digest it for a while, you can skip it appropriately and review the previous content from time to time after learning the content. Because when you practice these concepts, you become more aware of them.

To break up the monochrome learning of text-only content, take a look at the JavaScript courses Codecademy offers, which are easy to pick up and fun to do. Also, if you have the time, read the Eloquent JavaScript chapter for each of the concepts I’ve listed above. Eloquent JavaScript is a great online book that almost any aspiring JavaScript front-end engineer will read: Eloquent JavaScript

interaction




One use for JavaScript is for animating your layouts

Now that you know JavaScript as a language, the next step is to understand how it applies to the Web, and to understand how JavaScript interacts with websites, you need to know the Document Object Model.

DOM is the concrete structure of an HTML document. It is a tree of JavaScript objects that corresponds to HTML nodes. Further, you can read CSSTricks on what a DOM is. It provides a straightforward description of the DOM




Inspecting the dom

JavaScript can modify DOM elements. Here is an example of selecting an HTML element and modifying its contents:

Var container = document. GetElementById (" container "); container.innerHTML = 'New Content! ';Copy the code

Don’t worry, this is just a simple example of what you can do with JavaScript “DOM manipulation “. To learn more about how JavaScript interacts with The DOM, follow The guidance in The MDN section, The Document Object Model

  • The event
  • Examples of web and XML development using DOM
  • How do I create a DOM tree
  • Introduction of the DOM
  • Use selectors to locate the DOM

Again, focus on concepts, not grammar. Try answering these questions:

  • What is DOM?
  • How do I query elements?
  • How do I add event listeners?
  • How to change DOM node attributes properly?

For a general list of JavaScript DOM operations, look at the JavaScript functions and help provided by PlainJS. This site offers examples such as how to style HTML elements and connect keyboard event listeners. If you don’t want to go further, You can read the DOM section of Eloquent JavaScript.

check

To debug JavaScript, we use development tools built into the browser. Almost all browsers have a check panel that allows you to view the source code of the page, you can view JavaScript execution, print debug status on the terminal, and you can view web requests and replies.

Here’s the Chrome Developer Guide, which you can check out if you’re using Firefox




Chrome Developer Tools

The basic practice

So far, we have a lot of JavaScript to learn. We learned a lot in the last chapter, so let’s take a break and do a few experiments that will help solidify some of the concepts you just learned.

Experiment 1

In Experiment 1, we opened AirBnb and opened the browser page to check. Click the terminal TAB, and you can execute JavaScript statements in the terminal. What we’re going to do is have some fun manipulating some of the elements on the page. See if you can perform all of the DOM operations described below.




Airbnb.com

I chose AirBnb pages because their CSS class names are very straightforward and not obfuscated by some compilers, so you can optionally do this on any page:

  • Select a header tag with a unique class name and change the text in it
  • Select any element on the page and delete it
  • Select any element and change one of its CSS properties
  • Select a specified paragraph tag and move it down 250 pixels
  • Select any component, such as a panel, and adjust its visibility
  • Define a function namedoSomething: You can pop up a “Hello World “warning and find a way to execute it
  • Select a specific paragraph tag and let it listen for oneclickEvent that runs once the event is triggereddoSomething

If you’re stuck, check out JavaScript Functions and Helpers, which are based on this tutorial. Here’s an example of the first problem:

Var header = document.querySelector('.text-branding ')Copy the code

The main purpose of this experiment is to practice what you learn about JavaScript and DOM manipulation and observe their behavior.

Experiment 2




JavaScript allows developers to create interactive panels

Use CodePen to write several JavaScript functions that contain logic and manipulate DOM elements. The core of this experiment is to combine what you learned in Part 1 from Grassroots to Hero with JavaScript. Here are a few examples that might inspire you:

  • Periodic table
  • Mood color generator
  • The calculator
  • JavaScript Quiz
  • Asteroid Canvas Game

More JavaScript

Now that you know some JavaScript and have done some practice with it, let’s move on to some advanced concepts. The following concepts are not necessarily related, but I’ve listed them here because they can help you understand how to build more complex front-end systems. You will understand how to use these concepts in subsequent experiments and frameworks sections.

language

Once you work with JavaScript, you’ll encounter many advanced concepts, which I’ll list for you to read when you have time. Also, Eloquent JavaScript covers most of the concepts and can be used to complement your knowledge as well.

  • To strengthen the prototype
  • scope
  • closure
  • Event loop
  • Event notification
  • Request, invoke, and bind
  • Callback and commitment
  • Variables and functions are suspended
  • Currying

Imperative vs. Declarative

There are two approaches to how JavaScript and DOM interact: Imperative and Declarative. On the one hand, the declarative program focuses on what, and on the other, the imperative program focuses on how

Var hero = document.querySelector('.hero') hero.addeventListener (' click ', Function () {var newChild = document.createElement(' p ') newChild.appendChild(' document.createTextNode ') ') newchild.setAttribute (' class ', 'text') newchild.setattribute (' data-info ', 'header') hero.appendChild(newChild)})}Copy the code

Here is an example of imperative. We manually query an element and store the UI state in it. In other words, it is about how something is done. The biggest problem with this program is that it’s not stable: If someone changes the class name in this code, such as hero to villain, the listening event will not be triggered because the Hero class is no longer in the DOM.

Declarative solves this problem by leaving the selection of elements to the framework or library. This makes you focus on what rather than how. To learn more, read the state of JavaScript — From Imperative to Declarative and 3D Web Development #1: Declarative vs. Imperative

This guide tells you the imperative method first, and then the Angular and React libraries declarative methods. I suggest that you follow this order to get a clearer idea of what the problem is.

Ajax

From the articles and tutorials above, you should be aware of Ajax, which is a technology that allows you to interact with a server using JavaScript.




Ajax is what makes content dynamic

For example, when you submit a form on a web page, this action sends your input to the server as an HTTP request. When you send a tweet to Twitter, your Twitter client sends an HTTP request to Twitter’s API server and updates the page with the data returned by the server.

You can learn more about Ajax by looking at what Ajax is. If you still don’t fully understand AJAX concepts, take a look at Explain It Like I’m 5, What is AJAX. If that’s not enough, you can also read the Eloquent JavaScript HTTP section.

As of today, the new browser request standard is Fetch. To learn more about Fetch, read Dan Walsh’s article on how Fetch works and how to use it. You can also add Fetch Polyfill to this article.

jQuery

So far, you’ve done a lot with the DOM using JavaScript. The truth is, there are already libraries for DOM manipulation that provide apis to simplify your code.

The most popular DOM manipulation library is jQuery, remember that jQuery is an imperative library, developed when front-end systems were not as complex as they are today. Today, we use declarative frameworks and libraries, such as Angular and React, to manage complex UIs. However, I still recommend that you learn jQuery, because as a front-end engineer you are bound to encounter it in your work.




JQuery is an abstraction of JavaScript manipulation of the DOM

To learn the basics of jQuery, check out the jQuery Learning Center, which will walk you through the important concepts of animations and event handling step by step. If you want to learn more about getting started, you can check out the jQuery courses at Codecademy

Keep in mind that jQuery is Not the only imperative DOM manipulation solution, PlainJS and You Might Not Need jQuery are two great resources that will tell You about JavaScript functions that are used as frequently as jQuery.

ES5 vs. ES6

Another important concept is ECMAScript and its relationship to Javascript. There are two main standards you will encounter today: ES5 and ES6. ES5 and ES6 are the ECMAScript standards used by JavaScript. You can think of them as versions of JavaScript. The final DRAFT of ES5 was written in 2009 and is what we use today.

ES6, also known as ES2015, is the latest standard that brings new language features such as constants, classes, and templates. ES6 brings new language capabilities, but still defines semantics on top of ES5. For example, classes in ES6 are simply syntactic modifications of JavaScript archetypal inheritance.

It’s important to know which apps you see today are either using ES5 or ES6. ES5, ES6, ES2016, ES.Next: What’s wrong with the JavaScript version and Dan Wahlins’ INTRODUCTION to ES6 — The Next generation of JavaScript is a great introduction to ES6. You can then check out the changes from ES5 to ES6 in the ES6 feature list. If you want to learn more, go to the Github codebase for more information on ES6 features.

More practice

Congratulations on being here. Now that you’ve learned a lot about JavaScript, let’s do some exercises.

Experiment 3




Flipboard.com

Experiment 3 focuses on applying DOM manipulation and jQuery skills. Experiment 3 will require you to clone the Flipboard home page. Codecademy has this tutorial, so you’ll have to do it step by step: interact with the Flipboard home page in JavaScript

As you follow this tutorial, focus on understanding how to interact with your web site. Once you’ve done that, you’ll know how to use jQuery.

Experiment 4




Dieter Rams Clock

Experiment 4 Combine what you’ve learned about HTML and CSS with an introductory JavaScript lesson. In this experiment, you will create a clock of your own design and use JavaScript to make it interactive. Before we begin, I recommend that you read the article ON HTML, CSS, and JavaScript Decoupling, where you will learn the basic class naming conventions for CSS when JavaScript is introduced. Here, again, I selected a list from CodePen as a reference for this experiment. For example, you can search for a clock in CodePen

  • Flat clock
  • JQuery wall clock
  • Beautiful clock
  • Retro clock
  • JavaScript Simple clock

You can do this experiment in two ways. The first is to create and design HTML, CSS layouts, and then add JavaScript interactions. The second method is to write the JavaScript logic first and then add the layout. No doubt you can use jQuery and feel free to use native JavaScript.

JavaScript framework

Once you’ve mastered the basics of JavaScript, then you need to look at JavaScript frameworks. Frameworks are JavaScript libraries that help you structure and organize your code. JavaScript frameworks are reusable and provide solutions to complex front-end problems like state machines. Routing mechanism and performance optimization. They are commonly used to create Web applications

I haven’t described each JavaScript framework in detail, however, here are links to several frameworks: Angular, React + Flux, Ember, Aurelia, Vue, and Meteor. You don’t need to learn all of them, just pick one. Don’t jump on the bandwagon of frameworks. Instead, you need to understand the principles and philosophies underlying frameworks.

Architectural model

Before learning about frameworks, it is important to understand some of the architectural models commonly used by frameworks: Model-View-Controller, Model-view-ViewModel, and Model-view-Presenter. These models are designed to create clear and separate features at different levels of the application.

The detached nature is a design principle that suggests dividing an application into different layers. For example, rather than leaving HTML to preserve application state, a JavaScript object — often referred to as a Model — is used to store state.

To learn more about models, first read MVC in Chrome Developers, then read Understanding MVC and MVP(for JavaScript and trunk Developers). In this article, you don’t have to learn about ‘trunk’, just MVC and MVP

For MVVM, Addy Osman has also written an article on understanding MVVM – a Guide for JavaScript developers, and You should also read Martin Fowler’s essay GUI Architecture, which covers both native MVC and describes how MVVM came about. Finally, read this JavaScript MV* model and the perfect free online book Learning JavaScript Design Patterns.

Design patterns

JavaScript frameworks don’t reinvent the wheel. Many frameworks rely on design patterns, which you can think of as templates for solving common problems in software development.

While learning design patterns is not necessary to understand JavaScript, I recommend that you understand the following design patterns

  • Decorator pattern
  • The factory pattern
  • A singleton
  • Revealing module
  • The appearance model
  • Observer model

Understanding and implementing design patterns not only makes you a better engineer, it also helps you understand the implementation of frameworks.

AngularJS

AngularJS is a JavaScript MVC framework, and sometimes an MVVM framework, that is maintained by Google and took the JavaScript community by storm when it was first released in 2010




AngularJs – what HTML would have been

Angular is a declarative framework that has helped me most to understand how JavaScript programming transitions from imperative to declarativ ideas. This article comes from StackOverflow: How does AngularJS differ from jQuery

To learn more about Angular, check out the Angular documentation, which includes an Angular Cat project to get you into coding mode right away. A more complete guide to learning AngularJs can be found at Tim Jacobi’s Github repository. Finally, check out John Papa’s definitive Best Practice StyleGuide

React + Flux

Angular solves the problem programmers face when building complex systems. Another popular tool is React, a library for creating user interfaces that you can think of as V in MVC. Since React is just a library, it is often accompanied by a framework Flux




A JS library to create interfaces

Facebook designed React and Flux to address MVC’s limitations and scalability issues. Take a look at their well-known introduction: Hacker Way: Rethinking Web App Development at Facebook, which retraces Flux’s history.

You have to climb a ladder to watch it

React Flux Flux Flux Flux Flux Flux Flux Flux Then, this react. js Introduction For People Who Know Just Enough jQuery To Get By will help you change your jQuery mindset.

Once you have the basics of React, you can start to learn Flux. Again, the official documentation is a good place to start. Then, you can read the excellent React article, which will lead you to further study.

Practice using frames

You now have the basics of JavaScript frameworks and architectures, so it’s time to practice again. In the next two experiments, focus on applying the framework concepts you have learned. In particular, you need to keep your code DRY, have a clear understanding of different concepts, and be able to keep your modules to a single function

The experiment of five

The topic of Experiment 5 was to break apart a TodoMVC app implemented in JavaScript and then rewrite it. In other words, this is an experiment without any framework, but using THE principles of MVC, the goal is to give you a deeper understanding of how MVC works.




First you take a look at what TodoMVC looks like, then what you need to do is first create a new local project that builds three components of MVC. You also need to pull the code from the Github repository, because this is a complicated experiment, and if you still can’t clone the project, or don’t have the time, it doesn’t matter, just use the Github code you downloaded and keep debugging the different components of MVC until you understand how the components work together.

The experiment of 6

Experiment 6 is a good exercise in using MVC, understanding that MVC is the way to get into a JavaScript framework. Experiment 6 will let you build a clone of an Etsy page using Angular, following the tutorial produced by Scotch. IO.




Build an Etsy Clone with Angular and Stamplay teaches you how to use Angular to create web applications, apis, and organize large projects. Having completed this guide, try answering the following questions:

  • What is a Web application?
  • How does Angulars apply the MVC/MVVM model?
  • What is an API? What is it used for?
  • How do you organize large code?
  • What are the benefits of breaking up the UI into different components?

If you want to create more Angular Web apps yourself, try building a real-time Status Update App with AngularJS & Firebase.

The experiment 7




React and Flux are a powerful combination

Now that you’re comfortable with MVC, it’s Flux’s turn. Experiment 7 lets you create a todo list using React and the Flux framework. The whole process is here: Facebook’s Flux documentation, which shows you step by step how to create interfaces using React and how Flux builds Web applications.

Once you’re done, you can move on to more complex tutorials: How to create a Todo application using React, Redux, and Immutable. Js, and a Twitter application using Flux and React

Keep updating

As with other front-end developments, JavaScript technology moves quickly, and it’s important to keep up to date.




Here is a list of interesting and valuable websites, blogs, and forums:

  • Smashing Magazine
  • JavaScript Weekly
  • Ng Weekly
  • Reddit JavaScript
  • JavaScript Jabber

Learn from examples

The best way to learn is by example

Style guide

The JavaScript Style guide is a set of code specifications that will help you design readable and maintainable code.

  • AirBnB’s coding specifications
  • Common JavaScript principles
  • Node coding specification
  • MDN coding specification

Coding based

I can’t tell you how much reading good code helps me, but when you want to read good new code, go to Github

  • Lodash
  • Underscore
  • Babel
  • Ghost
  • NodeBB
  • KeystoneJS

A complete

By the end of this article, you should have a solid grasp of JavaScript basics and know how to apply them to Web development. Remember, this article is just a roadmap for you, and if you want to be a front-end hero, the more time you have to spend on projects to get used to these concepts, the more projects you do, the more enthusiastic you’ll be about them, and the more you’ll learn.

This article is part two of a two-part series. The only thing missing from this article is Node, which is a framework that allows JavaScript to run on servers. In the future, I may write an article on Server-side development related to Node, as well as NoSql databases