Архив недели @smashercosmo
Понедельник
Всем привет из дождливой Финляндии. На этой недели с вами Владислав (@smashercosmo) - разработчик и киноманьяк.
Немного о себе: фронтендом занимаюсь около 10 лет, большую часть времени жил и работал в Питере, некоторое время провел в Азии
Последний год живу и работаю в Финляндии. В плане стека: все, что ныне модно. React, redux, css-modules и т. д.
@jsunderhood @smashercosmo что посмотреть?
Про кино обязательно будет) Каждый в этом твиттере так или иначе свои фетиши проталкивает. twitter.com/roman01la/stat…
Не смотря на то, что полтора года я весь в реакте, до этого два года был погружен в ангуляр.
И в отличие от многих нежно люблю и то, и другое)
Теперь немного о планах на эту неделю: к сожалению, мне не удалось придумать тему на каждый день, так как многое уже обсуждено и обговорено.
Но в целом о разработке будет мало. Будем обсуждать фрустрации и девиации разработчиков, так как у меня кажется есть практически все :)
Это и боязнь публичных выступлений, и патологический перфекционизм, и растерянность от количества информации и технологий... и т. д.
Кстати, эта неделя в @jsunderhood можно сказать мое первое публичное выступление, а также своеобразный акт шоковой терапии)
Но и о разработке тоже, конечно же, будет. Буду говорит про redux, не смотря на то, что кажется, что там уже говорить особо не о чем.
Есть ряд вещей относительно редукса, которые, либо вообще еще не обсуждались в этом твиттере, либо прошли вскользь.
@jsunderhood Например то, что он редакс?
Как-то на работе прижилось) Типа как php - тоже пиэйчпи, но в народе - пэхапэ. twitter.com/webholt/status…
Тем не менее сегодня день лайтовый: знакомство, рассказ о том, чем занимаюсь в данный момент, прием предложений о чем хотелось бы поговорить
Если кому-то интересно, могу рассказать о жизни в Финляндии, хотя @toivonens вроде как довольно полно раскрыла тему в прошлый раз.
@toivonens @jsunderhood а оно есть? я только @VilleImmonen знаю. Ну и @freiksenet еще
Ну как минимум еще @andrestaltz twitter.com/boriscoder/sta…
Я мало что знаю про js комьюнити Финляндии. Есть ежемесячная HelsinkiJS которую курируют ребята из России - Подсечин Олег и Корнеюшкин Антон
Если хотите там выступить пишите им. Не знаю их твиттеров, но вот фейсбуки facebook.com/korenyushkin facebook.com/oleg.podsechin
HelsinkiJS очень камерная и уютная. Докладов обычно не много - от 4 до 6. Но зато халявное пиво :)
Вообще с разработчиками тут все плохо. Не в смысле, что они плохие, а в смысле, что их очень мало.
Поэтому разработчики из России тут нарасхват. У нас например все программисты из России. Питер Челябинск Волгоград. Ещё чувак из Узбекистана
@jsunderhood Да ладно, их очень много на душу населения.
Мой тех. дир. (финн) говорит, что очень сложно и долго искать местных. Те, что есть - уже пристроены. twitter.com/freiksenet_ru/…
У нас до этого было еще двое - из Ганы) Т.е. кроме тех. дира вообще ни одного финна в IT-команде.
@jsunderhood Ну везде хорошие программисты уже с работой.
Ну понятно, что дефицит кадров в отрасли еще долгое время будет актуален. Отличие лишь в степени перевеса спроса. twitter.com/freiksenet_ru/…
@freiksenet_ru @jsunderhood У нас больше 10% точно, штук 6-7 (не считала пока). Мне не нравится, для интеграции очень плохо.
Да, я бы тоже предпочел, чтобы англоговорящих разработчиков было больше. Не обязательно местных. twitter.com/toivonens/stat…
Вообще Хельсинки имхо - один из лучших городов. Здесь комфортно, безопасно, экологично. А хочется треша/угара - 3 часа на поезде до Питера.
Также Финляндия - это один из немногих европейских вариантов переезда для разработчиков без высшего образования :)
@jsunderhood в Хельсинки уныло, я весь город за 2 часа обошёл
Кому что) Я, живя в Питере, вообще не понимал, как можно жить не в Питере и не в центре. Сейчас живу почти в лесу. twitter.com/safinalexey/st…
@jsunderhood @safinalexey человек меняется. Очередная гормональная перестройка где-то в районе 30 лет происходит. 👻
Ну вот она самая у меня и произошла) twitter.com/taujavarob/sta…
Кстати, к нам только что присоединился @olegpodsechin. Давайте, зададим ему вопросы про js-коммьюнити в Финляндии. @toivonens
Пишите вопросы, а мне пока что нужно немного поработать. Следующий выход на связь - часа через два.
Авторы @ceounderhood @jsunderhood @sexsecrethood @cssunderhood, прорекламируйте @catunderhood пожалуйста! Ведь важны все аспекты жизни :-)
Код, секс и котики - наше всё! twitter.com/toivonens/stat…
@webholt @jsunderhood А linux выкак кличете - линакс?
Отличный пример, кстати) twitter.com/VintizerKh/sta…
@VintizerKh @jsunderhood И не нужно быть таким серьёзным) У нас вот babel бабелем зовут. И хочешь ты или нет, но привыкаешь)
Все, круг замкнулся. Человек, начавший тред, завершает тред :) twitter.com/webholt/status…
Друзья-фронтендеры, а подскажите чем можно строить такие графики? news.yandex.ru/quotes/2002.ht… С полосой снизу, изменением масштаба etc
Нужна помощь сообщества. Я никак не помогу - на дух не переношу визуализацию данных :) twitter.com/sergeybelove/s…
@jsunderhood highcharts.com/stock/demo/yax…
Ответ на вопрос из этого твита twitter.com/sergeybelove/s… // cc @sergeybelove twitter.com/Iliasmach/stat…
Пока обеденный перерыв, закрою тему Финляндии. Несколько советов, если вдруг решите сюда перебираться:
Если у вас нет вышки, но рекомендую собрать максимум документов, включая переведенную и нотариально-заверенную трудовую...
а также рекомендации с прошлых мест работы (естественно также на английском языке)
Ваша основная задача - это подтвердить свою квалификацию и опыт. И годится любой документ, который добавляет вам дополнительных очков.
Филиал @abroadunderhood в @jsunderhood в этот понедельник.
Для разогрева) twitter.com/freiksenet_ru/…
Второе, что лично меня удивило по приезду это то что никто мне не сообщил, что помимо налога 25-27% нужно еще платить пенсионный взнос...
а это, в среднем, 200 евро + страховка квартиры + страховка на случай потери работы.
Ну и в-третьих если вы не живете в центре и ленитесь гонять на работу на велике, то будьте готовы также отваливать 100евро за проездной)
Тред (@smashercosmo)
@jsunderhood У меня есть в/о. Но я подавалась на визу, где оно не нужно, поэтому не показывала диплом.
На самом деле оно "не нужно, но желательно". в/о в любом случае играет роль при принятии решения. twitter.com/toivonens/stat…
@jsunderhood про это написано на сайте налоговой, если воспользоваться их калькулятором
Вот что значит полагаться на hr-агентство и не провести полный ресерч самому :) twitter.com/toivonens/stat…
Все, про Финляндию, наверное, закончили. Есть еще вопросы - пишите в личку. Но лучше спрашивайте у @freiksenet_ru и @toivonens.
@jsunderhood @toivonens почему именно Финляндия? Как занесло? Дальше в Европу не?
Именно по причине отсутствия диплома) Сейчас-то я его наконец-то вымучил, поэтому может и свалю куда-нибудь еще. twitter.com/webroru/status…
Рабочий день закончен, поэтому начинаем наш хит-парад фрустраций/девиаций разработчиков. И первым пунктом в этом списке - перфекционизм.
Вначале расскажу о себе: я перфекционизмом страдаю сколько себя помню. Причем проявляется он довольно выборочно.
Например, могу несколько дней просидеть в бардаке, но при этом книжки на полках обязательно должны быть выстроены по высоте)
Однако в отношении кода, эта черта дает о себе знать ощутимей всего: все должно быть откомментировано, оттестировано + жесткий code style.
Мои code review довольно частно вызывают болезненный негатив) Коллеги жалуются, что я очень сильно придираюсь и не даю нормально работать.
@jsunderhood запятая не там, переменную не так обозвал?
Да, все именно так и происходит (( Ничего не могу поделать: сразу вижу такие вещи и не могу пропустить такой PR. twitter.com/hellrider911/s…
Вот да, из последнего: у нас ушел разработчик, который единолично отвечал за код API. Соответственно нам пришлось разбираться что там и как.
Первое что я сделал, это прикрутил туда eslint c airbnb конфигом. Eslint нашел 17000 ошибок. Из них 7000 он пофиксил автоматически.
3000 ошибок я пофиксил с помощью разных codemode-ов, а остальное ручками-ручками :) сидел трое суток примерно.
Во-первых, не мы, а я) Это была исключительно личная инициатива. Во-вторых, в нерабочее время, так как понимаю, что это в общем моя проблема
@operatino @jsunderhood правильно сделали, читабельность же повысили бесплатно
Да действительно. Прежде чем разбираться с чужим legacy-кодом нужно привести его к тому виду, к которому глаз привык twitter.com/andrey_sitnik/…
@jsunderhood Это же можно автоматизировать
К сожалению, не все ( Но то, что можно, у нас автоматизировано, иначе бы я совсем окочурился. twitter.com/toivonens/stat…
@jsunderhood автофиксинг и кодмоды не поломали ничего кстати?
Как ни странно нет) у нас где-то около 500 тестов на API было написано - все прошли. twitter.com/mistadikay/sta…
В общем-то я и не утверждаю, что это все ok) Так или иначе это психическое отклонение. Которое может принести проекту и вред, и благо.
Главный минус всего этого, это конечно сильно увеличивающиеся временные затраты. В целом я на задачу трачу в два раза больше времени.
Главный же плюс: после меня практически не остается технического долга и сильно облегчается передача проекта другим разработчикам.
А теперь расскажите про себя? Кто еще такой же псих, как я и @sapegin и как вы с этим живете?
Мешает вам это по жизни или помогает? Пытаетесь ли как-то с этим бороться или принимаете, как неотъемлемую часть своей личности?
Поэтому мне лучше всего работается с моим полным антиподом. Он отвечает за скорость, я за качество. Хотя порой готовы поубивать друг-друга)
@jsunderhood не на любую часть кода нужно тратить равное количество сил: есть API и публичные компоненты, а есть код на раз.
Перфекционист не мыслит такими категориями) Этот код "на раз" будет потом месяц ему укоризненно сниться. twitter.com/dimaip/status/…
Все так :( Поэтому приходится учиться, как использовать эту особенность личности максимально эффективно. twitter.com/SheVasya/statu…
Все мы больны в той или иной степени. Вон @andrey_sitnik вообще любит женщин связывать :) twitter.com/SheVasya/statu…
@jsunderhood выравниваю вещи по углам/осям/направляющим (хотя это ближе к @cssunderhood )
А я в свое время, когда еще верстал, менял значения отступов на более красивые. Т.е. если в макете 31px - делал 30) twitter.com/NUM13RU/status…
@jsunderhood до сих пор так делаю :\
Приятно осознавать, что ты не единственных псих на этой планете) twitter.com/c01nd01r/statu…
@jsunderhood @dimaip что если у вас есть на решение задачи час, а с перфекционизмом там работы на два часа?
Ну на самом деле, у меня не на столько запущенный случай, что в случае чего, я не смогу наступить себе на горло. twitter.com/alexpipinov/st…
@id2473 @jsunderhood @NUM13RU у нас на проекте действует правило, что все отступы кратны 4, если нет веских технических причин к обратному
Отличное правило! twitter.com/cssunderhood/s…
Да, нездоровый перфекционизм встречается не только у разработчиков, но и у заказчиков) twitter.com/ierhyna/status…
В общем, нет однозначного ответа на вопрос, стоит ли как-то с этим бороться или, наоборот, принять, как часть себя.
Это такая болячка, которая хоть и доставляет определенные неудобства, но без неё ведь это будешь уже не ты, а кто-то другой.
Помните Чендлера, который удалил свой третий сосок, а потом сокрушался, что это был его источник силы?) Вот с перфекционизмом та же тема :)
@jsunderhood @sapegin я привожу к единому стилю только те файлы, которые затрагивает фича — так потихоньку весь проект перепишется.
Да, это самый правильный подход. Если только все остальные члены команды делают то же самое. twitter.com/ilnurkhalilov/…
@jsunderhood @NUM13RU @cssunderhood а мне 31 больше нравится, и как быть? Что красивее 30 или 31?;)
Может это у вас какой-то другой вид отклонения? Антиперфекционизм? :) twitter.com/VitalySalnikov…
Пора потихонечку заканчивать этот насыщенный день, так как вечерний кинопросмотр - это святое)
Сейчас еще отвечу на некоторые вопросы, на которые обещал ответить, посоветую хорошего кина вам в ленту и распрощаюсь до завтра.
@jsunderhood привет. У меня 2 вопроса: 1. С какого уровня скиллов(опыта) переходишь в класс "разработчиков нарасхват", о котором ты упомянул
Ну на самом деле в некоторых конторах и джуниоры нарасхват. Им проще самим тебя обучить, чем брать человека с опытом twitter.com/PMarinchenko/s…
@alexpipinov @jsunderhood залезу на час в твиттере, и вместо перфекционирования буду прокрастенировать :-)
Об этом мы безусловно тоже поговорим на этой неделе) twitter.com/dimaip/status/…
@jsunderhood Второй давний вопрос: сколько по времени займет развитие джуниора фронтенда до нормально профи? Я слышал 1.5 года. Ваше мнение)
Мы никогда не перестаем учится. Я каждый новый год считаю себя прошлогоднего джуниором. twitter.com/PMarinchenko/s…
@jsunderhood Я в каждый момент времени себя текущего считаю джуниором.
Да, точно, скорее так) И это, кстати, тоже одна из фрустраций, о которой мы поговорим на этой неделе. twitter.com/webholt/status…
На этой неделе, в конце каждого дня буду советовать вам два фильма, релевантные теме обсуждения.
Один из них будет более-менее известным, другой - из тех, что вы вряд ли когда-либо посмотрите :)
Итак, первый фильм на тему перфекционизма, который вы все уже, наверняка, посмотрели (а если нет, то пора бы) это kinopoisk.ru/film/725190/
Он конечно страшно манипулятивный, и дергает за очевидные ниточки, но пока смотришь, хочешь, чтобы это никогда не заканчивалось)
Второй фильм это представитель испанской новой волны, которая началась в Испании после смерти Франко kinopoisk.ru/film/16985/.
Кино, конечно, не самое простое для восприятия. Но также по-своему раскрывает тему нездорового перфекционизма.
Перед просмотром почитайте немного про "мовиду мадриленью" - так называется это временной период культурной революции в Испании.
вот кстати +100500 twitter.com/_sashashakun/s…
На этом на сегодня все. Завтра будет более технический день и много, оооочень много редакса/редукса )
Главный мой челендж на завтра - это как посоветовать два фильма на тему редакса O_o
@jsunderhood Один популярный, другой, который многие не захотят смотреть? Зелёный слоник и 2g1c.
Зеленый слоник - великое кино!) А воспоминания о втором сейчас вот вспыли как... ну вот как оно самое. НУ ЗАЧЕМ???? twitter.com/webholt/status…
Вторник
. @jsunderhood У меня на проекте прекомит хук, который проверяет файлы комита линтерами
Да, у нас тоже. Но это не панацея. Есть вещи, которые не проверить линтерами. twitter.com/Akurganow/stat…
Huomenta, дамы и господа) Сегодня много говорим про redux, поэтому для начала опрос про ваши с ним отношения
🤔
22.1% Вовсю использую в работе🤔
30.8% Поигрался немного🤔
28.6% Redux - это вообще что?🤔
18.5% Заколебал ваш редуксДля тех, кто вообще не в теме - задание: пока я еду на работу, посмотрите Данины курсы egghead.io/courses/gettin… egghead.io/courses/buildi…
Итак, надеюсь, курс все успели пройти. Так что начинаем. И первое, о чем хотелось бы поговорить, это взаимоотношения экшенов и редьюсеров.
Есть два разных подхода: один канонический, пропагандируемый @dan_abramov: отношение между экшенами и редюсерами - many-to-many.
Т.е. редюсер может обрабатывать много различных экшенов, даже если логически эти экшены в большей степени отвечают за другую часть стейта
Приведу пример: у нас при логине вместе с данными юзера (email, token..) так же приходит список сохраненных поисковых запросов этого юзера.
Это поисковые запросы должны хранится в отдельном куске стейта - queries, а данные юзера соответственно - в user или auth.
При каноническом подходе, мы диспатчим один экшен USER_LOGIN_SUCCESS, который обрабатывается редьюсерами user и queries.
@jsunderhood экшены не отвечают за часть стейта, а сообщают, что же произошло. Как на это реагировать - не их дело.
Естественно, но так или иначе они привязаны к определенным частям бизнес-логики приложения twitter.com/Bardty/status/…
Тем не менее, нам этот подход оказался не удобен. Потому что мы хотим понимать, что конкретно происходит в приложении.
Т.е. мы хотим видеть в логах, что не только юзер залогинился, но и произошло еще много сопутствующих действий.
Поэтому мы диспатчим экшены группами и каждый экшен обрабатывается своим редьюсером.
Для группового диспатча мы используем пакет github.com/tshelburne/red…. Можно диспатчить и по одному, но это вызывает ненужные перерисовки.
У нас переопределен dispatch, поэтому мы можем делать так:
const actions = [action1, action2, action3];
dispatch(...actions);
По началу была проблема с логированием. redux-logger показывал вот такое
payload из массива с тремя элементами это как раз та самая группа из трех экшенов, которые мы хотим продиспатчить.
Но со временем github.com/evgenyrodionov… стал очень гибким. Поэтому там в доках внизу рецепт от меня, как подружить его с redux-batch-actions.
После этих нехитрых манипуляций лог выглядит следующим образом
Как видите, сразу понятно, что вообще происходит, в отличие от подхода с одним экшеном, когда большая часть логики остается за кадром.
Расскажите теперь о себе? Какие у ваших редюсеров и экшенов отношения? Хочется втянуть в дискуссию @dan_abramov
Я пока ненадолго отвалю - нужно немного поработать)
Еще немного по поводу группового диспатча: альтернативный способ избавится от лишних перерисовок это github.com/tappleby/redux…
Идея проста: мы оборачиваем подписку на стор в debounce: подписчики будут оповещены только один раз для нескольких экшенов, вызваных подряд.
@jsunderhood а мне казалось, что connect из react-redux сам по себе достаточно умный и оптимизированный
Нет, connect подписывает компонент на стор. На каждое изменение стора будет вызван connect. twitter.com/boriscoder/sta…
Какой способ лучше не понятно: дебаунсить подписку или диспатчить группу. Нам нравится второй, потому что появляется доп. логика в логах.
github.com/reactjs/redux/… вот длинная дискуссия в redux репозитории по поводу нативной имплементации группового диспатча.
@jsunderhood а вот этот код тогда что делает? github.com/reactjs/react-…
ммм... проверяет изменились ли пропсы. это никак не связано с тем, о чем я говорю. сейчас объясню подробней. twitter.com/boriscoder/sta…
Еще раз: представьте, что у вас 10 компонентов обернутых в connect. И вы диспатчите 10 экшенов подряд. connect будет вызван 100 раз.
Потому что каждый connect для каждого экшена должен проверить изменились ли пропсы и нужно ли перерендрить дочерний компонент.
Ok, приведу самый простой пример. у вас есть такой connect:
connect({prop1, prop2, prop3} => ({prop1, prop2, prop3}))(Component)
И есть три экшена: первый меняет prop1, второй - prop2, третий - prop3
Если вызвать эти экшены друг за другом, то компонент будет перерендрен 3 раз, а если задиспатчить группой, то только один раз.
@jsunderhood мы обернули подписки в requestAnimationFrame
Да, это отличное решение. Но нам группировка больше нравится с визуальной точки зрения. twitter.com/mr_mig_by/stat…
@jsunderhood а разве setState не асинхронный? Значит, он забатчит несколько вызовов подряд, а потом обновит DOM
setState асинхронный и обновление дома батчится это правда. но ведь куча другой работы перед этим проделывается. twitter.com/boriscoder/sta…
@jsunderhood расскажи мне плиз, вы пробовали делать nested connectors? Когда в иерархии не только родитель подписывается на стор?
Да, у нас очень разветвленное дерево коннектов. В том числе в списках (один айтем - один коннект). twitter.com/mr_mig_by/stat…
@jsunderhood в общем, хочу увидеть пруф, что эти обертки вокруг subscribe реально помогают. Сейчас в это верится с трудом
Помогают точно, вопрос в том насколько велика эта разница в перфомансе. Может сделаешь бенчмарк? twitter.com/boriscoder/sta…
@jsunderhood как вы боролись с тем, что чайлд видит старые данные из стора? Т.е. порядок подписок не гарантируется?
Ни разу с таким не сталкивались, как ни странно. Есть пример, демонстрирующий проблему? twitter.com/mr_mig_by/stat…
@jsunderhood пожалуйста: requirebin.com/?gist=01de742a… Я только не придумал как измерять скорость, кроме субъективного "не лагает"
ммм... а зачем измерять время, которое ушло на диспатч 10-ти экшенов? Тут что-то другое мерять нужно. twitter.com/boriscoder/sta…
@jsunderhood да, к примеру так. Такой сценарий: родитель передает чайлду параметр, по которому чайлд делает "запрос" в стор
Но ведь они потом все равно синхронизируются, когда выполняется лисенер родителя. twitter.com/mr_mig_by/stat…
@jsunderhood в том-то и дело, что нет :\
но ведь новое значение передается в ownProps ребенка, что должно спровоцировать у него новый вызов коннекта, не? twitter.com/mr_mig_by/stat…
@jsunderhood редюсеры максимально примитивные, разве что не используем богомерзкие символы, все же охота сериализовать экшоны
О_о сериализовывать экшены это как? twitter.com/Alex509/status…
@jsunderhood перехватываем на уровне стора батчи, напускаем на них существующий редюсер, возвращаем стейт. Весь батчинг в 3 строчки
Да, redux-batch-actions так и работает twitter.com/Alex509/status…
@jsunderhood например пихать их куда-нибудь на сервер в виде безопасного JSON.
ммм... экшены? может все-таки стейт? twitter.com/Alex509/status…
@jsunderhood Не, стейт хранить это харам. Храним только экшоны (например как в дев-тулс сделано), с временным оффсетом. time travel
Я не понимаю ((( зачем где-то хранить экшены? Типа как лог? twitter.com/Alex509/status…
Рабочий день закончен и я снова с вами. День был не простой, поэтому во второй половине дня был не очень активен. Сейчас реабилитируюсь.
Продолжаем говорить про redux. Хочу обсудить еще один паттерн, который мы активно используем в редаксе - это dependency injection.
Да, да, тот самый dependency injection, который ввел в моду angular. Правда с меньшей долей магии, но с не меньшей пользой для дела.
dependency injection используют action creators, когда им нужно получить доступ к каким-то дополнительным функциям/объектам.
Например, после логина пользователя нужно отправить запрос к google analytics. объект analytics внедряется в AC и там уже используется.
@jsunderhood Во фронтэнде. Потому что вдруг узнали, что так вообще можно. Для прочих ничего нового не появилось)
Это да) Паттерн безусловно не нов. twitter.com/webholt/status…
Теперь объясню, как все это работает и, главное, зачем это нужно.
Если вы используете redux-thunk, то, помимо возможности диспатчить ассинхронные экшены, вы нахаляву получаете механизм для DI.
@jsunderhood без примера кода не очень понятно. Это про redux-thunk?
Сейчас все будет) twitter.com/boriscoder/sta…
С недавнего времени redux-thunk позволяет передать в action creator дополнительный аргумент, помимо dispatch и getState.
Используется это следующим образом: gist.github.com/smashercosmo/7…
Если нужно передать несколько зависимостей, но всегда можно использовать объект gist.github.com/smashercosmo/f…
Эти доп. объекты будут доступны в любом AC. Если какому-то AC это не нужно, то аргумент (или отдельные свойства) просто опускаются.
Зачем это нужно? Ведь можно просто сделать require('./api'), require('./analytics') и точно также использовать внутри AC.
Да, можно. До тех пор пока не встанет вопрос о тестировании ваших action creators.
Понятно, что в тестах вы не хотите делать запросы к реальному API или как-то дергать google analytics и другие сервисы.
c dependency injection все становится очень просто gist.github.com/smashercosmo/6…
@jsunderhood круто, когда мы начинали проект, redux-thunk этого еще не умел, пришлось написать свою миддлвару из 6 строк кода.
Мы, на самом деле тоже не используем для этого redux-thunk. Чуть позже объясню почему. twitter.com/forshtreter/st…
Если вы не практикуете такой подход, то для переопределения зависимостей в тестах придется использовать например github.com/jhnns/rewire
Сорри, отвлекся. Продолжаем. Первая проблема, которая возникает такой реализации DI - это динамические зависимости.
Т.е. зависимости, которые на момент инициализации стора еще сами не загружены и не проинициализированы. Например, те же google analytics.
В этом случае самым простым решением будет передать в DI функцию gist.github.com/smashercosmo/2…
Но, согласитесь, выглядит это не очень красиво и требует дополнительных знаний о типе зависимости.
Поэтому лучше написать свой кастомный middleware, который будет сам все это разруливать gist.github.com/smashercosmo/d…
Изначально, этот подход был реализован в github.com/este/este, но потом они почему-то это выпилили ((
@jsunderhood так и с require все можно тестировать с rewrite и sinon
Что такое rewrite? Может rewire? twitter.com/operatino/stat…
@jsunderhood да rewire, и никакие Dep injection кроме require не нужны
Это да. Но как только в дело вступает babel, начинаются проблемы github.com/speedskater/ba… twitter.com/operatino/stat…
К тому же подход DI он какой-то более straightforward и с меньшим количеством магии. Просто передаешь в функцию все, что тебе нужно.
Но вообще, конечно, оба подхода имеют право на жизнь. Каждый выбирает то, с чем ему комфортней иметь дело.
Ладно, я начинаю потихонечку с вами прощаться. Поэтому сейчас, как и было обещано, будет список фильмов про redux :)
redux нас учит, что мутировать стейт - это плохо, поэтому и фильмы будут про то, что от мутаций в общем-то одни проблемы)
@jsunderhood муха и муха 2?
да, очень хотел включить в список, как минимум первую часть) но потом все же решил, что это как-то слишком очевидно. twitter.com/deerua/status/…
Тема благодатная, поэтому вместо обещаных двух, будет четыре)
@jsunderhood «Человеческая многоножка» идеально подходит для представления редьюсеров.
Аххахахххах) Но мне кажется это скорее больше про Elm и Cerebral. twitter.com/roman01la/stat…
Итак первая в нашем хит-параде: роковая Наташа Хенстридж в мужененавистнической "Особи" kinopoisk.ru/film/4769/
Под номером два шедевр от Гильермо дель Торро, когда он ещё не скатился во всякую попсню) kinopoisk.ru/film/4923/
Оба фильма сняты в 90-ые - золотые годы фантастики. И сделаны на порядок более захватывающе и изобретательней, чем все современные поделки.
Тепер то, что наверняка прошло мимо ваших радаров.
kinopoisk.ru/film/817556/ - романтический инди-ужастик. Не совсем про мутантов, но мутации присутствуют)
И завершении - Тод Браунинг со своей в большей степени грустной, нежели страшной историей kinopoisk.ru/film/8430/
На этом прощаюсь. Завтра опять будем говорить за жизнь. Тема: прокрастинация и информационная наркомания)
Кстати, воспользуюсь положением и попрошу помощи сообщества: посоветуйте, как лучше всего искать утечки памяти в ноде?
А то у нас после последней выливки за сутки потребление памяти вырастает до 30gb. И вообще не врубаемся в чем дело (
Среда
Давайте потихоньку начинать, хотя день сегодня чрезвычайно напряженный. Поэтому основная активность будет ближе к вечеру.
Сегодня говорим о прокрастинации и информационной наркомании. Специально объединил, так как для меня первое - это прямое следствие второго.
Один из моих главных психозов - это боязнь пропустить что-нибудь важное, нужное, интересное: статью, доклад, твит, гифку и т. д.
Мне кажется, что если я что-то не прочитаю или не посмотрю, то больше никогда в жизни эта упущенная информация до меня не дойдет)
Поэтому я непрерывно мониторю и твиттер, и rss и даже ленту на гитхабе) И на это всё, конечно, уходит чудовищное количество времени.
@jsunderhood Да ну, ссылки много раз повторяются. Иногда так с энного раза открываешь то, что игнорировал раньше, и даже интересно.
Я тоже это себе повторяю. А потом думаю, а вдруг какая-то одна (самая важная!) ссылка больше нигде не всплывет?) twitter.com/ruGreLI/status…
@jsunderhood я использую OneNote. Там вся жизнь ) если надо, я могу снова стать профи в Java, потому что там все сохранено (багфиксы и тд)
Проблема не в том, что хранить негде, а в том, что пропустить страшно) twitter.com/PMarinchenko/s…
Учитывая как быстро развивается та среда, где мы все работаем, кажется что если не мониторить все это непрерывно - будешь все время в хвосте
Тренды, подходы, методологии, новые фреймворки, новые библиотеки, новые возможности браузеров... и хочется быть в курсе всего-всего-всего.
Никого не хочу обидеть, но все андерхуды безусловно вносят свою лепту в этот информационный марафон))
@jsunderhood у меня все просто. Есть браузер для соц сетей, браузер для деловой переписки и чатов, и браузер для верстки и тестирования:)
А что мешает в браузере для верстки открыть вкладку твиттера? twitter.com/PMarinchenko/s…
Хочу также уточнить, что я прекрасно понимаю, что это очередное психическое отклонение, впрочем довольно распространенное.
Поэтому логические доводы вроде "ссылка ещё всплывет" или "ничего по-настоящему нового и не придумали" в данном случае не очень работают.
Кстати да) В моем случае действительно побеждает перфекционизм. Я забываю обо всем, кроме того, что хочу сделать красоту из этой страхоты.
Поэтому меня, конечно, восхищают и пугают такие люди, как sokra)
Sokra несколько лет каждый день в одиночку сидит и фигачит свой webpack с невероятной продуктивностью. Почему? Он не в твиттере :)
O_o почему сексистские??? Мы ж сегодня вроде про прокрастинацию и информационную наркоманию. twitter.com/chorna_kiwka/s…
я имел в виду, что информационная наркомания это как раз одна из причин прокрастинации: сидишь и колешь себе дозу за дозой, твит за твитом)
Мысль о том, чтобы устроить себе цифровой шаббат, как в свое время @andrey_sitnik сделал, вызывает у меня глубочайший неподдельный ужас.
@jsunderhood даже если себя как следует занять чем-то?
- Мысль о том, чтобы не колоться вызывает у меня ужас
- Даже если себя как следует занять чем-то? twitter.com/Sigiller/statu…
@jsunderhood ого, я то думал это просто метафора)
Нет) я действительно себя очень некомфортно чувствую, если на какое-то время оказываюсь вне информационного потока. twitter.com/Sigiller/statu…
Не попахивает, а откровенно смердит) twitter.com/Bizi/status/74…
Но опять же, как и в случае с перфекционизмом, кажется, что, во-первых, у подобного отклонения есть свои плюсы: прежде всего знания конечно
А во-вторых, опять же думаешь, что вот убери эту твою особенность, излечись, стань от всего этого независим и будет уже другой человек
Но совершенно не понятно, понравится ли тебе этот другой? Больше ли ты приобретешь от такого изменения, чем потеряешь?
у Оливера Сакса в его самой известной книге есть история о человеке, который стал лечится от синдрома Туррета
в итоге после медикаментозной терапии у него в значительной степени (возможно даже полностью) уменьшились частота и сила приступов
Тем не менее он с грустью признал, что после всего этого стал видеть мир и чувствовать его совершенно по-другому. Менее ярко и эмоционально.
Специально для @catunderhood :) twitter.com/programulya/st…
Так, в конце дня хотелось бы как раз поговорить о всяких техниках, которые помогают бороться с прокрастинацией и информационной зависимостью
Ответ на вопрос, какими пользуюсь лично я, очень простой: никакими.
Более того, все GTD приемы, статьи, советы, наоборот, вызывают у меня какую-то иррациональную неприязнь.
А когда в очередной статье я вижу, что-то вроде "возьмите лист бумаги и разделите его на 4 части" у меня начинается аллергическая реакция.
Я пробовал заводить календари, всякие туду-листы, перепробовал кучу приложений - со мной почему-то ничего не работает.
Единственное, что дало хотя бы какой-то эффект - это pomodoro. Хотя и его не надолго хватило.
Расскажи поподробней, что такое и в чем фишка? twitter.com/lomegg/status/…
@jsunderhood а дедлайны получается соблюдать?
Да, но в жертву идет личное время ( twitter.com/Sensovita/stat…
Не, такое точно не сработает. Pomodoro выстрелил именно за счет своей просты. twitter.com/MrTheYann/stat…
*простоты)
@jsunderhood кстати, помогает режим дня +GTD (в Evernote). Вас коробит, а у меня бзик на системы, всегда их делаю pic.twitter.com/N8PVfbZpjd
Это круто. Но я так никогда не смогу) twitter.com/PMarinchenko/s…
Четверг
Так, пора бы уже отходить ко сну. Силы остались только на то, чтобы согласно традиции этой недели, отправить вам пару фильмов в ленту.
Сегодня говорили о прокрастинации, поэтому первое кино про главного прокрастинатора всех времен и народов kinopoisk.ru/film/555/ ))
Так же обсуждали информационную зависимость. Конкретно про нее фильмов не снимают, к сожалению, ну или они еще не попали в мою фильмотеку.
Поэтому будет кино про зависимость другую, но не менее неприятную kinopoisk.ru/film/21254/
@jsunderhood техника проста. Автоматическое создание списка урлов на основе сканирование своих подписок. Автоматом разбивка его по тегам.
Хочу ретвитнуть весь этот тред. Это действительно очень здравая мысль. Может выйти хороший pet project. twitter.com/taujavarob/sta…
Всем привет. Сегодня начинаем поздно, так как уволился API разработчик и двум несчастным фронтам нужно срочно постигать тонкости rethinkdb)
Кстати (пользуюсь служебным положением): нам в Финляндию нужен API разработчик: nodejs 6, rethinkdb, solr. Пишите, если интересно.
Сегодня у нас технический день. Продолжаем говорить про redux и его друзей.
И первое тема на сегодня это - собственно работа со стейтом приложения: от его организации до способов манипуляции.
У меня например совершенно перевернулся мир когда у Дэна в уроке увидел, что можно combineReducers использовать не только для root-редьюсера
Казалось бы невероятно очевидная вещь, но которая почему-то за пол года использования redux никому не пришла в голову :)
Вон он тот самый урок egghead.io/lessons/javasc… - после его просмотра наша работа со стейтом упростилась в два раза.
На всякий случай объясню в чем суть: очевидно, что чем более стейт плоский, тем легче с ним работать, т.е. желательно убрать всю вложенность
Т.е. изменить единицу на двойку гораздо проще в структуре вида {a: 1}, чем в структуре вида {a: {b: {c: [{d: 1}]}}}
@jsunderhood теряется логичность (обычно данные имеют иерархичную природу) и нужно придумывать нелепые имена ключам
В redux нам не нужно придумывать имена ключам. Нам достаточно держать плоскими лишь части стейта. Сейчас объясню. twitter.com/raxpost/status…
За каждую часть нашего стейта отвечает определенный редьюсер. Т.е. стейт должен быть плоским на уровне приложения, а на уровне редьюсера.
Вот пример стейта не плоского - gist.github.com/anonymous/0496… каждый редьюсер вынужден работать с вложенной структурой.
gist.github.com/anonymous/7c8f… - вот пример стейта плоского. на уровне приложения структура та же. Но каждый редьюсер работает с простым объектом.
@jsunderhood посмотрите на ECS паттерн, пораскиньте мозгами, и поймёте, на сколько это всё круто и удобно :)
Первый раз вижу подобную аббревиатуру) Расскажешь поподробней что такое с чем едят? twitter.com/mr_mig_by/stat…
*не на уровне приложения
Второй инструмент, который помогает уплощать стейт это небезызвестный (хотя может кому-то и неизвестный) github.com/paularmstrong/…
@jsunderhood Entity-Component-System: en.wikipedia.org/wiki/Entity_co… Всю свою карьеру на это смотрю и облизываюсь.
А можно простыми словами для людей без master degree in computer science?) twitter.com/mr_mig_by/stat…
@jsunderhood там все просто, если знать нужные слова :) Что такое Data driven design знаете?
Это что-то все из области гейм-дева, коим я никогда не занимался (( twitter.com/mr_mig_by/stat…
Так вот, про normalizr - библиотека для выстраивания вложенных сущностей на одном уровне. Связь между сущностями сохраняется по id.
Мы сами пока что в проект не внедрили (хотя ручки чешутся) - ждем, когда смерджат мой PR позволяющий добавлять сущностям дефолтные значения.
Если есть какие-то вопросы про работу со стейтом или сами хотите чем-то поделиться - пишите, я ненадолго вернусь к работе.
@jsunderhood поведение каждого "объекта" собирается из данных (!), и потом каждый аспект обрабатывается отдельной функцией
все равно ничего не понятно. можно какой-то хотя бы примерный пруф оф концепт. пусть даже на jQuery. twitter.com/mr_mig_by/stat…
Продолжаем говорить про стейт. Ещё один плюс плоского стейта в том, что в общем-то отпадает надобность в библиотеках для иммутабельности.
Можно спокойно использовать plain js structures, потому что манипуляции производятся над отдельными ветками стейта. Остальные неизменны.
Мы долгое время использовали ImmutableJS, потом отказались от него в пользу seamless-immutable, теперь думаем вообще вернуться к plain js.
Структурирование стейта через композицию редьюсеров - это в некотором смысле тот же structure sharing, что и в ImmutableJS.
Если после выполнения какого-то редьюсера, его стейт не изменился, то он вернет просто текующее состояние своей ветки в дереве стейта.
@jsunderhood А вот это очень интересно. Самого Иммутабл порядком утомил.
Да Immutable порядком утомляет. В особенности, когда возникает необходимость интеграции c third-party виджетами. twitter.com/sapegin/status…
Тут либо нужно использовать Record структуры (со своими ограничениями), либо использовать reselect.
Типичная дрочка на архитектуру и неважные аспекты реализации. Всё от безделия и отсутствия реальных проблем. twitter.com/jsunderhood/st…
@jsunderhood А чем Реселект тут поможет?
На уровне коннекта данные трансформируются в plain js c помощью селекторов. А редьюсерах да - set, get, mergeIn итд twitter.com/sapegin/status…
@jsunderhood Хм. А разве тру-вей — это не Иммутабл до самого конца?
Ну, смысла в иммутабельности во вьюхе особо нет, как мне кажется twitter.com/sapegin/status…
Всем привет из дождливой Финляндии. На этой недели с вами Владислав (@smashercosmo) - разработчик и киноманьяк.
Все твиты, ссылки и кино-рекоммендации за неделю можно будет найти здесь - jsunderhood.ru/smashercosmo twitter.com/jsunderhood/st…
Пятница
Всем привет. Сегодня еще часик-два продолжаем вчерашнюю тему, а потом вновь открываем наш центр психологической помощи разработчикам)
Вчера говорили о плоском стейте, о том что правильная его организация в общем-то избавляет от необходимости использования immutable-структур
Вот вам еще две дискуссии о том, использовать или не использовать Immutable: github.com/este/este/issu…, github.com/mxstbr/react-b…
Кстати, эти дискуссии идут в репах лучших на данный момент react/redux бойлерплейтах.
What I'm seeing is Boilerplate Fatigue. People taking other people's setups as gospel. Don't start your project with a boilerplate.
Сейчас расскажу о них поподробней, но при этом помните, что: twitter.com/dan_abramov/st…
Сперва este (кстати сам автор произносит это название, как "эште") - она (мне кажется, что это именно она :)) совершенно прекрасна.
Там есть все: полная изоморфность и универсальность (включая react-native), интернационализация, бессерверная разработка и много чего ещё.
Я настояетельно рекомендую почитать в este историю комитов за последний год: очень здорово видна эволюция подходов, идей в react/redux стеке
Да, наверное. По изоморфностью я имел в виду browser + server, под универсальностью - browser + native. twitter.com/twenty/status/…
react-boilerplate - более молодой и более (прости господи) хипстерский проект :)
Там всякие модные штуки вроде сервис-воркеров, прогрессивных веб-приложений + генераторы кода, webpack2, ngrok-тунель, асинхронные роуты итд
Тем не менее в react-boilerplate пока что отсутствует SSR, интернационализация, а react-native и подавно (хотя рано или поздно все запилят)
Но главное (принципиальное!) отличие между este и react-boilerplate - в способе организации кода приложения на уровне файлов.
Este четко разделяет бизнесс-логику и view-layer, react-boilerplate, наоборот, компонует react-контейнеры вместе с redux-специфичным кодом.
Первый подход мне импонирует в большей степени, потому что связь между контейнером и ветками стейта - один ко многим, а не один к одному.
Теперь расскажите о себе, какая у вас обычно стартовая точка в новом проекте? Самописная, сторонняя или вообще всегда с нуля все начинаете?
@jsunderhood кстати. Новая статья. 👻 twitter.com/javascriptdail…
Да сколько ж можно уже?) Библиотеке год, а они всё интродукции пишут. twitter.com/taujavarob/sta…
@jsunderhood наш человек писал. 👻
whatever) пусть бы написал статью: "Redux advanced technics") Статей, курсов и уроков для новичков выше крыши. twitter.com/taujavarob/sta…
Ну что мы все про redux, да про redux. Давайте опять покопаемся во фрустрированных мозгах разработчиков.
Тема: боязнь публичных выступлений и депресняк от того что "все вокруг такие умные, знают страшные аббревиатуры, а ты фигачишь сайт-визитку"
Традиционно начну с себя: я очень боюсь выступать публично. Вплоть до того, что от волнения у меня начинается предобморочное состояние :)
Даже пока я веду @jsunderhood эту неделю каждый день у меня начинается с мысли что"вот сегодня-то точно что-то пойдет не так и выйдет лажа")
Мне, как перфекционисту, кажется, что я должен идеально знать тему, по которой я делаю выступление. Ибо иначе первый же вопрос - и провал :)
Ну чего, есть тут еще кто-то, кто ооочень хочет выступать, но страшно боится?) Может устроить отдельный митап специально для таких как мы?
@jsunderhood я раньше боялась вопросов на публичных выступлениях, со временем стеснение и паника прошли
Так а были случаи, когда вопрос из зала реально ставил в тупик? Как выходила из ситуации? twitter.com/SatiataOff/sta…
@jsunderhood пару месяцев назад Дан Абрамов писал что у него был панический приступ перед выступлением. - скверная штука. Имхо.
Я вообще специалист по паническим атакам) twitter.com/taujavarob/sta…
Еще хотел поговорить о том, что (не знаю, как у других), но мне порой бывает страшно подступиться к чему-то кажущемуся невероятно сложным
К чему-то, что со стороны представляется какой-то запредельной магией, а люди, этим овладевшие, кажутся чародеями 50-го уровня.
Например, я когда слушаю доклады @gritzko, мне кажется, что человек вещает из какой-то далекой галактики, куда мне никогда не долететь :)
Именно поэтому, мой любимый тип статей, это статьи из серии "How to make your own...", которые разрушают магию и объясняют в чем фокус.
Например, тот же React. Мне кажется до сих пор для многих словосочетание "виртуальный дом" представляется каким-то мощным заклинанием.
Но прочитываешь вот такую статью например medium.com/@deathmood/how… и такой типа "ээ, и все что ли? так просто что ли? а где волшебство блин?"
@jsunderhood я вот до сих пор не использую это все, потому что страшно! Особенно после знакомства с монстром ангуляра
Для укрощения монстра ангуляра есть вот такое - teropa.info/build-your-own…. И сразу понимаешь всю механику фреймворка. twitter.com/antonplankton/…
Поэтому, пользуясь тем, что мне на неделю вручен столь громогласный рупор, хотелось бы реквестировать у сообщества следующие статьи:
у @gritzko: "How to write your own swarm.js"
у @andrey_sitnik: "How to write your own PostCSS"
у @RReverser: "How to write your own Babel"
Так, продолжайте список, что я еще забыл?
Нам нужно больше статей и докладов не о том, как пользоваться какой-то технологией, а о том, как она работает изнутри.
@AnroyPaul @jsunderhood да. Там всего ничего - 600 страниц поди текста. Как раз для начала. 👻
И вот еще классическая серия статей от @alex_young dailyjs.com/2010/12/02/fra… было очень актуально и полезно во времена jQuery-активности
В этой серии по сути с нуля пишется jQuery-подобная библиотека. В те времена это стало настоящим откровением.
Ой, да, кстати (не знаю правда, кто у нас главный спец), напишите кто-нибудь статью: "How to write your own RxJS"
Суббота
Вот тоже из серии "How to write your own..." github.com/thejameskyle/t… - простой копилятор с супер-подробным описанием и коментариями
@jsunderhood свой первый SPA в 2009 писал полностью на virtual Dom. Это же классика Javascript.
ммм... хм... какое-то весьма сомнительное утверждение twitter.com/MaxMykhailenko…
И в догонку еще одна "how to write your own.."-подобная штука: github.com/iamdustan/tiny… - простой рендерер для реакта (пошагово, с коментами)
Перед сном отправлю всякого странного кина вам в ленту)
Сегодня в том числе говорили о страхе публичных выступлений и фильмов на эту тему много, но что-то все не то, что хочется советовать)
Поэтому будут два совершенно сумасшедших фильма про теле-шоу (ну а чо, теле-шоу вполне себе выступления и вполне себе публичные :)
Под номером один - дикий треш от "Странного Эла" Янковича - kinopoisk.ru/film/7402/
Первая половина фильма - концентрат очень плохого юмора, зато потом градус безумия вырастает просто до необозримых высот и начинается ржака)
Второе кино еще более странное и не менее безумное - kinopoisk.ru/film/745818/ - чувство перманентной неловкости при просмотре вам обеспечено
Воскресенье
Моя смена в этом твиттере потихоньку подходит к концу и, вроде как, все что хотел, я с вами обсудил и всем, что меня волновало, поделился.
Если вдруг я забыл упомянуть какие-то фобии и психозы разработчиков - смело пишите мне об этом. Успеем за оставшиеся шесть часов обсудить)
У меня вот есть еще, например, такая тема: ужасно люблю обновлять пакеты) Прям физическое удовольствие от этого испытываю.
И если какая-то зависимость в проекте не обновлена до последней версии - то сразу как-то тревожно и неспокойно на душе :)
Кстати, по поводу обновления пакетов, кто-нибудь в проекте использует npm shrinkwrap. Если нет - расскажите почему?
Так никто и не ответил, пользуется ли кто-то в проекте шринкврапом? Мы стали пользовать после того, как свежий npm install все нафиг поломал
@jsunderhood очень глючная эта тема, не столь обязаловка, сколько необходимость. Хотя мне помогает просто снять ^ в package.json
А в чем именно глюки? twitter.com/me_mrsum/statu…
"Хотя мне помогает просто снять ^ в package.json" - у нас так и было и все равно все накрылось после npm install @me_mrsum
Ну что же, буду потихонечку с вами прощаться и подводить итоги этой недели.
На этой неделе мы много говорили про redux, а также обсуждали наши маленькие ненормальности и профессиональные психические недуги)
В качестве резюме хотел бы сказать следующее: любите свои болячки, заключите с ними перемирие и увидите: они могут стать вам полезными.
Подобно Халку, мы должны пытаться обратить наши закидоны и сдвиги себе во благо и миру на пользу.
И, так же как и Халка, у нас естественно не всегда будет это получаться :)
Так же спасибо всем, кто придумал и поддерживает проект @jsunderhood. Это правда был крутой экспириенс, хотя и сложный и весьма стрессовый.
Мой твиттер - @smashercosmo. О разработке практически не пишу, но если хотите периодически получать необычного кина себе в ленту - welcome.
Ну и в качестве прощального твита поделюсь с вами самым лучшим на свете фильмом о девиациях kinopoisk.ru/film/746480/. На этом всё. Пока-пока)
