Patterns For Large-Scale JavaScript Application Architecture
Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture. The material is based on my talk of the same name, last presented at LondonJS and inspired by previous work by Nicholas Zakas. Who am I and why am I writing about this topic? I'm currently a JavaScript and UI developer at AOL helping to plan and write the front-end architecture to our next generation of client-facing applications. I also consider myself something of a design pattern enthusiast (although there are far more knowledgeable experts on this topic than I). Can you summarize this article in 140 characters? In the event of you being short for time, here's the tweet-sized summary of this article: Decouple app. architecture w/module,facade & mediator patterns. What exactly is a 'large' JavaScript application? Before we begin, let us attempt to define what we mean when we refer to a JavaScript application as being significantly 'large'. Let's review your current architecture.
Backbone.js
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1
Organizing your application using Modules (require.js) - Backbone.js Tutorials
Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments. This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy. Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code. This tutorial will get you started on combining Backbone.js with AMD (Asynchronous Module Definitions). What is AMD? Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. This tutorial will use Require.js to implement a modular and organized Backbone.js. I highly recommend using AMD for application development Quick Overview ModularScalableCompiles well(see r.js )Market Adoption( Dojo 1.6 converted fully to AMD ) Why Require.js? Require.js has a great community and it is growing rapidly. Getting started <!
PaulUithol/backbone-tastypie - GitHub
How to structure my javascript/jquery code
Backbone patterns
Here, I try to document the good practices that our team has learned along the way building Backbone applications. Inline templates The problem: if you need to use view templates in a small Backbone application, defining your templates in JavaScript code will be unwieldy and difficult to maintain. Solution: You may need some view templates to be inline in the HTML page. This solution has been outlined by John Resig in his blog post about JavaScript micro templating. Defining inline templates You can put templates in an HTML <script> tag. Change the type attribute to something else so it will not be interpreted as JavaScript.Set an id so we can easily refer to it. Using inline templates $("#template-contact").html();//=> "<div class='contact'>\n<strong><%= name %></str..." template = _.template($("#template-contact").html());//=> function() { ... } In JavaScript, you can get the innerHTML (or jQuery's .html()) of that HTML element to fetch the raw template data. Integrating into Backbone Partials
How Basecamp Next got to be so damn fast without using much client-side UI
When we started working on Basecamp Next last year, we had much internal debate about whether we should evolve the existing code base or rewrite it. I’ll dive more into that debate further in a later post, but one of the key arguments for a rewrite was that we wanted a dramatic leap forward in speed — one that wouldn’t be possible through mere evolution. Speed is one of those core competitive advantages that have long-term staying power. As Jeff Bezos would say, nobody is going to wake up 10 years from now and wish their application was slower. Investments in speed are going to pay dividends forever. Now for the secret sauce. #1: Stacker – an advanced pushState-based engine for sheets The Stacker engine reduces HTTP requests on a per-page basis to a minimum by keeping the layout the same between requests. This means that only the very first request spends time downloading CSS, JavaScript, and image sprites. Now Stacker is purposely built for the sheet-based UI that we have.
Setting Up A Build Process For JavaScript & CSS Files Using Ant (Screencast)
A well defined build process ensures that the output of your project is built in a consistent manner every time a new build is run. Today we’re going to take a look at how you can setup your own Ant-powered build process using for client-side files (such as JavaScript and CSS). You’ll learn how to automate the validation of your scripts using JSLint (or JSHint), concatenate your files using sets of specific rules and finally minify both sets of your output for production use. You’ll also learn some additional tips and tricks that can assist you in build file configuration along the way. I hope this screencast comes in useful. Tools Required The following are the tools you’ll need for today’s tutorial. The Screencast Details: 720p resolution, 21:27m duration. What If I Don’t Have Time To Watch? I understand that some of my readers don’t have as much time to watch complete screencasts as others do. Screencast Notes References/Further Reading Conclusions And that’s it!.
Do you validate your JavaScript code?
Writing about whether people validate their CSS, it made me wonder about how/if people ensure the quality of their JavaScript code. When I wrote about validating CSS, some of the feedback was that if you validate/promote valid HTML, naturally you should validate your CSS. With that sentiment, I’d argue that it’s as, if not more, important to also validate your JavaScript code (if you don’t agree, skip to the question at the end of this post, and give me a reply to that). Enter JSLint In difference to HTML and CSS, W3C doesn’t offer any way to validate your JavaScript code. You can read more about it in the JSLint documentation, but briefly put, it’s a great tool for verifying the syntax as well as best practices in your JavaScript code. It will hurt your feelings JSLint settings When you first enter the JSLint validation page, there are a few checkboxes to check in the Options box I’d like to recommend to anyone getting confused: Assume a browserDisallow undefined variablesDisallow == and !
