Javascript for Web 2.0 Development Introduction

"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

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

©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

css">

This is the header of the page

Content goes here

The footer goes here

©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

 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

 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

User {{name}} is {{age}} years old

Notes:  Add to change the displayed name (two-way binding)

 You can use ng-bind attribute to bind a model var to UI, e.g.

 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

[ {"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 }

http://docs.angularjs.org/api

©WebAgeSolutions.com 30 Tools  Since AngularJS uses the standard set of web technologies: HTML and JavaScript, you can continue using your favorite editors, IDEs, browser extensions, etc.  The AngularJS vibrant community has also contributed to public domain a number of useful specialized tools to help develop and test AngularJS applications:  Batarang  A Chrome browser developer tool extension for inspecting AngularJS web applications to see what is happening under the hood  Plunker (http://plnkr.co)  On-line Web page editor useful for quick code prototyping, running short examples and do code sharing. Written in AngularJS.

©WebAgeSolutions.com 31 Modernizr  Evolving web technologies make it more and more difficult to support older browsers  Mobile devices make the browser landscape even more complex  It is important that web sites take advantage of new browser features while supporting legacy browsers  Modernizer is a JavaScript library for browser feature detection (HTML, CSS, JavaScript)  Feature detection allows you to incorporate progressive enhancement into your web sites in order to provide the best experience to all users  Modernizer plays an important role in responsive web design (RWD)

©WebAgeSolutions.com 32 Feature Detection  Legacy sites often relied on the browser self identifying by sending a "User-Agent" header as part of an HTTP request.  The site then used the user-agent to guess features were supported  Unfortunately the site had to maintain an up-to-date mapping of user-agents to features  Modernizr takes a different approach  Runs on page load and actually tests to see what features are supported ; it creates a JavaScript object (Modernizr) that contains the results of these tests as boolean properties