Для большинства пользователей мобильный интернет полон боли и страданий. При том что пользователей становится только больше — проблема не решается, а становится острее. Вас ожидает увлекательнейший доклад о том, как удалось разогнать до космической скорости мобильную Lenta.ru.
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10OdessaFrontend
Можно ли получить заветные 100 баллов в PageSpeed Insights, хорошо индексироваться и всё это без AMP? Легко! Дмитрий Шевченко рассказывает как этого достичь и познакомит с инструментом для проверки скорости сайта.
HTML5 Web Components: следующий шаг к модульности вашего проектаrakhmanoff
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
В топку Postman - пишем API автотесты в привычном стекеCOMAQA.BY
Postman - отличный инструмент для автоматизации тестирования API, но он требует дополнительного софта, дополнительных навыков и дополнительных настроек. Есть ли способ обойти эти ограничения и перейти сразу к автоматизации API-тестов в привычной среде, если вы уже разрабатываете автотесты на Java? Конечно! Давайте поговорим о способах автоматизации API-тестов с использованием Java
"Изоморфная разработка на javascript с помощью react.js" Максим КлимишинFwdays
Современная разработка на JavaScript быстро эволиционирует – в язык входят инструменты, которые позволяют создавать прогнозируемые и надежные продукты как на сервере, так и на клиенте. С ES6 пришли генератор и итераторы, из Clojure – трансдюсеры и CSP каналы, Facebook дал React.js и Immutable.js.
Изоморфная разработка – когда один и тот же код может работать как на сервере, так и на клиенте, набирает популярность. В моем докладе я хочу раскрыть последние тренды в этой области и как это можно сделать с помощью React.js.
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10OdessaFrontend
Можно ли получить заветные 100 баллов в PageSpeed Insights, хорошо индексироваться и всё это без AMP? Легко! Дмитрий Шевченко рассказывает как этого достичь и познакомит с инструментом для проверки скорости сайта.
HTML5 Web Components: следующий шаг к модульности вашего проектаrakhmanoff
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
В топку Postman - пишем API автотесты в привычном стекеCOMAQA.BY
Postman - отличный инструмент для автоматизации тестирования API, но он требует дополнительного софта, дополнительных навыков и дополнительных настроек. Есть ли способ обойти эти ограничения и перейти сразу к автоматизации API-тестов в привычной среде, если вы уже разрабатываете автотесты на Java? Конечно! Давайте поговорим о способах автоматизации API-тестов с использованием Java
"Изоморфная разработка на javascript с помощью react.js" Максим КлимишинFwdays
Современная разработка на JavaScript быстро эволиционирует – в язык входят инструменты, которые позволяют создавать прогнозируемые и надежные продукты как на сервере, так и на клиенте. С ES6 пришли генератор и итераторы, из Clojure – трансдюсеры и CSP каналы, Facebook дал React.js и Immutable.js.
Изоморфная разработка – когда один и тот же код может работать как на сервере, так и на клиенте, набирает популярность. В моем докладе я хочу раскрыть последние тренды в этой области и как это можно сделать с помощью React.js.
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
Изоморфные React-приложения производительность и масштабирование / Денис Изма...Ontico
Взглянем ещё раз на концепцию изоморфных приложений. На первый взгляд, всё красиво — полный порядок, высокая организованность, быстрая выдача результата. Но так ли всё оптимистично? Что случится после того, как мы развернём приложение на сервере? Почему при росте нагрузки наше React-приложение начинает тормозить? Как масштабироваться? Купить ещё несколько серверов? Потом ещё немного? Есть способ лучше.
В рамках доклада рассмотрим следующие темы:
1. Что представляют собой изоморфные приложения?
2. Зачем они на самом деле нужны?
3. Рассмотрим варианты архитектуры.
4. Найдём слабые места (bottleneck).
5. Посмотрим на способы решения и оценим их эффективность.
6. Обсудим возможности масштабирования изоморфных приложений.
7. И, самое главное, ответим на вопрос — стоит ли игра свеч?
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable.
I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them.
I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Как строить архитектуру для отказоустойчивой службы такси / How to Build a ...Mad Devs
Доклад с конференции Highload++ 2015 об отказоустойчивой архитектуре
A report from the Highload++ 2015 conference in Moscow, describing the fallover architectures
Автор: Андрей Минкин / Andrew Minkin
http://www.highload.ru/2015/abstracts/1661.html
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаYandex
Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.
Дизайн REST API для высокопроизводительных систем / Александр Лебедев (Новые ...Ontico
Доклад осветит вопросы устройства REST API для веб-приложений и мобильных клиентов, от которых требуется высокая производительность.
Проектирование высокопроизводительных REST API.
- Кто должен участвовать в проектировании.
- Как узнать, что оптимизировать.
- Как измерять производительность REST API.
Паттерны и антипаттерны.
- Почему pagination - это плохо, и на что лучше заменить.
- Проблема N+1 и как с ней бороться.
- Бесполезные данные - как обнаружить и уничтожить.
- Как не ломать кэширование на клиенте.
- Эффективная работа с интерфейсами "мастер-детали".
Кэширование.
- Три слоя кэширования.
- Самый быстрый запрос - тот, которого не было. Как увеличить их количество.
- Экономия трафика.
- Исключение ненужных вычислений.
- Подходы к инвалидации кэша.
Приемы оптимизации работы с API на клиенте.
- Параллельные запросы.
- Эффективный разбор данных.
- In-memory DB на клиенте.
- Стратегии кэширования на клиенте.
Переход с Objective-C на Swift — все ли так просто? / Олег Алексеенко (SuperJob)Ontico
РИТ++ 2017, App's Conf
Зал Найроби, 6 июня, 10:00
Тезисы:
http://appsconf.ru/2017/abstracts/2818.html
Ни для кого не секрет, что Swift — это mainstream: его активно продвигает Apple, на нем пишутся все новые фреймворки, многие разработчики начинают именно с него. Но так ли просто мигрировать c Objective-С, если твоему приложению 5 лет и оно имеет большую аудиторию? В докладе мы расскажем о том, как сделать это без ущерба для бизнеса.
Вы узнаете об этапах такого перехода:
1. Какую бизнес-проблему решали? - Ускоряем разработку, уменьшаем количество багов, проще и быстрее находим новых сотрудников, ограждаем от будущих рисков (старых не поддерживаемых фреймворков, устаревших АПИ).
...
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 6 июня, 14:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2471.html
Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se...Sergey Xek
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного server-side API десктопного приложения. Сергей Аверин, Badoo.
Доклад рассказывает о реально примененных способах оптимизации производительности API компании Badoo для собственных десктоп-приложений: как специфика «много постоянных соединений/однотипные запросы/большая нагрузка» повлияла на стратегию оптимизации производительности.
Что было сделано:
• Планирование архитектуры изначально (fault-tolerance, адаптивные апдейты и тайм-ауты, отказ от попыток восстановления после ошибок для единичных команд).
• Переехали с redis на handlersocket.
• Rate-limiting запросов к демонам.
• Синхронизация записей.
• Асинхронность.
• Записи при достижении порога изменения параметров.
• Профилирование кода, анализ потребления CPU, времени ответа.
• Статистика, статистика и еще раз статистика.
• Pconnect.
Доклад будет интересен:
• системным архитекторам,
• server-side разработчикам.
Как строить архитектуру для отказоустойчивой службы такси / Минкин Андрей (Na...Ontico
Такси — это популярная тема для обсуждений, после того, как появились стартапы в виде Uber, GetTaxi, GrabTaxi и тому подобные. Ведущий разработчик службы Namba Taxi расскажет про то, как строилась текущая отказоустойчивая архитектура в Namba Taxi, с какими проблемами и неудачами мы сталкивались и как решали.
Тезисы - http://www.highload.ru/2015/abstracts/1661.html
Александр Русаков - TypeScript 2 in actionMoscowJS
В докладе речь пойдет об основных нововведениях TypeScript 2.0 и 2.1 (literal types, discriminated unions, mapped types...) и их использовании в реальных проектах.
Виктор Розаев - Как не сломать обратную совместимость в Public APIMoscowJS
Представьте что у вас есть публичный JavaScript API. Им пользуются сторонние девелоперы от Индии до Канады, чтобы писать свои облачные сервисы. Эти сервисы продают телекомуникационные компании с многомиллиардными оборотами превышающими стоимость вашей компании. Любая остановка сервиса - миллионные убытки. Представили? А нам и представлять не надо - это наша работа. Добро пожаловать в нашу реальность. В рамках доклада мы расскажем о том, как сохранить обратную совместимость при активном развитии и неизвестных пользователях, ну и причем тут вообще интерны.
More Related Content
Similar to "AMP - технология на три буквы", Макс Фролов, MoscowJS 29
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
Изоморфные React-приложения производительность и масштабирование / Денис Изма...Ontico
Взглянем ещё раз на концепцию изоморфных приложений. На первый взгляд, всё красиво — полный порядок, высокая организованность, быстрая выдача результата. Но так ли всё оптимистично? Что случится после того, как мы развернём приложение на сервере? Почему при росте нагрузки наше React-приложение начинает тормозить? Как масштабироваться? Купить ещё несколько серверов? Потом ещё немного? Есть способ лучше.
В рамках доклада рассмотрим следующие темы:
1. Что представляют собой изоморфные приложения?
2. Зачем они на самом деле нужны?
3. Рассмотрим варианты архитектуры.
4. Найдём слабые места (bottleneck).
5. Посмотрим на способы решения и оценим их эффективность.
6. Обсудим возможности масштабирования изоморфных приложений.
7. И, самое главное, ответим на вопрос — стоит ли игра свеч?
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable.
I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them.
I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Как строить архитектуру для отказоустойчивой службы такси / How to Build a ...Mad Devs
Доклад с конференции Highload++ 2015 об отказоустойчивой архитектуре
A report from the Highload++ 2015 conference in Moscow, describing the fallover architectures
Автор: Андрей Минкин / Andrew Minkin
http://www.highload.ru/2015/abstracts/1661.html
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаYandex
Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.
Дизайн REST API для высокопроизводительных систем / Александр Лебедев (Новые ...Ontico
Доклад осветит вопросы устройства REST API для веб-приложений и мобильных клиентов, от которых требуется высокая производительность.
Проектирование высокопроизводительных REST API.
- Кто должен участвовать в проектировании.
- Как узнать, что оптимизировать.
- Как измерять производительность REST API.
Паттерны и антипаттерны.
- Почему pagination - это плохо, и на что лучше заменить.
- Проблема N+1 и как с ней бороться.
- Бесполезные данные - как обнаружить и уничтожить.
- Как не ломать кэширование на клиенте.
- Эффективная работа с интерфейсами "мастер-детали".
Кэширование.
- Три слоя кэширования.
- Самый быстрый запрос - тот, которого не было. Как увеличить их количество.
- Экономия трафика.
- Исключение ненужных вычислений.
- Подходы к инвалидации кэша.
Приемы оптимизации работы с API на клиенте.
- Параллельные запросы.
- Эффективный разбор данных.
- In-memory DB на клиенте.
- Стратегии кэширования на клиенте.
Переход с Objective-C на Swift — все ли так просто? / Олег Алексеенко (SuperJob)Ontico
РИТ++ 2017, App's Conf
Зал Найроби, 6 июня, 10:00
Тезисы:
http://appsconf.ru/2017/abstracts/2818.html
Ни для кого не секрет, что Swift — это mainstream: его активно продвигает Apple, на нем пишутся все новые фреймворки, многие разработчики начинают именно с него. Но так ли просто мигрировать c Objective-С, если твоему приложению 5 лет и оно имеет большую аудиторию? В докладе мы расскажем о том, как сделать это без ущерба для бизнеса.
Вы узнаете об этапах такого перехода:
1. Какую бизнес-проблему решали? - Ускоряем разработку, уменьшаем количество багов, проще и быстрее находим новых сотрудников, ограждаем от будущих рисков (старых не поддерживаемых фреймворков, устаревших АПИ).
...
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 6 июня, 14:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2471.html
Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного se...Sergey Xek
Полмиллиона юзеров в онлайне без падений: оптимизация высоконагруженного server-side API десктопного приложения. Сергей Аверин, Badoo.
Доклад рассказывает о реально примененных способах оптимизации производительности API компании Badoo для собственных десктоп-приложений: как специфика «много постоянных соединений/однотипные запросы/большая нагрузка» повлияла на стратегию оптимизации производительности.
Что было сделано:
• Планирование архитектуры изначально (fault-tolerance, адаптивные апдейты и тайм-ауты, отказ от попыток восстановления после ошибок для единичных команд).
• Переехали с redis на handlersocket.
• Rate-limiting запросов к демонам.
• Синхронизация записей.
• Асинхронность.
• Записи при достижении порога изменения параметров.
• Профилирование кода, анализ потребления CPU, времени ответа.
• Статистика, статистика и еще раз статистика.
• Pconnect.
Доклад будет интересен:
• системным архитекторам,
• server-side разработчикам.
Как строить архитектуру для отказоустойчивой службы такси / Минкин Андрей (Na...Ontico
Такси — это популярная тема для обсуждений, после того, как появились стартапы в виде Uber, GetTaxi, GrabTaxi и тому подобные. Ведущий разработчик службы Namba Taxi расскажет про то, как строилась текущая отказоустойчивая архитектура в Namba Taxi, с какими проблемами и неудачами мы сталкивались и как решали.
Тезисы - http://www.highload.ru/2015/abstracts/1661.html
Александр Русаков - TypeScript 2 in actionMoscowJS
В докладе речь пойдет об основных нововведениях TypeScript 2.0 и 2.1 (literal types, discriminated unions, mapped types...) и их использовании в реальных проектах.
Виктор Розаев - Как не сломать обратную совместимость в Public APIMoscowJS
Представьте что у вас есть публичный JavaScript API. Им пользуются сторонние девелоперы от Индии до Канады, чтобы писать свои облачные сервисы. Эти сервисы продают телекомуникационные компании с многомиллиардными оборотами превышающими стоимость вашей компании. Любая остановка сервиса - миллионные убытки. Представили? А нам и представлять не надо - это наша работа. Добро пожаловать в нашу реальность. В рамках доклада мы расскажем о том, как сохранить обратную совместимость при активном развитии и неизвестных пользователях, ну и причем тут вообще интерны.
Контекст в React, Николай Надоричев, MoscowJS 31MoscowJS
Контекст стал документированной фичей сравнительно недавно, но его использование либо осуждается, либо не понимается. Такие библиотеки как react-redux или react-router успешно используют для своих нужд. В докладе рассмотрим основные аспекты работы с контекстом: зачем он нужен и какие проблемы решает.
Верстка Canvas, Алексей Охрименко, MoscowJS 31MoscowJS
Зачем? Как и когда нужно создавать пользовательский интерфейс с помощью Canvas и как обогнать React Native - обо всем этом вы узнаете из этого доклада.
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31MoscowJS
This document discusses progressive web apps and how they can work offline through the use of service workers and caching. It provides examples of how to register a service worker to cache assets and provide offline fallback pages. It also covers how to implement features like sync, app manifests, and install prompts to make the web app experience more app-like.
Команда разработчиков Angular2 провела огромную работу над Change Detector, он стал быстрым и "умным". В докладе рассмотрим две основные фазы Angular2 приложения, куда все таки делся $apply(), и почему Angular2 обещает быть фантастически быстрым (в сравнении с AngularJs).
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33MoscowJS
В 2016 году интернет-изданиям недостаточно просто писать интересные материалы, нужно быстро и качественно их оформлять и показывать на разных устройствах. Я расскажу о нашем опыте создания JS-редактора, с помощью которого ежедневно публикуются десятки постов для 3 миллионов читателей.
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
При увеличении количества проектов в компании, разработчики сталкиваются с задачей унификации кодовой базы. Решением подобной задачи может быть библиотека, фреймворк или общий набор компонент. Такой инструмент позволит разработчикам сконцентрироваться только на новых задачах, избежать дублирования кода и повысить производительность.
В HeadHunter с такой задачей столкнулись в 2014 году. Решением данной проблемы стало создание унифицированной библиотеки компонент, которая успешно используется на всех проектах HH. В своем докладе я хотел бы поделиться опытом развития библиотеки, проблемами, которые возникали при разработке, и их последовательным решением.
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29MoscowJS
Разработчики давно ищут способы оптимизации размера изображения без потери качества. Если вы готовы пуститься во все тяжкие, я расскажу как это сделать. Профит гарантирован!
33. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
33
34. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
34
35. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
35
36. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
36
37. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
37
HTML
OK!
38. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
38
HTML
все остальные HTML5 - теги
OK!
39. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
39
HTML
все остальные HTML5 - теги
OK!
AMP components
40. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
40
HTML
все остальные HTML5 - теги
OK!
AMP components
SVG
41. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video
audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
41
HTML
все остальные HTML5 - теги
OK!
AMP components
SVG
Скрипты внутри amp-iframe
43. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
43
44. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
44
45. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
45
46. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
46
47. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
47
48. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
48
49. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
49
CSS
OK!
50. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
50
CSS
OK!
@font-face
@keyframes
@media
@supports
51. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
51
CSS
OK!
@font-face
@keyframes
@media
@supports
transition
opacity
transform
56. <section itemscope itemtype="http://schema.org/Person">
Hello, my name is
<span itemprop="name">John Doe</span>,
I am a
<span itemprop="jobTitle">Graduate research assistant
</span>
at the
<span itemprop="affiliation">University of Dreams</span>
</section>
Microdata
56
62. lenta amp vs m.lenta
62
• Время загрузки страницы меньше в 2 - 5 раз
63. lenta amp vs m.lenta
63
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
64. lenta amp vs m.lenta
64
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
65. lenta amp vs m.lenta
65
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
66. lenta amp vs m.lenta
66
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
71. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
71
72. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
72
73. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
73
74. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
74
75. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
• В перспективе прямая поддержка
75