ECMAScript 6, ReactJS i architektura Flux

Created by Mariusz Wójcik

JavaScript

  • 05.1995
  • Brendan Eich, Netscape, Mozilla
  • 10 dni
  • wieloplatformowy
  • zorientowany obiektowo, funkcyjny, o dynamicznym typowaniu
  • warstwa kliencka

Java... serio?

  1. 05.1995, Mocha
  2. 09.1995, LiveScript
  3. 12.1995, JavaScript

JavaScript dzisiaj

  1. zastosowania serwerowe (Node.js)
  2. natywne aplikacje mobilne
  3. niezliczona liczba frameworków i bibliotek
  4. programowanie dronów

ECMAScript (ES)

  • 1996-1997, ECMA podjęła się standaryzacji JavaScript
  • ECMAScript - standard języka skryptowego
  • JavaScript - najpopularniejsza implementacja ECMAScript

ES, a JS

  • aktualnie używany JS jest oparty o ES5
  • 06.2015, ES6
  • ES jest transpilowany do JS
  • nowa składnia
  • zakres zmiennych
  • Promises
  • moduły

//ES5
var square = function(x){ return x * x };
var add = function(a, b){ return a + b };

console.log(square(5));
console.log(add(3, 4));

//ES6
let square = x => x * x;
let add = (a, b) => a + b;

console.log(square(5));
console.log(add(3, 4));

Czym jest React?

  • biblioteka JS (!)
  • 2011
  • 'V' w MVC
  • Jordan Walke (Facebook)
  • Virtual DOM
  • JSX
  • Component
  • wieloplatformowy

Component w JSX


var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

Czym jest Flux?

  • nie jest frameworkiem
  • nie jest biblioteką
  • architektura pracy z React
  • uzupełnia React i koncepcję jednokierunkowego przepływu danych
  • Store
  • Action
  • Dispatcher
  • View
  • wieloplatformowy

Data flow

http://facebook.github.io/flux/docs/overview.html

http://facebook.github.io/flux/docs/overview.html

Pytania?