TNPW2-2013-02

TNPW2
2012/2013
02 – Webové aplikace

Mgr. Lukáš Vacek
lukas.vacek@uhk.cz

2

Agenda

• Webové aplikace a jejich historie
• Výhody a nevýhody webových aplikací
• Jak webová aplikace funguje?
• Vývoj webových aplikací
• Vývojové technologie
• Internet, doporučená literatura

3

Co jsou webové aplikace?

• Wikipedia – „Webová aplikace je poskytovaná uživatelům z webového serveru
přes počítačovou síť Internet, nebo její vnitropodnikovou obdobu (Intranet).“

• Nejčastěji jde o společné označení pro webové stránky (statické i dynamicky
generované) s nějakou aplikační logikou
• Pojem webová aplikace není striktně (normativně) vymezen!
• Mezi webové aplikace jsou často zařazovány i tzv. webové služby (* vysvětlím)

Zjednodušení
• Webové stránky jsou určeny pro běžného uživatele (BFU)
• Webové služby jsou určeny pro aplikace (i webové)

• Existuje celá řada technologií pro vývoj a provoz webových aplikací, které jsou
nebo budou využívány v prostředí Internetu/Intranetu. Bližší info na přednášce
věnované aktuálním trendům!

4

Historie webových aplikací?

Do poloviny 90. let
• Statické webové stránky
• Text, obrázky
• Akademická sféra, odborná veřejnost
• Uživatelé mohou obsah webových stránek ovlivnit jen minimálně

Druhá polovina 90. let
• Dynamické webové stránky, webové služby (na přelomu století)
• Multimediální obsah
• Přístupné pro nejširší veřejnost
• Interaktivita s uživatelem

http://evolutionofweb.appspot.com/

5

Dynamicky generované webové stránky

• Nejčastěji používají (X)HTML kód (+ CSS a JavaScript) jako rozhraní pro
komunikaci s uživatelem
• Jsou postaveny na modelu klient/server >> dotaz/odpověď
• Na straně uživatele (klienta) je webový prohlížeč, na opačné straně je WWW
server
• Na rozdíl od „běžných“ statických WWW stránek je na straně serveru navíc
přítomna aplikační logika, která reaguje na specifické požadavky klientů,
což výrazně zvyšuje úroveň interaktivity s uživatelem

Příklady
• Virtuální obchody (e-shopy)
• Katalogy a vyhledávací služby
• Redakční systémy (CMS)
• Sociální sítě (Facebook, Twitter a spol.)
• ASP (Application Service Provider), SaaS (Software as a Service) –
hostování, pronájem aplikací a služeb

6

Webové služby

• Model klient/server
• Na straně klienta je většinou aplikace, která odpověď serveru dále zpracovává
• Webové služby používají formát XML, ve kterém spolu klient a server
komunikují (vlastní komunikace zpravidla probíhá přes protokol HTTP/HTTPS)
• Pomocí webových služeb je možné řešit komunikaci aplikací v heterogenním
prostředí, protože používaný formát (XML) a protokoly (SOAP, HTTP/HTTPS) jsou
dostatečně univerzální
• Popis každé webové služby (dostupné metody a parametry) je k dispozici v XML
formátu (*.wsdl soubor)
• Webové služby je možné vytvářet na všech běžně používaných vývojových
platformách (Java, .NET, PHP).
• S čím dál výraznějším trendem vzájemného propojování existujících aplikací
roste význam technologií, které umožňují jejich integraci – tedy i webových
služeb!
• Pozor, webové služby nemusí být vždy tím nejvhodnějším integračním řešením!

7

Agenda

 Webové aplikace a jejich historie
• Výhody a nevýhody webových aplikací

8

Výhody webových aplikací

• Na straně klienta stačí webový prohlížeč, někdy s příslušným plug-inem
(Flash, Silverlight) – od nutnosti pluginů se ustupuje (nové možnosti HTML5)!
• Jednoduchá údržba – změny pouze na straně serveru
• Aktuálnost – každá úprava se okamžitě projeví (aplikační logika, data)
• Nižší nároky na HW klientů – stačí PC s webovým prohlížečem
• Nižší provozní náklady
• Nezávislost na platformě (OS) na straně klienta
• Přizpůsobení UI různým koncovým zařízením (exponenciálně roste počet
přístupů z mobilů)
• Výborná dostupnost, využití v lokální síti (Intranetu) i v Internetu (24/7)

9

Nevýhody webových aplikací

• Nehodí se pro některé typy aplikací
• Vysoká závislost na poskytovateli aplikace
• Roadmapa aktualizací nemusí vyhovovat všem klientům (viz. nasazení Office)
• Nemožnost práce v offline režimu (začíná se řešit – HTML5, Adobe Air)
• Omezené možnosti uživatelského rozhraní
• Omezené možnosti validace dat na straně klienta (webový prohlížeč)
• Nedokonalá podpora standardů (HTML, CSS, JavaScript) v prohlížečích
• Bez-stavová komunikace při použití protokolu HTTP/HTTPS (lze obejít)
• Množství přenášených dat (značkovací jazyk)
• Problémy s bezpečností (webový prohlížeč, dostupnost v Internetu)

10

Agenda

 Výhody a nevýhody webových aplikací

11

Komunikace klient/server

• Webová aplikace je postavena na modelu klient/server
• Na straně klienta je obvykle vizuální rozhraní aplikace (User Interface, frontend)
▫ HTML + CSS + JavaScript (nejčastější případ)
▫ Flash/Flex
▫ Silverlight…
• Na straně webového serveru (backend) je aplikační logika, datové úložiště atd.
▫ Část aplikační logiky může být i na klientovi (JavaScript)!

• Obvykle se ke komunikaci využívá protokol HTTP/HTTPS (port 80, resp. 443)

• Klientským zařízením nemusí být jen stolní počítač!

12

Synchronní a asynchronní komunikace

• Synchronní komunikace
▫ Je (zatím) častější
▫ Dotaz klienta + odpověď serveru (znáte ze statických webů)
▫ Iniciátorem komunikace je vždy klient (webový prohlížeč)
▫ Aktuálnost informací má určité zpoždění (až když se klient zeptá)

• Asynchronní komunikace
▫ Má permanentně otevřený komunikační kanál
▫ Oboustranná komunikace mezi serverem a klienty
▫ Využívá se v tzv. realtime aplikacích (online chat, kurzy akcií apod.)
▫ Podpora v různých technologiích, nejznámější asi AJAX, web socket apod.

• Metody komunikace v HTML5
• SignalR: Realtime web v ASP.NET (Michal „Altair“ Valášek)

13

Agenda

 Jak webová aplikace funguje?

14

Vývoj webových aplikací

• Webové aplikace mají, v porovnání s klasickými desktopovými a klient/server
aplikacemi, určité specifické požadavky
▫ Souběžný přístup velkého množství klientů >> rychlost odezvy
▫ Protokol HTTP je bez-stavový >> nutnost použití session a cookies
▫ Různá koncová zařízení, snaha o co nejmenší datový traffic (odezva, peníze)

• Při návrhu GUI aplikace je vhodné přesně specifikovat použité technologie a
standardy (ve firemních intranetech stále přežívá IE6!)

• I pro webové aplikace platí tradiční vývojový cyklus...
Analýza * –> Implementace –> Testování * –> Nasazení * –> Provoz *
Jednotlivé fáze vývojového cyklu (*) může ovlivnit zákazník (zadavatel)!

15

Požadavky na (webový) projekt – I.

Motto: „Když něco nemůžete změřit, nemůžete to ani řídit“ – Peter Drucker

• Požadavky na informační systém určuje business!
▫ Zohlednit potřeby zákazníka, jejich pokrytí funkcionalitou systému
▫ Měřit přínos jednotlivých požadavků (ROI, TCO) – vyplatí se to, za jakých podmínek?
▫ Návrh architektury musí být v rovnováze – business/technologie – z krátkodobého
i dlouhodobého hlediska!
▫ Náklady ovlivňují zvolené technologické řešení
▫ Důležitá je zpětná vazba do businessu v průběhu všech etap řešení

• Kvalita výstupu je přímo úměrná kvalitě vstupních informací
▫ Implementace řešení, odhady pracnosti, náklady, termíny, pokrytí požadavků

• Kvantifikujte požadavky
▫ Obecné pojmy (např. rychle, flexibilně, rozšířitelně) nemají jednoznačný výklad
▫ Upřesněte, co konkrétní požadavek znamená? (např. Průměrná doba odezvy je… )

16

Požadavky na (webový) projekt – II.

• Komunikace je králem!
▫ Efektivní komunikace je klíčem k úspěšnému projektu
▫ Musíte být schopni vysvětlit své návrhy/nápady pokud možno stručně – stostránkový
dokument (skoro) nikdo nečte! Hlavně ne zákazník 
▫ Nebojte se používat názorné obrázky, buďte srozumitelní
▫ Vždy musíte vědět, kdo je vaše publikum… komu prezentujete/vysvětlujete

• Pozor! Ne vždy je splnění všech zadaných požadavků možné
▫ Odporující si požadavky, termíny, cena, technologie, další omezení…

• Pečlivě vše dokumentujte (požadavky i návrh architektury)
▫ Co, kdo, kdy, proč, jaká omezení?
▫ Jedině s dokumentací lze rozhodnout, je-li dodávané řešení v souladu s požadavky
▫ Kvalitní dokumentace zjednodušuje provoz a případný další rozvoj systému

17

Příklady obvyklých požadavků a potřeb uživatelů

• Koncový uživatel – intuitivní a správné
chováním, výkon, spolehlivost, použitelnost, dostupnost a bezpečnost
• Administrátor – přehlednost chování, jednoduchost správy, nástroje pro
monitorování provozu
• Pracovník businessu – konkurenceschopné funkce, co nejkratší dobu pro
uvedení do provozu, porovnání s konkurenčními produkty/službami a cenou
• Zákazník – zajímá ho cena, stabilita a termín dodání
• Vývojář – očekává jasně specifikované požadavky, a jednoduchý, konzistentní
přístup k dobře zdokumentovanému návrhu, snadné provádění změn
• Projektový manažer – vyžaduje předvídatelnost při sledování
projektu, termínů, rozpočtů a možnost produktivního využití zdrojů

Zdroj: Monson-Haefel, Richard – 97 klíčových znalostí softwarového architekta

18

Testování (webových) aplikací

• Je třeba klást maximální důraz na testování (nejlépe automatizované) a brát
v úvahu rozdíly mezi testovacím a skutečným provozem
(HW, SW, konfigurace)!

• Existují různé druhy (automatických) testů
▫ Funkční, integrační, zátěžové, unit testy apod.

• Při opakovaném použití (iterace) přináší automatické testování výraznou úsporu
času a lidských zdrojů (kapacit)… snižuje náklady na projekt!

• „Automatizace snižuje pravděpodobnost, že uděláme při zadávání chybu, ale
zvyšuje pravděpodobnost, že na něco zapomeneme“ – Michael Nygard

• Začněte měřit výkon systému (nebo jeho části) co nejdříve
▫ Agilní metodiky: Výkonnostní testy nejpozději od 3. iterace (1 iterace = cca 2-4 týdny)
▫ Pozdějším nasazením se připravíte o možnost identifikovat, jaká změna měla za
následek případné problémy s výkonem

19

Možné přístupy k vývoji webových aplikací

Podle podmínek a okolností vzniku
• Vývoj na zelené louce (celý vývojový cyklus běží od začátku)
• „Překlopení“ již existující aplikace (s použitím reverzní analýzy)

Podle způsobu implementace
• Programováním
• Generováním (z databáze, z modelu (MDA) atd.)

• Oba způsoby implementace mají své výhody a nevýhody!

20

Aplikační vrstvy
• Při návrhu webové aplikace je vhodné rozdělení do tzv. aplikačních vrstev
• Nejjednodušší (obecné) rozdělení:
Přístup k datům (persistence) – Aplikační (business) logika – Prezentační vrstva (UI)

Domain-Driven Design patterns:
1. User interface (Presentation Layer)
2. Application Layer
3. Domain Layer
4. Infrastructure and Technical Services Layer

http://davidhayden.com/blog/dave/archive/200
4/12/12/685.aspx

21

Knihovny, frameworky

• Rozdělení aplikace do vrstev umožňuje (kromě dalších výhod) při vývoji využít
nejrůznější podpůrné knihovny a frameworky, které mohou výrazně zjednodušit
a zefektivnit vývoj, např.
▫ Přístup k datům (v databázi, ve file systému, různé formáty apod.)
▫ ORM (Object Relational Mapping),
▫ Automatizované testování (unit testy),
▫ Autentizaci uživatelů.
• Příklad některých používaných knihoven a frameworků
▫ Java – JDO, Spring, JUnit, Hibernate (ORM)
▫ .NET – ADO.NET, NUnit, EF, LINQ, NHibernate (ORM), Spring.NET, ASP.NET MVC
▫ PHP – PEAR, Smarty, FastTemplates, Nette, Zend

• Používání frameworků je trend!

22

Chyby při vývoji webových aplikací – I.
• Je závažnou (a bohužel obvyklou) chybou programovat webové aplikace jako
jednouživatelské
• Při návrhu aplikace se nepočítá s jejím budoucím rozvojem/rozšířením, integrací
s dalšími aplikacemi nebo rostoucím zatížením (více uživatelů)
• Živelný vývoj – často se začne programovat bez dostatečné analýzy nebo bez komunikace
se zákazníkem (chybí prototyp UI apod.)
• Uživatelům se nabízí zbytečně složité a nepřehledné ovládání
• Vývojové, testovací a provozní prostředí aplikace mají často rozdílnou konfiguraci
(liší se verze použitého SW, nastavení parametrů apod.)
• Podceňuje se fáze testování (funkční, integrační, zátěžové), nepoužívá se TDD (unit testy)
• Neoddělují se jednotlivé aplikační vrstvy (data – business – user inteface)
• Objevují se zbytečné duplicity v programovém kódu
• Znovu se vynalézá kolo >> nepoužívají se vzory (design patterns), best practice
• Programují se funkce, která uživatel nepotřebuje nebo nevyužívá (řada z nich není v UI
vůbec vidět)
• Ignorují se základní bezpečnostní pravidla pro přístup k aplikacím a k datům

23

Chyby při vývoji webových aplikací – II.
• UI je složitý, nepřehledný, často s nestandardním ovládáním
• Netestují se vstupní data od uživatelů (uživatel = neřízená střela)
• Zůstávají neukončená připojení k databázi
• Je špatně navržená struktura databáze, chybí indexy apod.
• Používají se neoptimalizované SQL dotazy, často bez parametrů
• Není ošetřena souběžná modifikace dat
• Není ošetřen opakovaný zápis dat (F5, obnovení stránky)
• Nejsou správně nebo vůbec ošetřeny výjimky (chyby)!
• Nevyužívá se vyrovnávací buffer při generování odpovědi
• Nevyužívá se kešování (cache) stránek při opakovaných požadavcích
• Přenáší se zbytečně velké množství dat mezi serverem a klientem (pozor na mobily!)
• Při objektovém programování se chybně pracuje s kolekcemi
• Programátor po sobě „neuklízí“ v paměti, spoléhá na GC nebo na zázrak 

• http://zdrojak.root.cz/clanky/programator-prestava-byt-amater-kdyz/

24

Agenda

 Vývoj webových aplikací

25

Volba technologie

• Volbu technologie ovlivňuje řada faktorů, např.
▫ Použitá platforma (OS, aplikační server, databáze)
▫ Požadavky na bezpečnost
▫ Zvyk (zadavatel, dodavatel), obchodně-politické vlivy
▫ Dostupnost know–how na straně dodavatele
▫ Cena řešení
• Použitá technologie může výrazně ovlivnit rychlost (odezvu) webové aplikace
směrem ke klientovi (ASP/ASP.NET –> až 3x větší rychlost ASP.NET).

• Volba vhodné technologie ještě nezaručuje dobrý výsledek!

26

Technologie používané u webových aplikací

Na straně klienta
• HTML formuláře
• CSS, DHTML, XSLT
• Klientské skripty (JavaScript, dříve i VB.Script*)
• Java aplety*, ActiveX*
• Flash/Flex, Silverlight, AJAX a další technologie ze skupiny RIA

Na straně serveru
• Interpretované (např. Perl*, ASP*, PHP, Python, Ruby)
• Částečně kompilované (JEE, ASP.NET)
• Kompilované (CGI skripty*)

Hvězdičkou (*) jsou označené zastaralé nebo jinak problematické technologie

27

Používané technologie z hlediska historie
Časová osa
• Pravěk – HTML formuláře a CGI skripty,
• Středověk – Perl, ASP, JSP, PHP, Java Aplety, ActiveX,
• Dnes – AJAX (HTML + JavaScript), JEE (J2EE), ASP.NET, Ruby (on Rails), Python
(Django), Silverlight, Flex atd.

• Na straně klienta (prohlížeče) je, a v nejbližší době bude, nejdůležitější kombinace
HTML5 + JavaScript + CSS3. Bez ohledu na technologie použité na straně serveru!
• Výhledově HTML5 může nahradit nativní aplikace, ale nebude to hned!

• Rozšířenost vybrané technologie ještě automaticky neznamená její kvalitu!

• Infografika: http://sixrevisions.com/infographs/what-websites-madeof/

• Technologie, které používají aktuálně největší světové weby…
http://royal.pingdom.com/?p=173
http://natishalom.typepad.com/nati_shaloms_blog/2007/10/why-most-scalab.html

28

Agenda

 Vývojové technologie

29

Odkazy na Internetu
• http://www.kosek.cz/php/index.html (PHP)
• http://www.asp.net/ (ASP.NET)
• http://java.sun.com/javaee/index.jsp (Java/JEE)
• http://java.sun.com/javaee/javaserverfaces/ (Java/JSF)
• http://www.hibernate.org/ (ORM)
• http://nhibernate.sourceforge.net/ (ORM)
• http://www.smarty.net/ (PHP framework)
• http://www.ruby-lang.org/en/ (Ruby)
• http://tomas-net.blogspot.com/2006/04/souboj-tlust-tenk-aplikace.html
• http://zdrojak.root.cz/clanky/prezentacni-vzory-zrodiny-mvc/
• http://www.root.cz/zpravicky/jak-zrychlit-web/
• http://zdrojak.root.cz/clanky/jak-zrychlit-server-nekolik-praktickych-postrehu/
• http://zdrojak.root.cz/clanky/single-page-apps-a-reseni-problemu-s-historii/
• http://zdrojak.root.cz/clanky/mobilizujeme-web-v-html5/
• http://www.netmagazine.com/features/future-css-layouts
• http://www.zdrojak.cz/clanky/metody-komunikace-v-html5/
• http://www.youtube.com/watch?v=vPXK82CayYE&feature=plcp (video přednášky o cache)

30

Doporučená literatura
• Martin, C. Robert – Čistý kód – Návrhové vzory, refaktorování, testování a další techniky
agilního programování , Computer Press 2009
• Pecinovský, Rudolf – Návrhové vzory – 33 vzorových postupů pro objektové
programování, Computer Press 2007
• Pecinovský Rudolf – OOP – Naučte se myslet a programovat objektově, Computer Press
2010
• Earl Thomas – SOA Servisně orientovaná architektura, Computer Press 2009
• MacDonald, Matthew; Szpuszta, Mario – ASP.NET 3.5 a C# 2008, Zoner Press 2008
• Watson, Ben – C# 4.0 – řešení praktických programátorských úloh, Zoner Press 2010
• Macháček, Jan; Vukotic, Alexa; Chakraborty, Anirvan; Ditt Jessica – Pro Spring 3, Apress
2009
• Microsoft – Vytváříme zabezpečené aplikace v Microsoft ASP.NET,
CP Books (Computer Press) 2004
• Taylor, Art; Buege Brian; Layman Randy – Hacking bez tajemství: Java a J2EE,
Computer Press 2003
• Huseby, Sverre H. – Zranitelný kód, Computer Press 2006

31

Souhrn

 Vývojové technologie
 Internet, doporučená literatura

TNPW2-2013-02

More Related Content

What's hot

Similar to TNPW2-2013-02

More from Lukáš Vacek

TNPW2-2013-02