Embed Size (px)
Citation preview
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
