Изменения

<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]]

* Есть тайпчекеры: 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>

=== Производительность — Производительность — итого @@ ===

* Итого, V8 — V8 — «смешанный» JIT* В Firefox — Firefox — [https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Tracing_JIT тоже всё шустро]

* {{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, у меня нет. Но гибче, да.}}

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

* yui-compressor, closure compiler — compiler — обфускаторы* [http://rollupjs.org/ rollup] -  — система сборки для ES6 модулей (используется реже)

* {{blue|Netbeans}}

*: {{blue|(!)}} умеет живое обновление кода при отладке* {{mag|Atom }} от GitHub*: сам написан на node.js + webkit(Electron)

*: модульный; отладчик - отладчик — отдельный пакет* {{green|Visual Studio Code}}*: мелкий и мягкий форк Atom'аAtom’а

<tt>nodejs debug app.js;</tt>. Есть REPL

<pre> {{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</pre>

{{green|Ну, тут проблем нет совсем}}* F12даже в IE

*: {{gray|Запускает обычные тесты, но в открытом приложении в браузере}}

В целом {{green|очень похожи}}.* У {{blue|Flow }} лучше вывод типов* У {{mag|TypeScript }} есть public/private/protected* У {{blue|Flow }} есть Nullable типы (и он автоматически проверяет на null)* TypeScript — надмножество {{mag|над}}множество JS* Flow — подмножество {{blue|под}}множество JS

== Фреймворки Обзор фреймворков @@ ==

Заслуживают упоминания два:* {{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* AngularJSи node.js}}

=== React Вопросы @@ =%% ==