Mantri Presentation One

Presenting the Mantri Dependency System

Transcript

2. What is Mantri? ✓ Manages Web Application's Dependencies ✓ Leaves no footprint on production ✓ Offers a complete workflow ✓ IE6+ #mantrijs mantrijs.com
3. What Dependencies? • Multiple Javascript Files • Each file can depend on other files • Order of loading • Order of evaluation • Order of concatenating and building #mantrijs mantrijs.com
4. Why Manage? • Automatic dependency resolution • Enables large scale applications • Collaboration between large teams • Code scalability • Better readability #mantrijs mantrijs.com
5. Mantri Development Cycle #mantrijs mantrijs.com
6. Page Load Breakout #mantrijs mantrijs.com mantriConf .json Vendor Libs deps.js Your Application Mantri Runtime Finishes Parsing Synchronous XHR document.write ('<script>...'); Mantri Runtime Starts Parsing document.write ('<script>...'); Synchronous XHR
7. 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 ✓ #mantrijs mantrijs.com
8. Web Development with Mantri
9. The Natural Way #mantrijs mantrijs.com
10. 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); #mantrijs mantrijs.com
11. Dependency Tree #mantrijs mantrijs.com
12. Mantri Uses Namespaces goog.provide('app.views.frontpage'); // equals to var app = app || {}; app.views = app.views || {}; app.views.frontpage = app.views.frontpage || {}; // and... window.app === app; #mantrijs mantrijs.com
13. 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" ... #mantrijs mantrijs.com
14. Required Files mantriConf.json • Declare third-party libs • Dependency Config • Build Config deps.js • Auto generated • Command line • Each time a declaration changes #mantrijs mantrijs.com
15. Building Your Application $ mantri build ✓ Grunt Task #mantrijs mantrijs.com
16. Workflow Concepts
17. Application Wrapping "outputWrapper": "(function(){<%=output%>})();" • IIFEs are cool • "Hides" all previously global variables • Explicit exposing #mantrijs mantrijs.com
18. Module Definitions CommonJS • 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 #mantrijs mantrijs.com
19. 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/ #mantrijs mantrijs.com
20. • 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
21. 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 #mantrijs mantrijs.com
22. • 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
23. Namespaces vs Modules goog.provide('app.views.main''); goog.require('app.views.frontpage'); /* win */ #mantrijs mantrijs.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) { /* .. */ });
24. Recap, Mantri Features
25. • Synchronous, app loads before DomContentLoaded • No footprint on production • Simple provide and require statements • Available on NPM Mantri Specifications #mantrijs mantrijs.com
26. Mantri Specifications • Wraps around Google Closure Tools • Uses Grunt Task Manager • Abstracts the complexity away • Low entry barrier that scales seamlessly #mantrijs mantrijs.com
27. Thank You! http://mantrijs.com #mantrijs @thanpolas http://thanpol.as