Saturday, October 26, 2013

braindump of Script Loading, AMD and SPA (Single Page Applications) as hosted by Ryan Vice at Pablo's Fiesta in room 104

Ryan: We haven't seen any fantastic approaches out in wild when loading JavaScript in single pages apps. We wants feedback from others. Amir Rajan: console.log will break IE8! Ryan: If you bootstrap a SPA, can you create an abstract factory and have require.js hand you dependencies. How do we delay load from bootstrap time. Kevin Miller: Calling require outright will allow you to delay a call to another piece until you need it. Guy in grey sweater: Not all of your models need to be declarative. Amir: Separate a SPA into small spas. Load dependencies per view, this also prevents memory leaks. Kevin: Intercept clicks on links in a multiple-SPA-within-SPA app to keep links from going back to the server. Grey sweater guy: You throw away some minification when you call require directly in lieu of at the bootstrapping. A guy named Gabe: Calling under this condition this and other this other condition that can become a mess. Jeremy Miller: think of this logic as a proxy in lieu of a service locator. Ryan: As long as you have the service locator in an abstract library you will not have an antipattern. Jeremy Miller: The value to do composition upfront is valuable. If you use service locator you are making your class have a hard dependency that is hard to test. Dependency injection is the way to go and Angular is building this way. Ryan: In the multiple SPA approaches you release memory when you change SPAs. Amir: A Dom element clinging to a delegate is the source for memory leaks he's seen. Alot of his memory issues is in IE8 and IE7 and Angular is weak in this regard. Ryan: Let's switch topics to whether or not using AMD patterns to create reusable stuff is worth doing. Guy in pink shirt (Jonathan Mateos?) is saying that you have to know when it's useful instead of just using it out of the gate. Amir: Pulling in as if a namespace call window.module.something to call in globals. Create a JSON object that has functions and has no state. Where AngularJS and those services shine is when they deliver their own components not home- rolled components. Pink shirt guy: Don't prematurely optimize for AMD. Guy is glasses: Spinning up AMD for mobile is expensive! Pink shirt guy: Minification combined with concatenation (just reach to dependencies synchronously) is a good way to go until you really need asynchronous loading. Guy in glasses: AMD is a lot of complexity. Pink shirt guy: Trying to get require to work with nonAMD-friendly stuff is rough. Amir: Node.js uses a different means for managing modules. Pink shirt guy: Angular manages code organization and this there is little reason to drag in AMD. Guy with glasses: in browserify you use require statements in the browser for your requirements. Ryan Node: it was origanally for running node modules in the browser. Gabe: heard angular breaks down in using requirejs when you scale it up. Amir: Is AMD good for using underscore, moment, etc. and wonders if leaving more esoteric stuff to another means. Guy in grey sweater: if you don't load jQuery via AMD then modules that need it are going to fail. He thinks you should either embrace require or not use it. It's small modules maintaining small fine grain scripts that do things makes troubleshooting easy. Grey sweater guy doesn't love ko.observable. He likes that knockout is a grid of observable items. Amir: For client side caching, at Web.config a Guid drives versioning of .js files and leaves it to browsers to cache it. Grey sweater guy asserts that Amir is using caching based on a Guid in the URL string and is just changing it out to jog a reversioning refresh. Amir: AWD CNDs are used in his app. Amazon has a CND offering. Guy behind me: You can also use cloud flare for hosting static images and the like. Gabe: how do you handle disposing of resources? Amir: do memory profiling and keep spas small. Grey sweater guy: chrome profiling tools are really beneficial for this. Kevin: had small amount of leaks for backbone and marionette cleaned up problem. Guy in glasses says Angular is much less leaky than backbone. Amir: Anytime you show or hide elements things can get leaky. If you delete a DOM element and a class is still around and you reload the KO.observable you may have trouble. Gabe: is there a difference in intranet versus internet apps? Guy with glasses uses the I'm on dialup sanity checking on Fiddler. Don't expect to get under 100 milliseconds on a phone because it takes a while for a phone to spin up a ping outwards. You are ahead to make massive apps that require a big download. Ryan: you are requiring a certain amount of battery time Everytime you make a request. guy in glasses: Google will make six requests per domain outwards when in loading. Asks is anyone doing end to end testing and others mention. I ask about dirty checking. Amir: Angular has scope. An event loop sees if an object has changes. If an object is dirty (changed) then an event happens. KO.observable drives this in backbone. We seem to be done.

No comments:

Post a Comment