Front-end Automation

Saper creare e mantenere un progetto Front-end richiede ormai una certa confidenza con tutta una serie di attività come la minificazione dei sorgenti, l’esecuzione dei test, la creazione di sprites e la compilazione dei linguaggi usati dai moderni pre-processori come SASS, LESS o CoffeeScript.

Fortunatamente attività come queste, ripetitive e tediose, possono essere automatizzate grazie a tools come Grunt e Gulp, strumenti duttili e configurabili in modo da calzare perfettamente su ogni specifico progetto.  

In questo workshop scopriremo come trarre il massimo dai processi di automatizzazione del Front-end durante la fasi di sviluppo e di messa in produzione.

Programma corso Front-end Automation

Questo workshop è stato progettato per fornire tutti gli strumenti necessari a comprendere ed utilizzare i processi di automazione del Front-end. Nelle due giornate di corso vedremo come imbastire eleganti strutture capaci di reagire al cambiamento e facilitare le nostre attività di sviluppo quotidiano in innumerevoli modi, ad esempio controllando per noi la qualità del codice prodotto. Gli stessi strumenti si riveleranno quindi utilissimi per ottimizzare il nostro progetto in vista della messa in produzione, riducendo lo spazio dei vari asset ed assicurandoci che la cache del browser non interferisca con il rilascio.

In ultimo, sempre avvalendoci di quanto appreso in questo corso, potremo migliorare l’efficacia dei nostri test ed evitare regressioni con l’ausilio di tools per la comparazione visuale.

Argomenti

Setup

• Grunt init

A Simple Frontend

• Serving content

• The watch task

• Compiling SASS and Compass

• Installing dependencies with Bower

• Checking JavaScript Syntax

• Creating sprites and compressing images

• Javascript unit testing with mocha

• E2E testing with CasperJS

• Templating HTML (grunt, hinclude.js, frameworks)

Building

• Concatenate and compress CSS

• Concatenate and compress JavaScript

• Option 1: Continuous building

• CSS Source Maps

• JavaScript Source Maps

• Option 2: build task

• Static file revving

• Usemin

Grunt with AMD

• Build using Grunt and AMD

Grunt with Angular.JS

• Automate Angular.JS unit, e2e testing and templating

• Build using Grunt and Angular.JS

Testing Layout

• Using Phantom CSS for visual regression testing

Gulp

• un’introduzione