Frameworks, sometimes known as prototyping systems, are perhaps best described as “shortcuts” installed as an upper-level library over a base language. They allow you to achieve popular, complex operations in brief snippets of code that would otherwise take a great deal of work to specify in the original language.

There are many different frameworks, for many different languages. Some examples of web development frameworks include:

CMS’s could also be considered a form of framework.

There are several important points to note:

• Frameworks are typically installed as a library, which can increase page size, although there are techniques to get around this issue.

• Frameworks do not completely excuse you from learning the base language, as you are still using the original language in the framework… you’re just using less of it, meaning you don’t have to learn to the same depth.

• Frameworks are not a “magic pill”: they are not a solution for every possible goal on a web page. Frameworks also tend to be overused: loading a 60k library in order to accomplish a single effect that could be written in 480 bytes in the base-level language is not unusual nor efficient, but it is a giant waste of resources.

• Frameworks do not allow you to accomplish anything that is not possible in the original language: they just allow you to reach your goal quicker and easier, in most cases. A good example would be fading out an image over time.

In jQuery:

1. $('#object').fadeOut('slow', function() { });

In JavaScript:

1. varTimeToFade=1000.0;
2. functionfade(eid)
3. { varelement=document.getElementById(eid);
4. if(element==null)
5. return;
6. if(element.FadeState==null)
7. { if(element.style.opacity==null||element.style.opacity==''
8. ||element.style.opacity=='1')
9. { element.FadeState=2; }
10. else
11. { element.FadeState=-2;}}
12. if(element.FadeState==1||element.FadeState==-1)
13. { element.FadeState=element.FadeState==1?-1:1;
14. element.FadeTimeLeft=TimeToFade-element.FadeTimeLeft;
15. } else {
16. element.FadeState=element.FadeState==2?-1:1;
17. element.FadeTimeLeft=TimeToFade;
18. setTimeout("animateFade("+newDate().getTime()+",'"+eid+"')",33);
19. }}
20. functionanimateFade(lastTick,eid)
21. {varcurTick=newDate().getTime();
22. varelapsedTicks=curTick-lastTick;
23. varelement=document.getElementById(eid);
24. if(element.FadeTimeLeft<=elapsedTicks)
25. {
26. element.style.opacity=element.FadeState==1?'1':'0';
27. element.style.filter='alpha(opacity = '
28. +(element.FadeState==1?'100':'0')+')';
29. element.FadeState=element.FadeState==1?2:-2;
30. return; }
31. element.FadeTimeLeft-=elapsedTicks;
32. varnewOpVal=element.FadeTimeLeft/TimeToFade;
33. if(element.FadeState==1)
34. newOpVal=1-newOpVal;
35. element.style.opacity=newOpVal;
36. element.style.filter='alpha(opacity = '+(newOpVal*100)+')';
37. setTimeout("animateFade("+curTick+",'"+eid+"')",33); }