{"id":20955,"date":"2019-03-26T09:21:32","date_gmt":"2019-03-26T07:21:32","guid":{"rendered":"https:\/\/www.teldat.com\/sin-categorizar\/20955\/programacion-reactiva-sistemas-reactivos-sd-wan\/"},"modified":"2022-12-20T13:51:04","modified_gmt":"2022-12-20T11:51:04","slug":"programacion-reactiva-sistemas-reactivos-sd-wan","status":"publish","type":"post","link":"https:\/\/www.teldat.com\/es\/blog\/programacion-reactiva-sistemas-reactivos-sd-wan\/","title":{"rendered":"Programaci\u00f3n reactiva y Redux-Observable: \u00bfcu\u00e1les son sus ventajas?"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignleft size-medium wp-image-5259\" src=\"https:\/\/www.teldat.com\/wp-content\/uploads\/2022\/06\/Rafael-Lujan-Marzo-2019-300x202.jpg\" alt=\"reactive programming\" width=\"300\" height=\"202\" title=\"\">Actualmente, el concepto de <strong>programaci\u00f3n reactiva<\/strong>, que hace referencia al manejo de flujos de datos as\u00edncronos conocidos como \u201cstreams\u201d, ha adquirido protagonismo.<\/p>\n<p><strong>ReactiveX,<\/strong> que es una de las librer\u00edas que ofrece este concepto, disponible en m\u00faltiples lenguajes de programaci\u00f3n, obtiene lo mejor de la programaci\u00f3n funcional: el patr\u00f3n <em><strong>observer<\/strong> <\/em>o el patr\u00f3n <em><strong>iterator<\/strong><\/em>.<\/p>\n<p>El objetivo es conseguir una aplicaci\u00f3n con<strong> capacidad de respuesta<\/strong> y una f\u00e1cil escalabilidad.<\/p>\n<p><!--more--><\/p>\n<h2><\/h2>\n<h2>Caracter\u00edsticas, ventajas y ejemplos de programaci\u00f3n reactiva<\/h2>\n<p>Algunas de las <strong>ventajas<\/strong> que nos ofrece la programaci\u00f3n reactiva son:<\/p>\n<p>\u2022<strong> Evita callbacks.<\/strong><br \/>\n<strong>\u2022 Permite trabajar de manera as\u00edncrona de manera mucho m\u00e1s f\u00e1cil.<\/strong><br \/>\n<strong>\u2022 Simplifica el trabajo.<\/strong><br \/>\n<strong>\u2022 C\u00f3digo legible.<\/strong><br \/>\n<strong>\u2022 Gran cantidad de operadores.<\/strong><\/p>\n<p>Los <strong>sistemas reactivos<\/strong> seg\u00fan las bases de la programaci\u00f3n reactiva han de ser:<\/p>\n<p><strong>\u2022 Responsivos:<\/strong> cumplen los tiempos de respuestas establecidos.<br \/>\n\u2022 <strong>Resilientes<\/strong>: se mantienen responsivos incluso en situaciones de error.<br \/>\n\u2022 <strong>El\u00e1sticos<\/strong>: se mantienen responsivos a\u00fan con una gran carga de trabajo.<br \/>\n\u2022 <strong>Orientados a mensajes:<\/strong> minimizan el acoplamiento entre componentes al establecer un intercambio de mensajes de manera as\u00edncrona.<\/p>\n<p>&nbsp;<\/p>\n<p>Para que pod\u00e1is ver toda la potencia que nos ofrece, os voy a poner un peque\u00f1o ejemplo con RxJava2, en el que supondremos que quer\u00e9is hacer los siguientes pasos:<\/p>\n<p>1. Necesit\u00e1is obtener los alumnos menores de 16 a\u00f1os en un clase.<br \/>\n2. Posteriormente, quer\u00e9is obtener las notas de cada uno.<br \/>\n3. Combinar estos valores.<br \/>\n4. Cada 2 segundos, mandar esta informaci\u00f3n a vuestra API.<br \/>\n5. Hacerlo en segundo plano.<br \/>\n6. Una vez finalizado, mostrar la informaci\u00f3n al usuario.<\/p>\n<p>&nbsp;<\/p>\n<p>Como podemos observar, la <strong>potencia y legibilidad<\/strong> que nos ofrece es inmensa.<\/p>\n<h2><\/h2>\n<h2>Redux-Observable<\/h2>\n<p>La programaci\u00f3n reactiva <strong>puede aplicarse a gran cantidad de lenguajes,<\/strong> los desarrolladores web que usan Redux, ven la necesidad de realizar en ocasiones <strong>tareas as\u00edncronas<\/strong>. Existen librer\u00edas como <em><strong>Redux-Thunk o Redux-Saga<\/strong><\/em> que nos lo permiten, pero en este art\u00edculo nos centraremos en el uso de <em><strong>Redux-Observable<\/strong><\/em>, queaprovecha toda la potencia de la programaci\u00f3n reactiva bas\u00e1ndose en el uso de <strong>RxJs<\/strong>.<\/p>\n<p>Redux-Observable abstrae la conexi\u00f3n con la store de Redux, maneja todo tipo de suscripciones para no tener que preocuparnos de la escucha o env\u00edo de acciones.<br \/>\n\u00bfC\u00f3mo hace esto Redux-Observable? Con el uso de <em><strong>Epics<\/strong><\/em>: funciones que toman un stream como entrada y devuelven un stream como salida, o en otras palabras reciben una acci\u00f3n y devuelven otra.<\/p>\n<p>Vamos a ver un ejemplo de Epics:<\/p>\n<p>Como hemos comentado, Redux-Observable maneja todo tipo de acciones, en nuestro ejemplo gracias a <em><strong>ofType<\/strong> <\/em>capturamos el tipo de acci\u00f3n, posteriormente mapeamos nuestra acci\u00f3n y realizamos la petici\u00f3n ajax, la cual nos devolver\u00e1 una respuesta, que trataremos, de la manera que necesitamos en este caso, llamando a la funci\u00f3n <strong>userLogin.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>\u00bfCu\u00e1l es el aut\u00e9ntico potencial de este tipo de programaci\u00f3n?<\/h2>\n<p>En el uso de operadores, como podemos observar en el c\u00f3digo, tenemos un operador <em><strong>takeUntil<\/strong> <\/em>que permite cancelar operaciones en caso de que nos llegue una acci\u00f3n determinada. Adem\u00e1s de este hay una gran lista de operadores que a\u00f1aden much\u00edsima m\u00e1s funcionalidad en apenas unas l\u00edneas de c\u00f3digo.<\/p>\n<p>Aunque hace 10 a\u00f1os que apareci\u00f3 el concepto de programaci\u00f3n reactiva, creo que es ahora cuando se ha convertido en la mejor opci\u00f3n para incluir en nuestros desarrollos. Hacerlo nos permite manejar la asincron\u00eda y complejidad de manera sencilla, aprovechando la potencia de la librer\u00eda ReactiveX que nos ofrece soporte para gran cantidad de lenguajes.<\/p>\n<p>En Teldat utilizamos tecnolog\u00eda Redux para desarrollar ciertas secciones de la <a href=\"https:\/\/www.teldat.com\/es\/soluciones\/networking-avanzado\/cnm-sd-wan-redes-hibridas\/arquitectura-sd-wan-que-es\/\" target=\"_blank\" rel=\"noopener\">soluci\u00f3n SD-WAN de Teldat.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Actualmente, el concepto de programaci\u00f3n reactiva, que hace referencia al manejo de flujos de datos as\u00edncronos conocidos como \u201cstreams\u201d, ha adquirido protagonismo. ReactiveX, que es una de las librer\u00edas que ofrece este concepto, disponible en m\u00faltiples lenguajes de programaci\u00f3n, obtiene lo mejor de la programaci\u00f3n funcional: el patr\u00f3n observer o el patr\u00f3n iterator. El objetivo [&hellip;]<\/p>\n","protected":false},"author":211,"featured_media":19534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1168],"tags":[1077],"class_list":["post-20955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia-sd-wan","tag-soluciones-sd-wan"],"acf":[],"wpml_current_locale":"es_ES","wpml_translations":[{"locale":"en_US","id":19531,"slug":"reactive-programming-responsive-applications-sd-wan","post_title":"Reactive Programming and Redux Observable","href":"https:\/\/www.teldat.com\/reactive-programming-responsive-applications-sd-wan\/"}],"_links":{"self":[{"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/posts\/20955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/users\/211"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/comments?post=20955"}],"version-history":[{"count":0,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/posts\/20955\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/media\/19534"}],"wp:attachment":[{"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/media?parent=20955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/categories?post=20955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teldat.com\/es\/wp-json\/wp\/v2\/tags?post=20955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}