Изменения

<slideshow title="" style="nobookyellnobook" scaled="true" font="Roboto, Segoe UI, cursive" headingmark="@@" centermark="%%" incmark="++" footer="">; subfooter: <span style="font-family: Consolas; background: #f1dd56; padding: 5px; font-style: normal; color: black">ECMAScript и все-все-все</span>

http[[File://3.bp.blogspot.com/_aWbNXEa3LP8/TFvQsof7IZI/AAAAAAAAA8U/NlSMwn-h2L0/s1600/script_kiddies_demotivatorScript_kiddies_demotivator.jpeg]]

http[[Файл://demotivators.to/media/posters/327/414874_paranojyaParanoia.jpg]]

* Есть тайпчекеры: TypeScript, Flow, Dart…

* https://github.com/famzah/langs-performance, время на 10 итераций (i386)* C++ (g++ 56.31.1) -O2 = 1{{green|0.124s92s}}* java8 = 1{{green|0.428s92s}}; java6 = {{green|1s}} {{gray|''(ручные массивы)''}}* PyPy (tracing jit) = 1.72s25s* Rust 1.12 = {{green|0.85s}}! Go 1.7 = 1.14s* '''node.js 4.6 = 2s1.35s'''* java7 + [https://blog.famzah.net/2016/09/10/cpp-vs-python-vs-php-vs-java-vs-others-performance-benchmark-2016-q3/#comment-21850 баг]; nodejs 0.10 = ~2.5s6s

* Ruby 2.3 = 14.3s, Python 3.5 = 19s17s, 2.7 = 21s20s* Perl = 25s24s* '''PHP 5.6 = 69s42.5s''' :))))) {{mag|ахаха, прекрати}} ==== Разница между 64 и 32 бит: i386 @@ ==== <plot>binwidth=0.5set yrange [0:13]set xrange [0:55]set ytics ('Rust 1.11' 1, 'C++' 2, 'Java 8' 3, 'PyPy' 4, 'Go' 5, 'node.js' 6, 'PHP 7' 7, 'Ruby 2.3' 8, 'Python 3.5' 9, 'Python 2.7' 10, 'Perl' 11, 'PHP 5.6' 12)set grid xticsset mxtics 1set style fill solid 1.0 noborderset boxwidth 0.7 relativeplot 'lang.dat' using 2:1:(0.0):2:(($1)-(binwidth/2.0)): (($1)+(binwidth/2.0)) with boxxyerrorbars title 'x = Быстрее PHP 5.6 в x раз'DATASET lang1.0 49.92.0 46.083.0 46.384.0 34.985.0 37.366.0 31.777.0 6.38.0 2.989.0 2.4910.0 2.1211.0 1.7612.0 1.00ENDDATASET</plot> ==== Разница между 64 и 32 бит: amd64 @@ ==== <plot>binwidth=0.5set yrange [0:13]set xrange [0:55]set ytics ('Rust 1.12' 1, 'C++' 2, 'Java 8' 3, 'PyPy' 4, 'Go' 5, 'node.js' 6, 'PHP 7' 7, 'Ruby 2.3' 8, 'Python 3.5' 9, 'Python 2.7' 10, 'Perl' 11, 'PHP 5.6' 12)set grid xticsset mxtics 1set style fill solid 1.0 noborderset boxwidth 0.7 relativeplot 'lang.dat' using 2:1:(0.0):2:(($1)-(binwidth/2.0)): (($1)+(binwidth/2.0)) with boxxyerrorbars title 'x = Быстрее PHP 5.6 в x раз'DATASET lang1.0 50.952.0 47.883.0 43.534.0 29.545.0 28.656.0 27.187.0 8.538.0 4.629.0 3.1810.0 2.5911.0 2.2212.0 1.00ENDDATASET</plot>

[[File:FTL_JIT_performance.png]] [https://webkit.org/blog-files/ftl-jit/four_tier_performance.png]

http[[File://gyazo.com/2c32601f8747c5e93becc08270fa5127PyPy_mandel.png]]

http[[File://www.aosabook.org/images/llvm/LLVMCompiler1.png]]

* {{red|Но язык - — ещё не всё!}} Ещё есть:

*: {{gray|но... но… erlang. свои минусы и [https://habrahabr.ru/post/183150/ начинает хотеться монад]}}

** массив — разновидность объекта (класс Array): <ttstyle="white-space: nowrap"><nowiki>[ "value1", 2, 3, "value3" ]</nowiki></tt>

* regexp literals: <tt><nowiki>var re = /<html[^<>]*>/i;</nowiki></tt>

* Цикл по {{blue|ключам}}: <tt><nowiki>for (var i </nowiki>{{blue|in }}<nowiki> obj) {}</nowiki></tt>* '''Цикл по {{green|значениям (ES6)'''}}: <tt><nowiki>for (var i </nowiki>{{green|of }}<nowiki> obj) {}</nowiki></tt>

var { key: k, value: [ a, b ], other: o = 3 } = obj; // 3 - значение по умолчанию

{{red|Нюанс 1: Promise'ы nodejs глотают исключения}}

{{gray|Оговорка: чёткой уверенности, что это лучше CommonJS, у меня нет. Но гибче, да.}}

* Poly- и Pony- fill’ыОтладка, профилировка* Редакторы, IDE

AMD Наиболее актуальны CommonJS и UMD, по сути, знать не нужно — используются они уже редкоES6.

* {{red|Основные отличия - отличия — AMD и плоское дерево зависимостей...зависимостей…}}

* {{mag|stealjs}} — оптимизатор js для многостраничных сайтов

=== Чуть старее:@@ === 

* yui-compressor, closure compiler — compiler — обфускаторы* [http://rollupjs.org/ rollup] — система сборки для ES6 модулей (используется реже) === IDE, редакторы, отладка @@ === * {{blue|Netbeans}}*: отладчик встроен*: {{blue|(!)}} умеет живое обновление кода при отладке* {{mag|Atom}} от GitHub*: сам написан на node.js + webkit (Electron)*: напоминает Sublime*: модульный; отладчик — отдельный пакет* {{green|Visual Studio Code}}*: мелкий и мягкий форк Atom’а*: встроен отладчик и поддержка typescript и C# === Отладка из консоли @@ === <tt>nodejs debug app.js;</tt> Есть REPL <source lang="javascript">for (var i = 0; i < 5; i++){ debugger; // брейкпоинт console.log(i);}console.log("done");</source> === Отладка из [https://github.com/node-inspector/node-inspector node-inspector] @@ ===  {{blue|$ npm install -g node-inspector; node-debug app.js}} Node Inspector is now available from http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 Debugging `app.js` Debugger listening on port 5858 [[File:Node_inspector_ss.png|600px]] === Браузерная часть @@ === {{green|Ну, тут проблем нет совсем}}* F12 даже в IE* watchify* есть фокусы с live reload (react/redux)* chrome + netbeans connector === Профилировка @@ === * node --prof, node --prof-process* Профилировка памяти: [https://github.com/bnoordhuis/node-heapdump heapdump]* Flamegraph: [https://github.com/davidmarkclements/0x 0x] [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]*: {{gray|Запускает обычные тесты, но в открытом приложении в браузере}}* В целом: [https://mochajs.org/ Mocha], Chai, Sinon === Тайпчекеры: TypeScript, Flow @@ === В целом {{green|очень похожи}}.* У {{blue|Flow}} лучше вывод типов* У {{mag|TypeScript}} есть public/private/protected* У {{blue|Flow}} есть Nullable типы (и он автоматически проверяет на null)* TypeScript — {{mag|над}}множество JS* Flow — {{blue|под}}множество JS === TS null @@ === <source lang="javascript">function foo(num: number) { if (num > 10) { return 'cool'; }}</source> <source lang="javascript">// coolconst 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 valueconsole.log(foo(100).toString()); // error: return undefined. This type is incompatible with stringfunction 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</source> == Обзор фреймворков @@ == * Клиентские фреймворки «старые»* Клиентские фреймворки «новые»* Попытки мобильной разработки* Попытки игровых фреймворков === «Старые» @@ === Заслуживают упоминания:* {{blue|jQuery}} (фиг сдохнет, а надо бы)* {{green|ExtJS}} (тоже фиг сдохнет)* {{red|R.I.P}}: Yahoo UI, PrototypeJS* По-моему, сдыхает: Dojo ==== jQuery @@ ==== {{blue|«Меня зовут Мистер Свинья!»}} ''Если скриптота — рас***дяйство, то jQuery — {{red|ВЕРХ}} рас***дяйства'' Ибо РАСПОЛАГАЕТ к плохому коду:* Всё в кучу: объект-бог с кучей хелперов $ {{mag|и такие же модули}} {{gray|(например, DataTables)}}* <tt><nowiki>$.extend(), $.ajax(), $("<html>"), $(".class")</nowiki></tt>* Селекторы / операции над множествами: <tt><nowiki>$(".class").each(e => $(e).hide())</nowiki></tt>*: {{red|если элементов не найдётся, no problem, ничего не сдохнет}}* Страшные контроллеры, гвоздями прибитые к UI* Отсутствие возможностей оптимизации при динамической сборке UI*: {{gray|Пример — WikiEditor}} ==== ExtJS @@ ==== * Desktop-like фреймворк, {{green|умеет кучу всего}}* Фундаментально {{red|тормозноват}}* Со стилизацией большие трудности*: {{gray|1=Ну хоть тема в ExtJS >= 4 стала норм, можно смотреть без рвотных позывов}}* По моему опыту — писать на нём НЕ проще и НЕ быстрее, чем на HTML+JS* Data binding есть, но ограниченный — только свойств (а не иерархии) компонентов === «Новые» (компонентные) @@ === * Data binding*: <s>Knockout, Ember, Backbone</s>*: {{gray|упомянем для истории; неактуальны}}*: {{green|AngularJS 1, 2}}* Virtual DOM*: {{green|React}} И те, и другие — по сути, {{mag|решают задачу шаблонизации на JS}}. === AngularJS 1 @@ === * Dirty checking* Все биндинги 2-way* Поэтому медленный* Есть компоненты («директивы») и контроллеры* {{blue|На этом уже ''можно'' писать}} ==== Пример @@ ==== <div></div> &lt;div '''ng-controller="LoanCalculator"'''&gt; &lt;div&gt; Дата выдачи: &lt;input name="" type="text" '''ng-model="props.start"''' /&gt;&lt;br /&gt; Сумма: &lt;input name="" type="text" '''ng-model="props.total"''' /&gt;&lt;br /&gt; Процент: &lt;input name="" type="text" '''ng-model="props.percent"''' /&gt;&lt;br /&gt; Срок: &lt;input name="" type="text" '''ng-model="props.months"''' /&gt; месяцев&lt;br /&gt; Штраф за просрочку: &lt;input name="" type="text" '''ng-model="props.fine"''' /&gt;&lt;br /&gt; Пеня % годовых на просрочку: &lt;input name="" type="text" '''ng-model="props.penaltyPercent"''' /&gt;&lt;br /&gt; &lt;input type="button" value="Рассчитать" '''ng-click="recalc()"''' /&gt; &lt;input type="button" value="Сбросить" '''ng-click="clear()"''' /&gt; &lt;/div&gt; &lt;table '''ng-if="payments.length"''' border="0"&gt; &lt;tr&gt; &lt;th&gt;Дата&lt;/th&gt; &lt;th&gt;Сумма&lt;/th&gt; &lt;th&gt;Комментарий&lt;/th&gt; &lt;/tr&gt; &lt;tr '''ng-repeat="payment in payments"'''&gt; &lt;td&gt;&lt;input name="" type="text" '''ng-model="payment.date" ng-change="clear_from($index+1)"''' /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="" type="text" '''ng-model="payment.total" ng-change="clear_from($index+1)"''' /&gt;&lt;/td&gt; &lt;td&gt;&#x7B;{payment.text}}&lt;/td&gt; &lt;/tr&gt; &lt;tr '''ng-if="clean"'''&gt; &lt;th&gt;Всего&lt;/th&gt; &lt;td&gt;&#x7B;{sum}}&lt;/td&gt; &lt;td&gt;&#x7B;{outsums}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; === Angular 2 @@ === * Пофиксили скорость, разделив 1-way и 2-way биндинги* Перешли на TypeScript ''{{gray|и всех агитируют}}''* Обновились в целом* {{green|Больше «искаропки»}}* {{red|Но зато тяжелее. Зачем-то тянет за собой RxJS…}} === React: почему я за React? @@ === * {{mag|JSX}}: на первый взгляд странно, на самом деле — круто и удобно!* '''Строго однонаправленный''' поток данных*: {{gray|(2-way binding — как чуть сложнее, так проблема)}}* {{green|Правильная компонентность}}*: Убирает все сомнения в том, MV-что у нас — MVVM, MVC, M-V-VC, M-V-VC-VM…*: Контроллер занимается тем, чем и должен: работой с данными* Легковесный, простой, изящный. Учится за 1 вечер. Не принуждает к дополнительным компонентам. ==== Почему JSX — круто? @@ ==== Даёт писать шаблоны прямо на JS! Удобно и безопасно. Например, цикл:* Ember: {{red|<nowiki>{{# each}}</nowiki>}}* Angular 1: {{red|ng-repeat}}* Angular 2: {{red|ngFor}}* Knockout: {{red|<nowiki>data-bind="foreach"</nowiki>}}* React: {{blue|ПРОСТО ИСПОЛЬЗУЙТЕ JS :)}} (обычный for или Array.map()) <blockquote>Angular 2 continues to put «JS» into HTML. React puts «HTML» into JS.</blockquote> ==== JSX @@ ==== <source lang="javascript">var MessageInList = React.createClass({ msgClasses: { unread: 'unread', unseen: 'unseen', answered: 'replied', flagged: 'pinned', sent: 'sent' }, render: function() { var msg = this.props.msg; return <div data-i={this.props.i} className={'message'+ (msg.body_text || msg.body_html ? '' : ' unloaded')+ (msg.flags.map(c => (this.msgClasses[c] ? ' '+this.msgClasses[c] : '')).join(''))+ (this.props.selected ? ' selected' : '')+ (msg.thread && this.props.threads ? ' thread0' : '')} onMouseDown={this.props.onClick}>  <div className="icon" style={{ width: (20+10*(msg.level||0)), backgroundPosition: (10*(msg.level||0))+'px 7px' }}></div> <div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div> {msg.thread && this.props.threads ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null} <div className="bullet"></div> <div className="from" style={{ left: (21+10*(msg.level||0)) }}> {(msg.props.sent ? 'To '+(msg.props.to[0][0]||msg.props.to[0][1]) : (msg.props.from ? msg.props.from[0]||msg.props.from[1] : ''))} </div> <div className="size">{Util.formatBytes(msg.size||0)}</div> <div className="attach" style={msg.props.attachments && msg.props.attachments.length ? null : { display: 'none' }}></div> <div className="time">{Util.formatDate(msg.time)}</div>  </div> }});</source> ==== JSX и Virtual DOM @@ ==== * Как применять изменения быстро?*: ''(DOM — относительно медленный)''* Храним {{mag|копию DOM}} в виде json* После render() сравниваем* Изменения применяем {{red|к реальному DOM}}: {{green|&rArr; Быстро и при этом гибко}} ==== [https://facebook.github.io/react/docs/component-specs.html Компоненты React] @@ ==== * Обязательный метод ОДИН: {{blue|render()}}* props и state {{gray|(XML-атрибуты и внутреннее состояние)}}* children {{gray|(тело элемента)}}* getDefaultProps(), getInitialState()* setState(). {{red|нет setProps() и setChildren()!}} {{gray|(получает при render родителя)}}* componentWillMount(), componentDidMount(), componentWillUnmount()* componentWillReceiveProps(p), shouldComponentUpdate(p, s)* componentWillUpdate(p, s), componentDidUpdate(p, s)* propTypes, mixins, statics ==== А вот почему это красиво @@ ==== ExtJS. Класс «панель». {{red|Где тут делать инициализацию?}} [[File:Extjs-events.png|400px]] {{red|beforerender? render? afterrender? afterlayout? added? add? show?}} {{gray|спойлер: нигде}} ==== Библиотеки для React @@ ==== * Контроллер: Flux* Или {{mag|Redux}} (2 кб!)* react-router* react-router-redux* HTTP? superagent* [https://facebook.github.io/draft-js/ Draft.js] {{gray|(rich editor)}} ==== О Redux @@ ==== * «State container»* {{green|Однонаправленный поток данных:}}*: Store &rarr; Компоненты &rarr; Действия &rarr; Диспетчер &rarr; Store* Компоненты «привязываются» к данным в Store* И к вызовам действий* Действие = reducer: {{mag|(Состояние, Действие) &rarr; (НовоеСостояние)}}.: {{gray|&rarr; Очень чёткое отделение контроллера}} === Как писать на React @@ === [https://facebook.github.io/react/docs/thinking-in-react.html Thinking in React]# Набросать (или взять у дизайнеров) HTML-макет# Выделить компоненты#: Помним, что компонент — ''единица рендера''# Сделать статическую версию на React, всё через props# Выделить состояние, определить владельца состояния#: Можно уже брать Flux/Redux#: Presentational vs Controller# Научить менять состояние === Прочее @@ === * Мобильное** React Native: {{gray|Virtual DOM над нативными компонентами}}** NativeScript: {{gray|Тоже JS в отдельном потоке и свой XML-язык описания UI}}** {{green|Уверен, появятся ещё}}* https://html5gameengine.com/* WebGL: SceneJS, OSG.JS, Blend4Web == Демонстрация LikeOpera @@ %% == {{gray|Клон Opera Mail на React и node.js}} == Вопросы @@ %% ==