View
559
Download
5
Category
Tags:
Preview:
DESCRIPTION
Citation preview
LINKEDIN UED
Inject JavaScript Library
©2012 LinkedIn Corporation. All Rights Reserved.
require() for your browser
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 2
Inject in 5 MinutesHold On…
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 3
WWWWW
Who: LinkedIn UED Team What: require() for the browser, dependency manager When: 1 year ago (inVersion) to now Where: Hackdays and 20% time Why: Best described in an example
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 4
Why: Really Obvious JavaScript
var View = require('app/shared/BaseView');var templateEngine = require('lib/dust');var Backbone = require('lib/backbone');
var MyView = Backbone.extend(View, { templateEngine.render(/*...*/);});
module.exports = MyView;
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 5
Wasn’t that just node.js-style require() ?
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 6
Wasn’t that just node.js-style require() ?
Yes
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 7
The Landscape – a tale of 2 specifications
LibraryFeature
Ender curl RequireJS Inject
<script> X
Single File X X (†)
AMD Spec X
CJS Spec X (††) X (††)
localStorage X X X
Plugins X
(†) Multiple files can be concatenated together if every file has an AMD define(). Does not come with a build tool(††) Can support the CommonJS specification using an anonymous define() wrapper.
Inject is currently the only CommonJS compliant loader system that supports both the AMD Specification and localStorage
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 8
Bad – custom files yield a new download per page
<!DOCTYPE html><html> <head> </head> <body> <!-- ... --> <script type="text/javascript" src="onesuperhugefile.js"></script> </body></html>
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 9
Bad – a number of HTTP requests slows you down
<!DOCTYPE html><html> <head> </head> <body> <!-- ... --> <script type="text/javascript" src=”fileone.js"></script> <script type="text/javascript" src=”filetwo.js"></script> <script type="text/javascript" src=”filethree.js"></script> <script type="text/javascript" src=”filefour.js"></script> </body></html>
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 10
Better – start with “my-app”, download dependencies
<!DOCTYPE html><html> <head> </head> <body> <!-- ... --> <script type="text/javascript" src="inject.js"></script> <script type="text/javascript"> Inject.setModuleRoot('path/to/my/modules'); require.run('my-app'); </script> </body></html>
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 11
What’s a dependency?
Anything in require() Anything in require.ensure() Anything in define()
©2012 LinkedIn Corporation. All Rights Reserved.
whoa
12
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 13
The Project
https://github.com/linkedin/inject Used in Next-Generation JavaScript at LinkedIn Starts with a very directed structure, but…
– APIs let you replace functionality for “large site problems”– Plugins let you extend Inject for custom file handling
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 14
The Roadmap
Current: 0.4.1rc1 (rc2 pending) Next: 0.4.2
– Internally upgrade to Fiber.js– Launch InjectJS.com– Documentation
The Future: 0.5.x– More AMD support (Common Config, Dynamic Plugins)– Integration examples for common apps (Backbone, jQuery UI)– Improved “pointcut” system for fine-grained control to extend
functionality
LINKEDIN UED
Inject JavaScript Library
©2012 LinkedIn Corporation. All Rights Reserved.
require() for your browser
Recommended