News roundup: deck.js, Yahoo Kills off Maps API, Patterns for Large-Scale JavaScript Application Architecture

Listen to this week’s podcast (September 9, 2011)

Patterns For Large-Scale JavaScript Application Architecture

Patterns For Large-Scale JavaScript Application Architecture is a lengthy article by Addy Osmani detailing some basic principles of writing a large-scale JavaScript application. It’s inspired by a classic Nicholas Zakas talk outlining some of the same principles (hey, I think I remember listening to that talk live!).

Addy has some short-attention-spanned (and “weekly roundup” people such as myself) in mind as he gives a tweet-sized summary:

Decouple app. architecture w/module,facade & mediator patterns. Mods publish msgs, mediator acts as pub/sub mgr & facade handles security

The basic idea is that a webpage is a collection of modules, some of which can (and do) talk to each other. But here’s the catch: not all of the modules can be expected to be present. Module A might want to send a message to Module B, but it will potentially break if Module B isn’t present, or perhaps if Module B hasn’t yet loaded, creating a race condition. This is called tight coupling: the app only works when all the modules are tightly coupled together and depend on each other. Here’s the thing: the larger an application becomes, the harder it is for everything to depend on each other.

The basic solution is decoupling through a pub/sub system. Modules broadcast and subscribe to events which are controlled by one controller that oversees them all. Sort of like an evil mastermind, except not evil.

You may already have experience with loose decoupling in JavaScript in other ways. For instance, if you’ve ever used event delegation or jQuery’s live(), you’ll know that you can attach events to DOM elements that may not exist yet. This is because you attach the event to the parent container (analogous to the evil mastermind controller), and all elements, present and future, will have events that bubble up to this container, leaving it to figure out how to proceed. It’s the same concept!

Deferreds are also another practical use of loose coupling that you may already be familiar with. Recently introduced in jQuery, deferreds and promises have been in other more robust libraries for a while (such as Dojo). A practical use case might be an Ajax call: a simple Ajax call might have two callbacks: a success and a failure callback. However, deferreds offer a decoupling by essentially abandoning callbacks and moving to a pub/sub system. Now multiple modules/processes can subscribe to a single “Ajax success” event. And modules/processes can even potentially subscribe to the success event in the time between the Ajax request is sent and before it’s received. Again, it’s loose decoupling at work!

Yahoo Abandons Maps API, Node.js app, and CEO

It’s a busy week for Yahoo. In one master stroke, it’s killed off its aging Maps API, killed off Sled, its Node.js experimental app, and paid its CEO over 10 million dollars to get told to take a hike (sorry for the bitterness).

The writing has been on the wall for quite a while for its JavaScript Maps API. Surely it was a matter of time, but it’s still quite sad. Sadly, a team I worked with was doing some really great work on upgrading the API for a new release, but it looks like that will never see the light of day. That being said, even with all their effort, Google has been ahead of the game for years and with many more resources, making sure that all potential competitors are playing a losing game.

Sadly, this also means all of Christian Heilmann’s old geo-mashups are going to die…

Yahoo also let go of Sled, its Node.js experiment. But there’s a bit of good news for this one: its name was changed to Postmile and the project was open-sourced on Github. Surprisingly, there doesn’t seem to be much there. It has the description of being “a collaborative list making tool built using JS, Node.js, and MongoDB” and has the appearances of being someone’s weekend project. I’m sure there’s more to it than that, but on first glance that’s what it seems to be.

And last but not least, true to its trend of destroying more than it creates, Yahoo also fired Carol Bartz, its CEO. Ok, I’ll let others report on that bit. The bitterness ends here.

deck.js

deck.js is another new spiffy HTML5 slide framework. I have to say that I like this one out of all web-based slide frameworks I’ve seen so far, and I’m considering it for my next presentation. Oh yes, and it seems to work pretty well on the iPad, unlike the now-immortalized HTML5 Slides.

I used to consider using the age-old S5 framework because of its wide browser support, but found both the CSS and JavaScript to be seriously outdated and bloated. That and the fact that most of my presentations are given to folks with newer browsers, I guess I shouldn’t feel too bad that any presentations developed with these HTML5 slide frameworks aren’t going to work everywhere.

Libraries and Frameworks

Paladin is a Mozilla initiative to support open-source gaming. It includes the Paladin 3d game engine, which is soon-to-be renamed.

BoltJS is a UI framework by Facebook, built on Javelin.

fox.js is a CSS grid maker that uses ASCII art to make the grids. Interesting… hmm…

Creating Fast Buttons for Mobile Web Applications – another article posted earlier this year. Shows how to get around the ~300ms delay on mobile devices. This code has now been adapted to be used elsewhere, including the Mobile Boilerplate.

Scott Jehl has written some code that normalizes hiding the address bar on both iOS and Android. It also seems to explain why we should use scrollTo(0,1) instead of scrollTo(0,0).

maddy is a functional object operations library

Tidbits (articles and such)

What’s different in the new WebSocket protocol (HTML5Rocks)

Christian Heilmann points out that Firefox 7 now does reverse geocoding in navigator.geolocation (ip to address lookup)

Object-Based Inheritance For ECMAScript 5 – this was written almost a year ago, but it’s a nice introduction to using Object.create()

jQuery File Size is a site by Mathias Bynens (@mathias) that tracks jQuery’s file size over time. Uncompressed, minified, gzipped, minified and gzipped, you name it!

Native webcam support and orientation events – technology preview – I missed this earlier this year. It turns out the Device API is now known as navigator.getUserMedia, and it’s actually been implemented on Opera Mobile!

Paul Irish points us in the direction of some cool stuff Niklas von Hertzen has been building, including html2canvas, something to blur elements on a page (uses html2canvas), something that modifies fonts on the fly with JavaScript, and a pathfinding algorithm that works by analyzing canvas pixel data.

Folks have discovered that they can use getElementsByClassName or getElementsByTagName for simple selectors, which is a bit faster than using querySelector. Now a patch has landed in WebKit which looks like it does this natively!

What came before WebSockets? – in an industry with a lot of newcomers, it’s immensely helpful to know not only what’s available now (WebSockets), but how it was done in yesteryear. It’s also immensely helpful because an unfortunately large percentage of the world still uses browsers from yesteryear.

How To Setup A Cheap Exception Notifier for JavaScript – taking advantage of window.onerror to let developers know that stuff blew up in their app. I had no idea you could log errors to Google Analytics!

John Allsopp lets us in on the now well-supported DOM selectors such as getElementsByClassName and querySelector/querySelectorAll, which should ideally eventually replace DOM-helper libraries

Some interesting discussion on WebSQL vs indexedDB on Google+.

Superpacking JS Demos – helpful for those competing in JS1K, but not really practical for most folks.

Looks like Joe Hewitt is working on updates to Scrollability, and he seems to think it necessary despite updates in iOS5 that supposedly render it unnecessary.

Chrome now has support for sending and receiving binary messages (and as Blogs and ArrayBuffers)

Chris Coyier has found that generated content is accessible via JavaScript on some browsers

Why was the arguments.callee.caller property deprecated in JavaScript? (StackOverflow)

Simple Facial rigging utilizing morph targets powered by three.js (WebGL)

Decoding jQuery – .toArray() – Shi Chuan has a nice series going that digs deep into jQuery to provide insight into all sorts of little JavaScript tricks.

Nicholas Zakas has been messing around with ES6 proxies to create a DOM builder

Akshell is a JSFiddle-esque JavaScript editor with all sorts of bells and whistles: buttons to preview the code and even commit to Git.

Node.js tidbits

Node Knockout winners have been announced

Keeping “require” modules DRY in Node – Michael Mahemoff gives a quick tip on cleaning up that mess up require() statements at the top of your Node code.

Multimedia

(video) YUI Open Hours: Loader Changes, Tips and Tricks
(slides) RequireJS (ParisJS)
(slides) The State of HTML5: Summer 2011 (Paul Irish)
(slides) High Performance Mobile (Steve Souders)

Releases

jQuery Mobile Beta 3 now includes pushState support, iOS5-compatible fixed headers and transitions, and the Mobile Graded Browser Support has also been updated.
Knockout 1.3.0 Beta
curl 0.5.2
Socket.IO 0.8.3

GitHub Most Watched This Week (JavaScript)

bootstrap
paladin
FitVids.js – handles video sizing as a jQuery plugin. My comment: if it’s based on Thierry Koblentz’s article, why do we need a JavaScript-based solution?
node
html5-boilerplate

Upcoming Events

Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
Breaking Development: Web Design and Development for Mobile Devices (September 12-14, 2011 in Nashville, TN, US)
HTML5 application frameworks (HTML5 Silicon Valley) (September 13, 2011 in Mountain View, CA, US)
Test-Driven Development with Node.js (Node.js SF) (September 13, 2011 in San Francisco, CA, US)
Lightning Talks on Sencha Touch, multiplayer.js and Tales from Node Knockout (GamesJS) (September 14, 2011 in San Francisco, CA, US)
dojoconf (September 16, 2011 in Arlington, VA)
Webkit UI performance, Angular.js (Bayjax) (September 16, 2011 in Sunnyvale, CA, US)
Future of Mobile (September 16, 2011 in London, UK)
CapitolJS (September 18, 2011 in Washington DC)
Lindsey Simon: Use 10,000 Browsers (September 21, 2011 in San Francisco, CA, US)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
HTML5 Dev Conf (September 27, 2011 in San Francisco, CA, US)
Modernizr with Faruk Ates (September 29, 2011 in San Francisco, CA, US)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
Future of Web Apps (October 3-5, 2011 in London, UK)
Lessons learned from WSGI/Rack applied to Node (SFJS) (October 6, 2011 in San Francisco)
HTML5.tx (October 8, 2011 in Austin, Texas, USA)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
red dirt.js (November 3, 2011 in Oklahoma City, OK, USA)
YUIConf 2011 (November 3-4, 2011 in Sunnyvale, CA, US)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

Leave a Reply




© webdevpublishing 2011