Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 Netscap...
AJAX - Asynchronous JavaScript and XML
• used to send data from client to server you would post a
form or click a link wit...
AJAX - Asynchronous JavaScript and XML
• along came XMLHttpRequest, this allowed JavaScript to
send and receive data in th...
JSON - JavaScript Object Notation
• a text-based format for data exchange
• mechanism for encoding data as text
• similar ...
JQuery
• a framework
• a DOM manipulation library
• circa 2006, an open source JavaScript library for client side
developm...
JQuery
• JQuery's tag line is "Write Less Do More"
• Suddenly client-side code was small and concise and working in
almost...
JQuery
• One of the most successful and widely adopted libraries around
• Estimated by Wikipedia to be used by 65% of the ...
change the background color of a body tag
JavaScript
Function changeBackground(color){
Document.body.style.background = co...
Post JQuery - frameworks
• JQuery and AJAX let web developers do more with JavaScript, and
generated a lot of new framewor...
Post JQuery - frameworks
• Frameworks: offers developers client-side MVC, templating and
databinding on the client side.
•...
why use client-side MVC frameworks?
• It's all about balance.
• finding the right balance between server and client
• good...
templating
• AngularJS
• HTML binding expression baked-in
• Ember
• uses Handlebars template engine, extension of Mustache...
Angular templating example
In Angular when we reference template I would mean the view of the HTML
enriched by the various...
templating example
an Angular template example to display the full name of every person in a
simple list
<body ng-app="myA...
popular community facts
Post JQuery - to the server
• Node.js
• a different animal entirely.
• server side application using JavaScript
• used to ...
a little humor
Evolution of java script libraries
Evolution of java script libraries
Upcoming SlideShare
Loading in …5
×

Evolution of java script libraries

429 views

Published on

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

Published in: Internet
  • Be the first to comment

Evolution of java script libraries

  1. 1. Evolution of JavaScript “ Java is to JavaScript as Car is to Carpet” - Chris Heilmann
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. popular community facts
  17. 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. 18. a little humor

×