An Introduction to Inject

INJECTJakob Heuser – maintainer@InjectJS

LinkedIn’s Web Development

6+ Vertical Engineering Groups 80+ Web Developers (horizontal) linkedin.com

– Main Site– Tools for Recruiters– Mobile Products

Performance is a shared goal in the frontend

Performance has Come a Long Way

In The Beginning

In The Beginning

Blocking (less painful in the footer) Very manual May not have needed everything you were loading

Async loading

var load = ['jquery.js', 'shared.js', 'app.js'];var head = document.getElementById('head')[0];var scr;for (var i = 0, len = load.length; i < len; i++) { scr = document.createElement('script'); scr.type = 'text/javascript'; scr.src = load[i]; head.appendChild(scr);}

Async Loader Libraries

Things got better

$LAB .script("jquery.js") .script("shared.js").wait() .script("app.js").wait(function() { // all code loaded });

Framework natives

// in your app code...YUI({ modules: { 'shared': { fullpath: 'http://example.com/js/shared.js', requires: ['get', 'node'] } }}).use('shared', function(Y) { // In YUI, "Y" is decorated with functionality});

// in shared.js...YUI.add('shared', function(Y) { // add function to the "Y" object});

Framework natives

// note, this is Dojo 1.7// Dojo 1.8 uses AMD and we're getting to that!dojo.require('shared.js');dojo.ready(function() { // custom code});

And We Brought it to the Browser

Browser Packaging Solutions

Put together discrete pieces into one payload Support the asynchronous require() method

– I want “X”, so… var x = require(“X”); Excellent single page application solutions

The CommonJS Standard

var myVar = require(“string”)– Returns the “string” module’s items assigned to the module’s “exports”

variable– Require is a global variable (always available)

require.ensure(dependencies, function() {})– The “Asynchronous/A” Draft– Download all of the dependencies (an array)– Then run the callback function (second param)– Available off the require function

Asynchronous Module Definition

The AMD Standard

define(moduleId, dependencies, function() {})– Name this download “moduleId” [optional]– Before running, download & execute dependencies (array, [optional])– Then run the callback function (“dependencies” are arguments)– If you depend on “require” or “exports”, they will work like their

CommonJS counterparts

Harmony Modules in ECMAScript!

Nested virtualization State isolation Dynamic loading Global namespace isolation Compilation hooks http://wiki.ecmascript.org/doku

.php?id=harmony:modules_examples

Some day

Let’s Talk INJECT

In A Slide

Inject is a Dependency Management Framework for the browser Supports CommonJS and AMD specifications Works cross-domain (CDNs) Does not require precompilation in order to function

For Libraries That Aren’t Inject

“AMD” examples still work for browsers Telling the framework where files are differs The “run” command will be slightly different

Our Files

inject.js – the main inject file (that’s all we need for now)

program_cjs.js – load a “math” library, and add 2 + 3 program_amd.js – same thing, with AMD syntax

math_cjs.js – exposes an “add” function for adding numbers math_amd.js – same thing, with AMD syntax

1. Get Inject

http://www.injectjs.com

Download Inject (Big Yellow Button) Documentation and Howtos Source code Mailing List

2. Build Site Structure

Directory Structure

<site_root>/js– inject.js– /modules/

program_amd.js program_cjs.js math_amd.js math_cjs.js

program_*.js

// program_cjs.jsvar math = require('math_cjs');alert('math_cjs:' + math.add(2, 3));

// program_amd.jsdefine(['math_amd'], function(math) { alert('math_amd:’ + math.add(2, 3));});

math_*.js

// math_cjs.jsexports.add = function(a, b) { return a + b;};

// math_amd.jsdefine(function() { return { add: function(a, b) { return a + b; } }});

3. Add Inject, Call Program

Inject’s Script Tag and Inject.run()

<head> <script src="/js/inject.js"></script></head><body>  <script type="text/javascript"> Inject.setModuleRoot('/js/modules'); // run CommonJS Code... require.run('program_cjs'); // math_cjs: 5 // ... or AMD Code require.run('program_amd'); // math_amd: 5 </script></body>

INJECT API

Inject.setModuleRoot Where do I find files?

setModuleRoot(String)– String: a URL path where files can be found.

/js/modules http://example.com/js/modules

If using a CDN (Advanced) use a full URL

Inject.setExpires How long to store files?

setExpires(integer)– Integer: how long in minutes to preserve the cache

Built in localStorage module to improve caching Older items from Inject are automatically dropped to make room Inject.setExpires(0) can create a “dev” environment

Inject.reset The ultimate escape hatch

Clears Inject’s localStorage Removes all in-JS memory of currently loaded items Acts as if it hasn’t seen a module yet

INJECT Advanced API

Inject.addRule Change the Behavior of a Module

addRule(Regex|String, Integer?, Object)– Regex|String: if the module matches the regular expression / string,

any alterations in Object will be applied– Integer (optional): allows you to dynamically reorder the rules by

assigning them weights– Object: a set of alterations to perform

“Lock” a module’s identifier to a URL Turn on/off the automatic attachment of “.js” to module IDs when

converted to a URL Rewrite the code before it is executed

addRule Lock a Module’s Path

Inject.addRule('module/path', { path: 'http://example.com/external/module.js'});

Inject.addRule('module/anotherPath', { path: ’/local_directory/library/module.js'});

addRule Turn on/off the “.js” Suffix

// module/path.jsInject.addRule('module/path', { useSuffix: true});

// module/pathInject.addRule('module/path', { useSuffix: false});

addRule Alter the File (ie non AMD/CJS Code)

// <= 0.4.0Inject.addRule(/^jquery$/, { path: '/path/to/jquery.js', useSuffix: false, pointcuts: { after: function () { module.exports = jQuery.noConflict(); } }});

addRule Alter the File (ie non AMD/CJS Code)

// >= 0.4.1Inject.addRule(/^jquery$/, { path: '/path/to/jquery.js', useSuffix: false, pointcuts: { afterFetch: function (next, text) { next(null, [ text, 'module.exports = jQuery.noConflict();' ].join('\n')); } }});

Inject.plugin Extend Functionality to non-JS Things

plugin(String, Object, Object?)– String: an identifier for the plugin. Automatically creates an addRule()

that matches modules beginning with “<string>!”– Object: this is the same object used in addRule() to modify a module– Object (optional): any functions placed in the 3rd parameter are made

available under Inject.plugins.<string>

An easy interface for addRule to handle non-JS files Inject comes with support for CSS, JSON, and Plain Text

plugin The “text” Plugin

Roadmap

0.4.1 Final– Robust plugin support– afterFetch non-blocking pointcuts

0.4.2 Librarian Release– Internal library upgrades: Link, Fiber, EasyXDM– Standardize testing framework

0.4.x Planned– localStorage on CDN side– Reduced code base (EasyXDM for IE7 only)– Coffeescript Plugin– Npm “install”-like functionality, global modules

INJECThttps://github.com/linkedin/inject

Useful Links

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://dojotoolkit.org/documentation/tutorials/1.8/modern_dojo/ http://www.injectjs.com http://requirejs.org https://github.com/amdjs/amdjs-api/wiki/AMD http://www.commonjs.org

An Introduction to Inject

Documents

Transcript of An Introduction to Inject

Microcontroller based anesthesia inject

NovoLog - Institute For Safe Medication Practicesinsulin into a syringe and inject it, select the dose on a pen device and inject the insulin, or use an insulin pump Before injecting

HIGHLIGHTS OF PRESCRIBING INFORMATION • Inject ...

Oil Inject

Inject Methanol

PEOPLE WHO INJECT DRUGS PROGRAMME BRIEFING

BonOs Inject - marmaratibbiurunler.com.trmarmaratibbiurunler.com.tr/wp-content/uploads/2016/... · BonOs ® Inject • Vertebral body stabilisation with Vertebroplasty BonOs® Inject

Deflux for Stress Urinary Incontinence.radistribution.com/images/brochures/Deflux-SUI-Brochure.pdf · Deflux / Inject Control / For Stress Urinary Incontinence Inject Control Email

History of Embolotherapy 1904 Dawbain - inject melted wax/carotid 1930 Brooks - inject muscle/int. carotid 1960 Lussenhop & Spence - MM spheres.

ence - Agri-Inject

DEMO: Akatosh: Automated Cyber Incident Verification and ... · 1 INTRODUCTION While Intrusion ... Cuckoo Sandbox [3], an open source malware analysis system, to inject malware from

Inject agility back in your organization Inject agility ...

Injections: Drugs S-Z Policy (inject drug s-z) › pubsdoco › publications › ...inject drug s-z 6 2 – Injections: Drugs S-Z Policy April 2016 • Patients should have an evaluation

Inject Cleaner Premium_esp

C INJECT NY - MLREMS - Home · PDF fileSlide 1 . CHECK & INJECT NY SYRINGE EPINEPHRINE KITS FOR BLS PROVIDERS. Hello and welcome to the Check & Inject New York Training Program. I’m

'Schematic Diagram:Core Spray Inboard Inject Shutoff ...

Injidime Inject Care

How to Use Oxal Easy Inject

Code Inject File Vuln Auth Bypass

Injections: List of Codes (inject list)