Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в версткеWebCamp
WebCamp2016, 29 июля, Одесса
Юрий Артюх Chief Technology Officer, Coderiver
Современные подходы в верстке
В 2016 верстка трансформируется, о том как ее автоматизировать, и выжить верстальщику среди реактов, ангуларов и прочего и будет рассказ.
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
Александр Кириллов. Веб разработка: Что такое Ruby On Rails. РИФ-Воронеж 2016РИФ-Воронеж
"Тема выступления рассчитана, в основном, на начинающих разработчиков. В ней освещены основные концепции веб разработки с помощью фреймворка ""Ruby On Rails"". Выступление будет разделено на основные тематики:
- что это за фреймворк и что значит выражение “Ruby On Rails”
- будет рассмотрен паттерн MVC в Rails
- подробно рассмотрены соотвествующие уровни (модель, контроллер, представление)
- отправка почты, нюансы и решения
- отложенные и периодические задачи
- особое внимание будет уделено тестированию приложений"
Разработка небольшого проекта c BEM и node.js — Сергей ПузанковYandex
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в версткеWebCamp
WebCamp2016, 29 июля, Одесса
Юрий Артюх Chief Technology Officer, Coderiver
Современные подходы в верстке
В 2016 верстка трансформируется, о том как ее автоматизировать, и выжить верстальщику среди реактов, ангуларов и прочего и будет рассказ.
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
Александр Кириллов. Веб разработка: Что такое Ruby On Rails. РИФ-Воронеж 2016РИФ-Воронеж
"Тема выступления рассчитана, в основном, на начинающих разработчиков. В ней освещены основные концепции веб разработки с помощью фреймворка ""Ruby On Rails"". Выступление будет разделено на основные тематики:
- что это за фреймворк и что значит выражение “Ruby On Rails”
- будет рассмотрен паттерн MVC в Rails
- подробно рассмотрены соотвествующие уровни (модель, контроллер, представление)
- отправка почты, нюансы и решения
- отложенные и периодические задачи
- особое внимание будет уделено тестированию приложений"
Разработка небольшого проекта c BEM и node.js — Сергей ПузанковYandex
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
Технология Node.Js и ее интеграции с Drupal. Установка, настройка и примеры работы.
-----
Сайт сибирского сообщества друпаллеров ДрупалСиб drupalsib.ru
Группа сибирского сообщества друпаллеров Вконтакте vk.com/drupalsib
Партнер Группа компаний И20 i20.biz
Видеозапись доклада: http://getdev.net/Event/asp-net-mvc-4
Обзор возможностей новой версии платформы ASP.NET MVC 4. Web API, Bundling & Minification, разработка для мобильных устройств, Single-Page Web Applications, а также другие, не столь крупные, нововведения.
Доклад посвящен основным проблемам создания полноценных Single Page Application, а также будут продемонстрированы пути их решения на основе фреймворка basis.js.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Технология Node.Js и ее интеграции с Drupal. Установка, настройка и примеры работы.
-----
Сайт сибирского сообщества друпаллеров ДрупалСиб drupalsib.ru
Группа сибирского сообщества друпаллеров Вконтакте vk.com/drupalsib
Партнер Группа компаний И20 i20.biz
Видеозапись доклада: http://getdev.net/Event/asp-net-mvc-4
Обзор возможностей новой версии платформы ASP.NET MVC 4. Web API, Bundling & Minification, разработка для мобильных устройств, Single-Page Web Applications, а также другие, не столь крупные, нововведения.
Доклад посвящен основным проблемам создания полноценных Single Page Application, а также будут продемонстрированы пути их решения на основе фреймворка basis.js.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Приёмы верстки страниц с использованием HTML + CSSDenis Latushkin
Инструменты веб-разработки. Стилевые возможности по относительному расположению элементов. Подключение шрифтов. Примеры верстки страниц. Работа с графическими редакторами.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...Yandex
28 мая 2011, Я.Субботник в Киеве
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автоматизация"
О докладе:
В докладе подробно разобрано, что влияет на скорость отрисовки страниц, как ее измерить и как оптимизировать, включая вопрос автоматизации процесса тестирования скорости отрисовки в разных браузерах.
Действительно ли нужно уделять время оптимизации скорости рендеринга страниц или достаточно оптимизировать только скорость загрузки? Что такое reflow и repaint и как это влияет на время отрисовки страниц? Что использовать для измерения времени reflow и repaint? Как автоматизировать процесс тестирования скорости рендеринга страниц в большом количестве браузеров?
Шаблонизация основанная на работе с DOM становится трендом: React, Ractive, Basis.js уже используют этот подход, другие идут в эту сторону. Главным преимуществом подхода считается скорость, но оно далеко не единственное!
В докладе немного рассказано о возможностях, что дает DOM подход.
State of the Standardized Web
В 2014 году принципы Extensible Web начали воплощаться в новых стандартах. Поговорим о Web Crypto, Web Animations, Service Worker и других вещах, которые должны принципиально изменить веб-платформу в ближайшем будущем.
Сергей Константинов, Яндекс
Руководитель группы разработки API Яндекс.Карт. Окончил Южно-Уральский государственный университет. Разработкой API Яндекс.Карт занимается с 2008 года. С 2013 — участник Технической архитектурной группы Консорциума W3C.
4. Производительность CSS
• Сложность страниц увеличивается
– Более красочный дизайн
– Более сложная логика
– Больше объем информации
• CSS-анимация вытесняет JavaScript
– Rollover-эффекты
– Фиксированное расположение блоков
– Выпадающие меню и др.
webo.in 4 / 19
5. CSS-выражения
• Работают только для IE
• Позволяют внедрить JavaScript в CSS
• Существенно замедляют работу
• Вычисляются постоянно
• Пример:
#myDiv {
position: absolute;
left: expression((document.body.offsetWidth > 110 ?
document.body.offsetWidth–110 : 110) + "px");
top: expression(document.body.offsetHeight-110 + "px");
}
webo.in 5 / 19
6. Устраняем CSS-выражения
• Читаем текущее значение
– Через currentStyle
• Вычисляем значение
– Через само CSS-выражение
• Заменяем значение выражения
– Через runtimeStyle на статическое
значение
webo.in 6 / 19
8. Спецификация CSS
• id должен быть уникальным
• Можно использовать только один раз
• class предполагает множественное
использование
• Для повторяющихся на странице
элементов
webo.in 8 / 19
9. Использование в стилях
• #id быстрее, чем node#id
• .class быстрее, чем node.class
• node .class быстрее, чем
node node2.class
• .class в IE быстрее, чем #id
webo.in 9 / 19
11. Время на инициализацию
• При загрузке страницы создается
новый документ
• И при создании любого frame/iframe
• Это ресурсоемкая операция
– 50-200 мс
• Не зависит от размера документа
– Создается одно и то же окружение
webo.in 11 / 19
12. Размер DOM-дерева
• Время на создание дерева линейно
зависит от размера
– 20-50 мс на 1000 узлов
• Семантическое дерево строится
дольше
– На 15-20%
• Основные задержки связаны с
размером
webo.in 12 / 19
13. Скорость выбора элемента по id
• Зависит от размера DOM-дерева
• Зависит от числа элементов с id
• Используем id по минимуму
• Если не требуется обращаться к
элементу из JavaScript, то
используем class
webo.in 13 / 19
15. Reflow
• Производится при загрузке документа
• Либо при обновлении элемента
• Либо при вычислении его размеров
• Либо при вычислении его координат
• Проходит всех родителей элемента,
породившего reflow
webo.in 15 / 19
16. offsetHeight и display:none
• offsetHeight
– Позволяет узнать, отображается ли
элемент на странице
– Очень ресурсоемок
• display:none
– Требует специального задания через стили
– Быстрее на 2 порядка, чем offsetHeight
webo.in 16 / 19
17. Стили или классы?
• Стили
– Назначаются для одного элемента
– Позволяют быстро менять отображение
– Приводят к задержкам при отрисовке
• Классы
– Позволяет назначить сразу группу стилей
– Легко масштабируются
– Назначаются в отложенном режиме
webo.in 17 / 19
18. Два слова о таблицах
• Таблицы – только для табличных
данных
• IE не отображает таблицу, пока не
загрузит полностью
• Фиксированная ширина столбцов
– Ускоряет отрисовку (все в один проход)
– Назначается через <col>
webo.in 18 / 19