Slides to a presentation made for frontendconf.ch 2015

1. 2015: A Static Site
Generator Odyssey
Created by Thomas Jaggi / and Olga Skurativska /@backflip @_olko

2. Who we are
Frontend engineers at
About 150 engineers,
distributed over 6 locations
Interdisciplinary department
with UX / UI designers
Unic AG

3. Basis
Static frontend
prototype

4. Issue #1:
Communication with project
members
UX / UI designers
Backend engineers
Project managers
Customers
…

6. Preview server
Presentation of current and previous state of the frontend
prototype

7. Overview page

8. Project page

9. Build index page

10. Build content page

11. Issue #2:
Automating frontend routines
Working with templates and partials
Generating CSS (preprocessing SCSS, autoprefixing,
minifying)
Generating JavaScript (dependency resolving,
concatenating, minifying, linting, unit testing, customized
builds of libraries)
Icons and images handling
Watching for changes and livereloading

12. Anticipated question:
Why didn't you just use an
existing static site generator?

13. Our experience
with Middleman:
Fixed technology stack
Configuration based
Written in Ruby

14. Nice to have:
JavaScript-based solution
Possibility to plug in different tools
Quick setup of new projects

15. Meet Estático!
https://github.com/unic/estatico

16. Anticipated question:
Why Gulp, not Grunt?

17. Estático's Gulp task structure
Goal 1: Easy maintenance
We store tasks in separate files

18. Estático's Gulp task structure
Goal 2: Make tasks testable
Define task logic as an exportable function
var taskBody = function(config) {
return gulp.src(config.src)
.pipe(jshint())
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest(config.dest));
};
Source and destination paths are parameters
gulp.task(taskName, function() {
return taskBody({
src: 'source/*.js',
dest: 'build/'
});
});

19. Estático's Gulp task structure
Goal 3: Watcher
Every task exports its watch paths
var taskName = 'js',
taskConfig = {
...
watch: ['source/*.js', 'source/modules/**/*.js']
};
module.exports = {
name: taskName
config: taskConfig
};
Watcher loops through configs
_.each(tasks, function(task) {
watch(task.config.watch, function() {
gulp.start(task.name);
});
});

20. More automation:
Scaffolding
Module create task:
prompts for a module's name
creates module's files
registers module's CSS and JS
Scaffolding tasks have a nice
command line interface

21. More automation:
Handling data in a project
Data has to be separate from templates
Templating engine (Handlebars) and JSON solve that
problem

22. Anticipated question:
Why Handlebars?

23. Handlebars:
looks like HTML, is easy to understand
is extendable with custom helpers
is mustache-like

24. From JSON to JavaScript object
Data becomes reusable
We can modify data before display using JavaScript

25. Demo

26. Issue #3:
Continuous integration (CI)
1. Commit
2. Build (and run tests, code analysis, …)
3. Publish (preview server, artefact storage, …)

27. Prerequisites
1. Node.js with
2. That's it

28. Problem 1:
Not all Nodes are created equal
0.12 introduced breaking changes
Packages don't necessarily work in every major version

29. $ nvm use (0.12.2)
$ node -v
0.12.2
Solution:
Version management tool
Example: nvm
* When on Windows: nvm-windows

30. Problem 2:
Platform differences
1. Missing dependencies
2. Different implementations

31. Example 1:
Missing dependencies
✖ Error: pngquant failed to build, make
sure that libpng-dev is installed
✖ Error: /lib/x86_64-linux-gnu/libc.so.6:
version `GLIBC_2.14' not found

32. Example 2:
Different implementations (SVG to PNG)
1. Use PhantomJS
2. Discover problem on Windows:
Cannot start phantomjs: Phantom didn't
respond within 30 seconds)
3. Use GraphicsMagick
4. Discover problem on OS X: vs.
5. Use PhantomJS on Unix and GraphicsMagick on Windows
6. Discover new problem on Windows
7. Go back to 1.

33. Solution:
Specify runtime and make it
available
1. Specify software versions
2. Select your linux flavor
3. Create box (or image)
4. $ vagrant up && vagrant ssh

34. Problem 3:
npm install ≠ npm install
npm packages are specified using SemVer
Works fine in theory, doesn't work as fine in practice

35. Solution:
Lock down dependencies
$ npm shrinkwrap

36. Problems 4-99:
npm
Great piece of software
Amazing team behind it
But: Many edge cases

37. Solution:
When in doubt: Clear cache
$ npm cache clean
Update npm
$ npm install -g npm@latest
* When on Windows: npm-windows-upgrade

38. Issue #4:
Open-sourcing things
When to publish
How (not) to deal with licensing
How (not) to maintain

39. When to publish
Just get over yourself!
Code will never be perfect
Publish anyway
Improve continuously

40. How to deal with licensing
Set up contributor license agreement (CLA) workflow
http://choosealicense.com
Not an actor

41. How to maintain
Schedule time to take care of contributions
Define responsibilities
Contribute back to other OSS software (report bugs,
suggest features, …) ❤

42. Summary
Automate everything!
Create your own set of Gulp tasks!
Open-source it!
Set up a preview server!

43. Who
is
behind
all of this?

44. Thanks!

45. Do you
want to be
our friend?

46. Contact
Thomas Jaggi, –thomas.jaggi@unic.com @backflip
Olga Skurativska, –olga.skurativska@unic.com @_olko
Interested in working with us?
https://www.unic.com/de/about/career/jobs/development/senio
frontend-engineer-15-08-18.html