{"id":1705,"date":"2024-08-02T11:14:56","date_gmt":"2024-08-02T09:14:56","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1705"},"modified":"2024-08-02T11:14:57","modified_gmt":"2024-08-02T09:14:57","slug":"001-reactividad-introduccion","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/19-reactividad\/001-reactividad-introduccion\/","title":{"rendered":"001. Reactividad: Introducci\u00f3n"},"content":{"rendered":"\n

Comenzamos una nueva secci\u00f3n dentro de Javascript,<\/strong> y se trata de lo que es la reactividad. <\/strong>Hay que comprender cual es el paradigma<\/strong> de la programaci\u00f3n reactiva<\/strong> en Javascript,<\/strong> que en los \u00faltimos a\u00f1os, librer\u00edas como Angular, React, Polimer, Vue…<\/strong> han venido popularizando este paradigma de la programaci\u00f3n reactiva<\/strong> y la programaci\u00f3n orientada a los componentes<\/strong>, que es b\u00e1sicamente el stack<\/strong> actual que gracias a estas librer\u00edas<\/strong> trabajamos de manera profesional en el front.<\/strong><\/p>\n\n\n\n\n\n\n\n

En esta secci\u00f3n veremos como funcionan internamente estas librer\u00edas,<\/strong> para que cuando tengamos que trabajar con ellas, sepamos como se trabaja la reactividad.<\/strong><\/p>\n\n\n\n

Qu\u00e9 es la reactividad<\/h2>\n\n\n\n

La reactividad<\/strong> la vamos a ver principalmente en los datos de nuestra aplicaci\u00f3n. La reactiv<\/strong>idad de los datos significa cuando una interfaz (sitio, aplicaci\u00f3n…)<\/strong> se modifica, los cambios que vemos se modifican a partir de los cambios que tengan los datos que tengan la l\u00f3gica de programaci\u00f3n de dicho sitio o aplicaci\u00f3n, lo que significa que cada vez que se actualizan los datos, la interfaz de usuario puede cambiar, mostrar o cargar nuevo contenido.<\/p>\n\n\n\n

Estado<\/h2>\n\n\n\n

El estado<\/strong> es m\u00e1s que una forma de llamar a los datos<\/strong> de nuestra aplicaci\u00f3n.<\/strong> Se le llama estado<\/strong> porque estamos hablando de un proceso reactivo<\/strong>, por lo que el estado<\/strong> tiene una duraci\u00f3n de tiempo determinada, por eso decimos que el estado son los datos en un momento particular del flujo de nuestro sitio o aplicaci\u00f3n, <\/strong>por ello escucharemos decir mucho a los programadores el estado actual de los datos de la aplicaci\u00f3n.<\/strong><\/p>\n\n\n\n

Si estamos en una aplicaci\u00f3n<\/strong> que nos pide hacer login,<\/strong> podr\u00eda existir una variable dentro del estado que se llame logueado, que ser\u00e1 true<\/em><\/strong> cuando el usuario haya ingresado sus datos y tenga permiso para acceder, o false<\/em><\/strong> cuando tengamos que registrarnos.<\/p>\n\n\n\n

Interfaces de usuario basadas en el estado<\/h2>\n\n\n\n

Son aquellas que en base a los cambios que sufren los datos de la aplicaci\u00f3n en cierto momento, \u00e9sta se va a renderizar en nuevos elementos de cualquier tipo. Estas interfaces, generalmente suelen dividirse en peque\u00f1os elementos a los que llamamos componentes. <\/strong>Es por ello que se suele hablar de una programaci\u00f3n orientada a componentes<\/strong>, y para dar una definici\u00f3n de componentes,<\/strong> un componente<\/strong> es un patr\u00f3n visual repetido que se puede resumir en un fragmento de c\u00f3digo independiente HTML, CSS y que posiblemente tenga Javascript<\/strong>.<\/p>\n\n\n\n

Cualquier framework frontend<\/strong> como puede ser Bootstrap,<\/a> Fundation,<\/a> Materialice CSS<\/a>…<\/strong> los componentes<\/strong> que en su conjunto van formando esa interfaz de usuario<\/strong>, son fragmentos de HTML<\/strong> con CSS,<\/strong> por ejm, una tarjeta<\/strong> simplemente es c\u00f3digo HTML<\/strong> con CSS,<\/strong> pero un carrusel de im\u00e1genes<\/strong> ya implica la programaci\u00f3n Javascript.<\/strong><\/p>\n\n\n\n

Caracter\u00edsticas que deben cumplir los elementos de interfaces de usuario<\/h2>\n\n\n\n
    \n
  • Son un fragmento<\/strong> de la interfaz<\/strong> que cumplen una funci\u00f3n \u00fanica<\/strong>: por ejm un bot\u00f3n es un bot\u00f3n, una tarjeta es una tarjeta.<\/li>\n\n\n\n
  • Son reutilizables<\/strong>: utilizan el principio DRY<\/strong>(don\u00b4t repeat yourself<\/strong>).<\/li>\n\n\n\n
  • Son independientes<\/strong> tanto de su contexto<\/strong> como del resto de componentes,<\/strong> lo podemos aislar, extraer, y deber\u00eda de seguir funcionando.<\/li>\n\n\n\n
  • Son autocontenidos:<\/strong> no filtran estilos,<\/strong> no filtran funcionalidad<\/strong> a otros componentes,<\/strong> los podemos abstraer de un proyecto,<\/strong> implementarlos en otro y tendr\u00edan que funcionar.<\/li>\n<\/ul>\n\n\n\n

    Una aplicaci\u00f3n reactiva basada en componentes<\/strong> nos permitir\u00e1 separar el c\u00f3digo en elementos de interfaces independientes y que aparte podremos utilizar. Estas pueden estar aisladas o interactuar entre s\u00ed pero sin manejar cierta codependencia.<\/strong> Esto hace que evitemos apuntar o manipular directamente a los elementos del DOM<\/strong> que es como estamos acostumbrados a trabajar con Javascript.<\/strong> En lugar de estar apuntando, simplemente a trav\u00e9s de esta reactividad<\/strong> hacemos que la aplicaci\u00f3n reaccione a las acciones que el usuario desencadene con sus interacciones para que esta actualice el estado, y en base a los cambios, la interfaz se renderice y veamos los cambios tanto en el estado como en la parte visual, es decir, la interfaz basada en el estado.<\/p>\n\n\n\n

    En los siguientes cap\u00edtulos veremos como podemos ir agregando poco a poco estos conceptos de estado, estado reactivo, generar un componente.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Comenzamos una nueva secci\u00f3n dentro de Javascript, y se trata de lo que es la reactividad. Hay que comprender cual […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1703,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1705","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Comenzamos una nueva secci\u00f3n dentro de Javascript, y se trata de lo que es la reactividad. Hay que comprender cual […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1705"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1705\/revisions"}],"predecessor-version":[{"id":1706,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1705\/revisions\/1706"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1703"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}