Este.js is a development stack that includes statically compiled CoffeeScript, the Google Closure Library, Mocha tests, Stylus styles, and Soy templates. It uses Bower as a package manager, Grunt.js as a task runner, and module loaders to orchestrate dependencies and automate development tasks. Component aims to improve on monolithic libraries by promoting granular, reusable components that can be installed and loaded via both Bower and its own module loader. While there are many approaches to frontend development, Este.js brings together specific tools like Bower, Grunt.js, and module loaders to provide a robust yet comfortable development environment.

1. Este.js
robust, modular, comfortable
... about Este.js dev stack
daniel@steigerwald.cz
javascript-skoleni.cz

2. What Este.js is?
● statically compiled CoffeeScript
● Google Closure Library
● Mocha tests
● Stylus styles
● Soy templates
● Este.js library
○ MVC framework
○ quite a lot useful classes
● simple server for development
● settings and snippets for Sublime Text
● (I'm sure I forgot something.)

3. Jargon
Package Manager: Fetch scripts from online
sources like GitHub, taking dependencies into
account.
Task Runner: Build tool, combines scripts and
other assets together into something usable by
browsers.
Module Loader: A way to programmatically
load scripts when they are needed.

4. How to orchestrate so many things?
Versioning, automatizations, configurations,
boilerplates, reusability...
Make your own dev stack. Done.

5. Este.js dev stack consists of:
● github.com/steida/este-library
○ JavaScript library, all reusable code is here.
● github.com/steida/grunt-este
○ several tasks for Grunt.js (task runnerl)
● github.com/steida/este
○ application boilerplate
○ /Gruntfile.js/coffee (task runner configuration)
○ /bower.json (package manager)
○ /package.json (package manager)

6. Bower - package manager
github.com/twitter/bower
sindresorhus.com/bower-components
● generic and unopinionated
● for frontend (NPM is for backend)
● over 1000 components
● don't store packages in your repository!
● learn semver.org
● use tags (and tilde, e.g. ~0.4.0)

7. Bower - package manager
bower install jquery
bower install git://github.com/components/jquery.git
bower install components/jquery (same as above)
bower install http://foo.com/jquery.awesome-plugin.js
bower install ./repos/jquery
bower install jquery#1.8.1
bower install components/jquery.git#~1.8.1
bower install components/jquery#1.8.x
bower install git@github.com:user/private-package.git
bower list

8. Bower - package manager
How is this better than curl?
● similar API as NPM
● simple and cross-platform
● semver.org and tags

9. Grunt.js - task runner
gruntjs.com
gruntjs.com/plugins
● over 400 plugins
● tasks and targets
● synchronous globbing
● async queue

10. Grunt.js - task runner
How is this better than make?
● simple and cross-platform (again)
● familiar api for all plugins, a lot of helpers
● you can reuse your knowledge of JavaScript
and Node.js
● goto previous slide :)

11. Module Loaders
● CommonJS
● AMD
● many different/mixed implementations
○ Google Closure deps.js
○ browserify.org
○ github.com/component/component
○ and more...

12. TJ Holowaychuk: Component
github.com/component/component
component.io
● death to monolithic libraries, granularity!
● both package control and module loader
● hundreds components yet
Bower is for existing libs while Component is
for creating small new ones for the purpose.

13. Summary
● we live in interesting times
● there are a lot of other approaches
○ AngularJS
○ Sencha
○ Dojo
○ almost-dead libraries like Mootools...
Everything in life is a trade-off.

14. Questions?
daniel@steigerwald.cz
javascript-skoleni.cz