closures-ios-visual-engineering

WORKSHOP IOS - CLOSURES, GENÉRICOS Y OPERADORES

En los primeros workshops de iOS tratamos el tema de las closures. Si recordamos, una closure, también denominada función de cierre, era como un bloque de Objective-C o C, en la que una función en vez de comenzar con la palabra reservada func incorpora unas llaves { }:

{ (parámetros) -> tipo de retorno in declaración del bloque }

En este workshop entramos en detalle con genéricos y operadores. Respecto a los genéricos, éstos sirven para definir código de una forma más abstracta, sin depender de un tipo en concreto para que el mismo código pueda aplicarse luego a distintos tipos siempre que sigan una serie de reglas, o restricciones, como un protocolo.

El propio módulo de foundation define estructuras como el array o el diccionario que hacen un uso extensivo de generics y eso les permite almacenar colecciones de cualquier tipo. Incluso, ese es quizás el uso más habitual de los generics.

Y en cuanto a los operadores, son símbolos que se usan para trabajar como valores. Se pueden usar para realizar manipulaciones matemáticas o lógicas específicas, pero también pueden servir para comparar números, juntar textos,... Es decir puedes definir operadores que hagan lo que quieran. E incluso, aunque Objective-C cuenta con una gran cantidad de operadores,  te puedes crear operadores nuevos que aún no existen en el lenguaje.

Si quieres conocer más sobre estos aspectos, nuestro ingeniero Alberto Irurueta nos enseñó ese workshop de "Closures, generics & operators":


Puedes descargar su presentación aquí. 


testing ios blog visual engineering

WORKSHOP IOS - TESTING, PROTOCOLOS Y EXTENSIONES

Las pruebas o tests unitarios nos permiten verificar de forma ágil y segura que nuestra app hace lo que debe hacer. Para verificarlo se basa en los casos de prueba que hayamos definido previamente.

Normalmente se usan para verificar pruebas de regresión, es decir, que nuestra app sigue haciendo lo que antes hacía tras incorporar los nuevos cambios. Es importante tenerlo en cuenta porque Apple puede rechazar una actualización de nuestra app debido a que ésta produzca errores no controlados que podríamos evitar con estas pruebas.

Las pruebas unitarias son la base para el desarrollo guiado por pruebas o Test-Driven Development (TDD), que es un estilo de programación que impone la creación de los casos de prueba con antelación al código que va a ser verificado.

En Xcode existen principalmente dos tipos de pruebas unitarias:

  • Pruebas unitarias lógicas: verifican el correcto funcionamiento de un fragmento de código de forma independiente.
  • Pruebas unitarias de aplicación: verifican el correcto funcionamiento de fragmentos de código dentro del contexto de nuestra app, y verificar funcionalidades específicas de un dispositivo, como el uso de la geolocalización, acelerómetro, etc.

Los casos de pruebas deben ser:

  • Automatizables: que no requieran intervención humana para su verificación.
  • Completas: deben cubrir el mayor código posible, es decir que debemos tener casos de prueba que cubran cuántos más métodos de nuestra app mejor.
  • Repetibles: un caso de prueba no debe tener ninguna dependencia que impida ser ejecutado varias veces con el mismo resultado.
  • Independencia: un caso de prueba no puede depender del resultado de otro caso.

Tan necesarias son las pruebas unitarias como lo es la práctica de la integración continua.

La integración continua consiste en tener un proceso automatizado en el que, después de que cada developer suba código al repositorio, se obtiene la última versión, se compila, se ejecutan el conjunto de pruebas unitarias seleccionado, y se dejan los binarios/resultados en una ubicación conocida.

Con la integración continua evitaríamos el posible problema de que no compile o que de repente fallen funcionalidades dependientes de referencias externas, nos ahorraría tiempo en los desarrollos y nos permitiría centrarnos en lo importante de la aplicación: su funcionalidad.

Existen dos sistemas de integración continua:

  • Travis CI: especialmente diseñado para construir y testear proyectos en Github de forma automática.
  • Jenkins: es gratuito, open-source y actualmente uno de los más empleados para esta función. Además es muy fácil de utilizar y permite actualizaciones fáciles.

Todos esto lo puedes profundizar en el siguiente workshop "TESTING, PROTOCOLOS Y EXTENSIONES", impartido por Alberto Irurueta y Alejandro García, que se hizo con el objetivo de:

  • Entender el funcionamiento de los protocolos
  • Aprender a crear tests unitarios
  • Generar informes de resultados de tests y de cobertura de código
  • Integración continua (Travis vs. Jenkins)

Puedes descargar la presentación aquí.


swift estructuras visual engineering

WORKSHOP IOS - SWIFT: ESTRUCTURAS

En Swift tanto las estructuras como las clases son fundamentales para hacer un proyecto completo.

Las estructuras (structs) son uno de los pilares principales de Swift como lenguaje. Las estructuras representan unidades de información.

Las clases (class) son las partes esenciales que organizar y que dividen nuestra aplicación en diferentes archivos y dentro de estos en diferentes métodos que nos permiten estructurar todo.

Las estructuras y las clases tiene mucho en común. Ambas pueden:

  • Definir propiedades para guardar valores

  • Definir métodos para proveer funcionalidades

  • Definir sub-scripts para proveer acceso a sus valores usando la sintaxis del sub-script

  • Definir inicializadores  para configurar en estado inicial

  • Para ser extendidos y expandir su funcionalidad más allá de su implementación por defecto

  • Ajustar protocolos para proveer funcionalidades estándares de cierto tipo.

Las clases tienen capacidades adicionales que las estructuras no tienen:

  • La inner-herencia permite una clase heredar las características de otra clase.

  • El type-casting te permite revisar e interpretar el tipo de instancias dentro de una clase al crear un runtime.

  • Los des-inicializadores permiten a la instancia de una clase liberar cualquier recurso que se le haya asignado.

  • El conteo de referencias permite a que más haya más de una referencia a la instancia de una clase.

Por otro lado, las enumeraciones (enums) en Swift son elementos de primera clase. Ellos adoptan muchas funcionalidades tradicionalmente soportadas por las clases, como propiedades computadas que proveen información adicional sobre los valores actuales de las enumeraciones, y métodos de instancias que proveen funcionalidades relacionadas a los valores que las enumeraciones representan, entre otras cosas.

Para conocer mejor todos estos elementos del código, nuestros ingenieros Jordi Serra y Pierluigi Cifani nos presentaron "Swift - Estructuras".

Puedes descargar su presentación: Swift: structs, enums and classes.

Para mayor información sobre las clases y estructuras, puedes visitar la página de Apple para developers. 


workshop fundamentos swift 3 visual engineering

WORKSHOP IOS - FUNDAMENTOS DE SWIFT 3

Swift es un intuitivo lenguaje de programación creado por Apple que permite diseñar apps para iOS, Mac, Apple TV y Apple Watch. Es uno de los lenguajes de programación de Apple para iOS y OS X con más futuro. Ahora la versión disponible para los developers es Swift 3.

Swift es un lenguaje rápido y eficaz que proporciona información a tiempo real y se integra a la perfección con Objective-C. Así los developers pueden ofrecer más seguridad, ahorrar tiempo y crear aún mejores apps.

Está pensado para dar a los developers más libertad que nunca. Como es público y de código abierto y tan fácil de usar, con Swift cualquiera puede ejecutar sus ideas.

Como Swift es un código prometedor, decidimos hacer un workshop de "Fundamentos de Swift 3", siendo el 3, como se ha comentado anteriormente, la última versión disponible para todos los developers. Nos los presentaron Alberto Irurueta y Pia Muñoz.

Podéis decargar la presentación aquí


react native parte nativa blog visual engineering

WORKSHOP: REACT NATIVE Y LA PARTE NATIVA

Con React Native, un framework de código abierto, se permite compilar aplicaciones escritas en JavaScript para Web, iOS y Android desde una única base de código, lo que significa que los desarrolladores pueden aprender un idioma único de programación y desplegar su software en las tres plataformas.

"Aprende una vez y escribe en cualquier lugar" es el lema con el que Facebook quiere hacer ver a los desarrolladores las bondades de su herramienta.

Entre las ventajas de React Native se encuentran:

  • La posibilidad de utilizar componentes nativos
  • La ejecución asíncrona
  • El sistema táctil TouchableHighlight
  • El modelo de diseño Flexbox
  • La API Polyfills
  • Creación de bibliotecas nativas reutilizables
  • Creación de módulos y vistas para Android y iOS

Si entramos más al detalle, una de las mejores características de este framework, es que si conoces un poco de las plataformas nativas iOS con Swift u Objective-C y Android con Java, es muy fácil crear tus propios módulos nativos para usar mas características nativas del dispositivo que aún no se encuentren incorporadas en el framework.

En nuestro último workshop de React Native quisimos ver toda la parte nativa, entre ellos refrescar sus componentes y además, conocer toda la parte de módulos nativos. Éste se llamaba "React Native: La parte nativa" y fue presentado por nuestros ingenieros Enrique Oriol y Alberto Irurueta.

Presentación para descargar: React Native- The native side


react native componentes blog visual engineering

WORKSHOP: REACT NATIVE Y SUS COMPONENTES

React Native, al igual que ReactJS pero enfocado a aplicaciones nativas para móviles, está orientado a un desarrollo totalmente modular, donde cada elemento de la interfaz es un componente distinto.

Eso significa que si tenemos una lista de elementos, la lista sería un componente, y cada elemento serian otros componentes distintos que a vez dentro de ellos pueden existir anidados muchos componentes más.

Facebook, la empresa que creó React, nos ofrece una serie de componentes para iOS y para Android para facilitar el trabajo a los desarrolladores. Son herramientas con mucha potencia pero a veces necesitan ser más personalizados. Gracias a la popularidad que ha tenido React entre los desarrolladores, es muy sencillo conseguir cualquier componente o solución debido a la basta comunidad que se ha creado.

React Native tiene un futuro muy prometedor, una excelente comunidad y sobre todo el respaldo de una gran compañía como Facebook.

Como nos podemos imaginar, el segundo workshop de React que hicimos fue "React Native y sus componentes" presentado por nuestros ingenieros Marc Torrent y Raúl Delgado.

Presentación para descargar: React Native- Components 


react native introducción blog visual engineering

WORKSHOP: INTRODUCCIÓN A REACT NATIVE

React Native es un framework de Facebook que te permite crear aplicaciones nativas para iOS y Android con JSX (JavaScript + HTML).

Su primera versión fue lanzada en Abril de 2015 en la que sólo contaba con soporte para iOS, hasta que en Septiembre de 2015 también la sacaron para Android.

React Native fue lanzada por los desarrolladores de React a raíz de la necesidad de un framework híbrido con un buen rendimiento para su aplicación móvil de gestión de anuncios.

Ahora, con React Native permite crear aplicaciones híbridas basadas en React y compilan a código nativo, mejorando el rendimiento enormemente comparado a otros frameworks para crear apps híbridas basados en Phonegap.

React Native funciona con Node y NPM, es decir, la base de la plataforma es puro JavaScript, como hemos mencionado al principio del post. Al tener a nuestro alcance todo el ecosistema de JavaScript esto nos permite tener esta ventaja ya que éste siempre está en constante crecimiento y ahorra a los programadores mucho trabajo ya que podemos encontrar un paquete para casi cualquier funcionalidad que queramos.

Es un framework con tal potencial que nosotros decidimos dedicar tres workshops a React Native, siendo el primero "Introducción a React Native" presentado por nuestro ingeniero Jordi Serra.

Presentación para descargar: React Native - Introduction

Antes de empezar a introducirse en React Native, aunque éste tenga aspectos más específicos de aplicaciones móvil, es importante dominar bien ReactJS ya que la base es la misma y se debería empezar por el principio. Descubre aquí el workshop de ReactJS.


aplicaciones web isomorficas reactjs blog visual engineering

WORKSHOP: APLICACIONES WEB ISOMÓRFICAS CON REACTJS

Las páginas web han evolucionado considerablemente en los últimos 20 años. Han pasado de ser páginas estáticas a aplicaciones web cuyo contenido se actualiza automáticamente (en real-time), sin la necesidad de que el usuario interactúe. Esta tendencia ha dado origen a las Single Page Applications (SPA).

Debido al auge en la creación de este tipo de sitios, se han creado numerosos frameworks MVC orientados a su creación. Esto facilitaba mucho su desarrollo pero a la vez generaba problemas y limitaciones que se pudieron solucionar con Isomorphic JavaScript.

Una aplicación en Isomorphic JavaScript no es más que una app que se puede ejecutar una misma pieza de código JavaScript en cliente y en servidor simultaneamente. Como hemos comentado desde el principio, el objetivo fundamental de React es el de simplificar el desarrollo de aplicaciones y el concepto de aplicaciones web isomórficas nos permite perfectamente esto. Estas son alguna de sus ventajas

  • Peso de archivos: Evita que se necesite mucho tiempo para descargar el código antes de utilizar la aplicación.
  • SEO: Permite tener un template engine en los dos ambientes. Es importante que la librería a utilizar tenga server side rendering para el SEO. 
  • Performance: es posible que el cliente recupere el estado con el cual el servidor envía el HTML procesado, sin necesidad de sobreescribirlo. Si a esto le añadimos que se ha solucionado el tema del peso de los archivos, la página carga más rápido. Además, no se verán comportamiento no deseados, como por ejemplo, que se vuelva a generar el DOM mientras el usuario esté interactuando con la aplicación.
  • Mantenibilidad: Al tener una pieza de código compartida en el cliente y en el servidor hace que nuestro código sea más mantenible, debido a que las modificaciones en un archivo afecta ambos ambientes (evitando la duplicación de código).

Para conocer más sobre estas aplicaciones hicimos un workshop de "Aplicaciones web isomórficas con ReactJS" que nuestro ingeniero Marc Torrent nos enseñó.

Presentación para descargar: Isomorphic Web Apps 


Testing en React y Redux visual engineering

WORKSHOP: REACTJS, TESTING EN REACT Y REDUX

Testear el código es crucial para mantener una buena base de código y asegurar que todo funciona correctamente.

Hace unos meses, Airbnb sacó un nuevo recurso, Enzyme. Se trata de una nueva librería de JavaScript útil para testear los componentes de React. Desde su creación, su recepción ha sido muy positiva, la cual ha sido altamente calificada y cuenta con más de 50 colaboradores, la gran mayoría fuera de Airbnb.

Un gran punto positivo de Enzyme es su trabajo directo con el Virtual Dom de ReactJS. Se renderizan los componentes directamente en el VDOM mediante herramientas de uso sencillo, lo cual favorece en la experiencia del testing.

Nosotros quisimos hacer un workshop de "Testing en React y Redux" para que nuestros ingenieros Cristina Hernández y Mario García nos informaran sobre Enzyme.


 

Presentación para descargar: ReactJS - React Testing.


middleware workshop visual engineering

WORKSHOP: REACT-REDUX: MIDDLEWARE / COMPONENTES DE MAYOR ORDEN

React se ha convertido por derecho un nuevo miembro de las teologías tecnológicas del momento en la escena de la UI y el desarrollo web. Como pudimos ver hace unos días, en el post del workshop de introducción a ReactJS, fue creado en el 2014 por los equipos de desarrollo de Facebook e Instagram, y presentado como un proyecto open-source en github y bajo licencia BSD. Más adelante también vimos el Patrón flux y React-Router y hoy hablaremos de Middleware.

El middleware es un software o conjunto de componentes desarrollados que sirven para integrar aplicaciones y plataformas, en el que en un ambiente heterogéneo donde interactúan distintas tecnologías, se encarga de comunicar e integrar los datos de diversa índole, haciéndolo de forma conectada o desconectada (asíncrona o síncrono).

Middleware simplifica el trabajo de los programadores en la compleja tarea de generar las conexiones y sincronizaciones que son necesarias en los sistemas distribuidos. De esta forma, se provee una solución que mejora la calidad de servicio, así como la seguridad, el envío de mensajes, la actualización del directorio de servicio, y mucho más.

Todas estas ventajas hicieron dedicar el workshop de "React-Redux: Middleware / Componentes de mayor orden" que nuestros ingenieros Enrique Oriol y Alex Adrià nos impartieron.

Presentación para descargar: ReactJS - Redux Advanced