View
770
Download
6
Category
Preview:
DESCRIPTION
Mantri Javascript Dependency System Presentation One
Citation preview
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
Recommended