background preloader

Hello Backbone.js Tutorial

Hello Backbone.js Tutorial
Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications. The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections. Start the tutorial Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Copyright © Artur Adib [ ] Related:  kazooskiy

kmalakoff/knockback HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents. Embedding media in your HTML document is trivial: <video src=" controls> Your browser does not support the <code>video</code> element. This example plays a sample video, with playback controls, from the Theora web site. Here is an example for embedding audio into your HTML document <audio src="/test/audio.ogg"><p>Your browser does not support the <code>audio</code> element. The src attribute can be a URL of the audio file or the path to the file on the local system. <audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the <code>audio</code> element </p></audio> This code example uses attributes of the <audio> element: The preload attribute is used in the audio element for buffering large files. This plays the Ogg video file in browsers supporting the Ogg format. A few examples:

Our First Node.js App: Backbone on the Client and Server Here at Airbnb, we’ve been looking curiously at Node.js for a long time now. We’ve used it for odds and ends, such as the build process for some of our libraries, but we hadn’t built anything production-scale. Until now. The Problem There’s a disconnect in the way we build rich web apps these days. But all too often, it’s not so clean; application logic is somewhat arbitrarily split between client and server, or in some cases needs to be duplicated on both sides. If you’ve seen my tech talk or last blog post, then all this should sound familiar. This Holy Grail approach is something we had dreamt about for a long time, but not having any experience with Node.js, we didn’t quite know where to start. Our Solution I’m proud to announce that we’ve launched our first Holy Grail app into production! So, the app: we re-launched our Mobile Web site using this new stack, replacing the Backbone.js + Rails stack that it used previously. Gimme the Deets! Routing Requests Views NestedView and this data:

HTML5 Boilerplate: The web’s most popular front-end template For iPad: using local storage for snappy mobile apps | LinkedIn Engineering LinkedIn just released a brand new iPad app built using HTML5, backbone.js, and underscore.js. The app includes a rich stream of information which is a combination of network updates, group posts and news articles. The user can also switch to specific streams like Co-Worker updates or news articles from a specific category. Download the iPad app now! Client-side MVC and templates Our views are rendered using underscore templates that are bound to backbone views and populated with data from backbone models or collections. Each of these calls is an asynchronous network request which can take a few seconds. Key Generation HTML 5 Local storage is a store of key-value pairs. <app-id>:user:<user-id>:<key-name> Seamless use of local storage as persistence strategy The idea is to override Backbone.Sync to use local storage when appropriate in a manner that hides all the internal workings from the regular Backbone fetch mechanism. Local Storage Reset Migration/Versioning Conclusion

Javascript Mistakes You Must Avoid If you are new to JavaScript and you write raw JavaScript or use any framework (jQuery, Mootools, Dojo, YUI) with it, you must avoid few mistakes. Actually these are my experiences when I was learning JavaScript. Equality Operator You may know that in js, two operators are used for comparing values. Here are more examples. Some of the results are unexpected specially for those who don’t know how JavaScript evaluates == operator. Consider the first example (1 == “1″). In the second example (“true” == true) is false because if the string contain characters other than digits, convertion to number will return NaN which means Not a Number. You can check what value will be returned after conversion to number using the Number constructor. Now you maybe wondering how === operator works. Not Assigning null to Reference Types It’s common mistake that many js developers don’t assign null value to variables of reference types (object or Array) when there use is finished. Don’t Forget Keyword var

airbnb/rendr Get Started with Backbone.js We can’t discuss JavaScript frameworks without featuring 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. Backbone certainly won’t give you any superpowers. It’s still JavaScript, so you can’t do anything with it that you couldn’t do with JavaScript. All it does give you is some convenience and a bit of structure so that when you’re working a project that involves a lot of data or a lot of processing you have a little bit more flexibility without having to spend hours trying to figure a way to put together, model, and render out a list item. What are your thoughts on Backbone? JGB: I’m here with Louis Simoneau, who is a web developer at Flippa, and he’s going to tell us all about Backbone JavaScript today. Louis: I’ve touched on this a little.

Front End Development Guidelines Accessibility What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. Ideally, the HTML5 DOCTYPE should be used. Write Valid Semantic Markup Writing websites with clean, semantic HTML is something we wish we could always do. Headings should be heirarchically created from <h2>onwards, paragraphs should always be in <p> tags and so on and so forth. Which do you think looks cleaner, this? <span class="sectionHeading">A Heading</span><br /><br /> Lorem ipsum dolor sit amet. ... Or this? <h2>A Heading</h2><p> Lorem ipsum dolor sit amet. ... Fallbacks for Middle Mouse Clicks One of the most frustrating accessibility and usability flaws of the modern web stems from the remapping of hyperlink click functions. A modern example of a popular website that is contributing to this problem is the Twitter web app. Use Microformats

Zombies! RUN! (Managing Page Transitions In Backbone Apps) One of the common issues or questions I see for Backbone.js goes something like this: “Whenever I hit the same route more than once, I end up getting seeing this call being made multiple times. It seems to accumulate another call every time I hit the route. What’s going on?” or “I’ve noticed that my views are still handling events after I remove them from the screen. “How do I make sure I clean things up when moving to a new page in my app?” At the heart of all of these questions is a problem that most backbone developers will run into at some point: zombies. The Plague: Event Binding The majority of the problems that people are referring to in these questions and issues are caused by the events that we bind to in our apps. We bind events to our DOM elements using the declarative `events` configuration in our views: We bind events from our models and collections so that our views can respond to changes and re-render themselves: Events are everywhere, and with good reason. Rule #2: Double Tap

Moqups · Mockups, Wireframes & Prototyping Learning Server-Side JavaScript with Node.js Node.js is all the buzz at the moment, and makes creating high performance, real-time web applications easy. It allows JavaScript to be used end to end, both on the server and on the client. This tutorial will walk you through the installation of Node and your first “Hello World” program, to building a scalable streaming Twitter server. What is Node.js? JavaScript has traditionally only run in the web browser, but recently there has been considerable interest in bringing it to the server side as well, thanks to the CommonJS project . “Every I/O operation in Node.js is asynchronous…” Node.js, uses an event loop instead of threads, and is able to scale to millions of concurrent connections. Step 1 Installation Node.js runs on Unix based systems, such as Mac OS X, Linux, and FreeBSD. Download the latest release of Node.js from (the latest version at the time of this writing is 0.1.31) and unzip it. Open the terminal, and run the following commands. cd /path/to/nodejs make node test.js