My notes about modern front-end development

For devs who know what JavaScript was

 

If you want to learn about modern JavaScript and web development but you’re too lazy to read docs or tutorials, read my blog posts – notes I took (from the documentation, youtube and paid tutorials, conferences etc.) on my way to becoming a front-developer.

More about what’s a front-end development Front-End Developer Handbook 2017.

If you want to refresh your current JS knowledge like I did, check A re-introduction to JavaScript.

If you have no knowledge but you are still interested check javascript.info.

 

If your knowledge of JavaScript ends somewhere between JQuery and console.log you suck. Like me. In JS world of course.

Consider this article my notes that I take on my long journey to becoming a full-stack dev. Maybe someone will find these notes useful, maybe someone will comment some additional sources I should check out or just general feedback.

 

JavaScript vs. ECMAScript 6

JavaScript – the scripting language whose code is run by the browsers – is an implementation of ECMAScript.

ECMAScript evolves over time: new features are added, new syntax is adopted, etc.

If you want to know what ES6 can do see ES2015+ cheatsheet.

Like CSS, HTML, and other client-side technologies, JavaScript is an implementation of a standard by browsers.

We need transpilers so that our pretty ES6 code compiles into the dense JS code that browser like. Babel is one of the most popular es6 transpilers.

“With a transpiler like Babel, we can stay ahead of the web browsers and use new features of ECMAScript when they are released instead of waiting for the browser manufacturers to integrate the features.”

 

Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model.

Node.js allows you to run JavaScript on the server.

  • Node.js can generate dynamic page content
  • Node.js can create, open, read, write, delete, and close files on the server
  • Node.js can collect form data
  • Node.js can add, delete, modify data in your database

 

NPM

npm is the package manager for JavaScript and the world’s largest software registry.

Beginner’s Guide to Using npm

www.npmjs.com hosts thousands of free packages to download and use.

The NPM program is installed on your computer when you install Node.js

“Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.”

 

Webpack

“Bundler. Bundles all .js files into one .js file.”

github.com/webpack

Using Webpack allows us to create an environment that transforms es6 code with babel.
It combines multiple modules into one js file to reduce errors and resources on the client-side.
Shipping with a development server, it gives us live code updating for free!

Npm init -y - creates package.json - includes dependencies
npm install --save-dev webpack

 

ECMAScript 6 features

See the ES6 standard for full specification of the ECMAScript 6 language.

See the es6-features to see all the new features.

See the ES2015+ cheatsheet.

I will mention some of them.

 

Let

let is the new var.
let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
} 

console.log(a); // 5
console.log(b); // 1

Template literals/strings

Expression embedded in a string.

let a = 'hello';
let b = 'world';
let c = a + ' ' + b;
let d = `hello ${b}`;

Destructuring assignment

Unpacks values from arrays, or properties from objects, into distinct variables.

//destructuring object
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

//destructuring array
var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"

Spread operator

Spreads the contents of an array or object into multiple variables. Its syntax uses three periods.

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Arrow functions

“shorthand using the => syntax (similar to the related feature in C#)”

Arrow functions work like normal method expressions in JavaScript, but with a shorter syntax. They also have the added benefit of being anonymous. In addition, unlike normal JavaScript function, they do not bind this object to their function scope.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }
singleParam => expression

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

Classes and inheritance

ES6 brought in a concept of object-oriented programming.
A class in es6 holds pertinent data and methods and also allows for simple inheritance.
Inheritance occurs when a class extends another class, receiving all the same behavior from that base class.

class Vehicle {

  constructor (name, type) {
    this.name = name;
    this.type = type;
  }

  getName () {
    return this.name;
  }

  getType () {
    return this.type;
  }

}
class Car extends Vehicle {

  constructor (name) {
    super(name, 'car');
  }

  getName () {
    return 'It is a car: ' + super.getName();
  }

}
let car = new Car('Tesla');
console.log(car.getName()); // It is a car: Tesla
console.log(car.getType()); // car

Modules

Modules refer to reusable pieces of code that often exist independently in their own separate files.

Export in es6 sends functions, objects, or primitive values from one module to another.

Import in es6 receives functions, objects, or primitive values from another module.

The default export represents a fallback or “main” value/function for a module.

You cannot write the export default syntax and declare variables on the same line.

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib'; // or import * from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
//default export
//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

Array methods

Array methods were available even before ES6 but now that we can use arrow functions with them.

Map

The map method creates a new array with the results of calling a provided function on every element in the calling array.

Makes it unique is it generate a new array based on your existing array.

var sample = [1, 2, 3];

let mapped = sample.map(elem => elem * 10)
console.log(mapped);
/* output */
[10, 20, 30]

Filter

The filter method creates a new array with all elements that pass the test implemented by the provided function.

Use it when: You want to remove unwanted elements based on a condition.

Example: remove duplicate elements from an array.

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

var longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

Foreach

Foreach takes a callback function and run that callback function on each element of an array one by one.

var sample = [1, 2, 3];

sample.forEach((elem, index) => `${elem} comes at ${index}`)
/*
output
1 comes at 0
2 comes at 1
3 comes at 2
*/

Reduce

Method of the array object is used to reduce the array to one single value.

var sample = [1, 2, 3];

var sum = sample.reduce((sum, elem) => sum + elem);
console.log(sum);

 

 

There are much more cool features in ES6, you can check them out here: ES6 standard.

For more information, I provide sources I used.

Thanks for reading.

Sources

https://javascript.info/

ES6 — classes and inheritance

JavaScript reference

github.com/lukehoban/es6features

[es6] import, export, default cheatsheet

Array Methods Explained: Filter vs Map vs Reduce vs Foreach

JavaScript reference

Exploring ES6

Beginner’s Guide to Using npm

w3schools – Node.js intro