DIA 17 / 2018

Más allá del área local con Netlify

Un ambiente local permite formar a un estudiante, uno productivo convertirlo en profesional. En este artículo, exclusivo para Octuweb, presentaré Netlify, la plataforma para manejar proyectos web modernos.


Netlify

¿Por qué Netlify?

Netlify es más que un servicio de hosting para sitios estáticos. Se destaca por sobre otras alternativas como Github Pages o Firebase Hosting, al combinar y simplificar a un par de clics servicios como:

  • Continuous Deployment: permite integrar con sitios como Github, Gitlab y/o Bitbucket, para automatizar el despliegue de sitios.
  • DNS: permite la administración de zonas dentro del dominio netlify.com y el uso de dominios personalizados.
  • HTTPS: disponible de forma automática para todas las zonas manejadas por Netlify.
  • Rollbacks: puedes retroceder a una versión anterior con un clic desde la página “Deploys”.
  • Split Testing: una de sus nuevas características es que puedes redireccionar parte del tráfico a dos o más branches en específico.

Esto con el objetivo de reducir la complejidad asociada al desarrollo web, al encargarse del Back-end y por si fuera poco, muchas de estas características que forman parte de Netlify son gratis.

La mayoría de las alternativas disponibles ponen más trabas que soluciones, limitando la cantidad de proyectos que puedes manejar, el número de despliegues en un determinado tiempo, la compatibilidad con generadores de sitios estáticos, la velocidad de carga del sitio y la lista sigue.

Para estudiantes, esto tiende a ser una gran limitante, ya que son ellos quienes se ven en la necesidad de salir del área local para tener feedback sobre lo que se está haciendo, probar diferentes soluciones y comenzar a interiorizarse en un ambiente productivo para convertir el conocimiento en experiencia, encontrándose con aquellas alternativas que terminan frustrándolos más que motivarlos a seguir explorando lo que pueden hacer.

¿Sitios estáticos?

Como su nombre lo dice, se componen de archivos estáticos, como HTML, CSS y un poco de JavaScript. Estos se pueden ejecutar localmente, sin la necesidad de un servidor dedicado. Probablemente, así se veía tu primer sitio local:

<html>
<head>
  <title>This is title</title>
</head>
<body>
   Hello world
</body>
</html>

En este punto es fácil de manejar, pero conforme el sitio crezca, la estructura se volverá compleja.

Parte de estas dificultades son solucionadas con el uso de un Content Management System (CMS) como WordPress o Adobe Experience Manager, que permite la administración del sitio desde una interfaz gráfica.

Esto implica el tener que estimar cuántos usuarios pueden estar conectados trabajando al mismo tiempo, la cantidad de clientes conectados y la versión para cada país (de ser necesario). Con eso en mente, puedes decidir las especificaciones del hardware que sustentará al CMS, lo cual, dependiendo del negocio en que se utilice, puede llegar a ser muy caro.

Las desventajas que conlleva el uso de un CMS son la mantención de servidores, actualizaciones constantes para evitar problemas de seguridad, limitantes de rendimiento y sobretodo lo que este te deja hacer con el diseño. Lo que dependiendo de la escala de lo que requieras hacer, puedes solucionar con un generador de sitios estáticos y mediante Netlify CMS, agregarle una interfaz para administrar el contenido, el cual se integra dentro de un repositorio Git.

Static Site Generators (SSGs)

Estas son herramientas que te permiten crear sitios estáticos en base a contenido escrito en Markdown, el cual es cargado sobre templates. Por lo tanto, basta un conocimiento general sobre HTML y CSS para utilizarlos. Esto facilita bastante el proceso de creación de sitios.

Netlify cuenta con soporte para la gran mayoría de SSGs disponibles, lo que incluye el proceso de construcción del sitio, que puede requerir desde un comando a un conjunto de scripts. Esto permite la automatización del despliegue, ya sea definiendo los pasos requeridos para construirlo desde la interfaz Gráfica o agregando un archivo de configuración netlify.toml en tu repositorio Git.

Si en este punto te preguntas qué característica puede ofrecer el plan de pago que no tengas en el gratis, es el trabajar en equipos, ya que por defecto todo miembro que agregues a un proyecto (sitio), será Admin.

Otros elementos son Add-ons de Netlify que puedes utilizar, como el uso y manejo de formularios, cuyo tope es 100 envíos y 10 megas para archivos por mes. Esto reduce bastante la necesidad de un Back-end dedicado para solventar esas necesidades del sitio.

¿Puede ser utilizado por estudiantes?

Completamente, su uso puede servir como base para ir explorando varias de las tecnologías que se aplican hoy y empezar a familiarizarte desde ya.

Basta con registrarse en Netlify a través de tu cuenta de Github, Gitlab, Bitbucket o creando una en base a un correo electrónico, si no cuentas con las anteriores.

La interfaz es bastante intuitiva, pese a que su principal enfoque es la integración con el sistema de manejo de repositorios de tu preferencia, pero también puedes arrastrar una carpeta con el ejemplo ya mencionado. De esta forma, levantarás un sitio en menos de un minuto.

Con eso, tu sitio tendrá:

  • Un subdominio aleatorio bajo netlify.com, cuyo nombre es modificable (de estar disponible).
  • Todos los dominios manejados por Netlify cuentan con HTTPS.
  • Respuesta rápida a las consultas de sitio.

Si cuentas con un dominio propio que hayas comprado en sitios como GoDaddy, la documentación es muy clara respecto a cómo realizar el traspaso para poder manejarlos desde Netlify. Para habilitar HTTPS en un dominio personalizado, puedes generar de forma gratuita un certificado propio desde Netlify, el cual utiliza Let’s Encrypt para su creación.

Puedes acceder al sitio adonisv.xyz para ver mi súper Hello Octuweb ✌🏼.

También para estudiantes o personas quienes no han tenido experiencia previa con control de versiones, el integrar Netlify con una plataforma como Github les permitirá explorar aspectos básicos del manejo de repositorios, permitiendo actualizar tu sitio al aplicar cambios en master o si estás experimentando en un branch, Netlify te permitirá visualizarlos según los actualices De esta forma, no tendrás que esperar a ver los resultados en master.

En caso que quieras probar un generador de sitios estáticos, te recomiendo que revises la documentación correspondiente para cada uno de ellos. El procedimiento general para usarlos es definir los pasos para el build.

La facilidad para crear y manejar tus proyectos web

Algunos pueden considerar que la abstracción de elementos es pésima durante la formación de profesionales, pero muchas de las herramientas modernas que realizan esto están generando un impacto increíble sobre la manera en cómo se trabaja actualmente. Un ejemplo de esto es Kubernetes.

En el ejemplo “Hello Octuweb”, se creó un sitio funcional sin tener que levantar un servidor, asignarle una IP estática, realizar configuraciones de DNS bajo el lema de “el fin justifica los medios”, generar un certificado SSL y preocuparse de mantenerlo actualizado con las dependencias adecuadas.

Si alguien desea aprender más sobre infraestructura y plataformas, además de recomendarle sobre software y cursos, le recomiendas sobre un lugar para que este pueda empezar a familiarizarse y de ahí expandirse en lo que prefiera, ya sea con un proveedor cloud como Amazon Web Services o Google Cloud Platform. Un lugar donde pueden experimentar bajo un free tier desde “ejercicios” hasta “proyectos” simples.

Para el desarrollo web, mi postura es la misma, recomiendo Netlify porque te permite experimentar, sin limitaciones y con la capacidad de hacer desde pequeños proyectos personales hasta proyectos profesionales que cumplen con las exigencias actuales de servicio.

Parte de ser profesional/Senior es entender lo que está haciendo y el porqué de eso. Todos podemos presionar un par de botones, pero no todos tienen conciencia de lo que se hace y ahí se encuentra la calidad.

TL;DR: entender lo que haces es lo que te diferencia como profesional y amar lo que haces, como persona.

Contenido extra

Si quieres sacar aún más provecho o simplemente tienes curiosidad sobre qué otra cosa puedes hacer en Netlify, puedes revisar los siguientes links:

Reflexión

Netlify me permitió comenzar a entender mejor el mundo Front-end. Lo que me gustaría es ver que este tipo de herramientas puedan ser utilizadas por jóvenes, que puedan motivarse, que puedan aprovechar estas facilidades y los ayude a potenciar su aprendizaje, decidir qué les gusta y cómo quieren desempeñarse en el futuro.

Con el apoyo adecuado y dándoles el ejemplo, además de encantar a los futuros profesionales para que sean más apasionados, se les puede dar una base aplicada con casos reales en vez de una hipotética y para aquellos que ya la tienen, pueden sacarle aún más provecho.

Idealmente recomienda este tipo de herramientas a quienes puedan enseñar o a quienes quieran aprender. Lamentablemente, no podemos comunicarnos con todos, pero para aquellos que quieran, buscarán y para cuando lo hagan, encontrarán lo que podamos dejarles.

Luciano Adonis title=

Joven DevOps, Gopher, guionista y escritor de scripts improvisados. Me gusta el pan con palta y el jugo de piña (junto, no revuelto). La infraestructura como código fue lo mejor que le pasó a la tecnología, seguido de la pizza con piña. Escribiendo para olvidar.