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. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application”. Final Thoughts. 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. Furthermore, writing unit tests can give us confidence in our applications. In this article I’ll discuss unit testing JavaScript web apps, specifically how to use Jasmine for testing objects that inherit from Backbone.Model. Sample Application I wrote a sample app that supports this article by putting the concepts discussed into practice. Once you pull down the code, you can run the tests by opening the JasmineTestingBackBoneModel/tests/SpecRunner.html file in Chrome.
Jasmine’s unit test reporting looks like: Jasmine Resources This article isn’t intended to train you on Jasmine. What’s Up With Mock Data? Is that important? Code Reading. 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. Note: This article discusses transitions as implemented in version 3.0, which was released in December 2012. #Transitions Are a Form of Animation Look again at this example transition: #Transitions Interpolate Values over Time. 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); } } } Now by passing a function into trickle(), I can easily prevent a function from being called too frequently, potentially significantly improving performance.
Update: Reveal.js - The HTML Presentation Framework. HTML Presentations Made Easy Created by Hakim El Hattab / @hakimel Heads Up reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory. Vertical Slides Slides can be nested inside of other slides, try pressing . Basement Level 1 Press down or up to navigate. Basement Level 2 Cornify Basement Level 3 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Works in Mobile Safari Try it out! Marvelous Unordered List No order here Or here Or here Or here Fantastic Ordered List One is smaller than...
Markdown support For those of you who like that sort of thing. <section data-markdown> For those of you who like that sort of thing. Transition Styles You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default Themes Global State Custom Events. JavaScript Guide. 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. Agreement: Progressive enhancement isn’t for building real apps. Meteor. 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? Pedalboard.js is a ground-breaking, first of its kind, novel open-source JavaScript framework for developing audio effects and applying them to sound sources–and it's particularly good at guitar effects. The API and all the abstraction is built around the concept of guitar effects — pedals and stomp boxes, pots and switches. You design your pedal with the powerful Web Audio API, attach pots and switches to it, style it via CSS3 and voila. Bring multiple pedals together to create a pedal board, easily adjust their settings and routing. Finally, a complete guitar effects stack, completely customizable, in your hands. Motivation Pedalboard.js is an attempt to address these issues.
Audio Nodes Audio API has the "node" concept at its core. Pot. 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. The next time I had to do something similar, I much preferred a simpler solution than scripting. 2) A couple of hours were too long. I wanted a better solution to cut down data generation time. 3) The script ran on an i7 with multiple cores, but only 1 core was being utilised. Plain wrong. That’s why I wrote DataGen. Use npm to install: jQuery Fundamentals :: A guide to the basics of jQuery.
Hack Sparrow: Captain of the Internets. Unit Testing Backbone.js Apps With QUnit And SinonJS. This article will be appearing in my forthcoming book on Backbone.js and continues the section on unit testing. We previously looked at Jasmine and will now look at QUnit and SinonJS. QUnit is a powerful JavaScript test suite written by jQuery team member Jörn Zaefferer and used by many large open-source projects (such as jQuery and Backbone.js) to test their code. It’s both capable of testing standard JavaScript code in the browser as well as code on the server-side (where environments supported include Rhino, V8 and SpiderMonkey). This makes it a robust solution for a large number of use-cases. Quite a few Backbone.js contributors feel that QUnit is a better introductory framework for testing if you don’t wish to start off with Jasmine and BDD right away. My personal recommendation is that it’s worth comparing both frameworks and opting for the solution that you feel the most comfortable with.
Getting Setup We first setup a testing environment composed of three files: Assertions Fixtures. Examples and documentation on grumble.js. Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified.
Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. Grumble.js is currently written as a jquery plugin and can be found on Github Examples The following code animates a set of grumbles, click here to see it in action. No textDifferent styleWith close buttonEnlarged for text Can I haz callbacks? The darkside of grumble.js grumble.js exposes three methods, 'show', 'hide' and 'adjust'.
Warning: Clicking on this link may damage your UX. What is this magic? Grumble.js uses buzzwords like CSS3 and 'maths' to position itself exactly where you want it. Credit due Big thanks to everyone involved in creating the idea and design of grumble.js (aka. 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. Design patterns also provide us a common vocabulary to describe solutions.
This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday. 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. You don't have to deal with strongly typed classes, or some of the more complex features from languages, like C# and Java. 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. It's time to fix that! Making it Better Namespaces. 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. Also included is a simple script to display today's date on your web page. Very handy! JavaScript's Date object makes it easy to handle dates in JavaScript. In this tutorial we'll take a look at using the Date object, and end with a simple example script that displays the current date on the web page! The Date object The Date class is used to store and retrieve dates in JavaScript.
New Date ( ) This creates a new Date object with the value of the current date and time on the browser PC. X = new Date ( ); This creates a new Date object with the date value represented by the number of milliseconds since midnight on Jan 1, 1970. X = new Date ( 86400000 ); creates a new date object x with a date value of midnight, Jan 2, 1970. For example: For example, to create a new Date object with a value of January 6, 1972: 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. Add accepts either a name and an element, or just an element. With the latter Parallax.js will try to use the element's Id as the name. Parallax.add("foo", $("#page1")) .add($("#bar")); parallax.foo; //<- woah! To get a nifty parallaxing background, just set a jQuery element to be Parallax.js's background.
Parallax.background = $("body"); parallax.scaling = 0.4; //background moves 40% with the pages Some like it fast, some like it slow. Parallax.speed = 1200; //In milliseconds of course! The meat and potatoes. Parallax.bar.left(); //Bar slides in from the left parallax.foo.top(); //bringing back foo from the top parallax.bar.bottom(IAmBack()); //We got callbacks too ;) function IAmBack(){ alert("I'm back foo! ") Sometimes we don't need the fanciness.
//Remember parallax can be aliased! 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. Simplify.js (License: BSD, GitHub: mourner / simplify-js, npm: simplify-js) is a tiny high-performance JavaScript polyline simplification library by Vladimir Agafonkin, extracted from Leaflet, a JS interactive maps library of the same author.
It uses a combination of Douglas-Peucker and Radial Distance algorithms. Works both on browser and server platforms. Polyline simplification dramatically reduces the number of points in a polyline while retaining its shape, giving a huge performance boost when processing it and also reducing visual noise. For example, it's essential when rendering a 70k-points line chart or a map route in the browser using Canvas or SVG. 73752 points, simplified with tolerance: 0.8 px After simplification: 154 points (~479 times less) Performed in 2.73 ms The test data for the example is actually a ~10700 mile car route from Lisboa, Portugal to Singapore on a world scale, generated by the CloudMade Navigation service based on OpenStreetMap data. points [Array]
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 | Dan Merino's Blog. Organizing your application using Modules (require.js) - Backbone.js Tutorials.