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. Basecamp is so blazingly fast for two reasons: #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. . #2: Caching TO THE MAX. 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. 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. As these applications are both complex and often require an architecture that is scalable and highly-reusable, it's one of my responsibilities to ensure the patterns used to implement such applications are as sustainable as possible. I also consider myself something of a design pattern enthusiast (although there are far more knowledgeable experts on this topic than I). I've previously written the creative-commons book 'Essential JavaScript Design Patterns' and am in the middle of writing the more detailed follow up to this book at the moment. 1. 2. 3. Organizing Your Backbonejs Application With Modules. If you have spent any time looking at Backbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is.
Backbone.js is incredibly powerful, but not prescriptive in how it should be used. With great power comes great responsibility, and if you’ve tried to use Backbone.js for a large project you might be asking yourself: how do I organize my code? When thinking about “code organization” the questions you might be asking are: How do I declare and invoke Backbone types? How do I manage a separation of concerns? How do I define a clear entry point to my application? All good questions!
There’s been a lot of debate about this issue in the Backbone.js community for several reasons. Having said all this, let’s dive into some of the details. Here’s how you might layout your application structure: Static Assets Application code Your application code should be under its own directory, such as a src directory. Index.html Application.js 3. Adding Your Modules. 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. JSLint,The JavaScript Code Quality Tool. 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. Make sure you follow the Ant installation guide in case additional steps are required. 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. 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. However, JavaScript Jedi Master Douglas Crockford, founder of JSON, JSMin and lots of other work in the JavaScript filed has created the JSLint – The JavaScript Verifier. 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 External dependencies.