background preloader


Facebook Twitter

JavaScript APIs you’ve never heard of (and some you have) Posted at November 13, 2012 07:00 am by Nicholas C.

JavaScript APIs you’ve never heard of (and some you have)

Backbonification: migrating a large JavaScript project from DOM spaghetti to Backbone.js. We've all done it.

Backbonification: migrating a large JavaScript project from DOM spaghetti to Backbone.js

Our code base has one huge monolithic file, packed full of JavaScript spaghetti. It's unwieldy, hard-to-debug, and has little to no separation of concerns. It is a nightmare to bring new engineers up to speed. This blog post is about decomposing NewsBlur's single-file 8,500 line JavaScript application into its component parts: 8 models, 12 views, 3 routers, 3 collections. This post explores patterns, techniques, and common pitfalls in migrating from vanilla JavaScript to Backbone.js.

NewsBlur is a free RSS feed reader and is open-source. As a bit of background, I worked on Backbone.js in its infancy, when Jeremy Ashkenas and I worked on DocumentCloud's many open-source projects. The Presentation This post was written concurrently with a presentation. There's no need to go through the presentation. Pre-reqs: Libraries There are only two libraries you need to be intimately familiar with in order to make the most of your Backbone transition: Underscore.js and Backbone.js. JSLint,The JavaScript Code Quality Tool.

Jam - The JavaScript package manager. JavaScript : 3 fondamentaux. Après quelques années à écrire dans un langage, on finit facilement par oublier les premières difficultés que l’on avait rencontrées.

JavaScript : 3 fondamentaux

Et à force de faire de la veille, de l’autoformation et de parler entre experts dans des conférences, j’ai un peu quitté la réalité de la majorité des équipes Web. Maintenant que je suis consultant indépendant je retourne dans des équipes qui avaient autre chose à faire que de se demander si on a le droit de parler de classe en JavaScript, quelle est la bonne définition d’une closure, ou quelles sont les fonctionnalités de EcmaScript 5 qui auraient du rester dans Ecmascript.Next.

J’avais déjà parlé sur ce blog de JavaScript et la programmation orienté objet pour les développeurs PHP, nous allons explorer ici les 3 notions fondamentales de JavaScript qui sont probablement les plus grosses sources de bugs, d’incompréhension et de frustration pour le développeur Web moyen. Et qui accessoirement sont la base d’une programmation plus évoluée par la suite. Bonnes pratiques jQuery » chez Syl.

Je vais essayer de faire un petit tour des bonnes pratiques dont la plupart concernent jQuery et d’autres le Javascript en général.

Bonnes pratiques jQuery » chez Syl

Voici les différents chapitres abordés : Tous les codes que je vais montrer sont fonctionnels, l’indication « pas bon » indique une perte une performance ou une mauvaise pratique. Utilisation du $ Vous savez que le symbole dollar est aussi utilisé par d’autres librairies, par exemple Mootools ou Prototype. Pour éviter les éventuels conflits, on spécifie la variable $ uniquement pour jQuery à l’intérieur du bloc. How to write low garbage real-time Javascript. Edit 27th March 2012: wow, this article went a long way, thanks for the great response!

How to write low garbage real-time Javascript

There has been some criticism of some of the techniques here, such as the use of 'delete'. I'm aware things like that can cause other slowdowns, we use it very very sparingly in our engine. As always everything involves tradeoffs and you have to use judgement to balance GC with other concerns. This is simply a list of techniques we've found useful in our engine and was not meant to be a complete reference. I hope it's still somehow useful though! For HTML5 games written in Javascript, one of the biggest obstacles to a smooth experience is garbage collection (GC) pauses. There are lots of techniques browsers can employ to reduce GC pauses, but if your code creates a lot of garbage, sooner or later it's going to have to pause and clean up. Football tracker. This is an experiment for a real-time tracking of a football match using only web technologies.

Football tracker

In this case I’ve chosen to track a football match from Futbol Club Barcelona (fcb). All the work is made by the browser and it’s interactive (there are four checkboxes to activate/deactivate each tracker). It is based on tracking the location of colored objects in the frames using the HSV colour space. XPathJS – JavaScript-Based XPath Library. XPathJS is a brand new implementation of XPath 1.0 and DOM Level 3 XPath specifications written in JavaScript. The coolest part is that it supports all the major browsers out there and it comes with unit tests that ensure that every feature conforms fully to the specifications. Features Supports IE6+, Chrome, Firefox, Safari, and OperaEasy to include and initialize in any web project (a single JS file with no dependencies!) The Essentials of Writing High Quality JavaScript. Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+.

The Essentials of Writing High Quality JavaScript

This tutorial was first published in October, 2010. The brilliant Stoyan Stefanov, in promotion of his book, "JavaScript Patterns," was kind enough to contribute an excerpt of the book for our readers, which details the essentials of writing high quality JavaScript, such as avoiding globals, using single var declarations, pre-caching length in loops, following coding conventions, and more. This excerpt also includes some habits not necessarily related to the code itself, but more about the overall code creation process, including writing API documentation, conducting peer reviews, and running JSLint.

JavaScript pattern and antipattern collection. Javascript - Design Patterns - Patterns For Large-Scale JavaScript Application Architecture. Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture.

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. Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!