client-side
Get flash to fully experience Pearltrees
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.
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 .
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.
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?
Organizing Your Backbonejs Application With Modules
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.
Organizing your application using Modules (require.js) - Backbone.js Tutorials
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.
Backbone patterns
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
Setting Up A Build Process For JavaScript & CSS Files Using Ant (Screencast)
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
