Am initiating this thread to teach Nairalander the power of JavaScript Frameworks/Library. Since am not an island of knowledge, let all the professional developers here, especially the JavaScript Gurus to also contribute to this tutorial so that we can all exploit the potential of JavaScript Frameworks in Web Development.


You are all Welcome to [size=18pt]JavaScript Frameworks Tutorials[/size]

I will be starting this tutorials with [size=16pt]jQuery[/size].

WHAT IS JQUERY?

jQuery is not a new language in the web industry, it is just a javascript library that helps you do great things with few lines of codes. This is why jQuery is call "The Write Less,Do More" JavaScript Library. It's designed to the change the way you write JavaScript. This is not the only JavaScript Library we have, but am introducing this first because it was the first library I encountered.

WHAT YOU SHOULD HAVE KNOW

HTML
CSS
Basics of JavaScript

If you need tutorials on any of these web standards, visit www.w3schools.com.

Just A Quick Baisc U shud know before dabbling into Frameworks

Making use of Objects in JavaScript

var MyObject={
sayHi:function(){
alert("This is A Test";
},
name:"Remi",
arrayKey:['dojo','sencha']
}

So Calling SayHi will be

MyObject.sayHi()

This style of creating Object is a form of Json,it is essential to know things like these especially when u start to create plugins in jquery or Dojo or any framework.
Legacy ways of creating objects

var MyObject=new Object();

also you can create functions in different ways

function add(a,b){}

var add=function(a,b){}

Now we mix legacy code of Object and Function

var MyObject=new Object();
MyObject.add=function(a,b){return a+b}

However You should know that Javascript is quite confusing as Function is also an Object,infact everything is an Object in Javascript, there are no classes only prototypes of Objects.

function FuncObj(){}

FuncObj.msg="I Love Pcguru";

Function is also an Object in JavaScript
Okay let's we can delegates functions to other Variables

function confess()
{
print "pcguru loves porn";
}
FuncObj.confession=confess;
FuncOBJ.confession();

Next Bus Extending Classes and Object this is quite neccessary imagine u created a plugin that accepts a NodeList("Collection of DoM ELements" and it expects an array and u pass a Domelement,u need to detect it or else u can encounter serious errors

Now we can create An Object however at times the Javascript Object we might feel is not adeqaute enough for our use
we all now that Array has a method called array.push(); in Javascript it is easy to extend the methods of an Object.

String.prototype.type=function(){alert("I am a String"}

var s=new String("I am a String";
s.type();

this will add a method to the string Object
so u can create an Object and add methods to it,however we need to Check instances e.g

var a="String"; (function(){alert(a instanceof String)}) //print false
var s=new String("I am a String"; (function(){s alert(instanceof String)}) //print true

The A is a string variable while s is an Object of the Class String
so this is very important when making functions with parameters of Object u can make a check with instance of\

Next Class Inheritance i will pull off an exam off the net cuz my connection is almost off

function Mammal(name){ 
	this.name=name;
	this.offspring=[];
} 
Mammal.prototype.haveABaby=function(){ 
	var newBaby=new Mammal("Baby "+this.name);
	this.offspring.push(newBaby);
	return newBaby;
} 
Mammal.prototype.toString=function(){ 
	return '[Mammal "'+this.name+'"]';
} 


Cat.prototype = new Mammal();        // Here's where the inheritance occurs 
Cat.prototype.constructor=Cat;       // Otherwise instances of Cat would have a constructor of Mammal 
function Cat(name){ 
	this.name=name;
} 
Cat.prototype.toString=function(){ 
	return '[Cat "'+this.name+'"]';
} 


var someAnimal = new Mammal('Mr. Biggles');
var myPet = new Cat('Felix');
alert('someAnimal is '+someAnimal);   // results in 'someAnimal is [Mammal "Mr. Biggles"]' 
alert('myPet is '+myPet);             // results in 'myPet is [Cat "Felix"]' 

myPet.haveABaby();                    // calls a method inherited from Mammal 
alert(myPet.offspring.length);        // shows that the cat has one baby now 
alert(myPet.offspring[0]);  

will explain soon on mobile

Useful Tips and Tricks that will save u headache in JS Frameworks.

1.No matter the language if u have a div with an Id you need to retrieve,always use ur getElementById reason being is most selector use a form of reg expression esp jquery and others.this usually a performance thing not that u might notice.only use jquery $() when u need multiple elements

2.Always store a reference variable to objects or doms.as you will come to realize that the "this" word is the most confusing aspect in javascript.unlike other language where it refer to classes or objects.this in javascript is very confusing and its context changes easily. Always store a variable to hold an object.

3.Frameworks r meant to make life easy for you,however life gets hard when u have no basic idea of the language itself,debugging frameworks can be frustrating.first know your Document Object Model basics,know your syntax,javascript is one of the most challenging scripts to learn so ensure you know ur javascript and Object basic,get development tools,firebug for firefox,illumination for firefox and framework and javascript reference guides,jlint for firefox.these tools will guide you into becoming a better JS Developer.

Today I will talk about why I prefer Dojo over jquery,in no way am I trying to discourage jquery users,just my view.I started writing javascript around 2009,it was quite difficult unlike php and c which had consistent pattern,javascript was totally different,infact to some point I gave up on javascript because it was quite lengthy even for a simple action.then came the advents of frameworks.by than jquery was thrown around every web I went I heard the name,till I try getting my hands into it,once agin js was sexy,but I felt uncomfortable knowing jquery than javascript itself,so I decided to start all over from basic to advanced level,jquery was quite good esp in DOM traversal and manipulation.I created several plugins to suit my need,but a problem ensue.I wanted to create a plugin then extend it to have variants.cuz extending would simply make life easier,it dawned on me that aside from dom hacking jquery didn't support Class and Objects.u can't create a class in jquery,u only extend jquery object as a prototype to enable u add new functions(plugin).instantly I needed another js framework,my first look was prototype,but I didn't feel in synch with it.I wanted to try yahoo UI but there was no simple documentation,it was now between Mootool and Sencha.mootool satisfied my need,but for some reason getting documentation was difficult,and sencha wasn't that popular,so I gave up and tried implementing a plugin in jquery that would load a script via ajax just like the import,using keywords however a friend on twitter told me my plugin was similar to dojo.I decided to look dojo up.and I was amazed,the dojo toolkit with the full plugins is 36mb in size ,first of all it had an interface for creating classes,extending class,creating and extending widgets,infact my first joy was the fact that it was modularized. Unlike the jquery Ui lib I had to insert each component src on the header.but with dojo I cud use a function to require a module and it downloads dependencies.it took me a week to grasp dojo.at first it was quite lengthy than jquery,but it also provides chaining abilities which I detest the most because it's hard to ascertain what the developer is trying to do.it now had some features no js framework I've used have.
1.Dojo Json Data Store
These Api are created to enable u create a structured json format in a way that makes reading values far saner though getting the grasp is tricky but once u do,it's game on couple with the module created in zend.Zend_Dojo you can retrieve data from server convert to dojo and send back.

Will be back for continuation.

i wrote a small guide to learning JS Framework

http://www.forgetdbigwords.com/wordpress/2011/03/15/a-guide-before-learning-javascript-frameworksjavascript-beginners/

learning dojo and jquery at the same time -Installation-Selectors

http://www.forgetdbigwords.com/wordpress/2011/03/14/learning-a-new-javascript-framework-case-studyjquery-dojo/

Dojo Animation and Dojo.data.ItemFileReadstore will post tutorial on it very soon
http://www.forgetdbigwords.com/blog/FlowMeter/

Bump...

wow thanks for this even till now am still using Dojotoolkit i guess am old. but my JS knowledge has changed i'm not as good as before thanks to relying too much on transpilers

pcguru1:
wow thanks for this even till now am still using Dojotoolkit i guess am old. but my JS knowledge has changed i'm not as good as before thanks to relying too much on transpilers

cool. What is a transpiler? Are they the same as preprocessors?

blueyedgeek:
cool. What is a transpiler? Are they the same as preprocessors?

A transpiler allows you write a source and that source gets converted to another e.g am using Typescript because I want strict typing and classes in JS but there is coffee script and traceur. That way we can write ES6 in preparation for the future.

pcguru1:


A transpiler allows you write a source and that source gets converted to another e.g am using Typescript because I want strict typing and classes in JS but there is coffee script and traceur. That way we can write ES6 in preparation for the future.

Cool. JavaScript is my first language so I'm not really used to the concept of classes (the classical way) so I might not fully understand the need for what you just mentioned since the concept of classes can be simulated in javascript using constructor functions but Ecma Script 6 sure does sound exciting. I still dey learn and the new features feel foreign to me sha but man must sha learn.

Ps: do you work at IdeaHUB in Yaba?

blueyedgeek:
Cool. JavaScript is my first language so I'm not really used to the concept of classes (the classical way) so I might not fully understand the need for what you just mentioned since the concept of classes can be simulated in javascript using constructor functions but Ecma Script 6 sure does sound exciting. I still dey learn and the new features feel foreign to me sha but man must sha learn.

Ps: do you work at IdeaHUB in Yaba?

No but I have friends there ezra and ayoola in delivery science was supposed to work there before.

pcguru1:


No but I have friends there ezra and ayoola in delivery science was supposed to work there before.

Ok, cool. Thought you were a regular there. I'll like to learn from people like you cos you be boss.

blueyedgeek:
Ok, cool. Thought you were a regular there. I'll like to learn from people like you cos you be boss.

Thanks bro, Sure thing sadly i haven't had time to write blogs anymore, old age has caught up with me, i will see how i can start the culture of writing topics here the probs is i got tasks that take away my sanity.

pcguru1:


Thanks bro, Sure thing sadly i haven't had time to write blogs anymore, old age has caught up with me, i will see how i can start the culture of writing topics here the probs is i got tasks that take away my sanity.

Abeg, you go try oo. Even if it's only going to be once per week. Maybe Saturdays, it could be like a series.