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 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

a finales de los 2000

+

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?

T-SHAPE

to the rescue!!!

T-SHAPE

Conoce tu entorno y especialízate en hacer muy bien sólo algunas de ellas

mejor conocimiento

bundleling - testing - automatización...

T-SHAPE

En equipo, diferentes TShapes cubren todo el Frontend Spectrum

Schibsted #oneteam

¿Son los Equipos TShape la solución definitiva?

SEARCH / FIND / CONTACT

funnel

mismo funnel resuelto n veces

Implementaciones ad-hoc

inconvenientes de las

  • Mismo problema resuelto N veces

  • Se generan islas de conocimiento

  • Desarrolladores acoplados a su marketplace

  • Diferencias entre code styling (code quality)

  • Caro de mantener

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

Convenciones a alto nivel

Primera iteración hacia el FE tooling:

  • Listar problemas a resolver

  • Priorizar en función de importancia

  • Establecer acuerdos en función de la escalabilidad

  • Implicar al máximo número de devs

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

FE Tools

By David Garcia

FE Tools

  • 421