AMP HTML считает, что производительность веб-страницы существенно зависит от числа JavaScript-кода разнообразных библиотек, реализующих различную динамическую функциональность. Вместо явного или неявного использования JavaScript для таких элементов как, к примеру, различные голосовалки или видео, разработчикам предлагается использовать Web Components, специально разработанные для AMP HTML. Список таких компонентов можно посмотреть здесь. JS-код этих компонентов не должен сказываться на производительности веб-страницы.
Сейчас библиотека AMP HTML содержит всего 4 компонента и специальный валидатор, при помощи которого можно убедиться создана ли страница по стандарту AMP. Если к URL добавить "#development=1", то библиотека выполнит ряд assert-методов, чтобы выяснить подходит ли разметка страницы принципам AMP, и выведет результаты в консоль браузера. Простейшая веб-страница должна выглядеть примерно следующим образом:
<!doctype html>
<html ?>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>
<body>Hello World!</body>
</html>
Для примера готовых AMP-документов Google предлагает попробовать свой поиск — зайти на него с мобильного устройства можно по этому URL: g.co/ampdemo. Оценить как это выглядит визуально можно при помощи gif-анимации:
Есть вариант документа и попроще: в нём как раз идёт речь об идеологии AMP.
Комментарии (18)
dmitriy_novikov
07.10.2015 22:53-3Мало нам было всяческих js-фреймворков и библиотек, теперь еще и гугл свою инициативу выкатил.
А ведь они стопудово станут ранжировать в поисковой выдаче сайты с этим AMP выше чем остальные, поэтому придется и это изучать.
zorge_van_daar
08.10.2015 03:16+4Не сочтите за грубость, но если вы ожидали, что настанет тот момент, когда вы сможете сказать — теперь я знаю все, что нужно мне для работы до конца дней — то вы зря выбрали профессию связанную с it, нужно было идти на рынок торговать, там все по-старому.
А по теме статьи — гугл просто хочет нативные компоненты, которых нет в html5. На его месте, я бы уже зашил в хром код для рендера гугл.ком на асме. Они бы так и сделали, но ни одним хромом… А разработаешь стандарт — можно ожидать, что всякие мозиллы реализуют нативно компоненты с твоей главной.
Nikelandjelo
08.10.2015 11:12+4Нативные компоненты — это не главная цель AMP. AMP HTML — это урезанное подмножество HTML, которое нацелена на быструю загрузку страница и ограничивает использование многих вещей, например своего js. На странице может присутствовать только единственный js script — сам amp. Не получится сделать какую хочешь анимацию, эффекты, если они не идут с самой amp библиотекой. На данный момент нельзя использовать даже iframe, т.е. не получится обойти ограничение и писать что хочешь в iframe. В целом AMP предназначен для статических страниц с текстом+картинками. Например новостные статьи или блог посты.
Плюсом этого является то, что AMP страницы можно показывать прямо с поисковой страницы гугла не переходя на сайт (как в примере гифке), формат гарантирует безопасность и статичность контента и гугл может выступать в качестве прокси, что должно ускорить отдачу/рендеринг контента и снять нагрузку с самого сайта. Подобную штуку можно реализовать и в твиттере: если в твите ссылка на новостную статью, то он тоже может показать ее AMP вариант без надобности пользователю загружать полную версию новостного сайта.
Я б сказал, что это такой очень продвинутый RSS.dmitriy_novikov
08.10.2015 11:46Поправочка: для iframe у них есть свой специальный компонент.
github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.mdNikelandjelo
08.10.2015 18:53А, точно. Просто в спецификации про iframe написано «Banned. May be replaced with amp-iframe in the future.» и я решил, что amp-iframe еще не сделали.
roboq6
08.10.2015 11:13+3То есть, Гугл создал язык разметки, позволяющий заменить элементы созданные с помощью JavaScript на идентичные элементы созданные через разметку, я правильно понимаю? Если да, то это хорошая новость. Проблема «Западни Javascript» облегчится, уже прогресс.
www.gnu.org/philosophy/javascript-trap.ru.html
unnamed
08.10.2015 15:22+1Не просто позволил заменить, а принудительно заменил.
Гугл форкнул html без JavaScript. Интересная статья www.niemanlab.org/2015/10/get-ampd-heres-what-publishers-need-to-know-about-googles-new-plan-to-speed-up-your-website после которой, лично мне, стало понятно что «не взлетит» :)roboq6
08.10.2015 15:48А я думаю, что очень даже взлетит. Быстрая загрузка страниц уменьшит у пользователей желание устанавливать AdBlock и подобные программы. Угроза Эдблокалипсиса(https://slon.ru/posts/57262) будет отложена, ведь медленная загрузка страниц и «тормоза» является одним из факторов установки блокировщиков рекламы.
Google явно такое будет на руку, поэтому стоит ожидать того, что страницы использующие данную технологию будут ранжировать выше. И да, подозреваю что создание сайтов в AMP станет модным среди фанатов Open Source и Free Software.
Foror
08.10.2015 19:36+2Смотрю сырцы AMP-IMG github.com/ampproject/amphtml/blob/master/builtins%2Famp-img.js и вижу создание IMG через JavaScript. В чем профит этой библиотеки?
То, что она огораживает от библиотек говнокодеров, предлагая правильные решения от кодеров Гугла? Если так, то какой смысл её использовать если руки прямые и понимаешь что делаешь?
imanushin
08.10.2015 20:15Есть мнение, что они сначала пишут реализацию на JS, а потом постепенно переведут его в сам браузер, так что пользователи либы не заметят особо разницы.
MTonly
Феерично.
goodbear
Если еще одну добавят — интернету в России не несдобровать…
asdf404
А можете объяснить, каким образом этот символ можно написать (нарисовать?) с обычной клавиатуры? Или людям придётся постоянно обращаться к таблице юникод-символов?
P.S. он выглядит по-разному на линуксовой машине и андроидовом планшете.
barkalov
Под виндой:
Пользователь должен установить или создать ключ реестра HKCU \ Control Panel \ Input Method \ EnableHexNumpad с типом REG_SZ и значением 1 и перезагрузить компьютер.
После этого можно использовать метод:
- Держите нажатой клавишу Alt. Нажмите клавишу «+» на цифровой клавиатуре.
- Не отпуская Alt введите шестнадцатеричное число, используя цифровую клавиатуру для цифр 0-9 и обычные клавиши для ввода символов a-f.
(wiki)Hex-код молнии: 26A1
И да, очередная дискриминация владельцев компактных клавиатур без цифрового блока.
asdf404
Спасибо. Не подумал про hex-коды.
На линуксах (GTK) можно ввести так: нажать Ctrl+Shift+U, затем ввести hex-код 26a1.
denis_g
Логичней было бы: