{"id":270114,"date":"2015-12-11T12:05:03","date_gmt":"2015-12-11T09:05:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=270114"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=270114","title":{"rendered":"Haskell \u0434\u043b\u044f \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435, JavaScript \u0438 ReactJS, \u0418\u043b\u0438 \u00ab\u0427\u0443\u0436\u043e\u0439 \u043f\u0440\u043e\u0442\u0438\u0432 \u0421\u0438\u043c\u043f\u0441\u043e\u043d\u043e\u0432\u00bb"},"content":{"rendered":"<p>       \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u043e\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u0430\u043f\u0435\u043b\u044c \u0442\u043e\u043f\u043b\u0438\u0432\u0430 \u0432 \u043c\u0430\u0448\u0438\u043d\u0443 \u043f\u0440\u043e\u043f\u0430\u0433\u0430\u043d\u0434\u044b Haskell, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/df7\/848\/e7c\/df7848e7c9644d148d09b4d743d0a838.png\"\/><\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li> \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0430\u043a\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a <a href=\"https:\/\/vk.com\/dev\">API \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/a>.<br \/>  \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u00abnative\u00bb \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 JavaScript \u0447\u0435\u0440\u0435\u0437 GHCJS, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Haskell \u0432 JavaScript  <\/li>\n<li> \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u0430\u0448\u0435 API  <\/li>\n<\/ul>\n<p><a name=\"habracut\"><\/a><br \/>  \u041f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0441\u0438\u0442 \u0441\u0443\u0433\u0443\u0431\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0432 \u0441\u0442\u0438\u043b\u0435 \u00ab\u0430\u043a\u044b\u043d\u00bb (\u0447\u0442\u043e \u0432\u0438\u0436\u0443, \u0442\u043e \u043f\u043e\u044e).<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<h2>API \u0412\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/h2>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0430\u043a\u0435\u0442\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0437\u0434\u0435\u0441\u044c <a href=\"https:\/\/github.com\/eryx67\/vk-api.git\">vk-api<\/a>.<\/p>\n<p>  \u0422\u0438\u043f\u0438\u0447\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u0430\u043c\u0438 API \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"haskell\">appId :: Int appId = 123456  main :: IO () main =   execVKAPI () (createSettings appId &quot;myname&quot; &quot;mypass&quot; (Just [Audio])) $ do     -- \u0438\u0449\u0435\u043c \u0430\u0443\u0434\u0438\u043e \u0412\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435     (AR (Items (sar:_) _)) &lt;- toAPI $ def{searchQ = &quot;ABBA&quot;                                           , searchCount = Just 2                                           , searchLyrics = Just 1                                          }     -- \u0418\u0449\u0435\u043c \u0430\u0443\u0434\u0438\u043e \u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f     (AR (gar:_)) &lt;- toAPI $ GetById [(audioOwnerId sar, audioId sar)]     -- \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0441\u0432\u043e\u044e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e     (AR aid) &lt;- toAPI $ Add (audioId gar) (audioOwnerId gar) Nothing     Just uid &lt;- liftState $ gets getUserId     -- \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c     toAPI $ def{editOwnerId = UserId uid                 , editAudioId = aid                 , editTitle = Just &quot;My Added Record&quot;                }     return () <\/code><\/pre>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"https:\/\/vk.com\/dev\">API \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/a> \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/eryx67\/api-builder.git\">api-builder<\/a>.<\/p>\n<p>  \u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 <acronym>ADT<\/acronym>. \u041e\u0442\u0432\u0435\u0442\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 JSON.<\/p>\n<h3>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 API<\/h3>\n<p>  \u041d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0442\u0438\u043f\u043e\u0432 \u0441\u0432\u044f\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441 <b>Routable<\/b><\/p>\n<pre><code class=\"haskell\">class (Queryable q, Receivable a) =&gt; Routable q a | q -&gt; a where   toRoute :: q -&gt; Route   toAPI :: (MonadIO m, ErrorReceivable e) =&gt; q -&gt; APIT s e m a   toAPI = runRoute . toRoute <\/code><\/pre>\n<p>  \u0414\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044f <a href=\"https:\/\/wiki.haskell.org\/Functional_dependencies\">\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c<\/a> <b>q -&gt; a<\/b>, \u043c\u044b \u043a\u043b\u044f\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u0435\u0449\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443, \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0442\u0438\u043f\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e.<\/p>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 API \u0431\u0443\u0434\u0435\u0442 \u0435\u043c\u043a\u043e\u0435 \u0438 \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f <a href=\"https:\/\/vk.com\/dev\/audio.getLyrics\">audio.getLyrics<\/a><\/p>\n<pre><code class=\"haskell\">-- audio.getLyrics \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0430\u0443\u0434\u0438\u043e\u0437\u0430\u043f\u0438\u0441\u0438 instance Routable GetLyrics (ActionResponse Lyrics) where   toRoute q = Route [&quot;audio.getLyrics&quot;] (toURLParams q) &quot;GET&quot; <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h3>\n<p>  \u0422\u0438\u043f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 <b>Queryable<\/b> \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a url-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/p>\n<pre><code class=\"haskell\">class Queryable a where   toURLParams :: a -&gt; [URLParam] <\/code><\/pre>\n<p>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <b>Queryable<\/b> \u2014 \u0434\u0435\u043b\u043e \u043b\u0435\u0433\u043a\u043e\u0435, \u043d\u043e \u043d\u0443\u0434\u043d\u043e\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u043a\u0440\u043e\u0441<br \/>  <a href=\"https:\/\/wiki.haskell.org\/Template_Haskell\">Template Haskell<\/a>, \u043f\u0443\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0442\u0440\u0443\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043d\u0430\u0441, \u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0443\u0441\u0438\u043b\u0438\u0439 \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<pre><code class=\"haskell\">data GetLyrics = GetLyrics {getlyricsLyricsId :: !Int}                deriving Show  $(deriveQueryable' (standard . dropLPrefix) ''GetLyrics) <\/code><\/pre>\n<p>  Haskell \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043c\u0430\u043a\u0440\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 Lisp, \u043d\u043e \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0442\u043e\u0440. \u041f\u043e\u043f\u0440\u043e\u0441\u0438\u043c \u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c <acronym>AST<\/acronym> \u0434\u043b\u044f \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"haskell\"> runQ [d| instance Queryable Lyrics where   toURLParams r = [(&quot;lyrics_id&quot; =. lyricsLyricsId r), (&quot;text&quot; =. lyricsText r)] |] <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">AST<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">[InstanceD [] (AppT (ConT Queryable) (ConT Lyrics))   [FunD toURLParams      [Clause [VarP r_2]         (NormalB            (ListE [InfixE (Just (LitE (StringL &quot;lyrics_id&quot;)))                           (VarE =.)                           (Just (AppE (VarE lyricsLyricsId) (VarE r_2))),                    InfixE (Just (LitE (StringL &quot;text&quot;)))                           (VarE =.)                           (Just (AppE (VarE lyricsText) (VarE r_2)))]))  []]]] <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0438\u043c\u0435\u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e AST \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 <a href=\"http:\/\/hackage.haskell.org\/package\/template-haskell-2.10.0.0\/docs\/Language-Haskell-TH.html\">Language.Haskell.TH<\/a> \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043c\u0430\u043a\u0440\u043e\u0441 <b>deriveQueryable<\/b>.<\/p>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u0438 Haskell \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u043e \u043c\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u043f\u0438\u0441\u0430\u0432 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"http:\/\/hackage.haskell.org\/package\/data-default-generics\">Default<\/a>.<\/p>\n<p>  \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0437\u0430\u043f\u0438\u0441\u0438.<\/p>\n<pre><code class=\"haskell\">instance Default Save where   def = Save 0 &quot;&quot; &quot;&quot; Nothing Nothing <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u043e\u0432<\/h3>\n<p>  \u0421\u0432\u044f\u0437\u044c JSON \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0441 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438 ADT \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430<br \/>  <a href=\"http:\/\/hackage.haskell.org\/package\/api-builder-0.11.0.0\/docs\/Network-API-Builder-Receive.html\">Receivable<\/a>.<\/p>\n<p>  \u0421 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f JSON \u0432 \u0437\u0430\u043f\u0438\u0441\u0438 ADT \u043b\u0435\u0433\u043a\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"http:\/\/hackage.haskell.org\/package\/aeson\">aeson<\/a>.<\/p>\n<pre><code class=\"haskell\">data Lyrics = Lyrics {   lyricsLyricsId :: Int   , lyricsText   :: T.Text   }             deriving (Show, Generic)  instance FromJSON Lyrics where   parseJSON = genericParseJSON $ aesonPrefix snakeCase  instance Receivable Lyrics where   receive = useFromJSON <\/code><\/pre>\n<p>  <a name=\"maybe\"><\/a>  <\/p>\n<h3>\u041f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/h3>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 <a href=\"https:\/\/wiki.haskell.org\/Maybe\">Maybe<\/a>,<a href=\"https:\/\/hackage.haskell.org\/package\/base-4.8.1.0\/docs\/Data-Either.html\">Either<\/a> \u0432 \u043c\u043e\u043d\u0430\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u043b\u0438 \u043c\u043e\u043d\u0430\u0434\u043d\u044b\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0435\u0440\u043e\u0432 <a href=\"https:\/\/hackage.haskell.org\/package\/transformers-0.4.3.0\/docs\/Control-Monad-Trans-Maybe.html\">MaybeT<\/a>, <a href=\"https:\/\/hackage.haskell.org\/package\/either-4.4.1\/docs\/Control-Monad-Trans-Either.html\">EitherT<\/a>, <a href=\"https:\/\/hackage.haskell.org\/package\/mtl-2.2.1\/docs\/Control-Monad-Except.html#t:ExceptT\">ExceptT<\/a> \u0438.\u0442.\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u00ab\u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438\u00bb, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a.<\/p>\n<p>  Haskell \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043d\u0435 \u043e\u0434\u0438\u043d\u043e\u043a, \u0442\u0430\u043a <a href=\"https:\/\/developer.apple.com\/library\/mac\/documentation\/Swift\/Conceptual\/Swift_Programming_Language\/OptionalChaining.html\">\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a> \u0432 Swift \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0447\u0435\u043c \u0438\u043d\u044b\u043c, \u043a\u0430\u043a \u043c\u043e\u043d\u0430\u0434\u043e\u0439 <b>Maybe<\/b> \u00ab\u0434\u043b\u044f \u0431\u0435\u0434\u043d\u044b\u0445\u00bb, \u0432\u043f\u0438\u043b\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430.<\/p>\n<p>  \u041f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/hackage.haskell.org\/package\/errors\">errors<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u043d\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439\u00ab\u0432\u0437\u0430\u0434-\u043d\u0430\u0437\u0430\u0434\u00bb \u043c\u0435\u0436\u0434\u0443 \u0447\u043b\u0435\u043d\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0427\u0435\u043c \u043c\u044b \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f, \u0438\u043d\u0430\u0447\u0435 \u043d\u0430\u0448 \u043a\u043e\u0434 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u0431\u044b\u043b \u0431\u044b \u043d\u0435\u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">uploadAudio<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">-- | Upload audio file 'fn' to VKontakte. Register optional 'artist' -- and 'title' for it. uploadAudio :: T.Text -&gt; Maybe T.Text -&gt; Maybe T.Text                -&gt; API s VKError (ActionResponse SavedAudio) uploadAudio fn artist title = do   (AR (UploadServer uploadURL)) &lt;- toAPI GetUploadServer    let msrv = uriToRoute &lt;$&gt; (parseURI $ T.unpack uploadURL)   (srvURL, srvArgs, srvRoute) &lt;- hoistEither $ note (mkError &quot;bad upload url&quot;) msrv   -- \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441, \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0430\u043d \u0432 \u043f\u043e\u0442\u043e\u043a\u0435   let fnPart = partFileSource &quot;file&quot; $ T.unpack fn       parts = Multipart $ (fnPart:srvArgs)   mreq &lt;- sendMultipart (basicBuilder &quot;audioUpload&quot; srvURL) srvRoute parts   req &lt;- hoistEither $ note (mkError &quot;can't construct request&quot;) mreq   -- \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441   manager &lt;- liftManager ask   resp &lt;- liftIO $ try $ httpLbs req manager   res &lt;- hoistEither $ first HTTPError resp   -- \u043f\u0430\u0440\u0441\u0438\u043c \u043e\u0442\u0432\u0435\u0442 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441 'Save' \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b \u0432 \u043d\u0430\u0448 \u0430\u043a\u043a\u0430\u0443\u043d\u0442   save &lt;- hoistEither $ receive res   toAPI save{saveArtist = artist, saveTitle = title} ... <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0441\u0442\u0440\u043e\u043a<\/h3>\n<p>  \u0421\u0440\u0435\u0434\u0441\u0442\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 Haskell \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u0432 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043b\u0443\u0447\u0448\u0435. \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u0432 \u0432 Haskell \u0438\u043c\u0435\u044e\u0442 \u044f\u0440\u043a\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u0432\u043a\u0443\u0441 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0438\u0436\u0435\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043e\u0442\u043b\u043e\u0436\u0438\u043c \u043d\u043e\u0436\u043d\u0438\u0446\u044b \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0430\u0440\u0441\u0435\u0440 \u043d\u0430 <a href=\"https:\/\/wiki.haskell.org\/Parsec\">Parsec<\/a> \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/vk.com\/dev\/privacy_setting\">privacy_setting<\/a> API \u0432 ADT.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ADT \u0438 \u043f\u0430\u0440\u0441\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">data Privacy = AllowAll              | AllowFriends              | AllowFriendsOfFriends              | AllowFriendsOfFriendsOnly              | AllowNobody              | AllowOnlyMe              | AllowList Int              | AllowUser Int              | DenyList Int              | DenyUser Int              deriving Show  instance FromJSON Privacy where   parseJSON =     withText &quot;Privacy&quot; doParse     where       doParse txt =         case parse parser &quot;&quot; txt of         Left _ -&gt; mempty         Right v -&gt; pure v       parser =         try (string &quot;friends_of_friends_only&quot; &gt;&gt; return AllowFriendsOfFriendsOnly)         &lt;|&gt; try (string &quot;friends_of_friends&quot; &gt;&gt; return AllowFriendsOfFriends)         &lt;|&gt; (string &quot;friends&quot; &gt;&gt; return AllowFriends)         &lt;|&gt; (string &quot;nobody&quot; &gt;&gt; return AllowNobody)         &lt;|&gt; (string &quot;only_me&quot; &gt;&gt; return AllowOnlyMe)         &lt;|&gt; (string &quot;list&quot; &gt;&gt; many1 digit &gt;&gt;= return . AllowList . read)         &lt;|&gt; (many1 digit &gt;&gt;= return . AllowUser . read)         &lt;|&gt; (string &quot;all&quot; &gt;&gt; return AllowAll)         &lt;|&gt; (string &quot;-&quot; &gt;&gt;              ((many1 digit &gt;&gt;= return . DenyUser . read)               &lt;|&gt; (string &quot;list&quot; &gt;&gt; many1 digit &gt;&gt;= return . DenyList . read))) <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u043b\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f.<\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 <acronym>BDD<\/acronym> \u043f\u0430\u043a\u0435\u0442 <a href=\"http:\/\/hspec.github.io\/\">HSpec<\/a>.<\/p>\n<p>  HSpec \u0443\u043c\u0435\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0443, \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0422\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 OAuth \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0422\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 OAuth \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">spec :: Spec spec = do   describe &quot;OAuth authorization&quot; $ do     it &quot;doesn't ask for any permissions&quot; $ do       execVKAPI () (vksettings Nothing) getAuthToken         &gt;&gt;= (`shouldSatisfy` checkAuthToken)     it &quot;asks for some permissions&quot; $ do       execVKAPI () (vksettings $ Just [Audio, Video]) getAuthToken         &gt;&gt;= (`shouldSatisfy` checkAuthToken)   where     getAuthToken =       liftState $ gets _vkAuthToken  checkAuthToken :: Either (APIError VKError) (Maybe AuthToken) -&gt; Bool checkAuthToken (Right (Just (AuthToken _ _ _))) = True checkAuthToken _ = False  vksettings :: Maybe [AuthPermissions] -&gt; VKSettings vksettings scope = createSettings appId userName userPass scope <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0430\u043a\u0435\u0442\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0437\u0434\u0435\u0441\u044c <a href=\"https:\/\/github.com\/eryx67\/vk-api-example.git\">vk-api-example<\/a>.<\/p>\n<p>  \u041d\u0430\u0448\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043f\u043b\u0435\u0435\u0440\u0435 \u0430\u0443\u0434\u0438\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0442\u0440\u0435\u043a\u0438, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0430\u0443\u0434\u0438\u043e\u0437\u0430\u043f\u0438\u0441\u0435\u0439.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0434\u043e\u0431\u0435\u043d Haskell \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f JavaScript \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<br \/>  Haskell \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 \u0432 JavaScript \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0435\u043b\u0438\u043a\u043e, \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043e\u0442\u043c\u0435\u0442\u0438\u043c:  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ghcjs\/ghcjs\">GHCJS<\/a> \u2014 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 Haskell<\/li>\n<li><a href=\"https:\/\/github.com\/valderman\/haste-compiler\">Haste<\/a> \u2014 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 Haskell<\/li>\n<li><a href=\"https:\/\/github.com\/faylang\/fay\">Fay<\/a> \u2014 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e Haskell<\/li>\n<li><a href=\"https:\/\/github.com\/purescript\/purescript\">PureScript<\/a> \u2014 Haskell \u0441 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u043e\u0439 JavaScript<\/li>\n<li><a href=\"https:\/\/github.com\/elm-lang\/elm-compiler\">Elm<\/a> \u2014 Haskell \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439, \u043d\u0438\u0448\u0435\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/li>\n<\/ul>\n<p>  \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GHCJS, \u0433\u0434\u0435 \u043d\u0430\u0448 \u043f\u0430\u043a\u0435\u0442 API \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u043f\u0430\u043a\u0435\u0442 <a href=\"http:\/\/hackage.haskell.org\/package\/react-flux\">React-Flux<\/a> \u0431\u0430\u0439\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u043a <a href=\"https:\/\/facebook.github.io\/react\/\">React<\/a>\/<a href=\"https:\/\/facebook.github.io\/flux\/\">Flux<\/a>.<\/p>\n<p>  React-Flux \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 <a href=\"https:\/\/facebook.github.io\/flux\/docs\/overview.html\">Flux<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h3>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 Haskell \u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a JavaScript<\/h3>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432, \u043a\u0440\u043e\u043c\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Haskell.<\/p>\n<h4><acronym>DSL<\/acronym> \u0434\u043b\u044f React, <a href=\"https:\/\/facebook.github.io\/react\/docs\/jsx-in-depth.html\">JSX<\/a> \u043d\u0435 \u043d\u0443\u0436\u0435\u043d<\/h4>\n<p>  \u0412 \u0441\u0438\u043b\u0443 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u043d\u0430\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043b\u0438 \u0430\u043f\u043f\u043b\u0438\u043a\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 Haskell \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0447\u0435\u043c\u043f\u0438\u043e\u043d\u043e\u0432 \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443 DSL \u00ab\u0438\u0437 \u043d\u0438\u043e\u0442\u043a\u0443\u0434\u0430\u00bb.<\/p>\n<p>  \u0421\u0440\u0430\u0432\u043d\u0438\u043c \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 <a href=\"https:\/\/github.com\/eryx67\/vk-api-example\/tree\/master\/src\/VK\/App\/Widgets\/AudioPlayer\">AudioPlayer<\/a>, \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 JavaScript \u043f\u043b\u0435\u0435\u0440\u0430 <a href=\"https:\/\/github.com\/humanhighway\/react-audio-player.git\">react-audio-player<\/a>, \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">JSX<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;div id={audioVolumeBarContainerId} ref=&quot;audioVolumeBarContainer&quot; className=&quot;audio-volume-bar-container&quot;&gt;         &lt;Button id={toggleBtnId} ref=&quot;toggleButton&quot; bsSize=&quot;small&quot; onClick={this.toggle}&gt;                 &lt;Glyphicon glyph={toggleIcon}\/&gt;         &lt;\/Button&gt;         &lt;div className={audioVolumeBarClasses}&gt;                 &lt;div className=&quot;audio-volume-min-max&quot; onClick={this.volumeToMax}&gt;                         &lt;Glyphicon glyph=&quot;volume-up&quot; \/&gt;                 &lt;\/div&gt;                 &lt;div ref=&quot;audioVolumePercentContainer&quot; className=&quot;audio-volume-percent-container&quot; onClick={this.adjustVolumeTo}&gt;                         &lt;div className=&quot;audio-volume-percent&quot; style={style}&gt;&lt;\/div&gt;                 &lt;\/div&gt;                 &lt;div className=&quot;audio-volume-min-max&quot; onClick={this.volumeToMin}&gt;                         &lt;Glyphicon glyph=&quot;volume-off&quot; \/&gt;                 &lt;\/div&gt;         &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Haskell<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">div_ ((&quot;className&quot; $= &quot;audio-volume-bar-container&quot;):mouseLeaveHlr) $ do    bootstrap_ &quot;Button&quot; [&quot;bsSize&quot; $= &quot;small&quot;                        , onClick toggleHlr                        ] $      bootstrap_ &quot;Glyphicon&quot; [&quot;glyph&quot; $= toggleIcon] mempty    div_ [&quot;className&quot; $= classes] $ do      div_ [&quot;className&quot; $= &quot;audio-volume-min-max&quot;           , onClick (\\_ _ -&gt;                       dispatch st (AdjustVolume $ fromFactor (1::Int)))] $        bootstrap_ &quot;Glyphicon&quot; [&quot;glyph&quot; $= &quot;volume-up&quot;] mempty      div_ [&quot;className&quot; $= &quot;audio-volume-percent-container&quot;           , onClick adjustVolumeToHlr] $        div_ [&quot;className&quot; $= &quot;audio-volume-percent&quot;             , &quot;style&quot; @= style] mempty      div_ [&quot;className&quot; $= &quot;audio-volume-min-max&quot;           , onClick (\\_ _ -&gt;                       dispatch st (AdjustVolume $ fromFactor (0::Int)))] $        bootstrap_ &quot;Glyphicon&quot; [&quot;glyph&quot; $= &quot;volume-off&quot;] mempty <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0427\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0430, \u043d\u043e \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0431\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0442\u043e\u0440\u0430, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u044f\u0437\u044b\u043a\u0430, \u0438\u043c\u0435\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0442 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043b\u0435\u0435\u0440\u0430 \u044f \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043b\u043e\u0433\u0438\u043a\u0443, \u0442\u0430\u043a \u0447\u0442\u043e \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044b.<\/p>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u00abcallback hell\u00bb<\/h4>\n<p>  \u041e\u0431\u043e\u0439\u0442\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 <acronym>CPS<\/acronym> \u0441\u0442\u0438\u043b\u0435 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Haskell.<\/p>\n<ul>\n<li>\u0420\u0430\u043d\u0442\u0430\u0439\u043c GHCJS \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u0432\u043d\u0443\u0448\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u0440\u0441\u0435\u043d\u0430\u043b Haskell \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 <a href=\"http:\/\/chimera.labs.oreilly.com\/books\/1230000000929\">\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0445\/\u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/a>. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b <a href=\"https:\/\/hackage.haskell.org\/package\/base-4.8.1.0\/docs\/Control-Concurrent.html\">forkIO<\/a> \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 Haskell \u2014 IORef, MVar, STM \u0438\u0442\u0434  <\/li>\n<li>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u043c\u043e\u043d\u0430\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 <a href=\"https:\/\/en.wikibooks.org\/wiki\/Haskell\/do_notation\">do<\/a> \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0442\u043e\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 CPS-\u0432\u044b\u0437\u043e\u0432\u044b  <\/li>\n<li>\u0423\u043f\u043e\u043c\u0438\u043d\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0440\u0430\u043d\u0435\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b <a href=\"#maybe\">\u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/a> \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u00ab\u043b\u0430\u043f\u0448\u0438\u00bb \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0435 \u0431\u043b\u044e\u0434\u043e.  <\/li>\n<\/ul>\n<p>  \u0421\u043e\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440, AJAX \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0448\u0435\u0433\u043e API \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">runAPI<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">runAPI :: State -&gt; VKAction -&gt; VK.VKAPI ApiState a -&gt; (a -&gt; VKAction) -&gt; IO () runAPI State{..} action apiAction hlr =   void . forkIO $ do     res &lt;- runMaybeT $ do       -- \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043b\u0438 \u043c\u044b?       as &lt;- hoistMaybe apiState       _ &lt;- hoistMaybe $ if VK.isAuthorized as then Just True else Nothing       lift $ do         -- AJAX \u0432 \u0440\u0430\u0431\u043e\u0442\u0435, \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0441\u043f\u0438\u043d\u043d\u0435\u0440         alterStore store (SetAjaxRunning True)         -- \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441         (res, nas) &lt;- VK.runVKAPI as apiAction         alterStore store (SetApiState nas)         -- \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0443\u0431\u0435\u0440\u0435\u043c \u0441\u043f\u0438\u043d\u043d\u0435\u0440         alterStore store (SetAjaxRunning False)         -- \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443         either apiError handleAction res     -- \u043d\u0443\u0436\u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0443\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u043c     when (isNothing res) $       alterStore store (Authorize action)   where     handleAction v = alterStore store (hlr v) <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <acronym>FFI<\/acronym><\/h3>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435, \u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c <a href=\"https:\/\/github.com\/eryx67\/vk-api-example\/blob\/master\/src\/VK\/DOM\/Router.hs\">Router<\/a>.<\/p>\n<p>  <a href=\"https:\/\/facebook.github.io\/flux\/docs\/overview.html#actions\">Actions<\/a> \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0442\u0438\u043f\u043e\u043c ADT <a href=\"https:\/\/github.com\/eryx67\/vk-api-example\/blob\/master\/src\/VK\/App\/Actions.hs\">VKAction<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f URL \u0438\u0437 <b>window.location.hash<\/b> \u0432 ADT \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 <a href=\"http:\/\/hackage.haskell.org\/package\/web-routes\">web-routes<\/a>.<\/p>\n<p>  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u043a\u0440\u043e\u0441 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0430.<\/p>\n<pre><code class=\"haskell\">$(derivePathInfo ''VKAction) <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f Actions \u0432 URL, \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u0438\u043d\u043a\u0430.<\/p>\n<pre><code class=\"haskell\">a_ [&quot;href&quot; $= actionRoute store parentRouter (Audios $ SetAudioSelector asel)] label <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <b>window.location.hash<\/b> \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0432\u0435\u0441\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 <b>window.onhashchange<\/b>. FFI \u0432 GHCJS \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<pre><code class=\"haskell\">foreign import javascript unsafe   &quot;window.onhashchange = function() {$1(location.hash.toString());}&quot;   js_attachtLocationHashCb :: (Callback (JSVal -&gt; IO ())) -&gt; IO ()  onLocationHashChange :: (String -&gt; IO ()) -&gt; IO () onLocationHashChange fn = do   cb &lt;- syncCallback1 ThrowWouldBlock (fn . JSS.unpack . unsafeCoerce)   js_attachtLocationHashCb cb <\/code><\/pre>\n<p>  <\/p>\n<h3>\u041c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <b>React-Flux<\/b> \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, <b>Store<\/b>, \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 <b>Actions<\/b> \u0438 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0434\u0430\u043b\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b.<\/p>\n<p>  \u0422\u0430\u043a \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 <a href=\"https:\/\/github.com\/eryx67\/vk-api-example\/blob\/master\/src\/VK\/App\/Widgets\/IncrementalInput.hs\">IncrementalInput<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440 <a href=\"https:\/\/github.com\/eryx67\/vk-api-example\/blob\/master\/src\/VK\/App\/Widgets\/Internal\/IdleTimer.hs\">IdleTimer<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u043c \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 <b>Store<\/b> \u0438 <b>Actions<\/b> \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u043e\u043f\u044f\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <b>HSpec<\/b> \u0438 <a href=\"http:\/\/www.seleniumhq.org\/projects\/webdriver\/\">Selenium Webdriver<\/a> \u0447\u0435\u0440\u0435\u0437 <a href=\"http:\/\/hackage.haskell.org\/package\/hspec-webdriver\">hspec-webdriver<\/a>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0422\u0435\u0441\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"haskell\">spec :: Spec spec = session &quot;VK application tests&quot; $ using Chrome $ do   it &quot;login to Vkontakte with user credentials&quot; $ runWD $ do     dir &lt;- liftIO getCurrentDirectory     openPage $ &quot;file:\/\/&quot; ++ dir ++ &quot;\/example\/vk.html&quot;     cw &lt;- getCurrentWindow     findElem (ByCSS &quot;div.authorization &gt; div.panel-body &gt; a.btn&quot;) &gt;&gt;= click     liftIO $ threadDelay 3000000     ws &lt;- windows     length ws `shouldBe` 2     let Just vkW = find (\/= cw) ws     focusWindow vkW     findElem (ByName &quot;email&quot;) &gt;&gt;= sendKeys userName     findElem (ByName &quot;pass&quot;) &gt;&gt;= sendKeys userPass     findElem (ByCSS &quot;form input.button&quot;) &gt;&gt;= click     authUrl &lt;- getCurrentURL     closeWindow vkW      focusWindow cw     findElem (ByCSS &quot;input.form-control&quot;) &gt;&gt;= sendKeys (T.pack authUrl)     liftIO $ threadDelay 3000000     findElem (ByCSS &quot;button&quot;) &gt;&gt;= click     liftIO $ threadDelay 3000000    it &quot;selects \\&quot;AnyAudio\\&quot;&quot; $ runWD $ do     findElem (ByCSS &quot;a[href=\\&quot;#\/audios\/set-audio-selector\/any-audio\\&quot;]&quot;) &gt;&gt;= click     liftIO $ threadDelay 3000000     pagerEls &lt;- findElems (ByCSS &quot;a[href^=\\&quot;#\/audios\/get-audio\/\\&quot;]&quot;)     length pagerEls `shouldBe` 11      activeEls &lt;- findElems (ByCSS &quot;li.active a[href=\\&quot;#\\&quot;]&quot;)     length activeEls `shouldBe` 1 <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0430\u0440\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u044f.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u042d\u043a\u0440\u0430\u043d \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/141\/567\/196\/141567196b7940adbaa388a278a38468.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/870\/0c2\/5f8\/8700c25f855c4864bc50cfa43b743c80.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u0437\u043e\u0440 \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0446\u0435\u043b\u0438.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u044f\u044f \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439, \u043f\u043e\u0439\u0434\u0443 \u0438 \u0443\u0431\u044c\u044e \u0441\u0435\u0431\u044f \u0441\u0430\u043c \u043e \u0441\u0430\u0434 \u043a\u0430\u043c\u043d\u0435\u0439.       <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/272871\/\"> http:\/\/habrahabr.ru\/post\/272871\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u043e\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u0430\u043f\u0435\u043b\u044c \u0442\u043e\u043f\u043b\u0438\u0432\u0430 \u0432 \u043c\u0430\u0448\u0438\u043d\u0443 \u043f\u0440\u043e\u043f\u0430\u0433\u0430\u043d\u0434\u044b Haskell, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/df7\/848\/e7c\/df7848e7c9644d148d09b4d743d0a838.png\"\/><\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li> \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0430\u043a\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a <a href=\"https:\/\/vk.com\/dev\">API \u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/a>.<br \/>  \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u00abnative\u00bb \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 JavaScript \u0447\u0435\u0440\u0435\u0437 GHCJS, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Haskell \u0432 JavaScript  <\/li>\n<li> \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u0430\u0448\u0435 API  <\/li>\n<\/ul>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-270114","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/270114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=270114"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/270114\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=270114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=270114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=270114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}