Evolution of java script libraries

Evolution of JavaScript
“ Java is to JavaScript as Car is to Carpet”
- Chris Heilmann

the early days of JavaScript
• a dynamic scripting language
• kind of quirky but lots of features.
• introduced by Netscape to have a language that can run client side
code in a browser.
• has absolutely nothing to do with the Java language.
• they share similar syntax both derived from the "C" style of
languages.
• Microsoft entered with their "compatible implementation" called
"Jscript"

AJAX - Asynchronous JavaScript and XML
• used to send data from client to server you would post a
form or click a link with data. browser would then load a
whole new page. effective but real fast and not real efficient.
• can use XML with AJAX but it's not required, and today very
few do, most developers today just use JSON.

AJAX - Asynchronous JavaScript and XML
• along came XMLHttpRequest, this allowed JavaScript to
send and receive data in the background.
• using DHMTL along with AJAX allowed the script to only
update portions of a page to reflect the new data.
• it took years for XMLHttpRequest to standardize across
browsers to the point where it was widely used.
• first apps using cross browser Ajax Gmail (2004) and Google
Maps (2005)

JSON - JavaScript Object Notation
• a text-based format for data exchange
• mechanism for encoding data as text
• similar to XML in a way that is readable by humans and parsable by
computers
• more compact and lighter weight than XML
• has fewer features does not support things like meta-data or
attributes.
• yahoo began to offer Web Services in JSON 2005
• Google started offering JSON feeds of GData web protocol in 2006

JQuery
• a framework
• a DOM manipulation library
• circa 2006, an open source JavaScript library for client side
development
• allows the developer to find and manipulate elements of document
far easier than anything before
• smooth's over browser incompatibilities so that browser can be
treated mostly the same.
• simplifies HTML document traversing

JQuery
• JQuery's tag line is "Write Less Do More"
• Suddenly client-side code was small and concise and working in
almost ever browser
• ability to reduce client-side code
• now worth the effort to start moving functionality from the server to
the client

JQuery
• One of the most successful and widely adopted libraries around
• Estimated by Wikipedia to be used by 65% of the 10,000 most visited
web sites.

change the background color of a body tag
JavaScript
Function changeBackground(color){
Document.body.style.background = color;
}
Onload="changeBackground('red');
JQuery
$('body').css('background','#ccc');

Post JQuery - frameworks
• JQuery and AJAX let web developers do more with JavaScript, and
generated a lot of new frameworks
• CoffeScript: a programming language that transcompiles to JavaScript
• large following in Ruby community
• CoffeeScript support is included in Ruby on Rails

Post JQuery - frameworks
• Frameworks: offers developers client-side MVC, templating and
databinding on the client side.
• Knockout.js
• AngularJS
• JavaScriptMVC
• Backbone.js
• Ember.js

why use client-side MVC frameworks?
• It's all about balance.
• finding the right balance between server and client
• good candidates for use in SPA (single page applications)

templating
• AngularJS
• HTML binding expression baked-in
• Ember
• uses Handlebars template engine, extension of Mustache.js
• Backbone
• integrated with third party template default choice is Underscore

Angular templating example
In Angular when we reference template I would mean the view of the HTML
enriched by the various Angular directives and the markup used for data
binding (the expression in double curly braces {{}}).
We can go a step further and not only regard a whole HTML document as a
template but also any HTML fragment, often referred to as partials.

templating example
an Angular template example to display the full name of every person in a
simple list
<body ng-app="myApp">
<div ng-controller="PersonCtrl">
<div ng-repeat="person in persons">
{{person.last}}, {{person.first}} {{person.middle}}
</div>
</div>
</body>

Post JQuery - to the server
• Node.js
• a different animal entirely.
• server side application using JavaScript
• used to create lightweight HTTP server applications such as Web
services that do support client-side code.

Evolution of java script libraries

Evolution of java script libraries

Recommended

More Related Content

What's hot (20)

Similar to Evolution of java script libraries (20)

Recently uploaded (20)

Evolution of java script libraries