WiseCodes » JAVASCRIPT

Javascript scalable applications

Venu Thomas — Wed, 30 Sep 2009 18:43:05 +0000

Today I was flipping through reading one of the presentations by Nicholas Zakas, specifically the “Scalable Javascript Applications Architecture“. Although not the first thing I read on the subject, I enjoyed the clarity with which Nicholas explains. I will try to record the impressions taken in case anyone can help.

1) Theory of modules

The theory of modules (as Nicholas calls it) tells us that one way to create an application that is scalable and easy to maintain, this should be composed of modules.

What are modules?

A module (in our terms) is one application that is part of a larger structure. Each has a job and only takes care of it.

(See Picture)
(I enjoyed this picture gives a clear picture of the meaning of magnitude).

Code

Core.register("hello-world", function(sandbox){
 // Private Variables
 var strPriv = "Private";

 //  Public Methods
 return {
   init: function(){
     try{
      sandbox.console("start the module");
     } catch(ex) {
      alert("sandbox not found");
     }
   },
   destroy: function(){
    // Destructor
   }
 };
});

Here’s an example of a module that recorded with Core.register() we will see later.
Looking at the form we see that the first parameter informs the module name and the second specifies the functionality of the module. This function receives as parameter sandbox (Also see below).
This feature will return an object with at least two methods init() and destroy() that comprise the options available in the module.
init() will be treated as the builder of the module and will be executed when the module is generated. On the other hand destroy() will be treated as the destroyer of the module running when the module is removed.

Sandbox

In software development environment called the Sandbox to test isolated where the experts on running applications. In this case, practically based on the same and that each of the modules used an isolated environment for other modules.
Code

var Sandbox = function() {
   var strPrivate = "Private";

   return {
     alert: function(str){
       alert(str + strPrivate);
     },
     console: function(str) {
       console.log(str);
     }
 }
};

As we see the Sandbox, this is an element that offers a number of ways in which we interact with the application. For example, could be used to interact with the DOM of the application using a JS framework (or not) could implement a simple version and checked to make Ajax requests or validate forms, …. All this is available from the modules.
This module should only worry about what the Sandbox allowed without worrying about what lies beneath it, thus facilitating the development and functionality of each module.
Example:

// Add method notify () to Sandbox
var Sandbox = function() {
  ....
   notify: function(opt){
     // Checks prior
     // .....
     $("#notify #title").text(opt.title);
     $("#notify #content").html(opt.content);
   }
  ....
};

// Use the method notify () of the Sandbox from the module.
Core.register("hello-world", function(sandbox){
   // Private Variables
   ver ver = "1.0";

   return {
    init: function(){
      try{
        sandbox.notify({
          title: "Hello World v." + ver,
          content: 'This is a <strong>Test</strong>.<br />To demonstrate the use of modules'
        });
      } catch(ex) {
        alert("sandbox not found");
      }
    },
    destroy: function(){
     // Destructor
     }
   };
});

In the example we see that at the start of our module, we call the method notify() from sandbox without worrying about what will make this method.
The method after a series of previous validations, simply add a title and content to an element #notify using jQuery.
Thus, the Sandbox filter made between the module and the framework controlling what this intends to do about our application.

The Core

In the above we have seen a variable Core that seems to be the cornerstone of all this. This is a small script that allows modules to register and associate a new instance of the SandBox to each of them every time you run .

var Core = function(){
   // Private Variable
   var modules = {};

   // Instance Creams
   function createInstance(moduleID){
    var instance = modules[moduleID].creator(new Sandbox(this)),
    name, method;

    if (!debug) {
      for (name in instance){
        method = instance[name];
        if (typeof method == "function") {
          instance[name] = function(name, method) {
            return function(){
              try { return method.apply(this, arguments);    }
              catch(ex) { log(1, name + "(): " + ex.message);    }
            }
          }
        }
      }
    }
  return instance;
 }

 //  Public method
 return {
   register: function(moduleID, creator) {
     modules[moduleID] = {
       creator: creator,
       instance: null
     };
   },
   start: function(moduleID) {
     modules[moduleID].instance = createInstance(moduleID);
     modules[moduleID].instance.init();
   },
   stop: function(moduleID){
     var data = modules[moduleID];
     if (data.instance) {
       data.instance.destroy();
       data.instance = null;
     }
   },
   startAll: function(){
     for (var moduleID in modules) {
       if (modules.hasOwnProperty(moduleID)) {
         this.start(moduleID);
       }
     }
   },
   stopAll: function() {
     for (var moduleID in modules) {
       if (modules.hasOwnProperty(moduleID)) {
         this.stop(moduleID);
       }
     }
   }
 };
}();

As we see it is a small script (this is a base, can be extended depending on the needs of the project) that allows us to build the modules we want for every application.
Example

Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
...

// Start all modules
Core.startAll();

Share on Facebook

Let Google host your javascript libraries

Venu Thomas — Tue, 15 Sep 2009 14:38:29 +0000

An interesting possibility offered by Google developers use it as a CDN (content distribution network) for open source javascript libraries popular. In practice, this means is that in your web development, instead of going to your server for libraries that use scripting, you can directly reference and use the possibilities offered by this company in its servers.

This provides several advantages are not insignificant:

First, the discharge of these libraries will, for the client, probably faster than if you have to get from your server through the Internet. This is Google’s network infrastructure, and that means guarantees.
Second, and related to the above, if this is a high traffic website, the audience will surely be allowed infinitely greater than you can offer to another server.
Third, if the user has previously visited another site that also use the same library, will benefit from the local cache of the same, because your browser does not again discharged. And in any case, they would be taking advantage of Google’s cache optimizations.
fourth, do not consume bandwidth from your provider, although this is negligible. And I mean negligible bandwidth, not the provider
fifth, you can use the libraries from sites hosted somewhere where you could not, or is not easy, upload scripts, as the platform Blogger from which to write.

At this point includes: development frameworks, in all versions available:

jQuery
jQuery UI
Prototype
script_aculo_us
MooTools
Dojo
SWFObject
Yahoo! User Interface Library (YUI)

If you’re already using Google Ajax libraries (such as the Visualization API, or Google Maps), and get through the charger google.load (), you can also use it to download these frameworks. You can also do so through a direct reference, such as:

^?View Code JAVASCRIPT

<script 
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js">
script>

Oh, and not worry about changing versions, or anything. Google is committed to live indefinitely all distributions to be published and include updates as they appear.

Finally, and to provide a negative view, some people think that this is one more strategy for Google to get information about users’ browsing, code execution from its servers enable cookies and reading of data that could be used for purposes other than those provided on your website. Still others think it could be a source for the spread of malicious code if someone managed to hack these archives. Obviously not a good idea to use this option if you go to work in local mode, offline.

For more information on how to download and libraries available, you can visit the Developer Guide for Ajax libraries API.

Share on Facebook

5 ways to use Ajax with jQuery

Venu Thomas — Tue, 25 Aug 2009 05:35:43 +0000

The people of Nettuts publishes an interesting article on using jQuery with Ajax. Specifically the 5 ways that jQuery allows us to send asynchronous requests.

$.load()
$.get()
$.post()
$.getJSON()
$.getScript()

$. load ()

This is the feature I like most about jQuery already makes one of the most common tasks of developing with Ajax is as simple and straightforward as we shall see in this example:

$("#div_links").load("/Main_Page #jq-p-Getting-Started li");

This example brought to the documentation page on jQuery, it manages to launch a request to the URL /Main_Page (usa URL Rewrite) HTML response and take the #jq-p-Getting-Started li and inserted into #div_links
Just great, comfortable and fast.

$. get ()

This is the simple function with which we can launch the server via GET requests Ajax.

$.get("test.cgi", { name: "Venu", time: "7pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

By passing 3 options, 2 of which are options (rather conditional) you can request to launch the file (1) with parameters (2) and treat the response through a callback (3rd).

$. post ()

Like the above, this feature lets you send POST requests using Ajax.

$.post("test.php", { name: "Venu", time: "7pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

As easy as above.

$. getJSON ()

Although the above are able to specify the type of return, the best option is to use this method to obtain the response in JSON evaludada the callback function.

$.getJSON("test.js", { name: "Venu", time: "7pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

Taking into account the browser, the object will use native JSON or use a system based on eval().

$. getScript ()

Although technically not an Ajax request is a request to the server and therefore has a place in the post.

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

With this method we can load a file asynchronously using JavaScript and the parameter (2) callback can execute Javascript code that is using the js file that we want to load (1).

Share on Facebook

Everything you ever wanted to know about JSON

Venu Thomas — Sun, 23 Aug 2009 18:58:54 +0000

JSON is short for JavaScript Object Notation and is a way of storing information in an organized and easily accessible.

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
};

At first glance you get a very clear and that helps your understanding. In this example we have defined a small JSON object called wcVenuThomas composed of a series of attributes. In this way, we can subsequently use to follow the following structure.

alert("Venu Thomas is " + wcVenuThomas.age );

Functions (not to carry information)

Thanks to the versatility of the variables in JavaScript it is possible to match one of these attributes to a function, creating a method of the object itself:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello, " + strString + "! I'm Venu Thomas from " + this.hometown + ", How are you?");
    },
};

Now you can salute()

 var usrName = "John James"
wcVenuThomas.salute(usrName);

As part of the JSON object, we can make use of the attributes from the same method by using this operator.

The functions do not make sense to use JSON as a conveyor of information, so we leave it alone as a curious object notation

Arrays

Another option to the JSON is the ability to insert arrays as attributes and in turn define elements within JSON:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello I'm Venu Thomas from " + this.hometown + ", How are you? " + strString + "?");
    },
    "projects":[
    	{
    		"name" : 	"Apple News and Analytics ",
    		"url"		 : 	"http://apple.wisecodes.com"
    	},
    	{
    		"name" :	"Life Style Blog",
    		"url"		 :  "http://telegraph.wisecodes.com"
    	}
    ]
};

In this way we can travel an arrays are:

var projects = wcVenuThomas.projects, html = '';
for (var x = 0 ; x < projects.length ; x++) {
html += '' + projects[x].name + '';
}

JSON object chaining

Another way of grouping elements is to use JSON JSON objects embedded within other objects JSON:

var wcVenuThomas = {
    "age" : "28",
    "hometown" : "Cochin, Kerala, India",
    "gender" : "male"
    "salute" : function(strString) {
    	alert("hello I'm Venu Thomas from " + this.hometown + ", How are you? " + strString + "?");
    },
    "projects":{
    	"applenews": {
    		"url"		 : 	"http://apple.wisecodes.com"
},
  	  "lifestyleblog": {
    		"url"		 :  "http://telegraph.wisecodes.com"
}
    }
};

As we can see, really the only thing we have done is to insert an object into a JSON attribute father, so we can access it as follows:

var URL = wcVenuThomas.projects.applenews.url;

Practical uses

As data storage system, is ideal for transporting from one page to another, even a website to another. A very simple and is used to obtain data from Flickr using jQuery to get data.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

In this example, taken from the documentation of jQuery, as we launched a call for the latest images sent to Flickr that have been scheduled with the tag “Cat”. The result will be evaluated and processed to the end to reach us within data, a variable that can go as if we were talking about a variable.

Native JSON

One of the problems encountered with JSON is the assessment of code, since it must be transformed into a variable to use, and this requires the use of eval() which makes the process time is increased considerably .

// Eval
var myObject = eval('(' + myJSONtext + ')');

// Native JSON
var myObject = JSON.parse(myJSONtext);

// Mix
var myObject = (JSON)?JSON.parse(myJSONtext): eval('(' + myJSONtext + ')');

Fortunately, modern browsers (IE8, FF3.5, WebKit, ….) Features are implemented to forget eval() and improve the process time.

Share on Facebook

Javascript: Tic Tac Toe

Venu Thomas — Mon, 10 Aug 2009 15:17:33 +0000

View Demo Download Code [3.29 kb]

Playing

The computer always plays with circles ( “O”) and you with blades
( “X”). Start your. To put an X have to click on the button
the bottom panel that corresponds to the position you want to put it. You can
also hand-write it, always with capital letters (without cheating, because the
computer trusts you).

The computer will make its redondel every time you put your X .
Never make a mistake, and if you neglect (and you do not cheat), you win. If you cheat, do not
work correctly.

When the game ends, the computer shows the result and increase the counters
lower. To play another game, press the button again Game , which
Clean the panel game. To clear the counters, click the Clear button Clear.

This < head> between and </head>:

And this from <body> and </body> :

Playing

The computer always plays with circles ( "O") and you with blades ( "X"). Start your. To put an X have to click on the button the bottom panel that corresponds to the position you want to put it. You can also hand-write it, always with capital letters (without cheating, because the computer trusts you).

The computer will make its redondel every time you put your X . Never make a mistake, and if you neglect (and you do not cheat), you win. If you cheat, do not work correctly.

When the game ends, the computer shows the result and increase the counters lower. To play another game, press the button again Game , which Clean the panel game. To clear the counters, click the Clear button Clear.

Happy Programming!!!

Share on Facebook

10 javascript frameworks that need to know

Venu Thomas — Thu, 06 Aug 2009 14:08:13 +0000

Web developers, designers and typesetters should already know JavaScript. The javascript does not know should Wearing batteries to keep the language client for the future (and present).
For those who defend us a little on the subject and we extend our capacity and speed of development can opt to use a framework to give us a lot of options for everyday use.

* SproutCore
* Spry
* JavaScriptMVC
* qooxdoo
* Midori
* Archetype JavaScript Framework
* June Framework
* UIZE
* SimpleJS
* Fleegix.js

Share on Facebook

Multiline in JavaScript

Venu Thomas — Wed, 05 Aug 2009 19:52:41 +0000

Whenever you try to write a script in Javascript that requires a string of multiple lines get an error code that is poorly trained. That is a problem for these scripts to generate HTML content, because by having a clear line and we lose we do not see exactly what you’re painting.

$('#ID').append(
   ' \
      Welcome to WiseCodes.Com! \
    '
);

var strWelcome = 'Welcome \
to WiseCodes.Com!'

The key is used (\) to indicate the line, that mysteriously causes the browser detects that it is a single line, making the job of uniting us.
A curiosity of this language that helps us to make things easier and above all clear.

Happy Programming !!!

Share on Facebook

The best way to load javascript

Venu Thomas — Tue, 04 Aug 2009 16:27:55 +0000

Nicholas C. Zakas has been thinking about the issue and has taken 3 points needed to be taken to improve the load javascript on our pages.

* Create two files Javascript. In the first place you need to dynamically load another javascript file and the second with the code needed for our application.
* Javascript includes the first end of the page just above < / body >
* Just below we create a second tag < script > where to call / the file / s needed.

Our HTML would be more or less like this:

loadScript ()

loadScript () function is responsible for loading the Javascript file in a dynamic and responsible for implementing the code as the second parameter to indicate when it is loaded correctly.

function loadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){  //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {  //Others
script.onload = function(){
callback();
};
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

Clearly, these optimizations improve outcome, although we are talking about milliseconds (or seconds in the worst case). But it’s good to know how to improve our scripts and pulirlos well.

Happy Programming!!!

Share on Facebook

Doodle.js, library for working with canvas

Venu Thomas — Thu, 02 Jul 2009 20:43:39 +0000

Doodle.js is a library that allows us to easily work with the element

Examples

Do not miss some of the examples available on the homepage of the library:
Spiral multicolor
Rebounds multiple

Share on Facebook

Detection of faces on canvas with Javascript

Venu Thomas — Tue, 16 Jun 2009 19:14:03 +0000

Detect faces and is not just for Google Images. Now you can implement it on your website using Javascript and the canvas properties.

How it works?

To do this we need to work only 2 files in our <head />

^?View Code HTML

Dat.js the file shows how to detect and detector.js the file has the logic of the script can detect faces in any photo.
1 can detect faces in the photos, the process becomes slower depending on what we choose (of course).

1 Face

^?View Code JAVASCRIPT

face_detect_one( document.getElementById("myCanvas") );

Multiple Faces

^?View Code JAVASCRIPT

face_detect_multi( document.getElementById("myCanvas") , progress_callback, result_callback );
function progress_callback( StepsCompleted, TotalSteps){
....
}

Answer

The response functions that returns the values we obtain a rectangle that contains the person’s face.

^?View Code JAVASCRIPT

var myCanvas = document.getElementById("mycanvas");
 
var result = face_detect_one( myCanvas );
if (result) draw_rect(result, myCanvas);
 
function draw_rect(r, myCanvas){
	var CanvasContext = myCanvas.getContext("2d");
 	CanvasContext.strokeRect( r.x, r.y, r.w, r.w );
}

Link: via Percobaan

Share on Facebook