Si alguna vez te has preguntado cómo funcionan los intercambios de datos digitales, quizás te interese saber más sobre la Notación de Objetos de JavaScript (JSON).
Este no será un tutorial excesivamente técnico lleno de jerga de programación. En su lugar, exploraremos la historia detrás de JSON, incluyendo claves, objetos, llaves y dos tipos desarrollando una aplicación en un garaje.
¿Qué es JSON?
JSON es un estándar internacional para registrar, almacenar e intercambiar datos. No es un lenguaje de programación, sino una sintaxis de estructura especial que se utiliza para convertir texto legible por humanos en estructuras de datos aptas para máquinas. Imagínalo como un inglés básico, pero para computadoras.
Como señala la Biblioteca del Congreso, “JSON es tan sencillo que la compatibilidad para leerlo o escribirlo está integrada en casi todos los sistemas o lenguajes de programación utilizados para aplicaciones en la Web”.
Derivado de JavaScript, JSON fue diseñado inicialmente a principios de la década de 2000 por Douglas Crockford y Chip Morningstar. El dúo trabajaba desde un garaje en una aplicación interactiva. Su objetivo era enviar datos a su aplicación después de cargar la página.
Cuando Douglas y Chip tuvieron dificultades para hacer que este intercambio fuera compatible con todos los navegadores, decidieron crear su propia sintaxis. El primer archivo JSON contenía un mensaje de “hola mundo” enviado desde el servidor a la computadora portátil de Douglas en respuesta a un envío de formulario.
Debido a que JSON es una sintaxis, es independiente de los lenguajes de programación. Puedes usar JSON para intercambiar datos entre servicios web escritos en 55 lenguajes de programación diferentes, incluidos Java, Python y PHP, entre otros.
JSON es el formato nativo para datos en aplicaciones web y sitios de JavaScript (JS) porque Douglas y Chip lo basaron en JS. A medida que el uso de JavaScript aumentó en la década de 2010, JSON se convirtió en el formato de intercambio de datos preferido. Actualmente, más de 800,000 sitios web utilizan este formato de datos.
JSON se utiliza principalmente para intercambios de datos entre el servidor y la página web, lo que te permite crear sitios web interactivos. Entre ellos se encuentran aplicaciones como Google Maps, Twitter y YouTube. Personalmente, utilicé JSON para crear un sitio web de bolsa de trabajo con ofertas de empleo agregadas.
Características clave de JSON
Ligero: JSON registra datos en un formato basado en texto con pocas reglas de estructuración. Esto hace que las entradas de datos sean compactas y rápidamente portátiles, por lo que puedes ahorrar espacio de almacenamiento y reducir los costos de gestión de almacenamiento.
Autodescriptivo: Las cadenas JSON contienen datos y metadatos para caracterizar el formato y el contenido de la información intercambiada. La máquina no necesita pasos adicionales para completar la tarea.
Independiente: JSON es compatible con cualquier plataforma, además de múltiples lenguajes de programación, navegadores y dispositivos. Es la forma más sencilla de enviar datos entre el servidor y el cliente (tu sitio web).
Estas características hacen de JSON la opción ideal para orquestar intercambios de datos dinámicos en la web.
JSON vs. REST
Una interfaz de programación de aplicaciones (API) REST (Transferencia de Estado Representacional) se utiliza a menudo en combinación con JSON y es una arquitectura del lado del cliente para intercambios de datos. Los sistemas que utilizan este protocolo se denominan RESTful.
Las aplicaciones RESTful utilizan conexiones HTTP/HTTPS para enviar datos entre el cliente (navegador o dispositivo móvil) y un servidor (tu sistema backend). JSON es uno de los formatos que puedes usar para intercambios RESTful. Otros incluyen HTML, XML, YAML o texto sin formato.
JSON vs. XML
XML significa lenguaje de marcado extensible. "Marcado" significa que no es un lenguaje de programación propiamente dicho, sino una estructura para dar formato a la información transmitida en un documento XML universalmente legible.
Como predecesor de JSON, XML se diseñó principalmente para el intercambio de datos entre aplicaciones. En los años 90 y principios de los 2000, las aplicaciones empresariales distribuidas carecían de formas estandarizadas de comunicación.
XML ofrecía la estructura tan necesaria para definir, almacenar, comunicar y validar datos de una forma que cualquier plataforma pudiera interpretar; de ahí su estatus de "avance". Pero, como primer intento de estandarización, XML no era perfecto.
Este marcado es algo redundante y repetitivo porque XML utiliza muchas etiquetas para entregar datos. Debido a esta complejidad, los documentos XML necesitan más almacenamiento, se ejecutan más lentamente y son más costosos de intercambiar. El formato JSON proporcionó una alternativa más ligera, razón por la cual muchas personas se cambiaron a él cuando estuvo disponible.
Consigue gratis nuestro curso de 100 vídeos sobre diseño web
Desde los fundamentos hasta temas avanzados: aprende a crear sitios en Webflow y conviértete en el diseñador que siempre quisiste ser.
Descripción general de la sintaxis JSON
Ahora, pasemos a la parte más emocionante: la composición. Para entender los datos registrados en JSON, no necesitas aprender letras nuevas, pero sí debes recordar varios términos y reglas de puntuación nuevos.
JSON es una colección de pares clave-valor (o nombre/valor) registrados como texto sin formato. Puedes usar letras y números para registrar entradas de datos, llamados objetos JSON. Cada clave debe ser de tipo cadena: una secuencia de caracteres encerrada entre comillas. La secuencia puede ser fija o variable.
Cada valor puede registrarse como el siguiente tipo de datos:
- NúmeroCadenaValor booleanoMatrizObjetoNulo
Tu par clave-valor también debe seguir reglas de sintaxis sencillas:
- Usa { llaves } para los "contenedores": los bordes que definen tu paquete de datosUsa [ corchetes ] para contener matrices: una colección de elementos de datos similaresEncierra todas las claves entre comillas dobles "..."Añade dos puntos (:) para separar nombres y valoresUsa una coma (,) para separar elementos de la matriz y diferentes pares clave-valorPuedes añadir comentarios (// o /* */) para los datos JSON
Estas reglas son más fáciles en la práctica. Aquí tienes un ejemplo rápido de JSON.
Digamos que tienes dos tazas: una taza azul con una flor y una taza blanca sencilla. Ahora necesitas organizar esto en una lista ordenada que cualquier servicio web pueda entender.
Así es como se registra esta información en JSON:
¿Ves? Casi como escribir normalmente.
¿Cuándo necesitas JSON en el diseño web?
JSON resulta útil siempre que necesites hacer que un sitio web sea más interactivo. Por ejemplo: añadir una opción para actualizar el feed de noticias, organizar nuevas entradas o mostrar mensajes personalizados después de subir un archivo.
En esencia, JSON reduce el número de actualizaciones de página necesarias en un sitio web.
Gracias a los intercambios de datos de JavaScript y JSON, ya no necesitas recargar toda la página web. En su lugar, un clic en "enviar" o "actualizar" activa una solicitud web en segundo plano. Transfieres datos entre tu servidor en el backend y un código JavaScript basado en el navegador en segundos, creando una experiencia de usuario (UX) rápida y agradable.
¿La mejor parte? Puedes codificar fácilmente intercambios de datos en JSON usando bibliotecas de serialización. Estas bibliotecas incluyen marcos de trabajo predefinidos para convertir rápidamente datos de registro a JSON para aplicaciones escritas en diferentes lenguajes de programación.
Los entusiastas del no-code y los principiantes también pueden usar herramientas de bajo código como Make (anteriormente Integromat), Convertigo o Tymly para crear documentos de datos JSON y configurar intercambios RESTful entre aplicaciones.
Aquí tienes varios casos de uso de JSON que quizás quieras explorar:
- Desarrollo de API: Si quieres crear o usar una API, un conector predefinido para intercambiar datos, necesitarás JSON. Las API te permiten incorporar datos (y a veces funciones completas) de terceros. Por ejemplo, una API de CMS de Webflow te permite vincular tu CMS con otra plataforma, como Zapier, para programar la publicación automática de nuevas entradas.
- Recopilación de datos: Puedes crear entradas de datos JSON estructuradas a partir de cualquier información recopilada en tu sitio web. Por ejemplo, si tienes un formulario de generación de leads, puedes recopilar automáticamente toda la información ingresada y guardarla en tu base de datos.
- Análisis y validación de datos: Usando JSON, puedes verificar fácilmente cualquier información enviada. Por ejemplo, puedes usar el servicio Google Place Autocomplete para confirmar que la dirección enviada sea válida y exista. Esto puede ahorrarte horas de entrada manual de datos y reducir tu factura de mensajería si te dedicas al comercio electrónico.
- Creación de una base de datos: JSON es un formato popular para almacenar datos en bases de datos NoSQL como MongoDB. Con JSON, puedes acumular datos en una base de datos sin adaptarlos a ningún lenguaje especializado como SQL. Es una gran opción si necesitas crear listas de contactos simples, listas de pedidos, bibliotecas de activos de contenido, etc. Dicho esto, las bases de datos NoSQL con datos JSON no son tan rápidas como las SQL para recuperar información porque JSON carece de indexación. Pero puedes usar el formato de intercambio de datos JSONB si necesitas esta función. O puedes arreglártelas con algo tan sencillo como Google Sheets como almacenamiento de datos backend.
Limitaciones de JSON
JSON ofrece una compatibilidad con navegadores inigualable, de ahí su uso activo en el desarrollo web. La simplicidad de JSON y la auge de la economía de las API también impulsan la popularidad del formato.
Pero nada es perfecto. JSON tiene varios problemas inherentes que debes tener en cuenta:
- Elemento faltante: El formato JSON ofrece la sintaxis mínima necesaria para registrar datos. Pero carece de elementos útiles como "fecha" para registrar entradas con formato de calendario. Además, JSON no distingue entre números fraccionarios de punto flotante y decimales, lo cual puede ser un obstáculo.
- Sin comentarios: A diferencia de otros lenguajes de marcado, JSON no te permite anotar tus documentos de datos ni comentar el código. Solo JSON5 (una versión más reciente) admite comentarios. Es algo molesto si colaboras con otros.
- Problemas de seguridad con los analizadores JSON: JSON.parse es un comando para leer y escribir entradas de datos JSON. Puedes codificarlo usando diferentes especificaciones, como el IETF JSON RFC original o el estándar ECMAScript más reciente. Cuando los sistemas dependen de diferentes estándares, surgen varios riesgos de interoperabilidad JSON. Estos pueden derivar en ataques de inyección JSON, cuando datos potencialmente maliciosos se escriben en un flujo JSON o son analizados por una función JavaScript del lado del cliente.
Originalmente, JSON también carecía de esquema, pero la comunidad de código abierto creó uno a mediados de la década de 2010. Ninguno de estos problemas es insuperable, pero vale la pena tenerlos en cuenta.
Conectando mejores intercambios de datos
La simplicidad suele ser la clave de una solución, y JSON facilitó el envío de datos entre servidores web, navegadores, la web y aplicaciones móviles. Puedes añadir una capa extra de interactividad a tu sitio web intercambiando y validando datos en el backend. Esto hace que tu sitio sea más receptivo, atractivo y agradable de usar.
Debido a que JSON es una sintaxis basada en texto, es fácil de aprender y adaptar a diferentes lenguajes de programación cuando lo necesites. Además, con el creciente número de herramientas de bajo código, no tienes que escribir tus documentos JSON tan a menudo. Aun así, es útil saber cómo leerlos y trabajar con ellos, ¡y ahora ya sabes cómo hacerlo!
