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>
popular community facts
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.
a little humor
Evolution of java script libraries
Evolution of java script libraries

Evolution of java script libraries

  • 1.
    Evolution of JavaScript “Java is to JavaScript as Car is to Carpet” - Chris Heilmann
  • 2.
    the early daysof 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"
  • 3.
    AJAX - AsynchronousJavaScript 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.
  • 4.
    AJAX - AsynchronousJavaScript 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)
  • 5.
    JSON - JavaScriptObject 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
  • 6.
    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
  • 7.
    JQuery • JQuery's tagline 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
  • 8.
    JQuery • One ofthe most successful and widely adopted libraries around • Estimated by Wikipedia to be used by 65% of the 10,000 most visited web sites.
  • 9.
    change the backgroundcolor of a body tag JavaScript Function changeBackground(color){ Document.body.style.background = color; } Onload="changeBackground('red'); JQuery $('body').css('background','#ccc');
  • 10.
    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
  • 11.
    Post JQuery -frameworks • Frameworks: offers developers client-side MVC, templating and databinding on the client side. • Knockout.js • AngularJS • JavaScriptMVC • Backbone.js • Ember.js
  • 12.
    why use client-sideMVC frameworks? • It's all about balance. • finding the right balance between server and client • good candidates for use in SPA (single page applications)
  • 13.
    templating • AngularJS • HTMLbinding expression baked-in • Ember • uses Handlebars template engine, extension of Mustache.js • Backbone • integrated with third party template default choice is Underscore
  • 14.
    Angular templating example InAngular 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.
  • 15.
    templating example an Angulartemplate 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>
  • 16.
  • 17.
    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.
  • 18.