progressive loading with steal
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.TRANSCRIPT
![Page 1: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/1.jpg)
{
Progressive Loadingwith steal
Austin McDaniel @js_consultant
![Page 2: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/2.jpg)
Big apps have big downloads…
![Page 3: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/3.jpg)
Apps on top of apps…
App 1
App 2
App 3
Main ApplicationHandles Authentication
Opening other apps
![Page 4: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/4.jpg)
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
![Page 5: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/5.jpg)
Steal to the rescue…
![Page 6: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/6.jpg)
Directed acyclic graphs…
![Page 7: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/7.jpg)
The graph…
AppA.js
Main Application
AppB.js AppC.js AppD.js
Modal Combo box
AppA_AppB.js AppB_AppC_AppD.js
![Page 8: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/8.jpg)
steal(’main’)
.packages(‘app/appa.js’,
‘app/appb.js’,
‘app/appc.js’)
API
![Page 9: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/9.jpg)
$(‘.tab’).click(function(){
steal(‘app/appa.js’)
});
Then when you need it…
![Page 10: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/10.jpg)
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…
![Page 11: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/11.jpg)
Demo of it running and in action….
![Page 12: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/12.jpg)
Any Questions?
![Page 13: Progressive loading with Steal](https://reader033.vdocuments.net/reader033/viewer/2022052508/559c56cc1a28abb01c8b4865/html5/thumbnails/13.jpg)
https://github.com/jupiterjs/steal/tree/packages
Try it out…