{"id":326358,"date":"2021-07-13T09:00:29","date_gmt":"2021-07-13T09:00:29","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=326358"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=326358","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c frontent \u043d\u0430 golang"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p>\u041e\u0439, \u0432\u0441\u0435 \u0447\u0443\u0434\u0435\u0441\u0438\u0442\u0441\u044f \u0438 \u0447\u0443\u0434\u0435\u0441\u0438\u0442\u0441\u044f!<br \/>\u2014 \u041b. \u041a\u044d\u0440\u0440\u043e\u043b, \u0410\u043b\u0438\u0441\u0430 \u0432 \u0421\u0442\u0440\u0430\u043d\u0435 \u0427\u0443\u0434\u0435\u0441<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/375\/b5e\/56b\/375b5e56b6eb6265666ed4ae33baefb2.jpg\" width=\"966\" height=\"550\"><figcaption><\/figcaption><\/figure>\n<ul>\n<li>\n<p>\u0412\u0430\u0441 \u0437\u0430\u0434\u0440\u0430\u043b\u043e, \u0447\u0442\u043e node_modules \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0441\u043e\u0440\u0435\u0432\u043d\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0441 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 \u043c\u0443\u0437\u044b\u043a\u0438?<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043a Redux&nbsp; \u0432 \u0448\u0435\u0441\u0442\u0438\u0434\u0435\u0441\u044f\u0442\u044b\u0439 \u0440\u0430\u0437 \u0438 \u043f\u043e\u043d\u044f\u043b\u0438 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: &#171;\u0414\u043e \u043c\u0435\u043d\u044f \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043e\u0445\u043e\u0434\u0438\u0442&#8230;&#187; \u0438 &#171;\u0414\u0443\u043c\u0430\u044e, \u043c\u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0435\u0449\u0451 \u0440\u0430\u0437!&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e 1 + &#171;1&#187; == &#171;11&#187;, \u0430&nbsp;&nbsp;[] &#8212; {} == NaN?<\/p>\n<\/li>\n<li>\n<p>\u0411\u0438\u043b\u0434 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 webpack \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u0447\u0435\u043c \u0432\u0430\u0448\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 javascript?<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043f\u043e\u0434 \u043a\u0430\u0442, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0430\u0448 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434 \u043d\u0430 \u0433\u043e.&nbsp;<\/p>\n<p>\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u043c, <a href=\"http:\/\/vugu.org\" rel=\"noopener noreferrer nofollow\">vugu<\/a>. \u041c\u043e\u043b\u043e\u0434\u0430\u044f (\u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u044e, \u043d\u0435 \u0440\u0435\u043b\u0438\u0437\u043d\u0443\u0442\u0430\u044f) \u0438 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c golang \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 html. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 golang, \u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0447\u0435\u0440\u0435\u0437 WASM.&nbsp;<\/p>\n<p>Vugu \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u043b\u043e\u0434\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u043e \u043d\u0435\u0439 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u044f \u043d\u0435 \u043d\u0430\u0448\u0451\u043b, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u044b \u0434\u0430\u0439\u0434\u0436\u0435\u0441\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438 \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0435\u043c \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u0437\u043d\u0443\u0442\u0440\u0438. \u0418 \u0442\u0430\u043a, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 vugu?<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 html \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0442\u0438\u043f application\/x-go \u0432\u043c\u0435\u0441\u0442\u043e javascript:<\/p>\n<pre><code class=\"xml\">&lt;div&gt;     &lt;p vg-if='c.ShowText'&gt;         Conditional text here.     &lt;\/p&gt; &lt;\/div&gt;  &lt;script type=\"application\/x-go\"&gt; type Root struct { \/\/ component for \"root\"     ShowText bool `vugu:\"data\"` } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0412\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c *.vugu \u0438 <s>\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0436\u0440\u0451\u0442 5 \u0433\u0438\u0433\u043e\u0432 \u043f\u0430\u043c\u044f\u0442\u0438<\/s>. \u041b\u0430\u0434\u043d\u043e, \u0448\u0443\u0447\u0443, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 vugu \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0441 \u0446\u0435\u043b\u044c\u044e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c. \u0412\u0441\u0451 \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432 vugu \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0430\u043c\u043e\u0433\u043e go. \u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438:<\/p>\n<pre><code class=\"bash\">go generate go build .\/file-name<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0438\u0434\u0451\u0442 \u0443\u0442\u0438\u043b\u0438\u0442\u0430, \u0434\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c vgrun, \u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<pre><code>vgrun devserver.go<\/code><\/pre>\n<p>\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u0438 \u043d\u0430\u0447\u043d\u0451\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u043e\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f, \u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u043e\u0441\u0442\u043e \u0438 \u0431\u0435\u0437 \u043d\u0430\u0432\u043e\u0440\u043e\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u0427\u0442\u043e \u0436\u0435, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u0443\u0442\u044c vugu \u0444\u0430\u0439\u043b\u0430 \u0434\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.&nbsp;<\/p>\n<ol>\n<li>\n<p>\u0424\u0430\u0439\u043b \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f html \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u043c. \u0414\u0430, \u0444\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 HTML.&nbsp;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b \u0435\u0449\u0451 \u0440\u0430\u0437 \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f vugu \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u043c. \u0422\u0443\u0442 \u0444\u0430\u0439\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 go. \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430 golang.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 WASM \u0438 \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 web assembly \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.&nbsp;<\/p>\n<\/li>\n<li>\n<p>PROFIT!<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451. \u041c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>\u0427\u0442\u043e? \u041d\u0430\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435? \u041b\u0430\u0434\u043d\u043e, \u0442\u0430\u043a \u0443\u0436 \u0438 \u0431\u044b\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043a\u0430\u043f\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u043b\u0443\u0431\u0436\u0435 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 golang \u0444\u0430\u0439\u043b. \u0424\u0430\u0439\u043b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f&nbsp;0_components_vgen.go. \u0412 \u043d\u0435\u0433\u043e \u0438 \u043f\u043e\u0439\u0434\u0451\u043c.<\/p>\n<p>\u041a\u043e\u0434 \u0438\u0437 <code>&lt;script type=\"application\/x-go\"&gt;<\/code> \u0438\u0437 vugu \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 golang \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041f\u0440\u0438\u044f\u0442\u043d\u043e. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443, \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f Build, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 HTML \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.&nbsp;<\/p>\n<pre><code class=\"go\">func&nbsp;(c&nbsp;*Root)&nbsp;Build(vgin&nbsp;*vugu.BuildIn)&nbsp;(vgout&nbsp;*vugu.BuildOut)&nbsp;{  &nbsp;&nbsp;&nbsp;&nbsp;vgout&nbsp;=&nbsp;&amp;vugu.BuildOut{}  &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;vgiterkey&nbsp;interface{} &nbsp;&nbsp;&nbsp;&nbsp;_&nbsp;=&nbsp;vgiterkey &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;vgn&nbsp;*vugu.VGNode &nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(3),&nbsp;Namespace:&nbsp;\"\",&nbsp;Data:&nbsp;\"div\",&nbsp;Attr:&nbsp;[]vugu.VGAttribute{vugu.VGAttribute{Namespace:&nbsp;\"\",&nbsp;Key:&nbsp;\"class\",&nbsp;Val:&nbsp;\"demo\"}}} &nbsp;&nbsp;&nbsp;&nbsp;vgout.Out&nbsp;=&nbsp;append(vgout.Out,&nbsp;vgn)&nbsp;&nbsp;\/\/&nbsp;root&nbsp;for&nbsp;output &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent&nbsp;:=&nbsp;vgn &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_&nbsp;=&nbsp;vgparent &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(1),&nbsp;Data:&nbsp;\"\\n&nbsp;&nbsp;&nbsp;&nbsp;\"} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent.AppendChild(vgn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(3),&nbsp;Namespace:&nbsp;\"\",&nbsp;Data:&nbsp;\"button\",&nbsp;Attr:&nbsp;[]vugu.VGAttribute(nil)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent.AppendChild(vgn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn.DOMEventHandlerSpecList&nbsp;=&nbsp;append(vgn.DOMEventHandlerSpecList,&nbsp;vugu.DOMEventHandlerSpec{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EventType:&nbsp;&nbsp;\"click\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Func:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;func(event&nbsp;vugu.DOMEvent)&nbsp;{&nbsp;c.HandleCat(event)&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;TODO:&nbsp;implement&nbsp;capture,&nbsp;etc.&nbsp;mostly&nbsp;need&nbsp;to&nbsp;decide&nbsp;syntax &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) <\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e, \u043a\u0430\u043a \u0438 \u043b\u044e\u0431\u043e\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0448 HTML, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e.&nbsp;<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0433\u043e, vugu \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a (\u0430 \u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0435 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439) \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c DOM \u0438 DOMEvents \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0442 HTML \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 golang.&nbsp;<\/p>\n<p>\u041d\u0443 \u0432\u043e\u0442. \u0412\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. vugu \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435. Vugu &#8212; \u044d\u0442\u043e \u043d\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u042d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e. \u0412\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 create-react-app \u0438\u043b\u0438 \u0447\u0435\u0433\u043e-\u0442\u043e \u0435\u0449\u0451.&nbsp; \u0412\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e.<\/p>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436\u0435, \u0445\u0432\u0430\u0442\u0438\u0442 \u0431\u043e\u043b\u0442\u043e\u0432\u043d\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0447\u0435\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vugu.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c:<\/p>\n<pre><code>go get -u github.com\/vugu\/vgrun vgrun -install-tools<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u0437 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430:<\/p>\n<pre><code>vgrun -new-from-example=simple .<\/code><\/pre>\n<p>\u041d\u0443 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0451 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0432\u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<pre><code>vgrun devserver.go<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u0432\u0430\u0441 \u0432\u044b\u043b\u0435\u0442\u0438\u0442 \u043f\u0430\u0440\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0451\u0442 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 go get. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f golang \u043d\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u0451\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 go.mod \u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>vscode \u0438\u043c\u0435\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0434\u043b\u044f vugu. \u041f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u043f\u043b\u044e\u0441. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u0443 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 root.vugu.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0434\u0443\u0448\u0435\u0432\u043d\u043e\u0439 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u043a\u043e\u0442\u0438\u043a\u043e\u0432. \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0432\u0435\u0434\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u0442\u0438\u043a\u043e\u0432, \u0442\u0430\u043a \u0432\u0435\u0434\u044c?<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e vugu \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"xml\">&lt;div&nbsp;class=\"demo\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;@click=\"c.HandleCat(event)\"&gt;Get&nbsp;a&nbsp;cat!&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-if='c.IsLoading'&gt;Loading...&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-if='len(c.Cats)&nbsp;&gt;&nbsp;0'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-for='c.Cats'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;:src='value.URL'&nbsp;alt=\"cat\"&gt;&lt;\/img&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0418 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 vue.js. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 vue, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430.&nbsp;<\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@<\/code>. <code>@click<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u0432\u0430\u0448 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0421\u0430\u043c\u043e\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435, \u0441\u044e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0438\u0441\u0430\u0442\u044c golang \u043a\u043e\u0434.&nbsp;<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442 <code>vg-if<\/code>.&nbsp;<\/p>\n<pre><code class=\"xml\">&lt;div&nbsp;vg-if='c.IsLoading'&gt;Loading...&lt;\/div&gt;<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e Loading&#8230; \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f IsLoading \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f true (\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u043b\u0441\u044f \u044d\u0442\u043e\u0442 &#171;\u0441&#187; \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043f\u043e\u043f\u043e\u0437\u0436\u0435\u0435). \u0421\u044e\u0434\u0430 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u0438\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 golang \u043a\u043e\u0434, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.&nbsp;<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>vg-for<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0443 \u0438 \u043d\u0430 \u0437\u0430\u043a\u0443\u0441\u043a\u0443, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 HTML \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u044f\u0442\u043e \u0438\u0437 golang \u043a\u043e\u0434\u0430.&nbsp;<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0447\u0443\u0434\u0435\u0441\u0430 \u0438 \u0441\u0430\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.&nbsp;<\/p>\n<pre><code class=\"go\">&lt;script&nbsp;type=\"application\/x-go\"&gt; import&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;\"encoding\/json\" &nbsp;&nbsp;&nbsp;&nbsp;\"net\/http\" &nbsp;&nbsp;&nbsp;&nbsp;\"log\" )  type&nbsp;Root&nbsp;struct&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;IsLoading&nbsp;bool&nbsp;`vugu:\"data\"` &nbsp;&nbsp;&nbsp;&nbsp;Cats&nbsp;[]Cat&nbsp;`vugu:\"data\"` }  type&nbsp;Cat&nbsp;struct&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ID&nbsp;string&nbsp;&nbsp;`json:\"id\"` &nbsp;&nbsp;&nbsp;&nbsp;URL&nbsp;string&nbsp;`json:\"url\"` &nbsp;&nbsp;&nbsp;&nbsp;Width&nbsp;int&nbsp;`json:\"width\"` &nbsp;&nbsp;&nbsp;&nbsp;Height&nbsp;int&nbsp;`json:\"height\"` &nbsp;}<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0434\u0432\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, Cat, \u044d\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043e\u0442\u0438\u043a\u043e\u0432 \u0432 API \u0438 Root, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430, \u0438 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 (\u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b). \u041f\u043e\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0442\u044d\u0433\u043e\u043c <code>`vugu:\"data\"`<\/code>. \u0412\u0441\u0451 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u043e\u0435 \u044d\u0442\u0438\u043c \u0442\u0435\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c HTML \u043a\u043e\u0434\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441. <\/p>\n<p>Root \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. Root \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 vugu. \u041c\u0430\u0443\u043d\u0442-\u043f\u043e\u0438\u043d\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 Root. <\/p>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e vugu \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0443\u0448\u0435 \u0443\u0433\u043e\u0434\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0441\u043f\u0438\u0447\u0438\u043b\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0442\u043e \u0444\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f: koshki-sobachki.vugu \u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0438\u043f \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 KoshkiSobachki. <\/p>\n<p>\u0420\u0430\u0443\u0442\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u043d\u0438\u044f\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \/KoshkiSobachki. \u0425\u043e\u0442\u044f, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, vugu \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u044e\u0431\u0438\u0442 \u0432\u0441\u044e \u044d\u0442\u0443 \u043c\u0430\u0433\u0438\u044e \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440. \u0412\u0435\u0441\u044c \u0440\u0430\u0443\u0442\u0438\u043d\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <a href=\"https:\/\/www.vugu.org\/doc\/routing\" rel=\"noopener noreferrer nofollow\">\u0432\u0440\u0443\u0447\u043d\u0443\u044e<\/a>. <\/p>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0430\u0439\u0442. <\/p>\n<pre><code class=\"go\">func&nbsp;(c&nbsp;*Root)&nbsp;HandleCat(event&nbsp;vugu.DOMEvent)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ee&nbsp;:=&nbsp;event.EventEnv() &nbsp;&nbsp;&nbsp;&nbsp;go&nbsp;func()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.Lock() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.IsLoading&nbsp;=&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.UnlockRender() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client&nbsp;:=&nbsp;&amp;http.Client{} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req,&nbsp;_&nbsp;:=&nbsp;http.NewRequest(\"GET\",&nbsp;\"https:\/\/api.thecatapi.com\/v1\/images\/search?limit=3&amp;size=full\",&nbsp;nil) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.Header.Set(\"x-api-key\",&nbsp;\"710c211b\") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res,&nbsp;err&nbsp;:=&nbsp;client.Do(req) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;err&nbsp;!=&nbsp;nil&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.Printf(\"Error&nbsp;fetching:&nbsp;%v\",&nbsp;err) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defer&nbsp;res.Body.Close() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;newcat&nbsp;[]Cat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err&nbsp;=&nbsp;json.NewDecoder(res.Body).Decode(&amp;newcat) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;err&nbsp;!=&nbsp;nil&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.Printf(\"Can't&nbsp;unmarshal&nbsp;the&nbsp;json:&nbsp;%v\",&nbsp;err) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.Lock() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defer&nbsp;ee.UnlockRender() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.Cats&nbsp;=&nbsp;newcat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.IsLoading&nbsp;=&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;}() }<\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u0418\u0434\u0451\u043c \u043d\u0430 <a href=\"https:\/\/thecatapi.com\" rel=\"noopener noreferrer nofollow\">https:\/\/thecatapi.com<\/a>, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 API-Key \u0438 \u0433\u0440\u0443\u0437\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u043e\u0434. (\u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, \u043a\u043b\u044e\u0447 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0433\u043d\u0430\u0442\u044c \u0443 \u043c\u0435\u043d\u044f \u043c\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u0442\u0438\u043a\u043e\u0432). \u0414\u0432\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0437\u0434\u0435\u0441\u044c \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u044d\u0442\u043e:<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 goroutine \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439. <\/p>\n<\/li>\n<li>\n<p>\u0412 \u043a\u043e\u0434\u0435 goroutine \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c EventEnvironment \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c. \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u043e\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c Lock() \u0430 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 UnlockRender().<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c json \u0441 \u0442\u0440\u0435\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u0442\u0438\u043a\u043e\u0432. \u041f\u0430\u0440\u0441\u0438\u043c \u044d\u0442\u043e\u0442 json \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0438\u043f\u0430 Cat, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e Cats \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0441. \u041f\u043e\u043f\u0443\u0442\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 IsLoading \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438 \u0441\u043a\u0440\u044b\u0442\u044c div \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u0435\u0442 \u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c4\/3af\/116\/5c43af11624580e75414e7b50956d357.png\" alt=\"\u0410\u0445! \u041a\u0430\u043a\u0430\u044f \u043c\u0438\u043b\u0430\u044f \u043a\u0438\u0441\u043a\u0430!\" title=\"\u0410\u0445! \u041a\u0430\u043a\u0430\u044f \u043c\u0438\u043b\u0430\u044f \u043a\u0438\u0441\u043a\u0430!\" width=\"793\" height=\"634\"><figcaption>\u0410\u0445! \u041a\u0430\u043a\u0430\u044f \u043c\u0438\u043b\u0430\u044f \u043a\u0438\u0441\u043a\u0430!<\/figcaption><\/figure>\n<p>\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u043c\u0441\u044f \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 vugu.<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0434\u0435\u0442\u0430\u043b\u044c \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0431\u0435\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u0438\u044f. \u0422\u0430\u043a\u043e\u0432\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 vugu. \u0412\u0441\u0451 \u0447\u0442\u043e \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u0435\u043b\u0435\u043d\u0438\u044e. <\/p>\n<p>\u041f\u043e\u0441\u0435\u043c\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, CSS, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 vugu \u0444\u0430\u0439\u043b\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0430\u0448 HTML. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u043e\u0447\u0435\u043a. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043e, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 <code>.header<\/code> \u0432 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0443 \u0432\u0430\u0441 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439. \u0422\u0430\u043a \u0447\u0442\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 React \u0438 Blazor). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>Init(ctx vugu.InitCtx) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d, \u043d\u043e \u0435\u0449\u0451 \u043d\u0435 \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u0432\u0438\u0434\u0430\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0438 \u0432\u044b\u043f\u0438\u0442\u044c \u043f\u0438\u0432\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p>Compute(ctx vugu.ComputeCtx) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043a\u043e\u0440\u043e \u0443\u0432\u0438\u0434\u0438\u0442 \u0441\u0432\u0435\u0442. \u041f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>Rendered(ctx vugu.RenderedCtx) \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u043e\u0448\u043b\u0438\u0441\u044c \u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438 \u043f\u043e \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043c\u0438\u0434\u043e\u0440\u044b.<\/p>\n<\/li>\n<li>\n<p>Destroy(ctx vugu.DestroyCtx) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u0441\u0434\u0430\u043b\u0441\u044f, \u0438 \u0435\u043c\u0443 \u043f\u043e\u0440\u0430 \u043d\u0430 \u0441\u0432\u0430\u043b\u043a\u0443. \u0412\u044b\u0433\u043e\u0440\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0449\u0451 \u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0441 \u0442\u044d\u0433\u0430\u043c\u0438 `vugu:&#187;data&#187;`. \u0422\u0430\u043a\u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e.&nbsp;<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u0435\u0449\u0451 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441 \u0441\u0430\u0439\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f vugu: <\/p>\n<pre><code class=\"xml\">&lt;!-- root.vugu --&gt;  &lt;div class=\"root\"&gt;     &lt;ul&gt;       &lt;main:MyLine FileName=\"example.txt\" :LineNumber=\"rand.Int63n(100)\" &gt;&lt;\/main:MyLine&gt;     &lt;\/ul&gt; &lt;\/div&gt; &lt;script type=\"application\/x-go\"&gt; import \"math\/rand\" &lt;\/script&gt; <\/code><\/pre>\n<pre><code class=\"xml\">&lt;!-- my-line.vugu --&gt; &lt;li class=\"my-line\"&gt;   &lt;strong vg-content='c.FileName'&gt;&lt;\/strong&gt;:&lt;span vg-content='c.LineNumber'&gt;&lt;\/span&gt; &lt;\/li&gt; &lt;script type=\"application\/x-go\"&gt; type MyLine struct {     FileName string vugu:\"data\"     LineNumber int  vugu:\"data\" } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 vugu.<\/p>\n<p>\u041d\u0443 \u0438 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a, wasm \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435, \u0432\u0435\u0441\u0438\u0442 7 \u043c\u0435\u0442\u0440\u043e\u0432. \u042d\u0442\u043e \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u0432\u044b\u0434\u0430\u0451\u0442 Blazor, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0439\u0442\u0438 \u0433\u043b\u0443\u0431\u0436\u0435.<\/p>\n<p>\u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u044f \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 vugu \u0432 tinygo? \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u044f \u0432\u0430\u043c \u0438 \u0433\u043e\u0432\u043e\u0440\u044e.&nbsp;<\/p>\n<p>\u0418\u0434\u0451\u043c \u043d\u0430&nbsp;<a href=\"https:\/\/www.vugu.org\/doc\/tinygo\" rel=\"noopener noreferrer nofollow\">https:\/\/www.vugu.org\/doc\/tinygo<\/a> \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0431\u0438\u043b\u0434 \u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u043a\u0435\u0440, \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0435\u0439 \u0438\u0437\u043e\u043b\u0435\u043d\u0442\u044b \u0438 \u043a\u0443\u0437\u044c\u043a\u0438\u043d\u043e\u0439 \u043c\u0430\u0442\u0435\u0440\u0438. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 wasm \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0441\u0438\u0442 500\u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442. \u0423\u0440\u0430! \u0412\u0441\u0435\u043c \u043f\u043e \u043a\u043e\u0448\u0430\u043a\u0443! \u041f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0442\u0438\u0442\u0435!&nbsp;<\/p>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0445\u0432\u0430\u0442\u0438\u0442 \u0440\u0430\u0437\u0433\u043b\u0430\u0433\u043e\u043b\u044c\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u0438\u0434\u0451\u043c \u0438 \u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043d\u0430&nbsp;<a href=\"https:\/\/www.vugu.org\/doc\" rel=\"noopener noreferrer nofollow\">https:\/\/www.vugu.org\/doc<\/a>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0434\u0442\u0438 \u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u044a\u0451\u043c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043d\u0430&nbsp;<a href=\"https:\/\/pkg.go.dev\/github.com\/vugu\/vugu\/\" rel=\"noopener noreferrer nofollow\">https:\/\/pkg.go.dev\/github.com\/vugu\/vugu\/<\/a>.<\/p>\n<p>\u042f \u0441\u0432\u044f\u0437\u0430\u043b\u0441\u044f \u0441 \u0430\u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b, \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u0445\u043e\u0442\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0430. \u042f \u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0441\u0432\u043e\u044e \u043f\u043e\u043c\u043e\u0449\u044c \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u0430\u043a \u0447\u0442\u043e vugu \u0432 \u043c\u0430\u0441\u0441\u044b. \u041d\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u0432\u043e\u0442 \u0432\u0430\u043c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u044f\u0432\u043b\u0435\u043d\u0438\u0435:<\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442, \u0432\u0441\u0451 \u0436\u0435, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f&nbsp; tinigo \u0441\u043b\u043e\u043c\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e wasm \u043a\u043e\u0434\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u0445 \u0438 \u0440\u0438\u0441\u043a. \u041d\u043e, \u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c. \u042d\u0442\u043e \u0432\u0435\u0441\u0435\u043b\u043e.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043a\u043e\u0433\u043e-\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u2014 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 issue, \u0434\u0435\u043b\u0430\u0439\u0442\u0435 PR \u0438\u043b\u0438 \u043f\u0438\u0448\u0438\u0442\u0435 \u043c\u043d\u0435 \u0432 \u043b\u0438\u0447\u043a\u0443, \u044f \u043c\u043e\u0433\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f\u043c \u0432 Slack.<\/p>\n<p>\u0423\u0434\u0430\u0447\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 vugu!<\/p>\n<\/p>\n<\/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=\"https:\/\/habr.com\/ru\/post\/567440\/\"> https:\/\/habr.com\/ru\/post\/567440\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p>\u041e\u0439, \u0432\u0441\u0435 \u0447\u0443\u0434\u0435\u0441\u0438\u0442\u0441\u044f \u0438 \u0447\u0443\u0434\u0435\u0441\u0438\u0442\u0441\u044f!<br \/>\u2014 \u041b. \u041a\u044d\u0440\u0440\u043e\u043b, \u0410\u043b\u0438\u0441\u0430 \u0432 \u0421\u0442\u0440\u0430\u043d\u0435 \u0427\u0443\u0434\u0435\u0441<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<ul>\n<li>\n<p>\u0412\u0430\u0441 \u0437\u0430\u0434\u0440\u0430\u043b\u043e, \u0447\u0442\u043e node_modules \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0441\u043e\u0440\u0435\u0432\u043d\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0441 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 \u043c\u0443\u0437\u044b\u043a\u0438?<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043a Redux&nbsp; \u0432 \u0448\u0435\u0441\u0442\u0438\u0434\u0435\u0441\u044f\u0442\u044b\u0439 \u0440\u0430\u0437 \u0438 \u043f\u043e\u043d\u044f\u043b\u0438 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: &#171;\u0414\u043e \u043c\u0435\u043d\u044f \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043e\u0445\u043e\u0434\u0438\u0442&#8230;&#187; \u0438 &#171;\u0414\u0443\u043c\u0430\u044e, \u043c\u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0435\u0449\u0451 \u0440\u0430\u0437!&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e 1 + &#171;1&#187; == &#171;11&#187;, \u0430&nbsp;&nbsp;[] &#8212; {} == NaN?<\/p>\n<\/li>\n<li>\n<p>\u0411\u0438\u043b\u0434 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 webpack \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u0447\u0435\u043c \u0432\u0430\u0448\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 javascript?<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043f\u043e\u0434 \u043a\u0430\u0442, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0430\u0448 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434 \u043d\u0430 \u0433\u043e.&nbsp;<\/p>\n<p>\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u043c, <a href=\"http:\/\/vugu.org\" rel=\"noopener noreferrer nofollow\">vugu<\/a>. \u041c\u043e\u043b\u043e\u0434\u0430\u044f (\u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u044e, \u043d\u0435 \u0440\u0435\u043b\u0438\u0437\u043d\u0443\u0442\u0430\u044f) \u0438 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c golang \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 html. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 golang, \u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0447\u0435\u0440\u0435\u0437 WASM.&nbsp;<\/p>\n<p>Vugu \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u043b\u043e\u0434\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u043e \u043d\u0435\u0439 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u044f \u043d\u0435 \u043d\u0430\u0448\u0451\u043b, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u044b \u0434\u0430\u0439\u0434\u0436\u0435\u0441\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438 \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0435\u043c \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u0437\u043d\u0443\u0442\u0440\u0438. \u0418 \u0442\u0430\u043a, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 vugu?<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 html \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0442\u0438\u043f application\/x-go \u0432\u043c\u0435\u0441\u0442\u043e javascript:<\/p>\n<pre><code class=\"xml\">&lt;div&gt;     &lt;p vg-if='c.ShowText'&gt;         Conditional text here.     &lt;\/p&gt; &lt;\/div&gt;  &lt;script type=\"application\/x-go\"&gt; type Root struct { \/\/ component for \"root\"     ShowText bool `vugu:\"data\"` } &lt;\/script&gt;<\/code><\/pre>\n<p>\u0412\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c *.vugu \u0438 <s>\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0436\u0440\u0451\u0442 5 \u0433\u0438\u0433\u043e\u0432 \u043f\u0430\u043c\u044f\u0442\u0438<\/s>. \u041b\u0430\u0434\u043d\u043e, \u0448\u0443\u0447\u0443, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 vugu \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0441 \u0446\u0435\u043b\u044c\u044e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c. \u0412\u0441\u0451 \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432 vugu \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0430\u043c\u043e\u0433\u043e go. \u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438:<\/p>\n<pre><code class=\"bash\">go generate go build .\/file-name<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0438\u0434\u0451\u0442 \u0443\u0442\u0438\u043b\u0438\u0442\u0430, \u0434\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c vgrun, \u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<pre><code>vgrun devserver.go<\/code><\/pre>\n<p>\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u0438 \u043d\u0430\u0447\u043d\u0451\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u043e\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f, \u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u043e\u0441\u0442\u043e \u0438 \u0431\u0435\u0437 \u043d\u0430\u0432\u043e\u0440\u043e\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u0427\u0442\u043e \u0436\u0435, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u0443\u0442\u044c vugu \u0444\u0430\u0439\u043b\u0430 \u0434\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.&nbsp;<\/p>\n<ol>\n<li>\n<p>\u0424\u0430\u0439\u043b \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f html \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u043c. \u0414\u0430, \u0444\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 HTML.&nbsp;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b \u0435\u0449\u0451 \u0440\u0430\u0437 \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f vugu \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u043c. \u0422\u0443\u0442 \u0444\u0430\u0439\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 go. \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430 golang.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 WASM \u0438 \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 web assembly \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.&nbsp;<\/p>\n<\/li>\n<li>\n<p>PROFIT!<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451. \u041c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>\u0427\u0442\u043e? \u041d\u0430\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435? \u041b\u0430\u0434\u043d\u043e, \u0442\u0430\u043a \u0443\u0436 \u0438 \u0431\u044b\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043a\u0430\u043f\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u043b\u0443\u0431\u0436\u0435 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 golang \u0444\u0430\u0439\u043b. \u0424\u0430\u0439\u043b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f&nbsp;0_components_vgen.go. \u0412 \u043d\u0435\u0433\u043e \u0438 \u043f\u043e\u0439\u0434\u0451\u043c.<\/p>\n<p>\u041a\u043e\u0434 \u0438\u0437 <code>&lt;script type=\"application\/x-go\"&gt;<\/code> \u0438\u0437 vugu \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 golang \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041f\u0440\u0438\u044f\u0442\u043d\u043e. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443, \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f Build, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 HTML \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.&nbsp;<\/p>\n<pre><code class=\"go\">func&nbsp;(c&nbsp;*Root)&nbsp;Build(vgin&nbsp;*vugu.BuildIn)&nbsp;(vgout&nbsp;*vugu.BuildOut)&nbsp;{  &nbsp;&nbsp;&nbsp;&nbsp;vgout&nbsp;=&nbsp;&amp;vugu.BuildOut{}  &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;vgiterkey&nbsp;interface{} &nbsp;&nbsp;&nbsp;&nbsp;_&nbsp;=&nbsp;vgiterkey &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;vgn&nbsp;*vugu.VGNode &nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(3),&nbsp;Namespace:&nbsp;\"\",&nbsp;Data:&nbsp;\"div\",&nbsp;Attr:&nbsp;[]vugu.VGAttribute{vugu.VGAttribute{Namespace:&nbsp;\"\",&nbsp;Key:&nbsp;\"class\",&nbsp;Val:&nbsp;\"demo\"}}} &nbsp;&nbsp;&nbsp;&nbsp;vgout.Out&nbsp;=&nbsp;append(vgout.Out,&nbsp;vgn)&nbsp;&nbsp;\/\/&nbsp;root&nbsp;for&nbsp;output &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent&nbsp;:=&nbsp;vgn &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_&nbsp;=&nbsp;vgparent &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(1),&nbsp;Data:&nbsp;\"\\n&nbsp;&nbsp;&nbsp;&nbsp;\"} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent.AppendChild(vgn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn&nbsp;=&nbsp;&amp;vugu.VGNode{Type:&nbsp;vugu.VGNodeType(3),&nbsp;Namespace:&nbsp;\"\",&nbsp;Data:&nbsp;\"button\",&nbsp;Attr:&nbsp;[]vugu.VGAttribute(nil)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgparent.AppendChild(vgn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vgn.DOMEventHandlerSpecList&nbsp;=&nbsp;append(vgn.DOMEventHandlerSpecList,&nbsp;vugu.DOMEventHandlerSpec{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EventType:&nbsp;&nbsp;\"click\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Func:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;func(event&nbsp;vugu.DOMEvent)&nbsp;{&nbsp;c.HandleCat(event)&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;TODO:&nbsp;implement&nbsp;capture,&nbsp;etc.&nbsp;mostly&nbsp;need&nbsp;to&nbsp;decide&nbsp;syntax &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) <\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e, \u043a\u0430\u043a \u0438 \u043b\u044e\u0431\u043e\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0448 HTML, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e.&nbsp;<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0433\u043e, vugu \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a (\u0430 \u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0435 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439) \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c DOM \u0438 DOMEvents \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0442 HTML \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 golang.&nbsp;<\/p>\n<p>\u041d\u0443 \u0432\u043e\u0442. \u0412\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. vugu \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435. Vugu &#8212; \u044d\u0442\u043e \u043d\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u042d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e. \u0412\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 create-react-app \u0438\u043b\u0438 \u0447\u0435\u0433\u043e-\u0442\u043e \u0435\u0449\u0451.&nbsp; \u0412\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e.<\/p>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436\u0435, \u0445\u0432\u0430\u0442\u0438\u0442 \u0431\u043e\u043b\u0442\u043e\u0432\u043d\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0447\u0435\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e vugu.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c:<\/p>\n<pre><code>go get -u github.com\/vugu\/vgrun vgrun -install-tools<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u0437 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430:<\/p>\n<pre><code>vgrun -new-from-example=simple .<\/code><\/pre>\n<p>\u041d\u0443 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0451 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0432\u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<pre><code>vgrun devserver.go<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u0432\u0430\u0441 \u0432\u044b\u043b\u0435\u0442\u0438\u0442 \u043f\u0430\u0440\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0451\u0442 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 go get. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f golang \u043d\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u0451\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 go.mod \u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>vscode \u0438\u043c\u0435\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0434\u043b\u044f vugu. \u041f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u043f\u043b\u044e\u0441. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u0443 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 root.vugu.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0434\u0443\u0448\u0435\u0432\u043d\u043e\u0439 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u043a\u043e\u0442\u0438\u043a\u043e\u0432. \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0432\u0435\u0434\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u0442\u0438\u043a\u043e\u0432, \u0442\u0430\u043a \u0432\u0435\u0434\u044c?<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e vugu \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"xml\">&lt;div&nbsp;class=\"demo\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;@click=\"c.HandleCat(event)\"&gt;Get&nbsp;a&nbsp;cat!&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-if='c.IsLoading'&gt;Loading...&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-if='len(c.Cats)&nbsp;&gt;&nbsp;0'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;vg-for='c.Cats'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;:src='value.URL'&nbsp;alt=\"cat\"&gt;&lt;\/img&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0418 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 vue.js. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 vue, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430.&nbsp;<\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@<\/code>. <code>@click<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u0432\u0430\u0448 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0421\u0430\u043c\u043e\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435, \u0441\u044e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0438\u0441\u0430\u0442\u044c golang \u043a\u043e\u0434.&nbsp;<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442 <code>vg-if<\/code>.&nbsp;<\/p>\n<pre><code class=\"xml\">&lt;div&nbsp;vg-if='c.IsLoading'&gt;Loading...&lt;\/div&gt;<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e Loading&#8230; \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f IsLoading \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f true (\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u043b\u0441\u044f \u044d\u0442\u043e\u0442 &#171;\u0441&#187; \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043f\u043e\u043f\u043e\u0437\u0436\u0435\u0435). \u0421\u044e\u0434\u0430 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u0438\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 golang \u043a\u043e\u0434, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.&nbsp;<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>vg-for<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0443 \u0438 \u043d\u0430 \u0437\u0430\u043a\u0443\u0441\u043a\u0443, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 HTML \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u044f\u0442\u043e \u0438\u0437 golang \u043a\u043e\u0434\u0430.&nbsp;<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0447\u0443\u0434\u0435\u0441\u0430 \u0438 \u0441\u0430\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.&nbsp;<\/p>\n<pre><code class=\"go\">&lt;script&nbsp;type=\"application\/x-go\"&gt; import&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;\"encoding\/json\" &nbsp;&nbsp;&nbsp;&nbsp;\"net\/http\" &nbsp;&nbsp;&nbsp;&nbsp;\"log\" )  type&nbsp;Root&nbsp;struct&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;IsLoading&nbsp;bool&nbsp;`vugu:\"data\"` &nbsp;&nbsp;&nbsp;&nbsp;Cats&nbsp;[]Cat&nbsp;`vugu:\"data\"` }  type&nbsp;Cat&nbsp;struct&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ID&nbsp;string&nbsp;&nbsp;`json:\"id\"` &nbsp;&nbsp;&nbsp;&nbsp;URL&nbsp;string&nbsp;`json:\"url\"` &nbsp;&nbsp;&nbsp;&nbsp;Width&nbsp;int&nbsp;`json:\"width\"` &nbsp;&nbsp;&nbsp;&nbsp;Height&nbsp;int&nbsp;`json:\"height\"` &nbsp;}<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0434\u0432\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, Cat, \u044d\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043e\u0442\u0438\u043a\u043e\u0432 \u0432 API \u0438 Root, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430, \u0438 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 (\u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b). \u041f\u043e\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0442\u044d\u0433\u043e\u043c <code>`vugu:\"data\"`<\/code>. \u0412\u0441\u0451 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u043e\u0435 \u044d\u0442\u0438\u043c \u0442\u0435\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c HTML \u043a\u043e\u0434\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441. <\/p>\n<p>Root \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. Root \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 vugu. \u041c\u0430\u0443\u043d\u0442-\u043f\u043e\u0438\u043d\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 Root. <\/p>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e vugu \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0443\u0448\u0435 \u0443\u0433\u043e\u0434\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0441\u043f\u0438\u0447\u0438\u043b\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0442\u043e \u0444\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f: koshki-sobachki.vugu \u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0438\u043f \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 KoshkiSobachki. <\/p>\n<p>\u0420\u0430\u0443\u0442\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u043d\u0438\u044f\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \/KoshkiSobachki. \u0425\u043e\u0442\u044f, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, vugu \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u044e\u0431\u0438\u0442 \u0432\u0441\u044e \u044d\u0442\u0443 \u043c\u0430\u0433\u0438\u044e \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440. \u0412\u0435\u0441\u044c \u0440\u0430\u0443\u0442\u0438\u043d\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <a href=\"https:\/\/www.vugu.org\/doc\/routing\" rel=\"noopener noreferrer nofollow\">\u0432\u0440\u0443\u0447\u043d\u0443\u044e<\/a>. <\/p>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0430\u0439\u0442. <\/p>\n<pre><code class=\"go\">func&nbsp;(c&nbsp;*Root)&nbsp;HandleCat(event&nbsp;vugu.DOMEvent)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ee&nbsp;:=&nbsp;event.EventEnv() &nbsp;&nbsp;&nbsp;&nbsp;go&nbsp;func()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.Lock() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.IsLoading&nbsp;=&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.UnlockRender() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client&nbsp;:=&nbsp;&amp;http.Client{} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req,&nbsp;_&nbsp;:=&nbsp;http.NewRequest(\"GET\",&nbsp;\"https:\/\/api.thecatapi.com\/v1\/images\/search?limit=3&amp;size=full\",&nbsp;nil) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.Header.Set(\"x-api-key\",&nbsp;\"710c211b\") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res,&nbsp;err&nbsp;:=&nbsp;client.Do(req) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;err&nbsp;!=&nbsp;nil&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.Printf(\"Error&nbsp;fetching:&nbsp;%v\",&nbsp;err) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defer&nbsp;res.Body.Close() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;newcat&nbsp;[]Cat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err&nbsp;=&nbsp;json.NewDecoder(res.Body).Decode(&amp;newcat) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;err&nbsp;!=&nbsp;nil&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.Printf(\"Can't&nbsp;unmarshal&nbsp;the&nbsp;json:&nbsp;%v\",&nbsp;err) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ee.Lock() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defer&nbsp;ee.UnlockRender() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.Cats&nbsp;=&nbsp;newcat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.IsLoading&nbsp;=&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;}() }<\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u0418\u0434\u0451\u043c \u043d\u0430 <a href=\"https:\/\/thecatapi.com\" rel=\"noopener noreferrer nofollow\">https:\/\/thecatapi.com<\/a>, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 API-Key \u0438 \u0433\u0440\u0443\u0437\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u043e\u0434. (\u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, \u043a\u043b\u044e\u0447 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0433\u043d\u0430\u0442\u044c \u0443 \u043c\u0435\u043d\u044f \u043c\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u0442\u0438\u043a\u043e\u0432). \u0414\u0432\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0437\u0434\u0435\u0441\u044c \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u044d\u0442\u043e:<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 goroutine \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439. <\/p>\n<\/li>\n<li>\n<p>\u0412 \u043a\u043e\u0434\u0435 goroutine \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c EventEnvironment \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c. \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u043e\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c Lock() \u0430 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 UnlockRender().<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c json \u0441 \u0442\u0440\u0435\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u0442\u0438\u043a\u043e\u0432. \u041f\u0430\u0440\u0441\u0438\u043c \u044d\u0442\u043e\u0442 json \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0438\u043f\u0430 Cat, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/blockquote>\n<\/div>\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-326358","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/326358","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=326358"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/326358\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=326358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=326358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=326358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}