13 521
правка
Изменения
м
http[[File://3.bp.blogspot.com/_aWbNXEa3LP8/TFvQsof7IZI/AAAAAAAAA8U/NlSMwn-h2L0/s1600/script_kiddies_demotivatorScript_kiddies_demotivator.jpeg]]
[[Категория: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 типизация @@ %% ==
=== Холивар!!! @@ ===
На ЛОРе до сих пор шутят, что «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/
* всё остальное — '''object'''
** хеш — объект дефолтного типа: <tt><nowiki>{ key: "value" }</nowiki></tt>
** массив — разновидность объекта (класс Array): <ttstyle="white-space: nowrap"><nowiki>[ "value1", 2, 3, "value3" ]</nowiki></tt>
** функции — тоже объекты, их typeof = '''function'''
* 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>{{bluegreen|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 - значение по умолчанию
// можно в параметрах функции!
* requirejs — система загрузки и сборки AMD модулей
* [http://jshint.com/ jshint] — проверка на ошибки и стиль
* yui-compressor, closure compiler — compiler — обфускаторы* [http://rollupjs.org/ rollup] — — система сборки для ES6 модулей (используется реже)
=== IDE, редакторы, отладка @@ ===
* Для браузера: [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
* React: {{blue|ПРОСТО ИСПОЛЬЗУЙТЕ JS :)}} (обычный for или Array.map())
<blockquote>Angular 2 continues to put “JS” «JS» into HTML. React puts “HTML” «HTML» into JS.</blockquote>
==== JSX @@ ====
* Обязательный метод ОДИН: {{blue|render()}}
* props и state {{gray|(XML-атрибуты и внутреннее состояние)}}
* children {{gray|(дочерние компонентытело элемента)}}
* getDefaultProps(), getInitialState()
* setState(). {{red|нет setProps() и setChildren()!}} {{gray|(получает при render родителя)}}
* 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
#: Можно уже брать Flux/Redux
#: Presentational vs Controller
# Добавить изменения Научить менять состояние
=== Прочее @@ ===
* WebGL: SceneJS, OSG.JS, Blend4Web
== Демонстрация<br />LikeOpera @@ %% == {{gray|Клон Opera Mail на React и node.js}}
== Вопросы @@ %% ==
?