inject in 5 minutes
DESCRIPTION
TRANSCRIPT
![Page 1: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/1.jpg)
LINKEDIN UED
Inject JavaScript Library
©2012 LinkedIn Corporation. All Rights Reserved.
require() for your browser
![Page 2: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/2.jpg)
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 2
Inject in 5 MinutesHold On…
![Page 3: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/3.jpg)
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
![Page 4: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/4.jpg)
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;
![Page 5: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/5.jpg)
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 5
Wasn’t that just node.js-style require() ?
![Page 6: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/6.jpg)
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 6
Wasn’t that just node.js-style require() ?
Yes
![Page 7: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/7.jpg)
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
![Page 8: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/8.jpg)
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>
![Page 9: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/9.jpg)
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>
![Page 10: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/10.jpg)
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>
![Page 11: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/11.jpg)
LINKEDIN UED©2012 LinkedIn Corporation. All Rights Reserved. 11
What’s a dependency?
Anything in require() Anything in require.ensure() Anything in define()
![Page 12: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/12.jpg)
©2012 LinkedIn Corporation. All Rights Reserved.
whoa
12
![Page 13: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/13.jpg)
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
![Page 14: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/14.jpg)
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
![Page 15: Inject in 5 Minutes](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b5140d4a7959fd6d8b48b3/html5/thumbnails/15.jpg)
LINKEDIN UED
Inject JavaScript Library
©2012 LinkedIn Corporation. All Rights Reserved.
require() for your browser