Embed Size (px)
DESCRIPTION
Large one page JavaScript have applications have big downloads for all their assets. This talk demonstrates the problems you encounter when trying to split up these applications and introduces a new enhancement still in beta to JavaScriptMVC's Steal dependency management system that uses direct acyclic graphs to intelligently split up the assets in a manner they can be packaged in the most efficient manner possible.
Citation preview
{
Progressive Loadingwith steal
Austin McDaniel @js_consultant
Big apps have big downloads…
Apps on top of apps…
App 1
App 2
App 3
Main ApplicationHandles Authentication
Opening other apps
Widgets inside of widgetsinside of other widgets inside of other widgets inside of other widgets…
App A
Main Application
App B App C App D
Modal Combo box
Steal to the rescue…
Directed acyclic graphs…
The graph…
AppA.js
Main Application
AppB.js AppC.js AppD.js
Modal Combo box
AppA_AppB.js AppB_AppC_AppD.js
steal(’main’)
.packages(‘app/appa.js’,
‘app/appb.js’,
‘app/appc.js’)
API
$(‘.tab’).click(function(){
steal(‘app/appa.js’)
});
Then when you need it…
steal.packages(, ‘app/appa.js’: ‘app/packages/appb.js’ })
steal.p.make({ src: ‘appa.js’, has: *‘app/jquery.js’+ })
steal.p.make({ src: ‘app/packages/appa.js’, needs: *‘app/appa_appb.js’+ })
What it generates…
Demo of it running and in action….
Any Questions?
https://github.com/jupiterjs/steal/tree/packages
Try it out…
