A Tour of Mimosa
A toolkit for modern browser development
A convention over configuration, batteries included tool for developing modern browser applications.
-
JS Transpilers
-
CSS Pre-processors
- HTML Micro-templaters
-
Server integration
-
Project Creation
-
File Watching
- Bower integration
-
JIT Notifications
...
More!
- 9. Live Reload (no $!)
- 10. Minification
-
11. AMD/RequireJS Support
-
12. Concatenation/Optimization
-
13. JSHinting
-
14. CSSLinting
-
15. Other things that are also awesome
Why Mimosa?
1) Super friendly for new developers
2) No need to find other plugins or libraries.
3) Convention over (not instead of) Configuration. The first step for starting a web project shouldn't be to cobble together 200 lines of config. Meanwhile, everything should be configurable.
4) Full, first-class support for AMD/RequireJS
Built entirely with node.js and published to NPM, so...
Installing node also installs NPM
The home for the most active/prolific developer community around.
Use NPM to install Mimosa
-g installs Mimosa globally, making it available as a command-line utility from wherever you might want to use it.
1) JavaScript Transpiling
Mimosa has transpiler support for...
- CoffeeScript
- LiveScript
- Iced CoffeeScript
- TypeScript
- Coco
Or you can kick it old school and just use JavaScript.
Always more transpilers on the way.
So what plugins need to be installed and configuration tweaked to make those work?
Out of the box transpiler support based on file extension
CoffeeScript compiler = .coffee
LiveScript compiler = .ls
...and so on
This is a common Mimosa pattern
Mimosa says, "O, it's one of these files, I'll do [this] with it"
2) CSS Pre-Processors
Pre-processor support for...
Aren't many others to support, someday Rework?
Again, no plugins, no config
Out of the box support
-
Stylus = .styl
-
*SASS = .scss, .sass
- LESS = .less
And you can use vanilla CSS if you wish
*SASS support is available via node or can use SASS installed via Ruby
For CSS pre-processors, Mimosa takes great pains to only compile the right files.
If foo.styl and bar.styl both include/import baz.styl, and baz changes, Mimosa compiles both foo and bar.
So, transpilers for JavaScript, pre-processors for CSS, so you have to figure there is something for...
3) Micro Templates
Mimosa has micro-template support for...
- Dust
- Embedded CoffeeScript Templates (ECO)
- Embedded JavaScript Templates (EJS)
- Emblem
- Handlebars
- Hogan
- Static HTML
- Jade
- Lodash
- Underscore
- Ractive
There are so many micro-templating libraries, support for more is inevitable. Don't see the one you prefer? Ask to have it added!
One more time...
No plugins, no config.
But you might have literally hundreds of templates.
That is a lot of tiny files to compile and serve.
Mimosa bundles all the compiled templates into a single file named templates.js.
Compiled template functions are all attached to an object keyed by the file name of the template.
And don't worry, if you need to break it out into multiple files, there's config for that.
4) Server/Hosting
Mimosa can:
- Host your app
- Kick off your node.js server
- Deposit compiled files to your server
Mimosa's Server
Mimosa can host your application in development, but this is the least flexible option.
Typical use case: a static site.
Your node.js server
Simple hooks allow Mimosa to start a node.js based server
Tell Mimosa where your server is, implement a simple interface, and Mimosa will fire it up at the appropriate time.
No server
Mimosa can also deposit the compiled assets anywhere you wish.
Wherever your server expects them to be.
The Rails "public" directory for example.
Now that we've covered the various pieces of an application, lets scaffold out a project
5) Create a Project
mimosa new [nameOfProject]
Mimosa prompts for the technologies you want in your app...
...and creates an application with starter assets for the chosen technologies.
Important to note that selecting those technologies only effects the starter files provided in the new project.
It doesn't limit your ability to switch technologies later.
It doesn't hard code or configure the project to only function with those techs.
So, you have a project.
Now what?
6) File Watching
mimosa watch --server
This is the Mimosa command you will use most often.
It starts watching your file system,
performs initial compilation of assets,
then starts your app's server.
When Mimosa starts up, it compiles all your CSS, JavaScript, and Micro-Templates
And provides feedback on the console
mimosa watch stays running.
And continues to compile all your files as you change them in real time.
By default your uncompiled assets are in an "assets" folder at the root of the project.
And Mimosa places the compiled assets in a "public" folder also at the root of the project.
Bower Integration
Starting with Mimosa 1.0, Bower integration comes baked in.
What is Bower?
Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack.
More opinionated build stack? That is where Mimosa comes in.
Mimosa works with Bower to install your dependencies where they belong
usually in vendor directories
And Mimosa keeps track of your Bower situation to rerun Bower installs when you need them.
8) Immediate Feedback
Growl integration included.
If something breaks or does not compile, you'll know straight away.
Refreshes your browser when JavaScript assets change
Recalculates styles when CSS changes.
No browser refresh, the page just reevaluates its styles.
10) Minification
mimosa watch -s --minify
-s is shorthand for --server.
Reduce size of files to smallest possible for loading speed
--minify tells Mimosa to compact all the compiled JS and CSS assets
CSS is single lined
.foo{text-align:center}.bar{padding:5px}.baz{margin:3px}
JavaScript is mangled and compressed
function(e){var r;return r=new e,r.render("body")}
11) AMD/RequireJS Support
Mimosa was built with RequireJS in mind.
-
AMD Path Verification
- Notify when AMD paths are broken or wrong
- Handle shims, maps
- Nested requires and defines
- Detect circular dependencies
- Manage common config for multiple modules
And the most important piece of RequireJS support?
12) Optimization/Concatenization
mimosa watch -s --optimize
-s short for --server.
Build a single file based on the JavaScript dependency tree as determined by module AMD definitions
RequireJS has a companion optimization tool called r.js.
r.js has its own configuration which Mimosa builds based on its understanding of your app.
transparent to you
--optimize also minifies because r.js comes with its own minifier
so --minify isn't necessary
13) JSHint
JavaScript is hinted.
14) CSSLint
CSS is linted
Brief look at configuration
Configuration starts off either empty or just a few lines.
But all the components have several different configuration options if varying from convention, or if doing something complex
And the configuration file...
mimosa-config.coffee
...is self-documenting. It contains all the various configuration options with descriptions.
But all commented out.
What else?
Topics for another time.
- Hundreds of config options
-
Built to be massively and easily pluggable
- Testing + Packaging support via external modules
- Easy module install, modules install themselves
- Combine --minify and --optimize for more control
-
Easy and documented deploy to Heroku
-
Other commands, build, clean
Source Maps!
CoffeeScript & Iced CoffeeScript
- Source Map back to JavaScript
- Source Map minified JS back to original source
- Source Map combined r.js back to original source
Put breakpoints in the CoffeeScript source!
Me
David Bashford
@dkbashford
@mimosajs