¿Qué es DevOps?

¿Alguna vez has escuchado hablar sobre DevOps? existen varios puntos de vista sobre el término DevOps ( Develop / Operations ), pero la gran mayoría coinciden en que es una cultura que promueve la comunicación entre el departamento de desarrollo (Development) y el departamento de Administración de sistemas (Operations). 

La cultura DevOps tiene como objetivo acelerar la entrega de software de manera ágil asegurando la calidad del software, todo esto, por medio de buenas prácticas, herramientas de integración de código, pruebas automatizadas, administración de infraestructura, etc.

Las prácticas más populares de la cultura DevOps son las siguientes:

Infraestructura como código: Infraestructura como código es un método de automatización que está basada en prácticas de desarrollo de software. Los cambios realizados a los sistemas y sus configuraciones específicas son bien definidas y capturadas en archivos de configuración (scripts, playbooks, manifests, módulos).

Integración continua ( CI ): La integración continua es una práctica de desarrollo de software mediante la cual los desarrolladores combinan los cambios en el código en un repositorio central de forma periódica, tras lo cual se ejecutan versiones y pruebas automáticas.

Entrega continua ( CD ): La entrega continua es una práctica de desarrollo de software mediante la cual se preparan automáticamente los cambios en el código y se entregan a la fase de producción.

Herramientas DevOps más populares: Red Hat Ansible, Jenkins,Terraform, Chef, Docker, GIt, GitLab, Kubernetes, Nagios, Puppet.

DevOps en BigPink

Nosotros en BigPink adoptamos una cultura DevOps que va desde la configuración de los proyectos, testing y pruebas de integración de código hasta entornos automatizados con despliegue continuo ( continuous delivery ), para ello, implementamos las siguientes practicas y herramientas:

Configuración de proyectos: Todos los proyectos son configurados con GIT como sistema de control de versiones de software, así como el uso estricto de linters para detectar errores de estilo y mantener el código limpio.

Infraestructura como código (IaC): Toda la infraestructura la manejamos como código por medio de configuración de plantillas cloud formation para Amazon Web Services. 

Integración continua (CI): Para la integración del código utilizamos GitLab como plataforma de repositorios privados en donde por medio de Pipelines ejecutamos varias pruebas (build, linters, testing, etc.) para asegurar la calidad antes de que el código sea integrado en el repositorio central.


Entrega continua (CD): Para lograr la entrega continua se automatiza el despliegue de nuestros proyectos por medio de Pipelines programadas en GitLab que se conectan a nuestra infraestructura previamente montada en Amazon Web Services, una vez pasadas las pruebas de integración del código.

Edgar Leyva
www.girasolo.com
www.ThinkBigPink.com

Páginas con React.

Construye páginas, más rápidas y con mejor experiencia de usuario gracias a React y su virtual dom.

React es una biblioteca de JavaScript para construir interfaces de usuario basada en la creación de componentes; su principal característica es el Virtual DOM que es una copia en memoria del DOM real, este Virtual DOM se encarga de hacer actualizaciones hacia el DOM real (La interfaz gráfica que ve el usuario) de manera atómica gracias a su librería diferencial capaz de detectar los cambios que existen en ambos DOM y poder renderizar solo los elementos que han cambiado.

Funcionamiento del Virtual DOM de Reactjs

Con este render atómico react proporciona una UX superior a cualquier Framework o librería para front, asi como un mejor performance al solo renderizar los cambios y no el componente entero dando una sensación de fluidez en tiempo real de la aplicación web.

En Girasolo buscamos la innovación en la tecnología para ofrecer mejores resultados en todos nuestros proyectos, por ello esta vez decidimos implementar react en uno de los nuevos proyectos del área: la página oficial de BigPink(nuestro spin off).

Inicio Página Big Pink
Extracto de la página en su versión Inglés.

Obteniendo como resultado un sitio web ligero para el usuario, que renderiza al instante la información además de ofrecer otras características atractivas para el cliente como: el intercambio de props con lo cual se puede reducir considerablemente el código ya que los componentes son reutilizables, el multilenguaje en la aplicación con lo cual tu sitio web esta un escalón más arriba en los estándares de Ux, además, react es isomorfico lo que significa que: con el mismo código, somos capaces de renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como Google, con la misma base de código se le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como una aplicación web tradicional que renderice del lado del servidor, como es el caso de un desarrollo tradicional o un desarrollo basado en un CMS como WordPress, todo esto gracias a Nodejs.

Extracto de la página en su versión Español.

En conclusion React nos permite un desarrollo ágil, ordenado y con una arquitectura mantenible, focalizada en componentes y que nos ofrece un gran performance.

A continuación, se muestra un poco de lo que se logró realizar con ente framework.

Conoce nuestro sitio web: https://www.thinkbigpink.com/

Si quieres conocer por qué nos llamamos BigPink conoce la histora en nuestra entrada anterior.

Cecy Pérez
cecy@girasolo.com
www.girasolo.com
www.ThinkBigPink.com

Naming – BigPink

Un buen nombre, debe tener historia, debe ser recordable, debe ayudarnos a generar el concepto de comunicación.

Ya en el pasado te había platicado acerca de: la importancia del naming, cómo una buena marca, afecta a la percepción general y futuro éxito de la compañía, hoy te platicaré de BigPink un spinoff de Girasolo, cómo surgió, y cuál fue el proceso para selección de nombre.

Web BigPink http://www.thinkbigpink.com

Desde el inicio, este fue un proceso diferente, ya, a inicios del 2019 habíamos decidido que el área de tecnologías de información llevaría un nombre diferente, la decisión se da principalmente por dos factores:

  1. Aunque la cultura organizacional es similar, en el fondo es diferente.
  2. La más importante; el cliente final es bastante diferente, y aunque la base de clientes fue la misma que se tenían en Girasolo quién nos atendía era diferente, hablaba diferente, y, por lo tanto, deberíamos presentarnos diferente a una agencia de branding y comunicación.

Ya que no teníamos un cliente concreto (nosotros, toda el área éramos el cliente), y tampoco teníamos fechas concretas, abordamos el proceso de una manera distinta, lo que, por un lado, alargó el proceso de naming (casi 45 días para tener una propuesta), por el otro lado, ayudó a nutrir el concepto de marca y diseño, derivando en complementos de comunicación visual, que actualmente se utilizan en la marca, (colorimetría, símbolos, etc.). 

Durante 30 días en uno de los pizarrones de la oficina se fueron acumulando nombres que los integrantes del equipo fueron creando, algunas traían inspiración la marca empresa madre: Girasolo, otras más, la actividad de la nueva empresa: Desarrollo y Tecnologías de la información, y otras tantas no tenían (a la vista) una inspiración concreta,  después, se invitó a todos quienes participaron con nombres a hacer un pitch  ¿Por qué su idea debería ser la ganadora y bautizar a toda la empresa? A dicho pitch, fueron invitadas personas del área de Girasolo, concretamente nuestra directora de Diseño, y nuestro encargado multimedia.

Se seleccionó como ganador la propuesta de BigPink¸ algunos de los factores que ayudaron a escoger esta propuesta fueron:

  • Una marca jovial, que represente a quienes la integran.
  • Una marca fácil de pronunciar (y de recordar) y si no es fácil de recordar, nos recordarían por color, los rosas.
  • Una marca que representa nuestros orígenes, La Piedad Michoacán, en otros tiempos capital del cerdo; y cuando uno describe un cerdo, lo describe así, es un animal, grande y rosa.
Diferencial semántico, extracto de presentación de Pitch sobre naming: BigPink

Además del concepto de marca, otra de las cosas que ayudaron a triunfar a esta propuesta fue su concepto de comunicación (aunque no tenía logo e imagen aún), se presentó la propuesta con algunos colores que conformarían el diseño final, dichos colores (salvo el negro, KEY), fueron seleccionados a partir de RGB y no a partir de pantones o CMYK, sin embargo, son desviaciones de CMY, lo que ayudó a dar un concepto poderoso, nacimos digitales, pero venimos de una empresa de diseño, haciendo notar así, nuestra fortaleza, hacemos cosas funcionales, pero visualmente atractivas. (en ocasiones incluso en nuestra papelería corporativa, pueden verse cuadros en nuestros colores, simulando una guía de impresión).

Presentación corporativa, donde se muestran: forma de usos y colorimetría en General.

Parte esencial de un pitch poderoso, es hacer que tu audiencia se imagine lo mismo que tú, y convencer a un grupo de ingenieros, a que su marca y colores corporativos fuese el ROSA, era una tarea complicada, por lo que se invitó a los asistentes a imaginar estar en un congreso de TI, que se imaginaran los stands, la publicidad, y como están integrados, y de repente, entre todos los stands, vean uno color rosa, uno que sobresaldría por puro color, la imagen fue tan poderosa, que ayudó a que muchos votaran por esta propuesta.

Página de contacto al final de las presentaciones.

Think Big, think BigPink |

@ChenBrimac
chen@girasolo.com
www.girasolo.com
www.ThinkBigPink.com