Lecture 19. Client side frameworks

1. Client side architecture2. JS libraries for client side programming 3. JQuery4. AngularJS5. WebGL

1

2

1. Client side architecture

Tier 1

Web Server

Database

Perl/PHPProgram

Databse DBI + DBD

Program

Tier 2 Tier 3

Database

App.Program

Database

App.Program

Tier 4 Tier 5

Client Browser

JavaScriptDom

HTML5XML,CSS

AjaxEngine

JQuery WebGL

JS frameworksAngularJS, Backbone.js, Ember.js

Applications

3

2. JavaScript Libraries

• DOM (manipulation) related– JQuery, Dojo, MooTool, YUI, …– Jquery mobile, …..

• GUI-related (Widget libraries)– JQuery UI, Lively Kernel, Wijimo, …– Jquery mobile UI, …..

• Graphical/Visualization (Canvas or SVG related)– D3.js, Kinetic.js, Processing.js, Three.js, …..

• Web-application framework (MVC, MVVM, data bind)– AngularJS, Backbone.js, Ember.js, React, Knockout.js

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

4

• jQuery is a cross-browser JavaScript library, designed to simplify the client-side scripting of HTML.

• Released in January 2006 by John Resig.

• Most popular JavaScript library in use today. Used by over 55% of the 10,000 most visited websites.

3. JQuery

5

Why it is widely accepted

1. JQuery resolves difficulties of client side programing by hiding the difficulty part in the functions and provide simple API for app developers. Extendable

2. JQuery is free, open source software, licensed under the MIT License.

Design consideration

1. JQuery's syntax is designed to make it easier to do

2. navigate a document select DOM elements

3. create animations

4. handle events, Ajax

6

5. The modular approach to the JQuery library allows the creation of powerful dynamic web pages and web applications.

6. capabilities to create plug-ins on top of JQuery.This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

7

Features1. DOM element selections using the multi-browsers open source selector

engine Sizzle, a spin-off out of the jQuery project2. DOM traversal and modification (including support for CSS 1-3)3. DOM manipulation based on CSS selectors that uses node elements name

and node elements attributes (id and class) as criteria to build selectors4. Events5. Effects and animations6. AJAX7. Extensibility through plug-ins8. Utilities - such as user agent information, feature detection9. Compatibility methods that are natively available in modern browsers but

need fall backs for older ones

8

9

How to use<script type="text/javascript" src="jquery.js"></script>

$(document).ready(function() { // script goes here });

$(function() { // script goes here });

JQuery has two usage styles:

• $ function, which is a factory method for the JQuery object

• These functions, often called commands, are chainable as they all return JQuery objects.

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

10

Usage styles

• $.-prefixed functions.

• These are utility functions, which do not work on the jQuery object

$.each([1,2,3], function(){ document.write(this + 1);

});

11

Ajax example$.ajax({type: "POST",url: "example.php",data: "name=John&location=Boston"

}).done( function(msg){alert( "Data Saved: " + msg );

}).fail( function( xmlHttpRequest, statusText, errorThrown ) {alert("Your form submission failed.\n\n"+ "XML Http Request: " + JSON.stringify( xmlHttpRequest )+ ",\nStatus Text: " + statusText+ ",\nError Thrown: " + errorThrown );

});

12

$("button").click(function(){$.getJSON("demo_ajax_json.js",function(result){$.each(result, function(i, field){$("div").append(field + " ");

});});

});

More examples

13

JQuery examples

http://jqueryui.com/demos/

Jquery tutorials at

http://www.w3schools.com/default.asp

14

JQuery plug-in

• Libraries based on JQuery– JQuery UI, Themes– Knockout, MVC

• WijmoA collection of widgets. UI for the web– For desktop browser– For mobile browser– http://wijmo.com/

15

4. AngularJS

• JavaScript framework, maintained by Google. • To augment web-based applications with model–view–

controller (MVC) and model–view–viewmodel (MVVM) architectures.

• Good:– AngularJS extends HTML with new attributes.– AngularJS is perfect for Single Page Applications (SPAs).– AngularJS is easy to learn.

• Examples• http://docs.angularjs.org/tutorial/step_00

16

JQuery vs AngularJS

17

AngularJS example MVC (see demo)<div ng-app="myApp" ng-controller="personCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{fullName()}}</div>

<script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) {

$scope.firstName = "John";$scope.lastName = "Doe";$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName;};

});</script>

18

5. WebGL (Web Graphics Library)

• A JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins.

• WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

19

• WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background

• WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group.

20

Cool Examples of WebGL

• http://www.sw-engineering-candies.com/snippets/webgl/hello-world

• http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/

21