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
-
Listar convenciones a establecer
-
Priorizar en función de la importancia
-
Establecer acuerdos en función de la escalabilidad
-
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
Copy of FE Tools
- 390