Patrones de diseño. Universidad de Costa Rica Sede Occidente Bachillerato en Informática Empresarial

Transcripción

1 Universidad de Costa Rica Sede Occidente Bachillerato en Informática Empresarial Curso: Ingeniería de Software Profesor: Óscar Alfaro Solis Patrones de diseño Realizado por: Jean Carlo Murillo Alpízar Carolina Oconitrillo Rodriguez Leylin Esquivel Bolaños I Semestre 2017

2 Índice Índice 1 Introducción 2 Patrones de diseño para software 3 Patrones de diseño creacionales 4 Singleton 4 Factory Method 5 Patrones de diseño estructurales 5 Adapter 6 Decorator 7 Patrones de diseño de comportamiento 8 Observer 8 Strategy 9 Ventajas de los patrones de diseño 10 Desventajas de los patrones de diseño 11 Patrones de diseño para interfaz gráfica 12 Conclusión 14 Bibliografía 15 1

3 Introducción Los patrones de diseño fueron introducidos popularmente a la industria del software con el libro Design Patterns: Elements of reusable object oriented programming escrito por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides en Estos introducen estructuras de clases e interfaces que solucionan un problema general, pensado para que las aplicaciones robustas sean escalables y flexibles, además rápidas de desarrollar y diseñar. Este documento se enfoca en dos tipos de patrones de diseño, los que se utilizan para diseñar e implementar en código, de estos se explican los tipos de patrones de diseño para software, 6 patrones de diseño basado en la lista de patrones de diseño implementados en el framework de.net, ventajas y desventajas. El segundo tipo, son los patrones de diseño de interfaz de usuario, se introducen basado en la necesidad de la buena experiencia de usuario que los sitios web actuales necesitan, las categorías de patrones de diseño con algunos ejemplos y se sugieren ciertos frameworks que pueden ahorrarle tiempo al desarrollador, aparte de asegurarle que está utilizando componentes conocidos por los usuarios y estándar en la industria. 2

4 Patrones de diseño para software Los patrones de diseño han venido a solventar muchos problemas en cuanto a la codificación, pero surge la pregunta, qué es un patrón de diseño? Cada patrón describe un problema el cual ocurre una y otra vez en nuestro entorno, y luego describe el núcleo de la solución del problema, de una forma que se pueda usar esa solución muchas veces, sin hacerlo de la misma forma dos veces. (Gamma, Helm, Johnson, Vlissides, pág. 12) Los patrones de diseño ayudan a desarrollar con mayor velocidad, debido a que no es necesario pensar detalladamente sobre cómo resolver un asunto específico. Así mismo el uso de estos patrones, nos proporciona la facilidad de prevenir problemas y mejorar la legibilidad y claridad del código debido a que otros ingenieros de software entenderían la lógica utilizada de los patrones de diseño, porque su documentación está en todas partes. Así mismo es importante resaltar que los patrones de diseño nos proporcionan soluciones generales, las cuales no están atadas a un tipo específico de problema. (Source Making) Por otra parte, se puede visualizar a los patrones de diseño como una solución a un problema en un contexto, en donde destacan tres aspectos: el contexto, en el cual el patrón es utilizado; el problema que se está intentando solventar; y por último la solución que trata de aplicar una solución para alcanzar los objetivos. (Freeman, Freeman, Bates, Sierra, pag.594, 2004) Los patrones de diseño han sido integrados en frameworks como.net, los desarrolladores utilizan las clases de las librerías de este framework, a veces sin darse cuenta que muchas de esas clases utilizan patrones de diseño, algunos de los patrones de diseño mencionados son el Observer, Iterator, Composite, Decorator, Factory Method, Adapter, Strategy. (Pierry, 2005) Por lo que se toma como base la lista anterior para enfocar algunos patrones de diseño que pueden ser considerados como los más utilizados en la industria. 3

5 Es importante tomar en cuenta que existen patrones de diseño enfocados a distintos campos, como los siguientes: Patrones de diseño estructurales Patrones de diseño de comportamiento Patrones de diseño de creacionales Patrones de diseño creacionales Estos patrones de diseño creacionales se enfocan en el proceso de instanciación y esto nos proporciona la ventaja de depender más en la composición de objetos que la herencia de clases. (Gamma, Helm, Johnson, Vlissides, pág. 94). Algunos tipos de patrones de diseño creacionales son: Abstract Factory Builder Factory Method Prototype Singleton A continuación se va a brindar una pequeña descripción de algunos patrones de creación elegidos para mostrar en exposición. Singleton La intención es asegurarse que solamente exista una sola instancia de un objeto, y por ende proporcionar un manera global(static) de acceder a dicho objeto. Este patrón de diseño puede ser usado para distintas ocasiones, como: objetos que controlan preferencias, configuraciones, un administrador de archivos, logueos, entre otras. 4

6 Figura 3 (Shvets, pág 98) Factory Method Se basa en la definición de una interface para así poder crear objetos, los cuales van a implementar dicha clase, pero les da la facilidad a las subclases de elegir cuál clase instanciar. Factory Method también proporciona la creación de un diseño más personalizado pero a la vez un poco más complicado. Si comparamos este patrón con otros más, nos damos cuenta que este no necesita nuevas clases, sino que solamente requiere nuevas operaciones. (Source Making) Figura 3 (Shvets, pág 52) Patrones de diseño estructurales Se enfocan en facilitar el diseño, al identificar formas sencillas de relacionar entidades. (Source Making) Estos patrones describen formas de componer objetos en caso de agregar nuevas funcionalidades a dichos objetos. (Gamma et al, pág. 155) Entre la lista de patrones estructurales se encuentran: Adapter Bridge Composite 5

7 Decorator Facade Flyweight Private Class Data Proxy A continuación se describen algunos patrones de diseño estructurales. Adapter Este patrón de diseño permite adaptar dos componentes que trabajan de manera diferente pero que necesitan un traductor para que ambas puedan funcionar en conjunto. (Shvets, pág 14) Este es un ejemplo aplicable en la vida real, donde siempre se diseña algo nuevo que aún no sustituye a lo viejo del todo, como por ejemplo, los adaptadores de cables HDMI y VGA, debe existir algún mecanismo intermediario para que una computadora con puerto HDMI se pueda conectar a una pantalla con puerto VGA. Este patrón se enfoca en crear una interfaz que traduzca o mapee un componente con otro, por medio de la encapsulación de una clase para que la otra se comunique por medio de la interfaz, ya que ambas clases no se pueden comunicar directamente.(shvets, pág 15) A continuación se muestra la estructura recomendada para este patrón de diseño. Figura 3 (Shvets, pág 16) En esta estructura, es importante comprender cual es el elemento que va a ser utilizado por el cliente, por lo general es el nuevo (NewAppplication), luego identificar el elemento viejo (LegacyComponent), para poder crearle un adaptador o 6

8 interfaz que realice todos los cambios necesarios para que el LegacyComponent se adapte. (Shvets, pág 17) Decorator Está diseñado para añadir responsabilidades adicionales a un objeto dinámicamente, es decir, en tiempo de ejecución. La herencia, en este caso no es la solución porque brinda una solución estática, y con el tiempo inmantenible. Así que, el decorator provee una forma flexible de agregar subclases cuando se necesite extender la funcionalidad de un objeto, es una solución recursiva para encapsular objetos. (Shvets, pág 41) A continuación se muestra la estructura recomendada para este patrón de diseño. Figura 4 (Shvets, pág 43) El punto está en encapsular el objeto principal y el Decorator/Wrapper bajo la misma interfaz para poder lograr la composición recursiva del objeto, que consiste en agregarle n cantidad de capas al objeto principal, si así se lo desea el cliente. (Shvets, pág 42) Para entender esta estructura, se debe saber que CoreFunctionality, es por lo que el cliente siempre va a estar interesado en tener, los demás elementos son opcionales, es decir, puede o puede que no esté interesado en tenerlos, las clases hijas del 7

9 OptionalWrapper, siempre le van a pasar la responsabilidad a su padre, y el padre le va a pasar al objeto contenido o encapsulado. (Shvets, pág 43) Patrones de diseño de comportamiento Los patrones de diseño de comportamiento se enfocan en la comunicación de los objetos de las clases. Entre estos se destacan los siguientes patrones de diseño: Visitor Strategy Observer Memento Iterator Interpreter A continuación se explicarán brevemente algunos de estos. Observer Este patrón de diseño define una dependencia de objetos de uno a muchos en el cual si un objeto cambia el estado, se envía una notificación de cambio a los componentes dependientes de este que cambió, para que estos se actualicen al instante, por otro lado el Observer encapsula los componentes principales de las variables. Este patrón está compuesto por varios participantes como el Observer: son los componentes variables dependientes de la abstracción, luego está el Subject: representa el núcleo principal de abstracción y es el que ocasiona el cambio en los observer. (Shvets, pág 84) Para entender mejor estos roles veamos un ejemplo, en una subasta hay un subastador (Subject) quien lleva el control de la subasta, en ella hay varias postores (Observers) quienes hacen ofertas al encargado, el subastador está atento ya que en el momento que un postor levanta la paleta, cuando esto pasa la puja cambia y es ahí donde los postores se les notifica que el precio subió y por ende deben de cambiar sus la ofertas.(shvets, pág 85) 8

10 Figura 5 (Shvets, pág 85) Strategy El Strategy es uno de los patrones más utilizados, ya que actualmente hay muchas tareas las cuales poseen muchas maneras de realizarlas, este patrón nos da la flexibilidad de poder elegir la manera que más se adapte según los requisitos del proceso. Este patrón define un conjunto de algoritmos los cuales poseen algún tipo de relación, este los encapsulan y permiten el intercambio, permitiendo que este varíe, dependiendo de lo que el cliente utilice.(shvets, pág 105) Un ejemplo de este patrón es cuando se llega a un aeropuerto y se necesita un medio de transporte, pero hay varias posibilidades como tomar un taxi, el autobús o rentar un coche, las cuales dependen del cliente, la acción a realizar nunca cambia lo que cambia es la manera de hacer esta. (Shvets, pág 107) 9

11 Figura 6 (Shvets, pág 106) Ventajas de los patrones de diseño Son soluciones que ya están probadas: debido a que corresponden a la abstracción de un problema que ya alguien más utilizó y le funcionó para resolver ese problema. ESto implica que pueden reducir los riesgos del proyecto. (Debnath, 2015) Son ideales para lenguajes de programación orientado a objetos: la estructura de los patrones de diseño encapsula por objetos, crea instancias, utiliza métodos get y set. Por lo que, para aplicar lo que el patrón de diseño sugiere es recomendable realizarlo bajo programación orientada a objetos. (Debnath, 2015) Pensados para el cambio: la mayoría están pensados para que sean flexibles y extensibles. Encapsulan lo que varía, y lo que no cambia, para evitar que futuros cambios impliquen modificar módulos ya existentes en la aplicación. (Debnath, 2015) Mejoran la comunicación entre desarrolladores: es un vocabulario que los desarrolladores pueden entender a la hora de resolver problemas de diseño, 10

12 además permiten que todos puedan estar en la misma página en cuanto a la solución de diseño acordada. (Riehle, 2010) Facilitan la implementación: los patrones de diseño son plantillas que el desarrollador utiliza y adapta para poder implementarlas en código, al utilizar un patrón la tarea de implementar una discusión de diseño se facilita.(riehle, 2010) Facilitan la documentación: el desarrollador se puede referir a la estructura de su código como un patrón de diseño determinado, lo que va a facilitar el proceso de documentación y la lectura.(riehle, 2010) Desventajas de los patrones de diseño Son complicados de implementar en lenguajes de programación dinámicos: En algunos lenguajes de programación, algunos patrones de diseño se simplifican o prácticamente se eliminan,(source Making) por ejemplo Java es un lenguaje de programación de tipo estático, lo que implica que su variables deben estar definidas por tipo, y se recomienda programar orientado a objetos. En cambio Python, es de tipo dinámico, sus variables no necesitan declararse. (Mikoluk, 2013) Puede llevar a soluciones ineficientes: Los patrones de diseño están debidamente documentados, pero si no se saben aplicar bien, pueden provocar duplicación de código. (Source Making) Además, lograr aplicar varios patrones de diseño a la vez requiere de mucha investigación, porque no resulta ser una tarea fácil. La curva de aprendizaje es alta: en el libro de Design Patterns explained simply se listan 28 patrones de diseño, lo que implica indagar en la documentación y encontrar cual es el adecuado para el problema que se intenta solucionar, y luego intentar implementarlo en nuestra aplicación de forma adecuada. 11

13 Patrones de diseño para interfaz gráfica Los sitios web en la época de 1990 comenzaron a aparecer, algunos resultaban siendo paginas planas con información por todo lado, otras con demasiada animación, letras flotantes e intermitentes, pero posiblemente ver un sitio web en esa época era algo normal, ahora si lo vemos desde la perspectiva en comparación con los sitios actuales, realmente se nota que la experiencia de usuario no era primordial en ese tiempo,( Makosiewicz) la experiencia de usuario es un concepto amplio que abarca todas las interacciones que el usuario final vaya a tener con un producto o servicio, en cambio la interfaz de usuario debe ser capaz de permitirle al usuario encontrar los elementos en un sitio fácilmente y que debería inclinarse por un buen aspecto visual, pero si el sitio no le ofrece algo al usuario, que este necesita ver, la experiencia de usuario va a ser pobre, un ejemplo se establece con un sitio de comentarios acerca de película, si el usuario es capaz de encontrar los comentarios y entender, entonces se ha logrado una buena interfaz de usuario, pero si el usuario quiso buscar una película independiente y la aplicación no contaba con películas de este tipo en su base de datos, entonces el usuario probablemente busque otra página para consultar, lo que quiere decir que el usuario no obtuvo una buena experiencia en ese sitio.(norman, Nielsen) La buena experiencia de usuario en los sitios actuales resultan fundamentales para que el usuario quiera utilizar un sitio web, y para poder lograr los objetivos que el sitio web tiene con sus usuarios. Los problemas comunes que aparecen a la hora de crear interfaces gráficas, se clasifican en las siguientes categorías: Obtener datos de entrada: lograr que el usuario pueda ingresar sus datos, por medio de formularios, explicar un proceso o permitirle a un usuario que alimente un sitio con información. (UI-Patterns) Navegación: Cuando el usuario necesita encontrar contenido específico, puede realizarse por medio de barras de navegación, menús, contenido desplegado de maneras específicas, por medio de imágenes.(ui-patterns) 12

14 Gestionar datos: A veces los datos se deben poder filtrar, visualizar, establecer un formato específico, esto se puede lograr por medio de tablas, búsquedas o imágenes.(ui-patterns) Social: Permitirle al usuario comunicarse, interactuar con otras personas en línea, esto se puede lograr por medio de chats, reacciones o reviews.(ui-patterns) Onboarding: Es cuando se necesita que el usuario obtenga el conocimiento suficiente y las habilidades para que pueda realizar las tareas en el sitio efectivamente. Se le puede enseñar al usuario de guías a través del sitio, o simplemente dejar que experimenten sin registro.(ui-patterns) Otros: Son patrones de diseño que no han encontrado una categoría específica, como el carrito de compras o tratar de aumentar las visitas al sitio.(ui-patterns) Los patrones de diseño para interfaz de usuario le establecen un nombre a un problema común en el diseño de interfaces, lo que permite a desarrolladores o diseñadores referirse a un problema por medio del nombre. Además, al igual que los patrones de diseño de software, son problemas que ya alguien ha solucionado y probado, lo que implica que si se incorpora en una aplicación, se puede estar seguro de que son soluciones que los usuarios están acostumbrados a ver, no hace falta inventar algo que ya funciona. (UI-Patterns) Hay muchos sitios web que proveen componentes que se pueden reutilizar, estos pueden ahorrar tiempo en el diseño, por ejemplo, los formularios que Bootstrap y Materialize ofrecen para aplicaciones web, o las plantillas de dashboards, páginas principales, las barras de navegación, botones, entre muchos otros componentes que son personalizables, están debidamente documentados y están colgados en los sitios para que cualquiera pueda usarlos. 13

15 Conclusión Los patrones de diseño son excelentes soluciones a muchos de los problemas originados durante el desarrollo y diseño de un sistema, debido a que solventan inconvenientes muy comunes. A su vez estos patrones son ideales en la programación orientada a objetos, ya que muchos de estos utilizan objetos en su estructura. Además proveen flexibilidad, porque están pensados para adaptarse al cambio. Por otro lado también hay desventajas al usar patrones de diseño, como que no están orientadas a lenguajes de programación dinámicos, esto puede llevarnos a soluciones ineficientes o dificultades al aprender a cómo usarlos. Estas herramientas vienen a solucionar algunos problemas a la hora de diseñar o programar. La competencia actual en la web, hace que los sitios web y aplicaciones móviles deban ofrecer a los usuarios experiencia de usuario óptima e interfaces de usuario amigables, debido a que estos ya están acostumbrados a ciertos estándares en la industria y a la facilidad con que los sistemas les permiten realizar sus tareas. Existen frameworks y templates que facilitan el proceso de desarrollo y diseño, además son una excelente forma de ahorrar tiempo al equipo de desarrollo o al desarrollador independiente. 14

16 Bibliografía Debnath, S (2015). Benefits of Design Patterns. Consultado el 07 de mayo del 2017: nath Design Patterns. UI-Patterns. Consultado el 08 de mayo del 2017: Freeman, E; Freeman, E; Bates, B; Sierra, K (2004). Head First Design Patterns. Estados Unidos: O Reilly Media. Gamma, E ; Helm, R ; Johnson, R; Vlissides, J (1994). Design Patterns. Elements of Reusable Object-Oriented Software. Consultado el 05 de mayo del 2017, en : Makosiewicz, M. UXPin. Progress in design: 22 hot websites then and now. Cnsultado el 08 de mayo del 2017: Mikoluk, K (2013). Python vs Java: Diferencias clave. Consultado el 07 de mayo del 2017: Norman, D; Nielsen, J. The definition of user experience.nielsen Norman Group. Consultado el 10 de mayo del 2017: Riehle, D (2010). Lessons learned from using design patterns in industry. Estados Unidos. Consultado el 09 de mayo del 2017: 15

17 Shvets, A. Design Patterns explained simply. Source Making: Estados Unidos Source Making. Design Patterns. Consultado el 05 de mayo del 2017, en : Pierry, R (2005). Discover the design patterns you're already using in the.net Framework. MSDN Magazine. Consultado el 09 de mayo del 2017: zine/cc aspx 16