Evolution of java script libraries
Download as PPTX, PDF1 like481 views
Overview of how JavaScript has developed over time and the emergence of some of the common frameworks
![[Blibli Brown Bag] Nodejs - The Other Side of Javascript](https://cdn.slidesharecdn.com/ss_thumbnails/i9sycn9mqmawqhdzv0i6-signature-6c4174f35aa29065af3a8befc1a3a39ca764f84b5c082116486141991cd72c8c-poli-160225041632-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Evolution of java script libraries (20)
Ad
Recently uploaded (16)
![5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/5-ways-to-future-proof-your-siem-securonix1-250426114439-c707b6bf-thumbnail.jpg?width=560&fit=bounds)
Ad
Evolution of java script libraries
- 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>
- 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