Modern Workflow for Modern Webapps
@passy
@passy
Pascal Hartig
CTO @ weluse
Open Source Addict
The front-end tooling landscape is constantly evolving.
The Build Toolbox
Linting. Dependency Resolution. JS/CSS Concatenation. Template Compilation. CSS Flattening. PNG/GIF/JPEG/SVG compression. JS Minification. HTML Cleanup. Asset Revving. CSS Preprocessing. CSS Prefixing. Live Reloading. Test Running.
Tools should help automate repetitive tasks and free up time to focus on building and improving your app.
Enter Yeoman
A tooling workflow for the modern
web application developer
web application developer
Goal 1: From idea to prototype in < 10 mins
Goal 2: Reduce the setup time for your tools
Goal 3: Automate repetitive tasks
Goal 4: Reduce time writing boilerplate
grunt
The JavaScript Task Runner
- Think Rake/Cake/Make/Jake in JavaScript
+ Guard - Huge ecosystem
- 1230+ plugins on npm
bower
A package manager for the web
- Unopinionated
- Runs over Git
- Flat dependency tree
- 3800+ packages
yo
what glues it together
- Customizable project setup
through generators - Initial project scaffolding
- Component scaffolding
(models, directives, tests, ...) - 160+ generators on npm
The old-fashioned Workflow
- Find an HTML Boilerplate
- Download it, add it to project
- Find a UI Boilerplate
- Download it, add it to project
- Download project libs, add 'em
- Copy boilerplate for models,
views, setup - Setup test runner
- Setup build process
- Write Real Code!
Can we do better?
$ yo webapp
- HTML5 Boilerplate
- Twitter Bootstrap
- Project Structure
- Mocha Tests
- RequireJS (optional)
- Modernizr (optional)
- Build process
- ...
Can we do even better?
$ yo angular
- HTML5 Boilerplate
- Twitter Bootstrap
- AngularJS
- Karma Testrunner
- Scaffolding for Models, Directives, Routes, Views, Values, Constants, Services, Factories, ...
- DI-aware JavaScript minification
- CoffeeScript support
Can we do even better?
$ yo chromeapp
- HTML5 Boilerplate
- Twitter Bootstrap
- Permission wizard
- Chrome app manifest
- Default icon
- Build process
What else?
- Flight
- Backbone (Boilerplate)
- Ember
- Bookmarklets
- CommonJS modules
- Wordpress
- jQuery Plugins
- Grunt Plugins
- Slideshows
Writing your own is easy
- Can be written for any
framework or workflow - Can integrate with your backend
- Fork an existing one or start from scratch with
generator-generator
Extending your app is easy
Packaging rocks!
Bower
$ bower search package
$ bower install [--save]
package
$ bower uninstall package
$ bower update package
That's all you need to know.
Demo Time!
goo.gl
curl -X POST https://www.googleapis.com/urlshortener/v1/url --header "Content-Type: application/json" --data '{"longUrl": "http://weluse.de/"}'{
"kind": "urlshortener#url",
"id": "http://goo.gl/rskrN0",
"longUrl": "http://weluse.de/"
}
Thanks for listening.
Cheerio!
Photo Credit
Thanks
Slides heavily inspired by a
presentation by the magnificent Addy Osmani <3
presentation by the magnificent Addy Osmani <3