Pull to refresh
  • by relevance
  • by date
  • by rating

X5 frontend meetup

X5 Group corporate blog JavaScript *Fidonet *HTML *IT career

1 июля в 19:00 приглашаем на офлайн-митап про фронтенд-разработку от Х5 Group. Обещаем много реального опыта и обсуждения злободневных вопросов от крутых экспертов из Х5 Group, Mish.Design, Tinkoff и Evil Martians.

Регистрация

Читать далее
Total votes 4: ↑4 and ↓0 +4
Views 689
Comments 0

Быстрый рендеринг с DOM шаблонизаторами

Конференции Олега Бунина (Онтико) corporate blog CSS *JavaScript *Client optimization *HTML *

Борис Каплуновский (BSKaplou)


Борис Каплуновский

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

Сегодня я расскажу о довольно глубоком путешествии во фронтенд. Началось это путешествие тогда, когда я обнаружил, что фронтенд aviasales.ru тормозит, и надо что-то делать. Это путешествие началось года полтора-два назад, и вещи, о которых я буду рассказывать, – это сжатое повествование того, что я узнал.

Самым критичным, на мой взгляд, в производительности фронтенд-приложений является рендеринг. Все мы знаем, что работа с DOM – это такая вещь, которую нужно стараться избегать. Чем больше вы делаете вызовов к DOM API, тем медленнее работает ваше приложение.
Total votes 62: ↑52 and ↓10 +42
Views 30K
Comments 56

Как перестать отлаживать асинхронный код и начать жить

Конференции Олега Бунина (Онтико) corporate blog JavaScript *Programming *Concurrent computing *

Андрей Саломатин ( filipovskii_off )


Андрей Саломатин

Сегодня каждый день появляются новые языки программирования — Go, Rust, CoffeeScript — все, что угодно. Я решил, что я тоже горазд придумать свой язык программирования, что миру не хватает какого-то нового языка…

Дамы и господа, я представляю вам сегодня Schlecht!Script — чумовой язык программирования. Мы все должны начать им пользоваться прямо сейчас. В нем есть все то, к чему мы привыкли — в нем есть условные операторы, есть циклы, есть функции и функции высших порядков. В общем, в нем есть все, что нужно нормальному языку программирования.

Что в нем не очень обычно, что может даже оттолкнуть, на первый взгляд, — это то, что в Schlecht!Script функции имеют цвет.
Total votes 61: ↑47 and ↓14 +33
Views 26K
Comments 22

Изоморфные React-приложения: производительность и масштабирование

Конференции Олега Бунина (Онтико) corporate blog JavaScript *Client optimization *Angular *ReactJS *


Денис Измайлов ( DenisIzmaylov )


Всем привет! Вкратце расскажу о себе. Я — Денис Измайлов. Последние 5 лет сосредоточился на JS-разработке, делал много Single Page Application, highload, React, выступал на MoscowJS несколько раз, каммитил webpack и т.д.

Сегодня хотел бы поговорить вот о чем: почему от Single Page Application в его классическом виде стоит отказаться; как изоморфные приложения отразятся на Вашей зарплате; и что вы будете делать на этих выходных?
Читать дальше →
Total votes 43: ↑26 and ↓17 +9
Views 32K
Comments 55

Как сделать кроссплатформенное десктопное приложение на базе веб-технологий

Конференции Олега Бунина (Онтико) corporate blog JavaScript *Node.JS *WebGL *


Дмитрий Дудин (xbSoftware)


Сегодня я вам расскажу про технологию nw.js, большинство слайдов моей презентации будет посвящено ей. Это технология позволяет разрабатывать десктопные приложения и писать их на html, javascript и css. Причем приложение будет кроссплатформенное — под Windows, Linux и Mac. Можно их сбилдить и они будут иметь доступ к графическому интерфейсу системы, т.е. смогут еще работать с менюшками и т.д.
Total votes 58: ↑47 and ↓11 +36
Views 37K
Comments 119

Визуализация данных в браузере с помощью D3.js

Конференции Олега Бунина (Онтико) corporate blog Web design *Vector graphics *Interfaces *


Михаил Дунаев ( war_hol )


С визуализацией данных и с различными диаграммами мы сталкиваемся каждый день, это какие-то Google Analitics, Интернет-банки, это Excel и т.д.



На самом деле графики преследуют человечество всю нашу историю. Одна из первых визуализаций данных — это Х век н.э. Неизвестный астроном изобразил с помощью диаграмм движение небесных тел:
Total votes 41: ↑38 and ↓3 +35
Views 20K
Comments 11

Browser Fingerprint – анонимная идентификация браузеров

Конференции Олега Бунина (Онтико) corporate blog Website development *JavaScript *Browsers


Валентин Васильев (Machinio.com)


Что же такое Browser Fingerprint? Или идентификация браузеров. Очень простая формулировка — это присвоение идентификатора браузеру. Формулировка простая, но идея очень сложная и интересная. Для чего она используется? Для чего мы хотим присвоить браузеру идентификатор?


  • Мы хотим учитывать наших пользователей. Мы хотим знать, пришел ли пользователь к нам первый раз, пришел он во второй раз или в третий. Если пользователь пришел во второй раз, мы хотим знать, на какие страницы он заходил, что он до этого делал. С анонимными пользователями это невозможно. Если у вас есть система учета записей, пользователь логинится, мы все про него знаем — мы знаем его учетную запись, его персональные данные, мы можем привязать любые действия к этому пользователю. Здесь все просто. В случае с анонимными пользователями все становится гораздо сложнее.
Total votes 75: ↑54 and ↓21 +33
Views 173K
Comments 167

Производительность WebGL-приложений

Конференции Олега Бунина (Онтико) corporate blog Game development *Canvas *WebGL *


Кирилл Дмитренко (Яндекс)


Всем привет! Меня зовут Кирилл Дмитренко, последние 4,5 года я работаю в Яндексе фронтенд-разработчиком. И все это время меня преследуют панорамы. Когда я пришел в компанию, я делал внутренние сервисы для панорам, после этого я решал задачи по панорамам на больших Яндекс.картах, а недавно сделал веб-плеер панорам на Canvas 2D, HTML и WebGL. Сегодня я хочу поговорить с вами о производительности WebGL-приложений.
Читать дальше →
Total votes 35: ↑32 and ↓3 +29
Views 13K
Comments 3

Конструктор

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *JavaScript *HTML *


Денис Паясь (Яндекс)


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

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

Сегодня я расскажу про такую офигительную нашу внутреннюю штуку как Конструктор, про то как он получился, почему, и как мы вообще к этому всему пришли.Мне кажется, что те решения, которые мы приняли в процессе реализации этой замечательной фиготы, могут быть полезны не только нам в рамках нашей компании, нашей команды, но и целому множеству других команд, в ваших, например, компаниях. Я не знаю упомянул я или нет, но проект реально очень крутой. Почему – сейчас расскажу.
Total votes 20: ↑18 and ↓2 +16
Views 13K
Comments 3

Объектное Реактивное Программирование

JavaScript *Programming *
Recovery mode

Объектное Реактивное Программирование


Дмитрий Карловский из SAPRUN представляет… ммм...


Это — текстовая версия одноимённого выступления на FrontendConf'17. Вы можете читать её как статью, либо открыть в интерфейсе проведения презентаций, либо посмотреть видео.

Надоело.. Чем поможет ОРП?
… писать много, а делать мало? Пиши мало, делай много!
… часами дебажить простую логику? Реактивные правила обеспечат консистентность!
… асинхронщина? Синхронный код тоже может быть неблокирующим!
… что всё по умолчанию тупит? ОРП оптимизирует потоки данных автоматом!
… функциональные головоломки? Объекты со свойствами — проще некуда!
… что приложение падает целиком? Позволь упасть его части — само поднимется!
… жонглировать индикаторами ожидания? Индикаторы ожидания пусть сами появляются, где надо!
… двустороннее связывание? Двустороннее связывание нужно правильно готовить!
… пилить переиспользуемые компоненты? Пусть компоненты будут переиспользуемыми по умолчанию!
… вечно догонять? Вырывайся вперёд и лидируй!
Читать дальше →
Total votes 22: ↑15 and ↓7 +8
Views 19K
Comments 170

Разработка Rich Text Editor: проблемы и решения

Конференции Олега Бунина (Онтико) corporate blog CSS *JavaScript *Programming *Client optimization *
Текстовые редакторы, как тип программного обеспечения, появились чуть позже чем динозавры, и вероятнее всего это был вообще первый софт, с которым вы столкнулись в своей жизни, возможно кто-то даже застал MS-DOS Editor.

Однако с переходом большой части ПО в браузеры актуальны и соответствующие визуальные редакторы Rich Text Editors, и проблемных мест в их разработке масса. Если вы по какой-то причине решили сделать свой собственный редактор, то подумайте еще раз — есть мнение, что делать этого не нужно.



Чтобы вы могли принять более взвешенное решение, Егор Яковишен обобщил весь свой опыт, полученный в процессе создания Setka Editor, и рассказал про проблемы, с которыми придется столкнуться, и что можно предпринять для их решения.

Disclaimer: статья написана на основании доклада Егора на конференции Frontend Conf 2017 в июне 2017 года. Ситуация с поддержкой браузерами определенных API с тех пор уже могла измениться.


Total votes 53: ↑52 and ↓1 +51
Views 28K
Comments 25

Программа Frontend Conf для тех, у кого нет маховика времени

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *JavaScript *HTML *
Треть всех докладов на грядущем РИТ++ будет связана с клиентской разработкой, а это почти 40 штук. Естественно, они пойдут в два параллельных специализированных потоках, а наиболее применимые для широкой аудитории — в главном зале. И вот тут бы и пригодился маховик времени, но похоже, что вместо этого придется решать серьезную задачу максимизации полезности.

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


Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Views 4.1K
Comments 0

Frontend Conf Moscow — клиентсайд и вглубь и вширь

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *JavaScript *Conferences
Как-то так получается, что клиентская разработка, с одной стороны, захватывает территории и становится все более востребованной, с другой, — все больше обосабливается. О распространении мы судим по нескольким последним фестивалям РИТ++, на которых и докладов по фронтенду было в 2-3 раза больше, чем по бэкенду или DevOps, и слушателям это было интереснее, и даже приехавшие видеоблогеры в основном оказались фонтендерами, но об этом позже. А в ответ на тенденции разделения и углубления специализаций мы организуем Frontend Conf Moscow. О том, что будет из себя представлять эта конференция, что от неё ждать, как поучаствовать, читайте далее.



О главном


Frontend Conf Moscow пройдет 4 и 5 октября в Москве в хорошо знакомом и удобном Инфопространстве. Это будет два дня, которые мы с вами целиком посвятим технологиям разработки клиентской части веб-проектов. Доклады в несколько потоков, мастер-классы, митапы, обсуждения с экспертами за чашкой кофе или, в вечернее время, стаканом кое-чего еще, сильнейшие разработчики среди участников — все это позволит погрузиться в тему полностью, и обсудить аспекты, которые до этого оказывались слишком узкими или специфичными.
Total votes 24: ↑23 and ↓1 +22
Views 2.1K
Comments 0

Шесть наиболее полезных докладов с Frontend Conf 2018

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *
Друзья, с позиции главы программного комитета Frontend Conf поместил под катом краткий обзор шести самых полезных докладов с РИТ++ 2018 по фронтенду.

В подборке нашлось место рассказу про то, как настраивать PWA-приложения и делать их более нативными. Отдельно затронуты вопросы транспиляции, где на примере API Яндекс.Карт показано, как можно писать на ES2015, получая на выходе ES3, и обеспечить поддержку IDE и линтеров. Еще одна история — про популярные форматы хранения изображений, их сжатие и варианты загрузки на мобильные устройства. Не менее хардкорный доклад про то, как перенести нагрузку, связанную с расчетом анимации, с CPU на видеокарту. Плюс два отдельных доклада про секреты и лайфхаки CSS.

Все доклады — сугубо практические, а некоторые — вполне холиварные. Одним словом, именно такие, как мы любим, и отбираем для Frontend Conf Moscow.


Total votes 45: ↑45 and ↓0 +45
Views 17K
Comments 2

Как работает Headless Chrome

Конференции Олега Бунина (Онтико) corporate blog Website development *JavaScript *Node.JS *
Уже из названия понятно, что headless-браузер — это нечто без головы. В контексте фронтенда — это незаменимый инструмент разработчика, с помощью которого можно тестировать код, проверять качество и соответствие верстке. Виталий Слободин на Frontend Conf решил, что необходимо познакомиться с устройством этого инструмента поближе.

Под катом компоненты и особенности работы Headless Chrome, интересные сценарии использования Headless Chrome. Вторая часть про Puppeteer — удобную Node.js-библиотеку для управления Headless-режимом в Google Chrome и Chromium.


О спикере: Виталий Слободин — бывший разработчик PhantomJS — тот, кто закрыл его и похоронил. Иногда помогает Константину Токареву ( annulen) в «воскрешенной» версии QtWebKit — том самом QtWebKit, где есть поддержка ES6, Flexbox и многие других современных стандартов.

Виталий любит исследовать браузеры, в свободное время копаться в WebKit, Chrome и прочее, прочее. Про браузеры сегодня и поговорим, а именно про безголовые браузеры и всю их семейку призраков.
Total votes 42: ↑42 and ↓0 +42
Views 65K
Comments 13

Frontend Conf — с заботой о пользователе

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *Conferences
Не стану утверждать, что фронтенд важнее бэкенда, или поддерживать спорную концепцию, что «бэкенд в современном вебе не обязателен». Оставим холивары в стороне, просто признаем, что фронтенд-разработчик занимается собственно клиентской стороной веб-проектов, а значит его работа больше всего видна конечным пользователям, за которых идет борьба. То есть, не уделить фронтенду должного внимания, просто непозволительная роскошь.

С этим определились, осталось только разобраться, и как же теперь все сделать круто. Где тут в интернете про это пишут? — Да везде! И вот, чтобы разобраться со всем многообразием современных технологий, фреймворков и библиотек, мы проводим профессиональную конференцию Frontend Conf. Отбирая для неё темы мы сделали упор не на хайповость, а на полезность докладов. Любой профессиональный фронтендер придя на конференцию может быть уверен, что найдёт для себя много полезных докладов соответствующих его уровню знаний. Какие именно доклады в итоге вошли в программу, расскажу под катом.


Читать дальше →
Total votes 42: ↑41 and ↓1 +40
Views 3.3K
Comments 3

Мутационный анализ, или как тестировать тесты

Конференции Олега Бунина (Онтико) corporate blog Website development *JavaScript *Web services testing *
Тестов много не бывает — это все знают. Мемы про unit и интеграционное тестирование уже не очень-то веселят. А мы по-прежнему не знаем, можно ли полагаться на результаты прохождения тестов, и какой процент покрытия позволит не пустить баги в продакшен. Если фатальные изменения в коде проскакивают тесты, не оказывая влияния на их результат, то решение напрашивается само — надо тестировать тесты!



О подходе к автоматизации этой задачи и был доклад Марка Лангового на Frontend Conf. Видео и статья короткие, а идеи очень рабочие — надо брать на заметку.
Total votes 35: ↑35 and ↓0 +35
Views 9.1K
Comments 2

JSON API – работаем по спецификации

Конференции Олега Бунина (Онтико) corporate blog Website development *Open source *JavaScript *Programming *
В последнее время веб-разработка разделилась. Теперь мы все не full-stack программисты — мы фронтендеры и бэкендеры. А самое сложное в этом, как и везде, это проблема взаимодействия и интеграции.

Фронтенд с бэкендом взаимодействуют через API. И от того, какой это API, насколько хорошо или плохо бэкенд и фронтенд договорились между собой, зависит весь результат разработки. Если мы все вместе станем обсуждать, как сделать паджинацию, и потратим на её переделывание целый день, то можем и не добраться до бизнес-задач.

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


Total votes 71: ↑68 and ↓3 +65
Views 93K
Comments 110

Собираем бандл мечты с помощью Webpack

Конференции Олега Бунина (Онтико) corporate blog Website development *Open source *JavaScript *Programming *
JS-приложения, сайты и другие ресурсы становятся сложнее и инструменты сборки — это реальность веб-разработки. Бандлеры помогают упаковывать, компилировать и организовывать библиотеки. Один из мощных и гибких инструментов с открытым исходным кодом, который можно идеально настроить для сборки клиентского приложения — Webpack.

Максим Соснов (crazymax11) — Frontend Lead в N1.RU внедрил Webpack в несколько больших проектов, на которых до этого была своя кастомная сборка, и контрибьютил с ним несколько проектов. Максим знает, как с Webpack собрать бандл мечты, сделать это быстро и конфигурировать так, чтобы конфиг оставался чистым, поддерживаемым и модульным.


Расшифровка отличается от доклада — это сильно усовершенствованная пруфлинками версия. По всей расшифровке рассыпаны пасхалочки на статьи, плагины, минификаторы, опции, транспайлеры и пруфы слов докладчика, ссылки на которые просто не поставить в выступление. Если собрать все, то откроется бонусный уровень в Webpack :-)
Total votes 61: ↑58 and ↓3 +55
Views 56K
Comments 17

Лучше день потерять

Конференции Олега Бунина (Онтико) corporate blog JavaScript *Programming *Java *TypeScript *
В инвестировании есть понятие «Плохо сейчас — хорошо потом». Инвестор регулярно отщипывает 10, 20% или даже 30% своего заработка на будущее. Эти деньги он инвестирует в облигации, акции, ОФЗ, ETF — кто во что горазд. Сейчас, в моменте, инвестор отбирает у себя свой заработок, лишает себя каких-то благ, чтобы в будущем, на горизонте в 10-20 лет, получить пользу от инвестиций. Прибыль в будущем покроет сегодняшние лишения. Примерно такую же стратегию исповедует Алексей Охрименко (obenjiro), но применительно к разработке — лучше день потерять, а потом за 5 минут полететь.


Источник

На Frontend Conf 2018 Алексей рассказал, как потеряв кучу времени сейчас, в конечном счете его сэкономить потом. Этот доклад не о чувстве скуки и не о том, как бороться с монотонными и рутинными задачами, а о том как потратить время по максимуму — сколько есть, все потратить, и посмотреть, что из этого получится. В расшифровке доклада опыт написания инструментов для отладки, тестирования, оптимизации, скафолдинга и валидации под разные проекты. Бонусом Алексей расскажет о ряде уже существующих инструментов и о пользе, которую они приносят. Давайте выяснять, надо ли вообще на это тратить время.

О докладчике: Алексей Охрименко — разработчик в Avito Frontend Architecture, где немного улучшает жизнь миллионов людей. Ведет подкаст «5 min Angular», а в свободное ото сна и подкаста время организует Angular Meetup вместе с ребятами из Тинькофф, и выступает с огромным количеством разных и спорных докладов.
Total votes 41: ↑37 and ↓4 +33
Views 13K
Comments 14