AMP, или как разогнать ваше приложение до сверхзвуковой скорости

Dashukevich Vladimir

{
Тема: AMP, или как разогнать ваше приложение до сверхзвуковой скорости,
Докладчик: Дашукевич Владимир,
Компания: XBSoftware,
Сообщество: 4frontby
}

Почему наше приложение медленное?

Только мобилки, только hardcore

Мы используем кэш)

Что можно сделать ещё?

Какую проблему мы решили?

Сколько раз вы читаете одну статью?

1 раз

Попробуйте реалный интернет

Итого

Контент важнее!

Мы просто решаем другие задачи!

Решения

Apple news

Markdown

А как же:

Компонеты

Layout

                {
                	"columnStart": 0,
                	"columnSpan": 3,
                	"margin": {
                		"top": 50,
                		"bottom": 50
                	}
                }

Паралакс

                {
                	"type": "parallax"
                	"factor": 0.8
                }

Кто читает новости через Apple News?

Facebook Instant Articles

F8

HTML

Что-то другое:

                <figure class="op-interactive">
                	<iframe class="column-width" 
                				src="http://example.com/custom-interactive" 
                				height="60">
                	</iframe>
                </figure>

Как это работает

Недостатки

Но как же Web?

Accelerated Mobile Pages (AMP)

Отложим все что не нужно на потом

Правила AMP

Hello world:

                <html amp>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html amp>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" 
                	content="width=device-width,
minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Hello world:

                <html ⚡>
                	<head>
                   		<link rel="canonical" href="hello-world.html">
                   		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
                   		<style amp-boilerplate> /* стили страницы */ </style> 
                   		<script async src="https://cdn.ampproject.org/v0.js"></script>
                 	</head>
                 	<body>Hello World!</body>
                </html>

Нужно добавить контента

Запрещены теги:

Нужно добавить стилей

Запрещены:

<style amp-custom>

Нужно добавить картинки и видео

<amp-img>

<amp-video>

Возможности:

Разметка:

  1. nodisplay
  2. fixed
  3. responsive
  4. fixed-height
  5. fill
  6. container

Нужно добавить аналитику и рекламу

<amp-ad>

<amp-analytics>

<amp-pixel>

Дополнительные компоненты:

  1. amp-anim
  2. amp-audio
  3. amp-twitter
  4. amp-youtube
  5. amp-instagram

Нужно добавить крутости

<amp-iframe>

А как управлять контентом?

sandbox:

  1. allow-scripts
  2. allow-same-origin
  3. allow-popups
  4. allow-popups-to-escape-sandbox

Как валидировать?

<amp-img>

Как это выглядит?

Как это распространять?

Серверы

  1. Свой собственный
  2. AMP Cache

А работает ли это?

Каждый инструмент решает свою задачу

Ссылки:

  1. Lenta.ru
  2. Введение
  3. AMP
  4. smashingmagazine

Вопросы?

Facebook: dashukevich.vova
Twitter: life__777