Desmitificando JAMstack: una entrevista con Phil Hawskworth

Algunos de ustedes pueden haber oído hablar de JAMstack, y tal vez incluso sobre cómo cambiar de WordPress a Hugo, pero ¿JAMstack es una opción viable para cualquier tipo de proyecto?

Hablé con Phil Hawksworth, un ingeniero front-end que (después de 9 años de trabajar en agencias volvió a trabajar en un producto independiente) ahora se está enfocando en desarrollar estrategias para las tecnologías JAMstack para hacer que la construcción para la web sea más simple, más rápida y más seguro. Phil también será coanfitrión de JAM_stack ldn, una conferencia dedicada a los generadores de sitios estáticos, sin servidor y JAMstack en Londres, del 9 al 10 de julio.

Vitaly: Entonces, hola y bienvenido a una de nuestras conversaciones con nuestros oradores en Smashing Conf y, en general, gente agradable. Es posible que recuerde aquellos tiempos en que FTP era algo importante y tal vez todavía esté implementando por qué FTP es un espacio perfectamente seguro para que no tenga que preocuparse por eso. Pero los cambios son altos, ya que ya no usa FTP y, en cambio, pasa a flujos de trabajo basados ​​​​en Git y probablemente a una implementación continua. Todos estos elegantes silbatos y campanas. Y hoy estoy muy feliz de dar la bienvenida a Phil Hawksworth, quien actualmente trabaja en Netlify, Relaciones con desarrolladores [inaudible 00:10:00]. hola phil ¿Cómo estás hoy?

Phil: Estoy genial, ¿cómo estás Vitaly? Es bueno verte.

Vitaly: Oh, estoy muy bien. Siempre es un placer verte. Eres como un rayo de sol que transmite Netlify y Jump Stack y todo.

Phil: Lo intento. Ni siquiera estoy marcado, qué oportunidad perdida.

Vitaly: Está bien, está bien. Pero tienes que decirme, así que gema o jen o jeet, como, ¿jem? ¿Es Jem?

Phil: Mermelada. es mermelada Se trata de la mermelada.

Vitaly: Todo es mermelada. Así que el JAMstack. Para desarrolladores o diseñadores, en realidad nunca antes habían escuchado el término. Si quisiera tal vez resumir qué es y por qué es bueno y cuáles son sus beneficios en primer lugar. ¿Por qué querrías pasar de tu pila tradicional y buena a JAMstack? Quizás podrías resumirlo brevemente.

Phil: Déjame ver si puedo intentarlo porque es tentador decir JAMstack, JAM significa Javascript, API y maqueta. Pero eso en sí mismo no explica mucho, solo saber lo que significa. Entonces, en realidad, JAMstack se trata de una forma de implementar y servir sitios web que no dependen de un servidor de origen, no dependen de las solicitudes que llegan a un servidor activo todo el tiempo.

Phil: Es posible que esté más familiarizado con pilas como la pila LAMP que era Linux, Apache, MySQL y PHP, ese era el tipo de pila que estaba sirviendo a su sitio allí. Con JAMstack, se vuelve un poco diferente porque subimos un nivel, nos alejamos del servidor y nos acercamos al navegador, por lo que está pensando mucho en ingresar a un navegador lo más rápido posible y luego usar tecnologías en el navegador para mejorarlo y aumentarlo más adelante. Entonces, JAMstack tiene que ver con la representación previa de sitios, ponerlos en el navegador y luego, tal vez, mejorarlos, aumentarlos, la experiencia con Javascript ejecutándose en su navegador, tal vez hacer solicitudes a las API y ese tipo de cosas.

Phil: Así que ese es el modelo, tratar de evitar tener un servidor que necesitas mantener porque sé que mantener un servidor es difícil. No sé ustedes, pero tengo muchos sitios que desaparecieron cuando les di la espalda durante unos años. Necesitaba actualizar PHP, lo que significaba que necesitaba actualizar la versión de Linux que he hecho una vez cada luna azul. Por lo tanto, mantener los servidores es difícil, por lo que la idea de JAMstack es intentar que sea lo más simple posible servir sitios como activos estáticos y luego aprovechar al máximo todas las API y las incapacidades en el navegador para aumentar y hacer más cosas con ellos allí.

Vitaly: Correcto, tiene sentido. Bueno, de hecho, nos mudamos a JAMstack hace aproximadamente 2 años.

Phil: ¿Dos años?

Vitaly: Sí, fue todo un viaje para nosotros. Y, por supuesto, aprendimos algunas lecciones en el camino. Pero me pregunto, ¿diría que esencialmente todos los proyectos podrían beneficiarse de alguna manera al mover o mover algunas partes de él a JAMstack o, dónde ve sus limitaciones? ¿Es algo que potencialmente todos los desarrolladores podrían usar en un proyecto o es algo que está dedicado a un grupo particular de sitios web o un grupo de proyectos?

Phil: Sí, quiero decir, es tentador decir, oh sí, puedes usarlo para todo, pero creo que debes tener cuidado al decir eso sobre cualquier tecnología. Ya sabes, realmente necesitas elegir los casos de uso y asegurarte de que esté bien adaptado. Diría el primer instinto cuando piensas en un sitio JAMstack y tal vez piensas en algo que se sirve como activos estáticos, tal vez directamente desde un CDN. Podría pensar, bueno, eso solo es bueno para los sitios que no cambian muy a menudo, son comillas, estáticos, no cambian. Pero, de hecho, ese no es realmente el caso porque ahora existen muchas herramientas que pueden reducir la fricción en la implementación de cosas.

Phil: Puede implementar muchas, muchas veces al día, o muchas veces por hora si lo desea y, de hecho, hacer que las cosas se sientan mucho más dinámicas de lo que podrían haber sido antes. Entonces, algunos de esos casos de uso en los que crees que no serían apropiados; esos también entran en el redil. Sin embargo, el momento en que se vuelve desafiante es cuando creamos sitios que tienen muchas páginas, muchos cientos de miles o millones de páginas porque el modelo JAMstack realmente tiene mucho sentido cuando puede pregenerar su sitio. por lo que podría estar utilizando un generador de sitios estáticos. Esos tienen muy en boga en este momento; esos son realmente muy populares.

Phil: Pero, por supuesto, tienen que hacer un trabajo cada vez que implementan una actualización, por lo que si tiene un sitio, tal vez como un sitio de periódico, que tiene muchos millones de páginas, el trabajo que se requiere para volver a generar eso puede ser bastante, ya sabes, eso puede llevar mucho tiempo, así que ahí es cuando comienzas a encontrarte con algunas de las limitaciones de dónde se puede usar JAMstack, más o menos, simplemente. Puedes comenzar a volverte un poco astuto y comenzar a solucionar eso si, ya sabes, eres muy, muy astuto, pero definitivamente presenta algunos desafíos.

Phil: Una de las cosas que estoy empezando a ver de una variedad de diferentes generadores de sitios estáticos como Gatsby, por ejemplo, o React Static, y también Hugo. Los equipos detrás de esos generadores de sitios estáticos están comenzando a explorar formas en las que puede hacer una generación progresiva de las páginas, en otras palabras, no vuelve a implementar todo el sitio ni regenera todo el sitio cada vez que algo cambia, sino que intenta encontrar formas. para hacer construcciones incrementales. Es una especie de problema difícil de superar, pero se está trabajando en eso en este momento, por lo que también ayudará a tratar de romper esa barrera. Pero, ciertamente en este momento, encontrar formas de usar un sitio JAMstack para un sitio web que tiene muchos millones de páginas o cientos de miles de páginas, ahí es donde puede ser un poco desafiante en este momento.

Vitaly: Oh, eso es interesante. Entonces, en realidad, la idea de ser entonces para servir a un div del estado que tienes y esencialmente que lo que sea que tengas que construir, como un nuevo portal, tiene que estar paginado, por lo que es interesante ver que esto suceda. Porque también, recientemente, creo que hace dos semanas, apareció un artículo de Jason Pamental en el que la idea era en realidad muy similar en la que realmente cargarías las fuentes, y luego cargas la primera página que necesitas y luego cargue el segundo y luego los fusionará de una manera para crear una nueva fuente, como también la carga de fuente incremental.

Phil: Interesante.

Vitaly: Sería muy interesante explorar eso.

Phil: Sí, y no se trata solo de la carga, es la generación...

Vitaly: La generación, la construcción.

Phil: Sí, exactamente.

Vitaly: Entiendo. Pero, ¿cuáles cree que son los desafíos comunes que tienen la mayoría de los desarrolladores? Bueno, quiero decir, déjame retroceder primero. Si nunca antes ha trabajado en JAMstack y está muy cómodo y contento con su pila LAMP y tal vez quisiera explorar la posibilidad y las ventajas como la seguridad y el rendimiento de JAMstack. ¿Cómo empezarías realmente? ¿Qué moverías, qué significa cambiar el flujo de trabajo?

Phil: Entonces, los cambios en el flujo de trabajo en realidad pueden ser bastante profundos porque están eliminando gran parte de la infraestructura de la que normalmente dependería y dice que en realidad podemos eliminar eso y comenzar a implementar cosas directamente en un CDN. Pero en términos de cómo alguien podría comenzar a experimentar con esto, es probable que ya esté usando algunos de los aspectos de esto. Ya sabes, incluso en formas tradicionales de construir cosas para la web.

Phil: Si piensa en cómo podría construir algo en la pila LAMP, es probable que en su PHP esté haciendo cosas como escribir una plantilla que tome datos de una fuente de datos, en este caso, la base de datos MySQL o algún tipo. de la base de datos, mostrar esas cosas a la vista y luego hacer que se sirvan. Y eso es similar a cómo funcionan los generadores de sitios estáticos. Tienen plantillas, obtienen datos de algún lugar que podría ser una especie de datos estructurados en archivos o podría estar accediendo a algún tipo de base de datos o una API de contenido. De cualquier manera, está tomando datos, combinándolos con plantillas, generando vistas y la única diferencia es que no lo está haciendo a pedido, lo está haciendo antes de tiempo. Entonces, algunos de los pasos lógicos en ese tipo de pasos cognitivos para un desarrollador podrían no ser tan grandes.

Phil: El mayor cambio está en pensar en cómo implementas las cosas. Porque realmente lo que está implementando son sus activos integrados y renderizados en su totalidad cada vez que desea realizar una implementación. Eso comienza a traer cosas como la gestión del contenido y la gestión del código en el mismo lugar para que cosas como la visión controlen todas esas cosas juntas. Entonces comienza a ser una forma ligeramente diferente de pensar sobre cómo podría desarrollar y administrar sitios y el contenido dentro de ellos. Así que hay algunos cambios allí. Pero lo bueno es que muchos generadores de sitios estáticos pueden ser bastante sencillos para comenzar a experimentar y lo bueno es que no necesita una tonelada de infraestructura para hacer esto. Entonces, lo bueno es que realmente puede comenzar a construir cosas directamente en su máquina local. Está ejecutando un generador de sitios estáticos directamente en su máquina y puede tener una muy buena idea de cuál será el resultado sin necesidad de apoyarse en muchas otras infraestructuras.

Phil: Así que ese tipo de primer paso, la rampa de entrada, puede ser bastante superficial para que empieces a decir, “bueno, probaré este conjunto de herramientas en particular. Puedo ejecutarlos localmente”. Y tendrá la confianza de que cuando implemente el resultado de eso en algún lugar, será exactamente igual donde lo implemente como lo sería localmente. Esa es una de las cosas que me encantan de renderizar cosas que son estáticas porque no dependes de mucha infraestructura y partes móviles para servirlas. Puede verlos en el servidor estático de su propia máquina y pensar: "sí, así es como funcionará cuando se conecte a una CDN".

Vitaly: Mm-hmm (afirmativo); Y también la infraestructura cuando miramos, por ejemplo, en la forma en que construimos single [inaudible 00:10:07], y hay una gran cantidad de opciones de lo que podrías hacer. Para el servidor, para el cliente y todo lo demás.

phil: si

Vitaly: Y así, creo, en nuestro caso porque estamos construyendo un esqueleto y está sirviendo directamente a través de CDI con contenido y todo y mejorado con Javascript. En realidad, fue bastante razonable y bastante, no diría fácil, pero tenía sentido pasar a ese tipo de configuración. Porque al final, es solo contenido lo que sale en la página. Es solo HTML con algunas áreas de comentarios y un cuadro de búsqueda y algunas otras cosas. Pero si se está moviendo hacia una aplicación realmente independiente, tal vez incluso una aplicación financiera, banca en línea, este tipo de cosas. ¿Todavía crees que JAMstack sería una buena opción para considerar allí si tienes algo que requiere mucha lógica? ¿Necesita un servidor o no?

Phil: Bueno, odio sacar a relucir la vieja frase, "depende". Pero depende un poco. Dicho esto, hay muchas aplicaciones que funcionan tan bien como una aplicación Javascript como si tuvieran un componente del lado del servicio. Lo digo con cierta precaución porque soy un poco de la vieja escuela cuando se trata de desarrollo web y realmente me gusta introducir las cosas en el navegador como HTML tanto como sea posible y luego tener una marca de agua muy alta desde donde mejora progresivamente desde. Así que personalmente no me gusta hacer todo en Javascript y simplemente enviar una etiqueta de cuerpo vacía y luego ejecutar todo a través de Javascript.

Phil: Dicho esto, a veces eso es perfectamente aceptable. Si está pensando en cierto tipo de aplicación que, por supuesto, dependería en gran medida de Javascript y conoce a su audiencia. Eso puede ser completamente razonable. Hay cosas que se han enviado recientemente. De hecho, estoy pensando en algo que se envió a Google IO, por ejemplo, el equipo de Chrome armó un juego que era muy Javascript y que funcionaba maravillosamente servido estáticamente. Hay muchos casos de uso en los que eso puede funcionar.

Phil: Volviendo a su ejemplo financiero, solía trabajar, mi primer trabajo en realidad era poner números en pantallas para que los comerciantes intercambiaran usando tecnologías web y esto fue antes de los sockets web, fue antes de Ajax, fue antes de cualquier cosa realmente. eso fue útil para ayudarlo a hacer eso y es un poco desafiante, pero más recientemente, haría mucho de ese tipo de cosas en Javascript y eso tiene mucho sentido. Puede comenzar a realizar solicitudes seguras a las API directamente desde el navegador. Ahora hay muchos modelos para realizar la autenticación y la autorización directamente desde su navegador. Entonces, en muchos sentidos, esto puede simplificar la pila para las instituciones financieras que desean desarrollar algunas de estas cosas porque la forma en que pueden desacoplar algunas de estas cosas puede hacerlas mucho más manejables. Así que ciertamente pensaría que el modelo JAMstack también podría funcionar perfectamente en ese escenario.

Vitaly: Bien, tal vez regrese ahora para explorar ese mundo de JAMstack y front-end. ¿Qué es lo que más te emociona estos días, Phil? Si miras JAMstack y el front-end en general, ¿es algo que realmente te mantiene despierto por la noche cuando te levantas por la mañana con la esperanza de que sí, voy a trabajar en eso algún día? Un día lo lograré. ¿Tienes [diafonía 00:13:33]?

Phil: Sí, y este es el tipo de cosas en las que tu respuesta puede ser diferente día a día porque parece que este mundo se mueve muy rápido. Y eso en sí mismo es una de las cosas que me emociona tanto. Ahora que estamos empezando a ver que las API del navegador comienzan a progresar realmente y el tipo de cosas que podemos hacer directamente en el navegador sin tener que implementarlas nosotros mismos. Eso es un poco emocionante para mí. Sigo siendo un tonto cuando se trata de SVG. Debo explicar la palabra tonto, si alguien que no es inglés y está viendo esto, significa un tonto. Significa que estoy muy por detrás de la curva.

Phil: Pero me encuentro con muchas ganas de hacer más con SVG y las animaciones son cosas en las que estoy muy atrasado y quiero jugar con eso. Pero cosas como las API del navegador, ya sea para trabajar fuera de línea o para mejorar el rendimiento, y particularmente en este momento, la forma en que la carga de fuentes parece ser cada vez más accesible para que podamos comenzar a crear cosas que visualmente son muy ricas y cercanas a lo que podríamos querer hacer con la tipografía. Soy un poco nerd para esas cosas, me gustan ese tipo de cosas, así que quiero jugar más y más con eso.

Vitaly: Phil, hablando de la conferencia JAMstack en Londres. ¿Puedes explicar también en pocas palabras de qué va a tratar, cuál es el enfoque y para quién es y cuál es tu papel allí? Solo detrás de escena, cuidando el contenido y todo. ¿Cuál es tu papel allí?

Phil: Así que he tenido la parte divertida del trabajo. Así que tuve la oportunidad de salir y encontrar oradores y encontrar contenido interesante, así que estoy muy entusiasmado con la forma en que se combinan los programas. Tenemos gente como Chris Coia que va a hablar sobre empoderar a los desarrolladores front-end y cuánto podemos hacer con las tecnologías front-end ahora basadas en este modelo JAMstack. Tenemos personas como Jake Archibald y Surma del equipo de Google Chrome que van a hablar sobre cosas como el rendimiento en la interfaz de usuario y las formas en que realmente podemos impulsar experiencias de rendimiento, ya sea con alojamiento estático o infraestructura o código que se ejecuta directamente en el navegador.

Phil: También vamos a tener a Yuna Kravitz hablando sobre cosas que hacer con CSS y Houdini y todo ese tipo de cosas. Y mucho mucho más además. También hablaremos sobre las cosas que tienen que ver con el cambio cultural que un modelo JAMstack puede tener en su organización y en sus proyectos para que realmente llegue a todos lados. Así que estoy un poco emocionado por eso. También tendré la oportunidad de presentar a todas estas personas porque me han dejado volverme loco y ser el MC también, lo que significa que puedo hablar con estas personas y hacer algunas preguntas y ese tipo de cosas. Así que creo que debería ser muy interesante para cualquiera que esté interesado en el desarrollo front-end y también en nuevos modelos de entrega de proyectos en la web de una manera realmente eficiente.

Vitaly: Oh, entonces te gusta ser el centro de atención en el escenario, ¿eh?

Phil: Soy un buscador de atención. Ya deberías saber eso, Vitaly.

Vitaly: Oh, en realidad siempre pensé que eras una persona muy humilde, agradable y amable, aparentemente yo era-

Phil: Es un acto, es un acto.

Vitaly: Está bien, está bien. Phil, nos encontraremos en unos pocos, oh en realidad, mañana.

Phil: Te veré pronto para otro evento, pero de lo contrario te veré en julio, el nueve y el diez de julio.

Vitaly: [inaudible 00:16:52] Con esto en mente, gracias Phil y me despido. Adiós a todos.

Phil: Hasta pronto.

¡Eso es un envoltorio!

Esperamos darle la bienvenida a Phil en SmashingConf Toronto 2019, con una sesión en vivo en JAMstack. ¡Nos encantaría verte allí también!

Háganos saber si encuentra útil esta serie de entrevistas, y a quién le gustaría que entrevistáramos, o qué temas le gustaría que cubramos, ¡y nos pondremos manos a la obra!