code amp javascript html angularjs reactjs amp-html

javascript - code - ¿Qué es AMP HTML y cómo encaja con framework/tool X?



amp html code (3)

Bien, probablemente ya hayamos escuchado sobre AMP HTML de Google.

Lo que tengo curiosidad es cómo va a encajar esto con nuestros flujos de trabajo existentes. Si está escribiendo una aplicación React o Angular, ¿cómo encaja AMP HTML en el proceso de desarrollo? Cada uno de estos marcos ya tiene una forma de definir componentes y parece que AMP solo se está agregando a la pila.

La mayoría de nosotros ya estamos usando otras herramientas como browserify o webpack. No veo fácilmente cómo AMP encaja con el resto. Algunas de estas herramientas ya nos permiten servir nuestro sitio de manera optimizada. ¿Cuánto va a cambiar AMP HTML todo esto?


AMP está diseñado para páginas estáticas. Los desarrolladores tienen que hacer dos páginas diferentes: versión normal y versión AMP. La página AMP tendrá un enlace a la página normal y viceversa. Cada vez que una solicitud llega a la página normal desde el móvil, cargará la página AMP y viceversa. Google tiene su propio caché AMP para cargarlo más rápido. Al desarrollar páginas AMP, solo tenemos que considerar las reglas de AMP.


Básicamente, AMP HTML está volviendo a lo básico y ofrece el HTML más rápido posible. Me recuerda a WAP y al Nokia 7110 .

Es un conjunto estricto de reglas para crear una página web, que está abierto para crecer y abierto a extensiones de otras compañías y desarrolladores.

En este momento, se desconoce cómo funciona esto con SPA (aplicaciones de una sola página) y otros frameworks pesados ​​front-end de JavaScript, eso es lo que esos desarrolladores deben descubrir.

En esencia, sus páginas HTML estáticas con elementos personalizados diseñados para cargar lo más rápido posible en conexiones lentas y pequeñas vistas. Cualquiera puede optimizar su sitio para dispositivos móviles y reducirlo a unos pocos KB si realmente lo desea, AMP-HTML o no.

El principal beneficio es

  1. Google lo admitirá, piense en Android, Chrome y Google Search, Google CDN.
  2. Las páginas se cargarán muy rápido y pueden verse bastante quietas.

La adopción inicial, como Wordpress y otros editores, puede ser un conjunto separado de páginas AMP para dispositivos móviles. Esto viene de Google, que quería que hicieras que todas tus páginas web normales sean amigables para dispositivos móviles o que se enfrenten a éxitos SEO.

Si lo piensa a largo plazo, es una especificación para la web móvil que se centra en el rendimiento. Si se adopta, en 5 años, cualquier página web puede cargarse en segundos en una conexión móvil, independientemente de la calidad de esa conexión. Si no podemos esperar a que las compañías de tecnología y telecomunicaciones aumenten la velocidad, al menos podemos disminuir el tamaño de nuestras páginas.


Las cosas están más claras ahora a través de esta URL

Entre las optimizaciones más importantes está el hecho de que hace que todo lo que proviene de recursos externos sea asíncrono, por lo que nada en la página puede bloquear el procesamiento.

Así que no más renderizar bloqueando CSS.

Otras técnicas de rendimiento incluyen el sandboxing de todos los iframes, el cálculo previo del diseño de cada elemento en la página antes de cargar los recursos y la desactivación de los selectores CSS lentos.

Espero que este nuevo enlace ayude.