Что такое AMP HTML и как он сочетается с фреймворком / инструментом X?

Хорошо, теперь мы все, наверное, слышали о AMP HTML от Google.

Мне любопытно, как это впишется в наши существующие рабочие процессы. Если вы пишете приложение на React или Angular, как AMP HTML вписывается в процесс разработки? У каждой из этих платформ уже есть способ определения компонентов, и похоже, что AMP просто добавляет в стек.

Большинство из нас уже используют другие инструменты, такие как browserify или webpack. Я не сразу понимаю, насколько AMP сочетается с остальными. Некоторые из этих инструментов уже позволяют нам оптимизировать обслуживание нашего сайта. Насколько AMP HTML все это изменит?


reactjs javascript html angularjs amp-html
person Mulan    schedule 07.10.2015    source источник
comment
Ну: во-первых, это от Google, а не от Twitter. Во-вторых, он предназначен исключительно для мобильных страниц. Он ограничивает Javascript, а не поощряет его. Думаю, у него большой потенциал. Да, библиотеки, такие как Angular, делают сайт быстрее, но это не побуждает вас использовать Javascript. Вот вам и разница.   -  person Siyah    schedule 07.10.2015
comment
Извините, сегодня я увидел объявление из Твиттера, и мои строки пересеклись.   -  person Mulan    schedule 07.10.2015
comment
github.com/ampproject/amphtml   -  person    schedule 07.10.2015

Ответы (3)


arrow_upward
25
arrow_downward

AMP HTML в основном возвращается к основам и обслуживает максимально быстрый HTML. Я вспоминаю WAP и Nokia 7110.

Это строгий набор правил для создания веб-страницы, которая открыта для роста и открыта для расширений других компаний и разработчиков.

Как это работает с SPA (одностраничными приложениями) и другими тяжелыми интерфейсными фреймворками javascript, на данный момент неизвестно, это должны выяснить разработчики.

По сути, это статические HTML-страницы с настраиваемыми элементами, предназначенные для максимально быстрой загрузки при медленных соединениях и небольших представлениях. Любой желающий может оптимизировать свой сайт для мобильных устройств и сократить его до нескольких килобайт, если он действительно этого хочет, будь то AMP-HTML или нет.

Основное преимущество -

  1. Google будет поддерживать это, подумайте о Android, Chrome и Google Search, Google CDN.
  2. Страницы загружаются очень быстро и могут выглядеть довольно спокойно.

Первоначальное внедрение, например, Wordpress и другими издателями, может быть отдельным набором AMP-страниц, адаптированных для мобильных устройств. Это исходит от Google, который хотел, чтобы вы сделали все свои обычные веб-страницы удобными для мобильных устройств или столкнулись с SEO-хитами.

Если вы думаете об этом в долгосрочной перспективе, это спецификация для мобильного Интернета, которая фокусируется на производительности. В случае принятия через 5 лет любая веб-страница может загружаться через мобильное соединение за секунды независимо от качества этого соединения. Если мы не можем дождаться, когда технологические и телекоммуникационные компании увеличат скорость, мы можем, по крайней мере, уменьшить размер наших страниц.

person kzap    schedule 08.10.2015
comment
Он объясняет AMP, но не совсем то, как он будет работать в других рабочих процессах. - person serraosays; 18.12.2015

arrow_upward
16
arrow_downward

AMP разработан для статических страниц. Разработчикам нужно сделать две разные страницы: обычную версию и версию AMP. На странице AMP будет ссылка на обычную страницу и наоборот. Когда с мобильного телефона поступает запрос на обычную страницу, он загружает страницу AMP и наоборот. У Google есть собственный кеш AMP, чтобы загружать его быстрее. При разработке страниц AMP мы просто должны учитывать правила AMP.

person suraj naikwade    schedule 01.03.2016

arrow_upward
1
arrow_downward

Теперь все стало более понятным благодаря этому URL.

Одна из самых больших оптимизаций заключается в том, что он делает все, что поступает из внешних ресурсов, асинхронным, поэтому ничто на странице не может блокировать отрисовку чего-либо.

Так что CSS больше не блокирует рендеринг.

Другие методы повышения производительности включают в себя изолирование всех окон iframe, предварительный расчет макета каждого элемента на странице перед загрузкой ресурсов и отключение медленных селекторов CSS.

Надеюсь, эта новая ссылка поможет.

person prosti    schedule 09.02.2017