ECMAScript 6, ReactJS i architektura Flux

JavaScript

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

Java... serio?

05.1995, Mocha 09.1995, LiveScript 12.1995, JavaScript Java była bardzo popularna, więc nazwa Javascript była chwytem marketingowym. Do grudnia czekali na pozwolenie na użycie słowa Java, od firmy Sun.

JavaScript dzisiaj

zastosowania serwerowe (Node.js) natywne aplikacje mobilne niezliczona liczba frameworków i bibliotek programowanie dronów Java była bardzo popularna, więc nazwa Javascript była chwytem marketingowym. Do grudnia czekali na pozwolenie na użycie słowa Java, od firmy Sun.

ECMAScript (ES)

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

ECMA - organizacja non-profit ustanawiająca standardy

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));

ES6 musi być transpilowany, ponieważ współczesne przeglądarki nie interpretują w pełni tego standardu.

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

Stores - zawierają aktualny stan i logikę aplikacji. Mogą się kojarzyć z modelem z MVC, jednak w przeciwieństwie do niego mogą charakteryzować cokolwiek, a nie tylko pojedynczy obiekt. Actions - proste obiekty, określone typem i danymi. Wysyłanie do store'ów, w których zostały zarejestrowane. Dispatchers - hub, służy do wiązania konkretnych akcji z zadanymi store'ami. View - nasłuchuje na zmiany zgłaszane przez store i gdy zajdą ponownie renderuje konkretne coponenety. Moze dodawać również nowe akcje do dispatchera. (REACT) Java była bardzo popularna, więc nazwa Javascript była chwytem marketingowym. Do grudnia czekali na pozwolenie na użycie słowa Java, od firmy Sun.

Data flow

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

ECMAScript 6, ReactJS i architektura Flux – JavaScript

simplypixi

ECMAScript 6, ReactJS i architektura Flux – JavaScript

0 0

presentation-ecmascript-react-flux