Qué es Frontend Ops?

Ingenería de front end.

Surge como una necesidad ante los nuevos retos del desarrollo de FrontEnd.

Mismos conceptos de DevOps, diferentes herramientas.

Manejo de dependencias y paquetes.

Tus herramientas trabajando juntas.

NPM

Librerías de NodeJs.

Usando NPM

npm install

  ## package.json
 {
    "name": "awesometheme",
    "version": "1.0.0",
    "dependencies": {},
    "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-watch": "~0.4.3",
    "grunt-contrib-compass": "~0.2.0",
    "grunt-shell": "~0.3.1",
},
     "engines": {
         "node": ">=0.8.0"
    }
}

Bower

Librerías para Frontend.

Usando Bower

bower install

  ## bower.json
                             {
    "name": "awesometheme",
    "version": "1.0.0",
      "dependencies": {
        "respond": "fubhy/respond",
        "selectivizr": "fubhy/selectivizr",
        "html5shiv": "fubhy/html5shiv",
        "matchmedia": "fubhy/matchmedia",
        "pie": "fubhy/pie"
    }
}

Escribir código, abrir browser, refresh, refresh, refresh, abrir developer tools, ver log, ver código fuente, escribir código, hacer pruebas. Volver a empezar.

Porqué seguimos trabajando así?

Grunt

Grunt es una herramienta para correr tareas repetitivas automáticamente.

Working with Grunt

Develop with Grunt Watch

Gruntfile.js

  ## Gruntfile.js
  watch: {
      options: {
        livereload: true
      },
      sass: {
        files: ['sass/{,**/}*.{scss,sass}'],
        tasks: ['compass:dev'],
        options: {
          livereload: true
        }
      },
      registry: {
        files: ['*.info', '{,**}/*.{php,inc}'],
        tasks: ['shell'],
        options: {
          livereload: true
        }
      },
      images: {
        files: ['images/**']
      },
      css: {
        files: ['css/{,**/}*.css']
      },
      js: {
        files: ['js/{,**/}*.js', '!js/{,**/}*.min.js'],
        tasks: ['jshint', 'uglify:dev']
      }
    },

    shell: {
      all: {
        command: 'drush cache-clear theme-registry'
      }
    },

Create your build tasks

  ## Gruntfile.js

compass: {
      options: {
        config: 'config.rb',
        bundleExec: true,
        force: true
      },
      dev: {
        options: {
          environment: 'development'
        }
      },
      dist: {
        options: {
          environment: 'production'
        }
      }
    },
grunt.registerTask('build', [
    'uglify:dist',
    'compass:dist',
    'jshint'
  ]);

Test Frontend with Grunt & Casper.js

  ## Gruntfile.js
  casperjs: {
      options: {
        async: {
            parallel: false
        }
      },
      files: [
        'tests/casperjs/basic.js',
        'tests/casperjs/advanced.js',
        'tests/**/*.js'
      ]
    },

Casper.js tests for Drupal

  casper.test.begin('Tests homepage structure', 3, function suite(test) {
      // Open the homepage.
      casper.start();
      casper.thenOpen('http://localhost/frontpage/', function() {
        // Check that we get a 200 response code.
        test.assertHttpStatus(200, 'Homepage was loaded successfully.');
        // Check the presence of the main items in the page.
        test.assertExists('a#logo', 'Header link to the homepage is present.');
        test.assertExists('form#user-login-form', 'Login form is present.');
      });

      casper.run(function() {
        test.done();
      });
    });

Performance Testing Tools

YSlow, PageSpeed Insights

						grunt.loadNpmTasks('grunt-yslow');
						grunt.loadNpmTasks('grunt-pagespeed');