[email protected]/02/20 · let и const let и сonst - переменный с...
Transcript of [email protected]/02/20 · let и const let и сonst - переменный с...
![Page 2: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/2.jpg)
React - js библиотека для построения UI● open-source (https://github.com/facebook/react)● by Facebook● Текущая версия v15.5.4● Используют: facebook, instagram, periscope, imdb, twitch, uber, bbc и др.
![Page 3: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/3.jpg)
Один в поле не воин
В связке с React неплохо бы использовать следующее:
● ES6● npm● babel● webpack● redux● react-router
“Are you not prepared”
![Page 4: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/4.jpg)
ES2015
● Классы● Наследование через extends● Модули● Объявление переменных через let и const● Деструктуризация ● Функции-стрелки● Promise● многое другое
![Page 5: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/5.jpg)
let и const
let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой фичи 20 лет.
P.S. С Хатико было бы слишком грустно
![Page 6: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/6.jpg)
Классы
class User {
constructor(name) { this.name = name; }
sayHi() { alert(this.name); }
}
let user = new User("Вася");user.sayHi(); // Вася
ES6/ES2015ES5
=>
function User(name) { this.name = name;}
User.prototype.sayHi = function() { alert(this.name);};
![Page 7: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/7.jpg)
Наследование
class Animal { constructor(name) { this.name = name; } walk() { alert("I walk: " + this.name); }}class Rabbit extends Animal { walk() { super.walk(); alert("...and jump!"); }}new Rabbit("Вася").walk();// I walk: Вася// and jump!
=>
var animal = { eats: true};var rabbit = { jumps: true};
rabbit.__proto__ = animal;
![Page 8: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/8.jpg)
Promise
![Page 9: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/9.jpg)
до PromisecallMe1(function(resp, error){
if (!error && resp) {
callMe2(function(resp, error){
if (!error && resp) {
callMe3(function(){
callMeFinal();
}); }
});
}
});
![Page 10: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/10.jpg)
с Promise
httpGet('/article/promise/user.json') .then(JSON.parse) .then(user => httpGet(`https://api.github.com/users/${user.name}`)) .catch(error => {console.log(error); /}
Подробно и с картинками тут (на русском), либо гуглите Promise burger party
![Page 11: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/11.jpg)
Модули
//------ 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';console.log(square(11)); // 121console.log(diag(4, 3)); // 5
![Page 12: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/12.jpg)
NPMДокументация по ссылке (https://docs.npmjs.com/)
package.json{
"name": "my_package","version": "1.0.0","engine": {
"node": ">=6","npm": ">=3.10.1"
},"dependencies": {
"react": "^15.3.1","react-router": "^2.8.1",
},"devDependencies" : {
babel-core": "^6.13.2", "webpack": "^1.13.1",
}}
![Page 13: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/13.jpg)
BabelЗачем?
Браузеры внедряют новые языковые фичи медленно
А что он умеет?ES2015, JSX, Typescript, Coffeescript, Clojurescript и др.
![Page 14: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/14.jpg)
Webpack
![Page 15: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/15.jpg)
SPA
Основные идеи:
● Оффлайн режим● Единый html документ● Routing через JS● Page State
![Page 16: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/16.jpg)
React - js библиотека для построения UI● open-source (https://github.com/facebook/react)● by Facebook● Текущая версия v15.5.4● Используют: facebook, instagram, periscope, imdb, twitch, uber, bbc и др.
Основные особенности:
● декларативный● основан на компонентах● one-way dataflow● virtual-dom
![Page 17: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/17.jpg)
React (компоненты)
![Page 18: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/18.jpg)
React (компоненты)
![Page 19: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/19.jpg)
React (Hello world)
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));
![Page 20: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/20.jpg)
JSX
class NameForm extends React.Component { render() { return ( <form onSubmit={this.handleSubmit}> <label> Name {this.name}: <input type="text" value={this.state.value}
onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); }}
![Page 21: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/21.jpg)
JSX(2)class ComponentThatUseAnotherYourComponent extends React.Component {render() { return ( <div> We use component from previous slide
<NameForm/> </div> );}
}
![Page 22: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/22.jpg)
state & props
class MyComp extends React.Component {constructor(props) { super(props); this.state = {myName: 'Vasya”'};
render() { return ( <div> We use component from previous slide
<NameForm name={this.state.myName}/> </div> );}
}
class NameForm extends React.Component { render() { return ( <form onSubmit={this.handleSubmit}> <label> Name {this.props.name}: <input type="text" value={this.state.value}
onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); }}
![Page 23: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/23.jpg)
VirtualDOM
![Page 24: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/24.jpg)
react-router
![Page 25: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/25.jpg)
static routing
![Page 26: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/26.jpg)
dynamic routing
![Page 27: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/27.jpg)
flux
![Page 28: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/28.jpg)
Redux
![Page 29: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/29.jpg)
middleware
![Page 30: bleizard@cs.ifmo...2018/02/20 · let и const let и сonst - переменный с областью видимости блока {}, возможно кто-то ждал этой](https://reader034.fdocuments.ec/reader034/viewer/2022042400/5f0efd8e7e708231d441f11b/html5/thumbnails/30.jpg)
Вопросы