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
¿Son los Equipos TShape la solución definitiva?
🥘
Arroz 🍚
Pollo 🐤
Conejo 🐰
Tomate 🍅
Aceite de Oliva 🕊
¡Equipo! ¡Haced una web!
🕵️♂️
busca el patrón...
Todos son un marketplace 🛒
Search 🔎 → Find 👀 → Contact 📩
🥘
¿Cómo desarrollaremos nuestra 🥘?
Opción 1️⃣ Soluciones ad-hoc
* ad-hoc: que cada uno va a su bola
Mismo problema resuelto
N veces de N formas diferentes
Opción 1️⃣ Soluciones ad-hoc
Inconvenientes 👎
Islas de conocimiento 🏝
Opción 1️⃣ Soluciones ad-hoc
Inconvenientes 👎
Opción 1️⃣ Soluciones ad-hoc
Inconvenientes 👎
Desarrolladores acoplados a su marketplace
=
=
Diferencias entre code styling (tabs vs spaces)
Opción 1️⃣ Soluciones ad-hoc
Inconvenientes 👎
Opción 2️⃣ Converger #oneTeam
Opción 2️⃣ Converger #oneTeam
Convenir una arquitectura mínima común
Opción 2️⃣ Converger #oneTeam
Buscar problemas compartidos
👩🏼💻👨🏾💻👨🏻💻👩🏿💻👨🏼💻👩🏾💻
Opción 2️⃣ Converger #oneTeam
Ejemplo de repositorio con múltiples configuraciones para diferentes herramientas
Opción 2️⃣ Converger #oneTeam
Transpilación
JS Linter
SASS Linter
Bundler
Opción 2️⃣ Converger #oneTeam
Crear herramientas que solucionen los problemas comunes
🦸♀️ SUI Tools
Opción 2️⃣ Converger #oneTeam
SUI Tools
· Código abierto 🔓
· Una herramienta, una solución 🔧
· Facilita el desarrollo ⚡️
· Elimina el boilerplate 🔥
· Unix Philosophy 🐧
Ejemplo real
@s-ui/lint
#0CJS
Sean Larkin talking at the JSCamp about what zero config means in terms of Developer Experience
La abstracción nos permite evolucionar rápido
ESTO SUENA DEMASIADO BIEN
¡ALGÚN INCONVENIENTE HABRÁ!
Opción 2️⃣ Converger #oneTeam
Inconvenientes 🤔❓
Falta de ownership
Opción 2️⃣ Converger #oneTeam
Inconvenientes 🤔❓
Indecisión
Opción 2️⃣ Converger #oneTeam
Inconvenientes 🤔❓
Las opiniones son como los culos.
Cada uno tiene el suyo.
Clint Eastwood
¿Pero...
ha valido la pena?
Pregunta del millón 💰
