Mantri Presentation One
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mantri Presentation One

on

  • 872 views

Mantri

Mantri
Javascript Dependency System

Presentation One

Statistics

Views

Total Views
872
Views on SlideShare
869
Embed Views
3

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 3

https://twitter.com 2
https://web.tweetdeck.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mantri Presentation One Presentation Transcript

  • 1. What is Mantri?✓ Manages Web Applications Dependencies✓ Leaves no footprint on production✓ Offers a complete workflow✓ IE6+ #mantrijs mantrijs.com
  • 2. 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
  • 3. Why Manage?● Automatic dependency resolution● Enables large scale applications● Collaboration between large teams● Code scalability● Better readability #mantrijs mantrijs.com
  • 4. Mantri Development Cycle #mantrijs mantrijs.com
  • 5. Page Load BreakoutMantri RuntimeStarts Parsing mantriConf Synchronous XHR .json document.write Vendor (<script>...); Libs Synchronous XHR deps.js document.write (<script>...); Your Application Mantri Runtime Finishes Parsing #mantrijs mantrijs.com
  • 6. Mantri 50k feet View $ mantri deps Resolves Deps ✓ Concats app to one file ✓Strips require statements ✓ Compiles app ✓ Optionally wraps app ✓ Minifies third-party ✓ Concatenates all ✓ $ mantri build #mantrijs mantrijs.com
  • 7. Web Development with Mantri
  • 8. The Natural Way #mantrijs mantrijs.com
  • 9. Mantri Declarations goog.provide(app); goog.require(app.model.User); goog.require(app.view.main); var user = new app.model.User();goog.provide(app.model.User); goog.provide(app.view.main);goog.require(app.helpers); goog.require(app.view.front); goog.require(app.view.about);app.model.User = function() { goog.require(app.view.login); // ... #mantrijs mantrijs.com
  • 10. Dependency Tree #mantrijs mantrijs.com
  • 11. 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; #mantrijs mantrijs.com
  • 12. 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
  • 13. Required FilesmantriConf.json deps.js● Declare third-party libs ● Auto generated● Dependency Config ● Command line● Build Config ● Each time a declaration changes #mantrijs mantrijs.com
  • 14. Building Your Application$ mantri build✓ Grunt Task #mantrijs mantrijs.com
  • 15. Workflow Concepts
  • 16. Application Wrapping"outputWrapper": "(function(){<%=output%>})();"● IIFEs are cool● "Hides" all previously global variables● Explicit exposing #mantrijs mantrijs.com
  • 17. Module DefinitionsCommonJS AMD Asynchronous Module Definition● Used in node.js ● Extended browser support● Supported in Browser ● Uses function factories● Uses exports and module. ● Encapsulates each file in an exports keywords anon function[[ harmony:modules ]] ES6● Spec is not out yet● Doesnt support existing definitions (yet?)● Not a module loader #mantrijs mantrijs.com
  • 18. Universal Module Definitions ...or how you can expose your library as a CommonJS or AMD module. UMD module definitions can work anywhere, be it in the client, on the server or anywhere else.(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;})); https://github.com/umdjs/umd/ #mantrijs mantrijs.com
  • 19. Using Namespaces● Debugging from console● Dead easy stubbing and mocking for testing● Increases visibility and maintainability● Scales smoothly● Modern build flows decouple development from production #mantrijs mantrijs.com
  • 20. 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
  • 21. Why not Namespaces?● 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 #mantrijs mantrijs.com
  • 22. Namespaces vs ModulesTokens● requires build goog.provide(app.views.main);● large scale ready goog.require(app.views.frontpage); /* win */● calculates once per buildFilenames● no build requirement define(viewMain, [app/views/frontpage],● cant move files or folders function (viewFrontpage) { /* .. */ }); easily● calculates on each page load #mantrijs mantrijs.com
  • 23. Recap, Mantri Features
  • 24. Mantri Specifications● Synchronous, app loads before DomContentLoaded● No footprint on production● Simple provide and require statements● Available on NPM #mantrijs mantrijs.com
  • 25. Mantri Specifications● Wraps around Google Closure Tools● Uses Grunt Task Manager● Abstracts the complexity away● Low entry barrier that scales seamlessly #mantrijs mantrijs.com
  • 26. Thank You!http://mantrijs.com#mantrijs@thanpolashttp://thanpol.as