# Понедельник 68 твитов
Привет. На этой неделе здесь я — @roman01la. Будем говорить о парном программировании, функциональном JS, о доступности и других штуках.
10:24Кто-нибудь практикует парное программирование? Какие, по вашему мнению, плюсы/минусы в таком подходе?
10:54У нас на проекте это нормальный процесс. Поначалу было странно, но уже скоро стали очевидны преимущества.
10:57Так вот, работать в паре веселее, хотя, в целом, процесс идет медленнее.
11:31В то же время растет качество кода, если хотя бы один из пары достаточно опытен. Обмен опытом — еще одно неизбежное преимущество.
11:34Для новых людей на проекте работа парами — это возможность быстрее разобраться в коде и познакомится с командой.
11:41Важно постоянно менять партнера, например раз в пару месяцев. Партнера по коду, конечно же :)
11:47@jsunderhood вот пара моих рассказов про парное программирование: events.yandex.ru/lib/talks/559/ и events.yandex.ru/lib/talks/1447/11:48
Если чувствуете себя некомфортно с новым партнером, важно не промолчать и высказаться. Вам еще работать вместе.
11:57Ну или сменить партнера, в крайнем случае. Умение ладить с людьми работая парами всегда пригодится.
12:11Только что менялись парами: стали в круг, разбираем задания и, по желанию, меняемся. Тимлид всегда помогает в этом процессе.
12:19.@toivonens попросила написать о сообществе разработчиков здесь, во Львове.
12:36Львов — один из центров аутсорса в Украине. Поэтому большинство митапов проводятся в стенах таких компаний.
12:40Но, на самом деле, есть и более интересные вещи. За почти полтора года, что я здесь живу, успел побывать на паре таких митапов.
12:41Например на прошлых выходных, на территории горнолыжного курорта Буковель, прошла конференция WeBukovel webukovel.org.ua
12:45Спасибо ее организатору @ArtyomTrityak. Я был рядом, но, к сожалению, не было возможности зайти.
12:49Еще во Львове есть @LvivJS — конференция фронтенд разработчиков lvivjs.org.ua Был там в прошлом году, очень понравилось.
12:52Может кто-нибудь из Львовских расскажет больше о местных митапах?
13:00@jsunderhood фраза о важности выбора партнера по парному программированию звучит грозно по соседству с такими твитами pic.twitter.com/fPwnIdfB1D13:04
Пытался достучаться до местной JS юзер группы jsug-lviv.blogspot.com Судя по блогу ребята давно не собирались.
13:09Вообще удивительно, что, при таком количестве разработчиков в городе, не возникают новые митапы. Или я чего-то не знаю.
13:19Многие посещают конференции и воркшопы в Европе. Большой аутсорс может позволить себе отправлять разработчиков по всему миру.
13:35Нужно только суметь убедить заказчика в пользе для проекта от посещения таких событий.
13:36А что бы убедить в необходимости посещения события, практически все митапы дают такой мануал fluentconf.com/fluent2014/pub…
13:52Дальше по плану функциональный JS и немного FRP. Сейчас эта тема особенно активно обсуждается вокруг сообщества React.
15:47Уже есть полно библиотек для написания кода в функциональном стиле, а на Хабре постоянно размещают посты на эту тему habrahabr.ru/hub/funcprog/
15:59Популярные библиотеки: baconjs.github.io github.com/cujojs/most reactive-extensions.github.io/RxJS/ ramdajs.com
16:01Кто-нибудь практикует функциональный JS? Было бы интересно услышать впечатление от работы с JS пришедших из функциональных языков.
16:14@jsunderhood попиарь мою либу github.com/idmitriev/hypr16:21
В целом функциональный подход интересен хотя бы тем, что это альтернатива привычному ООП.
16:25Одной из характеристик функционального ЯП являются функции высшего порядка и функции первого класса.
16:38Проще говоря — функции оперирующие другими функциями.
16:40И любые операции представляются как функции. Например: `2 + 2` в JS и `(+ 2 2)` в Clojure.
16:47По сути в JS математические операции — это функции с неявной записью. Поэтому их нужно адаптировать, оборачивать в явные функции.
16:54`let add = x => x + x;`
16:56Кстати, синтаксис fat arrow function из ES6 отлично подходит для описания таких базовых функций, короткая запись, ничего лишнего.
16:59Имея набор таких базовых функций, можно воспользоваться одним из преимуществ функционального программирования — композицией.
17:05`capitalize(trim(string))` — композиция двух операций.
17:11Каждая из операций возвращает результат своего выполнения, таким образом можно создавать более сложные операции.
17:13Но запись через вкладывание неудобна, поэтому нам понадобиться функция высшего порядка для миксования других функций в новую операцию.
17:17Такую функцию часто называют `compose`. Вот пример ее реализации jsbin.com/finiziyulo/1/
17:30Теперь новые операции можно создавать так: `let convert = compose(trim, capitalize);`.
17:32И тут я осознал еще одно преимущество функционального подхода: ваш код говорит ЧТО делать, а не КАК, в случае с императивным подходом.
18:11Для этого в JS нужно отказаться от циклов в пользу `.map()`, `.filter()` и т.д.
18:17В одном из своих докладов @jhusain из Netflix рассказывает о функциональщине в JS youtube.com/channel/UCGGRR…
18:22Еще у них есть классный интерактивный курс по основам jhusain.github.io/learnrx/
18:23Если используете Underscore.js, то ура — в библиотеке есть набор функциональных инструментов, которые вы тоже наверняка уже использовали.
18:27Хотя @drboolean считает, что Underscore делает это неправильно youtube.com/watch?v=m3svKO…
18:29У этого парня есть шестичасовой курс по ФП в JS «Hardcore Functional Programming in JavaScript» frontendmasters.com/courses/functi…
18:32@jsunderhood бро, заканчивай эту тоску, пжалста. Или давай сразу про эндофункторы и стрелки и точки неподвижные в разрезе трансдьюсеров.18:32
А если хочется теории, то на том же Хабре есть что почитать. Например Теория катеогрий habrahabr.ru/search/?q=%D1%…
18:34Больше всего понравилась серия переводов «Теория категорий для программистов» habrahabr.ru/post/245797/ Очень доходчиво.
18:38Хотя на практике польза от этого сомнительна. Возможно стоит начать изучать Haskell?
18:43Если нет времени читать статьи, вот отличные слайды yogsototh.github.io/Category-Theor…
18:44Пожалуйста поправляйте, если с чем-то не согласны.
18:50@jsunderhood на недавнем 19-м @moscowjs выступал Трдат с докладом про FRP. Скоро будет видео! ;)18:50
@jsunderhood ну вот например thedeemon.livejournal.com/87320.html19:15
Мне кажется, что для лучшего понимания ФП нужно попробовать функциональный язык. Например Clojure и в частности ClojureScript.
19:30А выбрал я ClojureScript потому, что для него есть Om — cljs интерфейс для React github.com/omcljs/om
19:44В cljs данные всегда неизменяемые (immutable) и вот почему это хорошо...
19:46С точки зрения CPU намного быстрее создать, обработать и выбросить, чем создать, обработать, положить в память, запросить, обработать и т.д.
19:53К сожалению быстро это работает для многопотоковой архитектуры. Но не отменяет того факта, что с неизменяемыми данными работать проще.
19:56А в сочетании с более медленными абстракциями над циклами типа `.map()` функциональный код в JS будет еще медленнее.
20:02Так что, в ближайшем будущем, тяжелые приложения на функциональном JS лучше обходить стороной.
20:05Например игры, где каждую секунду по 60 раз выполняются сотни функций.
20:07На интерфейсы это не распространяется, железо уже достаточно производительно.
20:07# Вторник 21 твит
Еще немного о ФП
9:31Реализация неизменяемых структур данных в JS: Immutable.js facebook.github.io/immutable-js/ и mori swannodette.github.io/mori/
9:32Паттерны ФП youtube.com/watch?v=AvgwKj…
9:35Скринкаст по Haskell youtube.com/watch?v=mtVk8R… что бы понять, как ФП работает в функциональных языках.
9:40И очень крутая лекция про монады youtube.com/watch?v=ZhuHCt… Крокфорд так не объясняет :)
9:44Теперь немного о функциональном реактивном программировании...
14:27ФРП — это ФП + потоки.
14:31Поток — это данные поступающие со временем.
14:32На практике это может выглядеть как преобразование событий DOM в поток таких событий и их обработка инструментами ФП.
14:33Например как это делает RxJS github.com/Reactive-Exten…
14:34Используя базовый набор операций над потоками можно облегчить себе жизнь в создании интерфейсов.
14:51Об этом хорошо рассказывает все тот же техлид из Netflix в докладе «Async JavaScript with Reactive Extensions» youtube.com/watch?v=FAZJsx…
14:53Вот еще неплохо написано о реактивном программировании в JS gist.github.com/staltz/868e7e9…
14:54Короткий и информативный доклад @swannodette о неизменяемых структурах данных youtube.com/watch?v=SiFwRt… /cc @rdvornov
18:11На React.js Conf @jlongster рассказал о другом подходе в работе с асинхронным JS пришедшем из Clojure и Go — это CSP youtube.com/watch?v=W2DgDN…
19:11Communicating sequential processes представляет концепцию процессов и каналов, по которым общаются эти процессы.
19:16Один процесс забрасывает данные в канал, другой достает их.
19:20js-csp github.com/ubolonton/js-c…
19:20Рядом с CSP всегда упоминаются трансдьюсеры. На Хабре было несколько постов о них. А в этом автор создает их с нуля phuu.net/2014/08/31/csp…
20:05Если просто, то трансдьюсер — это способ трансформирования данных через композицию.
20:07А это пятая серия «Better Call Saul» youtube.com/watch?v=tt2iU2…
20:12# Среда 23 твита
На wiki.ecmascript.org можно почитать об интересных штуках которые не стали частью ES6 и о возможных изменениях в JS в далеком будущем.
11:45Например чтсла SIMD (single instruction, multiple data) ru.wikipedia.org/wiki/SIMD
11:48На самом деле SIMD перенесли в ES7 и эта спека уже частично реализованна в FF Nightly.
11:49SIMD инструкции обеспечивают параллелизм на уровне данных.
11:51Такая оптимизация даст прирост в производительности например в графике, где данные представлены в виде векторов.
11:55Например: в JS нету векторов, обычно представляют в виде массива или объекта, тогда операции над такими векторами выполняются почленно...
11:59Поэтому [1,2,3] + [1,2,3] выполнится в три процессорных такта, а с SIMD всего в один такт.
12:01Спеку можно почитать здесь github.com/johnmccutchan/…
12:01Наглядный пример оптимизации рендеринга фракталов в asm.js peterjensen.github.io/mandelbrot/js/… только FF Nightly
12:07Кстати, о графике в вебе. Посмотрите на эти примеры физически правильного рендеринга в WebGL blog.sketchfab.com/post/112612737… Очень круто!
12:25Другая интересная спека — Typed Objects wiki.ecmascript.org/doku.php?id=ha… тоже не попала в ES6, но реализована в FF Nightly
12:46Типизированные структуры данных `new StructType({ x: uint32, y: uint32 });`.
12:49В ночной сборке FF все типы находятся в глобальном объекте TypedObject pic.twitter.com/LyudFyhtfM
13:19Или вот предложенный в ES7 оператор `.=` batch assignment для объектов wiki.ecmascript.org/doku.php?id=st…
14:18И guards, как в Haskell wiki.ecmascript.org/doku.php?id=st…
14:38Вот еще несколько интересных спек: короткий синтаксис для function expression wiki.ecmascript.org/doku.php?id=st…
15:34Иммутабельные структуры типа объект wiki.ecmascript.org/doku.php?id=st…
15:34И иммутабельные последовательности (массивы, листы) wiki.ecmascript.org/doku.php?id=st…
15:38Параллельно с Atom пробую Light Table lighttable.com Особой популярностью не отличается, но есть крутые штуки.
20:34Например результат выполнения кода, который пишешь, возникает в той же строке. Наблюдение за значением переменных, тоже круто.
20:36Похоже на то, что делает wallabyjs.com с тестами.
20:37Перед тем, как заняться фронтендом, делал веб-дизайн. Сейчас вкус к красивым интерфейсам практически пропал. Все свелось к минимализму.
22:42Вы поддерживаете свои дизайнерские способности? Если да, то каким образом?
22:43# Четверг 14 твитов
@jsunderhood, минимализм не отменяет красоту интерфейса, а наоборот обнажает истинную красоту, скрытую в его логике.9:42
@jsunderhood перечитываю «Кради как художник»9:42
Джависты недоумевают почему `array === $(array) // false`
11:37Это можно объяснить как неявное приведение типов.
11:43Еще джавистам сложно понять ООП в JS, что уже говорить о React. Поэтому берут Angular.
13:35Fat arrow не единственный новый тип функции в ES6, еще есть tag function: fn `Hello ${name}!`. Вызов без скобок, принимает template string.
13:43Используется для чтения исходных данных из строки: значения и части строки tc39wiki.calculist.org/es6/template-s…
13:44С ES6 Proxy можно делать method missing, как в Ruby soft.vub.ac.be/~tvcutsem/prox…
14:17Но такую штуку можно сделать и без Proxy, через нестандартный метод `__noSuchMethod__`, который вызывается если вызываемого метода нету.
14:18А вы стримили в /r/WatchPeopleCode/ ? Или может наблюдали за процессом разработки reddit.com/r/WatchPeopleC…
14:54Можно залипнуть на вечер и узнать что-нибудь новое для себя. Подходы, техники.
14:56React + CoffeeScript habrahabr.ru/post/251835/ pic.twitter.com/VZrQrTIoN9
20:05Даже простым +1 в комментариях к обсуждению желаемой фичи вы можете повлиять на ее реализацию.
20:52# Пятница 10 твитов
Добавил иконку React в плагин file-icons, для подсветки .jsx файлов, в Atom github.com/DanBrooker/fil… pic.twitter.com/ZTPnKibkml
8:14Заодно получил опыт создания иконочного шрифта в Inkscape.
8:15Суперский инструмент для экспорта набора иконок в шрифт icomoon.io/app/
8:18@jsunderhood fontello.com с более простым, но схожим функционалом9:24
А существует ли логотип закрепленный за картами кода?
9:47Видео со вчерашней ng-conf youtube.com/user/ngconfvid…
10:07И итоги EmberConf 2015 github.com/poteto/emberco…
10:07Добротный туториал об npm модулях на ES6 habrahabr.ru/post/252389/
18:17Библиотека функций высшего порядка для итераторов из ES6 fitzgen.github.io/wu.js/
19:06# Ссылки
habrahabr.ru
- http://habrahabr.ru/hub/funcprog/
- http://habrahabr.ru/search/?q=%D1%82%D0%B5%D0%BE%D1%80%D0%B8%D1%8F+%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B9
- http://habrahabr.ru/post/245797/
- http://habrahabr.ru/post/251835/
- http://habrahabr.ru/post/252389/
github.com
- https://github.com/cujojs/most
- https://github.com/idmitriev/hypr
- https://github.com/omcljs/om
- https://github.com/Reactive-Extensions/RxJS#why-rxjs
- https://github.com/ubolonton/js-csp
- https://github.com/johnmccutchan/ecmascript_simd
- https://github.com/DanBrooker/file-icons/pull/124
- https://github.com/poteto/emberconf-2015
www.youtube.com
- https://www.youtube.com/channel/UCGGRRqAjPm6sL3-WGBDnKJA/videos
- https://www.youtube.com/watch?v=m3svKOdZijA
- https://www.youtube.com/watch?v=AvgwKjTPMmM
- https://www.youtube.com/watch?v=mtVk8RjvP_U
- https://www.youtube.com/watch?v=ZhuHCtR3xq8
- https://www.youtube.com/watch?v=FAZJsxcykPs
- https://www.youtube.com/watch?v=SiFwRtCnxv4
- https://www.youtube.com/watch?v=W2DgDNQZOwo
- https://www.youtube.com/watch?v=tt2iU2TebBM
- https://www.youtube.com/user/ngconfvideos/videos
wiki.ecmascript.org
- http://wiki.ecmascript.org/
- http://wiki.ecmascript.org/doku.php?id=harmony:typed_objects
- http://wiki.ecmascript.org/doku.php?id=strawman:batch_assignment_operator
- http://wiki.ecmascript.org/doku.php?id=strawman:guards
- http://wiki.ecmascript.org/doku.php?id=strawman:shorter_function_syntax
- http://wiki.ecmascript.org/doku.php?id=strawman:records
- http://wiki.ecmascript.org/doku.php?id=strawman:tuples
- http://wiki.ecmascript.org/doku.php?id=strawman:async_functions
other
- https://events.yandex.ru/lib/talks/559/
- https://events.yandex.ru/lib/talks/1447/
- http://webukovel.org.ua/
- http://www.lvivjs.org.ua/
- http://jsug-lviv.blogspot.com/
- http://fluentconf.com/fluent2014/public/content/convince-manager
- https://baconjs.github.io/
- http://reactive-extensions.github.io/RxJS/
- http://ramdajs.com/
- http://jsbin.com/finiziyulo/1/
- http://jsbin.com/yamonuzabi/1/edit?js,console
- http://jhusain.github.io/learnrx/
- https://frontendmasters.com/courses/functional-javascript/
- http://yogsototh.github.io/Category-Theory-Presentation/
- http://thedeemon.livejournal.com/87320.html
- http://www.mattgreer.org/articles/pair-programming-is-not-a-panacea/
- http://programmers.stackexchange.com/questions/171253/does-immutability-entirely-eliminate-the-need-for-locks-in-multi-processor-progr
- http://facebook.github.io/immutable-js/
- http://swannodette.github.io/mori/
- https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
- http://phuu.net/2014/08/31/csp-and-transducers.html
- https://ru.wikipedia.org/wiki/SIMD
- http://peterjensen.github.io/mandelbrot/js/mandelbrot-asm.html
- http://blog.sketchfab.com/post/112612737009/physically-based-rendering-is-here
- http://lighttable.com/
- http://wallabyjs.com/
- http://tc39wiki.calculist.org/es6/template-strings/
- http://soft.vub.ac.be/~tvcutsem/proxies/
- http://www.reddit.com/r/WatchPeopleCode/
- https://angular.io/
- https://icomoon.io/app/
- http://fontello.com/
- https://www.livecoding.tv/
- https://fitzgen.github.io/wu.js/