BackboneJS patrones mvc visual engineering

WORKSHOP: BACKBONEJS Y PATRONES MVC

Cada vez más, la interfaz de la web está adquiriendo más importancia en el desarrollo de la web. El dinamismo, la usabilidad, la velocidad, entre otros factores, son cada vez más importantes para atraer a los usuarios y lograr objetivos de negocio.

De ese modo, herramientas como jQuery están adquiriendo gran importancia ya que para lograr esa interfaz, no sólo agregan dinamismo, sino que también aceleran la interactividad entre usuarios y navegadores.

Sin embargo, esa herramienta lleva una enorme cantidad de trabajo y el código resultante puede ser muy difícil de mantener. Y es por ello, que han salido herramientas como BackboneJS, AngularJS y EmberJS para proveer una organización de código más conveniente y mantenibleLogran mayor productividad a la hora de construir la interfaz de una web, por medio de la implementación del conocido patrón MVC, aunque en este caso, del lado del cliente.

En definitiva, BackboneJS es una herramienta de desarrollo de JavaScript que está diseñada para desarrollar aplicaciones de una única página y para mantener las diferentes partes de las aplicaciones web sincronizadas.

En vista de todas esas ventajas, quisimos primero hacer un workshop de "BackboneJS y patrones MVC" que nuestro ingeniero Andrés Lamilla nos impartió. Más adelante explicaremos las siguientes herramientas.

 

Presentación para descargar: BACKBONEJS Y PATRONES MVC


SINGLE PAGE APPLICATIONS workshop visual engineering

WORKSHOP: SINGLE PAGE APPLICATIONS (SPA)

Las Single Page Applications, o SPA, son aplicaciones web que se ejecutan en una única página, logrando que el usuario tenga una experiencia parecida a la que tuviese al interactuar con una aplicación de escritorio. Para crear una SPA se utiliza JavaScript, Ajax, HTML5 o una combinación de las anteriores.

Las SPA surgieron de la necesidad de mejorar la experiencia de usuario y el flujo de trabajo. Con las aplicaciones tradicionales, cada vez que el usuario ejecutaba alguna operación, la página web se debía recargar de nuevo y eso suponía un tiempo de espera que, no sólo dependía de la calidad de la web y de los servidores, sino que también de la conexión disponible a Internet y de las características técnicas de su propio ordenador. Todos estos problemas se resuelven con la SPA, porque ésta no requiere recargar la web cada vez que se ejecute una interacción.

Además, una SPA bien programada y que cumpla con los estándares de calidad y con la normativa de accesibilidad, por mucho que se escuche lo contrario, no perjudica en absoluto el SEO. 

Dadas todas esas ventajas, decidimos realizar un workshop de "Single Page Applications" que nuestro ingeniero Marc Torrent nos impartió y el workshop de "Templating: Handlebars y DustJS" de nuestro ingeniero Alex Adrià.

Presentaciones disponibles para descargar:


herramientas de diseño blog visual engineering

WORKSHOP: HERRAMIENTAS DE DISEÑO

Uno de los aspectos fundamentales al crear una web o una app es el diseño. Sin duda es una de las partes más creativas del proyecto, la parte responsable de crear una web con un aspecto externo atractivo, capaz de suscitar el interés y de llamar la atención del público objetivo.

Además de los anteriores requisitos, la web debe tener en cuenta los gustos, el concepto y preferencias del cliente. Son tan importantes estas condiciones, que nosotros quisimos crear este workshop para refrescar el conocimiento de todas las herramientas de diseño posibles para conseguir, e incluso superar, las expectativas de nuestros clientes.

Por ese motivo, nuestros diseñadores Toni Camí y Jorge López nos hicieron el siguiente workshop de "Herramientas de diseño".

Presentación para descargar: Workshop Designer Tools 


testing en javascript visual engineering

WORKSHOP: TESTING EN JAVASCRIPT

Siempre que se programe código, ya sea JavaScript u otro, se debe testear todo antes de presentar la solución al cliente.

Además, éstas pruebas proporcionan ventajas como: facilitan cambios en la aplicación, simplifican la integración, documentan el código, ayudan a tener un código desacoplado, los errores están más acotados y aceleran el desarrollo. 

Como nosotros le damos mucha importancia al test, dado que queremos ofrecer lo mejor a nuestros clientes, nuestros ingenieros Mario García y Raúl Delgado nos hicieron un workshop de "JavaScript Testing".

Presentación disponible para descargar: JavaScript Testing


nodejs workshop visual engineering

WORKSHOP: NODEJS. FRAMEWORK EXPRESS Y MONGODB

NodeJS es un entorno Javascript del lado del servidor. Node ejecuta Javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome.

Ha llegado al punto de ser uno de los actores que, junto con HTML5, ha provocado que JavaScript gane gran relevancia en los últimos tiempos. El motivo es que ha conseguido llevar el lenguaje JavaScript a nuevas fronteras, como es el trabajo del lado del Back End. A nivel de desarrollo, se reduce la curva de aprendizaje para los desarrolladores de Front End, ya que están habituados a trabajar con este lenguaje.

Dado su gran papel decidimos hacer un workshop "NodeJS. Express Framework & MongoDB" que nuestros ingenieros Cristina Hernández y Albero Irurueta nos impartieron.

Presentación para descargar: Node.js, Express & MongoDB 


herramientas de javascript visual engineering

WORKSHOP: HERRAMIENTAS DE JAVASCRIPT

Una vez vista la importancia del JavaScript, teníamos que entrar al detalle y ver algunos instaladores de paquetes y algunas de sus herramientas, de las cuales algunas son ideales para trabajar con grandes proyectos como la SourceTree, una herramienta efectiva porque es uno de los mejores clientes GUI para manejar repositorios git.

Dado que es recomendable trabajar con SourceTree por su cómoda interfaz gráfica y con git por las múltiples funcionalidades que ofrece, nuestros ingenieros Raúl Delgado y Marc Torrent, nos hicieron un workshop de "Herramientas de JavaScript" para explicarnos la funcionalidad de todas estas herramientas.

Presentación para descargar: Javascript Build Tools 


patrones de diseño en javascript blog visual engineering

WORKSHOP: PATRONES DE DISEÑO EN JAVASCRIPT

Javascript cada vez más está tomando más fuerza en el mercado y cada vez más los desarrolladores empiezan a apreciar su importancia y su potencial.

Tanto es la importancia del lenguaje en sí como de los patrones de diseño y por ello, nuestro ing. Marc Torrent nos dedicó un workshop de "Patrones de diseño en JavaScript" para enseñarnos todos los conocimientos aplicables a todos los frameworks modernos de JavaScript.

Presentación disponible para descargar: Workshop Javascript Design Patterns


BUENAS PRÁCTICAS DE JAVASCRIPT workshop visual engineering

WORKSHOP: BUENAS PRÁCTICAS DE JAVASCRIPT

JavaScript hoy en día es muy importante ya que cualquier sitio en Internet requiere el uso de este lenguaje para crear entornos dinámicos y llamativos.

JavaScript es más complejo de lo que mucha gente cree. Es cierto que se pueden programar algunas cosas pero cuando requieren complejidad ya se necesitan unos conocimientos más avanzados. Por ello, nuestro ingeniero Mario García nos enseñó "Buenas prácticas de JavaScript", para poder ofrecer lo mejor a nuestros clientes.

Presentación disponible para descargar: Good-Practices-in-Javascript.-Regular-Expressions.-Scopes-Closures.-Memory-Leaks 


frontend blog visual engineering

WORKSHOP: VISTA GENERAL DE FRONTEND

FrontEnd y BackEnd son términos que se refieren a la separación de intereses entre una capa de presentación y una capa de acceso a datos, respectivamente. En diseño de software el FrontEnd es la parte del software que interactúa con los usuarios y el BackEnd es la parte que procesa la entrada desde el primero.

Éste está orientado a lenguaje de marcas y al lenguaje de programación web de ejecución en equipos clientes, sin necesidad de uso de servidores externos. Casi todo lo que ves en la pantalla cuando accedes a una web es desarrollo frontend, la estructuración de los apartados, tamaños, márgenes entre estructuras, tipos de letra, colores, adaptación para distintas pantallas, los efectos de ratón, teclado, movimientos, desplazamientos, efectos visuales… Es decir, el FrontEnd es el responsable de dar formato a contenidos, del desarrollo del aspecto de la web y de manipular resultados de datos obtenidos.

El FrontEnd es el máximo responsable del tiempo de carga, el responsable de que un usuario vea la usabilidad de la web y decida navegar en ella o irse. Por ello, se juega un gran papel y es muy importante estar al día para poder optimizar los procesos.

Decidimos primero ver la evolución del Front End para poder analizar hacia dónde vamos, antes de exponer todas y cada una de las terminologías implicadas. El ingeniero Marc Torrent fue el encargado de dar inicio con la presentación; "Vista general del FrontEnd: pasado, presente y futuro del desarrollo web FrontEnd". 

Presentación disponible para descargar: FrontEnd-General-Overview


logo visual blog

Presentando una nueva iniciativa: WORKSHOPS DE VISUAL ENGINEERING

Una de nuestros compromisos como empresa es brindar a nuestros clientes desarrollos dentro de las últimas tecnologías que existen en el mercado y para ello ofrecemos a nuestros empleados las herramientas y ayudas para estar al día.

El objetivo de estos workshops es comparar las tecnologías existentes y compartir el conocimiento entre todos nuestros desarrolladores. Además de crear la directiva de desarrollo unificado dentro la empresa y los diferentes equipos.

Decidimos comenzar con los workshops de FrontEnd y los temas que trataremos son:

Seguidamente hicimos los siguientes workshops de iOS:

En las siguientes entradas podréis ver el contenido de cada uno de los workshops. ¡No lo perdáis de vista!