Init.

js: Una gua de los Por Qu y Cmos en el

conjunto de tecnologas de JavaScript
La Historia
Entonces, t y tu cofundador tienen esta genial idea para un negocio, verdad?
Has estado agregando caractersticas en tu cabeza.
Frecuentemente, le preguntas a tus potenciales clientes sus opiniones, y todos ellos la aman.
Ok, entonces la gente la quiere. Hay hasta un poco de dinero para hacer. Y la nica razn por la
cual ellos no pueden obtenerla es porque no las has implementadotodava.
Entonces, finalmente, te sientas un da y dices Hagmoslo!. Pronto, ests tratando de averiguar
cmo aplicar la lgica de negocio de tu aplicacin, la funcionalidad asesina que va a llevar adelante
al producto: tienes una idea de cmo hacerlo, y ahora sabes que puedes hacerlo.
Listo!Funciona! dices. Tu prueba de concepto es un xito! Todo lo que queda por hacer es
empaquetarlo en una aplicacin web.
Ok, hagamos el sitio, dices.
Y entonces, te das cuenta de la verdad: necesitas elegir un lenguaje de programacin; necesitas
elegir una plataforma (moderna); necesitas elegir algunos frameworks (modernos); necesitas
configurar (y comprar) espacio, base de datos y proveedores de alojamiento; necesitas una interfaz
de administracin; necesitas un sistema de permisos; necesitas un administrador de contenidos.
Quieres ser escueto, quieres ser gil. Quieres usar tecnologas que te ayudaran a tener xito en
el corto-y largo-plazo. Y no son siempre fciles de elegir
Tienes que tomar decenas y decenas de decisiones de arquitectura . Y quieres tomar las correctas:
quieres usar tecnologas que te permitan desarrollo rpido, iteracin constante, mxima eficiencia,
velocidad, robustez y ms. Quieres ser escueto, quieres ser gil. Quieres usar tecnologas que te
ayudaran a tener xito en el corto-y largo-plazo. Y no son siempre fciles de elegir.
Estoy abrumado, dices, mientras te vas sintiendo abrumado. Tu energa no es la misma de antes.
Tratas de encajar las piezas, pero es demasiado trabajo.
Tu prueba de concepto se marchita y muere lentamente.

La Propuesta
Luego de abandonar toneladas de ideas de esta forma, decid disear una solucin. La llamo el
proyecto Init (Inicio)( init.js).
El corazn de la idea es tener un simple proyecto que inicie todos los dems, dejar que el
desarrollador o el fundador tcnico tomen esas decisiones al mismo tiempo y recibir una plantilla
apropiada para empezar basada en esas decisiones. Se lo que van a decir los detractores, Una
solucin no puede aplicarse a todos los problemas (Odiadores odiarn). Y puede que estn en lo
cierto. Pero podemos hacer nuestro mejor esfuerzo para crear una solucin aproximada, y creo
que Init se acerca bastante.
Para lograr mejor este objetivo, tenemos que tener algunas ideas claves en mente. Cuando estaba

desarrollando Init, consider:

Componentes
La modularizacin es una caracterstica clave de cualquier sistema ya que te permite reusar
componentes de software a travs de distintos proyectoslo cual es el principal objetivo
de Init. Pero la modularizacin tambin viene con una reemplazabilidad por producto, la cual
ser nuestra mejor aliada a la hora de atacar varios tipos de problemas con casi la misma
solucin.
Facilidad de Desarrollo
Para algunos problemas, en algn lado hay una mejor solucin escrita
en [Brainf*ck](http://en.wikipedia.org/wiki/Brainfuck). jodecerebros). Pero implementar esa
solucin (en Brainf*uck) sera casi imposible de escribir, y mucho menos de leer. Te costara
tiempo y una enorme cantidad de esfuerzo. En general, deberas usar lenguajes y plataformas
que hagan al desarrollo fcil, y no difcil para t (o alguien que puede trabajar con l ms tarde).
Comunidad
Cualquier plataforma que elijas, asegrate que tenga una gran comunidad, y una que te pueda
ayudar con los problemas ms comunes y con los que no lo son tanto. Recuerda: jQuery puede
no ser la librera ms rpida, la ms limpia, o la ms elegantepero es un ganador slo por
su comunidad.
Teniendo estos objetivos en mente, voy a mostrarte como hice mis propias decisiones al crear Init.
En su ncleo, Init se aprovecha del paradigma full-stack JavaScript (algunas personas se refieren a
l, o a una parte de l, como el MEAN Stack). Al trabajar con este conjunto, Init es capaz de usar
solamente un slo lenguaje mientras crea un ambiente increblemente flexible y con todas las
funciones para desarrollar aplicaciones web. En resumen, Init te permite usar JavaScript no
solamente para desarrollo del lado cliente y servidor, pero tambin para construir, testear, maquetar,
y ms.

Pero bajemos un poco la velocidad y preguntmonos: es realmente una buena idea usar JavaScript?

Por qu eleg JavaScript

Soy desarrollador web desde 1998. Por esas pocas usabamos Perl para la mayora de nuestro
desarrollo del lado del servidor, y an desde esos tiempos tenamos JavaScript del lado del cliente.
Las tecnologas web del lado servidor han cambiado inmensamente desde entonces: fuimos a travs
de oleada tras oleada de distintas tecnologas y lenguajes cmo PHP, ASP, JSP, .NET, Ruby,
Python, solo por nombrar algunas. Los desarrolladores comenzaron a darse cuenta que usando dos
distintos lenguajes para ambientes cliente y servidor estaba complicando las cosas. Los intentos
iniciales para unificar bajo un mismo lenguaje intentaban crear componentes cliente del lado del

servidor y compilarlos en JavaScript. Esto no funcionaba como se esperaba y muchos de esos

proyectos fallaron (por ejemplo, ASP MVC reemplazando los formularios web de ASP.NET, y
podra decirse que GWT ser reemplazado por Polymer). en un futuro cercano). Pero era una
excelente idea, en esencia: un lenguaje nico en el cliente y el servidor, permitindonos reusar
componentes y recursos (esta es la clave: recursos).
La respuesta era simple: usar JavaScript en el servidor.
De hecho, JavaScript naci con JavaScript Server Side en Netscape Enterprise Server, pero el
lenguaje simplemente no estaba listo en esa poca. Luego de aos de prueba y
error, Node.js finalmente emergi, lo cual no solo puso a JavaScript en el servidor, pero adems
promovi la idea de programacin no-bloqueante, cambiando la forma en la que escribimos
fread(I/O) para siempre (lee ms aqu.
Pero esas ideas no eran nuevasentonces, por
En una oracin: la programacin noque se volvieron tan populares con Node.js?
bloqueante apunta a poner tareas que
Simple, la programacin no-bloqueante puede
consumen tiempo a un lado, usualmente
ser alcanzada de distintas formas. Tal vez la ms
especificando que se debera hacer una vez
fcil es usar callbacks y un evento en bucle. En
que estas tareas se hayan completado, y
la mayora de los lenguajes, esa no es una tarea
permitiendo que el procesador maneje otros
fcil: mientras que los callbacks son una
pedidos mientras tanto.
caracterstica comn en algunos lenguajes, un
evento en bucle no lo es y usualmente te
encuentras aferrndote a libreras externas (por
ejemplo: Python, con Tornado). Pero en JavaScript, los callbacks son construidos dentro del
lenguaje, como tambin el evento en bucle, y casi cualquier programador que haya incursionado en
JavaScript est familiarizado con ellos (o al menos los han usado, aunque no entiendan del todo que
significa un evento en bucle). De repente, cada una de las startup en el Planeta Tierra poda reusar
desarrolladores (por ej., recursos) tanto en el lado cliente cmo en el lado del servidor,
resolviendo el problema de Se necesita Gur Python.
De repente, cada una de las startup en el Planeta Tierra poda reusar desarrolladores (por ej.,
recursos) tanto en el lado cliente cmo en el lado del servidor, resolviendo el problema de Se
necesita Gur Python.
Entonces, ahora tenemos una plataforma increblemente rpida (gracias a la programacin nobloqueante) con un lenguaje de programacin que es increblemente fcil de usar (gracias a
JavaScript). Pero, Es suficiente? Perdurar? Estoy seguro que JavaScript va a tener un importante
lugar en el futuro. Djame decirte por qu:
Programacin Funcional
JavaScript fue el primer lenguaje de programacin que llev el paradigma funcional a las
masas (por supuesto, Lisp lleg primero, pero la mayora de los desarrolladores nunca han
construido una aplicacin en Lisp lista para ser usada en produccin). Lisp y Self, influencias
principales de Javascript, estn llenos de ideas innovadoras. Esas ideas pueden liberar nuestras
mentes para explorar nuevas tcnicas, patrones y paradigmas. Y todos ellos llevan a JavaScript.
Mira monads, codificacin Church, o incluso (para un ejemplo ms prctico) la coleccin de
funciones](http://underscorejs.org/#collections), de Underscore.js las cuales pueden salvarte
lneas y lneas de cdigo.
Objetos Dinmicos y herencia Prototipada

La programacin orientada a objetos sin clases (y sin las interminables herencias de clases)
permite rpido desarrollo (crear objetos, agregar mtodos y usarlos) pero, lo ms importante,
reduce el tiempo de refactorizacin durante tareas de mantenimiento dejando que el
desarrollador modifique instancias de objetos en vez de clases. Esta velocidad y flexibilidad
pavimenta el camino para el desarrollo rpido.
JavaScript es Internet
JavaScript fue diseado para Internet, ha estado aqu desde el principio, y no va a irse. Todos
los intentos por destruirlo han fallado, mira, por ejemplo, la cada de los Applets Java, el
reemplazo de VBScript de Microsoft, TypeScript (que compilaba a JavaScript), y la cada de
Flash en manos del mercado mvil y HTML5. Es imposible reemplazar Javascript sin romper
millones de pginas web, as que nuestro objetivo a largo plazo debera ser el de mejorarlo. Y
no hay nadie mejor para esa tarea que el Technical Committee 39 de ECMA.
Ok, alternativas a JavaScript nacen todos los das, cmo CoffeeScript, TypeScript, y los los
millones de lenguajes que compilan a JavaScript. Esas alternativas pueden ser tiles para
etapas de desarrollo (por medio de mapeos de cdigo fuente), pero fallarn al tratar de
suplantar JavaScript a largo plazo por dos razones: sus comunidades nunca sern ms grandes,
y sus mejores funcionalidades sern adoptadas por el script de ECMA (por ej., JavaScript).
JavaScript no es como un lenguaje ensamblador: es un lenguaje de programacin de alto nivel
con cdigo fuente que puedes entender
Ahora, gracias al proyecto Esprima, puedes
entonces deberas entenderlo.
crear tus propias herramientas para jugar con
JavaScript de extremo a
el cdigo fuente, modificndolo, cambiando
su estilo, agregando comentarios,
extremo: Node.js y MongoDB
instrumentando, y todo de tipo de cosas que
Entonces, esas son las razones para usar
puedas imaginar al jugar con el rbol de
JavaScript. Ahora, voy a usar JavaScript como
Sintaxis Abstracta de tu programa como si
una razn para usar Node.js y MongoDB.
estuvieses jugando con un rbol DOM.
Node.js
Node.js es una plataforma para construir
aplicaciones de red rpidas y escalableseso es
bsicamente lo que dice el sitio de Node.js. Pero
Node.js es ms que eso: es el entorno de
ejecucin preferido por cualquier aplicacin con acceso de E/S en JavaScript. Incluso si no
planeas escribir tu aplicacin del servidor principal con Node.js, puedes usar herramientas
creadas construidas encima de Node.js para mejorar tu proceso de desarrollo. Por
ejemplo: Mocha.js para unit testing, Grunt.jspara tareas de construccin automatizadas, o
incluso Brackets para completar edicin de cdigo.
Entonces, si vas a escribir aplicaciones de JavaScript para servidor o cliente, deberas
familiarizarte con Node.js, porque vas a necesitar usarlo diariamente. Hay algunas
interesantes alternativas), pero ninguna de ellas llega siquiera al 10% de la comunidad de
Node.js.
MongoDB
MongoDB es una base de datos NoSQL basada en documentos que usan JavaScript como su
lenguaje de consultas, permitiendo completar de extremo-a-extremo la plataforma JavaScript.
Pero esa no es siquiera la razn principal para elegir esta base de datos.
MongoDB es una base de datos sin esquema que permite persistir tus objetos de una manera
flexible y por lo tanto adaptarse ms rpidamente a los cambios en los requisitos. Adems, es
altamente escalable y basado en map-reduce, lo cual lo hace adecuado para aplicaciones con

muchos datos. MongoDB es tan flexible que puede ser usado como una base de datos de
documentos sin esquema, un almacn de datos relacional (aunque le faltan transacciones),o
incluso almacenamiento de clave-valor para respuestas de cach.

Modularizacin de Servidor con Express.js

Modularizacin en el lado del servidor nunca es fcil. Pero con Express.js (y Connect.js) vino la
idea demiddleware( software intermedio). En mi opinin, middleware es la mejor forma de
definir componentes en el servidor. Si quieres compararlo con un patrn conocido, se acerca
bastante a los tubos y filtros.
La idea bsica es que tu componente es parte de una tubera. La tubera procesa el pedido (entrada)
y genera una respuesta (salida), pero tu componente no es responsable por la respuesta completa. En
cambio, solo modifica lo que necesita y luego delega hacia la otra pieza de la tubera. Cuando la
ltima pieza de la tubera termina su proceso, la respuesta se enva al cliente.
Nos referimos a estas piezas de tubera como middleware. Claramente, podemos crear dos tipos
demiddleware:
Intermedios: Esos que procesan el pedido y la respuesta, pero no son del todo responsables
por la respuesta en s, entonces delegan al siguiente middleware.
Finales: Esos que toman la responsabilidad por completo en la respuesta final. Ellos procesan
y modifican el pedido y la respuesta, pero no necesitan delegar al siguiente middleware. En la
prctica, se recomienda que delegues a un siguiente middleware, de todas maneras, para
permitir flexibilidad en la arquitectura (por ej., agregar ms middleware despus), aunque ese
middleware no exista (en ese caso la respuesta ir directamente al cliente)

Como ejemplo concreto, considera un componente usuario administrador en el servidor. En

trminos de middleware, tendramos tanto finales como intermediarios. Para nuestros finales,
tendramos caractersticas tales como crear un usuario y listar usuarios. Pero antes que podamos
realizar esas acciones, necesitamos nuestros intermediarios para autenticacin (ya que no queremos
pedidos que creen usuarios sin autenticar). Una vez que creamos estos intermediarios para

autenticacin, podemos simplemente conectarlos en cualquier lado que queramos para convertir una
caracterstica sin autenticacin existente en una con autenticacin.

Editor's note: want posts just like this delivered straight to your inbox? Subscribe below to
receive our latest engineering articles.

We will never share your email with any 3rd party or spam you

Aplicaciones de una sla pgina

El proyecto Init enfoca en crear aplicaciones de una sla pgina (SPAs-Single-Page Applications).
Muchos desarrolladores web se han tentado ms de una vez en probar construir SPAs. Desarroll
usando varias (principalmente propietarias), y puedo decir con confianza que son simplemente el
futuro de las aplicaciones web. Alguna vez comparaste una SPA con una aplicacin web regular en
una conexin mvil? La diferencia de respuesta es de decenas de segundos.
Alguna vez comparaste una SPA con una aplicacin web regular en una conexin mvil? La
diferencia de respuesta es de decenas de segundos.
Las SPA son el futuro de la webentonces por que haras tu producto en un formulario antiguo?
Un argumento comn que escucho es que la gente est preocupada por el SEO. Pero si manejas las
cosas correctamente, esto no debera ser un problema: Google mismo tiene un muy buen
tutorial sobre como hacerlo, y hay muy buenos comentarios aqu tambin.

MV* del lado del cliente con Backbone.js, Marionette.js y

Twitter Bootstrap
Mucho se ha dicho acerca de los MVC* frameworks para SPAs. Es una decisin complicada, pero
voy a decir que el top 3 son Backbone.js, Ember.js, y Angular.js.
Los tres son bien considerados. Pero cual de ellos es el mejor para t?
Desafortunadamente, tengo que admitir que tengo una experiencia muy limitada con Angular.js, as
que voy a dejarlo fuera de esta discusin. Ahora, Ember.js y Backbone.js representan dos maneras
distintas de atacar el mismo problema.
Backbone.js es minimalista, simplista y te ofrece lo suficiente para crear una simple SPA. Por otro
lado, Ember.js es un framework completamente profesional para crear SPAs. Tiene ms adornos,
pero tambin una curva de aprendizaje ms grande.
Dependiendo del tamao de tu aplicacin, la decisin puede ser tan fcil como mirar el ratio de
featuresUsed/featuresAvailable(caractersticas Usadas/Disponibles), lo cual te dar una gran pista.
En el caso de Init, quera cubrir la mayora de los escenarios, as que eleg Backbone.js para
creacin fcil de SPAs, con Backbone.Marionette.View para modularizacin. De esta forma, cada
componente es una simple aplicacin, y la aplicacin final puede ser tan compleja como queramos
que sea.
Estilizar es tambin un desafo, pero podemos, de vuelta, contar con frameworks para rescatarnos.
Para CSS, no hay nada mejor que Twitter Bootstrap, que ofrece un completo set de estilos que ya
estn listos para usar y sonfciles de personalizar.
Booststrap fue creado usando el lenguaje LESS que es de cdigo abierto, as que podemos

modificarlo si as lo necesitasemos. Viene con una tonelada de controles de usabilidad que

estn bien documentados en el sitio de Bootstrap. Adems, hay un modelo de personalizacin que te
permite crear tus propios controles. Definitivamente es el hombre para este trabajo.

Mejores prcticas: Grunt.js, Mocha.js, Chai.js, RequireJS y

CoverJS
Finalmente, deberamos definir algunas de nuestras mejores prcticas, y buscar en como Init puede
ayudarte a implementarlas y mantenerlas. Nuestra solucin est centrada en varias herramientas,
que estn basadas en Node.js.
Mocha.js and Chai.js:
Estas herramientas te permiten mejorar tu proceso de desarrollo aplicando TDD o BDD,
proveyendo la infraestructura para organizar tus tests unitarios y un lanzador para correrlos
automticamente.
Hay miles de frameworks para test unitarios para JavaScript. Entonces, por que usar
Mocha.js? La respuesta corta: es flexible y completo.
La respuesta larga: tiene dos caractersticas importantes (interfaces, reporters) y una ausencia
importante (assertions). Djenme explicarles.
Interfaces: tal vez ests acostumbrado a los conceptos de TDD de suites y tests unitarios,
o tal vez prefieras ideas BDD de especificaciones de comportamiento con describe y it
should. Mocha.js te permite usar los dos acercamientos.
Reporters: correr tu test generar reportes de resultados, y puedes darle formato a esos
resultados usando varios reporters. Por ejemplo, si tienes que alimentar un servidor de
Integracin Continua, puedes encontrar un reporter para hacer exactamente eso.
Falta de una librera de assertions: : lejos de ser un problema, Mocha.js fue diseado
para dejarte usar la librera de assertions que prefieras, ofreciendo ms flexibilidad.
Hay muchas opciones, pero ah es donde Chai.js entra en accin.
Chai.js es una librera de assertions flexible que permite usar cualquiera de los tres ms
importantes estilos de assertions:
Assert: Estilo de assertion clsico de la vieja escuela. Ej.:
assert .equal( variable , valor);

Expect: Tipo de assertion encadenable ms comnmente usado en BDD. Ej.:

expect(variable) .to.equal (valor) ;

Should: Tambin usado en BDD, pero prefiero Expect porque Should porque suena
repetitivo con la especificacin de comportamiento _it _(should do something..- eso
debera hacer algo). Ej.:
variable .should.equal (valor) ;

Chai.js se combina perfectamente con Mocha.js. Usando solamente estas dos libreras, puedes
escribir tus test en TDD, BDD, o cualquier estilo imaginable.
Grunt.js:
Grunt.js permite automatizar tareas de construccin, cualquier cosa desde simples archivos
concatenados copiados y pegados, a plantillas precompiladas, estilo compilado de lenguaje
(por ej., SASS y LESS), test unitario (con mocha.js), linting y compresin de cdigo (ej.,
con UglifyJS o Closure Compiler). Puedes agregar tu propia tarea automatizada a Grunt, o
buscar en el registro de Grunt, donde hay cientos y cientos de plugins disponibles (de vuelta,
usando herramientas con grandes comunidades detrs paga bien). Grunt tambin
puede monitorear tus archivos y disparar acciones cuando estos son modificados.
RequireJS:

RequireJS puede sonar como otra forma de cargar modulos con AMD, pero puedo asegurarte
que es mucho ms que eso. Para entender por qu, primero debemos mencionar la idea del
namespacing de modulos (ej., demo.views.hola), lo que evita contaminar el namespace global
envolviendo cada mdulo en su propio namespace. El problema es, estos mdulos no son
reusables: si modificas el namespace de una instancia, ests modificando el namespace de
todas las instancias. En contraste con eso, RequireJS permite definir mdulos reusables desde
el principio. (Adems, te ayudar a adoptar Dependency Injection para evitar que tus modulos
accedan variables globales).
CoverJS:
Cobertura de cdigo es una medida mtrica para evaluar tu testing. Como el nombre implica, te
dice cuanto cdigo est cubierto en tu conjunto de tests actual. CoverJS mide la cobertura de
cdigo de tus tests instrumentando declaraciones (en vez de lneas de cdigo
cmo JSCoverage) y generando una versin instrumentada de tu cdigo. Tambin genera
reportes para alimentar tu servidor de integracin continua.

Usando _Branches_ (_ramas_) para alternar caractersticas

Cuando empec Init, necesitaba una manera para que los usuarios activen y desactiven varias
caractersticas que podran llegar a querer en su proyecto. Decid tomar un enfoque radical con el
sistema de ramas de git para implementar esta funcionalidad.
En esencia, cada rama representa una caracterstica o funcionalidad que un usuario podra querer
incluir. Si ests empezando un proyecto desde el principio, empieza por la rama mnima que
necesitas, y luego agrega otras tecnologas fusionando la rama con las otras deseadas. Por ejemplo,
digamos que quieres empezar tu proyecto con Backbone.js y Marionette.js. Bueno, puedes empezar
en la rama Backbone.js y fusionarla con la rama Marionette, continuando desde ah para cada
pedazo de funcionalidad que quieras agregar.

Por ahora, la idea de fusionar para agregar funcionalidad puede solo ser usada para plantillas de
tecnologa (ej., Backbone, Node, Express). Pero en el futuro, sers capaz de alternar entre back-end

(ej., desde MongoDB a Postgres) e implementaciones del lado cliente.

Empieza un proyecto con Init y haz un deploy en Heroku hoy

Nunca ha habido una manera ms fcil de empezar un proyecto. Dirgete al repositorio de GitHub,
fijate la rama con los ltimos commits (ahora mismo es usermanager, aunque esto puede cambiar en
el futuro) y entonces:
1.Crea un directorio para tu proyecto (o usa uno existente).
2.Crea tu repositorio con git init (o usa un repositorio existente)
3.Agrega un servidor remoto con Init
git remote add init git: //github .com /picanteverde/init .git

4.Descarga la rama que quieras

git pull init usermanager

5.Obtn el archivo de procesos de Heroku

git pull init heroku -webprocess

6.Con el Heroku Toolbelt instalado, crea una aplicacin

heroku create

7.Haz un push a la rama master a Heroku

git push heroku master

8.Visita tu aplicacin en funcionamiento en Heroku!

Ahora puedes empezar a desarrollar tu caracterstica asesina con solo unas lneas de cdigo. No solo
eso, sino que estars desarrollando con las ltimas y ms eficientes tecnologas en una suite de
desarrollo lo ms automatizada posible.
Espero que puedas usar Init para comenzar tu prxima gran idea. Recuerda Revisar el repositorio de
Init para ver correcciones y caractersticassu desarrollo es bastante activo, y espero con ansias
escuchar sus comentarios.