Herramientas Frontend

David García

@d4vecarter

Carles Nuñez

@carlesnunez 

Aplicadas en entornos corporativos

Desarrollo Frontend desde el inicio de los tiempos

(a finales de los 90)

<html>

centric

Desarrollo Frontend

a finales de los 90

<html>

centric

https://www.omfgdogs.com/

Tooling desarrollo Frontend

a finales de los 90

<html>

centric

+

Tooling desarrollo Frontend

a finales de los 90

<html>

centric

+

=

Macromedia Dreamweaver

a finales de los 90

<html>

centric

+

Desarrollo Frontend

a finales de los 90

<html>

centric

html
estructura

css
estilos

javascript
comportamiento

Desarrollo Frontend

a finales de los 90

<html>

centric

html
estructura

css
estilos

javascript
comportamiento

Desarrollo Frontend

a inicios del 2000

vs

Desarrollo Frontend

a inicios del 2000

vs

Desarrollo Frontend

a inicios del 2000

vs

...meanwhile at ACME Corp

en los 2000

<html>

centric - Server Side Rendering

Desarrollo Frontend

2005 - 2008

+

Tooling desarrollo Frontend

a mediados del 2010

centric

+

Tooling desarrollo Frontend

a mediados del 2010

centric

+

Tooling desarrollo Frontend

a mediados del 2010

centric

+

Tooling desarrollo Frontend

a mediados del 2010

centric

+

Tooling desarrollo Frontend

a mediados del 2010

centric

+

¿Cual es el estado actual del
Tooling desarrollo Frontend?

centric

Tooling desarrollo Frontend

en la actualidad

Y los Frontend Developers...
¿Cómo podemos afrontar todo esto?

Javascript Fatigue

T-SHAPE

to the rescue!!!

T-Wat??

Conocer bien tu entorno y especializarte al máximo en ciertas tareas o tecnologías

Integración

En equipo, diferentes TShapes cubren todo el 'frontend spectrum'

testing

css-preprocessors

backend

build-tools

js-frameworks

core

rwd

js-preprocessors

complementándonos para trabajar como #oneteam

¿Son los Equipos TShape la solución definitiva?

SEARCH / FIND / CONTACT

Funnel

busca el patrón...

Inconvenientes en las implementaciones ad-hoc

Mismo problema resuelto
N veces de N formas diferentes

Se generan islas de conocimiento

vs

Inconvenientes en las implementaciones ad-hoc

Desarrolladores acoplados a su marketplace

=

=

Inconvenientes en las implementaciones ad-hoc

Desarrolladores acoplados a su marketplace

=

=

Inconvenientes en las implementaciones ad-hoc

Inconvenientes en las implementaciones ad-hoc

Diferencias entre code styling (tabs vs spaces)

Eficiencia limitada

Inconvenientes en las implementaciones ad-hoc

Implementaciones ad-hoc

inconvenientes de las

  • Mismo problema resuelto N veces

  • Se generan islas de conocimiento

  • Desarrolladores acoplados a su vertical

  • Diferencias entre code styling (code quality)

  • Caro de mantener

Alcanza

consenso rápido

  • Incluso si es erróneo y no te convence

  • Decide rápido, falla rápido

  • Las herramientas evolucionan

decidiendo la arquitectura

Convenciones a alto nivel

Primera iteración

Convenciones a alto nivel

Primera iteración

  1. Listar convenciones a establecer

  2. Priorizar en función de la importancia

  3. Establecer acuerdos en función de la escalabilidad

  4. Implicar al máximo número de desarrolladores que sea posible.

Convenciones a alto nivel

Convenciones a establecer

  • Libreria para crear interfaces
  • Preprocesador css
  • Es6 o es7
  • Strong or weakly typed javascript
  • Herramienta de 'bundelizado'
  • Linting rules

 

un buen análisis es básico

Convenciones a alto nivel

Priorizar en función de la importancia

todo es importante pero no quizás todo puede hacerse ya

  • Establecer acuerdos en función de la escalabilidad y perfil de los miembros de los equipos.
  • Pensar de forma racional, no emocional

 

Convenciones a alto nivel

Implicar al máximo número de desarrolladores

un linuxero camino del meeting

Implicar al máximo número de developers para que el consenso alcanzado tenga las máximas garantias de que se acabe aplicando

Ejemplo real

Problema a resolver: crear páginas de forma dinámica 

Crear páginas de forma dinámica

Consensos a establecer

  • Libreria o framework UI a usar

  • Arquitectura de la lógica de negocio

  • Estándar Javascript a usar

Ejemplo real

Problema a resolver: estilado CSS de la página

Estilado CSS de la página

Consensos a establecer

  • Preprocessor: sass/less/stylus…

  • Style guides: BEM, SMACSS, SUIT

  • Code quality: eslint

Problem solved?

No todavia!

Problem solved?

No todavia!

Mantenimiento de las convenciones

Problem solved?

No todavia!

Lentitud para aplicar convenciones en nuevos portales

Generadores de Boilerplate

- Yeoman, etc..

 

- Aportan inmediatez pero

generan deuda técnica

 

Haciendo nuestras aplicaciones más mantenibles

SUI-TOOLS al rescate!

Qué són las sui-tools?

Conjunto de paquetes de código abierto cuyo objetivo es facilitar el desarrollo de componentes y aplicaciones web

Qué nos proporcionan?

  • Workflow unificado y actualizable
  • 1 herramienta soluciona 1 problema
  • Cada cambio es gestionado por cada paquete
  • Menos boilerplate y abstracción de complejidad

¿Qué puede hacer una sui-tool?

Una tool puede:

  • Envolver una tool existente por motivos de desacople

  • Crear una funcionalidad nueva que puede ser usada por cualquier proyecto.

  • Envolver un paquete existente añadiendo nuevas funcionalidades

  • Envolver un paquete existente buscando abstraer a los proyectos de la API existente.

Ejemplo real

Config y mantenimiento del linting 

Configuracion y mantenimiento del linting​ 

Problemas a resolver

  • Cambios en reglas de .eslintrc

  • Gestión de evolutivos y cambios en las versiones del linter

  • Gestionar incluso un cambio en el linter que se usa

Configuracion y mantenimiento del linting​ 

Features de la tool

  • Una config

  • Comandos de terminal para ejecutar el linter
    > sui-lint js && sui-lint sass

  • Manejar la versión e incluso el paquete de linting que usamos

Conclusiones

  • Try fast fail fast

  • No tengas miedo a las iteraciones

  • Una tool siempre puede mejorarse

  • Involucra al máximo numero de desarrolladores en el proceso

Gracias por venir

Copy of FE Tools

By Carles Nuñez Tomeo