Curso de Programación Orientada a Objetos con Javascript

Te explicamos en este vídeo lo que encontrarás en este curso y las características y enfoque de esta formación sobre programación orientada a objetos.

Vamos a repasar 4 conceptos transversales en el mundo de la programación, como son la abstracción, la encapsulación, modularización y jerarquización.

Los conceptos de programación que vimos en el anterior vídeo: abstracción, la encapsulación, modularización y jerarquización los vamos a aterrizar en las herramientas que nos ofrecen los lenguajes de alto nivel que ya conocemos.

Qué es un paradigma de programación y definición del paradigma de programación estructurada.

Cómo pasamos del paradigma de la programación estructurada al paradigma de la programación orientada a objetos. Por qué este paradigma es más deseable para desarrollar software que la programación estructurada.

Teoría: Qué son las clases y qué son los objetos, conceptos esenciales de Programación Orientada a Objetos.

Teoría: Qué son los mensajes y qué son los métodos.

Teoría: Qué son los atributos, también llamados propiedades, y qué es el estado de los objetos.

En Javascript podemos trabajar con objetos en muchos contextos. El propio lenguaje ofrece numerosas utilidades en objetos incorporados, por lo que los usamos con frecuencia. Sin embargo, en el curso hemos dicho que para hacer objetos tenemos que instanciarlos a partir de clases, pero eso no es siempre así en Javascript, ya que podemos crear objetos con literales. Vamos a ver estas y otras cosas que pueden resultar un poco confusas y que debemos de conocer.

Es el mecanismo más antiguo para crear objetos de un tipo determinado en Javascript. Veremos cómo hacer funciones constructoras para definir clases de objetos y cómo instanciar los objetos por medio del operador new.

Es otra manera de crear clases de objetos en Javascript, todavía más sencilla de las funciones constructoras, que nos demuestra la maleabilidad del lenguaje.

Se dice que Javascript es un lenguaje orientado a prototipos. Para entender esta afirmación veremos qué es un prototipo y cómo podemos usarlos para crear objetos de un tipo determinado.

Si hay algo raro en Javascript, y que nos puede dar especiales problemas y a veces frustraciones si no lo dominamos, es la variable this. Vamos a explicar qué es this y cómo su valor puede ir cambiando dependiendo de lo que estemos haciendo.

Antes de continuar vamos a explicar a bajo nivel qué es lo que hace el operador new en Javascript y cómo cambia el contexto de this dentro de la función constructora.

Vamos a hacer un ejercicio completamente práctico para poder afianzar los conocimientos que hemos adquirido hasta el momento sobre el modo de trabajo con orientación a objetos en Javascript tradicional. En este ejercicio además podremos ver situaciones en las que históricamente teníamos problemas con la redefinición del contexto y la variable this, aportando tres posibles soluciones para resolver estas cuestiones.

Cómo definimos una clase en Javascript ES6, el estándar ECMAScript 2015. Cómo instanciamos objetos de una clase.

Veremos qué es un constructor y cómo implementarlos en Javascript.

Vamos a profundizar en la creación de propiedades (atributos) y métodos en Javascript usando las clases modernas y cómo lanzar mensajes o acceder al estado de los objetos.

El mundo de los objetos es muy potente porque podemos construir unos objetos en base a otros objetos. Esto nos aporta niveles de abstracción, modularización y jerarquización muy importantes para mejorar la comprensibilidad de los programas y reducir la complejidad de los desarrollos.

Vamos a repasar la notación de los corchetes como método de acceso a los miembros de los objetos, ya sean propiedades o métodos para invocarlos.

Esta clase la vamos a dedicar a conocer los módulos en Javascript basados en el estándar ECMAScript. Veremos el concepto de módulo y cómo podemos exportar e importar cosas de unos módulos a otros. Los módulos son esenciales para poder organizar de una manera mantenible el código de las aplicaciones y los vamos a usar constantemente para construir nuestros ejemplos durante el curso de Programación Orientada a Objetos en Javascript.

En esta clase vamos a ver qué es Phaser y qué nos ofrece como framework para desarrollo de juegos en Javascript. Además comenzaremos a desarrollar nuestro primer juego con Javascript. Veremos las piezas fundamentales de un juego en Phaser y cómo dar los primeros pasos para colocar objetos en las escenas del juego, haciendo clases independientes que puedan mantener de manera encapsulada su complejidad.

En esta clase en vivo estaremos disponibles para responder preguntas y realizar ejercicios extra para incrementar la parte práctica del curso.

Comenzamos con un poco de teoría para definir qué es la vista pública y vista privada de los objetos. Por qué es importante mantener privados todos los miembros que no necesiten ser públicos, para fomentar la encapsulación.

Explicamos la nueva sintaxis para definir propiedades privadas en las clases, de modo que no se puedan acceder desde los objetos.

También es posible definir métodos privados, de modo que no se puedan invocar con un objeto.

Otra manera de crear propiedades en Javascript es por medio de getters y setters. Existen desde hace mucho y en realidad pertenecen a Javascript tradicional pero los veremos en este bloque por si acaso no los conoces. Explicaremos qué son los getter y los setter y cómo funcionan con ejemplos.

Vamos a explicar qué son los miembros de clase y ponerlos en contraste con los miembros de objeto que hemos conocido hasta ahora. Entenderemos las diferencias entre estos dos tipos de miembros y por qué necesitamos los miembros de clase.

Ejemplo práctico de propiedades de clase (estáticas) en Javascript.

Veremos ejemplos de implementación y uso de métodos estáticos en Javascript.

Además de los miembros de clase definidos con static dentro del código de la clase también podríamos hacer miembros de clase dinámicos, creados en tiempo de ejecución. Veremos de qué se trata, cómo se pueden hacer y las diferencias entre los miembros estáticos tradicionales.

Un poco de teoría para explicar el mecanismo de herencia en el mundo de la programación orientada a objetos y la importancia que tiene.

Veremos ejemplos de herencia en Javascript, de modo que aprenderemos a implementarla, a la vez que vemos casos útiles donde le podemos sacar partido.

Qué es la sobreescritura de métodos en Javascript, con ejemplos prácticos sobre para qué lo podemos utilizar.

Cómo funcionan los constructores en la herencia y el uso de super().

Presentamos otra tutoría donde seguiremos ampliando las prácticas del curso y donde podremos resolver dudas en vivo de los estudiantes.

Ahora vamos a ver que es posible la invocación de cualquiera de los métodos, tal como se han definido en la superclase, por medio de super y el nombre del método que queremos invocar tal como se implantó en la clase padre.

Cuando trabajamos con herencia importa mucho cómo se definieron los métodos en la clase padre en lo que respecta a la visibilidad, es decir, si eran públicos o privados. Veremos qué pasa con los atributos y métodos privados, cuando los necesitamos usar en las clases derivadas.

Los miembros estáticos también tienen algunas cosas que necesitamos entender cuando estamos trabajando con herencia en programación orientada a objetos. Veremos cómo funciona en Javascript, que es orientado a prototipo, y las diferencias con otros lenguajes de programación orientada a objetos más tradicionales que puedas conocer, del estilo de Java.

En este vídeo vamos a mostrar de manera práctica unos ejemplos de componentes estándar de Javascript, lo que llamamos "Web Components". Este estándar usa el mecanismo de herencia para la definición de "Custom Elements", que son componentes que sirven para crear nuevas etiquetas con las que extender el HTML. Veremos un ejemplo de componente que extiende la clase nativa HTMLElement y luego haremos un nuevo componente que extiende otros custom Element. Todo esto nos permitirá ver que la herencia es un mecanismo básico también para el desarrollo frontend nativo y además nos servirá para ver ejemplos claros y realistas de "herencia por extensión".

Qué es herencia simple y herencia múltiple. Problemáticas de la herencia múltiple. En Javascript podemos implementar de manera directa la herencia simple pero también podríamos realizar técnicas para conseguir herencia múltiple por medio de mixins que vamos a explicar.

Un poco de teoría para explicar de manera genérica qué es el polimorfismo en los lenguajes de programación y por qué es importante.

Ahora vamos a ver cómo se aplica este concepto de polimorfismo en el lenguaje Javascript. Veremos cómo los objetos pueden tener métodos compartidos incluso sin herencia.

Vamos a avanzar un poco más en la práctica de polimorfismo para llevarla a un nivel un poco más ortodoxo dentro del desarrollo orientado a objetos, creando una clase que es capaz de colaborar con distintas clases polimórficas.

Javascript es un lenguaje muy maleable con aplicaciones de polimorfismo muy variopintas. Pero para que nos quede un poco más claro el concepto de polimorfismo y la práctica en Javascript frente a lenguajes más tradicionales, vamos a explicar cómo funcionan los lenguajes tipados a la hora de hacer polimorfismo. Mencionaremos algunas cosas extra que existen en lenguajes tipados, como las clases abstractas o las interfaces, que no existen en Javascript directamente, pero que queremos que al menos hayáis oído hablar de ello para tener un conocimiento un poco más general.

En este vídeo vamos a explicar el proceso de desarrollo de un software completo orientado a objetos. Cómo vamos a descomponer nuestro código en distintas clases de objetos, cómo se producirá un desencadenamiento de construcciones de objetos, luego un desencadenamiento de mensajes. Cuál es el compromiso ideal entre descomposición y complejidad del software. Qué modelos de desarrollo podemos seguir, etc.

Ahora vamos a ver cómo surgen las colaboraciones entre objetos, entendiendo que estas colaboraciones definen las relaciones entre clases. Luego veremos los tipos de relaciones entre clases que surgen a través de la colaboración de objetos, como son la relación de composición, agregación, asociación y uso. La herencia también establece otro tipo de relación, pero no surge por colaboraciones entre objetos, por lo que no la metemos en el mismo saco.

Para reforzar un poco más el conocimiento sobre los distintos tipos de relaciones vamos a ver unas tablas que pretenden hacer un resumen más esquemático de las características que caracterizan a cada relación. Esperamos que aclare un poco más las ideas y permita ubicar mejor cuándo surgen relaciones de cada clase.Explicamos la relación de asociación y agregación, viendo ejemplos prácticos y la representación en diagramas de UML.

Vamos a ver qué es el modelo de dominio, cómo se realiza el modelado, qué vamos a modelar, los principios que debemos seguir, el modo de producir diagramas, explicando los motivos por los que usaremos UML y las alternativas de herramientas para crear los diagramas UML.

Hemos dicho que vamos a preferir crear los diagramas de UML en base a código, mediante PlantUML, por ello vamos a ver qué herramientas podemos utilizar para trabajar con PlantUML.

Para la creación del modelo de dominio vamos a usar principalmente el diagrama de clases. Así que vamos a ver cuál es la sintaxis de PlantUML para producirlos. De paso aprenderemos UML, pues veremos qué tipos de elementos usaremos para definir clases, atributos y métodos, tanto públicos como privados, así como las distintas flechas que usamos para especificar los diferentes tipos de relaciones.

En este vídeo vamos a ver el proceso completo para la realización de un modelo de dominio en UML con PlantUML. Para ello usaremos el dominio de un juego muy popular, el buscaminas, que tenemos en los sistemas operativos Windows. De este modo iremos construyendo un ejemplo completo de diagrama que incluirá todos los tipos de relaciones posibles.

En este vídeo vamos a realizar una serie de avances en la práctica con Phaser para realizar un juego en el que tenemos una nave dispara meteoros, continuando una práctica realizada en una clase anterior. En este caso vamos a aprender a crear grupos de objetos (los meteoritos por una parte y los disparos de la nave por otra) y gestionar las colisiones entre los elementos de cada grupo de objetos.

Vamos a crear el modelo de dominio del juego, haciendo una reflexión para que se entienda la diferencia entre análisis, que es lo que estamos realizando en esta etapa, y el diseño. En esta etapa nos tenemos que aislar de tecnologías y centrarnos más en los conceptos. Es una buena práctica en este punto porque en nuestro juego hemos implementado ya muchas funcionalidades y tenemos Phaser en la cabeza, pero el modelo de dominio tenemos que hacerlo aislando nuestras decisiones a las decisiones de implementación y de los frameworks que podamos utilizar.

Adaptación de algunas clases definidas en el modelo de dominio sobre nuestro juego construido por Phaser: Level y Scoreboard.

Vamos a implementar unas mejoras, también definidas en el modelo de dominio del juego, para hacer distintos niveles o fases, pudiendo pasar entre ellas hasta llegar a la pantalla final.

Una especialización de las clases de meteoritos. Cómo hacer para que al destruir un meteoros grandes se produzca la creación de meteoros pequeños.

Vamos a definir algunos comportamientos en el juego para ajustar la jugabilidad: refinar el control de los meteoritos que quedan por romper y usar vidas en el juego.

En este vídeo vamos a terminar la práctica del juego de los meteoritos, haciendo una conclusión de los objetivos que teníamos a la hora de desarrollarlo, que era practicar con polimorfismo. Explicaremos en qué puntos del juego lo vemos representado y las cosas que no debemos hacer si queremos programar bien orientado a objetos, que basicamente consiste en no preguntar por el tipo del objeto, sino que se debe delegar para que cada objeto realice las tareas a su modo.

En este vídeo explicamos la práctica que proponemos para profundizar en la creación de familias de objetos, en este caso de los meteoritos, donde podremos aplicar polimorfismo. Realizaremos además una adaptación para mejorar la versatilidad de creación de nuevos niveles del juego, para que puedas crear nuevos niveles con más posibilidades.

Si no tienes idea de usar Git, vamos a dejar unas notas para que no te lies y sepas hacer la práctica del curso.