web04DezvoltareaAplicatiilorWeb-InginerieWeb

8/20/2019 web04DezvoltareaAplicatiilorWeb-InginerieWeb

1/160

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s a

c o /

Tehnologii Web

programare Web

inginerie Web

dezvoltarea aplicaț iilor Webdesign patterns, servere de aplicaț ii, arhitecturi


2/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

„Viitorul este suma pașilor pe care-i faceț i,inclusiv a celor mici, ignoraț i sau luaț i în râs.”

Henri Coandă


3/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Aplicaț ii Web

sisteme software complexe,

în evoluț ie permanent ă


4/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Realitate

mijloace multiple de interacț iune Web cu utilizatorul

mobil laptop PC tablet ă (smart ) TV ecran urban


5/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Realitate

creșterea masei de utilizatori,având așteptări tot mai mari din partea software-ului

de la conținut (hiper)textualla aplicații Web sociale + interacțiune naturală


6/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Realitate

suportul privind dezvoltarea de aplicații(limbaje, API-uri, SDK-uri, biblioteci, framework -uri,...)

oferit de platforma hardware/softwarela nivel de server(e) și/sau de client(i)


7/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Realitate

neadaptare la cerinț ele economice (de tip business)

development vs. marketing vs. management


8/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Realitate

privind proiectele Web de anvergură

întârzieri în lansareneîncadrare în buget

lipsa funcț ionalit ăț iicalitatea precară a aplicaț iei


9/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

adaptare după Crumlish & Malone, 2009

scopuripsihologie

comportament

interacțiune

controalelimbi naturale

funcționalitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori


10/160

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a c o /

Asigurarea calit ăț ii aplicaț iilor Web

corectitudine și robusteț e (reliability )extindere + reutilizare (modularitate)

compatibilitateeficiență (asigurarea performanț ei)

portabilitate


11/160

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s a c o /


facilitarea interacț iunii cu utilizatorul (usability )funcț ionalitate

relevanț a momentului lansării (timeliness)mentenabilitate

securitate


12/160

D r . S a b i n

B u r a g a



alte aspecte de interes:integritate

reparabilitateverificabilitate – inclusiv monitorizare (logging)

economie


13/160

D r . S a b i n

B u r a g a


Necesit ăț i

scopuri + cerinț e clar specificatedezvoltarea sistematică, în faze, a aplicaț iilor Web

planificarea judicioasă a etapelor de dezvoltare

controlul permanent al întregului proces de dezvoltare


14/160

D r . S a b i n

B u r a g a


Necesit ăț i

scopuri + cerinț e clar specificatedezvoltarea sistematică, în faze, a aplicaț iilor Web

planificarea judicioasă a etapelor de dezvoltare

controlul permanent al întregului proces de dezvoltare

inginerie Web


15/160

D r . S a b i n

B u r a g a


În ce mod dezvolt ăm o aplicaț ie Web?


16/160

D r . S a b i n

B u r a g a


modelare

Uzual, se recurge la o metodologie

se preferă abordările conduse de modele(MDA – model-driven architecture)

www.omg.org/mda/


17/160

D r . S a b i n

B u r a g a


avansat

Robert Baxley


18/160

D r . S a b i n

B u r a g a


Methodologies

Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011

aplicație Web

(produs software)

funcționalitate

+informații oferite


19/160

D r . S a b i n

B u r a g a


dezvoltarea aplicațiilor Web

Cerinț e (requirements)

Analiză & proiectare (software design)Implementare (build )

Testare (testing)

Exploatare (deployment )Mentenanță (maintenance)Evoluț ie (evolution)


20/160

D r . S a b i n

B u r a g a



programare (server + client)creare/adaptare

de conț inut

mentenanță

testaredocumen-

tare

arhitectura info+ navigarecerinț e

public beta lansare

http://sixrevisions.com/web-development/agile/

actualmente, sunt preferate metodologii agilehttp://www.infoq.com/process-practices/

t


21/160

D r . S a b i n

B u r a g a



Metodologii moderne – exemple:

The Twelve-Factor App – vizând aplicațiile aliniateparadigmei SaaS (Software As A Service)

http://12factor.net/

aim42 – practici și șabloane privind evoluția, mentenanța,migrarea și îmbunătățirea sistemelor software

http://aim42.github.io/

avansat

t


22/160

D r . S a b i n

B u r a g a


start with needs

do less

design with data

do the hard work to make it simpleiterate. then iterate again

build for inclusion

understand context

build digital services, not Websitesbe consistent, not uniform

make things open; it makes things better

dezvoltarea aplicațiilor Web: principii

exemplu pentru gov.uk – Paul Downey & David Heath (2013)

avansat


23/160

D r . S a b i n

B u r a g a


Stabilirea standardelor de calitate

cerințe

context

con-

tent users


24/160

D r . S a b i n

B u r a g a


Obținere / licitare / negocierea conț inutului (datelor) și/sau codului-sursă

drepturi de autor – copyright versus

cod deschis (Open Source Licenses)

www.opensource.org/licenses/category+

date deschiseCreative Commons – www.creativecommons.org/licenses/

cerințe


25/160

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s

a c o /

Documentare

cu atragerea experților în domeniul problemei

ce trebuie soluționată de aplicația Web

cerințe


26/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

cerințe

Aspecte specifice aplicaț iilor Web

Lipsa unei structuri reale (tangibile)Multi-disciplinaritate

Necunoașterea publicului-țintă realVolatilitatea cerințelor și constrângerilor

Mediul de operare impredictibilImpactul sistemelor tradiționale (legacy )Aspecte calitative diferiteInexperiența vizitatorilor

Termenul de lansare


27/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

cerințe: exemple

Viziune (big idea)

Basecamp: “ project management is communication”

Flickr: “online photo management & sharing application”

Ta-da List : “competing with a post-it note”

Wikidata: “a free linked database that can be read

and edited by both humans and machines”


28/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

cerințe: exemple

Punctele de plecare în dezvoltarea Flickr

presupuneri iniț iale (assumptions):

oamenilor le place să-și împărt ășească amintirile

folosirea succesului blogging-ului

partajarea nu doar a însemnărilor,ci și a fotografiilor (personale)

suport pentru realizarea de comentarii + tagging


29/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

noi tipuri de cerințe

Privitoare la conț inut

audienț a – e.g., internaț ionalizarecontext de navigarepreferinț e

disponibilitate permanent ă (7 zile, 24 de ore/zi)

recurgerea la surse eterogene de datecăutare, filtrare, recomandare

etc.


30/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /


Interacț iunea cu utilizatorul în contextul Web

inclusiv vizând Web-ul social

content mash-up

“it’s yours to take, re-arrange and re-use”


31/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /


Calitative

funcț ionalitatefiabilitateutilizabilitate

eficiență (performanță)

mentenabilitateindependenț a de platformă


32/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /


Privitoare la mediul de execuț ie

(in)dependenț a de navigatorul Web

wired vs. wireless

on-line vs. off-line

suport pentru diverse standarde HTML5interactivitate multi-dispozitiv (responsive Web design)


33/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /


Referitoare la evoluț ie

utilizatorul final exploatează aplicaț ia Webf ără a trebui s-o (re)instaleze pe calculator


34/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

noi tipuri de cerințe: aspecte de interes

iniț ial:

oferirea funcț ionalit ăț ilor esenț iale (less is more)


35/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

noi tipuri de cerințe: aspecte de interes

iniț ial:

oferirea funcț ionalit ăț ilor esenț iale (less is more)

versiuni ulterioare:

extinderea aplicaț iei Web– pe baza unei interfețe de programare (API) publice –ce încurajează dezvoltarea de soluț ii date de utilizatori


36/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

arhitecturi

Calitatea aplicaț iilor Web este influenț at ă

de arhitectura pe care se bazează


37/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

arhitecturi

Dezvoltarea unei arhitecturi software ia în calcul:

cerinț e funcț ionale

impuse de clienț i,vizitatori,

concurență,factori decizionali (management),evoluț ie socială/tehnologică,

…


38/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

arhitecturi


factori calitativi

utilizabilitateperformanță

securitaterefolosire a datelor/coduluietc.


39/160

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

arhitecturi


aspecte tehn(olog)ice

platforma hardware/software (sistem de operare)infrastructura middleware

servicii disponibile – e.g., via API-uri publicelimbaj(e) de programaresisteme tradiț ionale (legacy )

…


40/160

D r . S a b i n

B u r a g a


a c o /

arhitecturi


experienț a

recurgerea la arhitecturi și platforme existenteșabloane de proiectare (design patterns)

folosirea unor soluț ii „la cheie”: biblioteci, framework -urimanagement de proiecteetc.


41/160

D r . S a b i n

B u r a g a


a c o /

arhitecturi web: componente tipice

client(i)

firewall

proxy

middlewareserver(e) Web

server(e) de aplicaț ii

framework -uri, biblioteci, alte componenteserver(e) de stocare persistent ă – e.g., baze de date

server(e) de conț inut multimediaserver(e) de management al conț inutului (CMS)

aplicaț ii/sisteme tradiț ionale


42/160

D r . S a b i n

B u r a g a


a c o /

arhitecturi web

Uzual, se adopt ă arhitecturi stratificate(N-tier Web applications)


43/160

D r . S a b i n

B u r a g a


a c o /

Exist ă anumite „reț ete”

privind dezvoltarea de aplicaț ii Web?


44/160

D r . S a b i n

B u r a g a


a c o /

proiectare

O problemă – oricare ar fi aceasta –

poate apărea frecvent


45/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Cei experimentați au găsit diverse soluții

pentru problema în cauză, reușind să recunoascăproblema și să aleagă soluția (optimă)

care poate fi aplicată într-un anumit context


46/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Pattern (șablon)

regulă ce exprimă o relațiedintre un context , o problemă și o soluție

inițial, cu utilizare în arhitecturăChristopher Alexander, 1979


47/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Pattern (șablon)

regulă ce exprimă o relațiedintre un context , o problemă și o soluție

context

problemă soluț ie


48/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Tradiț ional, pattern-urile se utilizează în

proiectarea de software

pattern “mind sized” chunk of information

lucrarea de referință:

E. Gamma et al., Design Patterns, Addison-Wesley, 1995

avansat


49/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Pattern-uri de proiectare au fost folosite,

ulterior, în alte arii

interacț iune dintre om-calculatordesign și interacț iune Web, mobile computing

modelare conceptualăproiectarea bazelor de date, ontologii,…

avansat


50/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Un pattern poate descrie cunoștințele unui expert

(pe baza experienței sale personale)în domeniul unei probleme în ceea ce privește

recunoașterea problemei, a contextului și

a soluției la acea problemă


51/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Un pattern nu reprezintă o regulă fermă

uneori nu trebuie aplicat!anti-patterns


52/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Este necesară adoptarea unui vocabular comun

corespunzător domeniului problemei

pattern language


53/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Pattern-uri privitoare la:

proiectarearhitecturăanaliză

dezvoltarestructură

comportament …


54/160

D r . S a b i n

B u r a g a


a c o /

proiectare

Specificarea și/sau „recunoașterea” unui pattern

poate avea loc la diverse niveluri:prezentare a datelor (UI, user interaction, visualization,…)

procesare (business logic, scripting etc.)

integrare a componentelor (code library development )stocare a datelor (database queries, database design,…)


55/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s

a c o /

proiectare

Șablon de specificare a unui pattern:

numelerezumatulproblemacontextul

soluțiaexempleleutilizările


56/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s

a c o /

proiectare

Exemple de colecț ii de șabloane

( patterns repositories)privind proiectarea de software

http://c2.com/cgi/wiki?DesignPatterns

patterns of enterprise application architecture

http://martinfowler.com/eaaCatalog/

interacț iunea cu utilizatorulhttp://profs.info.uaic.ro/~evalica/patterns/


57/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s a c o /

proiectare

Șabloane de proiectare tradiț ionale

creaț ionaleBuilder , Prototype, Singleton

structurale Adapter , Bridge, Decorator , Façade, Flyweight , Proxy

comportamentaleCommand , Iterator , Mediator , Observer , State, Visitor


58/160

D r . S a b i n

B u r a g a

p r o f s


proiectare

Web Patterns

Model View ControllerPage ControllerFront Controller

Template ViewTransform View

Application Controller

M. Fowler, Patterns of Enterprise Application Architecture, Addison-Wesley (2003)

avansat


59/160

D r . S a b i n

B u r a g a

p r o f s


proiectare

Session State Patterns

Client Session StateServer Session State

Database Session State


avansat


60/160

D r . S a b i n

B u r a g a

p r o f s


proiectare

Data Source Architectural Patterns

Table Data GatewayRow Data Gateway

Active Record

Data Mapper



61/160

D r . S a b i

n

B u r a g a

p r o f s


aplicație Web = interfață + program + conținut (date)trei strate (3-tier application)

Client Server de aplicaț ii Stocare(interface) (application) ( persistence)

Internet

(Web)

Fruit / Presentation


62/160

D r . S a b i

n

B u r a g a

p r o f s


Sponge / Database

Jelly / Business Logic

Custard / Page Logic

Cream / Markup

C. Henderson, “Scalable Web Architectures”,

Web 2.0 Expo, 2007: iamcal.com/talks/

Fruit / Presentation


63/160

D r . S a b i

n

B u r a g a

p r o f s


Sponge / Database

Jelly / Business Logic

Custard / Page Logic

Cream / Markup

C. Henderson, “Scalable Web Architectures”,

Web 2.0 Expo, 2007: iamcal.com/talks/


64/160

D r . S a b i

n

B u r a g a

p r o f s


arhitecturi web

Modelul de structurare a datelor este separat

de maniera de procesare (controlul aplicaț iei) șide modul de prezentare a acestora (interfaț a Web)


65/160

D r . S a b i

n

B u r a g a

p r o f s


arhitecturi web

Modelul de structurare a datelor este separat

de maniera de procesare (controlul aplicaț iei) șide modul de prezentare a acestora (interfaț a Web)

principiu: separation of concerns


66/160

D r . S a b i

n

B u r a g a

p r o f s


arhitecturi web: mvc

Majoritatea aplicaț iilor Web sunt dezvoltate

conform MVC (Model-View-Controller )


67/160

D r . S a b i

n

B u r a g a

p r o f s



Șablon arhitectural

descris în premieră în 1979 în contextul interacț iuniidintre om și calculator – Smalltalk (Xerox PARC)


68/160

D r . S a b i

n

B u r a g a

p r o f s



View (prezentare + interacț iune)

Model (structura datelor)

Controller (procesare)


69/160

D r . S a b i

n

B u r a g a

p r o f s



View la nivel de client(i) – e.g., Web

Model stocare persistent ă

Controller aplicaț ie (server și/sau client)


70/160

D r . S a b i n

B u r a g a

p r o f s



View la nivel de client(i) – e.g., Web

Model stocare persistent ă

Controller aplicaț ie (server și/sau client)

HTML, CSS, SVG,

MathML, WebGL etc.

(No)SQL, JSON,

XML (XQuery), RDF (SPARQL),…

servere de aplicaț ii, framework -uri


71/160

D r . S a b i n

B u r a g a

p r o f s



Poate fi implementat și într-un limbaj neorientat-obiect

încurajat/impus de framework -uri Web specifice

exemplificări diverse:ASP.NET MVC (C# et al.), Catalyst (Perl), ColdBox (ColdFusion),

Django (Python), FuelPHP, Grails (Groovy), Laravel (PHP),Lift (Scala), Rails (Ruby), Sails (Node.js), TurboGears (Python),

Yesod (Haskell), Wicket (Java), Wt (C++), Zikula (PHP), ZK (Java)


72/160


73/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


Model

resursele gestionate de software – utilizatori, mesaje,produse etc. – au modele specifice

desemnează datele și regulile (i.e. restricț iile)referitoare la dateconcepte vizând aplicaț ia Web

oferă controller -ului o reprezentare a datelor solicitate

și e responsabil cu validarea datelor menite a fi stocate


74/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


View

furnizează diverse maniere de prezentare a datelorfurnizate de model via controller

pot exista view -uri multiple,alegerea lor fiind realizat ă de controller


75/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


etape tipice:(1) cerere trimisă de client – e.g., navigator Web,(2) dirijare (routing) a cererii către controller ,

(3) recurgerea la un model , (4) furnizare reprezentare,

(5) selectare a unui view , (6) prezentare conț inut la client


76/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


Arhitectura generică a unei aplicaț ii Web

va consta dintr-un set de resurse referitoare lacontroller , model și view

uzual, framework -ul Web folosit impune o anumit ăstructură a fișierelor aplicaț iei ce va fi implementat ă

├───app│ ├─── assets│ │ ├───images

avansat


77/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

│ │ ├───images│ │ ├─── javascripts│ │ └─── stylesheets│ ├─── controllers│ ├───helpers│ ├───mailers│ ├─── models│ └─── views│ └───layouts├─── config├───db

├───doc├───lib├───log├─── public├───script├─── test│ ├───fixtures│ ├───functional│ ├───integration│ ├───performance│ └───unit├─── tmp├───vendor

└─── plugins

„scheletul” unei aplicaț ii Webcreate în Ruby on Rails

http://rubyonrails.org/

├───app│ ├─── Config│ ├───Console structura de directoare

avansat


78/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

│ ├───Console│ ├─── Controller│ ├───Lib│ ├───Locale│ ├─── Model│ │ ├───Behavior│ │ └─── Datasource│ ├─── Plugin│ ├─── Test│ ├─── tmp│ ├───Vendor

│ ├─── View│ │ ├───Elements│ │ ├───Errors│ │ ├───Helper│ │ ├───Layouts│ │ ├───Pages│ │ └───Scaffolds│ └─── webroot│ ├─── css│ ├───files│ ├─── img│ └─── js├───lib

├─── plugins└───vendors

structura de directoareîn cazul unei aplicaț ii Web

folosind framework -ul

CakePHPhttp://cakephp.org/

framework -uri PHP similarewww.phpwact.org/php/mvc_frameworks

├───app│ ├───assets│ │ ├───javascripts

avansat


79/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

│ │ ├ javascripts│ │ └─── stylesheets│ │ ├───apps│ │ ├─── libs│ │ └───main│ ├─── controllers│ ├─── models│ └─── views├─── conf├───project└─── public

├───images│ └───icons└─── javascripts

structura de directoare în cazul unei aplicaț ii Webce recurge la framework -ul Play pentru Java și Scala

http://www.playframework.org/

avansat


80/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

structura de directoare în cazulunei aplicaț ii ASP.NET MVC

http://www.asp.net/mvc

avansat


81/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


Variante derivate:

MVVM (Model View ViewModel )MVP (Model View Presenter )

Passive View

Supervising Controller PAC (Presentation Abstraction Control )

avansat


82/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week10

flux de activități într-o aplicație MV* la nivel de client

utilizare pragmaticăvia biblioteci ori framework -uri JavaScript

Angular – https://angularjs.org/Backbone – http://backbonejs.org/Ember – http://emberjs.com/

Mithril – http://lhorie.github.io/mithril/

(în loc de) pauză


83/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


84/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Prin ce mijloace poate fi implementată

o aplicație Web?


85/160

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Server de aplicații Web

scop:eficientizarea proceselor de dezvoltare

a aplicaț iilor Web de anvergură

l


86/160

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


poate fi integrat în unul/mai multe servere Web

de asemenea, poate oferi propriul server Websau mediu de execuție

i l


87/160

D r . S a b i n

B u r a g a


s a c o /

implementare


poate încuraja sau impune o viziune arhitecturalăprivind dezvoltarea de aplicaț ii Web

situație tipică:MVC ori variații

i l


88/160

D r . S a b i n

B u r a g a


s a c o /

implementare


simplifică maniera de invocarede programe (script -uri) ale unei aplicații Web

generarea de conț inut dinamic pe partea de server

hit t li țiil W b


89/160

D r . S a b

i n

B u r a g a


s a c o /

arhitectura aplicațiilor Web:

abordarea MV* tradițională

www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/

brow-

ser prezen-

tareproce-

sare

abstrac-tizare

date

pagini

HTML, CSS,…

server „gras”( fat )

client „prostuț”(dumb)

frontend backend

hit t li țiil W b

avansat


90/160

D r . S a b

i n

B u r a g a


s a c o /

arhitectura aplicațiilor Web:

abordarea MV* tradițională

www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/

brow-

ser prezen-

tareproce-

sare

abstrac-tizare

date

pagini

HTML, CSS,…

server „gras”( fat )

client „prostuț”(dumb)

frontend backend

frecvent, aplicație monolitică

(e.g., un WAR: 2.2 M linii de cod, 418 .jar -uri,startare în 12 min. – conform plainoldobjects.com)

i l t


91/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


limbaj(e) de programareAPI-ul de bază

stocare persistent ă a modelelor de date (relaț ionale, XML)

interacț iune Webcookie-uri și sesiunimedii de dezvoltare + cadre de lucru

caracteristici particulare

i l t


92/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


limbaj(e) de programare

C# și alte limbaje .NET Framework – ASP.NETGo – Beego, Gorilla, Martini,…

Java – AppFuse, Play, Wicket etc.JavaScript – Node.js + framework -uri: Express, Locomotive etc.

PHP – PHP + framework -uri: CakePHP, Laravel, Symfony,…Python – Django, Flask, Grok, Pyramid, Zope

Ruby – Ruby on Rails, Sinatra

i l t


93/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


limbaj(e) de programare

pot fi dinamice – e.g., Python, Ruby

interpretate sau compilateuzual, se preferă generarea de cod intermediar:

IL (Intermediate Language) – C#, Java, Scala

i l t


94/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


API de bază

contribuie la „puterea” limbajului + serverului de aplicaț ii

(via funcț ii/clase predefinite)

securitate, consistență,acces la resursele mediului de operare/rulare,

asigurarea independenței de platformă

i l t


95/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


suport pentru stocare persistent ăîn baze de date relaț ionale – via SQL

exemplu: funcț ii/module PHP predefinitepentru o pleiadă de sisteme de baze de date(Firebird, MySQL, PostgreSQL,…)

biblioteci incorporate (SQLite + mysqli) sau diverse extensii

i l t


96/160

D r . S a b

i n

B u r a g a


s a c o /

implementare



ORM (Object-Relational Mapping)ADO.NET pentru ASP.NET

JDBC ( Java DataBase Connectivity ) pentru Java (JSP)Sequelize – bibliotecă pentru Node.js

i l t


97/160

D r . S a b

i n

B u r a g a


s a c o /

implementare



eventual, framework -uri adiț ionaleimplementând șablonul Active Record

exemple: active_record (modul Node.js), Castle Project (.NET),Doctrine (PHP), Play Framework (Java, Scala), Rails (Ruby)

i le e t e


98/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


suport pentru stocare persistent ăpe baza modelelor arborescente: XML

date (semi)structuratetransformări în alte formate: XPath, XSLT

procesări: DOM, SAX, SimpleXML etc.validări de date: DTD, XML Schema, RELAX,…

interogări: XQuery cursurile

viitoare

implementareavansat


99/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


suport pentru stocare persistent ărecurgând la alte paradigme non-relaț ionale

(bazate pe grafuri și/sau cheie—valoare),

distribuite la nivel de Internet, scalabile – NoSQLhttp://nosql.mypopescu.com/

exemplificări:Cassandra, CouchDB, Hadoop, MarkLogic, MongoDB, Neo4j etc.

implementare


100/160

D r . S a b

i n

B u r a g a


s a c o /

implementare


suport pentru interacț iunea Webinteracț iunea e facilitat ă de controale specificate

în cadrul codului-sursă rulat la nivel de server

emulează câmpurile din formularele HTML și/sauoferă controale noi – e.g., calendar, slideshow ,…

generare de cod HTML (+JavaScript) în funcț ie de client


101/160

implementare


102/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


suport pentru interacț iunea Web

încurajarea folosirii de machete de vizualizare (templates)

pe baza unui procesor specific – Web template system


103/160

implementareavansat


104/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


suport pentru interacț iunea WebWeb template system

la nivel de server

Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…),Smarty (PHP), Velocity (Java), XSLT (XML) etc.

implementareavansat


105/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


suport pentru interacț iunea WebWeb template system

la nivel de client

disponibile pentru JavaScript:Dust.js, EJS, HandleBars, Mustache, Nunjucks,…

implementare


106/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


suport pentru interacț iunea Web

transfer asincron de date via suita de tehnologii Ajax

eventual, via framework -uri/module/clase adiț ionale

vezi cursurileviitoare

implementareavansat


107/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare


suport acordat inginerilor software

aplicaț ii N -tier

se încurajează folosirea șabloanelor de proiectare:Container , MVC (Model-View-Controller ),

Proxy , Configuration Parameters, Invocation Context ,…

implementareavansat


108/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Framework (cadru de lucru)

facilitează dezvoltarea de aplicaț ii Web complexe,simplificând unele operaț ii uzuale

(e.g., acces la baze de date, caching, generare de

cod, management de sesiuni, control al accesului)și/sau încurajând reutilizarea codului-sursă

implementareavansat


109/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Framework (cadru de lucru)

clasificare:

de uz general

management de conț inut (CMS – Content Management System)

la nivel de intranet – e.g. portal organizațional

implementareavansat


110/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Exemple de framework -uri care facilitează dezvoltarea deaplicaț ii Web la nivel de server

ASP.NET: ASP.NET MVC, Vici MVCJava: Play, Spring, Struts, Tapestry, WebObjects, Wicket

JavaScript (Node.js): Express, Geddy, Locomotive, TowerPerl: Catalyst , CGI::Application, Jifty, WebGUI

PHP: CakePHP, CodeIgniter, Symfony, Yii, Zend FrameworkPython: Django, Grok, web2py, Zope

Ruby: Camping Nitro Rails Sinatra

implementareavansat


111/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Bibliotecă Web (library )

colecție de resurse computaționale reutilizabile

– i.e., structuri de date + cod –oferind funcționalități (comportamente) specifice

implementate într-un limbaj de programare

implementareavansat


112/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Bibliotecă Web (library )

colecție de resurse computaționale reutilizabile

– i.e., structuri de date + cod –oferind funcționalități (comportamente) specifice

implementate într-un limbaj de programare

poate fi referită de alt cod-sursă (software):server de aplicații, framework , bibliotecă,

serviciu, API ori componentă Web

implementare


113/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Serviciu Web

software – utilizat la distanță de alte aplicații/servicii –oferind o funcționalitate specifică,

a cărui implementare nu trebuie cunoscută de dezvoltator

detalii încursurile viitoare

implementare


114/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

Serviciu Web

software – utilizat la distanță de alte aplicații/servicii –oferind o funcționalitate specifică,

a cărui implementare nu trebuie cunoscută de dezvoltator

recurge la tehnologii Web deschise(adresare via URI, acces prin HTTP,formate de date: CSV, JSON, XML,…)

implementareavansat


115/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

API ( Application Programming Interface)

“any well-defined interface that definesthe service that one component, module, or application

provides to other software elements”

(de Souza et al., 2004)

detalii încursurile viitoare

implementareavansat


116/160

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

implementare

SDK ( Software Development Kit )

încapsulează funcț ionalit ăț ile API-ului într-o bibliotecă(implementat ă într-un anumit limbaj de programare,

pentru o platformă software/hardware specifică)

Date post:	07-Aug-2018
Category:	Documents
Upload:	alexspiridon
View:	212 times
Download:	0 times

web04DezvoltareaAplicatiilorWeb-InginerieWeb

Documents