CURS 11

Arhitecturi ale aplicatiilor web

Criteriile utilizatorilor
 Responsiveness/Usability
Actualizarea datelor pe pagini, comutarea intrepagini (timpul de raspuns).
Astfel de calitati ale interfetei cu utilizatorul ca bogatie
informative/functionala si intuitivitate.
 Linkbility
Abilitatea de a salva bookmarks si linkuti catre diferite sectiuni ale site-ului
web
 Lucru offline
Criteriile dezvoltatorilor
 Viteza de dezvoltare
Introducerea de noi caracteristici, refactorizarea, paralelizarea procesului de
dezvoltare a software-ului.
 Performanta
Viteza maxima de raspuns de la server cu un consum minim de putere de
calcul
 Scalabilitatea
Abilitatea de a mari puterea de calcul sau spatial pe disc in conditiile
cresterii cantitatii de informatii si/sau a numarului de utilizatori.
 Testabilitatea
Posibilitatea si usurinta testarii automate a unitatii.
Criteriile posesorilor de produse soft
 Extensibilitate functionala
Functionalitate noua in timp so buget minim.
 SEO
Utilizatorii trebuie sa poata gasi aplicatia prin orice motor de cautare.
 Suport
Pe linga dezvoltarea software-ului propriu, exista cheltuieli suplimentare:
hardware, infrastructura de retea, intretinere.
 Securitate
Proprietarul de software trebuie sa fie sigur ca datele de afaceri si
informatiile despre utilizatori sun pastrate in siguranta.
 CURS 11

 Conversie: site-ul web – aplicatie mobile sau desktop

Conversia intr-o aplicatie mobile sau desktop cu costuri suplimentare
minime

Tip 1: Server-side HTML web application

Cea mai raspinditaa arhitectura de aplicatii web. Serverul genereaza continut

HTML si il trimite clientului ca pagina HTML complete. Uneori, aceasta
arhitectura este numita “Web 1.0”, deoarece a fost prima care a aaparut si domina
in present sfera dezvoltarii web.

Tip 2: JS generation widgets (AJAX)

 CURS 11

Tip 3: service-oriented single-page web apps (Web 2.0, HTML5 apps)

 CURS 11

O pagina HTML este descarcata de pe server. Aceasta pagina este un container

pentru codul JavaScript, care se adreseaza unui anumit serviciu web si preia numai.
Datele sunt folosite de aplicatia JavaScript, care genereaza continutul HTML al
paginii. Aceasta arhitectura este o aplicatie JavaScript autonoma si destul de
complexa, unde o parte din functionalitate este mutate pe partea clientului. In
dezvoltarea web moderna, aplicatiile JavaScript complet offline sunt rare (cu
cateva exceptii, de exemplu, rad-js.com).

Date comparative

Model-View-Controller (MVC)
 CURS 11

Model – corespunde cu toata logica legata de date cu care lucreaza utilizatorul.

Aceasta poate reprezenta fie datele transferate intre componente View si
Controller, fie orice alte date legate de logica de business.
View – utilizat pentru intreaga logica UI a aplicatie.
Controller – actioneaza ca o interfata intre componentele Model si View pentru a
procesa toata logica business si cererile de intrare, manipuleaza datele utilizind
component Model si interactioneaza cu Vizualizarile pentru a face iesirea finala.

Model, View, ViewModel (MVVM pattern)

 CURS 11

Model – Pur si simplu detine datele si nu are nimic de a face cu nici o logica
business
ViewModel – Functioneaza ca legatura / conexiune intre model si vizualizare si
face lucrurile sa arate bine.
View – pur si simplu detine datele formatate si, in esenta, deleaga totul modelului.

Content Management System (CMS) platform

Platformele de gestionare a continutului (CMS) sunt aplicatii care permit crearea si
sifuzarea site-urilor. Acesta furnizeaza un panou de administrare, care este o
interfata in care puteti crea si actualiza pagini, postari si alte tipuri de continut
(imagini,videoclipuri,etc.) si aranja continutul conform necesitatilor.
De asemenea, veti putea schimba designul site-ului prin panoul de administrare,
instalind teme(sabloane de proiectare) si schimbindule.
 CURS 11

Cele mai proeminente platforme de CMS sunt WordPres, Joomla si Drupal. Sunt
motoare CMS gratuite si open source. Asta inseamna ca codul sursa este deschis
publicului. Puteti utiliza, edita si personalize fisierele de baza ale motorului de pe
site-ul dvs. Si daca descoperiti o modalitate excelenta de imbunatatire a platformei,
puteti sa-l impartiti dezvoltatorilor sis a va ajute la imbunatatirea motorului in
urmatoarea lor actualizare.
WordPress – este un CMS open source. Mai mult de 50% din paginile web
actuale pe web sunt pe aceasta platforma. Aceasta devine tot mai cuprinzator,
intuitive si popular cu fiecare noua versiune de actualizare. WordPress are o
comunitate dedicate, care are o multime de extensii gratuite si una din cele mai
usoare interfete.

Joomla – are un echilibru intre posibilitatile de personalizare si usurinta in

utilizare, dar este mult mai compleza decit WordPress. Daca nu ati mai lucrat
niciodata cu acest motor, vetii avea nevoie de ceva timp ca s ava obisnuiti sa
modificati. Atribuirea pluginurilor modulelor, pozitionarea modulelor pe diferite
pagini, configurarea layout-urilor si a altor manipulari necesare poate fi un pic
dificil pentru dezvoltatorul incepator.
 CURS 11

Drupal – este pentru site-uri uriase si organizatii care isi pot permite
administratorii cu norma intreaga. Puteti face aproape orice cu Drupal. Sunt adesea
fascinate de numarul de optiuni pe care motorul le contine din cutie. O multime de
lucruri care, in WordPress sau Joomla, ar necesita codare personalizata, au in mod
implicit solutii gata facute in Drupal. Acesta poate fi imbunatatit cu mai multe
extensii de la terti.
 CURS 11

Web Aplication Framework (WAF)

Un Framework este un cadru software conceput pentru a sprijini dezvoltarea de
site-uri dinamice, aplicatii web, servicii si resurse web.
Framework-ul vizeaza atenuarea cheltuielilor aferente activitatilor commune
desfasurate in dezvoltarea web. De exemplu, multe cadre ofera biblioteci pentru
accesul la baze de date, templatizarea cadrelor si gestionarea sesiunilor si
promoveaza desea reutilizarea codurilor.
Framework-urile sunt o colectie de biblioteci care ofera o serie de functii
utilizatorilor pentru a dezvolta o aplicatie web foarte rapid, cu posibilitati minime.

Framework-urile au caracteristici distinctive care le separa de biblioteci sau de

aplicatii normale ale utilizatorilor:
 CURS 11

 Inversiunea controlului – spre deosebire de biblioteci sau de aplicatii

normale ale utilizatorilor, fluxul de control global al programului nu este
dictat de appellant, ci de framework.
 Implicit – un framework are un comportament implicit. Acest comportament
implicit trebuie sa fie de fapt un comportament util.
 Extensibilitate – un framework poate fi extins de catre utilizator, de obicei
prin suprimare selective sau specializata a codului pentru functionalitati
specific.
 Od nemodificabil – codul framework-ului, in general nu este permis sa fie
modificat. Utilizatorii pot extinde cadrul dar nu isi pot modifica codul.
Front End Framework-uri se bazeaza in principal pe HTML, CSS si JS.
Aceste cadre ofera o interfata de utilizator atractiva pentru designul lateral al
utilizatorului. Bootstrap si Angular JS sunt exemple celebre ale aceste categorii.
Aceste cadre au clase predefinite, functii IDS si Java Script pentru cele mai
populare design-uri web. Dezvoltatorii pot folosi direct.
Back End Framework sunt cele mai importante mai ales atunci cantd aveti de
gind sa dezvoltati un site web complicat, plin de tehnologii moderne. Aceste
cadre contribuie la economisirea timpului.
 CURS 11

Bootstrap
Bootstrap este un framework open source pentru dezvoltarea sit-urilor web.
Bazat pe HTML, CSS si JavaScript. Bootstrap a inceput ca un proiect de Marc
Otto si Jacob Thornton la Twitter. Intentia a fost aceea de a incuraja coerenta
intre paginile web, dar a fost extinsa pentru a include instrumente puntru design
mobil si caracteristicile commune pe care dezvoltatorii web le doresc, cum ar fi
casetele de validare si de dialog.
Bootstrap este construit folosind Less. Less este un limbaj de stil care ajuta la
depasirea unor complexitati si neajunsuri cu CSS si este convertita in CSS pe
care le pot utiliza browserele. Deoarece Less este convertit in CSS,
dezvoltatorii care folosesc Bootstrap nu trebuie sa fie familiarizati cu Less. Cu
toate acestea, cunoasterea Less poate usura personalizarea site-urilor.
Bootstrap ofera dezvoltatorilor web multe avantaje. Aceasta faciliteaza crearea
paginilor fara utilizarea tabelelor. Aceasta simplifica CSS, deoarece cea mai
mare parte a functionalitatii pe care o cautati ca dezvoltator este deja construita
si adesea necesita doar adaugarea de clase la elementele HTML si un pic de
structura.

jQuery
jQuery este o biblioteca populara JavaaScript care este inclusa in proiectele de
aplicatii web.
jQuery ofera un cadru extins de obiecte si functii care va permit sa interogati sis
a lucrati cu pagini HTML utilizind JavaScript. Pentru a utiliza cererile HTTP,
jQuery ofera metoda jQuer.ajax. Aceasta ofera, de asemenea un API usor de
utilizat, care este suportat pe multe platforme de browser diferite.

AngularJS
Angular este un framework JavaScript – o abstractizare de nivel superior a
functiilor JavaScript proiectate pentru a face scrierea JavaScript mai simpla si
mai usoara.
Angular are propriul model de dezvoltare si poate schimba modul in care va
modelati si construiti aplicatiile.
 CURS 11

Cee ace face Angular pentru dezvoltarea JavaScript este atit de dramatic, ca a
primit un statut iconic in rindul dezvoltatorilor JavaScript, care este distribuit
doar de citeva alte framework-uri, si anume jQuery si React.
In timp ce Angular are multe abstractii la metodele JavaScript de nivel inferior,
acesta nu are numarul mare de functii pe care le are jQuery, astfel incit le veti
vedea frecvent unul linga celalat, jQuery in cadrul unghiului. In loc de a fi o
colectie multifunctionala de functii JavaScript de nivel inerior, Angular ofera o
noua modalitate de organizare si de functionare a JavaScript, permitand HTML-
ului dvs. Sa fie dynamic sis a reactioneze la date.

Ember
Dupa cum se afirma chiar pe emberjs.com, Ember este “un cadru pentru crearea
de aplicatii web ambitioase”. Utilizeaza un model de dezvoltare cunoscut ca
Model-view-viewModel (MVVM) pentru dezvoltare.
Routes – sunt, in esenta, paginile din aplicatia web si cum puteti ajunge la ele
Templates – utilizate pentru a organiza aspectul HTML-ului. foloseste o sintaxa
cunoscuta sub numele de Handlebars, care sunnt un dublu set de alocade ce
cuprind proprietatile spre afisare : {{Nume}}.
Models – folosite de obicei pentru a tine “datele” alicatiei web. Pot sa detina
detaliile informatiilor utilizate in paginile cererii facute.
Components – sunt utilizate pentru a controla modul in care UI se va comporta
in aplicatie. Ei utilizeaza Templates si fisierele sursa pentru a define
comportamentul elementelor UI din pagina.
Services – serviciul Ember poate utiliza si servicii pentru persistenta datelor
pentru sesiunea unui utilizator cu aplicatia.

React
React este considerat o biblioteca JavaScript care poate fi utilizata puntru a crea
interfete utilizator pentru aplicatiile web.Are urmatoarele caracteristici:
Declarativ –React faciliteaza crearea de interfata interactive. Proiectati
vizualizari simple pentru fiecare stare din aplicatia, iar React va actualiza
 CURS 11

efficient si va activa doar componentele potrivite atunci cind datele se schimba.

Modul declarative fac codul mai previzibil si mai usor de depanat.
Component Based (Bazat pe componente) – Constructii componente
incapsulate care gestioneaza starea lor proprie, apoi utilizati-le pentru a realiza
UI-uri complexe. Deoarece logica componentei este scrisa in JavaScript in loc
de teamplate-uri, puteti transfera cu usurinta datele bogate prin aplicatie si
pastrati statul afara din DOM.

Progresive Web Apps

Progresive Web App (PWA) este un termen folosit pentru a desemna aplicatiile
web care utilizeaza cele mai recente tehnologii web. Aplicatiile web progressive
sunt pagini Web (sau site-uri web) tehnice obisnuite, dar pot aparea
utilizatorului ca aplicatii traditionale sau aplicatii mobile (native).
CURS 11
 CURS 11

Concluzii
CURS 11