web04DezvoltareaAplicatiilorWeb InginerieWeb

programare Webinginerie Web
dezvoltarea aplicaiilor Web

design patterns, servere de aplicaii, arhitecturi
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/
Tehnologii Web
Henri Coand
Viitorul este suma pailor pe care-i facei,

inclusiv a celor mici, ignorai sau luai n rs.
sisteme software complexe,

n evoluie permanent
Aplicaii Web
mijloace multiple de interaciune Web cu utilizatorul
mobil laptop
PC
tablet (smart) TV ecran urban
Realitate
creterea masei de utilizatori,

avnd ateptri tot mai mari din partea software-ului
de la coninut (hiper)textual
la aplicaii Web sociale + interaciune natural
Realitate
suportul privind dezvoltarea de aplicaii

(limbaje, API-uri, SDK-uri, biblioteci, framework-uri,...)
oferit de platforma hardware/software
la nivel de server(e) i/sau de client(i)
Realitate
neadaptare la cerinele economice (de tip business)
development vs. marketing vs. management
Realitate
privind proiectele Web de anvergur

ntrzieri n lansare
nencadrare n buget
lipsa funcionalitii
calitatea precar a aplicaiei
Realitate
interaciune funcionaliti
controale
tehnologii
limbi naturale
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli

utilizatori
interfa
software
coninut creatori
adaptare dup Crumlish & Malone, 2009
scopuri
psihologie
comportament
corectitudine i robustee (reliability)

extindere + reutilizare (modularitate)
compatibilitate
eficien (asigurarea performanei)
portabilitate
Asigurarea calitii aplicaiilor Web
facilitarea interaciunii cu utilizatorul (usability)

funcionalitate
relevana momentului lansrii (timeliness)
mentenabilitate
securitate
alte aspecte de interes:

integritate
reparabilitate
verificabilitate inclusiv monitorizare (logging)
economie
scopuri + cerine clar specificate

dezvoltarea sistematic, n faze, a aplicaiilor Web
planificarea judicioas a etapelor de dezvoltare
controlul permanent al ntregului proces de dezvoltare
Necesiti
scopuri + cerine clar specificate

dezvoltarea sistematic, n faze, a aplicaiilor Web
planificarea judicioas a etapelor de dezvoltare
controlul permanent al ntregului proces de dezvoltare
inginerie Web
Necesiti
n ce mod dezvoltm o aplicaie Web?
Uzual, se recurge la o metodologie

se prefer abordrile conduse de modele
(MDA model-driven architecture)
www.omg.org/mda/
modelare
avansat
Robert Baxley
funcionalitate
+
informaii oferite
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
aplicaie Web
Methodologies
(produs software)
Cerine (requirements)
Analiz & proiectare (software design)
Implementare (build)
Testare (testing)
Exploatare (deployment)
Mentenan (maintenance)
Evoluie (evolution)
programare (server + client)

documentare
cerine
creare/adaptare
de coninut
testare
arhitectura info
+ navigare
mentenan
public beta lansare
actualmente, sunt preferate metodologii agile

http://www.infoq.com/process-practices/
http://sixrevisions.com/web-development/agile/
avansat
Metodologii moderne exemple:

The Twelve-Factor App viznd aplicaiile aliniate
paradigmei SaaS (Software As A Service)
http://12factor.net/
aim42 practici i abloane privind evoluia, mentenana,

migrarea i mbuntirea sistemelor software
http://aim42.github.io/
avansat
start with needs

do less
design with data
do the hard work to make it simple
iterate. then iterate again
build for inclusion
understand context
build digital services, not Websites
be consistent, not uniform
make things open; it makes things better
exemplu pentru gov.uk Paul Downey & David Heath (2013)
dezvoltarea aplicaiilor Web: principii
Stabilirea standardelor de calitate

content
users
context
cerine
Obinere / licitare / negociere

a coninutului (datelor) i/sau codului-surs
drepturi de autor copyright
versus
cod deschis (Open Source Licenses)
www.opensource.org/licenses/category
+
date deschise
Creative Commons www.creativecommons.org/licenses/
cerine
Documentare
cu atragerea experilor n domeniul problemei

ce trebuie soluionat de aplicaia Web
cerine
Aspecte specifice aplicaiilor Web

Lipsa unei structuri reale (tangibile)
Multi-disciplinaritate
Necunoaterea publicului-int real
Volatilitatea cerinelor i constrngerilor
Mediul de operare impredictibil
Impactul sistemelor tradiionale (legacy)
Aspecte calitative diferite
Inexperiena vizitatorilor
Termenul de lansare
cerine
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
cerine: exemple
Punctele de plecare n dezvoltarea Flickr

presupuneri iniiale (assumptions):
oamenilor le place s-i mprteasc amintirile
folosirea succesului blogging-ului
partajarea nu doar a nsemnrilor,

ci i a fotografiilor (personale)
suport pentru realizarea de comentarii + tagging
cerine: exemple
Privitoare la coninut
audiena e.g., internaionalizare
context de navigare
preferine
disponibilitate permanent (7 zile, 24 de ore/zi)
recurgerea la surse eterogene de date
cutare, filtrare, recomandare
etc.
noi tipuri de cerine
Interaciunea cu utilizatorul n contextul Web

inclusiv viznd Web-ul social
content mash-up
its yours to take, re-arrange and re-use
Calitative
funcionalitate
fiabilitate
utilizabilitate
eficien (performan)
mentenabilitate
independena de platform
Privitoare la mediul de execuie

(in)dependena de navigatorul Web
wired vs. wireless
on-line vs. off-line
suport pentru diverse standarde HTML5
interactivitate multi-dispozitiv (responsive Web design)
Referitoare la evoluie
utilizatorul final exploateaz aplicaia Web
fr a trebui s-o (re)instaleze pe calculator
iniial:
oferirea funcionalitilor eseniale (less is more)
noi tipuri de cerine: aspecte de interes
iniial:
oferirea funcionalitilor eseniale (less is more)
versiuni ulterioare:
extinderea aplicaiei Web
pe baza unei interfee de programare (API) publice
ce ncurajeaz dezvoltarea de soluii date de utilizatori
noi tipuri de cerine: aspecte de interes
Calitatea aplicaiilor Web este influenat

de arhitectura pe care se bazeaz
arhitecturi
Dezvoltarea unei arhitecturi software ia n calcul:
cerine funcionale
impuse de clieni,
vizitatori,
concuren,
factori decizionali (management),
evoluie social/tehnologic,
arhitecturi
factori calitativi
utilizabilitate
performan
securitate
refolosire a datelor/codului
etc.
arhitecturi
aspecte tehn(olog)ice
platforma hardware/software (sistem de operare)
infrastructura middleware
servicii disponibile e.g., via API-uri publice
limbaj(e) de programare
sisteme tradiionale (legacy)
arhitecturi
experiena
recurgerea la arhitecturi i platforme existente
abloane de proiectare (design patterns)
folosirea unor soluii la cheie: biblioteci, framework-uri
management de proiecte
etc.
arhitecturi
client(i)
firewall
proxy
middleware
server(e) Web
server(e) de aplicaii
framework-uri, biblioteci, alte componente
server(e) de stocare persistent e.g., baze de date
server(e) de coninut multimedia
server(e) de management al coninutului (CMS)
aplicaii/sisteme tradiionale
arhitecturi web: componente tipice
Uzual, se adopt arhitecturi stratificate

(N-tier Web applications)
arhitecturi web
Exist anumite reete

privind dezvoltarea de aplicaii Web?
O problem oricare ar fi aceasta

poate aprea frecvent
proiectare
Cei experimentai au gsit diverse soluii

pentru problema n cauz, reuind s recunoasc
problema i s aleag soluia (optim)
care poate fi aplicat ntr-un anumit context
proiectare
Pattern (ablon)
regul ce exprim o relaie
dintre un context, o problem i o soluie
iniial, cu utilizare n arhitectur
Christopher Alexander, 1979
proiectare
Pattern (ablon)
regul ce exprim o relaie
dintre un context, o problem i o soluie
context
problem
soluie
proiectare
Tradiional, 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
proiectare
avansat
Pattern-uri de proiectare au fost folosite,

ulterior, n alte arii
interaciune dintre om-calculator
design i interaciune Web, mobile computing
modelare conceptual
proiectarea bazelor de date, ontologii,
proiectare
Un pattern poate descrie cunotinele unui expert

(pe baza experienei sale personale)
n domeniul unei probleme n ceea ce privete
recunoaterea problemei, a contextului i
a soluiei la acea problem
proiectare
Un pattern nu reprezint o regul ferm
uneori nu trebuie aplicat!anti-patterns
proiectare
Este necesar adoptarea unui vocabular comun

corespunztor domeniului problemei
pattern language
proiectare
Pattern-uri privitoare la:

proiectare
arhitectur
analiz
dezvoltare
structur
comportament
proiectare
Specificarea i/sau recunoaterea unui pattern

poate avea loc la diverse niveluri:
proiectare
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,)
ablon de specificare a unui pattern:

numele
rezumatul
problema
contextul
soluia
exemplele
utilizrile
proiectare
Exemple de colecii de abloane

(patterns repositories)
privind proiectarea de software
http://c2.com/cgi/wiki?DesignPatterns
patterns of enterprise application architecture
http://martinfowler.com/eaaCatalog/
interaciunea cu utilizatorul
http://profs.info.uaic.ro/~evalica/patterns/
proiectare
abloane de proiectare tradiionale

creaionale
Builder, Prototype, Singleton
structurale
Adapter, Bridge, Decorator, Faade, Flyweight, Proxy
comportamentale
Command, Iterator, Mediator, Observer, State, Visitor
proiectare
Web Patterns
Model View Controller
Page Controller
Front Controller
Template View
Transform View
Application Controller
M. Fowler, Patterns of Enterprise Application Architecture, Addison-Wesley (2003)
proiectare
avansat
Session State Patterns

Client Session State
Server Session State
Database Session State
proiectare
avansat
Data Source Architectural Patterns

Table Data Gateway
Row Data Gateway
Active Record
Data Mapper
proiectare
Internet
(Web)
Client
(interface)
Server de aplicaii
Stocare
(application) (persistence)
aplicaie Web = interfa + program + coninut (date)

trei strate (3-tier application)
Cream / Markup
Custard / Page Logic
Jelly / Business Logic
Sponge / Database
C. Henderson, Scalable Web Architectures,

Web 2.0 Expo, 2007: iamcal.com/talks/
Fruit / Presentation
Cream / Markup
Custard / Page Logic
Jelly / Business Logic
Sponge / Database
C. Henderson, Scalable Web Architectures,

Web 2.0 Expo, 2007: iamcal.com/talks/
Fruit / Presentation
arhitecturi web
Modelul de structurare a datelor este separat
de maniera de procesare (controlul aplicaiei) i
de modul de prezentare a acestora (interfaa Web)
arhitecturi web
Modelul de structurare a datelor este separat
de maniera de procesare (controlul aplicaiei) i
de modul de prezentare a acestora (interfaa Web)
principiu: separation of concerns
Majoritatea aplicaiilor Web sunt dezvoltate

conform MVC (Model-View-Controller)
arhitecturi web: mvc
ablon arhitectural
descris n premier n 1979 n contextul interaciunii
dintre om i calculator Smalltalk (Xerox PARC)
View
Model
(prezentare + interaciune)
(structura datelor)
Controller
(procesare)
View
Model
la nivel de client(i) e.g., Web
stocare persistent
Controller
aplicaie (server i/sau client)
HTML, CSS, SVG,

MathML, WebGL etc.
(No)SQL, JSON,
XML (XQuery), RDF (SPARQL),
View
Model
la nivel de client(i) e.g., Web
stocare persistent
servere de aplicaii, framework-uri
Controller
aplicaie (server i/sau client)
Poate fi implementat i ntr-un limbaj neorientat-obiect

ncurajat/impus de framework-uri Web specifice
exemplificri 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)
Controller
responsabil cu preluarea cererilor de la client

(cereri GET/POST emise pe baza aciunilor utilizatorului)
gestioneaz resursele necesare satisfacerii cererilor
uzual, va apela un model conform aciunii solicitate

i va selecta un view corespunztor
Model
resursele gestionate de software utilizatori, mesaje,
produse etc. au modele specifice
desemneaz datele i regulile (i.e. restriciile)
referitoare la dateconcepte viznd aplicaia Web
ofer controller-ului o reprezentare a datelor solicitate
i e responsabil cu validarea datelor menite a fi stocate
View
furnizeaz diverse maniere de prezentare a datelor
furnizate de model via controller
pot exista view-uri multiple,
alegerea lor fiind realizat de controller
etape tipice:
(1) cerere trimis de client e.g., navigator Web,
(2) dirijare (routing) a cererii ctre controller,
(3) recurgerea la un model, (4) furnizare reprezentare,
(5) selectare a unui view, (6) prezentare coninut la client
Arhitectura generic a unei aplicaii Web

va consta dintr-un set de resurse referitoare la
controller, model i view
uzual, framework-ul Web folosit impune o anumit

structur a fiierelor aplicaiei ce va fi implementat
avansat
app
assets
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 aplicaii Web

create n Ruby on Rails
http://rubyonrails.org/
avansat
structura de directoare
n cazul unei aplicaii Web
folosind framework-ul
CakePHP
http://cakephp.org/
app
Config
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
framework-uri PHP similare

www.phpwact.org/php/mvc_frameworks
avansat
structura de directoare n cazul unei aplicaii Web

ce recurge la framework-ul Play pentru Java i Scala
http://www.playframework.org/
app
assets
javascripts
stylesheets
apps
libs
main
controllers
models
views
conf
project
public
images
icons
javascripts
structura de directoare n cazul

unei aplicaii ASP.NET MVC
http://www.asp.net/mvc
avansat
avansat
Variante derivate:
MVVM (Model View ViewModel)
MVP (Model View Presenter)
Passive View
Supervising Controller
PAC (Presentation Abstraction Control)
flux de activiti ntr-o aplicaie 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/
http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week10
avansat
(n loc de) pauz
Prin ce mijloace poate fi implementat

o aplicaie Web?
Server de aplicaii Web

scop:
eficientizarea proceselor de dezvoltare
a aplicaiilor Web de anvergur
implementare

poate fi integrat n unul/mai multe servere Web
de asemenea, poate oferi propriul server Web
sau mediu de execuie
implementare

poate ncuraja sau impune o viziune arhitectural
privind dezvoltarea de aplicaii Web
situaie tipic:
MVC ori variaii
implementare

simplific maniera de invocare
de programe (script-uri) ale unei aplicaii Web
generarea de coninut dinamic pe partea de server
implementare
client prostu
(dumb)
browser
frontend
server gras
(fat)
pagini <Web/>
HTML, CSS,
prezentare
procesare
abstractizare
date
backend
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
arhitectura aplicaiilor Web:

abordarea MV* tradiional
arhitectura aplicaiilor Web:

abordarea MV* tradiional
client prostu
(dumb)
browser
frontend
server gras
(fat)
pagini <Web/>
HTML, CSS,
prezentare
procesare
abstractizare
date
backend
frecvent, aplicaie monolitic
(e.g., un WAR: 2.2 M linii de cod, 418 .jar-uri,
startare n 12 min. conform plainoldobjects.com)
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
avansat
implementare
API-ul de baz
stocare persistent a modelelor de date (relaionale, XML)
interaciune Web
cookie-uri i sesiuni
medii de dezvoltare + cadre de lucru
caracteristici particulare

C# i alte limbaje .NET Framework ASP.NET
Go 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
implementare

pot fi dinamice e.g., Python, Ruby

interpretate sau compilate
uzual, se prefer generarea de cod intermediar:
IL (Intermediate Language) C#, Java, Scala
implementare

API de baz
implementare
contribuie la puterea limbajului + serverului de aplicaii

(via funcii/clase predefinite)
securitate, consisten,
acces la resursele mediului de operare/rulare,
asigurarea independenei de platform

suport pentru stocare persistent
n baze de date relaionale via SQL
exemplu: funcii/module PHP predefinite
pentru o pleiad de sisteme de baze de date
(Firebird, MySQL, PostgreSQL,)
biblioteci incorporate (SQLite + mysqli) sau diverse extensii
implementare

ORM (Object-Relational Mapping)
ADO.NET pentru ASP.NET
JDBC (Java DataBase Connectivity) pentru Java (JSP)
Sequelize bibliotec pentru Node.js
implementare

eventual, framework-uri adiionale
implementnd ablonul Active Record
exemple: active_record (modul Node.js), Castle Project (.NET),
Doctrine (PHP), Play Framework (Java, Scala), Rails (Ruby)
implementare

pe baza modelelor arborescente: XML
date (semi)structurate
transformri n alte formate: XPath, XSLT
procesri: DOM, SAX, SimpleXML etc.
validri de date: DTD, XML Schema, RELAX,
cursurile
interogri: XQuery
viitoare
implementare
avansat

recurgnd la alte paradigme non-relaionale
(bazate pe grafuri i/sau cheievaloare),
distribuite la nivel de Internet, scalabile NoSQL
http://nosql.mypopescu.com/
exemplificri:
Cassandra, CouchDB, Hadoop, MarkLogic, MongoDB, Neo4j etc.
implementare

suport pentru interaciunea Web
interaciunea e facilitat de controale specificate
n cadrul codului-surs rulat la nivel de server
emuleaz cmpurile din formularele HTML i/sau
ofer controale noi e.g., calendar, slideshow,
implementare
generare de cod HTML (+JavaScript) n funcie de client

implementare
exemplificri:
ASP.NET (<asp:control> e.g., FileUpload, ListBox, Table,...)
framework-ul PRADO (PHP)
formidable, form-data, forms module Node.js
similar, pentru platforma Java: e.g., JSF (JavaServer Faces)

implementare
ncurajarea folosirii de machete de vizualizare (templates)

pe baza unui procesor specific Web template system

Web template system
utiliznd specificaii de prezentare a coninutului
(Web template), datele persistente
(e.g., preluate dintr-o baz de date) sunt folosite
de un procesor (template engine)
pentru a genera documente HTML ori alte formate
implementare
avansat

Web template system
la nivel de server
Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,),

Smarty (PHP), Velocity (Java), XSLT (XML) etc.
implementare
avansat

Web template system
la nivel de client
disponibile pentru JavaScript:

Dust.js, EJS, HandleBars, Mustache, Nunjucks,
implementare

transfer asincron de date via suita de tehnologii Ajax
vezi cursurile
viitoare
eventual, via framework-uri/module/clase adiionale
implementare
avansat

suport acordat inginerilor software
aplicaii N-tier
se ncurajeaz folosirea abloanelor de proiectare:
Container, MVC (Model-View-Controller),
Proxy, Configuration Parameters, Invocation Context,
implementare
avansat
Framework (cadru de lucru)

faciliteaz dezvoltarea de aplicaii Web complexe,
simplificnd unele operaii uzuale
(e.g., acces la baze de date, caching, generare de
cod, management de sesiuni, control al accesului)
i/sau ncurajnd reutilizarea codului-surs
implementare
avansat
Framework (cadru de lucru)

clasificare:
de uz general
management de coninut
(CMS Content Management System)
la nivel de intranet e.g., portal organizaional
implementare
avansat
implementare
Exemple de framework-uri care faciliteaz dezvoltarea de
aplicaii Web la nivel de server
ASP.NET: ASP.NET MVC, Vici MVC

Java: Play, Spring, Struts, Tapestry, WebObjects, Wicket
JavaScript (Node.js): Express, Geddy, Locomotive, Tower
Perl: Catalyst, CGI::Application, Jifty, WebGUI
PHP: CakePHP, CodeIgniter, Symfony, Yii, Zend Framework
Python: Django, Grok, web2py, Zope
Ruby: Camping, Nitro, Rails, Sinatra
avansat
Bibliotec Web (library)

colecie de resurse computaionale reutilizabile
i.e., structuri de date + cod
oferind funcionaliti (comportamente) specifice
implementate ntr-un limbaj de programare
implementare
avansat
Bibliotec Web (library)

colecie de resurse computaionale reutilizabile
i.e., structuri de date + cod
oferind funcionaliti (comportamente) specifice
implementate ntr-un limbaj de programare
poate fi referit de alt cod-surs (software):

server de aplicaii, framework, bibliotec,
serviciu, API ori component Web
implementare
Serviciu Web
implementare
software utilizat la distan de alte aplicaii/servicii

oferind o funcionalitate specific,
a crui implementare nu trebuie cunoscut de dezvoltator
detalii n
cursurile viitoare
Serviciu Web
implementare
software utilizat la distan de alte aplicaii/servicii

oferind o funcionalitate specific,
a crui implementare nu trebuie cunoscut de dezvoltator
recurge la tehnologii Web deschise
(adresare via URI, acces prin HTTP,
formate de date: CSV, JSON, XML,)
avansat
API (Application Programming Interface)

any well-defined interface that defines
the service that one component, module, or application
provides to other software elements
(de Souza et al., 2004)
detalii n
cursurile viitoare
implementare
avansat
SDK (Software Development Kit)

ncapsuleaz funcionalitile API-ului ntr-o bibliotec
(implementat ntr-un anumit limbaj de programare,
pentru o platform software/hardware specific)
API faade pattern
implementare
avansat
privire pragmatica
exemplu: acces la API-uri n Python www.pythonapi.com
avansat
Web component
parte a unei aplicaii Web
ce ncapsuleaz o suit de funcii nrudite
e.g., calendar, cititor de fluxuri de tiri,
buton de partajare a URL-ului n alt aplicaie
implementare
avansat
Web component
dezvoltare bazat pe o bibliotec/framework
soluii uzual, la nivel de client (browser Web):
Dojo Toolkit, jQuery UI, React,
cadrul general: Web Components (n lucru la W3C)

http://webcomponents.org/
implementare
Widget
aplicaie de sine-stttoare sau
inclus ntr-un container (e.g., un document HTML)
ce ofer o funcionalitate specific
ruleaz la nivel de client (platform pus la dispoziie
de sistemul de operare i/sau de navigatorul Web)
implementare
(Web) app
o aplicaie (Web) instalabil
care folosete API-urile oferite de o platform:
browser, server de aplicaii, sistem de operare,
implementare
(Web) app
a distributed computer software application designed for
optimal use on specific screen sizes and
with particular interface technologies
Robert Shilston, 2013
implementare
(Web) app
uzual, se poate obine via un app store
(centralizat sau descentralizat)
exemple notabile:
Chrome Apps
aplicaii Windows dezvoltate n JavaScript
aplicaii Web mobile pentru Firefox, Kindle Fire,...
implementare
avansat
native
app
Web browser
HTTP
WebSockets
single
page
app
adaptare dup Adrian Colyer (2012)
aplicaii
Web
i
servicii
(API-uri)
app store
platform
(OS + device)
Add-on
denumire generic a aplicaiilor asociate unui browser
(extensii, teme vizuale, dicionare,
maniere de cutare pe Web, plug-in-uri etc.)
exemplificare: addons.mozilla.org
implementare
Recurgerea la medii de dezvoltare

exemplificri aplicaii native (pentru desktop):
Anjuta, Aptana Studio, Eclipse, Emacs, IntelliJ IDEA,
KomodoIDE, Padre, PHPStorm, PyCharm, RubyMine,
Visual Studio, Zend Studio
soluii bazate pe cloud computing:
Cloud9 IDE, Codenvy, Koding etc.
dezvoltare
S. Buraga, Cu codul n nori: www.slideshare.net/busaco/cu-codul-n-nori
mediu de execuie
(runtime environment)
rulare
dezvoltare
cod-surs stocat
(code repositories)
instrumente de
dezvoltare (IDE)
Development as a Service

A. Iqbal, M. Haunsenblas, S. Decker (2012)
avansat
DigitalOcean, Google App Engine, Heroku,

Jelastic, OpenStack, Windows Azure,
mediu de execuie
(runtime environment)
rulare
dezvoltare
cod-surs stocat
(code repositories)
instrumente de
dezvoltare (IDE)
BitBucket,
GitHub
Web: Cloud9, Koding, Ideone etc.

desktop: Eclipse, Visual Studio,
instrumente utile la https://github.com/ripienaar/free-for-dev
avansat
Generarea automat de documentaii,

n diverse formate
instrumente specifice (documentation generators)
exemplificri:
Doc, Document! X, Doxygen,
JavaDoc, JSDoc, phpDocumentor
dezvoltare
Controlul versiunilor surselor de programe

(VCS Version Control System)
code review, revision control, versioning
monitorizarea modificrilor asupra codului-surs
realizate de o echip de programatori
asupra aceleai suite de programe (codebase)
dezvoltare
Soluii distribuite:
Git (implementat n bash, C i Perl)
http://git-scm.com/
Mercurial (dezvoltat n Python)
http://mercurial.selenic.com/
Rational Team Concert (oferit de IBM)
jazz.net/products/rational-team-concert/
Sisteme Web de gzduire de software

(SCM source code management):
BitBucket https://bitbucket.org/
GitHub https://github.com/
Instrumente client/server:
Apache Subversion SVN
Microsoft Team Foundation Server TFS
ncurajarea/impunerea
unui stil de redactare a codului-surs
exemple:
C# https://github.com/dennisdoomen/csharpguidelines
Java http://checkstyle.sourceforge.net/
JavaScript https://github.com/rwaldron/idiomatic.js/
Perl http://perldoc.perl.org/perlstyle.html
PHP http://pear.php.net/manual/en/standards.php
Python https://www.python.org/dev/peps/
Ruby https://github.com/styleguide/ruby
Scala http://docs.scala-lang.org/style/
dezvoltare
Management de pachete software

cutare, instalare, compilare, verificare a dependenelor
exemplificri:
Bower, Composer, npm, NuGet, RubyGems
de studiat https://github.com/showcases/package-managers
dezvoltare
Suport pentru fluxuri de activiti (workflow-uri)

eventual, realizate automat
construirea unei aplicaii Web pornind
de la codul-surs + componentele adiionale (build tool)
exemplificri:
Ant, Grunt, Gulp, make, Mimoza, Rake, tup, Yeoman
dezvoltare
Teste referitoare la codul-surs

uniti de testare automat cadrul general dat de xUnit
HttpUnit, JUnit (Java), PHPUnit, NUnit (.NET),
Test::Class (Perl), unittest (Python), Unit.js
+
JSUnit, FireUnit, Mocha, Selenium
la nivel de client
de vizitat i http://xunitpatterns.com/
testare
Teste specifice n contextul aplicaiilor Web

privind coninutul structur, validare HTML, CSS,...
probleme la nivel de hipertext (e.g., broken links)
utilizabilitate inclusiv accesibilitate, multi-lingvism
estetica interfeei Web dificil de evaluat/testat
testare
Teste specifice n contextul aplicaiilor Web

integrare a componentelor
gradul de disponibilitate permanent i de flexibilitate
(evoluie continu)
gradul de independen de dispozitiv multi-screen
(numr mare de dispozitive + caracteristici poteniale)
testare
Alte tipuri de testri:

privind performana
ncrcare (load)
stressing
testare continu
scalabilitate
referitoare la securitate
testare
Documente HTML validator.w3.org, instrumentul Tidy

Foi de stiluri CSS CSS Lint: http://csslint.net/
Documente XML bine-formatate / valide
Script-uri pe partea client (JavaScript) via JSLint, JSHint
Programe rulate la nivel de server xUnit
Integritatea i accesul la sistemul de fiiere
Integritatea i accesul la bazele de date
Suport oferit de navigatorul Web http://caniuse.com/
Probleme de securitate www.owasp.org
Rezolvarea scalabilitii aplicaiei Web
testare: exemplu codul-surs
Publicarea sitului
server dedicat
vs.
furnizor de gzduire Web (hosting)
soluie gratuit vs. comercial
timp de rspuns, scalabilitate, securitate, suport tehnic,...
fr Under construction ori 404 Not found nicieri!
exploatare
Mentenana (administrarea) coninutului

obinerea, crearea, pregtirea, managementul,
prezentarea, procesarea, publicarea i reutilizarea
coninuturilor n manier sistematic i structurat
exploatare
avansat
La nivel organizaional:
managementul cunotinelor (knowledge management)

managementul relaiilor cu clienii
(CRM Client Relationship Management)
planificarea resurselor
(ERP Enterprise Resource Planning)
managementul workflow-urilor + business rules
integrarea aplicaiilor (EAI Enterprise App Integration)
exploatare: management
avansat
La nivel tehnic:
managementul coninutului de ctre personal non-tehnic

pe baza principiului separation of concerns
sisteme de management al coninutului
(CMS Content Management Systems)
instrumente colaborative
(e.g., enterprise wiki)
avansat
Privind utilizatorul:
interaciune Web e.g., utilizabilitate
http://profs.info.uaic.ro/~busaco/teach/courses/hci/
abloane de proiectare a aplicaiilor Web sociale
http://www.slideshare.net/busaco/hci-2015-610-design-patterns-social-interaction
performana Web la nivel de browser

http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week12
avansat
Usage analysis
metode explicite
bazate pe date oferite de utilizator
e.g., chestionare i monitorizare (user testing),
analiza mesajelor de e-mail, reacii pe reele sociale etc.
exploatare: analiza utilizrii
metode implicite colectare automat a datelor de interes

(user analytics) uzual, folosind cookie-uri
avansat
Usage analysis
construirea profilului utilizatorilor: Web usage mining
analiza fiierelor de jurnalizare a accesului
(e.g., access.log la Apache, AWStats,)
msurarea popularitii sitului: vitez de ncrcare,
numrul de accesri, timpul de vizitare etc.
servicii de monitorizare/raportare
exemple: Google Analytics, WordPress Statistics
exploatare: analiza utilizrii
obiectiv principal
durat
cost
abordare
tehnologii
procese
rezultat
resurse umane
profilul echipei
parametrii unui proiect web
management
Web Project
Manager
funcionalitate
coninut (date)
Software
Engineer(s)
Domain
Expert
Multimedia
Designer(s)
Business
Expert
echipa proiectului Web
vezi S. Buraga, Dezvoltator Web?! (varianta 2015)

http://www.slideshare.net/busaco/dezvoltator-web-varianta-2015
Cteva exemplificri
privind arhitectura unor aplicaii Web?
studiu de caz: Flickr

Scop:
partajare on-line a coninutului grafic (fotografii)
aplicatie reprezentativ a Web-ului social
agregare de comuniti imaginea ca obiect social
suport pentru adnotari via termeni de continut (tagging)
+ comentarii
studiu de caz: flickr
PHP (procesare application logic, acces la API,

prezentare de coninut via Smarty, modul de e-mail)
Perl (validarea datelor)
Java (managementul nodurilor de stocare)
MySQL (stocare n format InnoDB)
ImageMagick (bibliotec C de prelucrare de imagini)
Ajax (interaciune asincron)
Linux (platform de rulare)
alte detalii la http://highscalability.com/flickr-architecture
studiu de caz: flickr tehnologii
arhitectura iniial conform (Cal Henderson, 2007)
avansat
interfee de programare (API-uri)

oferite de Flickr
faciliteaz accesul la serviciile Web
n cadrul aplicaiilor rulnd, eventual,
pe alte platforme
www.flickr.com/services/api/
studiu de caz: flickr
studiu de caz: Lanyrd

Scop: descoperire i management online de evenimente

(e.g., conferine cu caracter tehnologic)
agregare de comuniti evenimentul ca obiect social

suport pentru vorbitori i audien, slide-uri,
+ calendare i localiti de desfurare
concepte importante: conferences, user profiles,
e-mails, dashboard, coverage, topics, guides
studiu de caz: lanyrd
Creat aproape complet n Python (folosind Django)

i ntreinut de 6 persoane
2
1
backend developers
frontend developers
mobile developers
designers
system administrators
business operations
A. Godwin, Inside Lanyrds Architecture, QCon London, 2013

http://www.infoq.com/presentations/lanyrd-architecture
studiu de caz: lanyrd
avansat
arhitecturi: exemplu lanyrd

programare Webinginerie Web
dezvoltarea aplicaiilor Web aspecte eseniale
rezumat
cerere HTTP
(GET, POST,...)
Client
Web
rspuns
(reprezentare)
HTML, PNG, PDF,
SVG, Atom, ZIP,...
server de
aplicaii
PHP
procesor
(engine)
Zend
programe
.php
resurse (externe)
episodul viitor:
dezvoltarea de aplicaii Web n PHP
Server Web

web04DezvoltareaAplicatiilorWeb InginerieWeb

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

web04DezvoltareaAplicatiilorWeb InginerieWeb

Încărcat de

Drepturi de autor:

Formate disponibile

programare Webinginerie Web

dezvoltarea aplicaiilor Web

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Viitorul este suma pailor pe care-i facei,

sisteme software complexe,

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

mijloace multiple de interaciune Web cu utilizatorul

tablet (smart) TV ecran urban

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

creterea masei de utilizatori,

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

suportul privind dezvoltarea de aplicaii

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

neadaptare la cerinele economice (de tip business)

development vs. marketing vs. management

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

privind proiectele Web de anvergur

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

adaptare dup Crumlish & Malone, 2009

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

corectitudine i robustee (reliability)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Asigurarea calitii aplicaiilor Web

facilitarea interaciunii cu utilizatorul (usability)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Asigurarea calitii aplicaiilor Web

alte aspecte de interes:

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Asigurarea calitii aplicaiilor Web

scopuri + cerine clar specificate

controlul permanent al ntregului proces de dezvoltare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

scopuri + cerine clar specificate

controlul permanent al ntregului proces de dezvoltare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

n ce mod dezvoltm o aplicaie Web?

Uzual, se recurge la o metodologie

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

dezvoltarea aplicaiilor Web

programare (server + client)

public beta lansare

actualmente, sunt preferate metodologii agile

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

dezvoltarea aplicaiilor Web

Metodologii moderne exemple:

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

dezvoltarea aplicaiilor Web

aim42 practici i abloane privind evoluia, mentenana,

start with needs

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

dezvoltarea aplicaiilor Web: principii

Stabilirea standardelor de calitate

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Obinere / licitare / negociere

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

cu atragerea experilor n domeniul problemei

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Aspecte specifice aplicaiilor Web