Scalable JavaScript Application Architecture
videos

Scalable JavaScript Application Architecture

on Nov 6th 2010 with 35 comments
Tutorial Details
  • Topic: JavaScript
  • Difficulty: Advanced
  • Length: 52 Minute Video

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

This week’s featured lecture comes courtesy of Nicholas Zakas, who is an engineer for the Yahoo! home page. He has an uncanny ability to turn high level, and confusing concepts – particularly JavaScript related – into something consumable by the general development community. But truthfully, this video on scalable JavaScript is only one of over a dozen fantastic talks that he’s given over the years.

Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. He is currently principal front end engineer for the Yahoo! homepage and is a contributor to the Yahoo! User Interface (YUI) library.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.code.my devlim

    It’s hard to read and see any code & any slide on the presentation on this video.

    • http://www.jeffrey-way.com Jeffrey Way

      There’s a link to the slides underneath the video above.

      • http://www.code.my devlim

        didnt see the “View the slides.” word, the “View the slides.” word too small, btw, thank for notice me.

  • A reader

    No textual alternative?

    Pff.

  • http://ingo-fahrentholz.com Ingo Fahrentholz

    I really liked this video. Thanks for sharing.

  • ohmno

    Cool! I really like your presentations!

  • http://laroouse.com piyansitll

    bu kel adam da kim böyleleri hep parayı vuruyor valla

  • Will

    Definitely one of the best JS talks I’ve seen. Thanks!

  • Mike

    i’m reading Nicolas book now about JavaScript ,and i found this is another great presentation

    I found this cool site that shows all the web lectures and conferences and would like to share it with you.

    http://ontwik.com/

  • Alexandre Bars

    Great Video, I saw all yahoo video about JS, the most instructive were from you and Oracle D. Crockford /

  • ahowell

    If all base library (jquery, dojo, etc) is abstracted from the modules, how do modules utilize base library plugins? Some examples that I’m thinking about is jQuery effects, sliders, lightboxes… can be anything. Are we supposed to build an interface for all those into the sandbox? I could build a sandbox.lightbox() that hands off to the core to bind the element to the jQuery lightbox plugin… but what if I want to change the actual lightbox plugin down the road. A different plugin might take different parameters, so now I have to modify my sandbox (which we’re not supposed to do). Just doesn’t seem very effective but I could be/ probably am missing something.

    If i utilize the plugin in my module, that completely defeats the purpose of all this.

    Have any of you guys figured out how to approach this or have thoughts on it?

    • http://andrewburgess.ca Andrew Burgess

      That’s really a good question. You might be able to do it this way:

      * Have sandbox.lightbox() method that takes an object as a single parameter. This way, you can add / remove parameters as properties of the object, and since the sandbox itself doesn’t need to work with those parameters (as they’re all wrapped in one argument) changing the lightbox underneath won’t matter.

      * Then, the sandbox should only talk to the core, not the base. The base would be jQuery (or whatever) + the plugin(s); so the core abstracts the plugin, and takes the one-object parameter and does what it needs to. Since (part of) the reason for the core’s existence is to abstract the base, you can change the core as necessary when swapping plugins in the base.

      Anyway, that’s just my 2 cents. I’ll be interested to see what others come up with. :)

      • Barry

        Hi Andrew,

        I’ve got also a question about implementing core methods inside the Sandbox.
        If i have no control about modules that are being made and registred to the core, i can never check if the modules are using core methods without going to the Sandbox.

        So the core instance is given to the sandbox, but what if a module directly want to communicate with the core, that is possible because the Core is publicly available in the window object.

        Modules can avoid using the sandbox, is there a clever way of protecting that?

        Ofcourse i can wrap the Core in a anonymous function, but then i cannot create new modules.
        I hope my question makes sense :)

      • http://andrewburgess.ca Andrew Burgess

        I think Nicolas talked about this in the video; there’s no reason technically why the modules can’t access the core. You just have to enforce good coding practices and only let your module code access the sandbox . If you want to use this pattern, you’ve got to follow the “rules” or it isn’t going to be worth your time.

      • Barry

        Is it logical to not give every module the same functionality from the core?
        But if you consifer the next sample code, you can give each module their own behavior…

        Core = (function() {
        var basicFunctionality = {
        /* methods and properties */
        };
        var moduleFunctionality = {
        myAModule: {
        implement: basicFunctionality,
        methodA1: function() {},
        methodA2: function() {}
        },
        myBModule: {
        implement: basicFunctionality,
        methodB1: function() {},
        methodB2: function() {}
        }
        };

        return {
        createModule: function(moduleId) {
        /* example code */ Sandbox.create(moduleFunctionality[moduleId], /* more */);
        }
        }
        })();

        And maybe adding an Interface.

      • mashour

        Perhaps this could work:

        //In the core
        Core.ext.lightbox = function(elementArray) {
        $(elementArray).lightbox();
        };

        //In the sandbox
        Sandbox.ext.lightbox = function(elementArray) {
        Core.ext.lightbox(elementArray);
        };

        //The basic module structure and specific lightbox useage
        Core.register(“my-photo-album”, function() {
        if(typeof Sandbox.ext.lightbox === ‘function’) {
        var album = Sandbox.dom.getElementById(‘photo-album’),
        links = Sandbox.dom.find(‘a’, album); //finds all tags within album element

        Sandbox.ext.lightbox(links);
        }
        });

        ext would be a general extension object that would handle Core extensions and dom would be the Core object for dom traversal and manipulation. In the above case, dom would probably be using/exposing jQuery methods.

      • http://andrewburgess.ca Andrew Burgess

        Really, I don’t think your modules would end up having much similar code in the implement ( or init, as Zakas called it) method, so I don’t think that would be worth it. Also, your modules shouldn’t be inside the core. As modules, they should be modular.

        Sorry to pitch myself here, but if you’re interested, I’ve written about this pattern in a recent premium tut here on Netttus+ (or, if you’re not a premium member, you can get it on the Tuts+ Marketplace.

    • http://www.linkedin.com/in/koistya Koistya `Navin

      Nice presentation. Thanks Nickolas!

      I would like to see some real world code samples of App Core and Sandbox implementations.

      • http://flavors.me/ionutzp ionut popa

        me2

      • http://www.richardscarrott.co.uk Richard Scarrott

        I’d really like to see an application framework of this nature become common place!

        Does anyone know of a framework out there (preferably utilising jQuery as it’s base) that promotes loosely coupled patterns – it would be good to have a play with to get a better understanding.

  • Mike Heaver

    Video no longer available?

    • http://www.jeffrey-way.com Jeffrey Way

      It’s working for me…

      • Danielson

        The attitude isn’t working for me…

  • mashour

    Amazing stuff! This is how we should be building our applications. I’m actually seriously considering implementing this kind of stack on my next project, even though it’s not that complicated. But it’s a freelance gig and I feel that if the code is organized that way, a new developer maintaining the app or changing a part of it can actually do it much more easily (given that the approach is well documented).

    Between Zakas and Crockford, Yahoo! is establishing itself as an incredible source of knowledge for the rest of the web dev community. By the way, if you want to fall in love with JavaScript and push it to the point where you’re crashing your browser and learning its limits, while actually learning the parts of the language that are well designed, check out Crockford’s book, JavaScript The Good Parts. http://oreilly.com/catalog/9780596517748. Best web dev book I’ve bought in recent months.

    Thanks for a great post!

  • http://mixmo-anime.blogspot.com kankaro

    Kindly re-up the video, it’s no longer available… thanks a lot.

  • Dan

    This presentation was enlightening. Thank you for sharing!

  • http://www.ipossu.com Petteri Torssonen

    Hi,

    Is there any examples about that notify function and sandbox etc?

  • Barry

    I like the tutsplus network, and i am a premium member also, the only downside of this site is, is it doenst have a community board, maybe there is a special reason for to not have this feature. But i think it is worthy to have here.

    @mashour:
    Also consider “Javascript High Performance” from Zakas, personal i think thats a better book. I have read “Javascript the Good Parts” also. Even as “Pro Javascript Design Patterns”, wich i like very much.

    @andrew:
    I saw your tutorial a while ago, i like it very much, but…
    I still dont see the useful effect, of using a sandbox within this situation.
    The only effort i see is a more structured way of communication (i always know that Modules are talking with the Sandbox), and i have a clear view when looking at the sandbox what kind of limitations or possibilities are given to the modules. But other than that, its just an extra bridge for communication, wich in -theory- is slower. (not noticeable)

    Is there any other reason i am missing for using a sandbox in this way?

  • http://www.yahoo.com Guest

    This is old, why are you posting this?

  • http://blemble.com Richard Francis

    Hi,

    A colleague of mine built a toolkit to manage complex JS applications (modules, loose coupling) inspired by this presentation.

    Check it out: https://github.com/slyg/cantorJS

    Rich

  • http://scaleapp.org/ flosse

    Hey folks, I’ve got inspired by this and Nicholas great presentation too and created a little framework that implements some ideas.
    Have a look at https://github.com/flosse/scaleApp or http://scaleapp.org/
    I’d love to get some feedback. Thanks!

  • Artem

    Richard Francis and flosse
    Thanks guys! You helped me so much!

  • Amir

    I get:
    this video is not available in your location!