Continuous Integration gehört in den meisten Unternehmen mittlerweile zum guten Ton, oft aber nur mit Blick auf die Server-Seite. Dabei kommt heute keine Anwendung mehr ohne Frontend-Code aus. Dieser wird - gerade im Enterprise-Bereich - oft vernachlässigt. In diesem Vortrag wird ein CI-Setup mit Fokus auf das Frontend vorgestellt. Automatisierte Tests, Sourcecode Quality Management und andere typische Bestandteile sind für den Frontend-Code genauso wichtig wie für das Backend. Durch Asset-Optimierung kann die Performance, gerade für mobile Clients, deutlich gesteigert werden. Gezeigt werden Tools, Methoden und Best Practices für den Aufbau und die Umsetzung der Delivery-Pipeline. Zum Einsatz kommen dabei Grunt, ESLint, Mocha und Jenkins.
9. Frontend Code is Mission Critical!
Broken JavaScript → broken app
Broken CSS → broken layout and/or broken app
It impacts the perceived performance drastically
Even more so on mobile
·
·
·
·
9/62
10. And Still ...
We often build superior CI/CD pipelines for our backends
But frontend code is often neglected
For our users, it's always the whole package
·
·
·
10/62
12. What we will cover
This is frontend only
Ideal: backend & frontend in one CD pipeline
Asset Optimization
Testing
The Delivery Pipeline
Local Development (Docker)
·
·
·
·
12/62
20. Use the Browser Cache
Versioned File Names
time stamp: app.min.20150619-0913.js
hash: app.min.2412fbca2a07a.js
content changes ⇒file name changes
file can be kept in browser cache forever
·
·
·
·
20/62
24. Development: Turnaround Time Is Important
Production Mode vs. Development Mode
grunt watch
Live Reload
·
·
·
24/62
25. Production Mode versus Development Mode
Production Development
JS concatenated, minified source files, not minified
CSS compiled (SASS), concatenated, minified only compiled (SASS)
Images Embedded into CSS Embedded into CSS (by Sass/Compass)
HTML references optimized assets references source assets
25/62
35. Karma
Open Source Test Runner
Created by the AngularJS team
Write tests in Jasmine, Mocha, QUnit
CI support (Jenkins, Travis)
Based on Node.js and Socket.io
Run in Headless Modus with PhantomJS
Supported Browsers: Firefox, Chrome, Safari, IE (Desktop and Mobile)
·
·
·
·
·
·
·
35/62
36. Karma and Mocha (JS Test Framework)
Running Unit Tests with Karma
varexpect=chai.expect;
beforeEach(module('project-staffing'));
describe('UpperCaseTest',function(){
it('shouldconvertfirstcharactortoUpperCase',inject(function(uppercaseFilter){
expect(uppercaseFilter('a')).to.equal('A');
expect(uppercaseFilter('helloworld')).to.equal('HelloWorld');
}));
});
JAVASCRIPT
npminstall-gkarma-cli
karmastartkarma.conf.js
//or
gruntkarma
BASH
36/62
40. Protractor
Open Source E2E Testframework for AngularJS Apps
Tests run in a real browser
Tests can be written with Jasmine (default), Mocha, Cucumber
No more waits and sleeps
Build with Node.js on top of WebdriverJS
·
·
·
·
·
40/62
47. Project Staffing App - TEST Environment
http://54.170.140.7:9000/
Delivery Pipeline
http://54.75.209.193/jenkins/view/EnterJS-Pipeline/
Info: Server will be shutdown after talk
47/62