Cómo decidir la mejor tecnología para su sitio web

Usted sabe cómo se verá su sitio web y tiene una buena idea sobre la estructura del contenido. Pero nadie quiere mantener un conjunto de páginas estáticas, ¿verdad? Echemos un vistazo a cómo hacer que su sitio web sea dinámico y fácilmente ajustable, de modo que con cada cambio, no tenga que tocar el código y la implementación del sitio web.

Pero donde empezamos?

¿Necesitamos instalar alguna herramienta? ¿Es una buena idea usar JavaScript o seguir con la representación del lado del servidor usando MVC o un CMS todo en uno? Explicaré cómo dar vida a sus sitios web y prepararlos para el futuro.

Entonces quieres construir un sitio web moderno. Un sitio web que es rápido, seguro, se ve bien y brinda la mejor experiencia de usuario. La palabra moderno es clave aquí, ya que también se relaciona con nuestro agitado tiempo. Todos están ocupados, nuestros jefes quieren que hagamos el 120% de nuestro trabajo asignado y apenas hay media hora para disfrutar del almuerzo todos los días. Por lo tanto, crear toda la funcionalidad del sitio web desde cero no se ajusta a nuestro escenario. El objetivo es ponerlo en funcionamiento lo más rápido posible y compartirlo con todo el mundo, preferiblemente hoy.

Una solución todo en uno del lado del servidor

El uso de una solución todo en uno, como un sistema de gestión de contenido (CMS), garantizará que su sitio web esté listo y funcionando rápidamente. Al menos su primera versión. Instalarlo y acceder a la interfaz de administración por primera vez podría llevarle solo unos minutos si ya tiene listo el entorno de desarrollo (de lo contrario, agregue algunas horas para la instalación).

Una vez que inicie sesión, puede configurar el sitio web, definir la política de URL y luego comenzar a crear plantillas y diseños basados ​​en el diseño que eligió. Obtener las plantillas y el contenido en el CMS puede llevar mucho tiempo. Es decir, necesitas:

  • aprender el concepto de plantillas de cada CMS en particular (a partir de documentación o e-learning)
  • aplica el concepto en tu diseño
  • aprender las mejores prácticas sobre el almacenamiento de contenido en cada CMS
  • ajustar el sitio web para que se ajuste a sus expectativas

Todo esto se puede hacer muy rápidamente si está familiarizado con el CMS. Pero sus primeros sitios web probablemente no serán candidatos para el sitio del año. ?

Cuando usé sistemas CMS en el pasado, tarde o temprano siempre terminaba creando controles personalizados (es decir, código personalizado), ya que la salida HTML de los controles estándar no era suficiente o iba directamente en contra de los nuevos estándares de la industria, como Accelerated Mobile Pages. Considero que esta es la mayor advertencia de los sistemas CMS, lo limitan de varias maneras, ya que se posicionan como un motor maestro de su sitio web. Siempre me encontré resolviendo pequeñas tareas el 80% del tiempo.

Otro problema que encontré casi siempre fue durante la implementación. La primera implementación es fácil, simplemente coloque todo en un FTP remoto y restaure la base de datos en el servidor de su proveedor de alojamiento. Son las implementaciones posteriores las que complican las cosas. Aunque estos sistemas suelen ofrecer una forma de llevar los cambios de su desarrollo (o simplemente locales) al sitio en vivo, tiende a ser parte de niveles de precios más altos y se necesita algo de tiempo para aprender y configurarlo.

Enfoque sin cabeza

Expliqué las ventajas de la arquitectura de microservicios en otro artículo. Hoy en día, todo el mundo llama a este enfoque sin cabeza, porque la parte clave de la arquitectura de microservicio es el CMS sin cabeza (por ejemplo, Kentico Cloud). Actúa como un lugar donde almacena todo el contenido y garantiza la entrega. El principal beneficio es que es un servicio más. Eres el nuevo responsable de tu sitio web. Usted dice cómo van a funcionar los servicios entre sí y cuál de ellos aprovechará. Headless CMS es solo otro servicio en toda la pila. ¿Pero cómo haces eso?

Déjame mostrarte eso en mi sitio web personal. Cuando llega un visitante, espera ver algo como esto:

La página de inicio de mi sitio web es solo un código HTML simple con contenido. Ahora bien, hay dos formas de crear este código HTML. O nos quedamos con el enfoque estándar de construirlo todo en el servidor:

O cortamos un poco nuestro servidor web y redactamos el código HTML en el cliente:

Verá, el navegador del visitante solo acepta datos, no toda la estructura HTML con contenido. Pero, ¿cómo sabe el navegador qué mostrar? ¿Cómo procesar los datos y generarlos en nuestro diseño?

JavaScript moderno

Le diremos al navegador qué hacer a través de JavaScript. En el pasado, JavaScript estaba mal visto. Siempre ha sido una regla general que cada vez que creaba una funcionalidad de JavaScript, tenía que hacer la versión alternativa de noscript. Pero los tiempos han cambiado y los navegadores se han desarrollado. Aún debe cumplir con algunas reglas para que su sitio web sea accesible, pero más sobre eso más adelante.

Usar JavaScript para crear un sitio web nunca ha sido tan fácil. Hay muchos marcos que lo ayudan a lograr su objetivo incluso con un conocimiento mínimo de JavaScript simple. Y lo mejor es que para algunos de ellos no es necesario instalar nada. Su navegador y su editor de texto favorito son suficientes. Pero comencemos con lo básico y seleccionemos el mejor marco para nuestros nuevos sitios web.

En general, hay 3 marcos JS principales que tienen mucha tracción y una gran comunidad a su alrededor. Eso asegura un desarrollo y soporte continuos. Muchos sitios web exitosos se construyen sobre ellos, algunos de los cuales puede utilizar a diario.

1. AngularJS

Angular tiene la mayor historia de estos tres. ¡Fue fundada hace casi 10 años en 2009! Está desarrollado y mantenido por Google. En comparación con otros marcos, tiene una sintaxis más compleja basada en TypeScript y requerirá que configure un proceso de compilación. Sin embargo, admite la modularidad y un modelo MVVM que permite que las aplicaciones creadas sobre Angular sean muy robustas.

Recuerdo que lo usé por primera vez en 2013 para un proyecto semi-gubernamental donde nos permitió crear un front-end rápido para administrar todo tipo de entidades. Fue muy fácil crear listados ricos con funcionalidades de paginación, filtrado y clasificación.

2. ReactJS

React fue fundado originalmente y de código abierto por Facebook en 2013. Está basado en componentes, lo que facilita su aprendizaje. Sus componentes se implementan utilizando la sintaxis JSX, que se encuentra entre JavaScript y HTML. También es fácil descubrir la arquitectura inicial, ya que cada componente es como un módulo que contribuye al HTML de salida. Si te gustan los Legos, ¡te gustará React!

Es posible incluirlo en el sitio web como una biblioteca JS o configurar un proceso de compilación y usar TypeScript. React también tiene la comunidad más grande y tiene un hermano llamado React Native que le permite crear aplicaciones móviles nativas.

3. VueJS

Vue se lanzó en 2014 y está creciendo rápidamente; actualmente, obtiene el mayor aumento de tracción en la comunidad. Es muy similar a React, pero un poco más fácil para principiantes. Brilla con su documentación detallada y su muy fácil integración. Los componentes se basan en HTML simple, lo que lo hace muy fácil para los principiantes de JavaScript. También es el más ligero de estos tres.

Personalmente lo usé en escenarios de carritos de compras más avanzados en Prestashop y me sorprendió lo rápido que pude hacer que todo funcionara sin ningún conocimiento previo de Vue.

Si desea ver la comparación en profundidad, consulte el excelente artículo de TechMagic o la comparación de Jens Nauhaus en Medium.

Seleccionar el marco adecuado

Cuando se trata de seleccionar el marco adecuado, los desarrolladores generalmente optan por el que tienen una experiencia previa (si fue una buena experiencia). Pero si es nuevo en el desarrollo de aplicaciones para el usuario, debe observar los objetivos que estableció para su sitio web. La elección correcta depende en gran medida del proyecto que esté construyendo. Permítanme resumir mis expectativas:

  • Curva de aprendizaje rápida: necesito crear el sitio web lo más rápido posible
  • Implementación ligera: el sitio será bastante pequeño, por lo que quiero minimizar el tiempo de carga.
  • Fácil integración: no quiero configurar procesos de compilación, pero comenzar a trabajar en el sitio web de inmediato
  • Buena documentación: siempre que soy nuevo en algo, me encuentro navegando por la documentación todo el tiempo para casos de uso específicos.
  • Enrutamiento fácil: hay varias páginas en mi sitio web, por lo que necesito un enrutador para manejar varias URL
  • Entrega de contenido simple: usaré un sistema de contenido como servicio, por lo que necesito una manera fácil de obtener contenido en JavaScript

Entonces puedes ver que en mi caso Vue.js encaja mejor. Es fácil de usar e integrar para principiantes y tiene una documentación increíble con tutoriales sencillos. Escriba sus expectativas y vea si Vue.js también se ajusta a ellas.

El último punto sobre la entrega de contenido es muy importante. Todos esos marcos de JavaScript le permiten obtener contenido a través de la API REST, pero implementar llamadas a la API sin procesar llevará mucho tiempo y no es nada divertido. Algunos sistemas CMS sin cabeza como Kentico Cloud proporcionan un SDK para JavaScript que es un envoltorio para la comunicación REST con muchas características adicionales. Eso hará que la recopilación de contenido sea mucho más fácil.

La arquitectura final del nuevo sitio web puede verse así:

La primera solicitud del sitio web se resuelve devolviendo una plantilla HTML principal con archivos JavaScript. Cuando el navegador comience a procesar la lógica de JavaScript, Vue.js se inicializará y dará vida a nuestros componentes. Cada uno de esos componentes actúa de forma independiente: muestra HTML, obtiene datos de un CMS sin cabeza o publica datos de envíos de formularios en un servicio web de formularios.

Esta arquitectura nos permite construir nuestros sitios web muy rápidamente mientras realmente lo disfrutamos. Es como construir un coche con Legos. El sitio web será ligero, rápido y, en general, mucho más rentable. Pero dejemos la economía para otro artículo. Cual es tu experiencia? ¿Has probado ya los microservicios?

Otros artículos de la serie:

  1. Cómo empezar a crear un sitio web impresionante por primera vez
  2. ¿Cómo decidir cuál es la mejor tecnología para su sitio web (este artículo)?
  3. Cómo potenciar su sitio web con Vue.js y con un mínimo esfuerzo
  4. Cómo combinar un CMS sin cabeza con un sitio web Vue.js y Pay Zero
  5. Cómo hacer que los envíos de formularios sean seguros en un sitio web de API
  6. La creación de un sitio web súper rápido y seguro con un CMS no es gran cosa. ¿O es eso?
  7. Cómo generar un sitio web estático con Vue.js en poco tiempo
  8. Cómo configurar rápidamente un proceso de compilación para un sitio estático