Overview of how JavaScript has developed over time and the emergence of some of the common frameworks

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

2. 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"

3. 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.

4. 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)

5. 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

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 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

8. 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.

9. 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');

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-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)

13. 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

14. 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.

15. 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>

16. popular community facts

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. a little humor