Открыть главное меню

Изменения

ECMAScript и все-все-все

3380 байтов добавлено, 22:36, 10 октября 2016
м
→‎Профилировка @@
* node --prof, node --prof-process
* Профилировка памяти: [https://github.com/bnoordhuis/node-heapdump heapdump]
* Flamegraph: [https://github.com/davidmarkclements/0x 0x] <br /> [https://github.com/davidmarkclements/0x/raw/master/demo.gifанимация]<br /> [[File:0xFlamegraph.png|300px]]
* [http://stackoverflow.com/questions/1911015/how-do-i-debug-node-js-applications/16512303#16512303 Ещё заметки]
 
=== Тестирование @@ ===
 
* Для браузера: [https://karma-runner.github.io/ Karma]
*: Запускает обычные тесты, но в открытом приложении в браузере
* В целом: [https://mochajs.org/ Mocha], Chai, Sinon
 
=== Тайпчекеры: TypeScript, Flow @@ ===
 
* У Flow лучше вывод типов
* У TypeScript есть public/private/protected
* У Flow есть Nullable типы (и он автоматически проверяет на null)
* TypeScript - надмножество JS
* Flow - подмножество JS
 
=== TS null @@ ===
 
<source lang="javascript">
function foo(num: number) {
if (num > 10) {
return 'cool';
}
}
</source>
 
<source lang="javascript">
// cool
const result: string = foo(100);
console.log(result.toString());
</source>
 
<source lang="javascript">
// still cool?
console.log(foo(1).toString());
// error at runtime: "Cannot read property 'toString' of undefined"
</source>
 
=== Flow null @@ ===
 
<source lang="javascript">
function foo(num: number) {
if (num > 10)
return 'cool';
}
 
// error: call of method `toString`.
// Method cannot be called on possibly null value
console.log(foo(100).toString());
 
// error: return undefined. This type is incompatible with string
function foo(num: number): string {
if (num > 10)
return 'cool';
}
</source>
 
=== TS vs Flow: generics @@ ===
 
<source lang="javascript">
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
class Dog extends Animal {
// just to make this different from cat
goodBoyFactor: number;
}
class Cat extends Animal {
purrFactor: number;
}
</source>
 
=== TS vs Flow: присваивание элементов @@ ===
 
OK в обоих
 
<source lang="javascript">
let cats: Array<Cat> = []; // только коты
let animals: Array<Animal> = []; // только животные
 
// неа, не кот
cats.push(10);
 
// неа, не кот
cats.push(new Animal('Fido'));
 
// круто, кот
cats.push(new Cat('Purry'));
 
// круто, кот - тоже животное
animals.push(new Cat('Purry'));
</source>
 
=== TS vs Flow: присваивание коллекций @@ ===
 
<source lang="javascript">
// error TS2322: Type 'Animal[]' is not assignable to type 'Cat[]'.
// Type 'Animal' is not assignable to type 'Cat'.
// Property 'purrFactor' is missing in type 'Animal'.
//cats = animals;
 
// во Flow не пройдёт
// опа, в TS работает. но теперь animals небезопасны
animals = cats;
 
// потому что вот это тоже проходит без ошибки
animals.push(new Dog('Brutus'));
animals.push(new Animal('Twinky'));
 
// упс
cats.forEach(cat => console.log(`Cat: ${cat.name}`));
// Cat: Purry
// Cat: Brutus
// Cat: Twinky
</javascript>
 
== Фреймворки @@ ==
 
* Клиентские фреймворки «старые»
* Клиентские фреймворки «новые»
* Попытки мобильной разработки
* Попытки игровых фреймворков
 
=== «Старые» @@ ===
 
Заслуживают упоминания два:
* jQuery
* ExtJS
 
=== «Новые» @@ ===
 
* React
* AngularJS
 
=== React @@ ===
[[Категория:VitaliPrivate]]