Архив недели @roman01la
Понедельник
Привет. На этой неделе здесь я — @roman01la. Будем говорить о парном программировании, функциональном JS, о доступности и других штуках.
Кто-нибудь практикует парное программирование? Какие, по вашему мнению, плюсы/минусы в таком подходе?
У нас на проекте это нормальный процесс. Поначалу было странно, но уже скоро стали очевидны преимущества.
Так вот, работать в паре веселее, хотя, в целом, процесс идет медленнее.
В то же время растет качество кода, если хотя бы один из пары достаточно опытен. Обмен опытом — еще одно неизбежное преимущество.
Для новых людей на проекте работа парами — это возможность быстрее разобраться в коде и познакомится с командой.
Важно постоянно менять партнера, например раз в пару месяцев. Партнера по коду, конечно же :)
Если чувствуете себя некомфортно с новым партнером, важно не промолчать и высказаться. Вам еще работать вместе.
Ну или сменить партнера, в крайнем случае. Умение ладить с людьми работая парами всегда пригодится.
Только что менялись парами: стали в круг, разбираем задания и, по желанию, меняемся. Тимлид всегда помогает в этом процессе.
Львов — один из центров аутсорса в Украине. Поэтому большинство митапов проводятся в стенах таких компаний.
Но, на самом деле, есть и более интересные вещи. За почти полтора года, что я здесь живу, успел побывать на паре таких митапов.
Например на прошлых выходных, на территории горнолыжного курорта Буковель, прошла конференция WeBukovel webukovel.org.ua
Спасибо ее организатору @ArtyomTrityak. Я был рядом, но, к сожалению, не было возможности зайти.
Еще во Львове есть @LvivJS — конференция фронтенд разработчиков lvivjs.org.ua Был там в прошлом году, очень понравилось.
Может кто-нибудь из Львовских расскажет больше о местных митапах?
Пытался достучаться до местной JS юзер группы jsug-lviv.blogspot.com Судя по блогу ребята давно не собирались.
Вообще удивительно, что, при таком количестве разработчиков в городе, не возникают новые митапы. Или я чего-то не знаю.
Многие посещают конференции и воркшопы в Европе. Большой аутсорс может позволить себе отправлять разработчиков по всему миру.
Нужно только суметь убедить заказчика в пользе для проекта от посещения таких событий.
А что бы убедить в необходимости посещения события, практически все митапы дают такой мануал fluentconf.com/fluent2014/pub…
Дальше по плану функциональный JS и немного FRP. Сейчас эта тема особенно активно обсуждается вокруг сообщества React.
Уже есть полно библиотек для написания кода в функциональном стиле, а на Хабре постоянно размещают посты на эту тему habrahabr.ru/hub/funcprog/
Популярные библиотеки: baconjs.github.io github.com/cujojs/most reactive-extensions.github.io/RxJS/ ramdajs.com
Кто-нибудь практикует функциональный JS? Было бы интересно услышать впечатление от работы с JS пришедших из функциональных языков.
В целом функциональный подход интересен хотя бы тем, что это альтернатива привычному ООП.
Одной из характеристик функционального ЯП являются функции высшего порядка и функции первого класса.
Проще говоря — функции оперирующие другими функциями.
И любые операции представляются как функции. Например:
2 + 2 в JS и (+ 2 2) в Clojure.По сути в JS математические операции — это функции с неявной записью. Поэтому их нужно адаптировать, оборачивать в явные функции.
let add = x => x + x;Кстати, синтаксис fat arrow function из ES6 отлично подходит для описания таких базовых функций, короткая запись, ничего лишнего.
Имея набор таких базовых функций, можно воспользоваться одним из преимуществ функционального программирования — композицией.
capitalize(trim(string)) — композиция двух операций.Каждая из операций возвращает результат своего выполнения, таким образом можно создавать более сложные операции.
Но запись через вкладывание неудобна, поэтому нам понадобиться функция высшего порядка для миксования других функций в новую операцию.
Такую функцию часто называют
compose. Вот пример ее реализации jsbin.com/finiziyulo/1/Теперь новые операции можно создавать так:
let convert = compose(trim, capitalize);.И тут я осознал еще одно преимущество функционального подхода: ваш код говорит ЧТО делать, а не КАК, в случае с императивным подходом.
Для этого в JS нужно отказаться от циклов в пользу
.map(), .filter() и т.д.В одном из своих докладов @jhusain из Netflix рассказывает о функциональщине в JS youtube.com/channel/UCGGRR…
Еще у них есть классный интерактивный курс по основам jhusain.github.io/learnrx/
Если используете Underscore.js, то ура — в библиотеке есть набор функциональных инструментов, которые вы тоже наверняка уже использовали.
Хотя @drboolean считает, что Underscore делает это неправильно youtube.com/watch?v=m3svKO…
У этого парня есть шестичасовой курс по ФП в JS «Hardcore Functional Programming in JavaScript» frontendmasters.com/courses/functi…
А если хочется теории, то на том же Хабре есть что почитать. Например Теория катеогрий habrahabr.ru/search/?q=%D1%…
Больше всего понравилась серия переводов «Теория категорий для программистов» habrahabr.ru/post/245797/ Очень доходчиво.
Хотя на практике польза от этого сомнительна. Возможно стоит начать изучать Haskell?
Если нет времени читать статьи, вот отличные слайды yogsototh.github.io/Category-Theor…
Пожалуйста поправляйте, если с чем-то не согласны.
Мне кажется, что для лучшего понимания ФП нужно попробовать функциональный язык. Например Clojure и в частности ClojureScript.
А выбрал я ClojureScript потому, что для него есть Om — cljs интерфейс для React github.com/omcljs/om
В cljs данные всегда неизменяемые (immutable) и вот почему это хорошо...
С точки зрения CPU намного быстрее создать, обработать и выбросить, чем создать, обработать, положить в память, запросить, обработать и т.д.
К сожалению быстро это работает для многопотоковой архитектуры. Но не отменяет того факта, что с неизменяемыми данными работать проще.
Это был краткий пересказ слов @jhusain
А в сочетании с более медленными абстракциями над циклами типа
.map() функциональный код в JS будет еще медленнее.Так что, в ближайшем будущем, тяжелые приложения на функциональном JS лучше обходить стороной.
Например игры, где каждую секунду по 60 раз выполняются сотни функций.
На интерфейсы это не распространяется, железо уже достаточно производительно.
Вторник
Еще немного о ФП
Реализация неизменяемых структур данных в JS: Immutable.js facebook.github.io/immutable-js/ и mori swannodette.github.io/mori/
Паттерны ФП youtube.com/watch?v=AvgwKj…
Скринкаст по Haskell youtube.com/watch?v=mtVk8R… что бы понять, как ФП работает в функциональных языках.
И очень крутая лекция про монады youtube.com/watch?v=ZhuHCt… Крокфорд так не объясняет :)
Теперь немного о функциональном реактивном программировании...
ФРП — это ФП + потоки.
Поток — это данные поступающие со временем.
На практике это может выглядеть как преобразование событий DOM в поток таких событий и их обработка инструментами ФП.
Например как это делает RxJS github.com/Reactive-Exten…
Используя базовый набор операций над потоками можно облегчить себе жизнь в создании интерфейсов.
Об этом хорошо рассказывает все тот же техлид из Netflix в докладе «Async JavaScript with Reactive Extensions» youtube.com/watch?v=FAZJsx…
Вот еще неплохо написано о реактивном программировании в JS gist.github.com/staltz/868e7e9…
Короткий и информативный доклад @swannodette о неизменяемых структурах данных youtube.com/watch?v=SiFwRt… /cc @rdvornov
На React.js Conf @jlongster рассказал о другом подходе в работе с асинхронным JS пришедшем из Clojure и Go — это CSP youtube.com/watch?v=W2DgDN…
Communicating sequential processes представляет концепцию процессов и каналов, по которым общаются эти процессы.
Один процесс забрасывает данные в канал, другой достает их.
js-csp github.com/ubolonton/js-c…
Рядом с CSP всегда упоминаются трансдьюсеры. На Хабре было несколько постов о них. А в этом автор создает их с нуля phuu.net/2014/08/31/csp…
Если просто, то трансдьюсер — это способ трансформирования данных через композицию.
А это пятая серия «Better Call Saul» youtube.com/watch?v=tt2iU2…
Среда
На wiki.ecmascript.org можно почитать об интересных штуках которые не стали частью ES6 и о возможных изменениях в JS в далеком будущем.
Например чтсла SIMD (single instruction, multiple data) ru.wikipedia.org/wiki/SIMD
На самом деле SIMD перенесли в ES7 и эта спека уже частично реализованна в FF Nightly.
SIMD инструкции обеспечивают параллелизм на уровне данных.
Такая оптимизация даст прирост в производительности например в графике, где данные представлены в виде векторов.
Например: в JS нету векторов, обычно представляют в виде массива или объекта, тогда операции над такими векторами выполняются почленно...
Поэтому [1,2,3] + [1,2,3] выполнится в три процессорных такта, а с SIMD всего в один такт.
Спеку можно почитать здесь github.com/johnmccutchan/…
Наглядный пример оптимизации рендеринга фракталов в asm.js peterjensen.github.io/mandelbrot/js/… только FF Nightly
Кстати, о графике в вебе. Посмотрите на эти примеры физически правильного рендеринга в WebGL blog.sketchfab.com/post/112612737… Очень круто!
Другая интересная спека — Typed Objects wiki.ecmascript.org/doku.php?id=ha… тоже не попала в ES6, но реализована в FF Nightly
Типизированные структуры данных
new StructType({ x: uint32, y: uint32 });.В ночной сборке FF все типы находятся в глобальном объекте TypedObject
Или вот предложенный в ES7 оператор
.= batch assignment для объектов wiki.ecmascript.org/doku.php?id=st…И guards, как в Haskell wiki.ecmascript.org/doku.php?id=st…
Вот еще несколько интересных спек: короткий синтаксис для function expression wiki.ecmascript.org/doku.php?id=st…
Иммутабельные структуры типа объект wiki.ecmascript.org/doku.php?id=st…
И иммутабельные последовательности (массивы, листы) wiki.ecmascript.org/doku.php?id=st…
Параллельно с Atom пробую Light Table lighttable.com Особой популярностью не отличается, но есть крутые штуки.
Например результат выполнения кода, который пишешь, возникает в той же строке. Наблюдение за значением переменных, тоже круто.
Похоже на то, что делает wallabyjs.com с тестами.
Четверг
Перед тем, как заняться фронтендом, делал веб-дизайн. Сейчас вкус к красивым интерфейсам практически пропал. Все свелось к минимализму.
Вы поддерживаете свои дизайнерские способности? Если да, то каким образом?
Джависты недоумевают почему
array === $(array) // falseЭто можно объяснить как неявное приведение типов.
Еще джавистам сложно понять ООП в JS, что уже говорить о React. Поэтому берут Angular.
Fat arrow не единственный новый тип функции в ES6, еще есть tag function: fn
Hello ${name}!. Вызов без скобок, принимает template string.Используется для чтения исходных данных из строки: значения и части строки tc39wiki.calculist.org/es6/template-s…
С ES6 Proxy можно делать method missing, как в Ruby soft.vub.ac.be/~tvcutsem/prox…
Но такую штуку можно сделать и без Proxy, через нестандартный метод
__noSuchMethod__, который вызывается если вызываемого метода нету.А вы стримили в /r/WatchPeopleCode/ ? Или может наблюдали за процессом разработки reddit.com/r/WatchPeopleC…
Можно залипнуть на вечер и узнать что-нибудь новое для себя. Подходы, техники.
React + CoffeeScript habrahabr.ru/post/251835/
Даже простым +1 в комментариях к обсуждению желаемой фичи вы можете повлиять на ее реализацию.
Пятница
Добавил иконку React в плагин file-icons, для подсветки .jsx файлов, в Atom github.com/DanBrooker/fil…
Заодно получил опыт создания иконочного шрифта в Inkscape.
Суперский инструмент для экспорта набора иконок в шрифт icomoon.io/app/
А существует ли логотип закрепленный за картами кода?
Видео со вчерашней ng-conf youtube.com/user/ngconfvid…
И итоги EmberConf 2015 github.com/poteto/emberco…
Добротный туториал об npm модулях на ES6 habrahabr.ru/post/252389/
Библиотека функций высшего порядка для итераторов из ES6 fitzgen.github.io/wu.js/
