React Training

Day 1

Bartosz Szczeciński
GFT Poland

Do you know JS?

Inconsitency

First Frameworks

First Frameworks

they allowed for a unified access to DOM, events and other JS parts of JS - while still not compatible with each other they allowed for the same code to run on different browsers

// jQuery
$('div.foo').on('click', function() { 
    alert('Hello!'); 
});

// mootools
$$('div.foo').addEvent('click', function() {
    alert('Hello!');
});

// prototype
$('div.foo').observe('click', function() {
    alert('Hello!');
});

First "mature" frameworks

Complete package

Thinking outside of the browser

in 2009 an  project was started as ServerJS that aimed to provide an environent to JS outside of the browser, it was later renamed CommonJS.

One of the features was introduction of modules, which in 2010 was implemented in the npm project. This allowed for the creation of specialized modules that could connect with each other to form bigger software.

Do one thing - do it right

Going with the idea of doing one thing and doing it right Facebook developed a library which helped them solve issues of updating multiple pieces of UI from a single data store - ReactJS in 2011

It wasn't untill 2013 that the project went Open Source

Hello, React!

React in itself doesn't offer many features - it focuses mostly on high-performance UI updates. The language was inspired by XHP - a PHP (Hack) extension that allowed usage of XML directly in PHP code of Facebook projects.

If a developer requires state management, integration with REST enpoints, form validations etc. he is required to either roll out his own or to integrate third party solutions.

Going further

State of JS - 2016 and beyond

State of JS - developers

NodeJS

NodeJS

Node is NOT a framework, although it's modular structure and the fact that parts of it are written in JS allow developers to use its components as parts of other frameworks.

NodeJS - Compatibility

It's worth noting that even though Node ES6 compatibility is higher than that of Chrome, it's still not 100%

NPM 

npm is both the name of the client and the repository containing various open source components and providing dependency resolving, updating and more.

The most important part of every npm project is the package.json file. You should always create a package.json file for your project. To do so simply call `npm init .` in the root directory.

You can also run `npm init . --yes` to create a file with all defaults set.

NPM - usage

NPM - package.json

NPM - symver

NPM - shrinkwrap

JS of tomorrow - TODAY!

ES6 or ECMSScript 2015 is the most up-to-date standard implemented by JavaScript in the most popular browsers.

It introduces a lot of new and helpful concepts and if not required it is highly recommended to learn and use it in the upcoming projects.

Please note that some of the ES6 features might not be supported by various browsers - to get around that we will introduce the concept of transpiling later on.

Modules

# test.js

function test() {
    // code
}

var PI = 3.14;

exports = {
    test: test,
    PI: PI
}

# test2.js

function test2() {
    // code
}

modules.exports = test2;

# app.js

var myLib = require('./test.js');

myLib.test();
myLub.PI;

var otherLib = require('./test2.js');
otherLib();

# test.js

export var PI = 3.14;

function test() {
    // code
}

export test;

export default test2() {
    // code
}

# app.js

import test2 from "./test.js";
import { PI, test } from "./test.js";
import * as myLib from "./test.js";

test2();
console.log(PI);
myLib.test();

Scoping

var a;
a = 1;
let b = 2;
const c = 3;
const c = 4; // SyntaxError - can't redefine the const

console.log(a); // 1

(function() {
  console.log(a); // 1
  console.log(b); // 2;
})();

if(true) {
  var d = 5;
  let e = 6;
}

console.log(d); // 5;
console.log(e); // ReferenceError - e is not defined

Arrow functions

function Counter() {
  this.value = 10;

  setInterval(function count() {
    this.value++;
    console.log('Value is ' + this.value);
  }, 1000);
}

var c = new Counter();

function Counter() {
  this.value = 10;

  setInterval(() => {
    this.value++;
    console.log('Value is ' + this.value);
  }, 1000);
}

var c = new Counter();

Context matching, destructuring

function matchObject({x, y}) {
  return x * y;
}

matchObject({x: 5, z: 8, y: 2}); // 10

Property value shorthand

let PI: 3.15;

function myMathEquation() {
    // code
}

export {
    PI: PI,
    myMathEquation: myMathEquation
};

Template literal

console.log("this is" + 
"an example" + 
"of multi-line string");

let a = 1;
console.log("values of a is " + a);

console.log(`this is also
an example of multi-line
string`);

let a = 2;
console.log(`a = ${a}`);

Classes

class Person {                                                               
                                                                             
   greet() {                                                                 
    return this.greetingForm + ", " + this.personName;                       
   }                                                                         
}                                                                            
                                                                             
class PersonFromGermany extends Person {                                     
  constructor(name) {                                                        
    super(); /* need to call super() if you are extending a class and overriding the constructor */       
    this.personName = name;                                                  
    this.greetingForm = "Guten tag";                                         
  }                                                                          
                                                                             
}                                                                            
                                                                             
const me = new PersonFromGermany("Bartosz");                                 
console.log(me.greet());  /* Guten tag, Bartosz */                                                   

class Test {   
                      
  set a(value) { this._a = value; }                     
  get a() { return this._a; }                     
}                       
                        
const obj = new Test(); 
obj.a = 5;              
console.log(obj.a);     

Promises

new Promise(function( resolved, rejected ) {
    // asynchronous logic
});

Promises

const p = new Promise(function(res, rej) {
  setTimeout(res, 1000);
}).then(() => {
  console.log("A second passed!"); /* will be called after 1 second */
});

High Order Functions

High order functions are functions that take functions as parameters and return new or changed functions.

function log(f) {
  return function(arg) {
    var val = f(arg);
    console.log("Invoked with '" + arg + "' - got '" + val + "'");
    return val;
  }
}

function toUpper(string) {
  return string.toUpperCase();
}

log(toUpper)("small case text"); /* Invoked with 'small case text' - got 'SMALL CASE TEXT' */
const loggedToUpper = log(toUpper); /* can now just do loggedToUpper("text"); */

Transpiling

Because there is no 100% support of ES6 in many of the browsers we need to use so called transpilers or source-to-source compilers which take source code written in one language and output the same application in another.

In our case we will be using babel to transpile ES6 to ES5.

We might also use solutions known as Polyfill to add functionality not supported in target browsers
(for example IE11 doesn't support Promises).

Transpiling