2015: A Static SiteGenerator OdysseyCreated by Thomas Jaggi / and Olga Skurativska / @backflip @_olko
Who we areFrontend engineers at
About 150 engineers,distributed over 6 locations
Interdisciplinary departmentwith UX / UI designers
Unic AG
Issue #1:Communication with projectmembers
UX / UI designers
Backend engineers
Project managers
Customers
…
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, customizedbuilds of libraries)
Icons and images handling
Watching for changes and livereloading
Nice to have:JavaScript-based solution
Possibility to plug in different tools
Quick setup of new projects
Estático's Gulp task structureGoal 2: Make tasks testableDefine 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/' });});
Estático's Gulp task structureGoal 3: WatcherEvery 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); });});
More automation:ScaffoldingModule create task:
prompts for a module's name
creates module's files
registers module's CSS and JS
Scaffolding tasks have a nicecommand line interface
More automation:Handling data in a project
Data has to be separate from templates
Templating engine (Handlebars) and JSON solve thatproblem
Handlebars:looks like HTML, is easy to understand
is extendable with custom helpers
is mustache-like
From JSON to JavaScript objectData becomes reusable
We can modify data before display using JavaScript
Issue #3:Continuous integration (CI)
1. Commit
2. Build (and run tests, code analysis, …)
3. Publish (preview server, artefact storage, …)
Problem 1:Not all Nodes are created equal
0.12 introduced breaking changes
Packages don't necessarily work in every major version
$ nvm use (0.12.2)
$ node -v0.12.2
Solution:Version management toolExample: nvm
* When on Windows: nvm-windows
Example 1:Missing dependencies
✖ Error: pngquant failed to build, makesure that libpng-dev is installed
✖ Error: /lib/x86_64-linux-gnu/libc.so.6:version ̀GLIBC_2.14' not found
Example 2:Different implementations (SVG to PNG)
1. Use PhantomJS
2. Discover problem on Windows:Cannot start phantomjs: Phantom didn'trespond 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.
Solution:Specify runtime and make itavailable
1. Specify software versions
2. Select your linux flavor
3. Create box (or image)
4. $ vagrant up && vagrant ssh
Problem 3:npm install ≠ npm install
npm packages are specified using SemVer
Works fine in theory, doesn't work as fine in practice
Solution:When in doubt: Clear cache$ npm cache clean
Update npm$ npm install -g npm@latest
* When on Windows: npm-windows-upgrade
Issue #4: Open-sourcing things
When to publish
How (not) to deal with licensing
How (not) to maintain
When to publishJust get over yourself!
Code will never be perfect
Publish anyway
Improve continuously
How to deal with licensing
Set up contributor license agreement (CLA) workflow
http://choosealicense.com
Not an actor
How to maintainSchedule time to take care of contributions
Define responsibilities
Contribute back to other OSS software (report bugs,suggest features, …) ❤
SummaryAutomate everything!
Create your own set of Gulp tasks!
Open-source it!
Set up a preview server!
ContactThomas Jaggi, – [email protected] @backflip
Olga Skurativska, – [email protected] @_olko
Interested in working with us?https://www.unic.com/de/about/career/jobs/development/senior-frontend-engineer-15-08-18.html