An overview of Scalable Web Application Front-end
1 like515 views
The document outlines the architecture and methodology for developing scalable web applications, emphasizing the importance of modular JavaScript frameworks to mitigate common issues in large codebases. It describes core components such as modules, sandboxes, application core, and plugins, which facilitate loose coupling and efficient communication between different parts of the application. Additionally, it introduces the 'scaleapp' framework, providing a quick start guide for registering and managing modules within this architecture.
An overview of Scalable Web Application Front-end
- 1. An overview of Scalable Web Application Front-end Saeid Zebardast http://zebardast.com @saeidzeb 1
- 2. An overview of Scalable Web Application Front-end Problem Definition Building large web applications with dozens of developers is a difficult task. Organizing the engineers around a common goal is one thing, but organizing your code so that people can work efficiently is another. Many large applications suffer from growing pains after just a few months in production due to poorly designed JavaScript with unclear upgrade and extension paths. Scalable JavaScript Application Framework Yahoo! home page engineer Nicholas Zakas1 , author of Professional JavaScript for Web Developers, introduced front-end architecture for complex, modular web applications with significant JavaScript elements. 1 nczonline.net 2 Figure 1: Scalable JavaScript Application Architecture by N. Zakas
- 3. Module An independent unit of functionality that is part of the total structure of a web application. Web application modules consist of HTML, CSS and JavaScript. Module rules • Any single module should be able to live on its own • Loose coupling allows you to make changes to one module without affecting the others • Each module has its own sandbox ◦ An interface with which the module can interact to ensure loose coupling • Modules have limited knowledge and only know the sandbox ◦ Each module knows about their sandbox and that's it The rest of the architecture doesn't exist to them. • Only call your own methods or those on the sandbox • Don't access DOM elements outside of your box • Don't access non-native global objects • Anything else you need, ask the sandbox • Don't create global objects • Don't directly reference other modules • Modules must stay within their own sandboxes ◦ No matter how restrictive or uncomfortable it may seem Sandbox The sandbox ensures a consistent interface. Modules can rely on the methods to always be there. The sandbox also acts like a security guard. It knows what the modules are allowed to access and do on the framework. Sandbox jobs • Consistency • Security • Communication 3
- 4. Application Core The application core manages modules. The application core tells a module when it should initialize and when it should shutdown. Also, it manages communication between modules. The application core handles errors. It uses available information to determine best course of action. Application core jobs • Manage module lifecycle • Enable inter-module communication • General error handling • Be extensible by plugins Mediator The application core handles the messages by using Mediator class. Plugins Plugins augment the capabilities of the core to keep it relevant and useful. Anything built for extension can never be obsolete. What plugins can be created • Error handling • Ajax communication • New module capabilities • General utilities • Anything! Base Library The base library provides basic functionality. Most applications are too tightly coupled to the base library. Developers get upset when they can't touch the base library. Ideally, only the application core has any idea what base library is being used. 4
- 5. Base library jobs • Browser normalization • General purpose utilities ◦ Parsers/Serializers for XML, JSON, etc. ◦ Object manipulation ◦ DOM manipulation ◦ Ajax communication • Provide low-level extensibility Advantages • Multiple different applications can be created with the same framework. • Each part can be tested separately 5
- 6. What's “scaleApp”? scaleApp2 is a tiny JavaScript framework for scalable JavaScript Applications. The framework allows you to easily create complex web applications. scaleApp is based on a decoupled, event-driven architecture that is inspired by the talk of Nicholas C. Zakas - "Scalable JavaScript Application Architecture". Quick start using “scaleApp”? Link scaleApp.min.js in your HTML file: <script src="scaleApp.min.js"></script> Create a core First of all create a new core instance: var core = new scaleApp.Core(); Register modules core.register( "myModuleId", function( sandbox ){ return { init: function(){ /*...*/ }, destroy: function(){ /*...*/ } }; }); As you can see the module is a function that takes the sandbox as a parameter and returns an object that has two functions init and destroy (the latter is optional). Of course your module can be any usual class with those two functions. var MyGreatModule = function(sandbox){ return { 2 http://scaleapp.org 6
- 7. init: function(){ alert("Hello world!"); } destroy: function(){ alert("Bye bye!"); } }; }; core.register("myGreatModule", MyGreatModule); The init function is called by the framework when the module is supposed to start. The destroy function is called when the module has to shut down. Start modules After your modules are registered, start your modules: core .start( "myModuleId" ) .start( "anOtherModule", function(err){ // 'anOtherModule' is running now }); Stopping It's obvious: core.stop("moduleB"); core.stop(); // stops all running instances Publish/Subscribe If the module needs to communicate with others, you can use the emit and on methods. 7
- 8. Emit The emit function takes three parameters whereas the last one is optional: • topic: the channel name you want to emit to • data: the data itself • cb: callback method The emit function is accessible through the sandbox: sandbox.emit( "myEventTopic", myData ); On A message handler could look like this: var messageHandler = function( data, topic ){ switch( topic ){ case "somethingHappend": sandbox.emit( "myEventTopic", processData(data) ); break; case "aNiceTopic": justProcess( data ); break; } }; … and it can listen to one or more channels: sub1 = sandbox.on( "somethingHappend", messageHandler ); sub2 = sandbox.on( "aNiceTopic", messageHandler ); 8
- 9. Attach and Detach A subscription can be detached and attached again: sub.detach(); // don't listen any more sub.attach(); // receive upcoming messages Unsubscribe You can unsubscribe a function from channel: sandbox.off("a-channel", callback); And you can remove a callback function from all channels: sandbox.off(callback); Or remove all subscriptions from a channel: sandbox.off("channelName"); 9