Dev Tools

Qué Son?

Colecciones de software que hacen nuestro trabajo mas facil y nuestra vida mas feliz.

🙂

Por Qué?

Mejor codigo, menos bugs, mas funcionalidad y en menos tiempo.

Dónde Firmo?

Antes

• CSS, JS y HTML plano
• Deploy = Copiar Archivos
• Codigo orientado al Browser
• Dificil Mantenimiento
• Procesos Manuales
• Mala Performance

Ahora

Codigo ➡️

➡️ Felicidad

Aclaraciones

• Diversidad de herramientas
• Mi experiencia
• Linea disfusa entre herramientas y frameworks
• Node & Browser

Editor de Texto

Atom

• Gratuito 🙌
• Rapido, extensible y customizable
• Plugins (colors, git, linter, emmet)
• Snippets
• Temas + Fuentes
• Desarrollado en Electron

DEMO

Terminal

Linea de Comandos

Aprendamos a querarla ❤️

• iTerm
• ConEmu
• GitBash
• Zsh
• alias copy='cp'

Demo

Estandarización de Codigo

ESlint

Linter para codigo para JavaScript

• CLI
• Basado en reglas
• Configurable
• Extensible
• Plugins para editores

.eslintr

            
              {
                "env": {
                  "browser": true,
                },
                "globals": {
                  "angular": true,
                },
                "rules": {
                  "camelcase": 2,
                  "curly": 2,
                  "brace-style": [2, "1tbs"],
                  "quotes": [2, "single"],
                  "semi": [2, "always"],
                  "space-in-brackets": [2, "never"],
                  "space-infix-ops": 2,
                }
              }
            
          

EditorConfig

• Consistencia de código entre editores
• Estilos generales
• Estilos por tipo de archivo

.editorconfig

            
              root = true

              [*]
              indent_style = space
              indent_size = 2
              charset = utf-8
              trim_trailing_whitespace = true
              insert_final_newline = true

              [*.md]
              trim_trailing_whitespace = false

            
          

DEMO

Calidad de Código

Karma

• Correr tests con feedback instantaneo
• Reproducir tests en todo tipo de browsers.
• Integración con frameworks de test (jasmine, mocha, etc.)

karma.conf.js

            
            module.exports = function(config) {
              config.set({
                browsers: ['PhantomJS', 'Chrome'],
                frameworks: ['mocha'],
                reporters: ['spec', 'coverage'],
                files: ['test/'],

                coverageReporter: {
                  dir      : './coverage',
                  reporters: [
                    { type: 'lcov', subdir: '.' },
                    { type: 'text-summary' }
                  ]
                }
              });
            };
            
          

Istanbul

• CLI
• Tracking de linea, branch y funciones
• Medir code-coverage del proyecto
• Reportes

Coveralls

• Servicio web para medir y trackear code-coverage
• Analisis y estadísticas
• Historial
• CI + GitHub ❤️

DEMO

Pre-Procesadores

Sass

• Pre-procesador CSS
• Cambia la sintaxis
• Mas funcionalidades (variables, nesting, mixins, herencia, etc).
• Watcher

Jade Pug

• Pre-procesador HTML
• Motor de template
• Menos sintaxis
• Mas funcionalidad (partials, mixins, condicionales, etc)
• node & browser

DEMO

Transpilacion

Transformacion + Compilacion

Babel

• Nuevas funcionalidades en ES6 en todo tipo de browsers.
• Transforma ES6 en codigo ES5 equivalente.
• Orientado a presets (modulos)

.babelrc

            
            {
              "presets": ["es2015", "stage-1"],
              "comments": false
            }
            
          

DEMO

Dependencias

npm

• CLI
• Registro Open Source
• Mas grande del mundo 🙌
• Node & Browser

BitHound

• Analizar dependencias de npm
• Detecta obsolescencia, inseguridades, falta de uso, desactualizaciones
• Ayuda a refactorizar codigo
• Tracking de TODO's
• CI + GitHub ❤️

Greenkepper

• Monitoreo en tiempo real
• Acutalizacion automatica de dependencias
• GitHub

Bundling

Webpack

• Agrupa dependencias/modulos y crear archivos estaticos
• Basado en loaders
• Hot Replacement
• Dev Web Server
• Fonts, Svg, Imagenes
• Babel, Sass, Pug, Karma, npm

webpack.config.js

            
              const webpack = require('webpack');

              module.exports = {
                entry: './src/index.js',

                output: {
                  path: './dist',
                  filename: 'lib.js'
                },

                resolve: { root: path.resolve('./') },

                module: {
                  preLoaders: [{
                    test   : /\.js$/,
                    loader : 'eslint',
                    include: projectRoot,
                    exclude: /node_modules/
                  }],
                  loaders: [
                    {
                      test: /\.(woff|ttf|eot|svg)$/,
                      loader: 'url?limit=64000'
                    },
                    {
                      test: /\.(png|jpg)$/,
                      loader: 'url?limit=64000'
                    },
                    {
                      test   : /\.js$/,
                      exclude: /node_modules/,
                      loader : 'babel'
                    },
                    {
                      test  : /\.css$/,
                      loader: 'style-loader!css-loader?root=./src/'
                    },
                    {
                      test  : /\.scss$/,
                      loader: 'style!css!sass'
                    }
                  ]
                },
              };
            
          

DEMO

Automatización

npm scripts

• Comandos definidos en package.json
• Pequeñas utilidades
• Grandes sistemas de build
• npm run [script]
• Evitamos el uso de dependencias globales

package.json

            
      "name": "luhn-cc",
      "version": "0.0.6",
      "scripts": {
        "build": "webpack --mode=build",
        "dev": "webpack --progress --colors --watch --mode=dev",
        "test": "karma start karma.conf.js --single-run",
        "test-watch": "karma start karma.conf.js --auto-watch",
        "check-cover": "open coverage/lcov-report/index.html",
        "eslint": "eslint . .js",
        "prepublish": "npm run build",
        "bithound": "bithound check git@github.com:ianaya89/luhn-cc.git"
      },
            
          

CI

Integración Continua

Circle CI

• Integraciones automáticas
• Delivery automático
• Instalar dependencias, correr tests, generar informes, integrar con servicios de terceros.
• Deploy rápido, reproducible y debuggeable

circle.yml

            
    machine:
      timezone:
        America/Vancouver
      node:
        version: 6

    dependencies:
      override:
        - npm install
        - npm install coveralls
        - npm install bithound

    test:
      override:
        - npm test
        - COVERALLS_SERVICE_NAME="circleci" COVERALLS_SERVICE_JOB_ID="$CIRCLE_BUILD_NUM" ./node_modules/coveralls/bin/coveralls.js < ./coverage/lcov.info
        - ./node_modules/.bin/bithound check git@github.com:ianaya89/luhn-cc.git
      post:
        - cp -R ./coverage/* $CIRCLE_ARTIFACTS/

            
          

GitHub

Git Flow

• Modelo de branch
• Branch develop & master
• 1 Funcionalidad = 1 Branch
• Release/s Branch
• Hot Fix Branch

Pull Requests

• Visibilidad
• Revision de código
• Seguridad
• Aprendizaje