A Tour of Mimosa


A toolkit for modern browser development




What is Mimosa?



A convention over configuration, batteries included tool for developing modern browser applications.




What comes baked in?




  1. JS Transpilers
  2. CSS Pre-processors
  3. HTML Micro-templaters
  4. Server integration
  5. Project Creation
  6. File Watching
  7. Bower integration
  8. JIT Notifications

...
More!



  1. 9. Live Reload (no $!)
  2. 10. Minification
  3. 11. AMD/RequireJS Support
  4. 12. Concatenation/Optimization
  5. 13. JSHinting
  6. 14. CSSLinting
  7. 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





Installation




Built entirely with node.js and published to NPM, so...



Install node.js


Node website has links to installers for most platforms. http://nodejs.org/

The node.js github wiki has other installation means. https://github.com/joyent/node/wiki/Installation



Installing node also installs NPM


Node Package Manager, https://npmjs.org/ 

The home for the most active/prolific developer community around.



Use NPM to install Mimosa


   npm install -g mimosa

-g installs Mimosa globally, making it available as a command-line utility from wherever you might want to use it.




Lets talk features...

1) JavaScript Transpiling


Mimosa has transpiler support for...

  1. CoffeeScript
  2. LiveScript
  3. Iced CoffeeScript
  4. TypeScript
  5. 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?




No plugins, no config.




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"




Speaking of which...

2) CSS Pre-Processors



Pre-processor support for...

  1. Stylus
  2. SASS
  3. LESS

Aren't many others to support, someday Rework?




Again, no plugins, no config


Out of the box support


  1. Stylus = .styl
  2. *SASS = .scss, .sass
  3. 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...

  1. Dust
  2. Embedded CoffeeScript Templates (ECO)
  3. Embedded JavaScript Templates (EJS)
  4. Emblem
  5. Handlebars
  6. Hogan
  7. Static HTML
  8. Jade
  9. Lodash
  10. Underscore
  11. 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:

  1. Host your app
  2. Kick off your node.js server
  3. 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.

9) Live Reload





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.




  1. AMD Path Verification
  2. Notify when AMD paths are broken or wrong
  3. Handle shims, maps
  4. Nested requires and defines
  5. Detect circular dependencies
  6. 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.


  1. Hundreds of config options
  2. Built to be massively and easily pluggable
  3. Testing + Packaging support via external modules
  4. Easy module install, modules install themselves
  5. Combine --minify and --optimize for more control
  6. Easy and documented deploy to Heroku
  7. Other commands,  build, clean




One more thing...


Source Maps!

CoffeeScript & Iced CoffeeScript

  1. Source Map back to JavaScript
  2. Source Map minified JS back to original source
  3. Source Map combined r.js back to original source


Put breakpoints in the CoffeeScript source!

Me



David Bashford

@dkbashford
@mimosajs

Mimosa Primer

By David Bashford

Mimosa Primer

An intro to Mimosa, a tool for building modern browser applications. This deck covers each of the main features of Mimosa in brief detail.

  • 23,330

More from David Bashford