operatino

23 ноября 2015, Amsterdam

# Понедельник 163 твита

Всем привет! Следующие 7 дней с вами на связи Роберт Харитонов @operatino. Руковожу командой разработки, последний год живу в Амстердаме.

8:05

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

8:06

Примерное расписание:

8:10

3. Работа в команде и опенсорс.
4. Компонентный веб.
5. Фреймворки.

8:10

Куда то еще вмешаем о карьерном росте фронтендера, и любые темы по запросу от читателей.

8:11

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

8:12
@jsunderhood лучше бы про амстердам поговорили :)
как там живется? не скучно?

Про Амстердам тоже можем но не много, об этом уже ранее много говорили другие авторы. twitter.com/anton_davydov/…

8:13
@jsunderhood в "будущем фронтенда" заденьте прогнозы на 2016 год плиз)

Обязательно затронем 2016, а так же помечтаем о далёком будущем twitter.com/SheVasya/statu…

8:17

Разработкой занимаюсь около 5-6 лет. Последние года 3 делю на половину с управлением тех. командами. JS, NodeJS, Devops, автоматизация.

8:25

Ныне работаю в Liberty Global, самая большая кабельная компания в Европе, где мы разрабатываем свой, европейский "нетфликс".

8:25

У нас на проекте - React + Fluxible, как база изоморфного приложения и инструменты для full-stack тестирование - unit, integration, UI.

8:26

До этого работал 3,5 года в Одноклассниках, разрабатывал фронтенд и вёл команду из 10 человек; в Backbase консультантом по фронтенду.

8:30

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

8:31
@jsunderhood зачем? Если всё равно затыки с GEMA ограничат контент на ~50% от того что есть у нетфликс в америках

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

8:34

Про индустрию видео трансляций как в интернете, так и на тв, тоже с удовольствием готов поговорить. Netflix, тв приставки, запись видео и тп

8:38
@jsunderhood Окей. И вам можно его транслировать на всю европу? Просто Нетфликс в Нидерланды пришел, а вот в de лишь часть контента доступна

В каждой стране правила могут отличаться, пока больше знаю именно про NL. Мы можем записывать почти все для реплея.
twitter.com/ostelaymetaule…

9:36

Записывать контент на свой сет-топ бокс можно вообще любой. То есть нажав на сайте кнопку record, можно для себя качать что угодно.

9:37

У нас есть и HBO, и BBC и FOX контент, с кучей сериалов и фильмов. Все это получаешь с обычной кабельной/интернет подпиской.

9:38

Но основное различие с Netlix конечно в том, что у нас по большей части запись, т.е. вместе с рекламой.

9:39
@jsunderhood Как ты меньше чем за три года дорос до тех лида?

Говоря откровенно, не могу сказать что это целиком и полностью моя заслуга. Время и место повлияло значительно.

twitter.com/roman01la/stat…

9:42

Пришел первым фронтенд разработчиком в команду, до этого UI делали full-stack инженеры. Нужно было растить культуру разработки интерфейсов.

9:44

Постепенно начали нанимать новых фронтенд разработчиков, которым я сначала был ментор.

9:45

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

9:45

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

9:47

Отсюда можно выявить, что по личным предпочтениям и способностям, я больше не инженер, я гибридный технарь-менеджер.

9:48
@jsunderhood расскажешь подробнее? У меня что-то похожее, но вместо full-stack бэкенды которые стремятся UI пилить на JSF.

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

twitter.com/vladimore/stat…

9:50

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

9:50

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

9:52

В идеале, для продуктовой команды нужно как можно больше T-shaped специалистов. Что бы каждый мог все, но продуктевней был в чем то одном.

9:53

.@life_maniac @webholt @webholt Конечно не плохо, разработчиков нужно больше, чем руководителей.

9:54
@jsunderhood я считаю, все могут все. нет программиста который может в реакт+флюкс и неможет в sql\простенький бэкенд и в джаву\пхп\скалу\го

Переехав в Центральную Европу, заметил что в ИТ компаниях это же правило распрастраняеться и на менеджеров.

twitter.com/sevaisnotcow/s…

9:59

Если работаешь с тех командами, должен знать основы разработки на хорошем уровне. Это касаеться менеджеров всех мастей.

10:00

Продолжая тему специализации — отдельные верстальшики/“js-программисты”, это переходный период. В инт. сообществе популярней full-stack.

10:03

Я начинал тоже только с верстки, потом переключился больше на JS/NodeJS. Сейчас больше смотрю в DevOps и управление.

10:05

Помогает определиться с карьерной целью, и искать самые короткие пути к ней. Иногда правда бывает сложно определиться.

10:06
@jsunderhood Теперь это модно называть product developer.

Что очень правильно! Сравнивая что я вижу в NL и RU, успеху во многом благодарны именно фокусу на продукт.

twitter.com/freiksenet_ru/…

10:08

В странах СНГ больше узкоспециализированных профессионалов. Что конечно влияет на глубину познаний, но хуже работает для продукта.

10:09

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

10:10
@jsunderhood это может быть вызвано крупнейшими технол. игроками в стране. например яндекс в отличии от гугла ищет очень узких специалистов

На это первым делом влияет возраст ИТ рынка.

twitter.com/sevaisnotcow/s…

10:12
@jsunderhood Какой-то бешеной популярности именно фулстек-разработчиков я пока не заметил. Всё-таки фронтенд/бэкенд обычно делят.

Популярность не бешенная, но встречается часто, особенно у фрилансеров.

twitter.com/sapegin/status…

10:14

Современного фронтенда разработчика уже смело можно называть full-stack девелопером. JS на клиенте/сервере, на мобильных и десктопе.

10:15

Что уж там, даже Nginx можно на JS конфигурировать уже :)

10:16
@jsunderhood Если нужно делать девопс, то надо учится, а не ждать когда наймут дев опса.

Однозначно. Очень полезный навык для любого Senior/Lead разработчика, будь то FE или BE.

twitter.com/freiksenet_ru/…

10:17

.@from_anywhere T-shaped подразумевает хороший ср. уровень по разным навыкам, и углубление в определенной области en.wikipedia.org/wiki/T-shaped_…

10:18

Именно это помогает делать хорошие продукты на самом деле. Делать иновации, а не догонять и копировать.

10:19
@jsunderhood а как много разработчиков, приехавших из СНГ, работает в местных кампаниях?

Достаточно много, в текущей компании, случайным образом попал в коллектив где больше 50% русскоговорящих :)

twitter.com/lastfin/status…

10:20

В целом, в Амстердаме хватает приехавших специалистов со всего мира. Много людей из Испании, Сербии, Италии, Индии и конечно СНГ.

10:21
@jsunderhood 40% населения Амст., спецы приехавшие за последние 15лет
10:31
@jsunderhood сколько времени занял период самообучения?

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

twitter.com/KelsaDim/statu…

10:35
@jsunderhood по поводу карьерного роста - что думаешь о докладе Вадима Макишвили "36"?

Хороший доклад. Но мне только 24, пока мало могу о нем судить.

twitter.com/exdeniz/status…

10:37

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

10:38

Мне бы лично было стыдно называть себя верстальщиком в 36 лет. К этому времени нужно быть или главным разработчиком, или CTO/директором.

10:40

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

10:42

Но не моймите не правильно, ни к кому никаких претензий не предъявляю. К тому же, Вадим не просто верстальщик.

10:45
@jsunderhood @mistadikay карьера превыше всего?

Немного грешу трудоголизмом, до сих пол как минимум один полный выходной трачу на пет проекты, доклады и кар. рост.

twitter.com/corristo/statu…

10:47

Самое сложное понять где остановиться, видя много крутых людей вокруг, хочеться не отставать.

10:49

Для быстрого роста нужно выбирать кумиров для мотивации и стараться всегда поднимать планку, будь то карьера или личная жинь/увлечения.

10:51

Самым лучшим инструментом для мотивции для меня всегда были публичные доклады.

10:52

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

10:53

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

10:55
@jsunderhood почему быть руководителем — высокая планка? Что мешает идти по японскому пути и в 36 быть суперкрутым верстальщиком?

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

twitter.com/andrey_sitnik/…

10:56

В 36 почетно быть любым крутым специалистом. Если не руководитель, то главный разработчик/архитектор/инженер.

10:59

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

11:01

.@webholt Такое часто встречается, к сожалению. Но посредственность именно в карьере не показатель, если фокус на семью или другие интересы.

11:03
@jsunderhood больше всего интересует средняя стоимость жизни в амстердаме + средняя зп фронта

В кратце - средняя зп 50к в год до налогов, с рулингом это ~3к на руки. Аренда жилья ~1300, на еду/досуг ~1000 евро

twitter.com/safinalexey/st…

11:11
@jsunderhood А какой верхний предел у лида/архитекта?

Предел в районе 80-90к евро до налогов.

twitter.com/freiksenet_ru/…

11:19
@jsunderhood как относишься к идее "to be the weakest player in the team"

Хорошая тема. Нужно всегда иметь рядом хороших специалистов, как пример для подражания и для мотивации к росту.

twitter.com/wizardzloy/sta…

11:27

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

11:29
@jsunderhood можно и в Москве столько же получать. А копить получается?

Копить получается достаточно. Тут больше вопрос об уровне жизни и окружении, нежели о крутом заработке.

twitter.com/you_katan/stat…

11:30

Если хочеться много заработать и откладывать, самые лучшие варианты - работать в Украине/Беларуси, или фрилансить на штаты с дешевого места.

11:31

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

11:33
@jsunderhood Ну вот для меня достаточно=€1500- 2000 в сбережения, при сохранении комфортного уровня жизни. Насколько реально в Европе?

Зависит от многих факторов. Если спец. выше среднего, и не нужно содержать семью, то реально.

twitter.com/you_katan/stat…

11:35

Мой мотив к переезду из Риги в Амстердам был именно о желании сближения с инт. сообществом и поднятия уровня соц. услуг и окружения.

11:38
3. Работа в команде и опенсорс.
4. Компонентный веб.
5. Фреймворки.

Для тех, кто только подключился, напоминаю, сегодня мы знакомимся и говорим о личном.
twitter.com/jsunderhood/st… twitter.com/jsunderhood/st…

11:40
@jsunderhood Для EU тоже tax ruling работает?

Ruling в виде необлагаемых налогом 30% от зп это фишка только Нидерландов. За счет этого плачу примерно 20% от зп.

twitter.com/freiksenet_ru/…

11:42

.@freiksenet_ru Работает, там главное что бы ранее не жил в Нидерландах или рядом в пределе скольки то км.

11:44
@jsunderhood А что ты сейчас учишь/делаешь, чтобы в 36 было не стыдно?

Углубился в отрасли фронтенд разработки и управшении командой, изучаю DevOps, основы администрирование и BE разраб.

twitter.com/dmfilipenko/st…

11:46

В ближайший год буду дальше заниматься DevOps и поднимать навыки скрам мастера. Не исключая занятия фронтендом конечно.

11:47

.@dmfilipenko Сборка, деплой, мониторинг, автоматизация этих задач, поддержание серверов.

11:48
@jsunderhood как искал работу при переезде? Целенаправленно искал в Амстердаме?

Искал стандартно, через job boards и гугл. Еще очень удобно, если тебя представляет какое-то рекрутинговое агенство

twitter.com/_sashashakun/s…

11:50

Амстердам выбрал намеренно, один из самых англоязычных городов в Европе, лучше для жизни, и дешевле чем Лондон.

11:51

В Берлине тоже неплохо, но по сравнению с Нидерландами, без знания локального языка в Германии менее комфортно.

11:51

.@dmfilipenko Обучение происходит параллельно с имеющимися специалистами + конечно pet projects.

11:54

.@kinday Вот этих ребят часто вижу twilio.com @backendsecret

11:55
@jsunderhood масштаб влияния на мир - вполне себе показатель крутизны
11:57
@jsunderhood масштаб влияния на мир - вполне себе показатель крутизны

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

twitter.com/green343/statu…

11:58
@dimaip @jsunderhood с бэкенд разработчиками очень часто слышу, что "javascript не язык". но как правило это говорят середнячки

Хорошие разработчики понимают, что язык это всего лишь инструмент. JS очень хорошо живет в своей нише.

twitter.com/sevaisnotcow/s…

12:43
@jsunderhood Если все будут главными, то кому работу делать?

До главного руководителя/архитектора/разработчика еще дорасти надо. Так что всегда хватит джуниоров и мидлов.

twitter.com/as_Crazy/statu…

12:44
@jsunderhood тем более можно скакать из профессии в профессию. У меня знакомый в 29 лет ушел в Junior C# и прекрасно себя чувствует
12:48
@jsunderhood велик уже купил?

Не смотря на стереотипы, не все на велосипедах тут ездят, мне хорошо на общественном транспорте. Почитать можно.

twitter.com/i_told_ya/stat…

12:50
@jsunderhood @green343 как измерить масштаб влияния на мир?

Не однозначной метрики, от фоловеров/лайков до успешности твоей компании/бизнеса/команды.

twitter.com/_sashashakun/s…

12:51
@_sashashakun @jsunderhood в попугаях никак не измерить, чисто интуитивно; например, повлиял на проект, которым пользуется миллиард человек
12:51
@jsunderhood почему ушел из одноклассников?

В ОК я проработал 3.5 года, хоть и меняя квалификации, все равно этого достаточно для одной компании.

twitter.com/vlkosinov/stat…

12:57

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

12:58

Хотелось свежего взгляда на вещи, и переосмысления процессов, которые в рамках компании черстневеют и редко меняються.

13:00
@jsunderhood я думаю что надо концентрироваться не на конкретных технологиях, а на подходах и концепциях, тогда освоение нового модного 1/2

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

twitter.com/_sashashakun/s…

13:03
@jsunderhood 2/2 фреймворка будет быстрее и проще. Чтобы иметь подобный кругозор, нужно не зацикливаться на веб-технологиях, а изучать

Относительно того, стоит ли концентрироваться именно на веб-технологиях, тут тоже работает принцип T-shaped скиллов

twitter.com/_sashashakun/s…

13:06

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

13:06
@jsunderhood и в догонку ещё вопрос, при всем многообразии источников информации как отфильтровать действительно нужные?

Хороший вопрос. Информации сейчас очень много, я стараюсь накапливать самые лучшие рекоммендации из твиттера.

twitter.com/_sashashakun/s…

13:07

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

13:08

Сначала все посылаю в Pocket, в котором потом ищу релевантные ссылки. Что то читаю сразу.

13:09

Расскажите как вы фильтруете информацию и отбираете лучшие материалы для изучения?

13:09
@jsunderhood Лайки в Твиттере, сохраняю посты в Feedly и найденные ресурсы в Pocket.
13:16

.@roman01la В Pocket еще крутая штука - рекомендованные подборки по trending/best of и тп.

13:18
@jsunderhood твиттер+гитхаб и еженедельные рассылки,
13:19
@iamstarkov @jsunderhood эффективно ли рассылки фильтруют контент? Все ли читаешь оттуда? Сколько уходит времени чтобы прочитать выбранное?
13:19
@iamstarkov @jsunderhood эффективно ли рассылки фильтруют контент? Все ли читаешь оттуда? Сколько уходит времени чтобы прочитать выбранное?

Лично я не читаю рассылки, там обычно слишком много шума. Ориентируюсь в основном на твиттер.

twitter.com/_sashashakun/s…

13:19

Если появилось что то важное, что нельзя пропустить - это дойдет до тебя в твиттере. Особенно если фоловишь интересных тебе людей.

13:20
@jsunderhood используешь ли es2015?

Частично. В своем нодовом проекте пока нет, потому что поддерживаю с 0.10, и не хочу усложнять транспайлерами.

twitter.com/iamstarkov/sta…

13:22

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

13:23
@jsunderhood читаешь твиттеры проектов, конкретных людей, компаний?

Читаю все вместе, unfollow если вижу слишком много не релевантной информации.

twitter.com/_sashashakun/s…

13:25

Сделаю пока перерыв, продолжим вечером. Можете мне пока покидать вопросов по теме дня - “1. Знакомство, планирование недели”.

13:31
@jsunderhood а если начал в 35?

В таком случае это достойно внимания. Всегда ценю сильные решения и порывы к личностному и проф. росту.

twitter.com/IgorDTP/status…

13:32
@jsunderhood есть еще вариант - в консалтинг и малый бизнес
13:48

.@iamstarkov в нашем случае — именно так, можно и browserify вместо webpack

14:22
@jsunderhood а если и в рамках одной компании, есть куда расти и совершенствоваться?

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

twitter.com/KSDaemon/statu…

14:58

Но это чаще исключение. Полезно и окружение менять и менеджмент.

15:01
@flackus @jsunderhood когда нсть внутренняя гармония, ты не делаешь рассказ на эту тему
15:01
@jsunderhood не уверен что публичность может помочь в карьере, скорей как хобби, но вот контрибут в опенсорс вполне

Много историй успеха, когда публичность помогает карьерному росту. Возьмём того же @dan_abramov с Redux и RHL.

twitter.com/raxpost/status…

15:04

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

15:06

Но если растешь как руководитель или разработчик, это помогает очень относительно. Все зависит.

15:07
@jsunderhood я именно об этом, просто ходить и рассказывать доклады про разные вещи малополезно

Это полезно с точки зрения мотивации к обучению/росту. И помогает сделать твой опенсорс проект более значимым.

twitter.com/raxpost/status…

15:22
@jsunderhood а ещё, если заботится о том, чтобы аудитория реально понимала "о чём там було”, то прокачивается умение говорить без буллшита
16:07
@jsunderhood я правильно понимаю: вы фронтендер, который ,что б стать менеджером, занимается девопс ? не заблудитесь ?

Я разрабатываю и руковожу FE командой. Девопс - это часть обязанностей.
Спасибо за беспокойство, не заблужусь :)

twitter.com/ipronix/status…

18:03

Я смотрю многих смущает термин “главный разработчик”, по моему это не обязательно руководитель, а просто очень опытный специалист.

18:04

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

18:05
@jsunderhood, ты уже рассказывал про своё образование? Есть высшее?

Про образование не рассказывал. Закончил среднюю школу, это в Латвии 12 классов. Вышку пропустил в угоду работе.

twitter.com/ilnurkhalilov/…

18:06

Но подумаываю заочно пройти пару курсов на Computing & IT and Business openuniversity.edu/courses/qualif…

18:10
@jsunderhood старший/главный/ведущий
18:10
@jsunderhood архитектор еще может быть
18:10
@raxpost @jsunderhood если бы мы все работали только ради денег, то писали бы только на Java или SAP ;)
18:13

Статистики ради, кем вы себя видете через N лет? Ведущим разработчиком или руководителем?

18:15
@jsunderhood проблем с трудоустройством в недерландах без высшего образования нет? Знаю вот в германии сложно, а в Чехии чуть ли не возможно

Я гражданин ЕУ, возможно поэтому нету. Не нужно разрешение на работу, никто даже не спрашивал про образование.

twitter.com/sevaisnotcow/s…

18:19

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

18:20

Но есть еще вариант по визе “для талантливых”. Нужно публикаций только добрать и докладов побольше в копилку.

18:21

Как вы относитесь к публичным, техническим выступлениям? Выступаете, планируете и считаете это полезным или пустой тратой времени?

18:25

Как упоминал ранее, для меня это мощный инструмент роста. Делаю по 2-4 доклада в год, разных размеров.

18:27

Сейчас стараюсь выступать только на английском, как на митапах так и на европейский конференциях.

18:27

Митапы в Амстердаме очень популярная тема, минимум 5 активных груп только по фронтенду.

18:28
@jsunderhood Пустой тратой чужого времени.
18:29

.@webholt Расскажите почему такое мнение?

18:29
@jsunderhood Так же как к написанию статей, книг, скринкастам и т. п. Очень полезно, но надо стремится делать то лучше всех, а не как все.
18:30
@jsunderhood это мощная мотивация заставить себя в чем-то зазбираться действительно хорошо
18:30
@jsunderhood у нас так если не ошибаюсь: разработчик - главный - ведущий - архитектор - тех дир
19:33
@jsunderhood не уверен что публичность может помочь в карьере, скорей как хобби, но вот контрибут в опенсорс вполне
19:34
@raxpost @jsunderhood Еще как может. )
19:34
@jsunderhood я возможно упустил, расскажи о пет проектах, и как к ним пришел?

Итак, пет проекты - в освновном я занимаюсь проектом @SourceJS. Это платформа для библиотек компонентов.

twitter.com/errorent/statu…

19:36

С помощью @SourceJS можно организовать библиотеку блоков для компонентов на разных технологиях от Jade до React.

19:37

Последняя интеграция с проектом от @sapegin с React включает в себя хот релоад, навигацию и авто документацию github.com/sourcejs/sourc…

19:39

О компонентном вебе мы поговорим в четверг, поэтому двигем дальше. Второй проект, который пока на паузе - devshelf.us

19:40

Идея проекта заключалась в том, что бы собрать самые лучшие, рекомендованные статьи по тегам/темам. С голосованием от сообщества.

19:40

Судьба проекта пока не известна, последние мысле сделать проект-парсер для awesome подборок ссылок github.com/sindresorhus/a…

19:41

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

19:43

Статьи последнее время пишу редко, последняя была опубликована на @smashingmag smashingmagazine.com/2015/04/an-in-…

19:45

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

19:46
@jsunderhood привет, а подскажи, что за группы?
20:04
@jsunderhood Расскажи про процесс публикации на @smashingmag

В случае с моей первой статьей, все было просто — мне написали уже после публикации моей статьи в личный Medium.

twitter.com/vladyslavmoroz…

20:06

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

20:07

Но в целом процесс таков - лучше заранее спросить актуальна ли тема напрямую в твиттере. Потом пишете статью и работаете с редакторами.

20:08

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

20:09

А тем временем Wordpress.com переписали на Node.js + React ma.tt/2015/11/dance-…

20:44

Учитывая что по опросам 25% веб сайтов работают на Wordpress, это возможно одно из самых больших событий для Node.js ma.tt/2015/11/sevent…

20:45

# Вторник 129 твитов

Доброе утро! С вами снова @operatino. Вчера мы знакомились и говорили о личном, сегодня начнём про технологии. Расскажу про наш текущий стек

8:07

Как упоминал ранее, в Liberty Global мы делаем видео стриминговый проект для европейский стран.

8:08

Из технологий - React (isomorphic), Fluxible, Webpack, полный ES6 и пакет для фулл-стек тестирования. Об этом сегодня и поговорим.

8:10

На бекенде у нас Node.js для рендеринга UI и временного мок сервера для промежуточных API решений. Основной API сервер на Java.

8:13

Пока добираюсь до офиса, можете мне покидать вопросы по стеку. Как отвечу, пойду по порядку о каждой технологии и нюансах.

8:14

А пока набираются вопросы, расскажите кто уже разрабатывает изоморфные (универсальные) приложения?

8:22
@jsunderhood мне вот интересно, вы замеряли скорость рендеринга на сервере?
8:48
@stay_positive @jsunderhood сильно зависит от скорости бэкенда. Статическая страница без загрузки данных (лэндинги) - около 20мс
8:49
@stay_positive @jsunderhood это время от получения запроса до полной отдачи страницы прокси серверу - nginx-у
8:49
@jsunderhood Расскажи про процесс публикации на @smashingmag
9:29
@vladyslavmoroz @jsunderhood Oj da vse ochen prosto ;-) Email? :)
9:29
@vladyslavmoroz @jsunderhood @smashingmag вчера рассказывали
9:32

.@raxpost Я ретвитнул вместе с предложением от самого @smashingmag. Виталий (глав. ред.) всегда рад новым статьям на Smashing.

9:32
@jsunderhood Выступаю, и очень сограсен, публичные выступления очень помогают вырасти.
10:36
@jsunderhood Буквально вчера, выступал на Берлинском митапе, рассказывал про продуктивную разработку с #reactjs slideshare.net/artemzadorozhn…
10:36
@jsunderhood а что на сервере для стриминга? С мобилок видео берете?

У нас достаточно много сервисов от разных провайдеров. На каких технологиях именно сервис раздачи видео - уточню.

twitter.com/rubyunderhood/…

10:45

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

10:46

Текущая версия сайта имеет Silverlight плеер для декодирования потока. Готовим HTML5 плеер, но даже с ним, сможем стримить только в Хроме.

10:48

С легальным видео все сложно, нужно и кодеки правильные, и DRM и договоры с поставщиками об отдельных барузерах.

10:51

На мобильные можем стримить только в нативные приложение, и потенциально сможем в мобильные Chrome браузеры.

10:52
@jsunderhood почему только Chrome?
10:52

.@roman01la Это указано в текущих договорах с контент провайдерами. Хоть и FF позвоняет по технологиям, но content rights ограниченны.

10:53

.@roman01la И в Safari нету нужного нам DRM в данный момент.

10:54
@DevArtem @jsunderhood в умении говорить и не бояться аудитории, а при чем тут карьера?
10:54
@raxpost @jsunderhood Как раз на том, чтобы донести правльно свою мысль и продать идею или сервис, стопориться оч много народу.
10:54

.@DevArtem @raxpost Что на самом деле очень важно и в повседневной жизни разработчика, не только для докладов.

10:56
@DevArtem @jsunderhood да я не пойму просто зачем разработчику что-то продавать)
10:58
@raxpost @jsunderhood Потому что решения принимаются не теми кто пишет код, а теми кто лучше говорит. Хочешь хорошие решения - убеди.
10:58
@jsunderhood посмотрел на fluxible, по архитектуре сильно похож на redux. какие есть между ними существенные различия?

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

twitter.com/smashercosmo/s…

11:08

Основной причиной в выборе Fluxible были готовые утилиты для разработки изоморфного приложения.

11:10
@jsunderhood Посмотрел подробнее - понял, что на самом деле сильно отличаются. Основное отличие - распределение данных по сторам.
11:14
@jsunderhood Т.е. Fluxible действительно просто вариация на классический Flux
11:14

Fluxible — это имплементация Flux с поддержкой изоморфных приложений и плагинов из коробки. fluxible.io pic.twitter.com/8dm4s8iZNs

11:14
@jsunderhood расскажи подробнее про изоморфность на практике

Изоморфность это отдельная тема. Есть много очевидных плюсов, но так же есть и ограничения.

twitter.com/raxpost/status…

11:15

Архитектурные вопросы за нас решает Fluxible, это что касается работы со сторами на сервере и передачи данных на клиент в рамках контекста.

11:17

Итак, начнем с практических ограничений изоморфных (универсальных) приложения с которыми лично сталкивался.

11:18

Не хватает просто рефреша в браузере для просмотра изменений, нужно рестартить Node.js сервер. Для этого есть github.com/remy/nodemon.

11:20

Все, что транспайлите и собирается с Babel/Webpack/etc, нужно будет делать и на сервере. С Babel просто, есть babeljs.io/docs/usage/req….

11:23

Сложность начинаеться с более сложными лоадерами, которые все так любят в Webpack. Ибо их нужно будет отдельно настраивать на сервере.

11:24

В некоторых случаях, как например с CSS Modules, можно найти готовые решения для процессинга на сервере npmjs.com/package/css-mo….

11:25

С остальным придеться разбираться дополнительно, используя похожий подход с Babel хуком, или базируясь на node-hook github.com/bahmutov/node-….

11:27

Это значит, что помимо сложностей с лоадерами Webpack, вам придеться бороться со сложностями транспиляции на сервере.

11:28
@jsunderhood или просто при изменении файлов очищать кэш у require и ререквайрить модули)
11:28

.@smashercosmo Это тоже вариант, но я пока не нашел drop-in решения. Нужно писать код по особенному, но мы доберемся до этого точно.

11:28

Последнее с чем сталкивался, это адаптация загрузки inline SVG файлов через webpack и на сервере. Не rocket science, но готовых решених нет.

11:30

.@smashercosmo Это еще не пробовали, покопаю. Спасибо за ссылку.

11:31
@smashercosmo @jsunderhood или использовать require-uncached github.com/sindresorhus/r…
11:32

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

11:33
@jsunderhood верно, но если грузить таким способом только перезагружаемые модули, то будет проще
11:35

.@iamstarkov Верно, просто нужно сначала написать такую тулзу.

11:35
@jsunderhood почему не собирать код для рендеринга на сервере тем же webpack?
12:00

.@andreypopp Судя по этому проекту, делаеться это только одним большим хаком, ибо Webpack заточен именно на клиент.

github.com/halt-hammerzei…

12:01
@andreypopp @jsunderhood Собираю серверный бандл Вебпаком именно для того, чтобы решить проблему с SVG. Пока проблем нет!
12:38

.@vtambourine Поделись опытом.

12:38
@jsunderhood Имею отдельный webpack.server.config.js с target: node и null-loader для всех CSS-ок.
12:42

Для решения транспайлинга на сервере советуют использовать собранный Webpack’ом бандл для Node.js. Кто еще пробовал так делать?

12:53
@jsunderhood зачем пользоваться вебпаком, если от него одни проблемы на сервере? что он дает такого незаменимого ничем?

Ровно такие же проблемы возникнут и с любым другим сборщиком.

twitter.com/raxpost/status…

13:02
@jsunderhood browserify + gulp изначально были продуманы под изоморф

Broswerify решает проблему сборки CommonJS модулей для браузера, которые итак работают в контексте Node.js.

twitter.com/raxpost/status…

13:07

Названные проблемы касаются кастомного транспайлинга - подготовка CSS Modules, загрузка inline SVG, переименовывание картинок для фриза.

13:08

Без Webpack все равно нужно будет собирать файлы и для сервера и для клиента.

13:09
@jsunderhood возможно ли транспайлить на сервере не react? и есть ли гайды или документация как/что/чем)
13:16

.@lifeasecond Имееться в виду рендерить на сервере шаблоны?

13:17
@lifeasecond @jsunderhood фантомом сквозь боль и страдания!

Я вот такое как-то делал: habrahabr.ru/post/180927/

13:20
@jsunderhood да, хочу такое к polymer реализовать
13:21

.@lifeasecond Если нужно только для поисковиков, есть сервис Prerender prerender.io, основанный на том же PhantomJS.

13:21

.@lifeasecond Если нужна изоморфность для всех, зависит от технологий. Много шаблонизаторов работают как на клиенте так и на сервере.

13:22

.@lifeasecond Самое сложное автоматически сравнивать что было нарендеренно на сервере, с тем что нужно восстановить на клиенте.

13:24
@jsunderhood @lifeasecond не надо использовать PhantomJS, пожалуйста. Это как забивать гвозди микроскопом.
13:24
@mr_mig_by для браузера с отключенным js это же только отобразит страницу без взаимодействия на ней?

Да, так и есть. Нужно отдельно восстанавливать хенлдеры на клиенте. Не все фреймворки это умеют.

twitter.com/lifeasecond/st…

13:28
@jsunderhood а как называется эта фича что бы найти фреймворки которые могут это? либо онли реакт сейчас может это
13:30

.@lifeasecond Насколько мне известно, только Реакт из коробки это номарльно поддерживат.

13:31
@jsunderhood не только хендлеры нужно “гидрировать”, но ещё и начальные значения. А ещё иногда и весь стейт компонента...
13:31
@jsunderhood @lifeasecond у PhantomJS несколько иное целевое использование. Это браузер, прежде всего. А не движок чтобы рендерить на серве.
13:31
@jsunderhood боль, печаль, страдания. Юзайте реакт
13:31
@jsunderhood мне вот интересно, вы замеряли скорость рендеринга на сервере?

Это еще одно потенциально больное место. Мы еще серьезно не замеряли, пока изоморфн. версия приложения в разработке

twitter.com/stay_positive/…

13:34

Это однозначно медленней чем просто раздать статический HTML под SPA приложение, но не критично. Общий выигрышь в сумме с клиентом лучше.

13:34

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

13:35

Т.к. пока сервер не закончит, показать по хорошему нечего, следовательно для lazy loading нужно больше хаков делать.

13:36
@jsunderhood а типа стримы отменили?
13:38

.@blia В случае с Реактом, стримить нечего пока не отрисуется вся цепочка помпонентов. Можно это разбить на части, но это усложняет процесс.

13:39
@jsunderhood ну типа пока ты собираешь данные для рендера, тебе же ничего не мешает отдать "верхнюю" часть html + стили
13:41

.@blia Хорошая идея. Теоретически это возможно, нужно попробовать.

13:41
@jsunderhood я так делаю, только рендер не на node.js а duktape O_0
13:41

Сделаем перерыв, продожим вечером. Работа зовет.

13:45
@raxpost @jsunderhood @DevArtem умение продавать самого себя-великое дело.Не надо надеяться, что вас замечательного просто заметят и позовут
16:31
@stay_positive @blia @jsunderhood у нас SPA на реакте отлично индексировалось гуглом без изоморфности, заказчик ещё потом просил убрать
17:48

.@as_Crazy Видимо Гугл не соврал и раскатывает постепенно JS-enabled роботов.

17:50
Select2 – пока лучшее, что я видел. Но, опять же, необходим jQuery. @lifeasecond @cssunderhood @jsunderhood
17:52

.@moskwin Есть хороший Рект компонент для селекта github.com/JedWatson/reac…

17:53

Кто пишет функциональные/end-to-end тесты в своих проектах? Какими инструментами пользуетесь?

18:26

Я начинал с CasperJS, предполагая что это сильно проще чем работать с Selenium. Я ошибался.

18:29

Сейчас на проекте мы используем Selenium, с JS биндингами + Mocha как тест-раннер. Пока ещё работаем с WD.js github.com/admc/wd

18:30

Но недавно вышла стабильная, быстроразвивающаяся библиотека JS биндингов для Selenium 2 - webdriver.io

18:32

В синтаксисе с promise-chain тесты пишутся просто на ура.

18:35
@jsunderhood а ещё люди zombie.js.org юзают, говорят ок
18:39
@jsunderhood а ещё люди zombie.js.org юзают, говорят ок

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

twitter.com/mr_mig_by/stat…

18:40

Мы наши тесты, которыми стараемся покрывать все полностью, гоняем локально, на офисном селениум сервере (стоит на iMac) и в BrowserStack.

18:42

До этого использовали Saucelabs, но сервис очень медленно работал, время старта вообще растраивало. Когда платишь за минуты, это не вариант.

18:43

Недавно ещё наткнулся на дешёвую альтернативу с безлимитными планами - spoon.net.

18:45

Кстати говоря, BrowserStack работает бесплатно для опенсорс проектов, так что грех не использовать.

18:46
@jsunderhood еще у них скидка фрилансерам
18:57
@blia @as_Crazy @jsunderhood @stay_positive Она может частично работать. Например если все анкоры работают без JS.

У Fluxible есть компонент NavLink, связанный напрямую с общим роутером. Если поломается JS, все будет работать.

twitter.com/freiksenet_ru/…

18:59
@as_Crazy @jsunderhood @stay_positive @blia Изоморфность не для гугла, а например для более быстрого рендера на плохих коннекшнах.
19:01
@as_Crazy @jsunderhood @stay_positive @blia Изоморфность не для гугла, а например для более быстрого рендера на плохих коннекшнах.

Еще можно хорошо сэкономить на времени инициализации клиента. Данные разных АПИ проще собрать одним махом на серв.

twitter.com/freiksenet_ru/…

19:03
@blia @freiksenet_ru @jsunderhood Все так говорят а потом идут и страдают делая свои изоморфные фронты, хотя достаточно обычного кеширования

Фронтенд разработчики всегда страдают, нам не привыкать.

twitter.com/as_Crazy/statu…

19:08
@jsunderhood Пробуем Селениум (Фантом очень быстро отвалился). Функциональные — Мокка + шеллоу-рендерер.
19:08

.@sapegin Что используете из JS биндингов для Selenium? Или традиционно на Java?

19:09

А кто вообще пишет хоть какие-то тесты? Понимаю, больной вопрос, но все же :)

19:18
@blia @freiksenet_ru @jsunderhood тогда я не знаю что это за кейсы такие что SPA в кеше с запросами к JSON API и клиент-рендером не хватает

Часто обновляющиеся проекты, с большим кол-вом уников. Контент ориентирванные.

twitter.com/as_Crazy/statu…

19:20

Или просто тяжелые проекты, которым важно время старта. Особенно если в регионе плохо с сетью.

19:21

Есть смельчаки, что пишут UI тесты? Image-comparison, computed style checks и тп?

19:22
@jsunderhood Я пишу, когда чувствую, что суть класса/модуля может быть неверно истолкована в будущем, а покрыть тестами его несложно.
19:23
@jsunderhood Я о такой ситуации, когда кто-то видит баги там, где их нет, пытается их исправить, и всё превращается вообще в кашу.
19:23
@jsunderhood часто обновляющиеся проекты спокойно обновляются в фоне во время работы локальной версии из кеша.
19:25

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

19:26
@freiksenet_ru @jsunderhood запрос в бек с изоморфным рендером принципиально быстрее чем запрос к json api с фронт-рендером?

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

twitter.com/as_Crazy/statu…

19:31
@jsunderhood недавно начал писать тесты для своего апи. Удобно, и позволяет быстро понять работает или нет.
19:31
@as_Crazy @freiksenet_ru @jsunderhood ну вот этот же твиттер. Отдает тебе сначала пререндеренную ленту.
19:31
@jsunderhood а так вы его инициализируете на сервере, какая разница?

На сервере все инициируется один раз, при старте.

twitter.com/as_Crazy/statu…

19:36

У нас на проекте для тестирование UI используется Galen galenframework.com

Помогает легко тестировать responsive и критичный лэйаут.

19:41

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

19:42

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

19:43

Гонять Galen тесты можно на той же инфраструктуре, что и Selenium. То есть Browserstack опять в помощь.

19:44
@jsunderhood запросы в API нужно делать легковесным скриптом в пару сотен байт, заинлайненных в <head>.
20:52

.@dmitryshimkin Согласен, это просто требует особого внимания и подхода. Не для всех проектов вариант.

20:53
@jsunderhood есть github.com/paypal/react-e… кроме SPA если отключить JS то будет обычный переход по страницам
20:54

# Среда 93 твита

Доброе утро! Сегодня поговорим об опенсорсе и работе в команде. Но сначала немного итогов прошлых дней.

8:08

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

8:12

Относительно карьерных планов, 2/3 желают оставаться в разработке, без руководящих обязанностей.

8:22
@jsunderhood врут же
8:23

.@avevlad вполне допускаю, что многие кто не тестирует, не отвечали

8:24
@jsunderhood неликвидная выборка, в тви сидят самые активные,которые пишут тесты,на конфы приходят все подряд люди
8:24

.@2j2e Верно подмеченно. Со статистикой и опросами всегда так. Но интересно в рамках аудитории.

8:25
@jsunderhood Тем, кто пишет тесты, некогда ходить на конференции.
8:25
@jsunderhood написать в твиттер легче, чем поднять руку на конфе
8:25

Итак, опенсорс. Делитесь ссылками на свои проекты, подтянем звёздочек. Ссылка и пару слов о чем проект.

8:31
@jsunderhood Генератор стайлгайдов для Реакта с хотрелоадом: github.com/sapegin/react-…
8:34
@jsunderhood Генератор стайлгайдов для Реакта с хотрелоадом: github.com/sapegin/react-…

Вот с этим генератором как раз и делал недавно интеграцию с @SourceJS github.com/sourcejs/sourc…

twitter.com/sapegin/status…

8:38
@jsunderhood JSX-ассерты для шеллоу-рендерера: github.com/sapegin/expect…
8:39
@jsunderhood github.com/AveVlad/russia… Список русскоязычных подкастов на тему IT
8:45

И вот вам ещё список списков лучших подборок ссылок github.com/sindresorhus/a…

8:47
@jsunderhood Книга по Reactive Extensions for JS github.com/xgrommx/rx-book. Список про функциональщину github.com/xgrommx/awesom…
8:56
@jsunderhood только вчера написал модуль для типографирования базовых вещей github.com/iamstarkov/typ…
8:56
@jsunderhood PostHTML-плагин для удобного использования декларитивного BEM-синтаксиса github.com/rajdee/posthtm…
9:27
@jsunderhood Перевожу документацию по Redux на русский github.com/rajdee/redux-i…
9:27
@jsunderhood PostHTML-плагин для генерирования списка CSS классов, с поддержкой вложенной структуры и clipboard github.com/rajdee/posthtm…
9:27
@jsunderhood, yeoman генератор для статических сайтов: github.com/helloilya/gene…
9:28
@jsunderhood только вчера написал модуль для типографирования базовых вещей github.com/iamstarkov/typ…

Расскажи как ты его используешь? Для блога? Работает только с ру правилами или для английского тоже?

twitter.com/iamstarkov/sta…

9:29
@jsunderhood должен работать для всех локалей, если нет, то это баг
9:36
@jsunderhood написал вчера — ещё не использую. буду использовать в блоге и остальных пет-проектах
9:36

Помимо самих опенсорс проектов, очень приятно видеть как сервисы и компании предоставляют особоые условия для контрибьюторов.

9:39

Уже упоминали, что BrowserStack, сервис для кросс-браузер тестирования и автоматизации, бесплатный для опенсорса browserstack.com/pricing

9:40
@jsunderhood это нехило помогает продвигать сервис. Вин-вин, ящитаю
9:40

Бесплатные CI тоже много чего стоят:

UNIX based Travis travis-ci.org
Win based Appveyor appveyor.com

9:42

Даже современные IDE бесплатно отдают для контрибьютеров, как это делает @WebStormIDE

9:43

Раз уж начали о бесплатных полезных сервисах, расскажите что вы посоветуете. Самое практичное для пет-проектов/опенсорса/бложиков.

9:44
Есть смельчаки, что пишут UI тесты? Image-comparison, computed style checks и тп?

Вчера поднимали тему тестирования UI и end-to-end @cssunderhood

twitter.com/jsunderhood/st…
twitter.com/jsunderhood/st…

9:47

.@mr_mig_by Подборки это хорошо, но хотелось бы что то из реальной практики.

9:48

Вот например потрясающий, бесплатный CDN с поддержкой ресайза картинок под responsive desing mobify.com/mobifyjs/v2/do…

9:49

Подборка бесплатных сервисов и приложений для разработчиков github.com/ripienaar/free… Спасибо @mr_mig_by за наводку.

9:52
@jsunderhood из реального опыта:
bithound
coveralls
travis
greenkeeper.io
versioneye
testling
9:53

Для демок Node приложений очень хорошо работает бесплатный план Heroku heroku.com. Там же можно и на норм план пересесть за 7$.

9:57
@jsunderhood быстро он из режима сна стартует?
11:29

.@ewnd9 Около 20 секунд, не так страшно для демок. Можно еще автоматически пинговать через uptimerobot.com

11:29
@jsunderhood я не пишу тесты, с чего начать ?
11:30
@jsunderhood я не пишу тесты, с чего начать ?

Если пишешь библиотеки/утил методы, то можешь начать покрывать unit тестами с Mocha mochajs.org.

twitter.com/krasivieglaza/…

11:32

Если же больше UI задач и нету отдельных библиотек под юнит тесты, я бы начал с end-to-end тестов, используя webdriver.io.

11:34
@krasivieglaza @jsunderhood начинать надо не с того как писать тесты, а с того как писать легко тестируемый код. google.ru/search?q=testa…
11:39

.@RusAlexander С end-to-end тестируется любой код, в этом прелесть и низкий порог входа. Но это больше для UI и продукта, нежеди для libs.

11:40
@jsunderhood да, я раньше так и делал через uptimerobot, но теперь бесплатный тариф подразумевает минимум 6 часов сна

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

twitter.com/ewnd9/status/6…

12:42
@jsunderhood почему всем нравится mocha а не jasmine? у моки столько методов, а хотелось бы что бы вещи были простые, что бы просто работать
12:42
@jsunderhood почему всем нравится mocha а не jasmine? у моки столько методов, а хотелось бы что бы вещи были простые, что бы просто работать

Все что мне нужно это describe и it, ассершены уже можно любые использовать.

twitter.com/sevaisnotcow/s…

12:43

Отличнейший видео курс от @dan_abramov о Redux и заодно о функц. программировании, immutability и прочем полезном egghead.io/series/getting…

13:06
@sevaisnotcow @jsunderhood тогда уж просто tape взять лучше
13:11

Теперь еще есть очень модный, ультра-современный, асинхронный тест раннер c ES2015 от @sindresorhus github.com/sindresorhus/a…

13:13

И вот еще простой сервис, который упоминал ранее, идеально подходит для мониторинга аптайма малых проектов uptimerobot.com

13:15

Раз сегодя об опенсорсе, держите чеклист и бойскаут гайд о том как правильно начать свой ОС проект ericdouglas.github.io/2015/09/27/che…

13:38
@jsunderhood OC проект ради ОС проекта? Всегда удивлял такой подход. И откуда у людей столько свободного времени?

Хорошая тема. Во первых в ходе поддержки ОС проекта можно много чему поучиться.

twitter.com/ChillyBwoy/sta…

13:46

Начиная с технологий, тестирования и CI заканчивая процессами организации разработки с ревью, фиче-бранчами и прочим.

13:48

Еще один важный момент — если берешь от сообщества, то давай что то обратно. Думаю каждый использует как минимум несколько ОС проектов.

13:51

Любой обратный контрибьюшен, или хоть маленький личный проект — это плата за использования всего что сообщество нагенерировало за годы.

13:52

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

13:55

Хватит даже обычных багрепортов, и простых PR с мини фиксами.

13:56
@jsunderhood у меня есть такая штука: github.com/mr-mig/fronten…

И loom генератор к ней: github.com/mr-mig/origina…

14:02
@jsunderhood тут может возникнуть вопрос с порогом вхождения в проект. Не каждый разработчик может сделать полезный фидбек.

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

twitter.com/Vitalliumm/sta…

14:05
@jsunderhood @Vitalliumm Можно помогать даже не программируя ;-) wow.sapegin.me/image/0W3R2u3h…
14:09
@Vitalliumm Авторов, которые игнорируют пулреквесты месяцами, надо бить клавиатурой по рукам. @jsunderhood
14:11
@Vitalliumm Авторов, которые игнорируют пулреквесты месяцами, надо бить клавиатурой по рукам. @jsunderhood

И правда, культуре опенсорса нужно приучатся не только пользователям но и мэйнтейнерам проектов.

twitter.com/sapegin/status…

14:12
@raxpost @sapegin @jsunderhood Пойду пуллреквесты посмотрю.....
14:19
Проверять дублирование свойств дожна умная IDE - это её работа следить за косяками программиста twitter.com/ADM_DESIGNHOUS…
15:45

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

17:45

Как проводите обмен знаниями и исследуете технологии? Например кто то изучает Фреймворк и делает мини отчёт с выводами.

17:46
@jsunderhood я один пишу на js в команде, не с кем обмениваться) есть еще один верстальщик, но он особо не угарает по всему этому

Какого быть единственным JS девом в команде? По моему такого нужно максимально избегать, разве что ты основатель.

twitter.com/_sashashakun/s…

18:11

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

18:11
@jsunderhood по разному. Чатики тематические. Конференции, вот такие хенгауты youtube.com/watch?v=2JhWk_…

Это глобальные эвенты, или в рамках вашей команды разработки?

twitter.com/blia/status/66…

18:12

В ОК мы делали внутренний митап раз в месяц/пару месяцев, почти на весь день. Каждый готовил обзор на выбранную тему.

18:13

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

18:14
@jsunderhood Умные люди не только среди фронтендеров бывают :-)

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

twitter.com/sapegin/status…

18:15
@jsunderhood Есть и плюсы, и минусы. Но это гораздо лучше раздутой команды с плохо налаженным общением. @_sashashakun
18:18
@jsunderhood Мы время от времени делаем внутренние воркшопы, когда член команды хочет поделится новым опытом.
18:18
@jsunderhood Мы время от времени делаем внутренние воркшопы, когда член команды хочет поделится новым опытом.

Хорошая практика. Часто такое происходит? Мотивирует ли кто то делать подобное в команде?

twitter.com/roman01la/stat…

18:19
@jsunderhood Иногда кто-нибудь из "старших" может выудить, что ты что-то знаешь интересное и предложит тебе всем об этом рассказать.
18:23
@jsunderhood Иногда кто-нибудь из "старших" может выудить, что ты что-то знаешь интересное и предложит тебе всем об этом рассказать.

Хорошо когда это налажено, тех. тим лиды должно мотивировать подобные мероприятия для роста команды.

twitter.com/roman01la/stat…

18:24

Вопрос к тим лидам - как собираете фидбек у команды, для планирования улучшений, полировки процессов?

18:24

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

18:25
@jsunderhood У нас есть обеды за счет компании для тех, кто пишет в блог blog.redradix.com 😀
18:26
@jsunderhood У нас есть обеды за счет компании для тех, кто пишет в блог blog.redradix.com 😀

Ого, клевая тема, возьму на заметку!

twitter.com/roman01la/stat…

18:26
@sevaisnotcow @jsunderhood мне jasmine нравится тем, что все из коробки: matchers, mocks, spies. В mocha надо chai, sinon, etc
18:59
@jsunderhood а в процессе спринта техлиды с участниками команды не разговаривают? Зачем ждать именно окончание спринта?

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

twitter.com/rubyunderhood/…

19:16

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

19:18

Расскажите какой активности вы ожидаете от тим лидов? Какие основные обязанности по вашему они должны исполнять?

19:21
@jsunderhood Налаживать общение и взаимодействие в команде. Чтобы люди были в курсе происходящего и делились знаниями.
19:25
@jsunderhood github.com/alt-j/iseed project stub для инфраструктуры
19:58
@jsunderhood как удается ретроспективы не превращать в холивары?

Это не место для технических обсуждений. Там можно определить проблему, дать приоритет.

twitter.com/_morozOff/stat…

20:01

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

20:01

Сам процесс занимает час, то есть время ограниченно для концентрации на самом важном.

20:02

# Четверг 47 твитов

@jsunderhood PostHTML, если просто — такой же как PostCSS только про HTML/XML :) github.com/posthtml/posth… @PostHTML
7:56

Ещё про изоморфные приложения – решение для стриминга Реакт-генерированного HTML в браузер для ускоренной отрисовки github.com/aickin/react-d…

8:18

Отличный доклад про изоморфные приложения slideshare.net/mobile/denisiz… Спасибо @DenisIzmaylov

8:22

Все, что вы хотели узнать о Service Workers, но стеснялись спросить serviceworke.rs Кукбук от Mozilla.

8:24

Набор готовых настроек Nginx для лучшей веб производительности от Google ngxpagespeed.com

8:26
@jsunderhood у нас тут давеча хенгаут был по сервис воркерам: youtube.com/watch?v=2JhWk_…
8:29

Был в этом году на @jsconfeu, очень впечатлил доклад об авто-обновлении кода от разработчика из Facebook youtu.be/d0pOgY8__JM?li…

8:31

В четвёртый день моего дежурства поговорим о компонентной UI разработке и библиотеках.

8:33

Самый популярный набор блоков из ру проектов, это bem-bl bem.github.io/bem-bl/index.r…

У кого есть опыт работы с ним вне Яндекса?

8:35
@jsunderhood Маленькое доаолнение - сначала нужно модуль к nginx прикрутить :)

developers.google.com/speed/pagespee…

8:38

Мой последний доклад о создании своей библиотеки React блоков speakerdeck.com/operatino/buil…

8:40
@jsunderhood bem-components здорово подходят для живых прототипов. Попробуем заиспользовать для "боевых" версий, после плотного кастома.
9:18

Вы практикуете разработку библиотек UI компонентов в своей команде? В рамках одного проекта или нескольких?

9:26

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

9:26
@jsunderhood Да, у нас два проекта. В библиотеке компонеты, общие функции и стайлгайд.
9:37
@jsunderhood зависит от проекта и стадии.
В крайней компании делали вот:
github.com/brainly/style-…
9:39
@koloskof @jsunderhood @factorymn Могу ответить за обе компании :) — используем! Только не bem-bl, а bem-components.
10:37

.@voischev Судил по кол-ву звездочек, возможно в живую статистика другая для bem-components github.com/bem/bem-compon…

10:37
@jsunderhood для "вне Яндекса" пользователей bem-components должна быть сильно больше. @bem_ru @tadatuta поправят
10:40
@voischev @jsunderhood bem-bl старая библиотека, которая была заменена на bem-core. А ru.bem.info/libs/bem-compo… — это БЭМ-Bootstrap @bem_ru
11:02

Хороший доклад про введение кросс-проектной библиотеки блоков был на прошлом WSD в Минске wsd.events/2015/10/31/pre…

12:30

Ребята из Mail.ru проделали колоссальную работу для унификации дизайна и разработки UI smashingmagazine.com/2015/07/produc…

12:32

На JSConf EU ребята из Amazon рассказали как они адаптировали Web Components под свои требования унификации youtu.be/cRTko6m6U4A?li…

12:34

С их наработками, в отличии от Polymer, можно использовать одни и те же компоненты с разными фреймворками как React и Angular.

12:34

Говоря о Polymer, в этом году они очень серьезно разогнались с 1.0 версией и открывающей конференцией Polymer Summit в Амстердаме.

12:36

На первом саммите они показали кучу инструментов для работы с Polymer, новые крутые компоненты и привели потрясающую статистику.

12:38

Все видео с Polymer эвента доступны в записи youtu.be/jVn8tlnwAEs?li….

12:39

В рамках Polymer конференции был запущен раздел с отличными туториалами для испытания на практике code-labs.io/polymer-summit.

12:42

Немного о Polymer в цифрах — более 300 проектов только в Гугле искользуют Polymer и общие компоненты.

12:46

Говоря откровенно, за одну конференцию от Polymer я услышал больше крутых вещей чем от БЭМ за годы его существования.

12:47

Но пользователькие ниши у них разные. Polymer больше для простых сайтов и прототипов, или выросших “jquery-разработчиков”.

12:48

Этот год в целом очень урожайный в плане продвижения идеи ре-используемых UI компонентов, спасибо React, Polymer и Web Components.

12:49
@jsunderhood спасибо Material UI, Elemental UI, Belle
12:53

Подробка лучших наборов React компонентов:

material-ui.com
nikgraf.github.io/belle
elemental-ui.com
react-components.com

12:55
@jsunderhood а его уже можно использовать в продакшене?

Можно, 1.0 стабильная версия. Google Music и YouTube Gaming уже используют его в продакшене.

twitter.com/vtambourine/st…

12:57
@jsunderhood а что react-bootstrap нету, самая очевидная ссылка же?

Порт Bootstrap’а есть почти под каждый фреймворк react-bootstrap.github.io. Счел это не очень интересным.

twitter.com/discopalevo/st…

15:29
@jsunderhood react-toolbox.com забыли. сильно лучше, чем material-ui.
15:32
@jsunderhood Еще в догонку jquense.github.io/react-widgets/… внешне looks like shit, но внутри - красота.
15:37

Поговорим об инструментах для создания библиотек компонентов. В инт. сообществе такие библиотеки обычно называют Living Style Guides.

17:52

Ранее в этом году я написал подробный обзор существующих инструментов для генерации UI библиотек и как они работают. smashingmagazine.com/2015/04/an-in-…

17:54

Был ещё доклад, где я развивал идею развития живых стайл гайдов и как они могут быть глубоко интегрированы в процесс youtu.be/vw2Ii2pPxzQ

17:57

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

17:58

Имея изолированную среду с примерами UI компонентов, можно там же построить мощный инструментарий для разработки и коллаборации.

17:59

Наглядный пример как выглядит комбинация документации и станка для разработки это React генератор от @sapegin github.com/sapegin/react-…

18:05

Добавить инструменты коллаборации можно всего лишь подключив in-place комментарии рядом с примерами блоков. Например trackduck.com/en/

18:07

Очень надеюсь, что у ребят получиться хорошо запустить проект по синхронизации исходников кода и дизайна theprotein.io

18:09

Компонентная UI разработка очень зависит от уровня взаимодействия дизайнеров и разработчиков.

18:11

# Пятница 65 твитов

Сегодня поговорим о фреймворках. pic.twitter.com/ld0Kkx7tXU

7:58

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

8:20

С GWT это произошло потому, что экспертизы в JS ещё мало было у сообщества и кросс-браузерная поддержка дорогого стоила.

8:21
@jsunderhood JS, компилируемый в JS, уже набрал, похоже.
8:22
@jsunderhood JS, компилируемый в JS, уже набрал, похоже.

Но все же это JS, ещё и в принятом стандарте, хоть и не везде имплементипованном.

twitter.com/sapegin/status…

8:23
@jsunderhood WebAssembly как раз для компилируемых языков пилят, так что шансы есть

Насколько я знаю, он не принципиально лучше asm.js, который тут уже какое то время. Как и elm, останется нишевым.

twitter.com/somerandstring…

8:31
@jsunderhood Да, но я скорее о том, что транспилеры с нами навсегда, похоже.

Да, но это не значит что люди готовы переделать все. Транспиляция ES6 стала популярней только за счёт стандарта.

twitter.com/sapegin/status…

8:34
@jsunderhood @sapegin По-моему она стала популярной за счёт бабеля и того что фейсбук её продвигает например в реакте.
8:39
@jsunderhood @sapegin По-моему она стала популярной за счёт бабеля и того что фейсбук её продвигает например в реакте.

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

twitter.com/freiksenet_ru/…

8:41

Это только по Твиттеру кажется что все пишут на React и используют Babel. На самом деле большинство ФЕ разработчиков об этом и не слышали.

8:42

Один из явных показателей, это тематика инт. конференций и их публика.

8:44
@somerandstring @jsunderhood Это не правда, web Assembly это новый asm.js а не таргет компиляции.
8:44
@jsunderhood а если и слышали то это не повод внедрять в проект. Хотя на рынке труда все жаждут разрабов с опытом ес6.
8:47
@jsunderhood И не используют Джейквери, который к тому же умер :–) Так и есть: мы все в поле, искажающем реальность.
8:47
@jsunderhood Кто эти люди? Я таких не встречал в ФЕ среде. Разве что верстальщики какие. Где-то там. Далеко.

Достаточно выйти на любую конференцию. Особенно на интернациональную. Ру рынок не показательный.

twitter.com/gothy/status/6…

8:52

В ру сообществе больше популярны прикладные темы, поэтому инструменты и фрейморки знают многие. В остальном мире 25% сайтов сделано на WP :)

8:53
@jsunderhood @mur4i EmberJS?

EmberJS интересен, особенно со второй версией и попытками сделать сервер сайд рендеринг. Но у меня нет опыта с ним.

twitter.com/starkyru/statu…

8:55

Кто использует EmberJS и может поделиться своими мыслями о его статусе и месте среди остальных фреймворков на рынке?

8:55
@jsunderhood на том самом WP, который теперь Calypso на nodejs & react?
8:57

.@gothy Это только Wordperss.com :) И даже когда сам WP переведут, переход технологий займет лет 5.

8:57
@jsunderhood может начнем разделять уже фронтенд\бэкенд разработчиков от производителей простых сайтов? и те и те нужны, но это разные люди.

А как тогда называть FE разработчика под Wordpress? :) (на котором делают кстати сайты посложней среднего)

twitter.com/sevaisnotcow/s…

8:58
@jsunderhood Это я к тому что разделение нужно, FE под популярные CMS обычно всё равно фуллстек.

Для кого это разделение нужно? В инт. сообществе нет таких веб мастеров, разработчики решают задачи.

twitter.com/NightPhobos/st…

9:53
@jsunderhood Ага, суровые русские разработчики даже сраные лендинги на Ангуляре пилят.
9:55
Все таки React это не фреймворк @jsunderhood

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

twitter.com/rubyunderhood/…

9:56
@sapegin @jsunderhood джквери еще реакт переживет. Небольшому ко-ву фронтов хочется его умертвить по непонятным причинам.
9:57
@jsunderhood ну хотя бы для HR. Все нужны, но они разные . Но отдельный термин лишнее, FE под WP - так и называть.

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

twitter.com/NightPhobos/st…

9:59
@serhey_shmyg @jsunderhood @sapegin вполне себе нормальный список причин youmightnotneedjquery.com

Суть же не в том, что причин нет, а в покрытии jQuery. Ни backbone/react/angular такого покрытия и не снилось.

twitter.com/iamstarkov/sta…

10:02
@serhey_shmyg @jsunderhood @sapegin вполне себе нормальный список причин youmightnotneedjquery.com

Нишевые профессии всегда есть и будут, мы говорим об общепринятых терминах. Верстальщики тоже есть только в СНГ.

twitter.com/iamstarkov/sta…

10:03

Небольшой опрос про популярность транспиляции в JS, используете Babel или подобные инструменты у себя в проектах?

10:07
@jsunderhood Да! Не вижу смысла писать ES5 в конце 2015-го года, если есть возможность писать ES6.

Как относитесь к транспиляции и использовании еще не принятых стандартов в JS и CSS?

twitter.com/sapegin/status…

10:09
@jsunderhood С опаской, но с другой стороны не ждать же, пока примут.
10:28
@sapegin @jsunderhood если человек сейчас изучает JS, может есть смысл сразу браться за ES6?
10:44
@meuwka Ну то есть для меня Яваскрипт сейчас — это ES6. @jsunderhood
10:44
@jsunderhood скептически: недавний пример с bind показывает, что расчитывать на все stage 0 proposal не стоит
10:45
@jsunderhood делает сложнее обучение языку:по ES6 есть книги,основанные на стандарте, по ES7 - только proposals и их временные имплементации
10:46
@jsunderhood делает сложнее обучение языку:по ES6 есть книги,основанные на стандарте, по ES7 - только proposals и их временные имплементации

Согласен, книги, стабильные спецификации и материалы для обучения очень важны.

twitter.com/katyaprigara/s…

10:47
@jsunderhood ну и нам в IDE очень сложно все это поддерживать: вот недавний пример с default imports: youtrack.jetbrains.com/issue/WEB-1770…
10:47

Итак, продолжаем о фреймворках, кто то еще считает что их слишком много?

10:50
@jsunderhood Все думали что флукса слишком много, но теперь все перешли на редукс. А обилие флукса помогло его понять и найти в чем фишка.
10:53
@jsunderhood Мораль - много фрейворков это признак здорового комьюнити. Надо любить diversity.
10:53
@jsunderhood Все думали что флукса слишком много, но теперь все перешли на редукс. А обилие флукса помогло его понять и найти в чем фишка.

Стадии становления через эксперименты и правда полезна. Но в итоге не обязятельно всем приходить к чему то одному.

twitter.com/freiksenet_ru/…

10:58

Всегда будут разные инструменты, которые решают конкретные проблемы лучше других. Хорошо иметь выбор под разные задачи.

10:58
@freiksenet_ru @jsunderhood я б предпочёл, чтобы вместо фреймворков на гитхабе люди выкладывали статьи на медиуме с инфой “почему так лучше"
11:03

Про Ember нам так никто и не рассказал, а найдется ли адвокат для Angular 2?

11:25
@jsunderhood так вы ничего и не спросили.

Расскажите о его статусе и месте среди остальных фреймворков на рынке?

twitter.com/blia/status/67…

11:31
@jsunderhood ну во-первых это полноценный фреймворк, в отличии от того же реакта. с понятным и последовательным путем развития.
11:39
@jsunderhood на сегодняшний день это лучший выбор для разработки систем, завязанных на управление большим кол-вом ресурсов.
11:39
@jsunderhood кроме того, что из коробки имеет в себе все необходимое для написания приложения, имеет большое количество аддонов
11:40
@jsunderhood из минусов отсутствие полноценного SSR, потому скорее не подойдет для контентных сайтов.
11:40
@jsunderhood на сегодняшний день это лучший выбор для разработки систем, завязанных на управление большим кол-вом ресурсов.

Какие ресурсы имеються в виду?

twitter.com/blia/status/67…

11:40
@jsunderhood ресурсы данных(коллекции моделей)
11:46
@jsunderhood мы на Ember2 сейчас переписываем @neoscms.Он хорош долгой поддержкой и подходами, хорошо понятными для традиционных бэкэндщиков
12:22
@jsunderhood angular состоит из антипаттернов чуть менее, чем полностью. В angular 2 выпилили худшие из них blog.oasisdigital.com/files/2015/08/…
15:20

В каком случае вы бы выбрали разработку без JS фреймворка, только используя маленькие библиотеки?

15:34

Я считаю, так стоит делать в любом высоконагруженном проекте. Что бы сложные, неординарные задачи решать как надо, а не хаками фреймворка.

15:39

Трансформации, как последний редизайн Google+, возможны только очень кропотливым, точечным подходом.

15:41

Особенно когда очень важна производительность.

На Google+ входной js файл в 1.5mb заменили на 70kb.

15:44
@jsunderhood и в итоге написать свой фреймворк? Это ок, но существующие решения должны очень сильно не устраивать
15:52
@jsunderhood и в итоге написать свой фреймворк? Это ок, но существующие решения должны очень сильно не устраивать

Все именно так. В большинстве случаев фреймворк подойдёт. Особенно если он достаточно гибок.

twitter.com/pomidore/statu…

15:53
@jsunderhood Гугл верует в not invented here и имеет бесконечное количество ресурсов. Первое без второго скорее всего приведёт к катастрофе.

Так же как и Mail.ru, Yandex, Facebook (да, они далеко не везде на реакте).

twitter.com/sapegin/status…

16:02
@jsunderhood Тут надо понимать, что если маленькая команда соберётся писать свой Реакт, она скорее всего никогда не выпустит продукт на нём.
18:55
@jsunderhood Тут надо понимать, что если маленькая команда соберётся писать свой Реакт, она скорее всего никогда не выпустит продукт на нём.

Согласен, первым делом продукт. Своё пилить только когда есть большие основания и много ресурсов.

twitter.com/sapegin/status…

19:14
@jsunderhood а что такое высоконагруженный проект?

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

twitter.com/SiliconBangalo…

19:17
@jsunderhood react фреймворк?

Только Реакт сам по себе скорей библиотека. В этом плане он более гибко встраивается в разные проекты.

twitter.com/lisovskyvlad/s…

19:19
@jsunderhood можно как-нибудь конкретнее, пожалуйста?

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

twitter.com/SiliconBangalo…

21:15

# Суббота 64 твита

@jsunderhood я все хочу каких то конкретных примеров, а по теме — видел как оптимизация загрузки убивала конверсию

Интересный претендент, расскажите подобней.

twitter.com/SiliconBangalo…

9:10
@jsunderhood @SiliconBangalor а если оптимизация в АЖ 5% стоит отказам от СПА фреймворка, и переходом на фул серверсайд рендер? Принесёт $?

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

twitter.com/popenkomaksim/…

9:12
@ebin_eb0n @jsunderhood ну понятно же, что достоверно не известно. Гипотеза — снижение доверия к результатам полученным слишком быстро
9:13
@jsunderhood NIH нас очень очень больно укусил (свой фреймворк, инструмент деплоймента, свой репозиторий контента...). Но такие были времена

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

twitter.com/dimaip/status/…

9:14

Раз тут почти все за фреймворки, подкину статью против них, для выравнивания баланса aerotwist.com/blog/the-cost-…

9:16

Хорошая статья о паттернах дистрибьюции опенсорс React компонентов krasimirtsonev.com/blog/article/d…

9:18

Бесплатный CI для приватных проектов semaphoreci.com Так же есть безлимитные планы на опенсорс.

9:19

Тем временем идёт прямая трансляция с конференции о фронтенд разработке в Киеве - Web Standards Days youtu.be/_Sx5jvT0qEU

9:21

Какой CI сервис используете вы? У нас стоит Jenkins на всю компанию.

9:22
Небольшой опрос про популярность транспиляции в JS, используете Babel или подобные инструменты у себя в проектах?

Судя по результатам опроса, 25% ещё не транспайлят JS код.
Удивительно, что 26% уже используют не стандартный ES7.

twitter.com/jsunderhood/st…

11:22
@jsunderhood Использую Codeship. Он, кстати, тоже бесплатен для 5 приватных проектов.
12:48
@jsunderhood Если пишете на React, то скорее всего используете Object spread из ES7. Думаю этим можно объяснить.
13:00

Запись моего доклада про разработку библиотеки компонентов для React youtu.be/qtu11dPWBhI pic.twitter.com/rzylBIg0HP

13:36

Сегодня по расписанию у нас тема о будущем фронтенда. Кто уже предвкушает смерть Реакта в следующем году?

13:38

И гадать не нужно, что ES6 будет в каждом доме разработчика. Кто ещё не проникся, краткий конспект по важным фишкам ponyfoo.com/articles/es6

13:42
@jsunderhood намек на incremental dom?
bit.ly/1NAv4Sq
13:45
@jsunderhood какие недостатки могут его погубить? ничто не предвещает же.

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

twitter.com/zeihlis/status…

13:46
@jsunderhood Если они не начнут писать Реакт 2, то все будет ок.
13:46

Я думаю для Relay сейчас самое время, давно небыло больших потрясений в фетчинге данных.

twitter.com/freiksenet_ru/…

13:48
@jsunderhood Я как-то вообще не понимаю всего этого хайпа вокруг реакта.
13:57
@Dezeter @jsunderhood Всего лишь самый лучший способ писать приложения на текущий момент, никакого хайпа.
13:57
@jsunderhood Реакт, может быть и уйдёт, а вот функциональный подход и флакс-подобная архитектура, думаю, останутся.
13:58
@jsunderhood реквест на ветку про Clojure. неделю мучаю, ощущение от среды: без велосипедов, вещи работают из коробки, 1 проблема—1 решение.
13:58
@jsunderhood реквест на ветку про Clojure. неделю мучаю, ощущение от среды: без велосипедов, вещи работают из коробки, 1 проблема—1 решение.

Лично ничего про Closure не скажу, но уверен как и все альтернативные языки, критическую массу не наберёт.

twitter.com/alexfedoseev/s…

14:03
@jsunderhood То есть он безусловно очень крут, но может документации и примеров пока не хватает.

Это только вопрос времени. Скоро все будет, вместе с этим и популярность.

twitter.com/freiksenet_ru/…

14:07
@alexfedoseev @jsunderhood В Om например DOM описывается функциями. Читается чище, чем то же самое в JS.

Но не чище чем в JSX. Возможно с ростом популярности появиться альтернативный синтаксис как и сам JSX.

twitter.com/roman01la/stat…

14:24

Что вы думаете насчёт оффлайн веба, и его перерождения в лице ServiceWorkers?

14:26

Тут хорошая, практическая статья о прогрессивных веб приложениях с ServiceWorkers, IndexedDB и Web Workers pocketjavascript.com/blog/2015/11/2…

14:27

Отчёт от Bruce Lawson о статусе прогрессивных веб приложений (оффлайн и installable) brucelawson.co.uk/2015/progressi…

14:34
@jsunderhood интересно посмотреть крутых живых примеров использования

Давно уже говорят об оффлайн приложениях, с ростом популярности ServiceWorkers будет больше примеров.

twitter.com/aod_toxic/stat…

14:37

Поддержка браузеров тоже растёт, жалко только что Safari молчит (но в WebKit уже есть наработки) jakearchibald.github.io/isserviceworke…

14:42
@jsunderhood на последних двух WSD расказывали про них. Свою нишу они определенно займут в вэбе.
14:43
@jsunderhood оффлайн вебу нужен подходящий механизм синхронизации данных, я думаю что CRDT тут выстрелит
14:43

Кстати, не пропустите возможность посетить бесплатный мастер класс от @roman01la в Чернигове gist.github.com/roman01la/fb9a…

14:45

Продолжаем говорить о будущем фронтенда, на след год пока звучали темы о Relay, ServiceWorkers, Clojure/Om. Что же будет с Angular 2?

14:47

Говоря о конкуренции с React, я думаю большую роль сыграет и React Native. Возможность переиспользовать бизнес логику на JS многого стоит.

14:49
@jsunderhood он всех победит

Расскажи почему :)

twitter.com/mr_mig_by/stat…

14:49

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

twitter.com/Main_Loner/sta…

14:51

Призываю всех заполнить свежий JS Developer Survey ponyfoo.com/articles/javas…

14:54
@jsunderhood Для новых проектов проще будет сэкономить на разработке в начале запуска проекта и только потом вложится в приложение.
14:58
@jsunderhood потому что гугл и глупые люди.
Но посмотрим, что у них в итоге выйдет, чо.

Я кстати не вижу достаточно много Гугла за Ангуляром. 300 проектов у них на Polymer, а все серьезное - самописное.

twitter.com/mr_mig_by/stat…

15:02

Список проектов сделанных на Angular, в том числе и сделанные в Google madewithangular.com/#/categories/g…

15:14

Коллеги, помогите преодолеть рубеж фолловеров в 2к на личном аккаунте @operatino. Пишу/ретвиту все самое интересное о вебе/React/компонентах

15:17

Спасибо всем отозвавшимся! Уже 1999 фолловеров, очень приятно!

18:56

Отличная шпаргалка для любого фронтенд разработчика, а так же для тех, кто учиться frontendhandbook.com

18:57

Переводил свои мелкие сайты на новый хостинг, судя по калькулятору, это самый дешевый shared хостинг что можно найти elasticweb.org

19:00

Набор утилит для легкого встраивания ServiceWorker в ваш проект github.com/GoogleChrome/s…
Там же есть демка с React.

19:25

По сравнению с фетчингом статических ресурсов из кеша, получая 304 с CDN, экономия от 40ms на запрос. Из SW кеша ресурсы идут за 0-10ms.

19:28

Живое демо смотреть здесь ifixit-pwa.appspot.com, работает пока только в Хроме и ФФ за флагом.

19:29

Как думаете, какой паттерн работы с CSS победит в следующем году? БЭМ именование, CSS модули, или инлайн стили?

19:45

Самая мощная библиотека для инлайн стилей из того, что я видел это Radium github.com/FormidableLabs…

19:48

А с помощью React Style можно во время сборки вытягивать CSS во внешний файл github.com/js-next/react-…

19:49
@jsunderhood PostCSS

PostCSS сам по себе не решает вопрос инкапсуляции стилей и нейминга. CSS модули построены на нем.

twitter.com/opportunato/st…

19:50
@jsunderhood бэм

Кто-то считает, что ручками называть названия классов по указке еще самый лучший вариант?

twitter.com/maxnaumov/stat…

19:51
@jsunderhood Atomic OOBEMITSCSS
19:51
@jsunderhood победят модули, а правильный паттерн: css in js
19:51
@jsunderhood CSS-модули. При возможности их использовать, БЭМ уже не нужен, а попытки писать CSS Яваскриптом всегда были адом.
20:04
@jsunderhood CSS-модули. При возможности их использовать, БЭМ уже не нужен, а попытки писать CSS Яваскриптом всегда были адом.

Мне тоже больше всего CSS модули нравятся, но пока мало наработок для использования их где то помимо JS.

twitter.com/sapegin/status…

20:04
@sapegin @jsunderhood Я пишу приложение на CSS-модулях. Пока что ощущение, что все это занимает больше времени, чем писать CSS отдельно.

Так CSS модули и подразумевают что пишешь стили отдельно. С короткими, семантическими именами.

twitter.com/roman01la/stat…

20:08
@jsunderhood @sapegin А зачем не в жс? Фронтенд это же жс.

Фронтенд это еще куча других шаблонизаторов, без HTML в JS.

twitter.com/freiksenet_ru/…

20:08
@jsunderhood шадоу дом? использую в полимере с css4 переменными из коробки, все очень нравится.
20:41
@jsunderhood шадоу дом? использую в полимере с css4 переменными из коробки, все очень нравится.

Проблема только в то, что Shadow DOM не везде поддерживается. А полифилы слишком хачны.

twitter.com/lifeasecond/st…

20:42

# Воскресенье 80 твитов

@jsunderhood последнее время пробую css modules и очень рад. Не думаю что это идеально и навсегда, но шаг вперёд - да.
10:03

И снова здравствуйте! Как проходят выходные? Сегодня у нас фристайл и мой последний день за рулём этого аккаунта.

10:04

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

10:06
@jsunderhood у вас реп для фронта отдельный ? Чтобы разрабатывать фронт настраивать бэк не нужно ?

У нас веб сервер для фронтенда на NodeJS, сами настраиваем как надо. Только API сервер на Java отдельно.

twitter.com/burtovoy/statu…

10:24
@jsunderhood Привет. Какие прогнозы на AngularJS 2?

Ангуляр в целом хорошо держит позиции. В Амстердаме он очень популярен, но со второй версией будет сложно.

twitter.com/Future359/stat…

10:25

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

10:25

Я думаю в итоге Angular 2 займет свою нишу, для средних проектов, которые нужно разрабатывать быстро. Но Реакт его сильно подвинет.

10:26
@jsunderhood а почему опять с angular начинать новый проект не будут?

Зависит конечно от проекта, но в целом люди наигрались уже. Фронтендеры быстро начинают скучать :)

twitter.com/iKuntsevich/st…

10:29
@jsunderhood @burtovoy как нода с апи сервером общается?

Просто по REST. Мы используем изоморфный fetch.

twitter.com/i_told_ya/stat…

10:29
@jsunderhood @iKuntsevich это дети быстро начинают скучать. Фронтендеры же решают бизнес задачи.

Программисты частенько ведут себя как дети :) Захотелось новый фреймворк, значит надо.

twitter.com/twenty/status/…

11:09
@jsunderhood вечный холивар, jQuery with angular or react. Что думаете по этому поводу?

С Реактом он точно не нужен, все необходимые утилиты есть из коробки. Для данных есть fetch.

twitter.com/serhey_shmyg/s…

11:13

А с Ангуляром вполне себе, раз он в основном про скорость разработки. "Angular программист" это эволюция "jQuery программиста" :)

11:15

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

11:17
@jsunderhood объясни а разве это прямо кэш SW? Я думал все хранится в LocalStorage/IDB, а SW просто перехватывают сетевые запросы

На 100% не уверен, но насколько мне известно, Cache Storage отдельный у SW. К тому же, он пока почти безлимитный.

twitter.com/stay_positive/…

11:20

В этой демке именно Cache Storage для статики используется, IndexedDB для данных ifixit-pwa.appspot.com pic.twitter.com/xyoHrttvlW

11:22
@jsunderhood wow, посмотрю повнимательней на него. Кстати что насчет лимитов у хранилищ сейчас? Слышал, что IDB стал белимитным?

Не слышал о безлимите для IDB, по последним данным доступно 10% от места на жестком диске.

twitter.com/stay_positive/…

11:30
@jsunderhood это становится уже популярным мнением, Eric Elliott тоже называет React современным jQuery

По моему, подобные высказывания возник. сугубо из за боязни. Люди бояться изменений, HTML/CSS в JS, Flux вместо MVC

twitter.com/xmalinov/statu…

11:32

По факту то React пользователей в 100 раз меньше JQ.

11:33
@jsunderhood тем не менее "MVW! Flux! Redux!" сейчас почти как лозунг

Те, кто поняли фишку, приняли и споконо работают. Другие же кричат о конце света.

twitter.com/xmalinov/statu…

11:42
@jsunderhood а сложные плагины? Переписывать?

Переписывать. Многое уже переписали, и доступно как отдельные компоненты. К тому же, код явно пора освежить.

twitter.com/serhey_shmyg/s…

11:46
@jsunderhood @xmalinov люди боятся тратить время на то что можно брать и использовать а не писать велосипед.

Кто то наоборот охотно переписывает все. Как говорил, разные ниши для тех кто хочет быстрей и кто качественней.

twitter.com/serhey_shmyg/s…

11:47
@jsunderhood странное сравнение, что ангуляр а что реакт. Разные вещи же, ну и я бы между ангуляром и флаксом выбрал ангуляр

Как раз то Flux и нельзя с Angular сравнивать, это же паттерн. Скорей Flux vs MVC. А React + Flux vs Angular.

twitter.com/rainrb/status/…

11:48

WebSQL позволяет выкачивать гигабайты в браузер, тут демка offline npm, которая синкает весь репозиторий в браузер github.com/pouchdb/npm-br…

11:56
@jsunderhood а почему вы выбрали Амстердам? Как с языком? (нидерландский, англ, как учили и тд)

В Европе 3 больших ИТ столицы - Лондон, Берлин и Амстердам. В UK сложно и дорого, в Германии меньше говорят на англ

twitter.com/achempion/stat…

11:58

В Нидерладнах в любой деревне говорят хорошо на английском, к экспатам очень хорошо относятся. И тут вообще просто хорошо :)

11:59

Так что я в ближайшее время и не планирую учить голландский. А про изучения английского ничего нового не смогу рассказать.

12:01
@jsunderhood какие у вас критерии при приеме на работу новых фронтов?

В текущей компании - хороший JS уровень, фокус на продукт, самостоятельность, умение и желание развиваться.

twitter.com/serhey_shmyg/s…

12:02
@jsunderhood расскажи про изоморфный fetch больше :)

Рассказывать особенно нечего, имплементация стандартного Fetch, работает в браузере и Node. github.com/matthew-andrew…

twitter.com/kotchuprik/sta…

12:05
@jsunderhood я думаю тяга к переписыванию всего и вся - это верный признак новичка.

Частенько наблюдаю обратное, когда переписывать хотят именно матерые разработчики.

twitter.com/reklatsmasters…

12:07

Тут вопрос в том, что нужно переписывать а что нет. В большинстве случаев c JQ плагинами - надо переписывать.

12:08
@jsunderhood согласен что в 90% свое лучше. Да и платят не за прикручивание плагинов. Но бывают задачи где здорово бы взять готовое.

Не поймите не правильно, я за максимальные code re-use и коллаборацию, но частенько это оправданно.

twitter.com/serhey_shmyg/s…

12:15
@jsunderhood Три столицы с примерно одинаково плохой погодой

Смотря с чем сравнивать. Мне погода нравиться, получше чем в Риге.

twitter.com/alexsabov/stat…

12:39
@jsunderhood важен ли опыт в фреймворках больше чем понимание core js? Почему большенство ищут дева под фреймворк? Ваше виденье вопроса.

У нас Реакт, в него порог вхождения не высокий, поэтому первым делом общие знания JS + инструментария.

twitter.com/serhey_shmyg/s…

12:42

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

12:44

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

12:47

Относительно того, плохо это или хорошо выращивать фреймворк-программистов, мнения явного нет. Бизнесу важно эффективно решать задачи.

12:48
@jsunderhood сколько не проходил собеседований. Если нету прод опыта в реакте год. То или гуляй. :)

Скорей всего эти компании не стоят внимания. Но возможно что и причина в другом.

twitter.com/serhey_shmyg/s…

12:50

Пока переносил хостинг, при смене паркинга домена заметил что рутер намертво закешировал DNS. Поставил Google Public DNS, кто пользовался?

12:56

В интернетах пишут, что это быстрей и безопасней должен быть. Ну как минимум лучше синкается blog.dnsimple.com/2015/03/why-an…

12:57

Проект Let's Encrypt уже начал раздавать бесплатные SSL сертификаты, но пока в закрытом бета режиме. Подписывайтесь letsencrypt.org/2015/11/12/pub…

13:15
@jsunderhood 8.8.8.8 ломает геозависимую логику DNS сайта. Для него вы как и Google в Америки, а вы на самом деле из Европы.

Не совсем так, только что проверил, определило предельно точно, что я в Амстердаме.

twitter.com/MonkAlbino/sta…

13:26
@jsunderhood как в Амстердаме с высокотехнологичными проектами? Есть ли Data Science, Big Data?

В Амстердаме меньше очень технологических проектов чем в Берлине. Тут больше продуктов для пользователей.

twitter.com/rusgautama/sta…

13:33

Голландцы очень умеют продавать, и продают что угодно. Но с технологиями не очень дружат.

13:43
@jsunderhood какой посоветуешь учебник по react, tutorial? прям чтоб с 0

Я просто по документации и примеру прошелся. Есть такой вот курс reactforbeginners.com

twitter.com/c1n1k/status/6…

14:03

Если нужен React + Flux, советую пройти свежый курс по Redux egghead.io/series/getting…

14:04
@jsunderhood что скажешь по поводу работы с анимацией в React? raf нужно патчить, web animation api вроде пока тоже отсутствует поддержка.

Чем не хватает стандартного решения c CSS? facebook.github.io/react/docs/ani…

twitter.com/AndreyCtkn/sta…

14:52
@jsunderhood А в городе тоже все на английском? и голландский негде не нужен?

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

twitter.com/Tom910ru/statu…

14:55

В ИТ сфере точно нигде не нужен местный язык, для гуманитарных профессий может пригодиться. Говорят что в Амстердаме 40% населения экспаты.

14:57
@jsunderhood Что вообще сам думаешь по поводу использования БЭМ технологий на проектах? Не появился ли такой опыт?

Отличный вопрос! Как я мог его пропустить... Я считаю что БЭМ стоит использовать только как методологию.

twitter.com/koloskof/statu…

15:27

БЭМ стэк по моему себя оправдывает только в очень больших проектах, или компаниях как Яндекс, с кучей суб-проектов.

15:29

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

15:31

Мне БЭМ стек всегда виделся сугубо специализированной технологией под определенную компанию. С Polymer/Angular/React и нечего сравнивать.

15:33

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

15:35
@blia @jsunderhood поисковикам, да и людям все равно важно TTLB, а не TTFB, стримы однозначно добро, но вряд ли они что-нибудь ускорят

Как раз наоборот, пользователям нужно показать то, за чем они пришли как можно скорей. То есть TTFB важней.

twitter.com/stay_positive/…

15:38
@jsunderhood используете ли все фичи из ES6 и используете ли еще из ES7 proposals? Как относишься к идее плагинов в Babel?

Используем в основном только ES6. Плагины это хорошо, но как и с PostCSS не надо слишком увлекаться кастомщиной.

twitter.com/katyaprigara/s…

15:40
@jsunderhood bem-components, bem-json, bemhtml, i-bem - не проникся? Что смущает?

Смущает все. Синтаксис, порог входа, developer experience. Нравиться только что HTML можно доопределять.

twitter.com/koloskof/statu…

15:46
@jsunderhood bem over mcss?

Для большинства БЭМ (а лучше CSS модули). MCSS давно не трогал, БЭМ со временем стал более dev friendly.

twitter.com/iamstarkov/sta…

15:47

MCSS стоит рассматривать только есть вы:

1) Делаете проект с большим кол-вом похожих блоков.
2) Вы занимаетесь только версткой.

15:49
@jsunderhood нужен ли бовер

Холиварная тема. NPM и правда сильно лучше, хотя бы тем что это настоящий репозиторий пакетов, а не ссылки на GH.

twitter.com/iamstarkov/sta…

15:50

Но Bower еще поживет, пока не все переехали, и пока не будут нормально решены проблемы пересекающихся зависимостей для ФЕ.

15:51
@jsunderhood а можно ли настроить npm что бы какие то пакеты устанавливались в одну попку, какие то в другую?

Нельзя, разве что пост-процессингом (то есть хаком). Но иметь все в одном месте не велика проблема.

twitter.com/SilentImp/stat…

15:55
@jsunderhood Если нет, то говорить о том что bower исчезнет странно. Он прежде всего разделяет пакеты по назначению: фронтенд/бекенд.

Только зачем это нужно? При сборке можно разделить как хочется.

twitter.com/SilentImp/stat…

15:55
@jsunderhood я слабо представлю как это сделать комфортно и без лишних телодвижений. А bower пакеты — чисто фронтенд и ставятся сразу …

Через require, в стиле CommonJS это делается удобней некуда.
Для других случаев все равно кастомная сборка нужна.

twitter.com/SilentImp/stat…

15:58
@SilentImp Бабель или Лоудеш — это бэкенд или фронтенд? Или и Бовером, и npm их ставить? @jsunderhood
16:05
@jsunderhood Мы уже года полтора используем в команде MCSS. Он нам здорово помог выйти из полной анархии в свое время. Сейчас больше БЭМ.
16:11
@jsunderhood Мы уже года полтора используем в команде MCSS. Он нам здорово помог выйти из полной анархии в свое время. Сейчас больше БЭМ.

Правильный подход, я тоже ранее называл MCSS переходным этапом к БЭМ.

twitter.com/koloskof/statu…

16:12

Конечного перехода правда может никогда и не быть, что примерно и происходило в ОК.

16:13
@jsunderhood зачем от него отказываться? Он удобный.

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

twitter.com/SilentImp/stat…

16:15

В прочем, как мы говорили ранее, ФЕ разработка сегодня это не только React с webpack. Для многих Bower еще долго будет удобней.

16:16

Но я не вижу никаких причин дальше развивать Bower, пусть тихо умирает в сторонке.

16:16
Вы всё еще мусолите эту тему? Если я не использую Webpack, то мне удобно использовать Bower @SilentImp @jsunderhood
16:17
@jsunderhood Может я пропустил уже это обсуждение. Говорят на веб стандартах призывали писать на чистом CSS. Что думаешь?

Чистый CSS + CSS модули вполне себе решение. Но убирать мелкие плюшки препроцессоров смысла мало.

twitter.com/koloskof/statu…

16:18

Фуф, ответил на последние вопросы, надо бы и выходные немного использовать. В течении часа-двух приватно еще поотвечаю, но пора прощаться.

16:21

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

16:22

На следующей неделе с вами будет новый разработчик, а я буду как всегда доступен на основном аккаунте @operatino.

16:23

Пишите, фоловьте, не теряем контакт! Большие вопросы можно задавать сюда github.com/operatino/ama/… или на почту r@rhr.me.

16:24

На заметку:

  • @operatino - основной, англ. аккаунт;
  • @operatino_ru для русскоязычных дискуссий;

Пока, и до скорых встреч!

16:29

github.com

youtu.be

other