What is the 'new' keyword in JavaScript Jquery Mobile – PhoneGap – Retours d’expérience et bonnes pratiques. Lors du développement d’une application mobile, nous sommes souvent confrontés au choix “application native” ou “site web mobile”. Dans cet article, nous allons présenter l’approche que nous avons eu pour le développement d’une application mobile qui mixe à la fois un framework html mobile classique avec l’utilisation de JQuery Mobile ainsi que des fonctionnalités natives grâce à PhoneGap. Nous verrons ensuite les bonnes pratiques que nous avons pu faire ressortir ainsi que les limites rencontrées. Notre application Le projet a pour but d’inventorier divers biens (matériel informatique,etc) via un appareil mobile. - Être multiplateforme mobile (Android, iOS, Windows Phone) - Avoir une version de l’application packagée avec des fonctionnalités natives (utilisation de l’API caméra pour scanner des codes barre) - Nous ne devions pas re-coder spécifiquement pour chaque plateforme l’application. Le choix de JQuery Mobile Retours d’experience Les points forts de JQuery Mobile sont : Composants Cache
Writing polyfills in Javascript Introduction Javascript is notorious for having cross-browser compatibility issues. Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera all have their own proprietary features and their own subset of the standard features. Different browsers implement each feature in their own way, and this can be a major headache for web developers trying to make things work for everybody. Fortunately, Javascript has enough flexibility and extensibility to bridge some of these gaps between each browser. These bridges are called polyfills. We will create a few simple polyfills to see how they work. What is a polyfill? A polyfill is a piece of code that implements the features that you expect the browser to support natively. Polyfills usually emulate a newer API that provides fallback functionality to older browsers. There are varying degrees of completeness for a polyfill: Perfect polyfills are polyfills that perfectly implement features completely without any side effects. Feature detection
Isomorphic JavaScript: The Future of Web Apps By Spike Brehm This post has been cross-posted on VentureBeat. At Airbnb, we’ve learned a lot over the past few years while building rich web experiences. We dove into the single-page app world in 2011 with our mobile web site, and have since launched Wish Lists and our newly-redesigned search page, among others. Each of these is a large JavaScript app, meaning that the bulk of the code runs in the browser in order to support a more modern, interactive experience. This approach is commonplace today, and libraries like Backbone.js, Ember.js, and Angular.js have made it easier for developers to build these rich JavaScript apps. JavaScript Grows Up Since the dawn of the Web, the browsing experience has worked like this: a web browser would request a particular page (say, “ causing a server somewhere on the Internet to generate an HTML page and send it back over the wire. The Single-Page App Trouble in Paradise Performance Maintainability A Hybrid Approach Routing
Converting an existing Backbone.js project to Require.js | Eventual Consistency Recently, I've undertaken the task of converting a rather large Backbone.js app to using Require.js. Since the process can get tricky at times, here's a quick recap of what I had to do to get it done. 0. Why use Require.js in the first place? Most projects start small. A couple of script tags that include jQuery (or Zepto, or whatever else you are using), a couple of plug-ins, and your own code. Require.js helps us define exactly what our component depends on, almost like "regular" imports in other development environments. 1. OK so the first part is easy enough. $ bower install requirejs (As a side-note, Bower and require.js work really well together). Once we have the library, we can add it to our project by adding a single <script> tag: that data-main attribute will tell require.js where to start. Also, this would be a good time to remove all other <script> tags you have lying around there. 2. This assumes the following structure: So what have we here? 3. 4. 5. 6.
Is The Death Of JavaScript Upon Us, Or Is A Universal Language Transformation Underway? Editor’s note: Péter Halácsy is co-founder and CTO of Prezi. Follow him on Twitter @halacsy. Startups identify with JavaScript. Today, JavaScript is no longer a startup, and it’s no longer just startups that are using it. Those in the latest generation of JavaScript engines deliver incredible performance gains, but these still aren’t enough. Once your codebase reaches hundreds of thousands of lines of code, and it’s all written in a dynamic language such as JavaScript, development velocity starts to suffer. Somebody needs to address these limitations so that companies can continue to innovate and build amazing applications for the web. JavaScript is caught in an iron triangle of its own making. Prezi, LogMeIn and Ustream organized MLOC.js, a conference to focus on how to scale JavaScript. Here’s my takeaway: JavaScript is caught in an iron triangle of its own making. This tells me that there is no one silver bullet that will solve these problems, but there may be many that do.
Screw Hashbangs: Building the Ultimate Infinite Scroll I’m just a student in a field unrelated to computer science, but I’ve been coding for years as a hobby. So, when I saw the current state of infinite scroll, I thought perhaps I could do something to improve it. I’d like to share what I came up with. (Demo: The impatient can just try it out by scrolling+navigating away+using the back button on the front page of my site. Works in current versions of Safari, Chrome, Firefox.) Hashbangs Lie Anybody that has even casually coded JavaScript over the past two years can tell you the story: Google proposed using the hashbang (#!) But the real problem is the lying. Hashbangs for Lunch Let’s say you are at a restaurant. Case 1cafe.com/entrees/burger/ketchup/ If the server accepted your order with a URL sans fragment identifier, then you get everything at once, your ketchup is on the side of your plate, and you can immediately begin enjoying your delicious burger. Case 3cafe.com/#! “What the heck is going on?” Well, yes. Here’s a helpful illustration:
AMD/RequireJS shim plugin for loading incompatible JavaScript | Tim Branyen @tbranyen When Jeremy Ashkenas decided to remove AMD compatibility completely from the DocumentCloud projects, Underscore & Backbone I wasn't quite sure what to think. On one hand it would have been great for the community to have decided on an open standard to write and load modules. On the other hand, it seemed like a dark path for a library to head down if it wasn't completely on board. This got me thinking about Backbone Boilerplate and what I could do to help provide the desired RequireJS/AMD interoperability. I thought about all the reasons why I wasn't currently using RequireJS in any of my projects. Documentation seemed thorough, but I wasn't sure if I was using it correctly.Using any kind of third-party JavaScript that was not designed to work with AMD, fell flat on its face. The major pain point, after figuring out the build process and getting through the documentation, was dealing with the non AMD-compatible code to load in. define(["order!
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting