{"id":287514,"date":"2018-08-16T14:10:54","date_gmt":"2018-08-16T10:10:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=287514"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2018-08-16T10:10:54","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=287514","title":{"rendered":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0431\u0435\u0437 React + RxJS 6 + Recompose"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/419653\/\" class=\"post__text post__text-html js-mediator-article\">\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e-\u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/habr.com\/post\/419559\/\">\u00ab\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f React + RxJS 6 + Recompose\u00bb<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432\u0447\u0435\u0440\u0430 \u043d\u0430\u0443\u0447\u0438\u043b\u0430 \u043d\u0430\u0441 \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React, RxJS \u0438 Recompose \u0432\u043c\u0435\u0441\u0442\u0435. \u0427\u0442\u043e \u0436, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u043e\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o_\/ig\/ob\/o_igobe416ik1nqyqp0pa8m0dbo.png\"><br \/>  <a name=\"habracut\"><\/a><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Disclaimer<\/b><\/p>\n<div class=\"spoiler_text\"><i>\u041c\u043d\u043e\u0433\u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0432\u043f\u043e\u043f\u044b\u0445\u0430\u0445 \u0438 \u043f\u043e \u0444\u0430\u043d\u0443\u2026 \u0422\u0430\u043a \u0432\u043e\u0442, \u044d\u0442\u043e \u0442\u0430\u043a.<\/i>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0447\u0442\u043e \u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0442\u0430\u0442\u044c\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u0430 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0437\u0434\u0435\u0441\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0435\u0439 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0431\u0438\u043b\u0438\u0435 \u043e\u0442\u0441\u044b\u043b\u043e\u043a \u0438 \u0446\u0438\u0442\u0430\u0442 \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430. \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<blockquote><p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043b\u044e\u0434\u0435\u0439 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React \u0438 RxJS. \u042f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0434\u0435\u043b\u044e\u0441\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e UI.<\/p><\/blockquote>\n<p>  \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043b\u044e\u0434\u0435\u0439 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Javascript (ES6), HTML \u0438 CSS. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/habr.com\/post\/414869\/\">\u00ab\u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0449\u0438\u0439\u00bb \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/a> <a href=\"https:\/\/habr.com\/post\/353896\/\">SvelteJS<\/a>, \u043d\u043e \u043e\u043d \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043e\u043f\u044b\u0442 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u0434.<\/p>\n<p>  \u0414\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u0432\u0441\u0435 \u0442\u0443 \u0436\u0435 \u0448\u0442\u0443\u043a\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/td\/kk\/jm\/tdkkjm_g27kgq-l5h881veo9i5q.gif\"><\/p>\n<blockquote><p>\u0411\u0435\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u0438\u043b\u0438 setState.<\/p><\/blockquote>\n<p>  \u0414\u0430, \u0431\u0435\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u0438\u043b\u0438 setState. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0431\u0435\u0437 React, ReactDOM, RxJS, Recompose. \u0418 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0431\u0435\u0437 componentFromStream, createEventHandler, combineLatest, map, startWith, setObservableConfig, BehaviorSubject, merge, of, catchError, delay, filter, map, pluck, switchMap, tap, {another bullshit}\u2026 \u041a\u043e\u0440\u043e\u0447\u0435 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438.<\/p>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h3>\n<p>  \u0412\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043b\u0435\u0436\u0438\u0442 \u0432 \u043c\u043e\u0435\u043c <a href=\"https:\/\/svelte.technology\/repl?version=2.9.11&amp;gist=0a5aa0a79dd7a6c1361ff90a67dc3a55\">REPL \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a> \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 SvelteJS. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0442\u044b\u0440\u043a\u0430\u0442\u044c \u0442\u0430\u043c, \u043b\u0438\u0431\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0441\u043a\u0430\u0447\u0430\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u0442\u0443\u0434\u0430 (\u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u043e\u0439).<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u0438\u043a App.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f root-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"html\">&lt;input placeholder=\"GitHub username\"&gt;  &lt;style&gt;   input {     font-size: 20px;     border: 1px solid black;     border-radius: 3px;     margin-bottom: 10px;     padding: 10px;   } &lt;\/style&gt; <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d\u0438 \u0432 scope, \u0442.\u0435. \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0442\u0435\u0433\u043e\u0432 \u0442\u0430\u043c \u0433\u0434\u0435 \u044d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  \u0421\u0442\u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0443\u0434\u0443 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e SFC, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e REPL \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043d\u043e\u0441 CSS\/JS\/HTML \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/kaisermann\/svelte-preprocess\">\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 Svelte<\/a>.<\/p>\n<h3><s>Recompose<\/s><\/h3>\n<p>  \u041e\u0442\u0434\u044b\u0445\u0430\u0435\u043c\u2026<\/p>\n<h3><s>\u041f\u043e\u0442\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/s><\/h3>\n<p>  \u2026 \u0437\u0430\u0433\u043e\u0440\u0430\u0435\u043c\u2026<\/p>\n<h3><s>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/s><\/h3>\n<p>  \u2026 \u043f\u044c\u0435\u043c \u043a\u043e\u0444\u0435\u2026<\/p>\n<h3><s>Recompose + RxJS<\/s><\/h3>\n<p>  \u2026 \u043f\u043e\u043a\u0430 \u0434\u0440\u0443\u0433\u0438\u0435\u2026<\/p>\n<h3><s>Map<\/s><\/h3>\n<p>  \u2026 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.<\/p>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h3>\n<p>  \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0438\u043d\u0434\u0438\u043d\u0433:<\/p>\n<pre><code class=\"html\">&lt;input bind:value=username placeholder=\"GitHub username\"&gt; <\/code><\/pre>\n<p>  \u041d\u0443 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 username \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     data() {       return { \tusername: ''       };     }   }; &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u0447\u043d\u0435\u0442\u0435 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 username \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3h\/xj\/ew\/3hxjewq7xkgqe_uhg5dqdbvt4wy.gif\"><\/p>\n<h3><s>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u044f\u0439\u0446\u0430 \u0438 \u043a\u0443\u0440\u0438\u0446\u044b<\/s><\/h3>\n<p>  \u041d\u0438 \u043a\u0443\u0440\u0438\u0446, \u043d\u0438 \u044f\u0438\u0446, \u043d\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u043c\u0438, \u043c\u044b \u0436\u0435 \u043d\u0435 RxJS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.<\/p>\n<h3><s>\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u0435<\/s><\/h3>\n<p>  \u0412\u0441\u0435 \u0443\u0436\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043e. \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u044c\u0435\u043c \u043a\u043e\u0444\u0435.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User<\/h3>\n<p>  <\/p>\n<blockquote><p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u043c\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c value \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0432 AJAX \u0437\u0430\u043f\u0440\u043e\u0441.<\/p><\/blockquote>\n<p>  \u00ab\u0412\u043e\u0443-\u0432\u043e\u0443-\u0432\u043e\u0443, \u043f\u043e\u043b\u0435\u0433\u0447\u0435\u00bb \u00a9 <\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0443\u043f\u044b\u043c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u044e\u0437\u0435\u0440\u0430 \u043f\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438. \u041c\u0430\u043b\u043e \u043b\u0438 \u043e\u0442\u043a\u0443\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\/\u0438\u043b\u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User.html:<\/p>\n<pre><code class=\"html\">&lt;div class=\"github-card user-card\"&gt;   &lt;div class=\"header User\" \/&gt;     &lt;a class=\"avatar\" href=\"https:\/\/github.com\/{login}\"&gt;       &lt;img src=\"{avatar_url}&amp;s=80\" alt={name}&gt;     &lt;\/a&gt;     &lt;div class=\"content\"&gt;       &lt;h1&gt;{name || login}&lt;\/h1&gt;       &lt;ul class=\"status\"&gt;         &lt;li&gt;           &lt;a href=\"https:\/\/github.com\/{login}?tab=repositories\"&gt; \t    &lt;strong&gt;{public_repos}&lt;\/strong&gt;Repos \t  &lt;\/a&gt; \t&lt;\/li&gt; \t&lt;li&gt; \t  &lt;a href=\"https:\/\/gist.github.com\/{login}\"&gt; \t    &lt;strong&gt;{public_gists}&lt;\/strong&gt;Gists \t  &lt;\/a&gt; \t&lt;\/li&gt; \t&lt;li&gt; \t  &lt;a href=\"https:\/\/github.com\/{login}\/followers\"&gt; \t    &lt;strong&gt;{followers}&lt;\/strong&gt;Followers \t  &lt;\/a&gt; \t&lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/div&gt; &lt;\/div&gt;  &lt;style&gt;   \/* \u0441\u0442\u0438\u043b\u0438 *\/ &lt;\/style&gt; <\/code><\/pre>\n<h3><s>JSX\/CSS<\/s><\/h3>\n<p>  CSS \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412\u043c\u0435\u0441\u0442\u043e JSX \u0443 \u043d\u0430\u0441 <a href=\"https:\/\/github.com\/htmlx-org\/HTMLx\">HTMLx<\/a> \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 Svelte.<\/p>\n<h3><s>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/s><\/h3>\n<p>  \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 User. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App.<\/p>\n<h3><s>debounceTime<\/s><\/h3>\n<p>  \u0414\u0435\u0431\u043e\u0443\u043d\u0441\u0438\u0442\u044c \u0432\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430, \u0435\u0441\u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043b\u0438\u0448\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0430\u043a \u0447\u0442\u043e \u0432 \u0441\u0430\u043c\u043e\u043c \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0435 \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<h3><s>pluck<\/s><\/h3>\n<p>  <\/p>\n<h3><s>filter<\/s><\/h3>\n<p>  <\/p>\n<h3><s>map<\/s><\/h3>\n<p>  <\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c<\/h3>\n<p>  \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0432 App.html \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User:<\/p>\n<pre><code class=\"javascript\">import User from '.\/User.html'; <\/code><\/pre>\n<h3>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>  <\/p>\n<blockquote><p>GitHub \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435: <\/p><\/blockquote>\n<p>  \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0444\u0430\u0439\u043b\u0438\u043a api.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">import axios from 'axios';  export function getUserCard(username) {   return axios.get(`https:\/\/api.github.com\/users\/${username}`)               .then(res =&gt; res.data); } <\/code><\/pre>\n<p>  \u0418 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 App.html.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c: \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 (username) \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e user \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u044e\u0437\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437 API. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u0439 \u043a\u0440\u0430\u0441\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Svelte, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0432 App.html:<\/p>\n<pre><code class=\"html\">&lt;script&gt;   import { getUserCard } from '.\/api.js';   ...   export default {     ...     computed: {       user: ({ username }) =&gt; username &amp;&amp; getUserCard(username)     }   }; &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0412\u0441\u0435, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u0438\u043d\u0434\u0438\u043d\u0433 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0432\u043e\u0434 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435, \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0438 \u043c\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u043c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043b\u0438\u043c\u0438\u0442\u044b.<\/p>\n<p>  \u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0432 RxJS \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 debounceTime, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f standalone \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0442\u0438\u043f\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/debounce-promise\">debounce-promise<\/a> \u0438\u043b\u0438 \u043b\u044e\u0431\u044b\u043c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c, \u0431\u043b\u0430\u0433\u043e \u0435\u0441\u0442\u044c \u0438\u0437 \u0447\u0435\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c.<\/p>\n<pre><code class=\"html\">&lt;script&gt;   import debounce from 'debounce-promise';   import { getUserCard } from '.\/api.js';   ...   const getUser = debounce(getUserCard, 1000);   ...   export default {     ...     computed: {       user: ({ username }) =&gt; username &amp;&amp; getUser(username)     }   }; &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a, \u044d\u0442\u0430 \u043b\u0438\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 debounce-\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0439 \u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435.<\/p>\n<h3><s>switchMap<\/s><\/h3>\n<p>  <\/p>\n<h3>ajax<\/h3>\n<p>  <\/p>\n<blockquote><p>RxJS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e ajax \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e switchMap!<\/p><\/blockquote>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c RxJS \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 switchMap, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 ajax.<\/p>\n<p>  \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/mzabriskie\/axios\">axios<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0434\u043b\u044f \u043c\u0435\u043d\u044f, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0438 \u0441\u0443\u0442\u0438 \u0434\u0435\u043b\u0430 \u044d\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442.<\/p>\n<h3>\u041f\u0440\u043e\u0431\u0443\u0435\u043c<\/h3>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u0433\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u0438\u043c\u043f\u043e\u0440\u0442 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0430:<\/p>\n<pre><code class=\"html\">&lt;script&gt;   import User from '.\/User.html';   ...   export default {     components: { User }     ...   }; &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043a\u0430\u0436\u0443\u0449\u0443\u044e\u0441\u044f \u043b\u0438\u0448\u043d\u044e\u044e \u043f\u0438\u0441\u0430\u043d\u0438\u043d\u0443, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u0442\u0435\u0433\u043e\u0432 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0435\u043b\u0430\u044f \u0432\u0430\u0448\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 user \u2014 \u044d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043f\u0440\u043e\u043c\u0438\u0441 \u043d\u0430 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0445\u0430\u043b\u044f\u0432\u0449\u0438\u043a\u0438 \u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u0442\u044c \u043a\u043e\u0444\u0435 \u0441 \u043f\u0435\u0447\u0435\u043d\u044c\u043a\u0430\u043c\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438:<\/p>\n<pre><code class=\"html\">{#await user} &lt;!-- \u0442\u0443\u0442 \u044d\u0442\u043e \u0435\u0449\u0435 \u043f\u0440\u043e\u043c\u0438\u0441 --&gt; {:then user} &lt;!-- \u0430 \u0437\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0438\u043c\u044f \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435. --&gt;   {#if user}   &lt;User {...user} \/&gt;   {\/if} {\/await} <\/code><\/pre>\n<p>  \u0418\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 User. Spread-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u00ab\u0440\u0430\u0441\u0449\u0435\u043f\u0438\u0442\u044c\u00bb \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 User.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ml\/1c\/1c\/ml1c1c5qwdhfpq4slz_38vjoym8.gif\"><\/p>\n<p>  \u041a\u043e\u0440\u043e\u0447\u0435 \u0440\u0430\u0431\u043e\u0442\u0438\u043d\u0433.<\/p>\n<h3>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/h3>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<br \/>  \u2026<br \/>  \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u043c\u0430\u043d\u043e.<\/p><\/blockquote>\n<p>  \u0412\u0430\u0448\u0435 \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0434\u0430, \u043d\u043e \u043d\u0430\u0448\u0435 \u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0442))) \u041f\u0440\u043e\u0441\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u043e.<\/p>\n<h3>catchError<\/h3>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 rejected-\u043f\u0440\u043e\u043c\u0438\u0441\u0430:<\/p>\n<pre><code class=\"html\">{#await user} {:then user}   {#if user}   &lt;User {...user} \/&gt;   {\/if} {:catch error}   &lt;Error {...error} \/&gt; {\/await} <\/code><\/pre>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Error<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"error\"&gt;   &lt;h2&gt;Oops!&lt;\/h2&gt;   &lt;b&gt;{response.status}: {response.data.message}&lt;\/b&gt;   &lt;p&gt;Please try searching again.&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448 UI \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435:<\/p><\/blockquote>\n<p>  \u0418 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435, \u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u0438\u043b\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ix\/2k\/af\/ix2kaf9saodoqtihwcajw_rb2s4.gif\"><\/p>\n<h3>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h3>\n<p>  \u041a\u043e\u0440\u043e\u0447\u0435 \u0442\u0430\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u0435\u0440\u0435\u0441\u044c \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c, \u0441\u043e \u0432\u0441\u044f\u043a\u0438\u043c\u0438 \u0442\u0430\u043c BehaviorSubject-\u0430\u043c\u0438 \u0438 \u0438\u0436\u0435 \u0441 \u043d\u0438\u043c\u0438. \u041c\u044b \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0438\u0442\u044c \u0441\u043b\u043e\u043d\u0430:<\/p>\n<pre><code class=\"html\">{#await user}   &lt;h3&gt;Loading...&lt;\/h3&gt; {:then user}   {#if user}   &lt;User {...user} \/&gt;   {\/if} {:catch error}   &lt;Error {...error} \/&gt; {\/await} <\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?<\/p><\/blockquote>\n<p>  \u0414\u0432\u0430 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0445 logic-less \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (User \u0438 Error) \u0438 \u043e\u0434\u0438\u043d \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (App), \u0433\u0434\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0431\u043c\u0430\u0437\u044b\u0432\u0430\u043d\u0438\u0439 observable-\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0441 \u043d\u043e\u0433 \u0434\u043e \u0433\u043e\u043b\u043e\u0432\u044b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439 +100500 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b.<\/p>\n<p>  \u2192 <a href=\"https:\/\/svelte.technology\/repl?version=2.9.11&amp;gist=0a5aa0a79dd7a6c1361ff90a67dc3a55\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043a\u0430<\/a><\/p>\n<p>  \u041f\u0438\u0448\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043a\u043e\u0434. \u041f\u0438\u0448\u0438\u0442\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0441\u0435\u043c\u044c\u0435\u0439. \u0416\u0438\u0432\u0438\u0442\u0435! <\/p>\n<p>  \u0412\u0441\u0435\u043c \u0441\u0447\u0430\u0441\u0442\u044c\u044f \u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f!<\/p>\n<blockquote><p>\u0412\u0441\u0435 \ud83d\ude42<\/p><\/blockquote>\n<h4>FYI<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 REPL, \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e\u0441\u0442 \u0441 warning&#8217;\u043e\u043c \u0441\u043b\u0435\u0432\u0430 \u0432\u043d\u0438\u0437\u0443:  <\/p>\n<blockquote><p>Compiled, but with 1 warning \u2014 check the console for details<\/p><\/blockquote>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u043b\u0435\u043d\u0438\u0442\u0435\u0441\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:  <\/p>\n<blockquote><p>Unused CSS selector<br \/>  .user-card .Organization {<br \/>   background-position: top right;<br \/>  }  <\/p><\/blockquote>\n<p>  \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 Svelte \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 \u0436\u0435\u043b\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u043f\u043e\u0432\u0435\u043b\u0435\u043d\u0438\u044e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0443 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0438\u0437 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e css-\u0431\u0430\u043d\u0434\u043b\u0430 \u0431\u0435\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u0438\u044f.<\/p>\n<h4>P\/S<\/h4>\n<p>  \u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0438 <a href=\"https:\/\/habr.com\/search\/?q=svelte#h\">\u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u043e Svelte<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b <a href=\"https:\/\/t.me\/sveltejs\">SvelteJS<\/a>. \u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0434\u044b \u0432\u0430\u043c!<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \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\/post\/419653\/\"> https:\/\/habr.com\/post\/419653\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/419653\/\" class=\"post__text post__text-html js-mediator-article\">\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e-\u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/habr.com\/post\/419559\/\">\u00ab\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f React + RxJS 6 + Recompose\u00bb<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432\u0447\u0435\u0440\u0430 \u043d\u0430\u0443\u0447\u0438\u043b\u0430 \u043d\u0430\u0441 \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React, RxJS \u0438 Recompose \u0432\u043c\u0435\u0441\u0442\u0435. \u0427\u0442\u043e \u0436, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u043e\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o_\/ig\/ob\/o_igobe416ik1nqyqp0pa8m0dbo.png\">  <\/p>\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-287514","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/287514","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=287514"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/287514\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=287514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=287514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=287514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}