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. Mobile Frameworks Comparison Chart. 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. 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. Lettering.js - A jQuery plugin for radical web typography. 390 ressources Javascript & jQuery. Memory leak patterns in JavaScript. JavaScript is a powerful scripting language used to add dynamic content to Web pages. It is especially beneficial for everyday tasks such as password validation and creating dynamic menu components. While JavaScript is easy to learn and write, it is prone to memory leaks in certain browsers. In this introductory article we explain what causes memory leaks in JavaScript, demonstrate some of the common memory leak patterns to watch out for, and show you how to work around them.
Note that the article assumes you are familiar with using JavaScript and DOM elements to develop Web applications. The article will be most useful to developers who use JavaScript for Web application development. Memory leaks in JavaScript JavaScript is a garbage collected language, meaning that memory is allocated to objects upon their creation and reclaimed by the browser when there are no more references to them. What's wrong with circular references? Listing 1. Another memory leak pattern Listing 2. Back to top. Adding a JavaScript-based diff « Glen Smith. Posted by Glen on Mar 17, 2011 in Grails, Groovy | 3 comments I’ve been on the hunt lately for some JavaScript based diffing routines.I’ve had a look at a few of them, and the one I’ve settled on is google-diff-match-patch which they use in the Grails wiki!
(Thanks Peter Ledbrook for the pointer!) My particular need was around diffing a fairly complex “tree” structure. These tree structures are actually imported from files that 3rd party releases from time to time and client import them directly into our product (it’s not always easy to see what’s changed between the versions they release – hence the need for a quick “visual diff” solution. Here’s an example of the one of these control libraries (the Australian ISM) being diffed (notice the token changes I’ve hacked into the version on the right): What I really like about google-diff-match-patch is that the API is very simple, and comes in a single JS file with no dependencies. Loving the new diff feature! A Full Javascript Architecture, Part Two - Chrome Extension. In the first part of this series we saw how to create a simple Node server which tracks and broadcast tweets about the What’s Next event in real time.
In this one we’ll see how to develop a Google Chrome extension that will display the tweets thanks to the HTML5 notification API. The extension will also use the Local Storage API and the Socket.IO client side library. Google Chrome Extensions Google Chrome extensions are very easy to develop and have a good documentation to rely on. With extensions you can interact with web pages, tabs, bookmarks and servers. Just like a Chrome tab, extensions run in different processes to avoid taking down other extensions or the browser itself when an extension crashes.
Extensions Architecture A Chrome extension is based on a manifest file that describe it's architecture with Json encoded data. In the manifest.json you declare the name, version and description for your extension. The What’s Next Extension Prerequisites The Manifest permissions browser_action. Analyse : Différentes façons d'intégrer un script Javascript | Blog de Jean-Philippe Blary. Récemment, je me suis posé quelques questions concernant les différentes possibilités d'intégrer des scripts Javascript dans une page web. On trouve différentes méthodes sur Internet : l'un dira qu'il faut toujours mettre ses scripts en bas du BODY, un autre dira qu'il faut les charger en programmation (avec appendChild )... J'ai voulu mettre mes idées reçues de côtés, et faire des tests moi-même de tous les cas possibles. Pour cela, j'ai utilisé l'outil WebPageTest, qui permet d'analyser ce qu'il se passe exactement au niveau navigateur web.
J'ai créé une page simpliste en HTML5, avec juste quelques paragraphes Lorem Ipsum, 10 images (toutes de 30Ko), et un fichier CSS de 96Ko. Je ne modifie que l'insertion des deux scripts JS "script0.min.js" (374Ko) et "script1.min.js" (93Ko). Note : Pour chaque tecnhique, je vais faire à chaque fois deux tests : tout d'abord on le rajoutant dans le HEAD, puis tout en bas du BODY. Légende : Technique 1 Résultats dans le HEAD (test dispo ici) : Technique 2. 7 minutes on recent DOM APIs. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs. InShare33 The best strategy for dealing with Internet Explorer 6 is not to support it. Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you.
This isn't one of those rants about IE6 or a campaign to try to kill it. I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Update: Yann Faurie has graciously provided a French translation of this article. Table Of Contents Strategies Contents | Top IE6 Market Share Plan Your Design and Keep It Simple A Simple Reset.