Dezvoltator Web?! – ...în 2016

Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
Dr. Sabin Buraga
Facultatea de Informatică, UAIC – Iași, România
profs.info.uaic.ro/~busaco/
…în 2016


Ce este Web-ul?

World Wide Web
“a common information space
in which we communicate by sharing information”
Sir Tim Berners-Lee
a creat Web-ul în decembrie 1989
detalii istorice în Sabin Buraga, 25 de ani de Web (2014)
http://www.slideshare.net/busaco/25-de-ani-de-web

World Wide Web
scopuri principale:
independența de dispozitiv
independența de software
scalabilitatea
ubicuitatea

World Wide Web
bazat pe standarde deschise stipulate de
Consorțiul Web
www.w3.org

World Wide Web
un serviciu Internet
alături de poștă electronică, transfer de fișiere etc.
WWW  Internet

Web-ul e bazat pe modelul client/server al Internet-ului

server
Web
client
Web
cerere
răspuns
Web-ul e bazat pe modelul client/server al Internet-ului

⧉
clientul Web (browser, player multimedia,
aplicație desktop/mobilă, robot al unui
motor de căutare,…) preia/trimite conținuturi
– adică date – (de) la server


pentru a reprezenta aceste conținuturi,
se adoptă diverse formate de date
cel mai popular:
HTML (HyperText Markup Language)
https://www.w3.org/html/

conținut ≅ <marcajeHTML versiune="5.1" /> +
{ foi de stiluri: CSS } à la mode


aceste conținuturi sunt stocate
în documente (pagini) Web
mai general, resurse Web

resursele vor fi identificate printr-o adresă Web
URL (Uniform Resource Locator)
exemplu: http://www.slideshare.com/busaco/presentations/
identificator unic

paginile Web – uzual, documente HTML –
includ referințe către alte resurse de interes
via adrese (URL-uri)hipertext (hipermedia)

Web-ul reprezintă un graf hipermedia
explorat pe baza interacțiunii cu utilizatorul via URL-uri

la nivel de server Web, resursele (conținuturile)
solicitate de client – via un URL – sunt fie stocate static
(i.e. create manual), fie generate dinamic – pe baza
unor programe implementând diverși algoritmi

transferul datelor între client și server e stabilit
de un protocol de comunicație
HTTP (HyperText Transfer Protocol)

codificarea
datelor
Unicode
nume de
domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS,…
a b c … z
ș б ө Ϟ ঢ় ល ꑸ
⠳ ⵙ ⋇ ⚉ 𝔜
.edu .org .info .ro
.uaic.ro
.info.uaic.ro
TCP / UDP
IP, ICMP,…
acces la mediu

Internet
(Web)
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
sit Web
sistem găzduind o serie de pagini (resurse) Web înrudite
ale unei organizații, companii sau persoane
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
aplicație Web
colecție interconectată de pagini Web cu conținut generat
dinamic, oferind o funcționalitate specifică
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
interacțiune Web
„dialogul” dintre utilizator(i) și aplicație are loc
via o interfață Web
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
interacțiune Web
uzual, sit Web = aplicație Web
Client
interfață cu
utilizatorul

exemple de aplicații Web:
Cloud9, Coursera, Devdocs.io,
Dropbox, GitHub, info.uaic.ro,
Instagram, JSBin, Medium,
OpenStreetMap, PHPMyAdmin,
Reddit, Quora, SlideShare,
TED.com, Tumblr, Vimeo,
webmin, Wikipedia, WordPress
…și multe, multe, multe altele

Internet
(Web)
Server
sit/aplicație Web
Date
stocate
persistent
Client
interfață cu
utilizatorul

Internet
(Web)
Server
sit/aplicație Web
Date
stocate
persistent
accesul la date poate fi realizat via (micro-)servicii Web
software oferind o funcționalitate specifică în urma
căreia se obțin date de interes – uzual, apelând la
un API (Application Programming Interface)
Client
interfață cu
utilizatorul

💡
Care e arhitectura generică
a unei aplicații Web?

Internet
(Web)
tipic, o aplicație Web implică trei strate (3-tier)
client server de aplicații stocare
(interface) (application) (persistence)

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

mitul 1: cea mai importantă este interfața

Internet
(Web)
Aplicație Web = Interfață + Program + Conținut (Date)
standarde deschise
structurarea conținutului: HTML (HyperText Markup Language)
stiluri de prezentare a datelor: CSS (Cascading Style Sheets)
transfer asincron: Ajax (Asynchronous JavaScript And XML)
ilustrații 2D în format vectorial: SVG (Scalable Vector Graphics)
conținut 3D: WebGL

mitul 2: cel mai important este programul

Internet
(Web)
server: C#, Go, Java, JavaScript, PHP, Python, Ruby, Scala etc.
client: JavaScript + API-uri HTML5 implementate de browser
servere de aplicații Web, framework-uri,
biblioteci, componente,…

mitul 3: cele mai importante sunt datele
(“content is king”)

Internet
(Web)
recurgerea la modele diverse
relațional – interogare via SQL (Structured Query Language)
bazat pe grafuri – o fațetă a „mișcării” NoSQL
cheie-valoare – e.g., formatul JSON (JavaScript Object Notation)
arborescent – XML (Extensible Markup Language)

mitul 1: cea mai importantă este interfața
mitul 2: cel mai important este programul
mitul 3: cele mai importante sunt datele
fapt: sunt importante toate!

View
(prezentare + interacțiune)
Model
(structura datelor)
demarcarea responsabilităților
(separation of concerns)
modelul de structurare a datelor este separat
de maniera de procesare (controlul aplicației) și
de modul de prezentare a acestora (interfața Web)
Controller
aplicație (server și/sau client)

View
(prezentare + interacțiune)
Model
(structura datelor)

HTML, CSS, SVG, MathML, WebGL,…

SQL, JSON, XML (XQuery), RDF (SPARQL)
💡
servere de aplicații, framework-uri etc.
arhitectura generică a unei aplicații Web
va consta dintr-un set de resurse referitoare la
model, view și controller – MVC
Controller
aplicație (server și/sau client)

uzual, mediul de dezvoltare – la nivel de server/client –
(i.e. framework-ul Web) impune o anumită structură
a fișierelor aplicației ce va fi implementată

├───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 aplicații Web
create în Ruby on Rails
rubyonrails.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
structura de directoare
în cazul unei aplicații Web
folosind CakePHP
cakephp.org
framework-uri PHP similare
www.phpwact.org/php/mvc_frameworks

/
│ app.js
│ package.json
├───bin
├───data
├───node_modules
│ ├───body-parser
│ ├───cookie-parser
│ ├───debug
│ ├───express
│ │ ├───lib
│ ├───jade
│ ├───morgan
├───public
│ ├───images
│ ├───javascripts
│ └───stylesheets
│ style.css
├───routes
│ index.js
│ users.js
└───views
error.jade
index.jade
layout.jade
eșafodajul unei aplicații Web bazate pe Express – expressjs.com
specificarea interfeței (view-ul)
via machete de vizualizare
descrise cu JADE: jade-lang.com/
rute vizând deservirea cererilor pe
baza URL-urilor solicitate de client
module Node.js adiționale
conținut static destinat clientului
(foi de stiluri CSS, biblioteci JS
procesate de browser, imagini,…)
diverse configurări ale aplicației
specificarea modelelor de date

browser
prezen-
tare
proce-
sare
abstrac-
tizare
date
pagini <Web/>
HTML, CSS,…
server „gras”
(fat)
client „prostuț”
(dumb)
arhitectura aplicațiilor Web:
abordarea MVC tradițională
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
frontend backend

browser
modern
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML,
CSV și altele
server „slab”
(thin)
client „puternic”
(HTML5)
aplicație JavaScript
(eventual, via app store)
abordarea JavaScript

sistem
de
operare
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON
XML
CSV
…
server „slab”
(thin)
client „isteț”
(smart device)
aplicație nativă
C#, Java, Obj-C, Swift,…
(uzual, via app store)
aplicații native (desktop, mobile, smart TV)

browser
prezen-
tare
proce-
sare
abstrac-
tizare
date
API
JSON
et al.
server „slab”
(thin)
și/sau „isteț”
abordarea hibridă – e.g., book reader, chioșc informativ
server de
prezentare
pagini
HTML

💡
Câteva exemplificări de aplicații Web?

client(i)
firewall
proxy
middleware
server(e) Web
server(e) de aplicații
framework-uri, biblioteci, alte componente
server(e) de stocare persistentă – e.g., baze de date
server(e) de conținut multimedia
server(e) de management al conținutului (CMS)
aplicații/sisteme tradiționale (legacy)
eventual, recurgând la servicii în „nori” – cloud(s)
(găzduire, infrastructură scalabilă,
procesare paralelă, monitorizare,…)

Aplicație
Web
Procesare la nivel de server
(backend)
Stocare
persistentă
eBay Java, Node.js (JavaScript) Oracle DB
Facebook
Hack, PHP (HHVM), Python,
C++, Java, Erlang, D, Haskell,
XHP (extensie PHP/Hack)
MySQL,
Apache HBase,
Apache Cassandra
Google C, C++, Go, Java, Python BigTable, MariaDB
Linkedin Java, JavaScript, Scala Voldemort
Pinterest Django (Python), Erlang MySQL, Redis
Twitter C++, Java, Scala, Rails (Ruby)
MySQL, Cassandra,
Hadoop, Vertica
Wikipedia PHP, Hack MySQLMariaDB
WordPress PHP / Node.js – Calypso MySQL
YouTube C, C++, Python, Java, Go BigTable, MariaDB
en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites
http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week3

Netflix
scop: oferire de conținut video la cerere (streaming) +
televiziune Web (Web TV)
servicii disponibile pe dispozitive/platforme multiple
recurge și la tehnologii deschise – netflix.github.io/
studiu de caz

procesare backend Java, Python, Node.js (JavaScript)
procesare frontend React (JavaScript)
sisteme de stocare MySQL, Apache Cassandra, Apache
Hadoop, Apache Hive, Oracle DB
servicii în „nori”
Amazon EC2 (procesare video)
Amazon S3 (stocare)
servicii SQL Amazon RDS
servicii NoSQL Amazon DynamoDB
management de cod GitHub
integrare continuă Jenkins
gestionare servere Apache Mesos
distribuire de conținut
(content distribution network)
Open Connect CDN (FreeBSD,
Nginx), Akamai, Level 3, Limelight
monitorizare Apache Chukwa
highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html

browser
control
proce-
sare
și/sau „isteț”
alternativă: arhitecturi fără server (serverless)
aplicația Web depinde semnificativ de componente
externe, disponibile în „nori” – (micro-)servicii
BaaS
Mike Roberts (2016) – http://martinfowler.com/articles/serverless.html
func-
ționa-
litate1
☁
func-
ționa-
litate2
☁
☁
auten-
tificare
☁
BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service
☁
FaaS
căutare
procesare
comenzi
BaaS
comenzi
produse
acces
la API

⧉ ☆ 💡
Aspecte importante vizând
dezvoltarea de aplicații Web?

⧉
aplicații Web  sisteme software complexe,
în evoluție permanentă

mijloace multiple de interacțiune Web cu utilizatorul
mobil laptop PC tabletă (smart) TV ecran urban

creșterea masei de utilizatori,
având așteptări tot mai mari din partea software-ului
de la conținut (hiper)textual
la aplicații Web sociale + interacțiune naturală

suportul variat privind dezvoltarea de aplicații
(limbaje, API-uri, SDK-uri, biblioteci, framework-uri,...)
oferit de platforma hardware/software
la nivel de server(e) și/sau de client(i)

neadaptarea la cerințele economice (de tip business)
development vs. marketing vs. management

adaptare după Crumlish & Malone, 2009
scopuri
psihologie
comportament
⧉ 💡 
facilități
tehnologii
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori
interacțiune
controale
limbi naturale

Etape în dezvoltarea unei aplicații Web
Cerințe – requirements
Analiză și proiectare – software design
Implementare – build
Testare – testing
Exploatare – deployment
Mentenanță – maintenance
Evoluție – evolution

Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
aplicație Web
(produs software)
funcționalitate
+
informații oferite


Vreau să dezvolt un proiect Web…

cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
A.Iqbal,M.Haunsenblas,S.Decker(2012)
☁
☁ ☁
procesul actual de dezvoltare și exploatare
a aplicațiilor Web – Development As A Service
de parcurs Sabin Buraga, Cu codul în „nori” (2015)
http://www.slideshare.net/busaco/cu-codul-n-nori

cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
A.Iqbal,M.Haunsenblas,S.Decker(2012)
☁
☁ ☁
DigitalOcean, Google Cloud Platform, Heroku,
Jelastic, OpenStack, Windows Azure,…
BitBucket
GitHub
Web: Cloud9, Koding, Ideone etc.
desktop: Eclipse, Visual Studio Code,…
instrumente utile la https://github.com/ripienaar/free-for-dev

Parametrii unui proiect Web
obiectiv principal
durată
cost
abordare
tehnologii
procese
rezultat
resurse umane
profilul echipei

✓
obiectiv principal
crearea unui produs software utilizabil
în cât mai scurt timp posibil

⌚
durată
aproximativ 2—6 luni

♨
cost
de ordinul miilor de Euro

✒
abordare
prototipizare – wireframe, mockup,…
metode agile
asamblare de componente reutilizabile

♻
tehnologii
componente (servicii Web, API-uri publice,
framework-uri, biblioteci, plugin-uri, extensii etc.)
proiectare/programare „vizuală”
multimedia
…și altele

procese
uzual, dezvoltarea aplicațiilor Web se realizează iterativ
„nu te aștepta să-ți iasă din prima…”
understand
study
designbuild
evaluate

⎚
rezultat
reutilizabilitate mare a codului,
recurgerea la componente/limbaje/platforme standard
aplicații implementate uzual conform standardelor
designul vizual este, de cele mai multe ori, unicat

♚♞♟
resurse umane
3—9 persoane
“For the first version of your app, start with only 3 people.”
https://gettingreal.37signals.com/

☆
profilul echipei
specialiști în interacțiune – uzual: designeri Web
+
dezvoltatori (programatori) Web – la nivel client/server
+
arhitecți de baze de date
+
specialiști în marketing și/sau relații cu publicul


Care-i echipa de dezvoltare
a unei aplicații Web de anvergură?

management
site editor
project manager

dezvoltare
(arhitectură)
system architect
data (content) architect
component architect
security architect

interacțiune
cu utilizatorul
creative lead
Web interface designer(s)
graphic artist(s)
HCI engineer

programare
server-side programmers
client-side programmers
data/component integration programmers

testare
testing lead
client-side tester(s)
server-side tester(s)
component tester(s)
integration tester(s)

operații tehnice
Webmaster
hardware/network technicians
network administrator(s)
database administrator(s)
backup operator
uptime monitor
security monitor(s)

marketing
content producer(s)
copywriter(s)
content editor(s)
branding & advertising expert(s)
direct e-marketer
public relations personnel

echipa proiectului Web
management
Web Project
Manager
funcționalitate
Software
Engineer(s)*
Multimedia
Designer(s)
conținut (date)
Domain
Expert
Business
Expert
*frontend sau backend sau full-stack (frontend & backend)

Web
Designer
standarde Web la nivel de client: HTML5, CSS3,…
cunoștințe vizând navigatoarele Web
experiență în design vizual + design responsiv
cunoștințe privind interacțiunea Web (mobilă)
familiaritate cu JavaScript (+framework-uri/biblioteci)
paradigme de interacțiune naturală
(tactilă, bazată pe gesturi, realitate virtuală/îmbogățită – VR/AR)

cel puțin 1 limbaj obiectual – la nivel de server/client
protocoale și standarde Internet + Web
cunoștințe privind baze de date
(inclusiv NoSQL și/sau XML)
cunoștințe vizând servicii Web
familiar cu alte paradigme de programare
(e.g., funcțională, distribuită)
securitate & performanță Web
Web
Developer

Web Technician
asistent (ajutor) al webmaster-ului,
designerului sau dezvoltatorului Web
poate efectua operații tehnice:
instalare, configurare, monitorizare,…

Web Maintainer
actualizează conținutul
via o interfață WYSIWYG (de exemplu, recurgând la un
sistem de management al conținutului – CMS sau wiki)

voluntar pentru proiecte open source (Web-ul ca hobby)
pe cont propriu – freelancer/solopreneur
companie mică – e.g., agenție (web studio)
în echipa de dezvoltare Web – organizație netehnică
în echipa unei organizații din IT (e.g., Apache, GitHub)


Câteva inițiative (mai) recente
vizând tehnologiile Web?

Interacțiuni naturale
dintre utilizator(i) și aplicațiile Web
tehnologii implementate de navigatorul Web actual
inclusiv la nivelul dispozitivelor mobile
www.w3.org/Mobile/mobile-web-app-state

Grafică 2D/3D raster și/sau vectorială + animații
HTML5 <canvas>
SVG (Scalable Vector Graphics)
transformări 3D
via foi de stiluri CSS (Cascading Style Sheets)
WebGL
a se studia și resursele disponibile la
http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

realitate virtuală & îmbogățită
în browser (mobil) și/sau folosind un dispozitiv dedicat
WebVR – specificație în lucru la Consorțiul Web: webvr.info
aframe.io
vizor.io

Web ubicuu la nivel fizic – physical Web
far (beacon) = dispozitiv fizic capabil să expună un URL
scanner/browser = entitate ce scanează, recunoaște,
procesează și prezintă un set de URL-uri
proxy = un serviciu Web (în „nori”) opțional cu rol de
protejare a utilizatorului + îmbunătățire a performanței
resurse de interes:
google.github.io/physical-web/
www.slideshare.net/yiibu/presentations
experiment:
https://medium.com/@urish/exploring-the-physical-web-without-buying-beacons-efae51e36c2e

Web ubicuu la nivel fizic – physical Web
☁beacon
☗ difuzare
URL
client Web
analiză +
optimizare
proxy
aplicație/serviciu Web
procesare resursă
extragere meta-date
①
②
③
④
diverse direcții de interes:
automatizarea spațiilor de locuit (home automation)
industria auto (smart car)
reclame contextuale (smart advertising)


Web „inteligent” – semantic Web, Web of Data
modelarea resurselor – date, informații, cunoștințe –
disponibile pe Web pentru a fi „înțelese” de calculatoare
standarde Web:
RDF (Resource Description Framework)
SKOS (Simple Knowledge Organizational System)
OWL (Web Ontology Language)
pentru detalii, de studiat:
Sabin Buraga, Why 5-Star Data? (2016)
http://www.slideshare.net/busaco/why-5star-data
Sabin Buraga, Dezvoltarea aplicațiilor Web (curs master FII, UAIC)
http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html

interogări asupra DBpedia
(varianta procesabilă de către mașină a enciclopediei Wikipedia)
Cine este Linus Torvalds?
PersonWithOccupation
ComputerPioneers
FinnishComputerProgrammers
FreeSoftwareProgrammers
LinuxKernelHackers
LivingPeople
PeopleInInformationTechnology
Golfer
diverse URL-uri
desemnând concepte
(things, not strings)

☺
Bun… Și eu ce fac?

fii curios și iscoditor

învață
(citește + experimentează + cere ajutor + reutilizează)

creează și arată
(design, cod-sursă, prototipuri, exemple demonstrative,…)

acumulează
experiență, „aură”, statut social etc.reputație

concurează
(…atât de multe oportunități)

ajută/instruiește pe ceilalți

Mult succes!
imagini medievale furnizate de http://discardingimages.tumblr.com/

Dezvoltator Web?! – ...în 2016

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Dezvoltator Web?! – ...în 2016 (20)

More from Sabin Buraga (17)

Dezvoltator Web?! – ...în 2016