Backbone.js for large scale applications – UI Architecture « Orizen Designs – Oren Farhi – Javascript Blog, Backbone Blog, HTML5, CSS3. In my early days as a developer, even before Backbone.js was released, I was eager to learn about good conventions and best practices for organizing code and workflows.
I knew that somewhere, someone managed to recognize a good pattern that will scale in maintainable code, reusable pieces of code and a good & solid “framework” to place this code. Overtime, I read few articles & watched several talks about software architecture that are relevant to front end development. In this post, I’m covering a journey I had (and still have) with some of the above as well as the overall front end architecture concept behind my latest project Echoes Media Center along with Backbone.js methodology.
How Do I Start with Backbone.js? First, I like to stick to the concept of Justin Meyer, author JavaScriptMVC: “The secret to building large apps is never build large apps. This is the Backbone View object that uses the above model: This is the view’s associated template: Backbone Model Unit Testing with Jasmine. By Ken Tabor Writing reliable JavaScript code at scale is difficult.
The language lacks built-in formal structures that enable reliable engineering practices. Fortunately establishing conventions and selecting mature libraries can go a long way towards building a trustworthy application architecture. Backbone.js for large scale applications – UI Architecture « Orizen Designs – Oren Farhi – Javascript Blog, Backbone Blog, HTML5, CSS3. Superhero.js. Working with Transitions. D3’s selection.transition method makes it easy to animate transitions when changing the DOM.
For example, to change the text color to red instantaneously, you can select the body element and set the color style: d3.select("body").style("color", "red"); To instead animate the change over time, derive a transition: d3.select("body").transition().style("color", "red"); This ease-of-use comes from D3’s transition interface mirroring the selection interface: nearly everything you can do to a selection of elements, you can also do to a transition, causing the change to be animated over time rather than instantaneous. Yet looks can be deceiving because selections and transitions are not perfectly equivalent: transitions provide only a subset of selection functionality. Limiting Function calls. I’m frequently in a situation where I want to prevent a function from being called too quickly - for instance, when I want to run an expensive validation function on some input, but don’t want to run the function on every keyup.
Most recently, I needed to prevent both ontouchdown and onclick from being called nearly simultaneously. A nice way to deal with this is to write a function that constructs functions that can only be called every n milliseconds. function trickle( fun , waitLength ) { var lastCalledAt = 0, context = this; return function(){ var now = (new Date()).getTime(); if (now > lastCalledAt + waitLength ) { lastCalledAt = now; fun.apply(context, arguments); } } } Reveal.js - The HTML Presentation Framework. HTML Presentations Made Easy Created by Hakim El Hattab / @hakimel Heads Up.
JavaScript Guide. The JavaScript Guide shows you how to use JavaScript and gives an overview of the language. Felixge/faster-than-c. Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012) It’s no longer good enough to build web apps around full page loads and then “progressively enhance” them to behave more dynamically.
Building apps which are fast, responsive and modern require you to completely rethink your approach. The premise was to take the seven top JavaScript frameworks/libraries for single-page and rich JavaScript applications — AngularJS, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine — get the creators of all of them in one location, and compare the technologies head to head.* Disclaimer: I was there to represent Knockout, so obviously I’m not neutral. . * Yes, I know that’s eight frameworks, not seven. TL;DR Executive Summary For many web developers, it’s now taken for granted that such client-side frameworks are the way to build rich web apps. Technologies: Agreement and Disagreement As each SPA technology was presented, some fairly clear patterns of similarity and difference emerged.
Enjalot.github.com/dot-enter/ Pedalboard.js by dashersw - Open-source JavaScript framework for developing audio effects for guitars. Check out pedals.io!
It's pedalboard.js packaged as a product you can really use. Introduction Ever wanted to have your pedal stack in the cloud, available anywhere you go without any hardware? Ever wanted to manage your sound as easily as browsing a web site? Ever wanted to share the perfect sound you created with your friends without the hassle? DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM. DataGen: Generate Large Test Data Files – Like A Boss « Blog.
A couple of months ago I was doing some volume and performance testing against an application that was expecting a 500% data growth, which meant I had to generate lots and lots of dummy data to test whether the storage would hold up and whether the application itself would still perform well.
I quickly came up with a script that loops through N times, generates dummy data, and creates an XML file. I left the script running while working on something else in parallel, and at the end the script finished after about a couple of hours. There were 3 issues with this approach: 1) It sure wasn’t going to be the last time I had to generate large test data. A guide to the basics of jQuery. Hack Sparrow: Captain of the Internets. Unit Testing Backbone.js Apps With QUnit And SinonJS. Examples and documentation on grumble.js. Harthur/brain. Learning JavaScript Design Patterns. Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language.
One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Key Principles of Maintainable JavaScript. JavaScript is a curious language.
It's easy to write, but difficult to master. By the end of this article, hopefully, you'll transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess! Why is it So Tough? The thing to remember, above all else when writing JS code, is that it's a dynamic language. This means there are a lot of ways to do things. The "hardness" of JavaScript is clearly evident when considering the following image: The teeny tiny book on the left is Douglas Crockford's MUST READ book, JavaScript: The Good Parts. While both of these books are excellent reads, The Good Parts illustrates that, although JavaScript has a LOT of stuff in it, the good parts can be summed up in a considerably shorter read. This, naturally, led to a lot of sleepless nights for web developers. You can read an article on the history of JavaScript here, but the gist of it is that Brandon Eich, in 1995, was hired by Netscape to design a language.
Making it Better. Working with Dates. Tutorial by Matt Doyle | Level: Intermediate | Published on 19 November 2002 Categories: This tutorial describes JavaScript's Date object, and shows how you can use it to manipulate dates.
Stolksdorf.github.com/Parallaxjs/ Parallax.js is a nifty Javascript framework that allows you to easily add sliding page trasitions and parallaxing backgrounds to any project. Very light weight, very cool. Just like fezes. PhantomJS: Headless WebKit with JavaScript API. CasperJS, a navigation scripting and testing utility for PhantomJS.
Simplify.js - a high-performance JavaScript 2D/3D polyline simplification library. References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js. Sample App with Backbone.js and Twitter Bootstrap. Testing Backbone applications with Jasmine and Sinon – Part 3. Routers and Views – Tinned Fruit. Backbone patterns. Backbone.js Training - A Multi-Day, Hands-On, Training Class. Zepto.js: the aerogel-weight jQuery-compatible JavaScript library. Hammer.js — A javascript library for multi touch gestures. JavaScript Patterns. Continuous Integration for Javascript. Processing.js. Spin.js.
Unit Testing JavaScript and Backbone.JS. Continuos Integration (CI) for JavaScript – Jasmine and Teamcity. Organizing your application using Modules (require.js) - Backbone.js Tutorials.