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.
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)
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...
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.