My Favorite JavaScript Design Pattern
I thought it might be interesting to look at a JavaScript design pattern that I use a great deal. I settled on it gradually, over a period of time, absorbing and adapting influences from various sources, until reaching a pattern that offers the flexibility I need. Let me show you an overview, and then look at how it comes together: As you can see from that sample code, the overall structure is a function literal (function() { ... })(); A function literal is essentially a self-executing scope, equivalent to defining a named function and then calling it immediately: function doSomething() { ... } doSomething(); I originally started using function literals for the sake of encapsulation —any script in any format can be wrapped in that enclosure, and it effectively “seals” it into a private scope, preventing it from conflicting with other scripts in the same scope, or with data in the global scope. The Beauty Within public data with each other. var THIS = this; We’ve created a private variable Wrapped Up!
Namespacing in JavaScript
Global variables should be reserved for objects that have system-wide relevance and they should be named to avoid ambiguity and minimize the risk of naming collisions. In practice this means you should avoid creating global objects unless they are absolutely necessary. But, hey, you already knew all that….. So what do you do about it? Conventional wisdom tells us that the best global abatement strategy is to create a small number of global objects which will serve as de facto namespaces for underlying modules and subsystems. Static Namespacing I’m using static namespacing as an umbrella term for solutions in which the namespace label is effectively hard coded. 1. The most basic approach. You could make future maintenance a little easier by using this to reference sibling properties – but this is a little risky since there is nothing to stop your namespaced functions from being reassigned: 2. 3. I find myself using the module pattern more often these days. Dynamic Namespacing 4. 5.
Brian Ford
AngularJS is like the missing Batarang on your utility belt of web development awesomeness. It gives you two-way data binding that's both easy to use and fast, a powerful directive system that lets you use create reusable custom components, plus a lot more. Express is an excellent webserver for Node.js that provides routing, middleware, and sessions. Incidentally, the two work quite well together! In this tutorial, I'm going to walk through writing a simple blog app with Angular and Express. If you'd rather skip to the end and see the finished product, you can grab the finished product from Github, or take a look at a live demo here. Anatomy of the App This application is really divided into two parts: client, and server. Getting the Angular Express Seed To kick start the process of writing an AngularJS app, I've created the Angular Express Seed, based on the Express web server (which runs on Node.js) and the Angular Seed. or download it as a zip. λ → npm install λ → node app.js <! Conclusion
Climb That Mountain: JavaScript Testing with Mocha
JavaScript is a neat and powerful language. Sure it has its flaws, but serious software can be developed with it. The way I prefer developing JavaScript applications is by test driving the code with some kind of testing tool. And I am not thinking about hitting the browser's refresh button. I recently started playing with Visionmedia's mocha testing framework. This blog post will show you the first couple of steps you need to take to test drive your JavaScript code with mocha in the CLI. First of all, you need node.js to run JavaScript code in the terminal. At the time of this writing my current node version is 0.6.6. Next you need node's package management tool (npm). With these two steps you're ready to roll. I really wanted to help you - Dear Reader - so I created this shell script to make your life easier. curl -L | sh If everything goes OK, you will see this: create a sample spec file... create a sample src file... run the spec with mocha... . Enjoy!
Sur la route d'Oxiane » Blog Archive Application AngularJS avec Yeoman, Express et JewelryBox sous Mac OS X
Yeoman a été créé dans l’optique de faciliter l’initialisation de web apps JavaScript, en regroupant un ensemble de 3 utilitaires tournant sous Node.js : Yo : initialise la structure de la web app.Grunt : déclenche les phases de test, preview et build de la web app.Bower : assure la gestion des dépendances. Express est un framework d’application web fonctionnant lui aussi sous Node.js. Lorsque l’on génère le squelette d’une web app angular, Yo propose de gérer le design avec Twitter Bootstrap et des feuilles de style SASS. Les feuilles de style SASS, bien que très pratiques, doivent être compilées en CSS. Un framework open-source Ruby fait ça très bien et se nomme Compass. Ruby est installé par défaut sous OS X, mais il est préférable, comme sous d’autres OS d’avoir recours à RVM, un outil en ligne de commande qui installe, gère et permet de travailler facilement avec plusieurs environnements Ruby différents. Mise à jour de XCode Installation de JewerlyBox Installation de Compass
CoffeeScript vs. TypeScript by Paul Oliver on Prezi
React | Why did we build React?
There are a lot of JavaScript MVC frameworks out there. Why did we build React and why would you want to use it? React isn't an MVC framework React is a library for building composable user interfaces. React doesn't use templates Traditionally, web application UIs are built using templates or HTML directives. React approaches building user interfaces differently by breaking them into components. JavaScript is a flexible, powerful programming language with the ability to build abstractions. We've also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript. Reactive updates are dead simple React really shines when your data changes over time. In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. React takes a different approach. When your component is first initialized, the render method is called, generating a lightweight representation of your view.
A plain english guide to JavaScript prototypes - Sebastian's Blog
When I first started learning about JavaScript object model my reaction was of horror and disbelief. I was totally puzzled by its prototype nature as it was my first encounter with a prototype based language. I didn’t help that JavaScript has a unique take on prototypes as it adds the concept of function constructors. But as I used JavaScript more I didn’t just learn to understand its object model but also started love parts of it. Prototypes in Javascript Most guides / tutorials start explaining JavaScript objects by going directly to ‘constructor functions’, I think this is a mistake, as they introduce a fairly complex concept early on making Javascript look difficult and confusing from the start. Prototype chains (aka prototype inheritance) Every object in Javascript has a prototype. Prototype inheritance chains can go as long as you want. The __proto__ object To understand prototype chains in JavaScript there is nothing as simple as the __proto__ property. Object.create
