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. 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. 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). 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: 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. 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. 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. 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.