{"id":36689,"date":"2019-10-31T22:13:11","date_gmt":"2019-10-31T19:13:11","guid":{"rendered":"https:\/\/prohoster.info\/blog\/krasota-v-glazah-smotryashhego\/"},"modified":"2019-10-31T22:13:11","modified_gmt":"2019-10-31T19:13:11","slug":"krasota-v-glazah-smotryashhego","status":"publish","type":"post","link":"https:\/\/prohoster.info\/cs\/blog\/news\/krasota-v-glazah-smotryashhego","title":{"rendered":"Kr\u00e1sa je v o\u010d\u00edch pozorovatele","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ji\u017e dlouho se v\u011bnuji v\u00fdvoji webov\u00fdch aplikac\u00ed. Opravdu dlouho. Sv\u00e1 prvn\u00ed webov\u00e1 aplikace jsem vytv\u00e1\u0159el v prost\u0159ed\u00ed Lotus Domino<\/a><\/noindex> v dob\u00e1ch, kdy slovo \u201egoogle\u201c<\/em> je\u0161t\u011b nebylo slovesem a lid\u00e9 k vyhled\u00e1v\u00e1n\u00ed informac\u00ed na internetu pou\u017e\u00edvali Yahoo! a Rambler. J\u00e1 jsem pou\u017e\u00edval Infoseek<\/a><\/noindex>by m\u011bl \u2014 m\u011bli \u00fazk\u00e9 vyhled\u00e1v\u00e1n\u00ed a ne tak p\u0159epln\u011bn\u00e9 rozhran\u00ed jako Yahoo!<\/p>\n

<\/p>\n

V\u00fdvoj aplikac\u00ed, jak\u00fdchkoli aplikac\u00ed, nejen pro web \u2014 je kreativn\u00ed pr\u00e1ce. T\u011b\u017eko by se n\u011bkdo mohl dohadovat o pravdivosti tohoto tvrzen\u00ed. Kr\u00e1sa v tvorb\u011b je jako praxe v scientific knowledge \u2014 krit\u00e9rium pravdy. Ale zat\u00edmco v\u011bdeck\u00e1 praxe je objektivn\u00ed a zakl\u00e1d\u00e1 se na m\u011b\u0159en\u00edch, kr\u00e1sa je subjektivn\u00ed z\u00e1le\u017eitost\u00ed, z\u00e1vis\u00ed na tom, kdo se d\u00edv\u00e1. Tak jsem si polo\u017eil ot\u00e1zku, co pro m\u011b osobn\u011b p\u0159edstavuje kr\u00e1sn\u00e1 webov\u00e1 aplikace? <\/p>\n

\n\"Kr\u00e1sa<\/p>\n

(na KDPV m\u016fj pohled, pohled \u017eensk\u00fd, ale, IMHO, \u017eensk\u00fd pohled na KDPV je na m\u00edst\u011b v\u00edce ne\u017e mu\u017esk\u00fd, v\u017edy\u0165 to je \u2014 KDPV<\/a><\/noindex>!)<\/em><\/p>\n

<\/p>\n

Pod t\u00edmto \u010dl\u00e1nkem jsou moje vlastn\u00ed krit\u00e9ria toho, jak\u00e1 webov\u00e1 aplikace m\u016f\u017ee b\u00fdt pova\u017eov\u00e1na za kr\u00e1snou. Velmi subjektivn\u00ed vyj\u00e1d\u0159en\u00ed, ovlivn\u011bn\u00e9 m\u00fdmi osobn\u00edmi zku\u0161enostmi. Mo\u017en\u00e1 se n\u011bkomu moje krit\u00e9ria kr\u00e1sy budou zd\u00e1t krit\u00e9rii o\u0161klivosti. Nezlobte se, m\u00e1te jinou zku\u0161enost.<\/p>\n

<\/a><\/noindex><\/p>\n

A kdy\u017e u\u017e jste p\u0159e\u0161li pod \u010dl\u00e1nek, pros\u00edm, bu\u010fte opatrn\u00ed v koment\u00e1\u0159\u00edch. Koneckonc\u016f, pokud m\u016f\u017eete p\u0159estat \u010d\u00edst \u010dl\u00e1nek hned, jakmile v\u00e1m p\u0159ipad\u00e1, \u017ee je to kr\u00e1sn\u00e9 nebo dokonce o\u0161kliv\u00e9, j\u00e1 jako autor mus\u00edm \u010d\u00edst v\u0161echny koment\u00e1\u0159e.<\/p>\n

<\/p>\n

\u017divotn\u00ed prost\u0159ed\u00ed<\/h1>\n

<\/p>\n

Protokoly<\/h3>\n

<\/p>\n

Ani nev\u00edm, zda m\u00e1 smysl toto krit\u00e9rium zmi\u0148ovat zvl\u00e1\u0161\u0165. Webov\u00e9 aplikace \u017eij\u00ed v s\u00edti a mus\u00ed odpov\u00eddat Z\u00e1kon\u016fm s\u00edt\u011b (protokol\u016fm). Hlavn\u00ed protokoly v s\u00edti jsou TCP<\/a><\/noindex> a IP<\/a><\/noindex>. Na nich jsou zalo\u017eena mnoh\u00e1 dal\u0161\u00ed protokoly, ale pro webov\u00e9 aplikace pova\u017euji za nejd\u016fle\u017eit\u011bj\u0161\u00ed HTTP<\/a><\/noindex> (\u010dili jeho roz\u0161\u00ed\u0159en\u00ed HTTPS<\/a><\/noindex> na b\u00e1zi TLS<\/a><\/noindex>). Tedy, kr\u00e1sn\u00e1 webov\u00e1 aplikace je p\u0159\u00edstupn\u00e1 prost\u0159ednictv\u00edm HTTPS\/TLS (p\u0159\u00edpadn\u011b \u2014 prost\u0159ednictv\u00edm HTTP), a ostatn\u00ed protokoly (LDAP, RPC, IMAP4, POP3, SMTP, FTP, NNTP, \u2026) ji \u010din\u00ed m\u00e9n\u011b kr\u00e1snou s ka\u017ed\u00fdm dal\u0161\u00edm podporovan\u00fdm protokolem. Aplikace sama m\u016f\u017ee s pomoc\u00ed t\u011bchto dal\u0161\u00edch protokol\u016f vyu\u017e\u00edvat extern\u00ed zdroje. <\/p>\n

<\/p>\n

Co se t\u00fd\u010de WebSocket<\/a><\/noindex>, ale nem\u00e1m dostatek zku\u0161enost\u00ed s t\u00edmto protokolem v souvislosti s webov\u00fdmi aplikacemi. Vypad\u00e1 to kr\u00e1sn\u011b a perspektivn\u011b, ale jak stabiln\u00ed a praktick\u00e9 to je \u2014 nedok\u00e1\u017eu \u0159\u00edci. <\/p>\n

<\/p>\n

Prohl\u00ed\u017ee\u010de<\/h3>\n

<\/p>\n

Webov\u00e1 aplikace stoj\u00ed pouze jednou nohou na serverov\u00e9 stran\u011b, druhou \u2014 na stran\u011b klienta. Klientsk\u00e1 strana je prohl\u00ed\u017ee\u010d. Modern\u00ed prohl\u00ed\u017ee\u010d poskytuje mnoho v\u011bc\u00ed<\/a><\/noindex>, kter\u00e9 modern\u00ed webov\u00e1 aplikace m\u016f\u017ee a m\u011bla by vyu\u017e\u00edt ve sv\u016fj prosp\u011bch. Hezk\u00e1 webov\u00e1 aplikace vyu\u017e\u00edv\u00e1 modern\u00ed mo\u017enosti prohl\u00ed\u017ee\u010d\u016f a nemus\u00ed fungovat v t\u011bch prohl\u00ed\u017ee\u010d\u00edch, kter\u00e9 modern\u00ed mo\u017enosti nenab\u00edzej\u00ed. Rozum\u00edm, \u017ee polyfily<\/a><\/noindex> \u2014 to je nevyhnuteln\u00e1 opat\u0159en\u00ed, ale je to neestetick\u00e9. Konec konc\u016f, nejen v\u00fdvoj\u00e1\u0159i by m\u011bli st\u00edhat modern\u00ed technologie, ale t\u00fdk\u00e1 se to tak\u00e9 u\u017eivatel\u016f a podnik\u00e1n\u00ed.<\/p>\n

<\/p>\n

Jazykov\u00e9 programov\u00e1n\u00ed<\/h3>\n

<\/p>\n

S programovac\u00edmi jazyky, kter\u00e9 se pou\u017e\u00edvaj\u00ed k vytv\u00e1\u0159en\u00ed webov\u00fdch aplikac\u00ed, je to velmi zamotan\u00e9. Pro klientskou \u010d\u00e1st webov\u00fdch aplikac\u00ed existuje spousta technologi\u00ed, kter\u00e9 usnad\u0148uj\u00ed v\u00fdvoj\u00e1\u0159i vytvo\u0159en\u00ed tri\u00e1dy HTML\/CSS\/JS (to, co rozum\u00ed v\u0161echny modern\u00ed prohl\u00ed\u017ee\u010de). Ale v t\u00e9 dob\u011b jsem se bl\u00edzce setkal s GWT<\/a><\/noindex> a pova\u017euji za hezk\u00e9, kdy\u017e v\u00fdvoj\u00e1\u0159 vid\u00ed v prohl\u00ed\u017ee\u010di p\u016fvodn\u00ed k\u00f3d, a ne v\u00fdsledek kompilace nebo transpila\u010dn\u00edho procesu. Proto pou\u017e\u00edv\u00e1n\u00ed webpacku<\/a><\/noindex>a podobn\u00e9 produkty pro generov\u00e1n\u00ed klientsk\u00e9ho k\u00f3du, IMHO, nejsou hezk\u00e9. \u010c\u00edm v\u00edce k\u00f3d vykon\u00e1van\u00fd v prohl\u00ed\u017ee\u010di vypad\u00e1 jako zdrojov\u00fd k\u00f3d vytvo\u0159en\u00fd program\u00e1torem, t\u00edm l\u00e9pe. Nev\u011b\u0159\u00edte? Zkuste debuggovat v productionu k\u00f3d vytvo\u0159en\u00fd GWT.<\/p>\n

<\/p>\n

Na stran\u011b serveru je svoboda v\u011bt\u0161\u00ed (Java, PHP, Perl, Python, C#, Ruby, \u2026), ale p\u0159ipad\u00e1 mi kr\u00e1sn\u00e9, kdy\u017e je na stran\u011b serveru i v prohl\u00ed\u017ee\u010di pou\u017eit jeden programovac\u00ed jazyk \u2014 JavaScript. Nakonec jazyk ur\u010duje my\u0161len\u00ed<\/a><\/noindex>, a t\u00fdmy souv\u011brc\u016f jsou produktivn\u011bj\u0161\u00ed.<\/p>\n

<\/p>\n

Humanita<\/h1>\n

<\/p>\n

Hezk\u00e1 webov\u00e1 aplikace mus\u00ed b\u00fdt u\u017eite\u010dn\u00e1. U\u017eite\u010dn\u00e1, p\u0159edev\u0161\u00edm pro \u010dlov\u011bka jako koncov\u00e9ho u\u017eivatele. Proto nemohu pova\u017eovat za hezkou webovou aplikaci webov\u00e9 slu\u017eby<\/a><\/noindex>. Oby\u010dejn\u00e9mu \u010dlov\u011bku (ne webov\u00e9mu v\u00fdvoj\u00e1\u0159i) se s nimi obt\u00ed\u017en\u011b pracuje. Webov\u00e9 slu\u017eby jsou hezk\u00e9 sv\u00fdm zp\u016fsobem,<\/p>\n

<\/p>\n

Hezk\u00e1 webov\u00e1 aplikace by m\u011bla m\u00edt intuitivn\u00ed rozhran\u00ed. O tom se d\u00e1 diskutovat, \u017ee UI<\/a><\/noindex>je to celkem subjektivn\u00ed z\u00e1le\u017eitost. Ale s UX<\/a><\/noindex> je to mnohem jednodu\u0161\u0161\u00ed, pokud u\u017eivatel nem\u016f\u017ee pou\u017e\u00edvat aplikaci bez vz\u00e1cn\u00e9ho RTFM<\/a><\/noindex> \u2014 \u0161patn\u00e9 UX, nevzhledn\u00e1 webov\u00e1 aplikace. Nejkr\u00e1sn\u011bj\u0161\u00ed webov\u00e9 aplikace podle tohoto krit\u00e9ria mohou b\u00fdt snadno pou\u017e\u00edv\u00e1ny d\u011btmi, kter\u00e9 je\u0161t\u011b neum\u00ed \u010d\u00edst. <\/p>\n

<\/p>\n

Zp\u011btn\u00e1 \u0161k\u00e1lovatelnost<\/h1>\n

<\/p>\n

Davn\u00e9ho \u010dasu bylo mo\u017en\u00e9 p\u0159en\u00e1\u0161et programy na disket\u00e1ch, nyn\u00ed \u2014 na flashk\u00e1ch nebo st\u00e1hnout p\u0159\u00edmo z internetu. Zkop\u00edrovat b\u011b\u017enou aplikaci a spustit ji na jin\u00e9m po\u010d\u00edta\u010di \u2014 to je trivi\u00e1ln\u00ed \u00fakol. U webov\u00fdch aplikac\u00ed je situace pon\u011bkud zvl\u00e1\u0161tn\u00ed. S\u00ed\u0165 p\u0159edstavuje glob\u00e1ln\u00ed prost\u0159ed\u00ed, kde nen\u00ed pot\u0159eba m\u00edt klony stejn\u00e9 webov\u00e9 aplikace. V s\u00edti sta\u010d\u00ed jeden Facebook, Twitter, Instagram, Mail.ru nebo Yandex. Mohou existovat r\u016fzn\u00e9 webov\u00e9 aplikace ve stejn\u00e9 tematick\u00e9 oblasti, ale s r\u016fzn\u00fdmi publikem (jako Facebook a Vkontakte, Mail.ru a Gmail, Google Maps a Azure Maps). Hardwarov\u00e9 zdroje pro zaji\u0161t\u011bn\u00ed glob\u00e1ln\u00ed dostupnosti t\u011bchto webov\u00fdch aplikac\u00ed jsou pot\u0159eba, \u0159ekn\u011bme takto, netrivi\u00e1ln\u00ed<\/a><\/noindex>.<\/p>\n

<\/p>\n

Nikdy jsem nepracoval s webov\u00fdmi aplikacemi takov\u00e9 \u00farovn\u011b jako v\u00fdvoj\u00e1\u0159 a nedok\u00e1\u017eu si p\u0159edstavit, jak to tam uvnit\u0159 funguje. Pro zaji\u0161t\u011bn\u00ed funk\u010dnosti takov\u00fdch webov\u00fdch aplikac\u00ed jsou pot\u0159eba t\u00fdmy odpov\u00eddaj\u00edc\u00edch specialist\u016f a samostatn\u00e1 datov\u00e1 centra. Obdivuji schopnost lid\u00ed kooperovat v tak rozs\u00e1hl\u00fdch m\u011b\u0159\u00edtk\u00e1ch a vytv\u00e1\u0159et podobn\u00e9 produkty, ale m\u00fdm etalonem kr\u00e1sy je webov\u00e1 aplikace, kterou lze spustit na samostatn\u00e9m notebooku.<\/p>\n

<\/p>\n

Kr\u00e1sn\u00e1 webov\u00e1 aplikace se \u0161k\u00e1luje nejen nahoru a do \u0161\u00ed\u0159ky (pro u\u017eivatele), ale tak\u00e9 dol\u016f a dovnit\u0159 (pro v\u00fdvoj\u00e1\u0159e).<\/p>\n

<\/p>\n

\u201eAmfibie\u201c<\/h1>\n

<\/p>\n

Pro p\u0159\u00edstup k modern\u00edm webov\u00fdm aplikac\u00edm se pou\u017e\u00edvaj\u00ed za\u0159\u00edzen\u00ed dvou typ\u016f:<\/p>\n

<\/p>\n