{"id":81,"date":"2015-10-01T18:09:45","date_gmt":"2015-10-01T16:09:45","guid":{"rendered":""},"modified":"2018-09-17T21:52:42","modified_gmt":"2018-09-17T19:52:42","slug":"javascript-pre-velke-projekty-alebo-javascript-design-patterns","status":"publish","type":"post","link":"https:\/\/spireng.sk\/en\/javascript-pre-velke-projekty-alebo-javascript-design-patterns\/","title":{"rendered":"JavaScript pre ve\u013ek\u00e9 projekty alebo JavaScript Design Patterns"},"content":{"rendered":"

\"Obr\u00e1zok\"Ak by mi niekto pred nieko\u013ek\u00fdmi rokmi povedal, \u017ee pr\u00edde \u010das, kedy sa budem zam\u00fd\u0161\u013ea\u0165 nad navrhov\u00fdmi vzormi v JavaScripte (JS), tak by som mu asi ve\u013emi neveril. Odvtedy som ale pre\u0161iel cez nieko\u013eko projektov, ktor\u00e9 JS pou\u017e\u00edvaj\u00fa (na front-end ale aj na back-ende s Node.js) a minim\u00e1lne jeden z nich je nato\u013eko rozsiahly, \u017ee bez \u0161truk\u00fary a poriadn\u00e9ho n\u00e1vrhu by pripom\u00ednal povestn\u00fd Big ball of mud<\/a>. Aj preto, akon\u00e1hle sa mi dostala do r\u00fak kniha Mastering JavaScript Design Patterns<\/a> od Simona Timmsa, vedel som, \u017ee to mus\u00edm pre\u010d\u00edta\u0165. Po\u010fme sa teda na to pozrie\u0165 bli\u017e\u0161ie.<\/p>\n

Tak v prvom rade v\u00e1s mo\u017eno napadne: JS a n\u00e1vrhov\u00e9 vzory? Ak si vezmete ako napr\u00edklad C++, Java, C#, to v\u0161etko s\u00fa jazyky, ktor\u00e9 maj\u00fa zap\u00fazdrenie, dedenie a mnoh\u00e9 in\u00e9 z\u00e1kladn\u00e9 mechanizmy, ktor\u00e9 v\u00e1m umo\u017enia budova\u0165 komplikovanej\u0161ie \u0161trukt\u00fary (tak ako pomocou teh\u00e1l a bet\u00f3nu viete vybudova\u0165 dom). Ale JS? Slabotypov\u00fd jazyk bez zapuzdrenia, bez rozhran\u00ed a len prototypov\u00e1 dedi\u010dnos\u0165, ktorej rozumie len zop\u00e1r \u013eud\u00ed a pou\u017e\u00edva e\u0161te menej. Tak ak\u00e9 vzory?<\/p>\n

No, kde je v\u00f4\u013ea, tam je cesta. A v\u00f4\u013ea je. V podstate to rozbehli SPA (Single Page Application) a napomohol tomu aj napr\u00edklad tak\u00fd Node.JS. To v\u0161etko so sebou prinieslo ve\u013ek\u00e9 aplik\u00e1cie v JS. A ve\u013eke aplik\u00e1cie znamenaj\u00fa ve\u013ek\u00fa v\u00f4\u013eu \u0161trukt\u00farova\u0165 k\u00f3d (aspo\u0148 tak by mal veli\u0165 pud sebaz\u00e1chovy ka\u017ed\u00e9ho v\u00fdvoj\u00e1ra). Aj preto v ECMAScript 6 prich\u00e1dzaj\u00fa k\u013e\u00fa\u010dov\u00e9 slova class<\/em> a module<\/em>, ktor\u00e9 plnia \u00falohu definovania triedy alebo modulu <\/span>(ECMAScript je \u0161pecifik\u00e1cia JS, pod\u013ea ktorej by ho prehliada\u010de mali implementova\u0165 a verzia 6 je najbli\u017eia, ktor\u00e1 by mala <\/span>by\u0165 <\/span>zaveden<\/span>\u00e1<\/span> do praxe, na \u010do sa u\u017e ver\u00edm te\u0161\u00edte so mnou)<\/span>. Na teraz je mo\u017en\u00e9 si pom\u00f4c\u0165 len t\u00fdm, \u010do JS pon\u00faka <\/span>dnes<\/span>.<\/span><\/p>\n

Aj Simonova kniha na \u00favod najprv vysvet\u013euje pre\u010do <\/span>JS<\/span> (kde sa pou\u017e\u00edva a v \u010dom je dobr\u00fd), pre\u010do n\u00e1vrhov\u00e9 vzory a pre\u010do n\u00e1vrhov\u00e9 vzory v <\/span>JS<\/span>. <\/span>A tie\u017e, \u017ee to nie je jednoduch\u00e9 bez potrebnej podpory od jazyka. Ale uv\u00e1dza pr\u00edklad ako sa s t\u00fdm aspo\u0148 \u010diasto\u010dne vysporiada\u0165 (vytvori\u0165 si nie\u010do ako objekt so zap\u00fazdren\u00edm). Potom <\/span>a<\/span>\u017e nasleduj\u00fa kapitoly s n\u00e1vrhov\u00fdmi vzormi.<\/span><\/p>\n

Ako prv\u00e1 je klasika \u2013 vzory od GOF (Ganf of Four). S\u00e1m autor knihy prip\u00fa\u0161\u0165a, \u017ee nie \u00faplne v\u0161etky maj\u00fa ve\u013ek\u00fd zmysel v JS, ale poctivo v\u0161etky preberie a ku ka\u017ed\u00e9mu pribal\u00ed \u00fak\u00e1\u017eku implement\u00e1ci<\/span>e<\/span>. Nasleduje kapitola s Model View vz<\/span>o<\/span>rmi. Tu je op\u00e4\u0165 nejak\u00fd pekn\u00fd teoretick\u00fd \u00favod aj s hist\u00f3riou tejto rodiny vzorov (MVC, MVP, MVVM \u2026). A nasleduj\u00fa pr\u00edklady. Treba poveda\u0165, \u017ee na jednej strane je ve\u013emi pravdepodobn<\/span>\u00e9<\/span>, \u017ee s t\u00fdmito vzormi pr\u00eddete do kontaktu pri v\u00fdvoji JS front-endu. Ale na druhej strane je m\u00e1lo pravdepodobn\u00e9, \u017ee ich budete implementova\u0165 \u2013 teda pripravova\u0165 infra\u0161trukt\u00faru a pravidl\u00e1, na z\u00e1klade ktor\u00fdch by vzor mal v aplik\u00e1cii fungova\u0165. Sk\u00f4r u\u017e len pou\u017e\u00edva\u0165 a implementova\u0165 k\u00f3d do pripravenej infra\u0161trukt\u00fary. <\/span>Je to preto, lebo programova\u0165 MVC vzor od z\u00e1kladu pre JS front-end je tak trochu varenie teplej vody. U\u017e teraz to za v\u00e1s rie\u0161i AngularJS, EmberJS alebo BackboneJS a mnoho in\u00fdch. Ale aj pr\u00e1ve preto je dobr\u00e9 t\u00fato kapitolu prejs\u0165 a MVC (v kontexte JS) pochopi\u0165.<\/span><\/p>\n

N<\/span>asleduj\u00faca kapitola m\u00e1 n\u00e1zov Web patterns a pojedn<\/span>\u00e1<\/span>va o vzor<\/span>o<\/span>ch, ktor\u00e9 priamo s\u00favisia s v\u00fdvojom webu. Napr\u00edklad Promise alebo Circuit breaker vzor. Ale ide aj <\/span>do <\/span>exotickej\u0161\u00edch oblast\u00ed (z poh\u013eadu vzorov) a hovor\u00ed o sp\u00e1jan\u00ed a minifik\u00e1cii JS s\u00faborov alebo o multithreadingu v JS prostred\u00ed. Nasleduj\u00fa Messaging vzory a klasiky ako Requ<\/span>e<\/span>st-reply alebo Publish-subscribe. To v\u0161etko op\u00e4\u0165 v prostred\u00ed JS. \u010eal\u0161ia kapitola m\u00e1 n\u00e1zov Patterns for Testing a ako jej n\u00e1zov napoved\u00e1, hovor\u00ed o tom, ako p\u00edsa\u0165 testy, ale tie\u017e o tom, ako p\u00edsa\u0165 k\u00f3d, aby sa \u013eahko testoval. Posledn\u00e1 kapitola so vz<\/span>o<\/span>rmi je venovan\u00e1 <\/span>okrajov\u00fdm<\/span> t\u00e9mam ako napr\u00edklad makr\u00e1m alebo aspektovo orientovan\u00e9mu programovani<\/span>u<\/span> (Uf! \u2026 <\/span>aspektovo orientovan\u00e9 programov<\/span>a<\/span>ni<\/span>e<\/span>v <\/span>JS<\/span>? No, pre\u010do nie…).<\/span><\/p>\n

Z\u00e1verom m\u00f4\u017eem poveda\u0165, \u017ee ak sa p\u00fa\u0161\u0165ate do projektu, ktor\u00fd pou\u017e\u00edva JS vo ve\u013ekom, tak by ste si t\u00fato knihu mali niekde z\u00edska\u0165 a pre\u010d\u00edta\u0165. <\/span>JS<\/span> sa toti\u017e \u010dasto k \u010dloveku dost\u00e1va ako skriptovac\u00ed jazyk, ktor\u00fd sl\u00fa\u017ei na r\u00f4zne vylep\u0161enia klienta a m\u00e1lokedy sa v takomto kontexte o \u0148om hovor\u00ed ako o jazyku n\u00e1vrhov\u00fdch vzorov. Aj preto sa m\u00f4\u017ee jedn\u00e9ho d\u0148a sta\u0165, \u017ee dostanete zadanie vybudova\u0165 v\u00e4\u010d\u0161iu JS aplik\u00e1ciu a vy <\/span>sa <\/span>prekvapene zamysl\u00edte, \u010di je nie\u010do tak\u00e9 mo\u017en\u00e9. A odpove\u010f je, \u017ee je mo\u017en\u00e9 to je, len treba ma\u0165 dostato\u010dne roz\u0161\u00edren\u00e9 obzory.<\/span><\/p>","protected":false},"excerpt":{"rendered":"

Ak by mi niekto pred nieko\u013ek\u00fdmi rokmi povedal, \u017ee pr\u00edde \u010das, kedy sa budem zam\u00fd\u0161\u013ea\u0165 nad navrhov\u00fdmi vzormi v JavaScripte (JS), tak by som mu asi ve\u013emi neveril. Odvtedy som ale pre\u0161iel cez nieko\u013eko projektov, ktor\u00e9 JS pou\u017e\u00edvaj\u00fa (na front-end ale aj na back-ende s Node.js) a minim\u00e1lne jeden z nich je nato\u013eko rozsiahly, \u017ee […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-81","post","type-post","status-publish","format-standard","hentry","category-vyvoj-softveru"],"_links":{"self":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/81\/revisions\/152"}],"wp:attachment":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}