Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский)Sergey Andreev
Веб-компоненты – это будущее веба. Это то, что придёт на смену Backbone, Angular, Knockout и многим другим.
Веб-компоненты добавляют в стандарты, их реализуют в браузерах, но кажется, что применять их ещё нельзя.
С помощью Polymer мы перенесёмся в будущее и реализуем веб-компоненты на существующих технологиях в существующих браузерах.
И да, мы сможем начать использовать чистый, понятный, поддерживаемый и легко переиспользуемый код уже прямо сейчас.
Видеозапись доклада: http://getdev.net/Event/asp-net-mvc-4
Обзор возможностей новой версии платформы ASP.NET MVC 4. Web API, Bundling & Minification, разработка для мобильных устройств, Single-Page Web Applications, а также другие, не столь крупные, нововведения.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
WebCamp2016, 29 июля, Одесса
Андрей Копёнкин CTO, FlyElephant
Оптимизируем мобильный веб полностью
В докладе поговорим об инициативе Accelerated Mobile Pages, о преимуществах её использования, что она из себя представляет и как она ускоряет отображение веб-страниц для портативных устройств
Website: http://webcamp.in.ua/devops.html#theme
Facebook: https://www.facebook.com/WebCamp/
VK: https://vk.com/webcamp
Twitter: https://twitter.com/WebCampOdessa
Youtube: http://bit.ly/2bsQ0LO
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Веб-компоненты в веб-разработке на примере Polymer (Артур Дробинский)Sergey Andreev
Веб-компоненты – это будущее веба. Это то, что придёт на смену Backbone, Angular, Knockout и многим другим.
Веб-компоненты добавляют в стандарты, их реализуют в браузерах, но кажется, что применять их ещё нельзя.
С помощью Polymer мы перенесёмся в будущее и реализуем веб-компоненты на существующих технологиях в существующих браузерах.
И да, мы сможем начать использовать чистый, понятный, поддерживаемый и легко переиспользуемый код уже прямо сейчас.
Видеозапись доклада: http://getdev.net/Event/asp-net-mvc-4
Обзор возможностей новой версии платформы ASP.NET MVC 4. Web API, Bundling & Minification, разработка для мобильных устройств, Single-Page Web Applications, а также другие, не столь крупные, нововведения.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
WebCamp2016, 29 июля, Одесса
Андрей Копёнкин CTO, FlyElephant
Оптимизируем мобильный веб полностью
В докладе поговорим об инициативе Accelerated Mobile Pages, о преимуществах её использования, что она из себя представляет и как она ускоряет отображение веб-страниц для портативных устройств
Website: http://webcamp.in.ua/devops.html#theme
Facebook: https://www.facebook.com/WebCamp/
VK: https://vk.com/webcamp
Twitter: https://twitter.com/WebCampOdessa
Youtube: http://bit.ly/2bsQ0LO
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Курс «Новые медиа технологии в образовании»
Составитель: Салыхова Бакытгуль Урынбасаровна, к.п.н.
Курс рассчитан на 36 часов. Проводится для преподавателей
КазУМОиМЯ им. Абылай хана
с 12 ноября по 23 ноября 2012 года.
http://bilimpaz.kz/
Вебинар по БЭМ: сборка и оптимизация проектаYandex
Содержание вебинара
Краткий повтор: основы методологии БЭМ и именование сущностей в CSS, HTML и файловой системе.
Сборка БЭМ-проекта с помощью Gulp:
сборка блоков в технологии CSS и изображений;
сборка только нужных блоков, используемых в html-файлах;
оптимизация рабочего процесса с помощью browser-sync и postCSS.
Автоматизация рутинной работы с помощью командной строки.
Видео https://events.yandex.ru/events/bemup/30-april-2015/
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcYandex
Сейчас на рынке есть множество фронтенд-библиотек, которые так или иначе реализуют MVC-паттерн. По сути, они нужны для облегчения создания и поддержки интерактивных веб-приложений. Для этих же целей и мы разработали библиотеку bem-mvc — она облегчает разработку веб-приложений на существующем БЭМ-стеке. Так, для реализации моделей в bem-mvc используются те же компоненты, что и в библиотеках bem-bl/bem-core. А провязки с представлением осуществляются в БЭМ-терминах для контролов из библиотеки bem-components или произвольных БЭМ-блоков. На прошлых BEMup я уже рассказывал об основных элементах библиотеки bem-mvc и способах их применения. Но то была теория, а на этот раз — меньше слов, больше дела! В прямом эфире мы создадим небольшое приложение для демонстрации возможностей bem-mvc. Пройдем путь от статического макета к действующему приложению. В процессе мы научимся организовывать код приложения, создавать модели, осуществлять провязку моделей и представления и создавать свои типы провязки.
Анна Ладошкина: Проект Guthenberg: революция в консолиRuslan Begaliev
WordPress знаменит удобством использования свой административной консоли, даже для пользователей без технических навыков. Новая разработка команды "проект Gutenberg" обещает еще упростить процесс публикации материалов и попутно уложить на лопатки конкурентов в лице визуальных редакторов. Давайте разберемся, что же представляет собой эта многообещающая новинка, в какой-то стадии разработка и каковы перспективы для владельцев сайтов и разработчиков.
Разработка мобильного и веб интерфейса для CachéInterSystems CEE
Клиент, сервер и их взаимодействие, разработка веб и мобильных приложений, Лебедюк Эдуард /
Client & server overview & communication between them, how to develop mobile apps based on existing webapp, Eduard Lebedyuk
Веб-приложения бывают разные: от сайтов-визиток небольших компаний или персональных блогов, до известных социальных сетей и популярных интернет-магазинов, обслуживающих миллионы пользователей по всему миру. Как устроены сложные веб-приложения «под капотом», за счет чего они выдерживают высокие нагрузки и как строится взаимодействие пользователя с такими нетривиальными веб-приложениеми, мы рассмотрим в докладе.
Преимущества компонентной разработки для тестирования интерфейсовYandex
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (19 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, какие преимущества компонентной разработки для тестирования интерфейсов существуют.
Курс «Новые медиа технологии в образовании»
Составитель: Салыхова Бакытгуль Урынбасаровна, к.п.н.
Курс рассчитан на 36 часов. Проводится для преподавателей
КазУМОиМЯ им. Абылай хана
с 12 ноября по 23 ноября 2012 года.
http://bilimpaz.kz/
Вебинар по БЭМ: сборка и оптимизация проектаYandex
Содержание вебинара
Краткий повтор: основы методологии БЭМ и именование сущностей в CSS, HTML и файловой системе.
Сборка БЭМ-проекта с помощью Gulp:
сборка блоков в технологии CSS и изображений;
сборка только нужных блоков, используемых в html-файлах;
оптимизация рабочего процесса с помощью browser-sync и postCSS.
Автоматизация рутинной работы с помощью командной строки.
Видео https://events.yandex.ru/events/bemup/30-april-2015/
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcYandex
Сейчас на рынке есть множество фронтенд-библиотек, которые так или иначе реализуют MVC-паттерн. По сути, они нужны для облегчения создания и поддержки интерактивных веб-приложений. Для этих же целей и мы разработали библиотеку bem-mvc — она облегчает разработку веб-приложений на существующем БЭМ-стеке. Так, для реализации моделей в bem-mvc используются те же компоненты, что и в библиотеках bem-bl/bem-core. А провязки с представлением осуществляются в БЭМ-терминах для контролов из библиотеки bem-components или произвольных БЭМ-блоков. На прошлых BEMup я уже рассказывал об основных элементах библиотеки bem-mvc и способах их применения. Но то была теория, а на этот раз — меньше слов, больше дела! В прямом эфире мы создадим небольшое приложение для демонстрации возможностей bem-mvc. Пройдем путь от статического макета к действующему приложению. В процессе мы научимся организовывать код приложения, создавать модели, осуществлять провязку моделей и представления и создавать свои типы провязки.
Анна Ладошкина: Проект Guthenberg: революция в консолиRuslan Begaliev
WordPress знаменит удобством использования свой административной консоли, даже для пользователей без технических навыков. Новая разработка команды "проект Gutenberg" обещает еще упростить процесс публикации материалов и попутно уложить на лопатки конкурентов в лице визуальных редакторов. Давайте разберемся, что же представляет собой эта многообещающая новинка, в какой-то стадии разработка и каковы перспективы для владельцев сайтов и разработчиков.
Разработка мобильного и веб интерфейса для CachéInterSystems CEE
Клиент, сервер и их взаимодействие, разработка веб и мобильных приложений, Лебедюк Эдуард /
Client & server overview & communication between them, how to develop mobile apps based on existing webapp, Eduard Lebedyuk
Веб-приложения бывают разные: от сайтов-визиток небольших компаний или персональных блогов, до известных социальных сетей и популярных интернет-магазинов, обслуживающих миллионы пользователей по всему миру. Как устроены сложные веб-приложения «под капотом», за счет чего они выдерживают высокие нагрузки и как строится взаимодействие пользователя с такими нетривиальными веб-приложениеми, мы рассмотрим в докладе.
Преимущества компонентной разработки для тестирования интерфейсовYandex
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (19 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, какие преимущества компонентной разработки для тестирования интерфейсов существуют.
https://seleniumcamp.com/talk/webdriverio-puppeteer-double-gun-double-fun/
In the automation world, W3C Webdriver HTTP protocol has been successfully used for a long time. With its help, many projects and libraries in various languages have been implemented (selenide, protractor, webdriverio and thousands of others). But more and more teams decide to use Chrome Debug Protocol, in particular the Puppeteer tool. It is based on WebSockets, and has its own special features – two-way communication, ability to subscribe to events in the browser, and much more. In this talk, we will look at the capabilities of both protocols, experiment and combine them together in one project to make the browser work at full power, and take the best from both communication channels.
В мире автоматизации давным-давно успешно используют W3C Webdriver HTTP протокол. С его помощью реализовано множество проектов и библиотек на различных языках (selenide, protractor, webdriverio и тысячи других). Но так же в последнее время все больше и больше команд решают использовать Chrome Debug Protocol, в частности инструмент Puppeteer. Он основан на WebSockets, и имеет свои особые возможности - двухсторонняя связь, возможность подписки на события в браузере, и многое другое. В этом докладе мы посмотрим возможности обоих протоколов, поэкспериментируем и совместим их вместе в одном проекте, чтобы заставить браузер работать на полную и взять лучшее от двух каналов связи.
Denis Bosak (Magecom): Front-end in Magento, and more. Prospects, technologies, and tools.
Денис Босак (Magecom): Front-end в Magento и не только. Перспективы, технологии, инструменты.
HighLoad++ 2017
Зал Дели + Калькутта, 7 ноября, 13:00
Тезисы:
http://www.highload.ru/2017/abstracts/2867.html
Последние несколько лет в продуктовой разработке проблемы масштабирования решаются через переход на микросервисную архитектуру. На эту тему было сказано много про подходы, плюсы и минусы, но мало кто рассматривал эту проблематику со стороны фронтенда.
В ЦИАН мы идем по пути перехода от монолита к микросервисам, в том числе и на фронтенде. Задачи и проблемы, с которыми мы сталкиваемся, очень близки к аналогичным на бэкенде, но в то же время совершенно другие.
Последние несколько лет в продуктовой разработке проблемы масштабирования решаются через переход на микросервисную архитектуру. На эту тему было сказано много про подходы, плюсы и минусы, но мало кто рассматривал эту проблематику со стороны фронтенда.
В ЦИАН мы идем по пути перехода от монолита к микросервисам, в том числе и на фронтенде. Задачи и проблемы, с которыми мы сталкиваемся, очень близки к аналогичным на бэкенде, но в то же время совершенно другие.
В своем докладе я расскажу про архитектуру фронтенда (и так называемого миддленда) в ЦИАН: какие задачи перед нами стояли, что мы решили, где мы находимся сейчас и с какими проблемами мы столкнулись.
В докладе пойдет речь о прогрессивных веб приложениях, подходе по улучшению пользовательского взаимодействия с мобильным вебом. Расскажу о том как обстоят дела с офлайном в 2016, как взаимодействовать с сервис воркерами и какие инструменты могут упростить жизнь разработчику. Поговорим о том, как PWA могут принести пользу бизнесу и сделать пользователя довольным.
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Fwdays
В докладе расскажу о шишках, набитых в процессе настройки SEO для конкретного проекта. Речь пойдет о настройке SEO для своего одностраничного приложения как с привлечением сторонних сервисов, так и самостоятельно, используя PhantomJS или рендеринг на стороне сервера. Также, поделюсь особенностями размещения share-кнопок от различных провайдеров.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Презентация с Открытого семинара . Ведущий — Евгений Романовский, инженер-программист веб-студии СКБ Контур. Видео с выступления доступно тут http://it-eburg.com/text/article/opyt_raboty_s_freimvorkom_aspnet_mvc/
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
При увеличении количества проектов в компании, разработчики сталкиваются с задачей унификации кодовой базы. Решением подобной задачи может быть библиотека, фреймворк или общий набор компонент. Такой инструмент позволит разработчикам сконцентрироваться только на новых задачах, избежать дублирования кода и повысить производительность.
В HeadHunter с такой задачей столкнулись в 2014 году. Решением данной проблемы стало создание унифицированной библиотеки компонент, которая успешно используется на всех проектах HH. В своем докладе я хотел бы поделиться опытом развития библиотеки, проблемами, которые возникали при разработке, и их последовательным решением.
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 6 июня, 14:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2471.html
Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?
Similar to Веб-компоненты в веб-разработке на примере Polymer (20)
11. Что такое Polymer?
• Надстройка над веб-компонентами,
упрощающая работу
• Библиотека, а не фреймворк
• Полифиллы для работы в «несовременных»
браузерах
11
12. Как работает
12
<link rel="import" href="../polymer/polymer.html">
<dom-module id="hello-world">
<template>
<p>Hello World!</p>
</template>
</dom-module>
<script>
Polymer({
is: 'hello-world',
});
</script>
23. Лучше чем Backbone?
• Проще
• Работа с моделями as-is (не требуется
оборачивать модели в Model/Collection)
• Двустороннее связывание
23
24. Лучше чем React?
• Двустороннее связывание
• Полноценная библиотека (не view-only)
• Основан на стандартизованных веб-
компонентах
• Нормальные шаблоны (не JSX)
24
25. Лучше чем Angular?
• Простой в изучении
• Понятные шаблоны
• Не фреймворк
• Не RC и не надо переписывать все между
обновлениями
25
28. Минусы Polymer
• Отсутствие поддержки в старых браузерах
• Начальная загрузка
• Performance (не идеален, но много лучше
Angular)
• Молодой (отсутствие специалистов,
накопленного опыта)
28
29. Рекомендации к использованию
• Использовать с осторожностью
• Внедрение малыми блоками
• Веб-компоненты это будущее веба
(ближайшее), но еще пока не настоящее
29