13 521
правка
Изменения
м
http[[File://3.bp.blogspot.com/_aWbNXEa3LP8/TFvQsof7IZI/AAAAAAAAA8U/NlSMwn-h2L0/s1600/script_kiddies_demotivatorScript_kiddies_demotivator.jpeg]]
<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>
[[Категория:VitaliPrivate]]?
→Destructuring @@
<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>
</slideshow>
; PDF-версия: [[Media:ES6 and everyone.pdf|ES6 and everyone.pdf]]
== ECMAScript — ассемблер будущего,<br /> бэкенд, фронтенд и все-все-все @@ %% ==
== Скриптота vs типизация @@ %% ==
=== Холивар!!! @@ ===
* Мощное сообщество и развитие
* Удобный пакетный менеджер npm
* Есть тайпчекеры: TypeScript, Flow, Dart…
== Синтаксис @@ %% ==
{{gray|Сравнительный анализ}}
=== Perl @@ ===
На ЛОРе до сих пор шутят, что «Java тормозит», а что ж тогда JS?
* А ничего — и Java быстрая, и он быстрый. {{gray|Мамонты видать шутят}}
*: {{mag|из скриптоты node.js быстрее всех}}
* Но он же интерпретируемый?
*: НЕТ! '''Интерпретируемых''' языков уже вообще нет.
=== Вычислительный [https://blog.famzah.net/2016/02/09/cpp-vs-python-vs-perl-vs-php-performance-benchmark-2016/ бенчмарк] @@ ===
* 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
* PHP 7 = 6.7s
* 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 такой быстрый? @@ ===
[[File:asmjs-bench.png|600px]]
=== Производительность — Производительность — итого @@ ===
* Итого, V8 — V8 — «смешанный» JIT* В Firefox — Firefox — [https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Tracing_JIT тоже всё шустро]
* Чакра Наделлы тоже очень похожа на V8
* Постоянная битва :) https://arewefastyet.com/
* {{red|Но язык - — ещё не всё!}} Ещё есть:
*: В браузере — {{green|DOM}} (медленный в старых Firefox при формально быстром JS)
*: На сервере — {{green|ввод/вывод}}
*: 1M соединений переваривает даже успешнее — [https://blog.whatsapp.com/196/1-million-is-so-2011 на продакшне у WhatsApp]
*: и gc быстрый (кучи отдельные)
*: {{gray|но... но… erlang. свои минусы и [https://habrahabr.ru/post/183150/ начинает хотеться монад]}}
* [http://blog.virtan.com/2012/07/million-rps-battle.html Million RPS Battle]
== Обзор языка @@ %% ==
{{gray|и приколы}}
=== Типы данных @@ ===
* всё остальное — '''object'''
** хеш — объект дефолтного типа: <tt><nowiki>{ key: "value" }</nowiki></tt>
** массив — разновидность объекта (класс Array): <ttstyle="white-space: nowrap"><nowiki>[ "value1", 2, 3, "value3" ]</nowiki></tt>
** функции — тоже объекты, их typeof = '''function'''
* a == b (мягкое сравнение) и a === b (точное сравнение)
*: <tt><nowiki>"" == false, 0 == false, "1" == true, 1 == true, "5" == 5, null == undefined</nowiki></tt>
* regexp literals: <tt><nowiki>var re = /<html[^<>]*>/i;</nowiki></tt>
* break label, continue label
* Цикл по {{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>
<source lang="javascript">
<source lang="javascript">
var obj = { key: 'abc', value: [ 1, 2 ] };
var { key: k, value: [ a, b ], other: o = 3 } = obj; // 3 - значение по умолчанию
// можно в параметрах функции!
==== Нюансы с исключениями @@ ====
{{red|Нюанс 1: Promise'ы nodejs глотают исключения}}
Решение — [http://bluebirdjs.com Bluebird], он бросает '''Unhandled rejection error'''
</source>
{{gray|Оговорка: чёткой уверенности, что это лучше CommonJS, у меня нет. Но гибче, да.}}
=== Template strings @@ ===
* Ставится из npm O_o
* Команды примерно те же: install, init… те же semver’ы
* {{red|Основные отличия - отличия — AMD и плоское дерево зависимостей...зависимостей…}}
*: {{green|то есть как будто вы просто сказали npm dedup}}
*: {{gray|только свалится, если что-то несовместимо по semver}}
* requirejs — система загрузки и сборки AMD модулей
* [http://jshint.com/ jshint] — проверка на ошибки и стиль
* 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'аAtom’а
*: встроен отладчик и поддержка typescript и C#
=== Отладка из консоли @@ ===
<tt>nodejs debug app.js;</tt>. Есть REPL
<source lang="javascript">
=== Отладка из [https://github.com/node-inspector/node-inspector node-inspector] @@ ===
[[File:Node_inspector_ss.png|600px]]
=== Браузерная часть @@ ===
{{green|Ну, тут проблем нет совсем}}* F12даже в IE
* watchify
* есть фокусы с live reload (react/redux)
* Для браузера: [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 @@ ===
Заслуживают упоминания:
* {{blue|jQuery }} (фиг сдохнет, а надо бы)* {{green|ExtJS }} (тоже фиг сдохнет)* Сдохли{{red|R.I.P}}: Yahoo UI, PrototypeJS
* По-моему, сдыхает: Dojo
==== Пример @@ ====
<!-- --div></div>
<div '''ng-controller="LoanCalculator"'''>
<div>
* Перешли на TypeScript ''{{gray|и всех агитируют}}''
* Обновились в целом
* {{green|Больше "искаропки"«искаропки»}}
* {{red|Но зато тяжелее. Зачем-то тянет за собой RxJS…}}
* {{mag|JSX}}: на первый взгляд странно, на самом деле — круто и удобно!
* '''Строго однонаправленный''' поток данных
*: {{gray|(2-way binding - binding — как чуть сложнее, так проблема)}}
* {{green|Правильная компонентность}}
*: Убирает все сомнения в том, MV-что у нас — MVVM, MVC, M-V-VC, M-V-VC-VM…
* 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 @@ ====
* Обязательный метод ОДИН: {{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 → Компоненты → Действия → Диспетчер → Store* Компоненты «привязываются» к данным в Store* И к вызовам действий* Действие = reducer: {{mag|(Состояние, Действие) → (НовоеСостояние)}}.: {{gray|→ Очень чёткое отделение контроллера}}
=== Как писать на React @@ ===
#: Можно уже брать 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}}
=== React Native Вопросы @@ =%% ==