Javascript for Web 2.0 Development Introduction
Total Page:16
File Type:pdf, Size:1020Kb
"Web Age Speaks!" Webinar Series JavaScript for Web 2.0 Development Introduction Mikhail Vladimirov Director, Curriculum Architecture [email protected] Web Age Solutions Providing a broad spectrum of regular and customized training classes in programming, system administration and architecture to our clients across the world for over ten years ©WebAgeSolutions.com 2 Overview of Talk Overview of ECMAScript 6 release Hybrid Mobile Web Development Overview of Popular JavaScript libraries: jQuery AngularJS Modernizr _Underscore.js ©WebAgeSolutions.com 3 JavaScript for Web 2.0 Development Some JavaScript Facts Who Owns JavaScript Name The "JavaScript" name is a trademark now owned by Oracle Corporation (US Patent and Trademark Office, copyright entry #75026640). ©WebAgeSolutions.com 5 ECMAScript… JavaScript is un-related to Java It was originally designed by Netscape to add scripting to their browser. It was called 'LiveScript'. Re-naming it to JavaScript was a marketing trick to get more attention to it It is more of a “Lisp in C's Clothing” with elements of functional programming (http://javascript.crockford.com/javascript.html ) Each browser’s JavaScript engine is an attempt to implement ECMAScript standard (first draft in 1997) Well-known implementations are JavaScript, JScript and ActionScript ©WebAgeSolutions.com 6 ECMAScript Release 6 (Work in Progress) Classes and modules ( import {func1} from ‘js/mylib’ ) Better variable scoping (let for the new block scope) Multiple return values (return {x, y}) Default func parameters ( function foo (a, b=‘bar’)…) Iterators and for/of loops Extended Math functions and additions to Number object E.g. Math.log10(), Math.log2(), etc. New collections maps, sets and weak maps (to prevent memory leaks by allowing GC of unreferenced objects) And much more … ©WebAgeSolutions.com 7 ECMAScript Release 6 (Work in Progress) http://wiki.ecmascript.org/doku.php?id=harmony:spe cification_drafts Timetable: Formal spec publication on June 2015 http://paulmillr.com : ECMAScript 6 (Harmony) compatibility shims for legacy JavaScript engines ©WebAgeSolutions.com 8 JavaScript on the Server Side … JavaScript is used primarily as a client-side scripting language to add interactivity to Web pages rendered in Web browsers, and is, increasingly, used on the server-side For example, Node.js is a platform for building fast, event-driven, scalable and data-intensive network applications written in JavaScript; it uses Chrome's JavaScript runtime called V8 JavaScript can also run in the Java VM (via the Rhino technology) ©WebAgeSolutions.com 9 AJAX … AJAX stands for Asynchronous JavaScript and XML Now it is more about JSON-encoded object transfer Request / response can be done synchronously as well Web applications running in the browser can send data to and retrieve from a web server a/ synchronously (background server call) JavaScript uses some sort of XMLHttpRequest object natively implemented in the JavaScript VM For rich user experience, AJAX is often used in combination with HTML and CSS to build dynamic web applications Initially popularized by Microsoft as the XMLHTTP ActiveX control in Internet Explorer 5 (1999), later adopted by Mozilla and Safari ©WebAgeSolutions.com 10 JavaScript for Web 2.0 Development Popular JavaScript Libraries Why Use Libraries JavaScript dialects are not created equal (they use different degree of affinity with the ECMAScript standards) JavaScript libraries help: Reduces JavaScript implementation differences Support RAD by reusing code for common programmatic tasks ©WebAgeSolutions.com 12 jQuery A JavaScript (ECMAScript) library Follows the "write less, do more" design principle Supports "Unobstrusive JavaScript“ A way to separate functionality (JavaScript) from a Web page presentation (HTML / CSS) Similar JavaScript libraries Dojo MooTools YUI Prototype ©WebAgeSolutions.com 13 jQuery Simple Example <body> <p id=“id1”></p> </body> // Somewhere in your JavaScript code $("#id1").text("Hello jQuery"); ©WebAgeSolutions.com 14 The “$” Conflicts jQuery may conflict with other JavaScript libraries such Prototype, MooTools, YUI, or Dojo in use of $ You can return control of $ back to the other library with a call to $.noConflict() <script src="other_lib.js"></script> <script src="jquery.js"></script> <script> $.noConflict(); // Use other library's $ from this point on here </script> ©WebAgeSolutions.com 15 jQuery Mobile The Query Mobile is a framework for building mobile web applications (shown in browsers of mobile devices with limited screen resolution) It uses extensions to jQuery Standard and HTML5 & CSS3 for laying out pages with minimal scripting (it uses a declarative way to express design intents ) ©WebAgeSolutions.com 16 jQuery Mobile Page Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="query.min.js"></script> <script src="jquery.mobile.min.js"></script> </head><body> <div data-role="page"> <div data-role="header"> <h1>This is the header of the page</h1> </div> <div data-role="main" class="ui-content"> <p>Content goes here</p> </div> <div data-role="footer"> <h1>The footer goes here</h1> </div> </div> </body></html> ©WebAgeSolutions.com 17 Hybrid Mobile Applications Hybrid mobile applications run on mobile devices inside a native execution container like regular native apps The rendering of the user interface (UI) of hybrid mobile apps is done using standard web technologies: HTML, CSS and JavaScript Hybrid apps have an embedded native device bridge that allows them to leverage such device capabilities (if those are present) as accelerometer, camera, compass, file system, device info, contacts database, etc. The native bridge functionality is exposed via a set of JavaScript APIs (e.g. Apache Cordova) that communicate with the bridge using AJAX calls ©WebAgeSolutions.com 18 IBM Worklight Technology Source: IBM Worklight Technology Overview White Paper ©WebAgeSolutions.com 19 Worklight Device Runtime Components IBM Worklight provides client-side runtime components (deployed on the device) that help wire up Worklight-authored device applications with the Worklight Server The following client-side components are shipped with Worklight: JavaScript libraries Native device libraries (written in Java, Objective-C, etc.) ©WebAgeSolutions.com 20 AngularJS AngularJS is an open-source JavaScript framework Focuses on single-page Rich Client Web applications Offers client-side Model–View–Controller (MVC) capability Plumbing is provided in the form of special custom (ng-*) tag attributes The attributes' values are AngularJS directives for handling page logic Offers two-way data-binding that allows for the automatic synchronization of the model and view (UI) components ©WebAgeSolutions.com 21 The MVC Structure ©WebAgeSolutions.com 22 One-Way (Traditional) Data Binding Traditional web pages use one-way data binding: The declarative template expressed in HTML code is merged with the model (data) to form the view Changes in the model are not automatically propagated and reflected in the view - you need to write JavaScript code to push out the changes Any changes in the view are also not immediately reflected in the model All this means that the web page developer has to always write code to keep the view in synch with the model and the model back with the view ©WebAgeSolutions.com 23 Two-Way Data Binding Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view Source: https://docs.angularjs.org/guide/databinding ©WebAgeSolutions.com 24 Speeding Things Up AngularJS implements its data binding in JavaScript which has inherent speed limitations as any other interpreted language Google is working with the TC39 – ECMAScript (JavaScript) technical committee to see if a new low- level structure called Object.observe() can be natively implemented in JavaScript runtimes which will give browsers the ability to track JavaScript object (data model) changes With the Object.observe() implementation in place, data binding can be performed at native data speeds ©WebAgeSolutions.com 25 Hello AngularJS ©WebAgeSolutions.com 26 The Hello AngularJS Code <!doctype html> <html ng-app> <head> <title>Hello AngularJS!</title> <script src='angular.js'></script> </head> <body> Enter user name: <input type="text" ng-model='name'><br> Enter user age : <input type="number" ng-model='age'> <p style='color:blue;'>User {{name}} is {{age}} years old</p> </body></html> Notes: Add <button ng-click="name ='foo'">Foo it ...</button> to change the displayed name (two-way binding) You can use ng-bind attribute to bind a model var to UI, e.g. <p ng-bind="your_model_variable"></p> ©WebAgeSolutions.com 27 Additional Observations AngularJS uses no CSS classes or IDs You don't need to write / register any DOM event listeners / callbacks Controllers are plain JavaScript classes The $scope framework object is supplied at run-time by way of Dependency Injection mechanism ©WebAgeSolutions.com 28 HTTP Connector [ {"name":"stock", "value": 139.80}, {"name":"cash", "value": 234.99}, Server Data ] function DataConroller($scope, $http) { $http.get('/assets').success(function(data, status, headers, config) { $scope.assets = data; }); Connector } <body ng-controller="DataConroller"> <table> <tr ng-repeat="a in assets"> <td>{{a.name}}</td><td>{{a.value | currency}}</td>