Clienti responsive pentru servicii web

Cristian AFLORI

Agenda

l Aplicatie web standard l Web 2.0 l Html 5 l CSS l DOM l JavaScript l Ajax l jQuery

Agenda l JSON l Apel REST in jQuery l Responsive Web Design (RWD) l Single Page Application (SPA) l Twitter Bootstrap l Concepte de baza l Layout l CSS, Controls, plugin-uri JavaScript

Evolutie aplicatii web

Componente aplicatie web

Conexiuni la Internet asigurate de ISP (Internet Service Provider).

Servere care implementeaza diverse nivele din arhitectura aplicatiei.

Clienti (desktop, laptop, tableta, telefon) pe care ruleaza browsere (Chrome, IE, Firefox, Safari, Opera etc).

Retele fizice, cu sau fara fir, pentru interconectarea serverelor si a clientilor.

Dispozitive (router, firewall, switch) care implementeaza mecanismele de comunicare si securitate.

Aplicatie web standard

Aplicatie web standard

Se bazeaza pe patternul MVC Model View Controller. Separa logica aplicatiei de date si interfata cu

utilizatorul. Model starea (datele) aplicatiei, View datele afisate

utilizatorului, Controller gestioneaza interactiunea cu utilizatorul.

Toate logica aplicatiei se afla pe server. Clienti cu o interfata grafica simpla, generata pe server. Overhead mare, in functie de complexitatea interfetei

cu utilizatorul si a procesarilor pe server. Efort de dezvoltare mare.

Aplicatie web standard

Web 2.0

Rich Internet Application(RIA) aplicatii in browser dinamice, interactive, cu interfete grafice avansate

Web oriented architecture(WOA) extinde arhitectura bazata pe servicii (SOA) pentru aplicatii web.

WOA = SOA + WWW + REST Social web set de relatii sociale care leaga

persoanele prin WWW (comert online, educatie, jocuri, retele sociale)

Web 2.0

PaaS

Platform as a Service o categorie a serviciilor de tip cloud computing ce furnizeaza o platforma pentru a dezvolta, rula si gestiona aplicatii web.

Avantaj - nu trebuie construita si gestionata infrastructura complexa pentru dezvoltarea si lansarea acestor aplicatii web.

Alte categorii din cloud computing sunt SaaS (software as a service) si IaaS (infrastructure as a service).

Web 2.0

Client inteligent Se observa o migrare de la aplicatii server-side catre

aplicatii bazate pe clienti inteligenti si arhitectura de servicii (PaaS, SaaS, SOA, REST, Web API).

Clienti inteligenti web: Ruleaza in browser si se bazeaza pe standardul HTML5 si CSS3 Au la baza DOM si motorul JavaScript inclus in browsere Pot rula atat pe deskop cat si pe dispozitive mobile Framework-uri bazate pe JavaScript: jQuery, Bootstrap, AngularJS, Sencha

Clienti inteligenti nativi: Mai rapizi si cu interfata grafica mai spectaculoasa Suport offline mai bun Acces mai eficient la resursele hardware (camera, GPS, accelerometru) Difera in functie de sistemul de operare

HTML 5 Standard W3C avand reguli stricte pentru furnizorii de

browsere. Elemente noi ce reflecta dezvoltarea aplicatiilor web

moderne: Semantica: ,,, Controale: number, date, time, calendar, range Grafica: , Multimedia: ,

JavaScript API ce suporta capabilitatile aplicatiilor desktop si mobile.

HTML5

CSS Cascading Style Sheets defineste cum se afiseaza

elementele HTML. Adaugare de stiluri la o pagina HTML:

Inline - atributul style: style="color:blue; some text Intern -tag-ul style:

p{color:blue;}

Extern:

Stilurile unui element se aplica conform mostenirii HTML si a mecanismului de cascadare: Importanta (Importance), Specificitate (Specificity), Ordine

(Source order)

CSS

p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */

DOM Document Object Model API definit de W3C pentru a

reprezenta si interactiona cu documente HTML si XML. Reprezinta modelul documentului HTML/XML incarcat

intr-un browser. Intern, modelul este reprezentat intr-o structura

arborescenta, unde fiecare nod reprezinta o portiune din document.

Prin API furnizat se pot gasi/seta valori ale elementelor, gestiona evenimente, modifica stilurile asociate elementelor, valida si actualiza pagini, serializa/ deserializa ca un document XML.

DOM

My title My header My link

DOM

JavaScript ECMAScript este limbajul de scripting care sta la baza

JavaScript, documentat in specificatiile ECMA-262. JavaScript este limbaj de scripting, independent de

platforma, orientat obiect. Este proiectat pentru a fi inclus in alte aplicatii, cum ar fi

browserele web. Paginile web pot fi modificate dinamic pe client, in

browser, folosind limbajul JavaScript impreuna cu interfata DOM (Document Object Model) API.

Poate folosi cereri asincrone la server de tip AJAX API.

JavaScript Limbajul suporta:

Variabile

Operatori

Functii Instructiuni conditionale si bucle Obiecte

JavaScript

function ChangeColor() { document.body.bgColor="yellow" }

Click on this document!

Obiecte DOM DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Image DOM Input Button DOM Input Checkbox DOM Input File DOM Input Hidden DOM Input Password DOM Input Radio DOM Input Reset DOM Input Submit DOM Input Text DOM Link DOM Meta DOM Object DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea

JavaScript Modificarea unui element intr-o pagina:

Crearea unui obiect nou cu date Cautarea parintelui elementului care trebuie sa contina noile

date Adauga/insereaza/inlocuieste datele in elementul dorit

Stergerea unui element sau atribut: Cautarea parintelui elementului Folosirea removeChild sau removeAttribute pentru a sterge

datele

Se pot defini evenimente declansate de browser sau utilizator:

var helpIcon = document.getElementById("helpIcon"); document.images.helpIcon.onmouseover = function() { window.alert('Some help text'); };

AJAX AJAX = Asynchronous JavaScript and XML Nu este un limbaj ci un mod nou de a folosi standardele

existente. Este un mecanism de a schimba date intre client si

server, prin care se actualizeaza parti dintr-o pagina web fara a reincarca intreaga pagina.

Permite paginilor web sa fie actualizate asincron prin schimbul de seturi mici de date intre client si server in mod transparent fata de utilizator.

Tehnica de a crea pagini dinamice, cu timp de raspuns mic.

Aplicatiile AJAX sunt idependente de browser si platforma.

AJAX

Evenimente AJAX

Proprietatea readyState retine starea XMLHttpRequest

Evenimentul onreadystatechange este declansat de fiecare data cand se schimba readyState.

onreadystatechange stocheaza numele functiei ce este apelata automat de fiecare data cand proprietatea readyState se schimba.

Evenimente AJAX

readyState = 0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready

status = 200: "OK"

404: Page not found

Exemplu AJAX var ajaxRequest; function loadXMLDoc(url,cfunc) { ajaxRequest =new XMLHttpRequest();

ajaxRequest.onreadystatechange=cfunc; ajaxRequest.open("GET",url,true); ajaxRequest.send();

} function myFunction() {

loadXMLDoc("ajax_info.txt",function() { if (ajaxRequest.readyState==4 && ajaxRequest.status==200) { document.getElementById("myDiv").innerHTML=ajaxRequest.responseText;} }); } `

Exemplu AJAX Let AJAX change this text Change Content

jQuery jQuery biblioteca JavaScript de mici dimensiuni,

eficienta, cu multe functionalitati. Ofera API portabil, cross-browser, ce permite

parcurgerea si manipularea paginilor web, gestionarea evenimentelor, si apelurile AJAX: Core Filtering Create, Modify, Delete Presentation Events Animation and Effects AJAX

jQuery jQuery foloseste acceasi sintaxa ca si in CSS:

$(selector).action()

Sintaxa: $ defineste accesul jQuery Selector - cautarea elementelor HTML Action actiunea executata pe elementele HTML

$(document).ready(function () { $("h2").each(function () { this.style.color = red"; }); });

jQuery jQuery poate fi folosit:

Prin download de jquery.com:

Prin includerea de pe Content Delivery Network:

jQuery Example

jQuery Example

JSON JSON (JavaScript Object Notation) format simplu

pentru schimbul de date pe Internet. Desi este bazat pe standardul JavaScript ECMA-262,

este un format independent de limbaj. Furnizeaza doua tipuri de structuri de date:

l O colectie de perechi nume-valoare (in diverse limbaje realizata sub forma de obiect, structura, dictionar, tabela hash, vector asociativ).

l O lista ordonata de valori (realizata in limbaje in array, vector, lista sau secventa)

JSON

JSON

Web Services

Apel REST in jQuery

jQuery.ajax({ type: "GET|POST|DELETE|PUT", url: url, data: data, dataType:"text|html|json|jsonp|script|xml" success: success_callback, error: error_callback });

Apel REST in jQuery

function updateContact (contact) { jQuery.ajax({ type: "PUT", url: "http://localhost:49193/Contacts.svc/Update", contentType: "application/json; charset=utf-8", data: contact.toJsonString(), dataType: "json", success: function (data, status, jqXHR) { // do something }, error: function (jqXHR, status) { // error handler } }); }

Single Page Application (SPA) A web application or web site that fits on a single web

page with the goal of providing a more fluid user experience akin to a desktop application.

Wikipedia Chunking - pagina este impartita in diverse zone care

sunt actualizate asincron, de obicei prin apeluri AJAX cu date in format JSON.

Controllere se aplica pattern-uri (MVC, MVVM) care separa view-ul de model.

Rutarea (routing) - selectia view-urilor si a navigarii fara a reincarca toata pagina, prin tehnici ce stocheaza starea paginii, elemente si date.

Stocarea locala offline oferita de standardul HTML5

SPA

Responsive Web Design - RWD

Responsive Web Design

Ofera experienta optima la navigarea aplicatiilor web indiferent de dispozitiv: desktop, laptop, tableta, telefon.

Fluid grid: dimensionarea elementelor din pagina web in unitati relative (%) si nu absolute (pixeli, points).

Media query: permite folosirea diferitelor stiluri CSS in functie de caracteristicile dispozitivului pe care se afiseaza pagina.

Imagini flexibile: sunt redimensionate in unitati relative astfel incat sa nu depaseasca dimensiunile elementului in care este afisat.

Front-end Frameworks

Bootstrap

Foundation AngularJS

Skeleton ExtJS

Gumby Knockout

GroundworkCSS PureMVC

Semantic Backbone.js

Zimit ActiveJS

HTML KickStart JavaScriptMVC

Bootstrap Definitie Istoric Avantaje si dezavantaje Concepte de baza Responsive Grid Layout CSS, Componente, JavaScript

Bootstrap

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

http://getbootstrap.com/

Bootstrap Open-source front-end framework Versiunea curenta este 3.3.2 Folosit pentru a crea aplicatii web responsive Avantaje:

Se creaza aplicatii web (frontend part) foarte rapid Este un framework nativ responsive Se poate personaliza complet si rapid Suport pentru diverse browsere si dispozitive Include plugin-uri jQuery

Dezavantaje: Nu asigura compatibilitate backward Nu se pot implementa interfetele utilizator non-

standard (artistice)

Bootstrap Consta in fisiere CSS, JS si icon font (glyphicons) CSS este compilat din surse LESS JavaScript necesita jQuery

Mobile-First Strategy Continut

Se determina ce este mai important de afisat

Layout Se proiecteaza pentru dispozitivele cele mai mici

(telefoane) Se creaza stilurile CSS pentru acestea Se folosesc css3 media query pentru

dispozitivele mai mari

Actualizare progresiva Se adauga elemente noi pentru ecrane mai mari

Bootstrap Break Points /* Extra small devices (phones, less than 768px) */ /* No media query need, this is the default Bootstrap */ CSS class: .col-xs-* /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { ... } CSS class: .col-sm-* /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { ... } CSS class: .col-md-* /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { ... } CSS class: .col-lg-*

Responsive Grid Layout-ul este dat de un tabel (grid) ce poate scala

maxim 12 coloane, in functie de dimensiunea ecranului.

Se foloseste sistemul de linii si coloane pentru a afisa continutul.

Clasele CSS specifice grid-ului se aplica dispozitivelor cu latimea ecranului >= cu marimea de breakpoint, si suprascrie clasele specifice dispozitivelor mai mici.

Exemplu: clasele -sm- se vor aplica dispozitivelor de tip tableta si mai mari (daca nu sunt specificate clase de tip -md- si -lg-).

Layout

Extra small devicesPhones (

Layout

Layout

Elemente Bootstrap CSS Components JavaScript

Typography Glyph icons Modal

Code Breadcrumbs ScrollSpy

Table Pagination Tooltip

Forms Button Dropdowns Popover

Buttons Input Groups Collapse

Images Badges Carousel

Helper Classes Navigation Bar Affix

Responsive Utilities Jumbotron

Progress Bar

Alert

Panel

Navigarea

http://expo.getbootstrap.com/

Concluzii

l Aplicatie web standard vs Web 2.0 l Standardul Html 5 si CSS3 l DOM API, JavaScript, Ajax si jQuery l JSON si apelul REST din jQuery l Responsive Web Design (RWD) si Single

Page Application (SPA) l Frameworkul Bootstrap