What is Mantri?✓ Manages Web Application's Dependencies

✓ Leaves no footprint on production

✓ Offers a complete workflow

✓ IE6+

#mantrijsmantrijs.com

What Dependencies?● Multiple Javascript Files

● Each file can depend on other files

● Order of loading

● Order of evaluation

● Order of concatenating and building

#mantrijsmantrijs.com

Why Manage?● Automatic dependency resolution

● Enables large scale applications

● Collaboration between large teams

● Code scalability

● Better readability

#mantrijsmantrijs.com

Mantri Development Cycle

#mantrijsmantrijs.com

Page Load Breakout

#mantrijsmantrijs.com

mantriConf.json

Vendor Libs

deps.js

Your Application

Mantri Runtime Finishes Parsing

Synchronous XHR

document.write('<script>...');

Mantri RuntimeStarts Parsing

document.write('<script>...');

Synchronous XHR

Mantri 50k feet View

$ mantri deps

$ mantri build

Resolves Deps ✓Concats app to one file ✓

Strips require statements ✓Compiles app ✓

Optionally wraps app ✓Minifies third-party ✓

Concatenates all ✓

#mantrijsmantrijs.com

Web Development with Mantri

The Natural Way

#mantrijsmantrijs.com

Mantri Declarations

goog.provide('app.model.User');

goog.require('app.helpers');

app.model.User = function() { // ...

goog.provide('app');

goog.require('app.model.User');goog.require('app.view.main');

var user = new app.model.User();

goog.provide('app.view.main');

goog.require('app.view.front);goog.require('app.view.about);goog.require('app.view.login);

#mantrijsmantrijs.com

Dependency Tree

#mantrijsmantrijs.com

Mantri Uses Namespacesgoog.provide('app.views.frontpage');

// equals tovar app = app || {};app.views = app.views || {};app.views.frontpage = app.views.frontpage || {};

// and...window.app === app;

#mantrijsmantrijs.com

The HTML Document<script src="js/libs/mantri.web.js"></script>

<script data-require="app" ...<script data-config="/mantriConf.json" ...<script data-deps="/deps.js" ...

#mantrijsmantrijs.com

Required FilesmantriConf.json● Declare third-party libs● Dependency Config● Build Config

deps.js● Auto generated● Command line● Each time a declaration

changes

#mantrijsmantrijs.com

Building Your Application$ mantri build

✓ Grunt Task

#mantrijsmantrijs.com

Workflow Concepts

Application Wrapping"outputWrapper": "(function(){<%=output%>})();"

● IIFEs are cool● "Hides" all previously global variables● Explicit exposing

#mantrijsmantrijs.com

Module DefinitionsCommonJS● Used in node.js● Supported in Browser● Uses exports and module.

exports keywords

AMD Asynchronous Module Definition

● Extended browser support● Uses function factories● Encapsulates each file in an

anon function

[[ harmony:modules ]] ES6

● Spec is not out yet● Doesn't support existing

definitions (yet?)● Not a module loader

#mantrijsmantrijs.com

Universal Module Definitions

(function (root, factory) { if (typeof exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && define.amd) { define(factory); } else { root.returnExports = factory(); }}(this, function(){return app;}));

UMD module definitions can work anywhere, be it in the client, on the server or anywhere else.

...or how you can expose your library as a CommonJS or AMD module.

https://github.com/umdjs/umd/

#mantrijsmantrijs.com

● Debugging from console

● Dead easy stubbing and mocking for testing

● Increases visibility and maintainability

● Scales smoothly

● Modern build flows decouple development from

production

Using Namespaces

mantrijs.com#mantrijs

mantrijs.com

So Why Not Modules?● The Web is not the server. Nor it will ever be.

● Module Definitions are not Module Loaders.

● Debugging requires inspector with break points.

● Stubbing for Testing is really hard.

● Nasty problems, lengthy troubleshooting.

● Overhead. ~+7.5% minified, ~+5.5% gzip

#mantrijsmantrijs.com

● Can become verbose app.ui.combo.EventType Use an alias

● Namespace conflicts Use a wrapping IIFE

● Exposes internal methods Use a wrapping IIFE

● Modules are the future Use a wrapping IIFE, UMD

● Modules are cool

Why not Namespaces?

mantrijs.com#mantrijs

mantrijs.com

Namespaces vs Modules

goog.provide('app.views.main'');

goog.require('app.views.frontpage');

/* win */

#mantrijsmantrijs.com

Tokens● requires build● large scale ready● calculates once per build

Filenames● no build requirement● can't move files or folders

easily● calculates on each page

load

define('viewMain, ['app/views/frontpage'],

function (viewFrontpage) { /* .. */ });

Recap, Mantri Features

● Synchronous, app loads before DomContentLoaded

● No footprint on production

● Simple provide and require statements

● Available on NPM

Mantri Specifications

#mantrijsmantrijs.com

Mantri Specifications● Wraps around Google Closure Tools

● Uses Grunt Task Manager

● Abstracts the complexity away

● Low entry barrier that scales seamlessly

#mantrijsmantrijs.com

Thank You!

http://mantrijs.com

#mantrijs@thanpolashttp://thanpol.as