Роман Дворнов

Роман Дворнов

Темы
Неделя
Dec 14, 2015 → Dec 20, 2015

Архив недели @rdvornov

Понедельник


Всем привет! На этой неделе с вами буду я, Роман Дворнов @rdvornov Работаю в Avito, основной интерес – SPA и смежные задачи

Еще о себе: исследователь, изобретатель велосипедов, евангелист веб-стандартов, идейный вдохновитель, критик, докладчик.

Спектр тем для обсуждения достаточно широкий. Плана пока нет :) Сегодня пообщаемся в свободной форме, буду рад ответить на ваши вопросы

@jsunderhood что критикуешь?
Все что считаю неправильным :) Сюда же относится плохой дизайн, ненадежные или нерасширяемые решения etc twitter.com/mr_mig_by/stat…

@jsunderhood зачем веб-стандарты?
Стандарты (спецификации) нужно читать и знать. От незнания появляются плохие решения и продукты twitter.com/mr_mig_by/stat…

@jsunderhood как смотришь на бесконечные js транспилеры (coffee, pure, clojure etc)
А мы покупаем или продаем? Если писать самому - хорошее упражнение. В инфраструктуре - лишнее звено. twitter.com/raxpost/status…

@jsunderhood как смотришь на бесконечные js транспилеры (coffee, pure, clojure etc)
В случае с ES6, траспилер обоснованное усложнение. Но, например, в случае с coffeescript - нет. twitter.com/raxpost/status…

Речь была про не знание возможностей и принципов работы. Из-за делаются более сложные решения, чем могли бы быть... twitter.com/Zeipt/status/6…

@jsunderhood покажь велосипеды
Ну, например, github.com/basisjs/yatra или "всем известный" github.com/basisjs/basisjs :) twitter.com/mr_mig_by/stat…

@jsunderhood какие интересные задачи есть в Авито?
Их много. Одна из самых интересных т.н. Messenger - web sockets, real-time все дела. Скоро появится на сайте. twitter.com/mr_mig_by/stat…

@jsunderhood какие интересные задачи есть в Авито?
У нас в план закладываются не только продуктовые задачи. На след. год - тестирование, компоненты, шифт в сторону SPA twitter.com/mr_mig_by/stat…

@mr_mig_by @jsunderhood сегодня ты чему-то научился, а завтра новый день, с чистого листа, каждый раз ищя способы решения или городя костыли
Да, многие, например, до сих пор не знают Flexbox и думают, что он мало где поддерживается. twitter.com/kuzvac/status/…

Вполне ок. Пока в JS нет типизации, хорошая альтернатива. Типизация особо важна для enterprise. twitter.com/_sashashakun/s…

Да, если продолжится тренд по поспешному добавлению фичей - так и будет. Сложно сказать хорошо это или плохо. twitter.com/_sashashakun/s…

@jsunderhood насколько интересен в этом плане Dart?
Dart может быть альтернативой, если не пугают "сложности" интеграции с JS и малое сообщество. С архитектурой там ок twitter.com/JiLiZART/statu…

Насколько понимаю, они отказались от идеи интеграции в браузеры, но продолжают развивать. Надеюсь @mraleph поправит twitter.com/_sashashakun/s…

@jsunderhood Привет, Рома! Вчера на #wstdays так до конца и не раскрыли вопрос зачем вы используете Webpack и Gulp вместе.Можно поподробнее?
Webpack появился вместе с ES6 в начале лета. До этого был gulp. Переделывать все на webpack пока нет смысла twitter.com/andyshulga/sta…

Вчера в интервью на WSD задали вопрос: что стоит ожидать выдающегося во фронтенде в следующем году? Ответил ерунду :) А что бы ответили вы?

Интересно, будут ли ответы оригинальнее "react захватит мир"? ;)

@jsunderhood Может роста популярности Relay или появление альтернативы?
Популярность Relay будет расти по естественным причинам. Но я бы не назвал это "выдающимся" достижением twitter.com/toivonens/stat…

@jsunderhood можешь прокомментировать происходящее на avito.ru при заходе в консоль? баг или фича?
Можно сказать, что "фича". Одна из библиотек обфусцирована и использует своего рода "защиту" – "вешает" devtools twitter.com/vkurchatkin/st…

Обфуская делается ради защиты "имплементации", если не полностью защитить, то сильно усложнить риверс инжинириг twitter.com/OlkhovoyDmitry…

@jsunderhood но зачем? гмейл, ютуб и фейсбук этого не делают. это было решение разработчика или менеджера?
Обфускация делается только для одного критического скрипта, принцип работы которого нежелательно раскрывать twitter.com/iamstarkov/sta…

Это не всегда так. Чтобы оценить крутость кода, нужно на него посмотреть и понять как он работает ;) twitter.com/gearmobile/sta…

@jsunderhood ты так говоришь, как будто у корпораций этих скриптов нет
Продуктовый код обычно нет смысла обфусцировать, его много и он типовой twitter.com/iamstarkov/sta…

@jsunderhood авито — не продукт?
Продукт. Я же написал, что обфусцируется только один скрипт (то есть библиотека) – все остальное нет twitter.com/iamstarkov/sta…

Ну что ж, ответов на вопрос "что выдающегося нас ждет в следующем году?" оказалось мало. Поделюсь своими мыслями.

Во-первых, кажется разработчики браузеров договорятся и везде появится имплементация Shadow DOM, по крайней мере все к этому идет

А вот Custom Elements могут не случиться в следующем году, там еще много нерешенных вопросов

Очень вероятно, что во всех браузерах появится WebAssembly, и это может оказать сильное влияние на разработку

В мире CSS: Grid Layout может получить широкую поддержку в следующем году - это кардинально изменит подход к верстке интерфейсов

Текущая имплементация в Blink (v0) это не то, что будет в браузерах через год (v1) twitter.com/OlkhovoyDmitry…

@jsunderhood какие юзкейсы Shadow DOM кроме изолированных стилей?
Скрытие особенностей реализации – это не только про CSS. В обсуждаемой спеке многое будет не так как сейчас в Blink twitter.com/alexeyraspopov…

Как раз таки HTML Import и Custom Elements очень не факт, что получат широкую поддержку. twitter.com/OlkhovoyDmitry…

@jsunderhood Не так быстро, как флексы, к сожалению — фолбечиться с гридов куда сложнее. Так что чуть позже. Но будет круто, да :)
Разве есть проблемы с фолбеком, если у нас есть @supports? Или я что-то упускаю? twitter.com/ki_zu/status/6…

@jsunderhood больше СервисВоркеров, оффлайна и как следствия CRDT
Не смотря на крутость Service Workers, вряд ли стоит ожидать их скорой адаптации: слишком сложная штука, сырые спеки twitter.com/andrey_sitnik/…

Polymer не показывает реальную ситуацию с Web Components. Он поменяется с обновлением спек, без обрат. совместимости twitter.com/OlkhovoyDmitry…

@jsunderhood внутри сетки все работает только когда находится на одном уровне вложенности. Если добавлять врапперы и подсетки, теряем смысл.
Во Flexbox так же, но это никого не останавливает. Врапперы кажется не нужны, а подсетки должны работать twitter.com/ki_zu/status/6…

Не ShadyDOM, а Shadow DOM. Не фолбечится - можно только закостылять. Тему изучал, API и принцип работы будут другими twitter.com/OlkhovoyDmitry…

Ага, нашел habrahabr.ru/post/259187/ Видимо пропустил про ShadyDOM.

@jsunderhood не врубаюсь в чем прикол ShadowDOM. Есть ли какие-то преимущества перед virtualDOM? Почему ShadowDOM - это круто?
Совершенно разные вещи. VD в коде, для абстрактного описания структуры. SD – в браузере, для инкапсуляции. twitter.com/lapanoid/statu…

Вторник


@jsunderhood кто сказал что одинаковые? Для конечного дева, чем shadowDOM лучше,для решения какой задачи?Компоненты грубо говоря и там и там
Одно не может быть лучше другого. Shadow DOM браузерная технология, почитайте спецификацию w3c.github.io/webcomponents/… twitter.com/lapanoid/statu…

Прошу прощения, что не пишу 100500 твитов :) но нужно было написать важный комментарий...

Вчера я выступал на #wstdays про минимизацию CSS, если пропустили вот слайды: slideshare.net/basisjs/csso-c…

После случился сложный диалог, @andrey_sitnik посчитал, что я ввел аудиторию в заблужение по поводу PostCSS, детали: gist.github.com/ai/65e23d9185c…

Не относитесь к этому, как к каким то "разборкам". Цель дать разъяснения в спорных моментах, чтобы не возникли неверные суждения.

@jsunderhood ты во сколько спать ложишся?
Стараюсь не позже 2х, но последний месяц-два не получается раньше 4х. Хочется успеть сделать больше... twitter.com/i_told_ya/stat…

@jsunderhood К чему идет или стремится frontend-разработка? Разве новые технологии удешевляют процесс?
Новые технологии это больше про возможности. Процесс может и удешевляется, но и пользовательские ожидания растут. twitter.com/ivkinovich/sta…

@jsunderhood и надолго вас хватит с таким режимом? :)
Сомневаюсь. Успокаивает только факт, что скоро новогодние праздники, только бы дотянуть :) twitter.com/stewardtz/stat…

@jsunderhood ну пользовательские ожидания будут расти до тех пор, пока не изобретут ОДНУ кнопку, которую надо нажать. :)
Я немного про другое. Вот лет 10 назад верстали под один форм-фактор. Сегодня под несколько (десктоп, телефон, etc) twitter.com/stewardtz/stat…

Давайте поговорим про приобретение опыта и обучение. Уделяете ли вы этому время вне рабочего времени?

Я лично больше склоняюсь к балансу работа-жизнь. Но в нашей сфере сложно развиваться, если делать это только в рабочее время...

Моя личная проблема – я увлеченный трудоголик. Если меня захватывает идея, не успокоюсь пока ее не реализую. Другая проблема – идей много :)

@jsunderhood что есть "вне рабочее время"? Вопрос почти без шуток
Предположу, что это время обязательного нахождения в офисе, ну или когда вы что-то должны работодателю :) twitter.com/alexeyraspopov…

@jsunderhood получается закончить реализацию прежде чем ты займешься следующей идеей?
По разному. Реализации приводят к новым идеям, цепная реакция. Тонкая грань, где кончается одно и начинается другое twitter.com/alexeyraspopov…

@jsunderhood а ожидания-то не изменились :) кнопку, а лучше без кнопки, хотят и на десктопе и на мобиле.
Я про те ожидания, что можем удовлетворить сегодня. Вот появится технология – будем делать все без кнопок ;) twitter.com/stewardtz/stat…

Полностью поддерживаю. Жаль, не все это понимают twitter.com/PanyaKor/statu…

@jsunderhood Я больше учусь чем работаю. Хочу научиться всему :) и попроситься в какую-нибудь крутую студию. Проблема - остановиться не могу
А каким образом проходит обучение? Я к тому, что приобретаемые знания нужно закреплять практикой. Надеюсь это так twitter.com/SigizmundRF/st…

Можно начать решать задачу, кот. еще никто не решал. Как минимум будет новый опыт, максимум – не только наблюдение twitter.com/OlkhovoyDmitry…

@jsunderhood А вы думали о будущем, лет так на 10-20 вперед? Будет ли в 40 или 50 у вас fulltime-разработка?
Думал. Сложно сказать. Вероятно в этом возрасте вообще уйду из IT. Но поживем увидим. twitter.com/ivkinovich/sta…

@jsunderhood уйдешь в бизнес, или вообще в другую профессию?
Бизнес это нервы, а хочется что-то "для души". Это я так мечтаю. Что это будет, пока не знаю, как и получится ли :) twitter.com/operatino/stat…

Имелось в виду в качестве dev-сервера? twitter.com/lifeasecond/st…

Здорово, многие пишут, что занимаются самообразованием и приобретают опыт не только в рамках работы. Это очень обнадеживает!

Результат собеседований в течении года, 8 из 10 кандидатов ничего не читают, ничем не интересуются, не ходят на митапы/конференции etc.

Очередной вопрос: ваша компания поощряет/мотивирует вас на получение новых знаний и опыта? Каким образом?

@jsunderhood не поощряет. ни в одной не было такого. А мотивируют все т.к. рыба ищет где глубже...
Не то слово использовал, имел ввиду "способствует". Но так понимаю - это не сильно меняет то, что вы написали... twitter.com/dcromster/stat…

@jsunderhood Ходить на конференции прям-таки обязательно? Не ходит, значит херовый кандидат?
Не обязательно, можно и видео смотреть. По наблюдениям, обычно те кто "не ходит" сильней "отстают от жизни". twitter.com/webholt/status…

@jsunderhood времени в сутках у всех одинаково, если постоянно ходить по собеседованиям, то когда ходить на митапы и читать книжки? ))
Уделять час в день на чтение новостей/статей, ходить раз в месяц-два на митап/конференцию - это не так много времени twitter.com/mktoid/status/…

@jsunderhood Не на каждой работе можно выделить время для просмотра видео. А ожидать, что люди будут свободное время тратить - нечестно.
Это как раз про баланс работа/жизнь. Хорошо, если так получается и компания это поддерживает twitter.com/toivonens/stat…

@jsunderhood Это огромное количество времени. Особенно для тех, у кого семья и дети.
По себе могу сказать, даже с семьей и ребенком можно найти время. Если есть желание. Но это личный выбор каждого twitter.com/toivonens/stat…

@ksdaemon @jsunderhood Если б нам платили как адвокатам в Америке — можно и по 60 часов работать. А нам платя чуть чуть выше среднего.
Это в Европе. В Москве хорошему IT-шнику платят гораздо выше среднего. З/п редко работает как хороший мотиватор. twitter.com/toivonens/stat…

@way2bariton @jsunderhood @ksdaemon Отправлять на конференции в рабочее время, устраивать внутренние хакатоны, делать внутренние доклады.
Это хорошие инициативы со стороны компании. Но всегда есть те, кто и этим не пользуется - не когда, не интересно... twitter.com/toivonens/stat…

В моем понимании отсталось от жизни, например, "flexbox не знаю, но он же нигде не поддерживается" twitter.com/nanonymoused/s…

@jsunderhood идеи спонтанны? или возникают на основе своего видения развития технологий? Бывает же так, что люди скачут с одного на другое
По-разному. Часто спонтанны небольшые штуки. А иногда думаешь о проблеме год-два, потом – эврика! – и быстрей кодить twitter.com/alexpipinov/st…

Если не секрет, почему? Для меня это возможность узнать чужой опыт, пообщаться с интересными людьми,вдохновиться etc twitter.com/nanonymoused/s…

Для меня хождение по конференциям и чтение проф. материалов показатель насколько человек интересуется фронтендом twitter.com/nanonymoused/s…

@jsunderhood @nanonymoused flexbox поддерживается в браузерах 80% это становится интересным и для бизнеса
Так мне отвечали кандидаты. Узнав про 80-90% – удивлялись. У нас IE11+, можно использовать, если знаешь где и как twitter.com/boriscoder/sta…

@jsunderhood Вполне возможно, что кандидат ранжирует интересы по значимости для бизнеса и flexbox у него примерно на двухсотом месте.
Ок. ES6 – 7 из 10, не то что не знают, но и ничего не читали о нем. Знают, что есть такое и на этом все... twitter.com/dmitryshimkin/…

И кстати, бизнесу пофиг технологии, главное чтоб "работало". И откуда кандидат знает значимость, если ничем не интересуется?

У нас с лета используется ES6 для новых разработок по сайту. Большого опыта не требуем, но хотя бы базовое знание крайне желательно

@jsunderhood у большинства конференций очень низкий показатель полезная_информация/затраченное_время. Проще прочесть несколько статей.
Сколько и какие конференции вы посещали за последние 3 года? Если можно в виде двух списков "ок" и "не ок" twitter.com/dmitryshimkin/…

Это не норм. Важно знать, что это такое и когда стоит применять. Даже чтобы "нагуглить", нужно знать что "гуглить" twitter.com/nanonymoused/s…

Не уверен, что большинство. Кто горит своим делом–особо ценны. Не уважаю тех, кто выбирает работу чисто из-за денег. twitter.com/vladimore/stat…

@jsunderhood @dmitryshimkin такие разрабы действительно существуют? О_о
Не могу назвать мою выборку репрезентативной (~30 с момента принятия ES6), но вот так, да... twitter.com/aSafort/status…

@jsunderhood Чтобы осилить с общих чертах ES6, шарящему в ES5 разработчику нужен день. Один чертов день.
ES5 тоже мало кто толком знает :( А ведь читая хотя бы статью в неделю можно хорошо все изучить за несколько месяцев twitter.com/webholt/status…

@jsunderhood Это все такие вещи, с которыми люди знакомятся, когда у них поддержка нулевая. И сложно поймать момент, когда уже можно.
Твитер, rss фиды, подписки, статьи, конференции – не позволят вам упустить момент. Если читать, конечно twitter.com/webholt/status…

@jsunderhood Роман, скажи, какой уровень знаний должен быть у джуна, чтобы им заинтересовались, например, в Авито? Или джуны вам не нужны?
Пока не берем джуниоров. У нас требуется знания: ES3/5/6, DOM, CSS2/3/4. Плюсы: API, фреймворки, паттерны, алгоритмы twitter.com/aSafort/status…

@jsunderhood Рома, я придерживаюсь того же мнения, но я уже настолько законсервировался в своих четырёх стенах комнаты...
Еще один важный момент, возможность понять насколько ты все делаешь правильно и не решаешь решенную проблему... twitter.com/psyw/status/67…

И потом, в статьях, со сцены и на вопросах все держат марку. А вот в кулуарах и афтепати можно столько всего узнать как оно на самом то деле

@jsunderhood @vladimore @mr_mig_by гореть делом это круто, но если человек будет еще мотивирован и денежно, то это идеальный работник
Не считаю деньги мотиватором. Это потребность. Важно чтобы она была удовлетворена и разработчик не думал об этом twitter.com/linless_xD/sta…

@jsunderhood..., что у меня нет друзей в реале((( И следовательно ходить мне не с кем, а одному мне как-то боязно( + я тот ещё интроверт)
Когда я первый раз пришел на @moscowjs, то не знал никого. Сейчас, иногда, устаю жать руки :) twitter.com/psyw/status/67…

Среда


Откуда информация, если не был ни на одной конференции? ;) twitter.com/nanonymoused/s…

Для любого вас он кажется "древним". Но опыты показали, что он лучше работает для не ITшников и старшего поколения twitter.com/nanonymoused/s…

Руки у дизайнеров чешутся давно. Но это сложный вопрос, любое изменение дизайна влияет на конверсию, и часто в отрицательную сторону

В тви подробно не расскажешь. Спрашиваю основные вещи по JS, DOM, CSS, программирование в целом, мотивация, кругозор twitter.com/_sashashakun/s…

Чем лучше знания, тем больше шансов устроиться и попасть на более крутой проект и задачи

@jsunderhood Ну так если человек работает, он все равно читает, даже если сам не замечает этого. Все мы гуглим.
Да, но кто-то гуглит алгоритм максимального паросочетания в двудольном графе, а кто-то сложение с помощью jQuery twitter.com/webholt/status…

@jsunderhood Чтобы угодить всем, надо читать литературу, вести блог, ходить на конфы, слушать подкасты, крыть 100% тестами. В сутках 24 часа
Нужно быть в курсе, разбираться в сути, пробовать, экспериментировать и т.д. Способы делать это могут быть разными. twitter.com/webholt/status…

А можно говорить, что в сутках 24 часа и не делать ничего. Выбор за вами

@webholt @jsunderhood Вот-вот. Я вообще считаю, что если человек больше любит конференции, чем сидеть кодить, то это хреновый фронтенд! :))
Прежде, чем кому-то давать оценку по какому либо поводу, я бы разобрался в причине. Д'Артаньяном быть не сложно twitter.com/nmatuhin/statu…

@jsunderhood @webholt Уважаемый, я высказал свое личное мнение, также как вы высказываете свое. И не нам судить друг друга. Д'Артаньян )))
Всегда важна причина: возможно у него скучные задачи, как например, или он лентяй и конференция повод не работать... twitter.com/nmatuhin/statu…

Любить конференции больше чем кодить – это как минимум странно, должна быть причина.

@jsunderhood @webholt Как руководитель,я предпочел бы интроверта-творца,а не конференционного экстраверта, который больше изучает чем делает
Как руководитель Вы должны знать, что команда из одних интровертов далеко не уедет twitter.com/nmatuhin/statu…


Если правильно понимаю, то речь про выступления. Это level up – несколько другая тема ;) twitter.com/SheVasya/statu…

@jsunderhood @webholt вы ушли в какую-то глухую оборону... еще раз - я против оценки кого либо по частоте посещения конференций. всё ))
Оценивается не частота, а источники получения новых знаний. Конференции один из таких источников twitter.com/nmatuhin/statu…

@jsunderhood @zastavnitskiy а что значит в этом деле "переборщить"?
оу, Вы из букинга :) вот где-то слышал, что у вас проходит чуть ли не 1000 (если не больше) A/B тестов параллельно twitter.com/korochinskiy/s…

@jsunderhood @webholt не могу полностью разделить вашу позицию.хождение на конференции никак не характеризует стремление человека к новому.
Смысл был такой, что источником не обязательно должны быть конференции. Твитер, подписки, ленты и т.д. – тоже ок. twitter.com/nmatuhin/statu…

То есть должен быть регулярно обновляемый источник новой информации

@RReverser @jsunderhood @nanonymoused тут стоит сказать, что дизайн букинга я терпеть не могу,серьезно. Ничего, работаем,улучшаем,стараемся.
Насколько знаю, дизайн букинга не меняется по тем же причинам. Стоит "улучшить" дизайн и конверсия падает. Парадокс twitter.com/korochinskiy/s…

Потому на таких больших проектах изменения делаются осторожно, маленькими шажками.

@jsunderhood @zastavnitskiy ну, не настолько, но очень много, да. Мне просто стало интересно, в плане чего переборщить можно.
В количестве. Я просто слушал как то доклад про A/B тестирование в букинге, масштабы поражали, очень круто. twitter.com/korochinskiy/s…

@jsunderhood @moscowjs Рома, а ты же из Москвы, так ведь? И в Москве ты не пропускаешь (ну стараешься, в смысле) ни одну конфу?:)
Да, хожу по возможности, и выступаю тоже. И не только в Москве, в других городах тоже есть хорошие конференции twitter.com/psyw/status/67…

@jsunderhood @nanonymoused @boriscoder из Сибири на moscowjs ехать так себе удовольствие :)
Можно смотреть трансляцию или записи докладов youtube.com/user/moscowjs twitter.com/pomidore/statu…

Возможно в вашем городе есть свой митап: github.com/web-standards-… Если нет, то всегда можно организовать.

Не ожидал, что будет такая оживленная дискуссия по поводу самообразования. Хотя, как оказалось, она не первая - все уже было до нас :)

Небольшое резюме. Считаю важным постоянно развиваться. Когда это делать и каким способом - личное дело каждого. Но нельзя стоять на месте.

Здорово, если компания способствует развитию сотрудников, но это, увы, есть не везде. Но и не все этим пользуются, даже если это есть.

Правильно, когда компания жертвует частью рабочего времени на обучение. Если подходить с умом - это окупится. Расскажу немного как у нас.

🔥Тред (Роман Дворнов)
В Avito оплачиваются две конференции в год, оплачивается сертификация, библиотека (можно заказывать книги), каждую пятницу 2ч dev-митап

Проводятся и открытые митапы. По фронтенду в этом году их было 2: github.com/lahmatiy/mosco… github.com/lahmatiy/mobil…

В следующем году, надеюсь, будет больше. Так же думаем над дополнительными инициативами направленные на развитие и повышение квалификации

@jsunderhood а перелет и проживание оплачивают тоже или все, кроме билета на конференцию за свой счет?
Если конференция в другом городе, то это командировка: покрываются билеты, гостиница + суточные twitter.com/anton_davydov/…

@jsunderhood Компания инвестирует в удержание сотрудника, а не в его самообучение. Нужно удерживать - плюшки будут, нет - не будет.
Плюшки есть, но не про них. Если вкладываться в развитие, то эффективность будет расти при сохранении численности twitter.com/kotfalya/statu…

@jsunderhood Книги оплачиваются личные или общая библиотека?
Общая библиотека. Есть бумажные книги, читалки и электронная библиотека (можно читать в любом браузере) twitter.com/webholt/status…

@jsunderhood Конференции в других странах или только локальные?
В основном локальные. Зарубежные пока в ограниченном количестве. twitter.com/sapegin/status…

@jsunderhood А если я хочу на больше конференций, есть какое то софинансирование?
Если докладчиком, то ограничений нет. Если слушателем, то отпускают без проблем, но пока только за свой счет. twitter.com/toivonens/stat…

@jsunderhood и как пистолет? Бросил? Почему? КМС есть? @psyw
Спорт. стрельба учит ответственности, контролю над собой. Был I разряд,для большего нужно заниматься профессионально twitter.com/SilentImp/stat…

У нас это прекрасно понимают. Поэтому несколько месяцев назад ввели премию за выступление. twitter.com/nanonymoused/s…

Давайте поговорим про open source. А именно вносите ли вы свой вклад в общее дело (проекты) или нет? Если нет, то что вас останавливает?

Сам стараюсь это делать не только в рамках своих проектов. Если наталкиваюсь на баг в том, что использую, стараюсь его поправить и делаю PR

Контрибьютить можно не только "кодом". Зарепорченный баг, feature request, помощь с документацией и т.д. все это очень помогает проектам

@jsunderhood вношу, останавливает то, что не всегда можно понять что вносить нужно :)
Для этого обычно есть issues, заходим и выбираем ;) twitter.com/anton_davydov/…

@jsunderhood Вчера уже писал. Тот факт, что люди им пользуются, это уже их вклад.
Раскройте свою мысль, какой это вклад? Просто пользоваться чем то – это потребительство. twitter.com/webholt/status…

Не нужно сомневаться, просто делайте, вас поправят, если что не так. Это приобретение опыта с пользой для остальных twitter.com/_sashashakun/s…

Правда, это крутые ощущения? ;) Не останавливайтесь на достигнутом twitter.com/_sashashakun/s…

@jsunderhood ещё есть roadmap-ы
Верно. Поэтому если хотите, чтобы вашему проекту помогли, делайте roadmap'ы и открывай issue с тем, что надо сделать twitter.com/iamstarkov/sta…

Сам это понял не так давно, до этого не уделял этом внимания. Планирую исправиться :)

@jsunderhood не всегда там есть что выбирать ;) github.com/lotus/utils/is…
Это же не единственный проект. Еще можно создать тикет – "чем я могу помочь вашему проекту?" или написать автору ;) twitter.com/anton_davydov/…

@jsunderhood Это распространение, это невольное тестирование. И все это рано или поздно может обернуться в более ощутимый вклад.
Распространение – рассказать другим или написать статью, тестирование – зарепортить проблему/баг. Вот это вклад twitter.com/webholt/status…

@jsunderhood если баг ты нашёл сам, то лучше его зарепортить, обсудить своё решение с мейнтейнером, и только потом присылать пр
Местами лучше так и делать. Но в любом случае, даже за неудачный PR бить не будут. Обычно помогают сделать правильно twitter.com/iamstarkov/sta…

@jsunderhood мне не нравится мысль в том, что компании пользуются oss, но не считают нужным вкладываться в него
Я вот лишь недавно узнал, что Авито контрибьютит в oss и спонсирует ряд проектов (бекенд, БД), но не афиширует это twitter.com/iamstarkov/sta…

Упс, кажись "спалил лавочку" :)

Четверг


@jsunderhood в последнее время появился тренд у oss-проектов создавать ишью для новичков
Хорошая практика! Делать PR не так просто по началу. Будет на чем учиться, будет больше контрибьютеров twitter.com/iamstarkov/sta…

@jsunderhood Бывает проще починить (и послать пулреквест), чем объяснять, что не работает.
Бывает на один исправленный символ пишется несколько предложений в комите. Важно учиться объяснять,хоть это и сложно twitter.com/sapegin/status…

А как насчет велосипедов? Пишите ли свои или используете все готовое? Какая у вас мотивация? Знаю, часто здесь полярные мнения

Я пишу и не мало. Причин много: от "лучше разобраться в теме" (редко) до "сделать иначе чем обычно" (часто). Не все получается, но это опыт

А с опытом приходит виденье нестандартных решений. Так, потерпев ряд неудач, получается сделать что-то интересно и крутое

Или собрать что-то сложное, как например получилось с Component Inspector github.com/lahmatiy/compo… – с чистого листа такое непросто сделать

🔥Тред (Роман Дворнов)
Считаю это не правильным, никому от этого лучше не станет twitter.com/_sashashakun/s…

@jsunderhood Еще вариант: плохо искал, не нашел. Написал своё. А потом нашлось. И уже поздно менять.
Это еще одна из причин, почему нужно мониторить медиа, конфы etc Появляется проблема – вспоминаешь какое-то решение twitter.com/webholt/status…

@jsunderhood Зачастую, на ровне с ленью, нехватка времени также приводит к невозможности делать что-то вне рабочее время, а это печалька:(
Тут мне (не)повезло, я увлеченный. Иногда идеи настолько навязчивы,что един. вариант от них избавиться – воплотить:) twitter.com/psyw/status/67…

@iamakulov_ @jsunderhood это на мелких так, а на крупных проектах заманаешся писать целевое, квери полюбому подключиш, и пользуешся
Наоборот, на больших проектах это имеет большее значение. И jQuery сегодня все меньше нужен. Мы вот выпиливаем его twitter.com/That_ka/status…

@jsunderhood @iamakulov_ какое значение? ресурсы умов, время, деньги на изобретение велосипедов?
Если на каждый чих добавлять библиотеку, со временем можно потерять контроль и проект лихо распухнет... twitter.com/That_ka/status…

На собеседованиях мне показывали свои проекты, где на одной странице пара фреймворков, пяток либ (вроде jq) и это не считая либ компонент.

Перестали поддерживать старые браузеры (у нас IE11+) и использовалась малая часть jq (заменили небольшими либами) twitter.com/_sashashakun/s…

@jsunderhood @iamakulov_ аякс сюда еще от нее в копилку, очень удобен, да и синтаксис ее не сравним с чистым жс, она создана облегчать труд
Уже есть fetch, можно использовать его + полифил. По крайней мере у нас такие планы twitter.com/That_ka/status…

Ого! Но это не мне так повезло, рассказывали кандидаты про свои текущие проекты, с безграничной болью в глазах... twitter.com/RReverser/stat…

Это еще одна проблема – поддержка зависимостей. Потому давно уже лимитируется и контролируется добавление новых либ twitter.com/RReverser/stat…

@jsunderhood мне очень близка вот эта идея github.com/sindresorhus/a…
Читал этот тредик. Согласен с частью тезисов. Но не разделяю такой подход. Все хорошо, пока не наступите на грабли twitter.com/dimaip/status/…

Был у нас случай. Катим в прод – сломалась сборка. Локально все ок, на сервере не собирается. Делаем чистую установку локально – не работает

Все зависимости запинены. В чем дело? У одной из либ одна из зависимостей на 5м уровне вложенности версия зависимости была задача как "*"...

И эта зависимость обновилась без обратной совместимости. Итог: ключевая либа не работает, сборка не работает, поменять ничего нельзя...

Пришлось зашивать либу в проект со всем деревом зависимостей, патчить и только так смогли починить сборку и выкатиться...

Так и жили ~месяц пока вся цепочка пакетов не обновилась. Итог: пол дня коту под хвост, задержанный релиз, нервы, костыль...

И ладно это был плановая выкатка. А что если срочный критикал багфикс надо было выкатить? (такое бывает очень редко, конечно, но бывает)

🔥Тред (Роман Дворнов)
@jsunderhood @iamakulov_ загрузчики навесы мультитапсов на импуты и тучи других плагинов как это реализовывать без квери в срок
Если компонентный подход – без проблем. Большие проекты рано или поздно приходят к собственной реализации компонент twitter.com/That_ka/status…

@jsunderhood аборт запросов ещё не утверждён
Да, это одна из причин, почему не торопимся с fetch twitter.com/andreychev/sta…

@jsunderhood а как же shrinkwrap?
Век живи, век учись. Не знал про такую штуку. Спасибо! Тебе приходилось ей пользоваться? twitter.com/iamstarkov/sta…

@jsunderhood @iamakulov_ тю добрый день :) странно что кто то еще пишет в профИТ наитивом?) Из этого вы напишете свою тип jq, личную? Зачем?
Почему странно? Мы стараемся максимально использовать браузерное API + хелперы по наши задачи. twitter.com/That_ka/status…

Для этого у нас введено обязательное код-ревью. Код не будет замержен, пока не будет апрува от всех ревьюверов. twitter.com/_sashashakun/s…

@jsunderhood А гонка за технологиями не всем приносит счастья, меня, например, это утомляет. И смена деятельности нужна обязательно.
В том то и дело, не нужно гнаться за "модными фреймворками", а изучать основы: структуры данных, паттерны, алгоритмы twitter.com/ivkinovich/sta…

@jsunderhood А каков штат frontend в avito? Есть разработчики удаленные из других городов?
Удаленных разработчиков нет и не планируется. Сейчас 15 фронтендеров и продолжаем искать twitter.com/ivkinovich/sta…

Влиять "административно" не лучшая идея. Старайтесь договариваться и вводить практики: code review, стандарты etc twitter.com/_sashashakun/s…

@chicoxyzzy @lapanoid @jsunderhood напомнили старый доклад destroyallsoftware.com/talks/the-birt…
Спасибо, что напомнили про него. Клевый доклад с хорошим юмором :) twitter.com/G3D/status/677…

@jsunderhood теорию категорий, квантовую физику, бихевиоризм
Передергиваете. В чужом коде куда проще разобраться, если знаете патерны.Вот вам экономия времени на изучение нового twitter.com/mr_mig_by/stat…

Но если изучать, например, фреймворки по туториалам, без попытки понять принципы, то да, никакого времени не хватит и не угонитесь за новым

В качестве отправной точки подойдет вот эта статья: habrahabr.ru/company/mindbo… twitter.com/YevhenBoyarsky…

@jsunderhood а бэкендом сколько человек занимается?
Точной цифры не скажу, но побольше + еще отдельно DBA, DevOps, BI и т.д. twitter.com/MRinat/status/…

@jsunderhood @sashashakun @That_ka @iamakulov это в авито ие11+? Неплохо, разве такой низкий процент ие9-10?
Да, по нашей статистике доля IE9 и IE10 в сумме меньше чем доля IE8. twitter.com/hellbeast92/st…

Я бы не стал так обобщать. Да, многие учат пользоваться и не объясняют как работает. На старте это ок... twitter.com/PanyaKor/statu…

Главное научившись делать что-то простое, начать копать вглубь и разобраться в принципах работы

У меня были кандидаты, которые "писали" на React полгода-год, но не могли написать как создать компонент, то есть React.createClass({ ... })

Или разрабатывали на Backbone, но не могли перечислить все 4 класса. Хотя если понимать какие концепции он несет, это проще простого

🔥Тред (Роман Дворнов)
Потому в топку патерны, доведем количество такого кода до 100%? ;) twitter.com/vladimore/stat…

На самом деле, даже не зная патернов, люди, сами того не зная, их реализуют. Коряво, конечно, но все же.

Патерны не что-то космическое. Это подходы к решению задач. Легче объяснить другим, возможность читать код фрагментами, а не построчно.

Зная возможные решения задачи, достаточно распознать признаки одного из решений, чтобы все понять. Для этого не нужно вычитывать весь код

🔥Тред (Роман Дворнов)
Детали могут отпугнуть начинающего, так как нужна экспертиза для их понимания, а она есть далеко не у всех twitter.com/PanyaKor/statu…

@jsunderhood + не забывайте что сами MS хотят прекратить поддержку IE8, IE9, IE10 начиная с 12 января 2016 microsoft.com/en-us/WindowsF…
Да, этот факт значительно повлиял на решение отказа от IE8. А доля IE9 + IE10 крайне не значительная. twitter.com/Ai_boy/status/…

Спрашиваю, и не только про React. Обоснованных не помню. Но я в целом встречал мало людей, кто мог обосновать выбор. twitter.com/_sashashakun/s…

@jsunderhood Есть ли действительно дельные туториалы по React? Пока ничего нормального не нашел
Не знаю. Но может читатели подскажут? Я читал доки и все подряд, ковырял код. Хз,что лучше помогло и в каком вопросе twitter.com/timurKarshiev/…

У меня было так же. Но можно долго идти к решению, а можно почитать об этом и выбрать подходящее. Вопрос времени twitter.com/way2bariton/st…

Было бы очень круто, если бы "прорывалось" куда больше, чем сейчас. На это нужно вдохновлять, молодцы кто это делает twitter.com/SelenIT2/statu…

@jsunderhood Рома,как ты относишься вот к: habrahabr.ru/company/ua-hos…. Ты видишь пользу в наставнике? Или он отучит искать инфу самостоятельно?
Всегда мечтал, но у меня не было. По идее наставник направляет, вдохновляет, помогает. Можно быстрее стать профи twitter.com/psyw/status/67…

Написал "можно", т.к. все зависит от вас, каким бы крутым наставник не был. Необходимо желание развиваться, т.е. пользоваться возможностью

@jsunderhood Согласен с тобой полностью, но к сожалению не все так считают: htmlforum.ru/index.php?show… Но имхо, они что-то путают:(
Путают. Ментор не делает за кого-то его работу, но помогает делать свою работу лучше twitter.com/psyw/status/67…

@jsunderhood @timurKarshiev да че там реакт, сразу по хардкору egghead.io/series/getting…
Ден крутой и туториал отличный. Его стоит изучить даже, если вы не используете (и не планируете) React/Reduх twitter.com/hey_daniil/sta…

@jsunderhood а сейчас не мечтаешь? у меня вот те же эмоции насчет наставника :)
Спустя 15 лет ожидания, я уже как-то отчаялся :) twitter.com/viatsko/status…

@jsunderhood @limarc на недавнем #webstandardsdays сказал что вы переходите с php на nodejs - кто будет писать, те кто раньше писал на php?
Не совсем так. PHP никуда не денется. Но одну из задач, а именно рендеринг HTML, думаем перенести на node.js, да twitter.com/MRinat/status/…

Сейчас ведутся эксперименты. Если все получится, писать будут специалисты по node.js. Таких у нас очень мало. Ищем

@jsunderhood Если человек стал экспертом, через какое время он станет знания терять и когда настанет критический момент, если не кодить?
Все зависит от области. Во фронтенде практически сразу. За год-два можно скатиться в юниоры twitter.com/ivkinovich/sta…

@jsunderhood многие постоянно говорят о плюсах Реакта. Можешь рассказать о минусах? На какие грабли вы натыкались делая Авито?
React используется с сентября, пока делаются встраиваемые приложения. Скоро планируется стартовать новые SPA на нем twitter.com/aSafort/status…

Пятница


На вопрос отвечает Александр @limarc :)

Да, это мой основной посыл. Но проблема не во фреймворках,а бурное развие платформы,без ее знания не стать экспертом twitter.com/ChillyBwoy/sta…

Нет, плаформа слишком быстро развивается. Только за этот год столько всего появилось twitter.com/rusgautama/sta…

И речь ведь про экспертные знания. А это ежедневная работа: новости, статьи, спеки, конференции, общение, практика...

Сегодня был вопрос про менторство, были неоднозначные мнения. Решил не засорять эфир и написал заметку "Ментор": lahmatiy.tumblr.com/post/135414592…

@jsunderhood глянте в сторону Go
На Go смотрим, и даже какие-то штуки уже на нем. Но шаблонизация на Go кажется сомнительной идеей ;) twitter.com/nydevel/status…

Смелей! На github, чуть ли ни каждый второй с базовым знанием английского. А начать можно с прочтения туториалов twitter.com/sergey_panay/s…

@jsunderhood поиски решения позволяют набить шишек, и как раз после этого можно обоснованно утверждать, что именно такой подход эффективней
Личный опыт бесценен. Но нужно не забывать "учиться на чужих ошибках" twitter.com/alexpipinov/st…

Советую почитать, можно уже сказать, классику: Джоель Спольски про разработку ПО из личного опыта russian.joelonsoftware.com (переводы)

Когда то читал взахлеп, на меня сильно повлияли его посты. Надо бы перечитать, кстати :) Интересно, как поменялось восприятие спустя 10 лет

Как совпало, сегодня у нас на dev-митапе как рассказывают про Go :)

Каждый год в течении декабря ежедневно публикуются статьи по производительности (сетевой в основном) calendar.perfplanet.com/2015/ - рекомендую

Можно так же подписаться на их твитер @perfplanet

А вот вопрос, как вы узнаете что у вас все работает быстро и с памятью хорошо? Как ищете проблемы? В браузерах и node.js

Суббота


Судя по всему у большинства была веселая пятница :) Ответов на мой вопрос про производительность почти не было...

Есть мнение, что мало кому нужно что-то мерить, потому что все и так работает быстро. И я могу согласиться, т.к. большинство задач простые

Но специфика фронтенда такова, что одним "неловким движением" можно сделать все медленным. Важно такой момент заметить, что бывает не всегда

Так же в зоне риска проекты, которые делаются длительное время. Если все время забивать на производтельность, то в итоге не выйдет "быстро"

Еще иногда нам достаются в наследство проекты не в лучшем состоянии. Можно, все переписать, но не всегда в этом есть смысл, да и ресурсы

🔥Тред (Роман Дворнов)
@jsunderhood у нас на ноде сервис в zabbix шлет много метрик в тч по памяти. Они мониторятся.
Мониторинг – это отлично. А как выясняете причину, если видите, что течет или много CPU? twitter.com/oelifantiev/st…

Сегодня практически во всех браузерах есть инструменты Timeline и профилировщики. Лучше всего с этим в Chrome

Timeline позволяет понять, что делает браузер и на что тратит ресурсы. Если есть проблемы начинать стоит с него developers.google.com/web/tools/chro…

И даже если нет проблем, стоит туда переодически заглядывать. Можно лучше разобраться как работает браузер и всегда можно что-то улучшить

Профилировщики позволяют не гадать и дают детальные отчеты: на что конкретно тратится время и память, есть ли утечки
notion image

Крайне рекомендую освоить эти инструменты, если еще этого не сделали. Однажды они вам обязательно пригодятся

Иногда инструменты не могут помочь. Например,если вам нужно оценить производительность разных частей функции или код выполняется под node.js

Тогда можно использовать старый "дедовский" метод: var time = Date.now(); // оцениваемый код console.log(Date.now() - time);

Но стоит знать, что дискретность Date.now() (как и new Date()) колеблется и может быть равна 16ms (зависит от движка и ОС)

Почти во всех браузерах есть более точный метод performace.now() developer.mozilla.org/en-US/docs/Web…

В node.js немного сложнее, но тоже можно - делается с помощью process.hrtime()

Делается так: var time = process.hrtime(); // код var tdiff = process.hrtime(time); console.log(parseInt(tdiff[0] * 1e3 + tdiff[1] / 1e6));

🔥Тред (Роман Дворнов)
@jsunderhood а почему не console.time/timeEnd?
Да, тоже можно использовать. Но не везде доступно (например, в воркерах) и не всегда нужно выводить в консоль twitter.com/boriscoder/sta…

@jsunderhood можно из кода запускать профилирование и выгружать в файлы: github.com/node-inspector…
Круто, не знал. Спасибо за наводку twitter.com/oelifantiev/st…

@jsunderhood а известна хорошая понятная статья как разбирать дампы? Куда смотреть, как интерпретировать, что значат цифры и т.п.
Статей не припомню, но в документации все не плохо расписано developer.chrome.com/devtools/docs/… developer.chrome.com/devtools/docs/… twitter.com/oelifantiev/st…

Для сетевой активности в браузерах можно использовать Navigation Timing (w3.org/TR/navigation-…)и Resource Timing (w3.org/TR/resource-ti…)

Для памяти пока можно получить только грубые цифры: в браузере в объекте performance.memory, в node.js через process.memoryUsage()

Профилировщики это хорошо. Но можно пойти еще дальше, посмотреть какой из кода генерируется байткод,как он оптимизируется и деоптимизируется

Пока это делается не так удобно. Нужно запускать браузер (такая возможность есть у Chrome и м.б. Opera) или ноду с определенными флагами

Для node.js это делается так (целиком не умещается в один твит, потому картинкой)
notion image

Будет сгенерировано два файла: code.asm и hydrogen-[чтото].cfg Файлы можно изучать с помощью IRHydra2 от @mraleph mrale.ph/irhydra/2/

Впервые стал пользоваться, когда начал работать над CSS парсером. Сделал ряд для себя открытий и смог ускорить код, исключив деоптимизации

🔥Тред (Роман Дворнов)
Вот пример, казалось бы, что тут не так? (str всегда не пустая строка) function isComment(str){ return str[0] === '/' && str[1] === '*'; }

Функция деоптимизировалась из-за второго условия. Так как если строка меньше двух символов, то происходит выход за пределы строки

Чтобы не было деоптимизации нужно сделать так: function isComment(str){ return str.length >= 2 && str[0] === '/' && str[1] === '*'; }

Воскресенье


И в коде было еще несколько мест, где был выход за пределы массива, которые приводили к деоптимизации.

🔥Тред (Роман Дворнов)
@jsunderhood А в профайлере было видно или только в IRHydra? (профайлер же тоже маркирует деоптимизированные функции)
Да, профайлер помечает функции желтым треугольником, но не показывает проблемное место в коде – сложнее разобраться twitter.com/oelifantiev/st…

@jsunderhood Это не оптимизация а мудрое решение, если об этом не думать то и до дыр недалеко :) В общем секюрность.
Не оптимизация, но исключение препятствий для нее. В JS выход за пределы не фатальная ошибка -> об этом не думают twitter.com/POS_troi/statu…

@jsunderhood опимально сначала str[0] && потом проверка длины && потом str[1]. Почему так - почитайте как выполняются несколько && в if
Во-первых, это был пример того, что деоптимизации могут возникать в неочевидных (если не знать) местах twitter.com/stewardtz/stat…

Во-вторых, сравнение строк дороже, чем проверить длину. И это упрощенный код, функция на самом деле выглядит так github.com/lahmatiy/css-p…

@jsunderhood рад, что irhydra помогла!
Пользуясь случаем, хочу поблагодарить за такой великолепный инструмент. Спасибо! twitter.com/mraleph/status…

Еще пример, функция не оптимизировалась из-за этого if'а if (ch === '\n' || (ch === '\r' && next !== '\n') || ch === '\f') { .. }

Все потому, что в строке не было \r и условие с next не срабатывало -> не было информации о типах для next и это блокировало оптимизацию

Стоило поменять местами проверки: if (ch === '\n' || (next !== '\n' && ch === '\r') || ch === '\f') { .. } и функция стала оптимизироваться

Хотя, казалось бы, стало хуже – чаще 4 проверки вместо трех. Но функция стала работать быстрее, потому что стала оптимизироваться

Это к тому, что нужно использовать инструменты, чтобы увидеть как код выполняется на самом деле. Вы можете заблуждаться насчет оптимальности

🔥Тред (Роман Дворнов)
@jsunderhood а не помнишь как профайлер называл причину деоптимизации там?
Хотел по-быстрому воспроизвести и заскриншотить, но не получилось. Что-то вроде out of bounds twitter.com/oelifantiev/st…

Наконец-то посмотрел рекомендованный доклад Андрея @listochkin youtube.com/watch?v=xPFRUM… – отличное выступление

@jsunderhood а тут было что-нибудь про insufficient type feedback да?
Да, если не ошибаюсь, оно и было :) twitter.com/oelifantiev/st…

Потому что нет хорошего детального парсера, который, например, раскладывал бы значения опираясь на спеки. twitter.com/RReverser/stat…

Подробнее об этом я рассказывал в докладе в прошлое воскресенье youtube.com/watch?v=qfEAt3…

"Чистый" есть парсер, посмотри как реализована функция minify github.com/css/csso/blob/… А вот локаций нет, это да twitter.com/RReverser/stat…

Это так. Но все сильно упрощается, если в AST уже все разложено по полочкам. На самом деле экспериментирую twitter.com/RReverser/stat…

По сути парсер не монолит, а состоит из грубого парсера + набор специализ. парсеров. Метод "прогрессивного jpeg" :) twitter.com/RReverser/stat…

И это должно идти из коробки. Вот Babel тоже модульный, все трансформации – плагины. Но многие включены в поставку и используются по дефолту

Речь про "хороший детальный". PostCSS хороший парсер, но не детальный. В CSSO (gonzales) детальный, но не так хорош twitter.com/RReverser/stat…

Пока он не закончен, нет смысла сравнивать. Но не только мне хочется парсер с детальным AST из коробки twitter.com/RReverser/stat…

Да видно недопонимание. Я согласен, что все названое должно быть отдельными инструментами (пакетами). twitter.com/RReverser/stat…

Я не знаю почему парсер был вшит в csso. Но он будет вынесен. И нужно новое AST – потому и новый парсер twitter.com/RReverser/stat…

Структура селекторов, @-правил, значений по спекам. Особо не хватает: что значат разные части композитных значений twitter.com/RReverser/stat…

Можно и так. Но хочется еще и быстрый парсер :) Например, чтобы допарсить, нужно заново токенайзить строки – оверхед twitter.com/RReverser/stat…

Был, чтобы разметить границы фрагментов (селектор, декларация etc) с учетом строк, комментариев, баланса скобок и тд twitter.com/RReverser/stat…

Большинство парсеров токенизируют прежде чем собирать AST, не важно насколько оно детальное, так проще twitter.com/RReverser/stat…

@jsunderhood Круто как. А только для CSS или для других синтаксисов тоже?
Только для CSS. У других синтаксисов своя специфика и другое AST. twitter.com/toivonens/stat…

Как то незаметно перешли на тему парсеров :) Кстати, работая с AST обнаружил, что собирать его из объектов гораздо лучше, чем из массивов

Если сохранять AST в строку (json), то массивы, конечно, компактнее. Но массивы требуют больше памяти и операции с ними медленней

Не говоря уже о том, что с массивами нужно помнить по какому смещению и что находится, легко ошибиться, код сложнее читается

@jsunderhood кстати интересный вопрос, как ты оцениваешь DevTools в Firefox? или используешь исключительно Chrome?
В основном Chrome, да. DevTools в Firefox сильно отстают по фичам, медленно работают, но иногда использовать можно twitter.com/viatsko/status…

Кажется, что совсем без массивов в AST не обойтись. Но я попробовал использовать однонаправленные списки вместо массивов...

Генерация AST получилась быстрее и дешевле по памяти. Но читаемость (JSON) стала хуже. Вот не знаю, что важнее :) экспериментирую дальше

🔥Тред (Роман Дворнов)
Кстати, списки и операции над ними одна из первых тем о структурах данных. Но во фронтенде практически никто их не использует

Между тем списки могут помочь сэкономить память и ускорить определенные решения, например, там где не нужно обращение к элементу по индексу

К примеру, большинство имплементаций event listener'а хранят подписки как карта-массив-дескриптор,но можно хранить и как список карт событий

Как выбор структуры данных влияет на память и время я рассказывал в докладе в прошлом году slideshare.net/basisjs/ss-323… slideshare.net/basisjs/ss-323…

Более того, в случае с event listener'ом списки и более надежное решение, нежели массивы

Если при обходе массива он мутирует (добав./удал. обработчик), то возможна ситуация, что обработчик или не отработает, или отработает дважды

🔥Тред (Роман Дворнов)
@jsunderhood хочу увидеть обсуждение редакторов кода. Тема, конечно, холиварная, но все-же)))
А что их обсуждать? На вкус и цвет, как говорится... twitter.com/stigmat4j/stat…

Зависит от многого. Часто навешивается больше, чем срабатывает. Когда я делал на списках, сравнивал, было ~так же. twitter.com/RReverser/stat…

@jsunderhood А банальный /^/*/.test(str) не пробовал? В идеале должно быть проще и короче.
Проще и короче. Но куда медленнее. И я так же использовал str.charCodeAt(N) вместо str[N] jsperf.com/check-string-v… twitter.com/ruGreLI/status…

Не знаю делаются ли вообще оптимизации для RegExp. Кажется это невозможно (или оч сложно), т.к. они имеют side effect. Призываю @mraleph :)

@jsunderhood @mraleph Позор, что регулярки не оптимизируются. Интересно, что в IE разница гораздо меньше.
В IE исторически самая быстрая реализация RegExp, еще со времен IE5.5. Потому что ее писали дяди с бородами :) twitter.com/ruGreLI/status…

@jsunderhood btw, V8 не любит неявное преобразование boolean->number.
Ого! Не подумал бы, что настолько не любит, разница 8-10 раз. Спасибо, будем знать twitter.com/mraleph/status…

@jsunderhood @mraleph Нетрудно заметить что в изначальной форме /^/*/.test(str) всякие RegExp.$1 заведомо не используются.
Вам может быть очевидно, но оптимизатору – нет. Проблема в том, что RegExp.$1 может использоваться вне функции. twitter.com/ruGreLI/status…

@jsunderhood @mraleph не может, потому что регулярка нигде не сохранена.
Я возможно вас удивлю, но это не нужно (function(s){ /\d/.test(s) })('asd123'); console.log(RegExp.lastMatch) // 1 twitter.com/ruGreLI/status…

RegExp.$1..$9, RegExp.lastMatch и остальные – статические readonly свойства класса RegExp developer.mozilla.org/en-US/docs/Web…

@jsunderhood работу нестандарщины никто не гарантирует. А не стандартизировали это, наверняка, именно чтобы не гарантировать поддержку.
Это часть платформы, есть в любом браузере со времен как минимум IE5.5. Не гарантировать - значит сломать Web. twitter.com/ruGreLI/status…

Итак, скоро заканчивается мое время в качестве ведущего, потому финальная история с философским, надеюсь, финалом :)

Начну с продолжения темы про списки :) Они используются в платформе, хоть это и не всегда очевидно

Например, DOM узлы имеют childNodes. Но дети так же представляют собой двунаправленный список, "связаны" по previousSibling/nextSibling

Не смотря на то, что childNodes ведет похоже на массив, обычно это интерфейс к двусвязному списку + индекс (кеш) по необходимости

Дизайн DOM таков, что браузеру нет нужды обращаться к произвольному ребенку ноды, потому не создаются лишние структуры -> экономия ресурсов

Построение индекса для ноды иницируется только нашим с вами кодом. Он строится при первом обращении к childNodes, путем обхода всего списка

Инвалидация кеша происходит при мутации списка, т.е. добавлении, удалении или перемещении дочернего узла

Потому лучше избегать childNodes для обхода и использовать ссылки, или кешировать его в локальный массив, если при обходе возможна мутация

Так что, даже если единожды делается childNodes[N], то браузер вынужден обойти весь список, построить индекс и только тогда вернуть N-ю ноду

И вот кажется, что можно было бы избежать построение индекса, раз запрашивается лишь одна нода (оптимизация), но обычно это нельзя сделать

Причина в том, что обычно JS и DOM разные компоненты, работают через биндинги, не имеют общих данных и оптимизатора

Сделано так для лучшей модульности. Но может вести к performance bottleneck или утечкам памяти (напр. часть цикла в JS,часть в DOM)

Насколько знаю, пока только в MS решились на объединение JS c DOM, случилось это еще в IE9 blogs.msdn.microsoft.com/ie/2010/09/02/… blogs.msdn.microsoft.com/ie/2010/08/04/…

Это помогло улучшить IE, но не сильно. Т.к. имплементация DOM старая (20 лет), очень медленная и никогда серьезно не рефакторилась

Но они начали работать над этим, и в некотором будущем появится в Edge blogs.windows.com/msedgedev/2015…

Когда закончат, у нас будет ответ – насколько эффективным может быть DOM и бенефиты от тесной его интеграции с JS

В случае успеха, этот опыт будут перенимать другие браузеры. Так что нас может ждать очередная "гонка вооружений"

Если в результате DOM ускорят в 1,5-3 раза, появится новый класс оптимизаций основанный на структуре DOM и его использования в JS...

... то это может изменить наш подход к решениям. Например, концепции вроде Virtual DOM потеряют смысл в плане ускорения (останется удобство)

🔥Тред (Роман Дворнов)
Это все к теме про держать руку на пульсе, самообразование, получение фундаментальных знаний, анти-хайпа и т.д.

Можно не знать всего этого, говорить что DOM медленный, лучше React ничего не будет, алгоритмы не нужны и на изучение нового нет времени...

А можно не верить на слово, изучать, копать и делать эффективно большие сложные штуки, с заделом на будущее, или то, что еше никто не делал

Все зависит только от вас, это личное дело каждого. Выбор за вами.

🔥Тред (Роман Дворнов)
Все, больше монологов не будет :) В оставшееся время буду рад ответить на вопросы, если они у вас остались

@jsunderhood Про DOM было интересно. Также интересно, и откуда инфа. Какие источники/исходники копались для ее получения?
Регулярное чтение блогов, статей, спек, работа с профилировщиками, эксперименты, изучение исходников браузеров etc twitter.com/webholt/status…

Если хотите начать разбираться как работают браузеры, начните со статьи Tali Garsiel html5rocks.com/en/tutorials/i… (руск. html5rocks.com/ru/tutorials/i…)

@jsunderhood Просто такие «подкапотные» вещи обычно мало где услышишь.
Где-то 5 лет назад в Chrome, мы словили ошибку memory access violation, что в принципе нереально во фронтенде... twitter.com/webholt/status…

Она возникала при обращении к коллекции, которую возвращал getElementsByTagName(). Там были узлы, которых уже нет, то есть ссылки в никуда

Оказалось, в webkit делали оптимизацию DOM и сломали инвалидацию кеша для getElementsByTagName(), когда мутирует поддерево ноды

Так я узнал, что определенных методов бывают кеши и не только у методов :) потом покопал в эту сторону...

Был еще крутой блог peter.sh – пока не перестал обновляться в 2013. Там были подробности комитов в Blink/v8 каждую неделю

🔥Тред (Роман Дворнов)
Подписывайтесь на блоги браузеров. Там не только новости, но и хорошие технические статьи


Хорошие статьи вроде таких webkit.org/blog/3362/intr… blogs.msdn.microsoft.com/ie/2014/10/09/…

@jsunderhood сделает ли Servo революцию? Вроде обещают крутой многопоточный рендеринг. Будет ли x10 более быстрая работа с DOM?
Не знаю. Главный вопрос, хватит у них ресурсов, чтобы сделать задуманное. Браузер очень большая сложная система twitter.com/PetrMyazin/sta…

Конференции, которые стоит посетить в России WSD wsd.events CodeFest codefest.ru FrontTalks fronttalks.ru

Хороший фид ежедневных новостей @webstandards_ru Наверняка уже читаете, но все же :)

Пара хороших подкастов: radiojs.ru – про фронтенд (участвовал пару раз) sdcast.ksdaemon.ru – не только про фронтенд :)

Вот и все. Совсем скоро полночь, и нужно успеть сказать заключительное слово, пока что нибудь не превратилось в тыкву :)

Закрепляйте знания практикой, экспериментируйте, участвуйте в проектах. Если нет своего проекта – найдите подходящее вам в open source

Свои знания и опыт я вкладываю в SPA фреймворк basis.js (github.com/basisjs/basisjs), и различные инструменты (github.com/lahmatiy)

Basis.js не хватает документации, туториалов и всякого такого. Если у вас есть желание и возможность помочь – напишите мне :)

Если у вас остались вопросы, хотите что-то обсудить – не стесняйте, пишите. Еще меня можно встретить на конференциях и митапах

С вами был я, Роман Дворнов. Мой твитер @rdvornov Спасибо, что были со мной эту неделю! Архив недели: jsunderhood.ru/rdvornov/

Ссылки