AMP como marco de trabajo web

Actualización (2/5/2019): Se agregó un párrafo a fin de aclarar la compatibilidad con otros marcos de trabajo (para no sugerir un juego de suma cero) y se quitó texto sobre cómo se malinterpretó AMP, dado que no era necesario para transmitir la idea que queríamos dar.
¿Has leído últimamente alguna entrada de blog en la que se comparen los marcos de trabajo más populares? ¿Has participado en alguna encuesta sobre herramientas de frontend? Apostaría lo que sea a que AMP no estaba en la lista. Y eso me parece extraño, considerando los millones y millones de dominios que ejecutan este formato. ¿Cómo es posible?

Aquí encontrarás el contenido de esta entrada de blog en una superproducción de video. Deberías ver esto. Confía en mí. Valdrá la pena.

Cómo llegamos hasta aquí: marcos de trabajo de HTML contra JS, percepción como formato de distribución y AMP sincronizado

La primera razón por la que no se percibe a AMP como un marco de trabajo es porque AMP no es un marco de trabajo de JavaScript . Está escrito en JS, pero el lenguaje de autor que tú ves es HTML, por lo que técnicamente es un marco de trabajo HTML. La idea de los marcos de trabajo HTML no es nueva, pero siguen siendo bastante raros, por lo que a menudo no se consideran una alternativa seria.
La segunda razón es que muchos comparan a AMP con RSS, y los medios de comunicación lo posicionaron como competidor de otros formatos de contenido multimedia de jardín vallado desarrollados por otras grandes empresas. Esa narrativa no fue de ayuda y, por si sirve de algo, a nosotros, el equipo de AMP, nunca nos gustó esa comparación (aunque también contribuimos confundiendo a los lectores con palabras complicadas como entorno de ejecución y formato HTML de AMP). Las páginas web ya son un gran formato de distribución, y AMP lo mejora acelerando la entrega mediante cachés y agrupando el contenido principal, por ejemplo, mediante la integración de CSS.
La tercera razón es que la mayoría de los sitios AMP actuales utilizan AMP sincronizado, una técnica que habilitamos para conectar una página web existente que no es de AMP con un equivalente que sí lo es. AMP sincronizado puede ser útil porque la inversión inicial es mucho menor: si termino de empacar y luego me doy cuenta de que quiero llevar más cosas, puedo hacer otra maleta y viajar con dos, pero eso será una molestia. Lo mismo ocurre con AMP sincronizado. Es muy difícil mantener ambas versiones con el paso del tiempo, y AMP sincronizado no fue concebido para tener un estado final. (Por eso, ahora lo llamamos Modo transicional en AMP para WordPress).

De Accelerated Mobile Pages a AMP

Incluso nuestro nombre ha causado confusión. Desde hace tiempo, he tenido algunos problemas para explicar correctamente qué es AMP, especialmente a aquellos que están familiarizados con su nombre completo: Accelerated Mobile Pages. La realidad es que, desde hace mucho tiempo, AMP es más que lo que indica su nombre:

  • AMP no brinda solamente aceleración, ya que incluye beneficios de UX integrados, como inhabilitar anuncios intersticiales, forzar un subproceso principal independiente para interacciones fluidas, etc.
  • AMP no es solamente para dispositivos móviles, ya que funciona en varios tipos de dispositivos, como computadoras de escritorio y tablets, e incluye funciones prácticas de diseño responsivo.
  • Y AMP ya no es para páginas solamente: ahora puedes usarlo en anuncios, correos electrónicos y artículos.

Entonces, ¿cuál es la solución? Es fácil. Como anunció Malte, líder tecnológico de AMP, en AMP Conf, AMP ahora solo es AMP, y ya no significa Accelerated Mobile Pages (si quieres usar una versión expandida, ¿qué te parece Awesome Magical Power?).

De la página al sitio: cómo implementar AMP y utilizarlo como servicio

Los desarrolladores de AMP queremos que se convierta en una opción natural para el desarrollo web moderno de sitios de contenido y que tú puedas elegir AMP como marco de trabajo porque realmente te hace más productivo. Esa es nuestra misión principal de este año, y hemos puesto en marcha un nuevo sitio en amp.dev (junto con nuevos contenidos y cursos para principiantes) a fin de ayudarte a hacerlo. Entonces, ¿qué obtienes cuando adoptas AMP como marco de desarrollo (además de lo obvio, como velocidad, UX y componentes fáciles de usar)?
Para empezar, te enfocarás más en el diseño, el estilo y el contenido, y menos en el código estándar. El desarrollo web se ha vuelto demasiado difícil, y es más importante que nunca elegir el nivel adecuado de abstracción, con la cantidad justa de flexibilidad para tu caso de uso. Nos encargaremos de mantener JS para todos los componentes y enviaremos actualizaciones compatibles cada dos semanas. A esta forma de reducir la carga de mantenimiento la llamamos «AMP como servicio» (mira la gran charla de Naina sobre este tema).
Ahora solo mantendrás una versión de cada página haciendo que tu contenido de AMP sea canónico, lo que también se conoce como «AMP primero«, y eso significa que tus páginas se beneficiarán del rendimiento de AMP y de las optimizaciones de UX en computadoras de escritorio, dispositivos móviles y mucho más.

Bento: cómo mezclar y hacer coincidir componentes de AMP en páginas que no son de AMP y brindar interoperabilidad con otros marcos de trabajo

Mira el anuncio de Bento en What’s next in AMP de AMP Conf ’19.

«AMP primero» no significa que estrictamente todas las páginas de tu sitio deben estar en formato AMP. En ocasiones, es posible que quieras la máxima flexibilidad y que la distribución no sea una gran preocupación, por ejemplo, en un área exclusiva para miembros o un carrito de compras complejo. En ese caso, podrías utilizar JavaScript u otro marco de trabajo para potenciar esa parte de la experiencia.
Para poder reutilizar las plantillas existentes que compilaste con componentes de AMP, estamos trabajando en lo que llamamos Bento AMP, la capacidad de utilizar componentes de AMP de forma «no gestionada», sin cargar el archivo JS principal de AMP (v0.js) y coexistiendo con otros componentes y marcos de trabajo web en la misma página.
Esto, junto con marcos de trabajo como Next.js que agregan compatibilidad para AMP y amp-script en el lado del servidor, la capacidad de ejecutar JavaScript personalizado en un trabajador web, significa que AMP y otros marcos de trabajo pueden coexistir pacíficamente y pueden fortalecerse mutuamente, lo cual nos entusiasma mucho.

Desarrollo acelerado con compatibilidad para JS y ejecución de componentes de AMP fuera de ese formato

Por supuesto, es posible que no tenga sentido para ti dejar todo y volver a implementar tu sitio en formato AMP justo ahora, ¡y eso está bien! Solo quiero que sepas que hemos crecido bastante y que, cuando te propongas rediseñar o crear algo nuevo, AMP estará aquí para ayudarte a tener éxito.
Con las capacidades de vinculación de estado dinámico de amp-bind, la obtención de datos dinámicos de amp-list y la capacidad de utilizar JavaScript personalizado mediante amp-script, las posibilidades para los sitios de contenido ahora son infinitas. Por último, con el nuevo régimen de proyectos abiertos, el futuro de AMP está disponible para que le dé forma todo aquel que quiera que la Web siga floreciendo.
Publicado por Paul Bakaus, desarrollador de AMP
Source: Google Dev