2019/09/29

Vue Simple App: Sin webpack

Vue, Router, Vuex y Vuetify, pero sin webpack

[Actualizado el 2019/11/05: "Carga dinámica"]

Tal vez no tenga ninguna razón técnica importante para preferir prescindir de webpack al desarrollar una aplicación web.

Tal vez sea solamente nostalgia por los viejos tiempos, donde simplemente importabas librerías en la página y la magia podía aparecer.

Tal vez no sea mala idea tener esa capa extra que cargar en el viaje, y aceptarla a cambio de los caramelos que nos regala.

Pero a mi me molesta un poco.

Preferiría no tener que usarla si puedo evitarlo.

Siento que hay que tener cuidado cuando algo aumenta la complejidad. Mayor velocidad o comodidad pueden ser justificaciones. Pero hay que estar atentos a no limitar la diversidad de opciones.

 Una de las cosas que me gusta de Vue es que puedo empezar muy simple, importando la librería en la página. Y luego, si el problema lo amerita, ir escalando la solución hacia algo más y más complejo. Es como empezar descalzo si quiero, o con sandalias, e ir cambiando según lo amerite el terreno.

La mayoría de tutoriales parece estar de acuerdo en que usar vue create es la opción más práctica. Sin embargo, algo que descubrí es que también se puede llegar a elaborar soluciones relativamente complejas sin usar un transpilador.

Esta es una guía en un proceso de desarrollo simple que nos permita usar Vue, Router, Vuex y Vuetify, sin necesitar la complejidad extra de webpack.

HTML5

Un lugar simple donde empezar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5</title>
</head>
<body>
<h1>HTML5</h1>
</body>
</html>
view raw html5.html hosted with ❤ by GitHub

HTML5: https://codepen.io/akobashikawa/pen/NWKVazJ

HTML5 + Vue

Importar vue y desarrollar un script en la misma página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 + Vue</title>
</head>
<body>
<div id="app">
<h1>HTML5 + Vue</h1>
{{ hello }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
hello: 'Hello Vue!'
}
});
</script>
</body>
</html>
view raw html5-vue.html hosted with ❤ by GitHub

HTML5 + Vue: https://codepen.io/akobashikawa/pen/aborLgW

HTML5 + Vue + Router

Importar Vue Router para organizar la navegación.

Eso también nos empuja a organizar el contenido en componentes, si es que no lo hemos hecho ya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 + Vue + Router</title>
</head>
<body>
<div id="app">
<h1>HTML5 + Vue + Router</h1>
<p>{{ hello }}</p>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<div class="container">
<router-view></router-view>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var Home = Vue.component('home', {
data() {
return {
hello: 'Hello Home!'
};
},
template: `<div>
<h2>Home</h2>
<p>{{ hello }}</p>
</div>`
});
var About = Vue.component('about', {
data() {
return {
hello: 'Hello About!'
};
},
template: `<div>
<h2>About</h2>
<p>{{ hello }}</p>
</div>`
});
var router = new VueRouter({
// mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
var app = new Vue({
router,
data() {
return {
hello: 'Hello Vue!'
};
}
}).$mount('#app');
</script>
</body>
</html>
view raw html5-vue-router.html hosted with ❤ by GitHub
HTML5 + Vue + Router: https://codepen.io/akobashikawa/pen/qBWGVEp

HTML5 + Vue + Router + Vuex

Importar Vuex para compartir un estado general entre los componentes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 + Vue + Router + Vuex</title>
</head>
<body>
<div id="app">
<h1>HTML5 + Vue + Router + Vuex</h1>
<p>{{ hello }}</p>
<p>Counter: {{ counter }}</p>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<div class="container">
<router-view></router-view>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script>
var Home = Vue.component('home', {
data() {
return {
hello: 'Hello Home!',
};
},
template: `<div>
<h2>Home</h2>
<p>{{ hello }}</p>
<counter></counter>
</div>`
});
var About = Vue.component('about', {
data() {
return {
hello: 'Hello About!'
};
},
template: `<div>
<h2>About</h2>
<p>{{ hello }}</p>
<counter></counter>
</div>`
});
var Counter = Vue.component('counter', {
computed: {
...Vuex.mapState(['counter'])
},
methods: {
incCounter() {
this.$store.commit('incCounter', 1);
},
decCounter() {
this.$store.commit('decCounter', 1);
}
},
template: `<div>
Counter: {{ counter }}
<button @click="incCounter">+</button>
<button @click="decCounter">-</button>
</div>`
});
var router = new VueRouter({
// mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
var store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
incCounter(state, delta) {
state.counter += delta;
},
decCounter(state, delta) {
state.counter -= delta;
}
},
actions: {
}
});
var app = new Vue({
router,
store,
data() {
return {
hello: 'Hello Vue!'
};
},
computed: {
...Vuex.mapState(['counter'])
}
}).$mount('#app');
</script>
</body>
</html>
view raw html5-vue-router-vuex.html hosted with ❤ by GitHub
HTML5 + Vue + Router + Vuex: https://codepen.io/akobashikawa/pen/pozmdby

HTML5 + Vue + Router + Vuex + Vuetify

Para darle un look de app con Material Design.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>HTML5 + Vue + Router + Vuex + Vuetify</title>
<style>
[v-cloak]>* {
display: none
}
[v-cloak]::before {
content: "loading…"
}
</style>
</head>
<body>
<div id="app" v-cloak>
<v-app>
<v-navigation-drawer app v-model="drawer">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
Vue Simple App
</v-list-item-title>
<v-list-item-subtitle>
Menu
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense nav>
<v-list-item router to="/">
<v-list-item-icon>
<v-icon>home</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router to="/about">
<v-list-item-icon>
<v-icon>info</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>About</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app color="light-blue darken-1" dark>
<v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
<v-toolbar-title>HTML5 + Vue + Router + Vuex + Vuetify</v-toolbar-title>
</v-app-bar>
<v-content>
<v-card>
<v-card-text>
<p>{{ hello }}</p>
<v-badge>
<template v-slot:badge>{{ counter }}</template>
<v-icon>alarm_add</v-icon>
</v-badge>
</v-card-text>
</v-card>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
var Home = Vue.component('home', {
data() {
return {
hello: 'Hello Home!',
};
},
template: `<div>
<v-card>
<v-card-title>Home</v-card-title>
<v-card-text>
<p>{{ hello }}</p>
<counter></counter>
</v-card-text>
</v-card>
</div>`
});
var About = Vue.component('about', {
data() {
return {
hello: 'Hello About!'
};
},
template: `<div>
<v-card>
<v-card-title>About</v-card-title>
<v-card-text>
<p>{{ hello }}</p>
<counter></counter>
</v-card-text>
</v-card>
</div>`
});
var Counter = Vue.component('counter', {
computed: {
...Vuex.mapState(['counter'])
},
methods: {
incCounter() {
this.$store.commit('incCounter', 1);
},
decCounter() {
this.$store.commit('decCounter', 1);
}
},
template: `<div>
<v-card outlined>
<v-card-title>Counter</v-card-title>
<v-card-text>
<p>{{ counter }}</p>
</v-card-text>
<v-card-actions>
<v-btn text icon color="cyan" @click="incCounter">
<v-icon>add_circle</v-icon>
</v-btn>
<v-btn text icon color="red" @click="decCounter">
<v-icon>remove_circle</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>`
});
var router = new VueRouter({
// mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
var store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
incCounter(state, delta) {
state.counter += delta;
},
decCounter(state, delta) {
state.counter -= delta;
}
},
actions: {
}
});
var app = new Vue({
router,
store,
vuetify: new Vuetify(),
data() {
return {
hello: 'Hello Vue!',
drawer: false,
};
},
computed: {
...Vuex.mapState(['counter'])
}
}).$mount('#app');
</script>
</body>
</html>
view raw html5-vue-router-vuex-vuetify.html hosted with ❤ by GitHub
HTML5 + Vue + Router + Vuex + Vuetify: https://codepen.io/akobashikawa/pen/bGbyYod

Módulos

Cuando más componentes van apareciendo y el largo del archivo va haciendo complicada la edición, parece una señal para sacar el código javascript a otro archivo.

Javascript soporta import. Pero hay que usarla dentro de un módulo.

const About = Vue.component('about', {
data() {
return {
hello: 'Hello About!'
};
},
template: `<div>
<v-card>
<v-card-title>About</v-card-title>
<v-card-text>
<p>{{ hello }}</p>
<counter></counter>
</v-card-text>
</v-card>
</div>`
});
export default About;
view raw About.js hosted with ❤ by GitHub
import router from './router.js';
import store from './store.js';
// common
import Counter from './Counter.js';
var app = new Vue({
router,
store,
vuetify: new Vuetify(),
data() {
return {
hello: 'Hello Vue!',
drawer: false,
};
},
computed: {
...Vuex.mapState(['counter'])
}
}).$mount('#app');
view raw app.js hosted with ❤ by GitHub
const Counter = Vue.component('counter', {
computed: {
...Vuex.mapState(['counter'])
},
methods: {
incCounter() {
this.$store.commit('incCounter', 1);
},
decCounter() {
this.$store.commit('decCounter', 1);
}
},
template: `<div>
<v-card outlined>
<v-card-title>Counter</v-card-title>
<v-card-text>
<p>{{ counter }}</p>
</v-card-text>
<v-card-actions>
<v-btn text icon color="cyan" @click="incCounter">
<v-icon>add_circle</v-icon>
</v-btn>
<v-btn text icon color="red" @click="decCounter">
<v-icon>remove_circle</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>`
});
export default Counter;
view raw Counter.js hosted with ❤ by GitHub
const Home = Vue.component('home', {
data() {
return {
hello: 'Hello Home!',
};
},
template: `<div>
<v-card>
<v-card-title>Home</v-card-title>
<v-card-text>
<p>{{ hello }}</p>
<counter></counter>
</v-card-text>
</v-card>
</div>`
});
export default Home;
view raw Home.js hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>HTML5 + Vue + Router + Vuex + Vuetify</title>
<style>
[v-cloak]>* {
display: none
}
[v-cloak]::before {
content: "loading…"
}
</style>
</head>
<body>
<div id="app" v-cloak>
<v-app>
<v-navigation-drawer app v-model="drawer">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
Vue Simple App
</v-list-item-title>
<v-list-item-subtitle>
Menu
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense nav>
<v-list-item router to="/">
<v-list-item-icon>
<v-icon>home</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router to="/about">
<v-list-item-icon>
<v-icon>info</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>About</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app color="light-blue darken-1" dark>
<v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
<v-toolbar-title>HTML5 + Vue + Router + Vuex + Vuetify</v-toolbar-title>
</v-app-bar>
<v-content>
<v-card>
<v-card-text>
<p>{{ hello }}</p>
<v-badge>
<template v-slot:badge>{{ counter }}</template>
<v-icon>alarm_add</v-icon>
</v-badge>
</v-card-text>
</v-card>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="js/app.js" type="module"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
import Home from './Home.js';
import About from './About.js';
const router = new VueRouter({
// mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
export default router;
view raw router.js hosted with ❤ by GitHub
const store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
incCounter(state, delta) {
state.counter += delta;
},
decCounter(state, delta) {
state.counter -= delta;
}
},
actions: {
}
});
export default store;
view raw store.js hosted with ❤ by GitHub
Algo que ocurre con los módulos declarados normalmente, es que se carga toda la estructura de dependencias desde el inicio.

Para prevenirlo, y que cada módulo se pueda cargar cuando se necesita y no antes, se puede usar la técnica de declarar el componente como resultado de una función:

Antes:
import Counter from './Counter.js';
Después:
const Counter = () => import('./Counter.js');

Conclusión

Es posible desarrollar vue apps de relativa complejidad sin necesidad de usar webpack.

Me parece que este esquema puede simplificar el inicio de un proyecto. Aún cuando la versión para producción pueda requerir webpack para las optimizaciones, se podría usar esto durante el desarrollo.

¿Qué ventajas o desventajas ves hacerlo de este modo?, ¿te parece que puede facilitar la depuración?, ¿crees que en el futuro los navegadores carguen los scripts de un modo que no sea necesario empaquetarlos como actualmente?
Por No hay comentarios.:

2019/09/27

Ajedrez Mental

A menudo hay profesionales que discuten y resuelven problemas simplemente hablando. Incluso problemas muy complejos. Sin apoyarse en anotar algo en el papel o la pizarra que está a su lado.

Tal vez se vea un símbolo de status profesional. Un aviso de que somos lo suficientemente expertos para prescindir de esas herramientas.

Pero, de vez en cuando, te encuentras con alguien que sí las aprovecha y el resultado es notable.

Me parece que intentar resolver un problema solamente hablando es como jugar ajedrez mentalmente. Puede ser impresionante como show, pero tiene algunas desventajas para considerar:
  • Además de la tarea de buscar la mejor jugada, se gasta energia mental en mantener una imagen compartida del tablero.
    • Es más fácil que pierdas de vista una pieza
    • Es más difícil evaluar una posicion
    • Es más difícil explorar algo complejo, o arriesgado, o de mucha profundidad
  • Al no haber algo tangible, es más vulnerable a las relaciones de poder de los participantes
    • Es más fácil ceder ante el experto que insistir en tu punto de vista, aunque sientas que el experto está equivocado
    • Es difícil que alguien se anime a decirle al campeón que la posición de las piezas no es la que el dice
    • Hay expertos o campeones que pueden usar esto para intentar atarantar a quienes tienen menos poder

En cambio, al usar papel o una pizarra es como jugar ajedrez con un tablero físico
  • Visible para todos
    • Cualquiera que pase puede verlo y darse una idea de la situación
    • Es más fácil ver las piezas
  • Tienes más energía mental disponible
    • Es más fácil evaluar una posición
    • Es más fácil descubrir algo que no esperabas
    • Puedes explorar variantes más complejas o arriegadas
  • Puedes anotar las partidas y revisarlas luego
    • Aprender
    • Explorar variantes
  • Es menos vulnerable a las relaciones de poder
    • Con una prueba evidente, es más fácil rebatir a un experto o campeón que se haya equivocado

Pienso que usar anotaciones para apoyar una conversación o una explicación debería ser la regla y no la excepción.

Quizás habría que estar atento cuando alguien que pudiendo usar anotaciones no lo hace. Podría estar tratando de ocultar algo.

Por No hay comentarios.:

2019/09/14

Sobre desarrollo de software


La administración de la energía creativa sería la clave para un proyecto exitoso

Desarrollar software es un proceso que se viene descubriendo.

Hay quienes han intentado amoldarlo a un esquema como el que se sigue en la ingeniería o la arquitectura. Parece funcionar en algunos casos, pero no ha resultado satisfactorio siempre.

Aún hoy, décadas después de creada la ingeniería de software o las ciencias de la computación, a veces no es claro por qué un proyecto de desarrollo que parece bueno fracasa. O por qué uno que parece absurdo temina triunfando sobre todas las demás opciones.

Algo que hay que tener en cuenta es que el software no solamente debe correr en la computadora, sino en el sistema determinado por las personas que lo usen.

La ingeniería de software y las ciencias de la computación suelen concentrarse en cómo crear algoritmos que corran eficientemente en una computadora. La UX, o experiencia de usuario, se concentra en cómo sintonizar con las necesidades reales de las personas que usarán la solución que se desarrolla.

Desarrollar software no es como realizar una tarea, donde cada paso es sobre terreno conocido. Es más como resolver un problema. Es decir, es como avanzar por una curva cuyo curso no es evidente. Hay que recurrir a la experiencia pero también a la intuición. Como cuando se hace arte.

Me parece que la mejor manera de desarrollar software es iterádamente, iniciando con una base muy simple y luego ir evolucionando para alcanzar lo que se requiere.

Esto requiere un proceso de desarrollo que sea sostenible y escalable. Sostenible significa que se pueda repetir una y otra vez el ciclo de mejora. Escalable significa que puede soportar el siguiente estado de evolución del producto.

Muchos desarrolladores se preocupan mucho por si el producto es escalable. De si podrá soportar diez veces más usuarios, o cien veces más datos. Creo que más importante que la escalabilidad del producto es la escalabilidad del proceso para desarrollar el producto.

Creo que la razón principal por la que los proyectos de desarrollo de software a menudo fracasan es porque no logran formar un proceso de desarrollo escalable. Suelen usar un esquema de producción en línea, como en una fábrica donde cada pieza es conocida, en lugar de espiral, como en un laboratorio donde cada pieza se está ensayando sobre un diseño que se va descubriendo. Conforme la complejidad aumenta, distintas partes del proyecto van cayendo bajo su propio peso, hasta que todo colapsa. O sigue adelante con montones de parches y apuntalamientos de emergencia que hacen que no sea posible continuar con su evolución de manera clara.

Quizás esto se pueda ver mejor considerando que existe una energía creativa. Es la energía con la que se cuenta para convertir una idea en un producto de software.

Mientras no se llega a  un un producto concreto, la energía creativa va disminuyendo. Es como cuando un móvil se va empujando. Para que gane altura o gane velocidad, hay que gastar energía empujándolo contra la gravedad o la fricción. Cuanto más largo es el salto, más fuerza, velocidad y energía se requieren.

Pero cada vez que se llega a un producto concreto, ganamos un nuevo punto de apoyo para dar el siguiente paso desde allí. Esta energía permite ir por una siguiente versión. Es más fácil, y más sostenible, llegar al quinto escalón desde el cuarto que desde el primero.

Podemos ilustrar esto imaginando que el proyecto es como llevar una bola de nieve cuesta arriba. Al inicio, reunimos nieve de aquí y de acá y empezamos a rodar esa bola inicial fácilmente. Conforme la bola crece, va requiriendo más energía. Entonces llegamos a una pequeña meseta. Eso nos permite recuperar energía, apreciar lo que hemos recorrido y ver mejor cómo continuar. Luego seguimos subiendo, gastando energía hasta que lleguemos a la siguiente meseta, donde nos recuperamos. En el viaje, vamos decidiendo si necesitamos ayuda de más personas para seguir empujando la bola, despejando el camino, apuntalando, etc. Cada vez requerirá más energía poder avanzar y llegar a una meseta segura. Puede ser que esa meseta sea la cima, y el proyecto llegue así a buen término. Puede ser que no sea la cima pero una meseta cercana y aceptable. O puede ser que no se encontró una meseta a tiempo y, sin un apoyo adecuado ni energía para continuar, la bola se tuvo que soltar, yéndose cuesta abajo.

Versionado frecuente. Una buena estrategia es tener mesetas frecuentes. Es decir, sacar versiones completamente funcionales frecuentemente. No importa si es un paso corto si podemos continuar andando. Los pasos acrobáticos son un lujo que puede no ser sostenible. Los periodos de desarrollo largos que no concretan van consumiendo la energía riesgosamente.

Ir ligero (LEAN). Otra buena estrategia es mantener la bola en un tamaño manejable. Es decir, ir dejando atrás aquello que ya no es necesario para que siempre podamos avanzar con los recursos que tenemos.

Dividir y vencer. Otra buena estrategia es dividir el trabajo en varias bolas que lleguen a la cima. Es decir, poder separar el proyecto en partes independientes y fáciles de manejar que puedan ser conectadas luego.

Testing (TDD). Otra buena estrategia es apuntalar el avance de la bola. Es decir, contar con pruebas de código o de flujo que validen el estado del proyecto. Se pueden poner luego de que la bola ya alcanzó cierta posición pero suele ser mejor estrategia ponerlas primero y luego mover la bola hacia allí.

 Sinergia. Otra buena estrategia es rodar armoniosamente la bola. Es decir, que cada persona del equipo sintonice con el propósito del proyecto, y tenga la autonomía que le permita usar sus habilidades con maestría para colaborar en su realización.

La trampa del perfeccionismo. Una estrategia no muy buena es querer empezar con un montón de nieve demasiado grande. Es decir, requerimientos iniciales demasiado complejos, por número o por dificultad. Son más firmes las bolas de nieve que van creciendo y haciéndose redondas por su propio rodar. A menudo, querer empezar con algo que parezca perfecto para impresionar a los demás suele conducir a parálisis por análisis: el proyecto empieza a procrastinar, la energía creativa se diluye, y finalmente no despega.

La trampa de la temeridad. Otra estrategia no muy buena es ignorar la ayuda de apuntalamientos y confiar únicamente en el propio esfuerzo para mantener la bola en curso. Es decir, no tener pruebas que permitan verificar que se está donde se debe estar. Implementar pruebas requiere algo de energía creativa, pero luego permite ahorrar mucha más.

La trampa de la insensibilidad. Otra estrategia no muy buena es ignorar que quienes ruedan la bola son personas. Es decir, se cae en tentación de creer que bastan las herramientas, las técnicas o la infraestructura, o la capacidad de hacer algo, para que ese algo se pueda realizar, ignorando que hay un aspecto social, con una voz que debe ser escuchada y honrada. Hay redes de confianza que deben ser tejidas y mantenidas, para que las personas puedan realizarlo.
Hay proyectos con pendientes de dificultad muy llevaderos, donde parece que se puede ir con facilidad hacia cualquier dirección y se llega a la cima de un modo predecible.

Hay otros proyectos donde el terreno no es parejo, la nieve es irregular y sopla la ventisca.

Llevar exitosamente la bola de nieve a la cima no depende solamente de cuánta gente la empuja ni cuánta fuerza tenga. Depende de ser capaz de llegar oportunamente a las mesetas adecuadas. Es entender el terreno, el clima, la nieve, la gente, su fuerza, sus habilidades, y poder manejar todo eso.




Por No hay comentarios.:
Suscribirse a: Entradas (Atom)