Entradas

Mostrando las entradas etiquetadas como Web

Nueva serie: The Binary Theory

Hoy vengo a presentar la nueva serie que estoy haciendo en twitch y próximamente en Youtube: The Binary Theory. En esta serie abordaremos diferentes conceptos de Estructuras de Datos y Algoritmos, ¡para poder superar cualquier entrevista que lo requiera! Comenzando por array y listas enlazadas (linked list), hasta acabar con charlas de diferentes ámbitos como puede ser QA o DevOps. En esta serie abordamos de forma teórica y práctica estas estructuras de datos que a veces no entendemos lo suficiente o que incluso se obvian en nuestra formación. Sin embargo, en muchas entrevistas nos encontraremos con preguntas de toda esta temática: Arrays. Listas enlazadas o Linked List (singly and doubly). FIFO y LIFO, pilas y colas. Estructuras jerárquicas como árboles binarios. Grafos. Y mucho más.

AngularJS - Introducción: Inyección de dependencias

Imagen
La Inyección de Dependencias(DI - Dependency Injection) es un pilar fundamental de AngularJSy es que la DI se relaciona con la forma en la que se hacen referencias desde el código, pero, ¿qué es?  La Inyección de Dependencias es un patrón de diseño orientado a objetos. Este patrón nos dice que los objetos necesarios en una clase serán suministrados y que por tanto no necesitamos que la propia clase cree estos objetos.  El framework de AngularJS  gestiona la inyección de dependencias, por lo tanto, nuestras dependencias, como por ejemplo de servicios, serán suministradas por AngularJS. Por ello, al crear un componente de AngularJS se deben especificar las dependencias que esperamos y será el propio framework el que nos proporcione los objetos que se solicitan . Por ejemplo, si necesitamos utilizar un servicio en un controlador, al crear el controlador debemos especificar nuestra dependencia del servicio y no intentar crear un objeto del servicio. En est...

AngularJS - Introducción: Módulos (Modules)

Imagen
En los lenguajes de alto nivel por lo general se tiene una característica muy importante: la modularidad (por ejemplo: namespace en C# o package en Java). Sin embargo, ¿qué ocurre en Javascript con la modularidad? No existe , Javascript mantiene un espacio global para todo. ¿Qué implicaciones tiene esto? Que a medida que crezca nuestro código más sencillo es que se produzca una colisión de nombres de variables, funciones... AngularJS pretende solucionar los problemas con la modularidad de Javascript. Para ello AngularJS implementa el concepto de módulos , permitiendo la asociación de recursos a cada uno de los módulos. De esta forma, el framework nos proporciona una herramienta para poder realizar un división lógica de responsabilidades. ¿Qué es un módulo?  Un modulo es un objeto de AngularJS que actúa como contenedor de recursos y partes de la aplicación : Controladores, servicios, filtros, etc. [ 1 ]. En la siguiente imagen, obtenida de un vídeo...

AngularJS - Introducción: Servicios

La idea de AngularJS es mantener los controladores para el enlace de datos y reducir su carga lógica, es decir, AngularJS pretende separar responsabilidades . Por lo tanto, los encargados de tareas comunes y de la mayor parte de nuestra lógica de negocio con los datos serán los servicios. Formalmente, los servicios son objetos singleton que realizan tareas comunes a varias partes del sistema. Esto se puede ver fácilmente con un ejemplo. Necesitamos obtener información mediante una petición HTTP. La petición podría realizarse desde el controlador, sin embargo, esto consigue un código excesivamente acoplado y sin ninguna separación entre responsabilidades. Si la petición HTTP la sacamos del controlador y la encapsulamos en un servicio habremos conseguido separar las responsabilidades. Es más, si deseamos realizar la misma petición desde otro lugar de la aplicación simplemente debemos utilizar el servicio que hemos creado. En el siguiente ejemplo se puede ver un servicio que e...

AngularJS - Introducción: Controladores

Imagen
¿Qué es un controlador? AngularJS emplea el concepto de controladores como el elemento que define la funcionalidad de una parte de la página . Como aproximación se puede decir que un controlador responde a las acciones sobre una interfaz de usuario, lo que permitirá modificar la salida final por pantalla.  Desde el controlador modificaremos el modelo de datos y gracias al enlace de datos que realiza AngularJS la interfaz de usuario se actualizará para responder al cambio del modelo. Es decir, el controlador utilizará el ámbito ( Ver ámbitos ) correspondiente para modificar los datos y de esta forma dar funcionalidad a la parte  de la página a la que afecte el controlador. Lo explicado se puede ver de forma más clara en el siguiente ejemplo: En un controlador se define la variable* "nombre" en el ámbito con un valor inicial y además se define una función que vacía el contenido de la variable "nombre". Desde el HTML se utiliza la variable del ámb...

AngularJS - Introducción: Ámbitos (Scopes)

Imagen
El concepto de los ámbitos es muy importante y se deben entender para el empleo de AngularJS. La importancia de este concepto radica en qué los  ámbitos son   utilizados por el framework para comunicar controladores y vistas. Es decir, que los ámbitos son el componente que utilizamos para relacionar nuestros datos con las vistas, por tanto deberemos asignar los datos deseados a un ámbito para que este lo lleve a la interfaz. En un ámbito podemos declarar variables* para que estás sean accesibles desde la vista. Es decir, que desde un controlador podremos utilizar las variables del ámbito para establecer los datos que se envían a la parte de la página asociada al controlador. Para el acceso a los ámbitos desde el código se utiliza el objeto  $scope (este objeto representa un ámbito). AngularJS no posee un sólo ámbito, si no que por cada uno de los controladores se crea un nuevo ámbito** . Además los ámbitos están jerarquizados por lo que al anidar un controlad...

AngularJS - Introducción: Directivas

¿Qué son las directivas? Desde un punto de vista de alto nivel, las directivas son marcadores en elementos del DOM que permite especificar el comportamiento esperado para ese elemento DOM e incluso transformar el elemento y sus hijos [1] . Es decir, las directivas serán las herramientas que se emplean en AngularJS para trabajar con el DOM . Esto permite que el resto de nuestros componentes de AngularJS se centren en la lógica de la aplicación y no en la manipulación del DOM Gracias a las directivas se puede extender el conjunto de etiquetas de HTML disponible. AngularJS facilita un conjunto de directivas, podemos ver estás directivas en los atributos "ng-" que agregamos a los elementos del DOM. Es más, AngularJS nos permite crear nuestras porpias directivas, las cuales brindan la posibilidad de crear etiquetas y atributos propios exclusivos del programador, por lo que en AngularJS utilizaremos directivas por todas partes. Para entender mejor el concepto imagina qu...

AngularJS - Introducción: Comparativa

¿Qué es y qué aporta AngularJS? Esta duda se resuelve en la primera entrada del blog acerca de AngularJS. Sin embargo, gracias a una comparativa se puede ver de forma mucha más clara su potencia a la hora de enlazar los datos. Por ello a continuación se muestra una comparativa de enlace de datos en Javascript puro, JQuery y AngularJS. Javascript puro JQuery AngularJS Como se puede apreciar en los diferentes ejemplos, el código de AngularJS es mucho más desacoplado del HTML que en los dos primeros ejemplos. Mientras que en los primeros necesitamos tener información de los elementos del HTML (como el ID del elemento), en AngularJS no. En AngularJS desde el HTML se está utilizando una variable del modelo de datos denominada "nombre" que es modificada por el elemento "input" y que se muestra en la capa de saludo. Por lo tanto, cuando desde el código de AngularJS deseemos modificar valores, sólamente necesitaremos conocer el modelo de datos y no n...

AngularJS - Introducción: ¿Qué es AngularJS?

Imagen
Aplicaciones Web Desde un tiempo a está parte la Web ha experimentado un cambio muy grande. Este cambio es consecuencia del estándar HTML5. En este estándar se agrupa un conjunto completo de especificaciones mediante las cuáles se pretende establecer la forma de construir las páginas Web. El objetivo principal que se persigue es una arquitectura Web abierta a cualquier dispositivo, de forma que sea independiente de la plataforma en  la que funcione. Sin embargo, otro de sus objetivos es dejar paso a la aplicaciones Web . Tanto es así que en 2011 la W3C (entidad que publica el estandar) hablaba así de HTML5: " HTML5 es la piedra angular de un conjunto de tecnologías y APIs para construir aplicaciones web [...] alrededor de HTML5, CSS, SVG, WOFF, API (para el acceso a los datos del usuario, tales como contactos y calendario, o las capacidades del dispositivo, como la geolocalización y la cámara) y más promesas para mantener un área de rápido movimiento de la normalizació...