inject in 5 minutes

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…


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


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;


Wasn’t that just node.js-style require() ?


Wasn’t that just node.js-style require() ?

Yes


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

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>

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>

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>


What’s a dependency?

Anything in require() Anything in require.ensure() Anything in define()


whoa

12


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

https://github.com/linkedin/inject


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


require() for your browser

inject in 5 minutes

Documents

linkedin ued teamwhat

down2012 linkedin corporation

page2012 linkedin corporation

myview linkedin ued

linkedin ued better

runmyapp linkedin ued

amd specification

common apps backbone