Lo esencial es invisible a los ojos: el viaje de un diseñador al mundo del backend

Ignacio Ricci (@ignacioricci)

Gerente de Producto @ Mango

"Mi pequeña aventura aprendiendo a programar en node.js."

Punto de partida

  • Buen conocimiento de diseño y HTML/CSS
  • Conocimiento básico de JavaScript. (Principalmente a través de  jQuery)
  • Conocimiento muy básico de backend (WordPress y templating systems de múltiples lenguajes)
  • Conocimiento nulo de interactuar con bases de datos

Objetivos

  1. Comenzar, a mi propio ritmo, a aumentar mi conocimiento  en la parte de backend.
  2. Sea lo que sea que iba a desarrollar, tenía que tener un uso práctico para mí o para Mango.
  3. Tenía que poder terminar con algo que sea "shippeable". No quería dejar algo por la mitad que nunca iba a terminar usando.
  4. Quería hacerlo principalmente solo, y solo pedir ayuda en caso de emergencia.

El proyecto

Un framework para generar sitios HTML estáticos que soporte multi-idioma.

Qué

Mi punto de partida era un pequeño "snippet" de código de hace un año que había armado Dan Zajdband. 

Cómo (???)

Porque se me hizo muy tedioso hacer cambios en el sitio de Mango   y poder trabajar con traductores.

Por qué

Por qué node.js              

  1. Tenía algo de conocimiento en hacer cosas con "vanilla" JavaScript.
     
  2. La sintaxis de node.js es la misma que javascript, por lo cual, ya era una cosa menos que aprender.
     
  3. Necesitaba un templating system. Ya había trabajado con Jade y me resultaba simple de usar.
     
  4. Sabía que quería manejar i18n con JSON, y que tanto Jade como node.js son buenos para manipularlo

Demo

http://ignacioricci.github.io/

lightning-dogs/

Ztat

{
  "templates":[
    {
      "name": "index",
      "languages": {
        "en": "index",
        "es": "index"
      }
    },
    {
      "name": "breeds",
      "languages": {
        "en": "breeds",
        "es": "razas"
      }
    }
  ],
  ...

config.json

  ...,
  "use_layout": true,
  "default_language": "en",
  "base_url": "http://localhost:3000/www/",
  "output_dir": "www",
  "assets_dir": "images",
  "css_dir": "styles/css",
  "sass_dir": "styles/scss",
  "fonts_dir": "fonts",
  "javascript_dir": "js",
  "pretty": true
}

config.json

img(src="#{assets_dir}hero.jpg", alt="")

.intro
  .grid-container.wrap
    .grid-column-4-l
      h1= hero.title
      h2= hero.subtitle

index/template.jade

{
  "hero": {
    "title": "Dogs",
    "subtitle": "Man's best friend"
  }
}

index/en.json

{
  "hero": {
    "title": "Perros",
    "subtitle": "Los mejores amigos
    del hombre"
  }
}

index/es.json

i18n

each breed in breeds

    li.breed
      .breed-image
        img(src="#{assets_dir
        + breed.image}")
      .breed-info
        h2= breed.name
        p= breed.description

breeds/template.jade

{
  "breeds": [
    {
      "name": "English Bulldog",
      "image": "english-bulldog.jpg",
      "description": "There is something 
      about these wrinkly, tubby, squat 
      puppies that just make humans..."
    },
    {
      "name": "Golden Retriever",
      "image": "golden-retriever.jpg",
      "description": "There is something 
      about a Golden puppy that makes 
      everyone smile. They are..."
    }
  ]
}

breeds/en.json

Iteración

   
    if (current_language == 'es') {
      // Do something
    }
    
    if (current_page == 'about'){
      // Do something
    }
    
    // Devuelve la URL de la página para el idioma que corresponda
    page_link('template_name')

Condicionales y funciones

   
    // Compilación manual de única vez
    node generator.js

    // Compilación automática con detector de cambios (watcher)
    node watch.js

    /* El compilador no sólo compila templates de Jade,
    sino que compila SASS a CSS también :) */

Comandos de consola

(a los ponchazos)

Aprendiendo

Prueba y error

StackOverflow

Dan + Guille

~ 20hs

Conclusiones

Confirmé la importancia de una buena documentación. Mis mayores trabas ocurrieron al enfrentarme con documentaciones poco claras. Especialmente siendo "newbie" todavía.

La documentación es clave

Si bien hice algo muy simple, no me resulto tan difícil. Hay que animarse a meter las manos en la masa y probar.
Es gratis, divertido, y realmente no hay nada que perder!

A animarse

Muchas gracias     

https://github.com/ignacioricci/ztat/

Made with Slides.com