Your SlideShare is downloading. ×
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Mantri Presentation One
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mantri Presentation One

664

Published on

Mantri …

Mantri
Javascript Dependency System

Presentation One

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
664
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×