{"id":302964,"date":"2020-05-03T21:00:27","date_gmt":"2020-05-03T21:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302964"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302964","title":{"rendered":"\u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/493430\/\">\u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u043d\u043e\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c, \u0442.\u043a. \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0432\u0435\u0431\u0435 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043e\u0447\u0435\u043d\u044c \u0441\u043a\u0443\u0434\u043d\u043e, \u0445\u043e\u0442\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0435\u0441\u0442\u044c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u043d\u0430 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/microsoft\/vscode\/tree\/master\/src\/vs\/editor\/common\" rel=\"nofollow\">\u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 VS Code<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dj\/ju\/vy\/djjuvyjprjf_nnnb0bv34ymklkc.png\" alt=\"\u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430\"><\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432\u044b \u043e\u0442\u0432\u044f\u0436\u0435\u0442\u0435\u0441\u044c \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0421\u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 React, Preact, Vue, Mithril \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438, \u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0434\u0430\u0436\u0435 \u0432\u044c\u044e\u0445\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular 1, \u0432\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u043d\u0430 Angular 2+, React, Svelte, WebComponents \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular 2+, \u043d\u043e \u043d\u0435\u0442\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0435\u0433\u043e, \u0442\u043e \u0432\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438. \u0410 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0444\u0440\u0435\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0427\u0442\u043e \u0436\u0435 \u044d\u0442\u043e \u0437\u0430 \u043c\u0430\u0433\u0438\u044f \u0442\u0430\u043a\u0430\u044f?<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/h2>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u044d\u0442\u043e, \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u043d\u0438\u0433\u0443 <a href=\"https:\/\/www.ozon.ru\/context\/detail\/id\/144499396\/\" rel=\"nofollow\">\u041c\u0430\u0440\u0442\u0438\u043d\u0430 \u0420\u043e\u0431\u0435\u0440\u0442\u0430 \u00ab\u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430\u00bb<\/a> (<a href=\"https:\/\/www.amazon.com\/Clean-Architecture-Craftsmans-Software-Structure\/dp\/0134494164\" rel=\"nofollow\">Robert C.Martin \u00abClean Architecture\u00bb<\/a>). \u041a\u0440\u0430\u0442\u043a\u0430\u044f \u0432\u044b\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432 <a href=\"https:\/\/habr.com\/ru\/post\/269589\/\">\u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0434\u0435\u0438 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443:  <\/p>\n<ol>\n<li><b>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/b> \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0442\u0438\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0432 \u0440\u0430\u043c\u043a\u0438 \u0435\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439.<\/li>\n<li><b>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c.<\/b> \u0411\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0431\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<li><b>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043ec\u0442\u044c \u043e\u0442 UI.<\/b> \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c, \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0435\u043d \u043d\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0439, \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b.<\/li>\n<li><b>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043ec\u0442\u044c \u043e\u0442 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445.<\/b> \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c Oracle \u0438\u043b\u0438 SQL Server \u043d\u0430 MongoDB, BigTable, CouchDB \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435. \u0412\u0430\u0448\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<li><b>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430.<\/b> \u041f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432\u0430\u0448\u0438 \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u043c\u0438\u0440\u0435.<\/li>\n<\/ol>\n<p>  \u0418\u0434\u0435\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0435 \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u0430\u043c\u044b\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0444\u0435\u0440\u0430\u0445. <\/p>\n<p>  \u0414\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0437\u0430 \u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u043b\u043e\u0438 Service, Repository, Model. \u042f \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a \u0427\u0438\u0441\u0442\u043e\u0439 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 MVC \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043b\u043e\u0438:<\/p>\n<ul>\n<li><b>View<\/b> \u2014 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0443, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/li>\n<li><b>Controller<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c IO (\u0432\u0432\u043e\u0434-\u0432\u044b\u0432\u043e\u0434).<\/li>\n<li><b>Service<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0435\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/li>\n<li><b>Repository<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, api, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043f\u0440.<\/li>\n<li><b>Models<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043b\u043e\u044f\u043c\u0438 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430 \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0438\u0436\u0435.<\/p>\n<h2>\u041a\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/h2>\n<p>  \u0412\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0448\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0443\u0442\u044c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 jquery \u0434\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0418 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043b\u0438 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0442\u0430\u043b\u043e \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c\u043e \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435, \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u0448\u0443\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u043d\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432, \u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u043e\u0442\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0434\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0445 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432.<\/p>\n<p>  \u0412 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432, \u0442\u043e \u0427\u0438\u0441\u0442\u0443\u044e \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043a\u0443\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435 \u0438 \u0432\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u0442\u043e \u0432\u044b \u043d\u0435 \u043f\u0440\u043e\u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u0427\u0438\u0441\u0442\u043e\u0439 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b, \u043d\u043e \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u043b\u0430\u0446\u0434\u0430\u0440\u043c\u043e\u043c \u0434\u043b\u044f \u0432\u0437\u0440\u044b\u0432\u043d\u043e\u0433\u043e \u0440\u043e\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0413\u0434\u0435 \u0443\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f?<\/h2>\n<p>  \u0427\u0438\u0441\u0442\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443, \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0438\u043b\u0438 \u044f\u0437\u044b\u043a\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u0435\u0441\u044f\u0442\u0438\u043b\u0435\u0442\u0438\u044f \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0415\u0433\u043e \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Asp.Net Core, Java Spring \u0438 NestJS. \u0422\u0430\u043a \u0436\u0435 \u043e\u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 iOs \u0438 Android \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041d\u043e \u0432 \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u043b \u0432 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 Angular.<\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u044f \u0441\u0430\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Typescript, \u043d\u043e \u0438 C# \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0442\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0434\u043b\u044f Asp.Net Core.<\/p>\n<p>  \u0412\u043e\u0442 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Asp.Net Core<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">    \/**      * View      *\/      @model WebApplication1.Controllers.Profile      &lt;div class=&quot;text-center&quot;&gt;         &lt;h1&gt;\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c @Model.FirstName&lt;\/h1&gt;     &lt;\/div&gt;      \/**      * Controller      *\/      public class IndexController : Controller     {         private static int _counter = 0;         private readonly IUserProfileService _userProfileService;          public IndexController(IUserProfileService userProfileService)         {             _userProfileService = userProfileService;         }          public async Task&lt;IActionResult&gt; Index()         {             var profile = await this._userProfileService.GetProfile(_counter);             return View(&quot;Index&quot;, profile);         }          public async Task&lt;IActionResult&gt; AddCounter()         {             _counter += 1;             var profile = await this._userProfileService.GetProfile(_counter);             return View(&quot;Index&quot;, profile);         }     }      \/**      * Service      *\/      public interface IUserProfileService     {         Task&lt;Profile&gt; GetProfile(long id);     }      public class UserProfileService : IUserProfileService     {         private readonly IUserProfileService _userProfileService;          public UserProfileService(IUserProfileService userProfileService)         {             this._userProfileService = userProfileService;         }          public async Task&lt;Profile&gt; GetProfile(long id)         {             return await this._userProfileService.GetProfile(id);         }     }      \/**      * Repository      *\/      public interface IUserProfileRepository     {         Task&lt;Profile&gt; GetProfile(long id);     }      public class UserProfileRepository : IUserProfileRepository     {         private readonly DBContext _dbContext;         public UserProfileRepository(DBContext dbContext)         {             this._dbContext = dbContext;         }          public async Task&lt;Profile&gt; GetProfile(long id)         {             return await this._dbContext                 .Set&lt;Profile&gt;()                 .FirstOrDefaultAsync((entity) =&gt; entity.Id.Equals(id));         }     }      \/**      * Model      *\/      public class Profile     {         public long Id { get; set; }         public string FirstName { get; set; }         public string Birthdate { get; set; }     } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e \u0432 \u043d\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e, \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0434\u043b\u044f Asp.Net Core \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0434\u043b\u044f Java Spring, WinForms, Android, React \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0443\u0442 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u044f\u0437\u044b\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0432\u044c\u044e\u0445\u043e\u0439 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c).<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445<\/h2>\n<p>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0427\u0438\u0441\u0442\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0431\u044b\u043b Angular. \u041d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0436\u0430\u0441\u043d\u043e, \u0447\u0442\u043e \u0432 1, \u0447\u0442\u043e \u0432 2+.<\/p>\n<p>  \u0418 \u043f\u0440\u0438\u0447\u0438\u043d \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e:  <\/p>\n<ol>\n<li><b>Angular \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/b> \u0418 \u044d\u0442\u043e \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0415\u0441\u043b\u0438 \u0442\u0435\u0431\u0435 \u0432 \u043d\u0435\u043c \u0447\u0442\u043e \u0442\u043e \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u0442\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0434\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e, \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u043f\u043e\u0434\u0435\u043b\u0430\u0442\u044c. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432 \u043d\u0435\u043c \u043c\u0430\u0441\u0441\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0445 \u043c\u0435\u0441\u0442, \u0442\u0430\u043a \u044d\u0442\u043e \u0435\u0449\u0435 \u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0442 \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0438 \u0447\u0438\u0441\u0442\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b.<\/li>\n<li><b>\u0423\u0436\u0430\u0441\u043d\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u043f\u0430\u0442\u0435\u0440\u043d\u0430 DI.<\/b> \u0415\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u043b\u0438 \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u0431\u0435\u0437 \u0443\u0447\u0435\u0442\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e Javascript.<\/li>\n<li><b>\u0423\u0436\u0430\u0441\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/b> \u041e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0435 JSX. \u0414\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 6, \u0430 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435. \u0410 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0432\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438\u0437 \u0440\u0430\u0437\u0440\u044f\u0434\u0430 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u043a\u0438.<\/li>\n<li><b>\u0421\u0442\u0430\u0440\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440.<\/b> \u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0431\u0430\u043d\u0434\u043b\u0435\u0440 Rollup \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c ES2015 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c 2 \u0431\u0430\u043d\u0434\u043b\u0430 \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0438 \u043d\u043e\u0432\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0443\u0436\u0435 4 \u0433\u043e\u0434\u0430, \u0442\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a angular \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 9.<\/li>\n<li><b>\u0418 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/b> \u0412 \u0446\u0435\u043b\u043e\u043c \u0434\u043e \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043e\u043a\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043b\u0435\u0442 \u0432 5 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e React.<\/li>\n<\/ol>\n<p>  \u041d\u043e \u0447\u0442\u043e \u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438? React, Vue, Preact, Mithril \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b\u2026 \u0430 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c\u2026 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435!<\/p>\n<h2>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0420\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0427\u0438\u0441\u0442\u0443\u044e \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0431\u0443\u0434\u0435\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u042d\u0442\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u0432 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0442\u0430\u0440\u0438\u0444\u044b \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<br \/>   <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fy\/sj\/jf\/fysjjf8fyz7rq0tzeaboesysuxw.jpeg\" alt=\"\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\"><\/p>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043b\u0438\u0448\u044c \u043c\u0430\u043b\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u043d\u043e \u043f\u043e \u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0433\u0434\u0435 \u0438 \u043a\u0430\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u041d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441\u043e \u0441\u043b\u043e\u044f Controller, \u0430 View \u0441\u043b\u043e\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435. \u0410 \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0435\u0435.<\/p>\n<h2>\u041f\u0430\u0442\u0442\u0435\u0440\u043d Controller<\/h2>\n<p>  <b>Controller<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u043d\u0430 \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0438\u043b\u0438 \u0432\u0432\u043e\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043b\u0438\u043d\u0443\u043a\u0441\u0430, \u0438\u043b\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 IO \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0432 \u0447\u0438\u0441\u0442\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"actionscript\">export class SimpleController { \/\/ extends React.Component&lt;object, object&gt;      public todos: string[] = []; \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430      public addTodo(todo: string): void { \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f         this.todos.push(todo);     }      public removeTodo(index: number): void { \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f         this.todos.splice(index, 1);     }      \/\/ public render(): JSX.Element {...} \/\/ view injection  } <\/code><\/pre>\n<p>  \u0415\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b. \u0412 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Controller \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e View, \u0438 \u0442\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Web, React-Native \u0438\u043b\u0438 Electron.<\/p>\n<p>  \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0442\u0430\u0440\u0438\u0444\u044b \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0439 \u0442\u0430\u0440\u0438\u0444 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e:<\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class UserPageControlle {      public userProfile: any = {};     public insuranceCases: any[] = [];     public tariffs: any[] = [];     public bestTariff: any = {};      constructor() {         this.activate();     }      public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; { \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445         try {             const response = await fetch(&quot;.\/api\/user-profile&quot;);             this.userProfile = await response.json();             this.findBestTariff();         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; { \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445         try {             const response = await fetch(&quot;.\/api\/tariffs&quot;);             this.tariffs = await response.json();             this.findBestTariff();         } catch (e) {             console.error(e);         }     }      public findBestTariff(): void { \/\/ \u043c\u0435\u0442\u043e\u0434 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439         if (this.userProfile &amp;&amp; this.tariffs) {             this.bestTariff = this.tariffs.find((tarif: any) =&gt; {                 return tarif.ageFrom &lt;= this.userProfile.age &amp;&amp; this.userProfile.age &lt; tarif.ageTo;             });         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0423 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0431\u0435\u0437 \u0447\u0438\u0441\u0442\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b, \u0435\u0441\u043b\u0438 \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442 React.Component \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u0422\u0430\u043a \u043f\u0438\u0448\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u0443 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u0412\u0435\u0434\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0442\u0430\u0440\u0438\u0444 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043b\u0438\u0447\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435, \u043d\u043e \u0438 \u043d\u0430 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u0438 \u043c\u043d\u043e\u0436\u0435\u0442\u0441\u0432\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a \u0443\u0441\u043b\u0443\u0433\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Service.<\/p>\n<h2>\u041f\u0430\u0442\u0442\u0435\u0440\u043d Service<\/h2>\n<p>  <b>Service<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0441\u044e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 Controller&#8217;\u0443 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 \u043e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 Service. \u0415\u0441\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0430, \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 Service. \u041d\u043e \u0441\u0430\u043c \u0441\u043b\u043e\u0439 Service \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u043e \u0441\u043b\u043e\u0435 Controller \u0438 View \u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u043c \u0441\u0435\u0440\u0432\u0438\u0441 \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440:<\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0431\u0435\u0437 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;;  export class UserPageController {      public userProfile: any = {};     public insuranceCases: any[] = [];     public tariffs: any[] = [];     public bestTariff: any = {};      \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440     private readonly userProfilService: UserProfilService = new UserProfilService();     private readonly tarifService: TariffService = new TariffService();      constructor() {         this.activate();     }      public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445             this.tariffs = await this.tarifService.getTariffs();         } catch (e) {             console.error(e);         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class UserProfilService {     public async getUserProfile(): Promise&lt;any&gt; { \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445         const response = await fetch(&quot;.\/api\/user-profile&quot;);         return await response.json();     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class TariffService {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445     public async getTariffs(): Promise&lt;any&gt; {         const response = await fetch(&quot;.\/api\/tariffs&quot;);         return await response.json();     }      \/\/ \u043c\u0435\u0442\u043e\u0434 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439     public async findBestTariff(userProfile: any): Promise&lt;any&gt; {         const tariffs = await this.getTariffs();         return tariffs.find((tarif: any) =&gt; {             return tarif.ageFrom &lt;= userProfile.age &amp;&amp;                 userProfile.age &lt; tarif.ageTo;         });     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u0442\u0430\u0440\u0438\u0444\u044b, \u043e\u043d\u0438 \u0441\u043c\u043e\u0433\u0443 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443\u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0412 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e SOLID \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0432\u043e\u044e \u0437\u043e\u043d\u0443 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438.<\/p>\n<p>  \u041d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0441\u043b\u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 fetch \u043c\u043e\u0436\u0435\u0442 \u0441\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430 websocket \u0438\u043b\u0438 grps \u0438\u043b\u0438 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438? \u0418 \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u0447\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0435 \u0447\u0442\u043e \u0442\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445? \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043b\u043e\u0439 Repository.<\/p>\n<h2>\u041f\u0430\u0442\u0442\u0435\u0440\u043d Repository<\/h2>\n<p>  <b>Repository <\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0430\u043c\u044f\u0442\u044c, localstorage, sessionstorage \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435. \u0415\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0439 Service \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u043c:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;;  export class UserProfilService {      private readonly userProfilRepository: UserProfilRepository =         new UserProfilRepository();      public async getUserProfile(): Promise&lt;any&gt; {         return await this.userProfilRepository.getUserProfile();     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilRepository. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class UserProfilRepository {     public async getUserProfile(): Promise&lt;any&gt; { \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445         const response = await fetch(&quot;.\/api\/user-profile&quot;);         return await response.json();     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffRepository } from &quot;.\/TariffRepository&quot;;  export class TariffService {          private readonly tarifRepository: TariffRepository = new TariffRepository();      public async getTariffs(): Promise&lt;any&gt; {         return await this.tarifRepository.getTariffs();     }      \/\/ \u043c\u0435\u0442\u043e\u0434 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439     public async findBestTariff(userProfile: any): Promise&lt;any&gt; {         \/\/ \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445         const tariffs = await this.tarifRepository.getTariffs();         return tariffs.find((tarif: any) =&gt; {             return tarif.ageFrom &lt;= userProfile.age &amp;&amp;                 userProfile.age &lt; tarif.ageTo;         });     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class TariffRepository {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445     public async getTariffs(): Promise&lt;any&gt; {         const response = await fetch(&quot;.\/api\/tariffs&quot;);         return await response.json();     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u043b\u044e\u0431\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043c\u043e\u043a\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u0412 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 UserProfilService \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044e \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0412 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u0431\u0438\u0437\u043d\u0435\u0441 \u0441\u043b\u043e\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u043b\u0438 \u043e\u0431\u043e\u0433\u0430\u0442\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u0432 \u0441\u043b\u043e\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043d\u0435\u0442\u0443 \u043b\u043e\u0433\u0438\u043a\u0438 \u0446\u0435\u043f\u043e\u0447\u043a\u0430 Controller \u2014 Service \u2014 Repository \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u0432\u043a\u043b\u0430\u0434 \u0432 \u0432\u0430\u0448\u0435 \u0437\u0430\u0432\u0442\u0440\u0430.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u0437\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u043b\u0438 \u043e\u043d\u0438 \u0432\u043e\u043e\u0431\u0449\u0435. \u0417\u0430 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0441\u043b\u043e\u0439 Models.<\/p>\n<h2>\u041c\u043e\u0434\u0435\u043b\u0438: DTO, Entities, ViewModels<\/h2>\n<p>  <b>Models<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u043d\u044f\u0442\u044c \u0441 \u0447\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0435\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<p>  \u041c\u043e\u0434\u0435\u043b\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b:  <\/p>\n<ul>\n<li><b>Entities<\/b> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<li><b>DTO (Data Transfer Object)<\/b> \u2014 \u0441\u043b\u0443\u0436\u0430\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li><b>ViewModel<\/b> \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438.<\/li>\n<\/ul>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438 \u0441\u043e\u043e\u0431\u0449\u0438\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043b\u043e\u044f\u043c \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0435 \u0441 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0430 \u0441 \u0432\u043f\u043e\u043b\u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u0438\u043f\u0430 any \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { InsuranceCaseDto } from &quot;.\/InsuranceCasesDto&quot;;  export class UserPageController {      \/**      * \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u0442\u0438\u043f\u0430 \u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438      * \u043a\u0430\u043a \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u0442.      *\/     public userProfile: UserProfileDto = new UserProfileDto();     public insuranceCases: InsuranceCaseDto[] = [];     public tariffs: TariffDto[] = [];     public bestTariff: TariffDto | void = void 0;      private readonly userProfilService: UserProfilService = new UserProfilService();     private readonly tarifService: TariffService = new TariffService();      constructor() {         this.activate();     }      public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             this.tariffs = await this.tarifService.getTariffs();         } catch (e) {             console.error(e);         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilService. \u0412\u043c\u0435\u0441\u0442\u043e any \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;;  export class UserProfilService {      private readonly userProfilRepository: UserProfilRepository =         new UserProfilRepository();      public async getUserProfile(): Promise&lt;UserProfileDto&gt; { \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c         return await this.userProfilRepository.getUserProfile();     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffService. \u0412\u043c\u0435\u0441\u0442\u043e any \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffRepository } from &quot;.\/TariffRepository&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;;  export class TariffService {          private readonly tarifRepository: TariffRepository = new TariffRepository();      public async getTariffs(): Promise&lt;TariffDto[]&gt; { \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c         return await this.tarifRepository.requestTariffs();     }      \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c     public async findBestTariff(userProfile: UserProfileDto): Promise&lt;TariffDto | void&gt; {         const tariffs = await this.tarifRepository.requestTariffs();         return tariffs.find((tarif: TariffDto) =&gt; {             \/\/ \u0431\u044b\u043b\u043e userProfile.age \u0441\u0442\u0430\u043b\u043e userProfile.getAge()             const age = userProfile.getAge();             return age &amp;&amp;                 tarif.ageFrom &lt;= age &amp;&amp;                 age &lt; tarif.ageTo;         });     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilRepository. \u0412\u043c\u0435\u0441\u0442\u043e any \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;;  export class UserProfilRepository {     public async getUserProfile(): Promise&lt;UserProfileDto&gt; { \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c         const response = await fetch(&quot;.\/api\/user-profile&quot;);         return await response.json();     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0412\u043c\u0435\u0441\u0442\u043e any \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffDto } from &quot;.\/TariffDto&quot;;  export class TariffRepository {     public async requestTariffs(): Promise&lt;TariffDto[]&gt; { \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c         const response = await fetch(&quot;.\/api\/tariffs&quot;);         return await response.json();     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfileDto. \u041c\u043e\u0434\u0435\u043b\u044c \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class UserProfileDto { \/\/ &lt;-- \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043b\u043e\u0433\u0438\u043a\u043e\u0439     public firstName: string | null = null;     public lastName: string | null = null;     public birthdate: Date | null = null;      public getAge(): number | null {         if (this.birthdate) {             const ageDifMs = Date.now() - this.birthdate.getTime();             const ageDate = new Date(ageDifMs);             return Math.abs(ageDate.getUTCFullYear() - 1970);         }         return null;     }      public getFullname(): string | null {         return [             this.firstName ?? &quot;&quot;,             this.lastName ?? &quot;&quot;         ]             .join(&quot; &quot;)             .trim() || null;     }  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffDto. \u041c\u043e\u0434\u0435\u043b\u044c \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">export class TariffDto {     public ageFrom: number = 0;     public ageTo: number = 0;     public price: number = 0; } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043a\u0430\u043a\u043e\u043c \u0431\u044b \u0441\u043b\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u043c\u044b \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0435\u043c \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c. \u0422\u0430\u043a \u0436\u0435 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0435. \u0412 \u043b\u043e\u0433\u0438\u043a\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e userProfile.age, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u0434\u0430\u0442\u0430 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f. \u0410 \u0434\u043b\u044f \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0434\u0435\u043b\u0438 userProfile.getAge().<\/p>\n<p>  \u041d\u043e \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b <i>response.json()<\/i> \u0438 <i>JSON.parse()<\/i> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0435 \u043d\u0430\u0448\u0443 \u043c\u043e\u0434\u0435\u043b\u044c, \u0430 \u043e\u0431\u044a\u0435\u043a\u0442 JSON, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e. \u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 userProfile instanceof UserProfileDto, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043b\u043e\u0436\u043d\u043e\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0414\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<h2>\u0414\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>  <b>Deserialization<\/b> \u2014 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0431\u0430\u0439\u0442. \u0415\u0441\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0430\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u044f\u0445, \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0430\u0449\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0418 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0442\u0443\u0442 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 ES2015 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u043e <i>class<\/i> \u0437\u0430\u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e\u2026 \u0422\u043e \u0447\u0442\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u044f\u0437\u044b\u043a\u0430\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0432 ES2015 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u043b\u0438\u2026<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043d\u043e\u044e \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"https:\/\/github.com\/LabEG\/Serializable\" rel=\"nofollow\">TS-Serializable<\/a>, \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/habr.com\/ru\/post\/428812\/\">\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>. \u0426\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u0430\u043c\u0443 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;;  export class UserProfilRepository {     public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         const response = await fetch(&quot;.\/api\/user-profile&quot;);         const object = await response.json();         return new UserProfileDto().fromJSON(object); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e     }          \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffDto } from &quot;.\/TariffDto&quot;;  export class TariffRepository {     public async requestTariffs(): Promise&lt;TariffDto[]&gt; { \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c         const response = await fetch(&quot;.\/api\/tariffs&quot;);         const objects: object[] = await response.json();         return objects.map((object: object) =&gt; {             return new TariffDto().fromJSON(object); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e         });     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">ProfileDto . \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { Serializable, jsonProperty } from &quot;ts-serializable&quot;;  export class UserProfileDto extends Serializable { \/\/ &lt;-- \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430      @jsonProperty(String, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public firstName: string | null = null;      @jsonProperty(String, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public lastName: string | null = null;      @jsonProperty(Date, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public birthdate: Date | null = null;      public getAge(): number | null {         if (this.birthdate) {             const ageDifMs = Date.now() - this.birthdate.getTime();             const ageDate = new Date(ageDifMs);             return Math.abs(ageDate.getUTCFullYear() - 1970);         }         return null;     }      public getFullname(): string | null {         return [             this.firstName ?? &quot;&quot;,             this.lastName ?? &quot;&quot;         ]             .join(&quot; &quot;)             .trim() || null;     }  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffDto. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { Serializable, jsonProperty } from &quot;ts-serializable&quot;;  export class TariffDto extends Serializable { \/\/ &lt;-- \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430      @jsonProperty(Number, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public ageFrom: number = 0;      @jsonProperty(Number, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public ageTo: number = 0;      @jsonProperty(Number, null) \/\/ &lt;-- \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440     public price: number = 0;  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u044f\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u0442\u0435\u043c\u0438 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c. \u0412 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u043e\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0414\u043b\u044f \u0447\u0435\u0433\u043e Serializable  \u0438 jsonProperty ?<\/b>                         <\/p>\n<div class=\"spoiler_text\">\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 Serializable \u2014 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Ecmascript \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441 \u043d\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0432 Typescript. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 jsonProperty \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0445 \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u044d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0443 Typescript \u043e\u0447\u0435\u043d\u044c \u043d\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0430\u044f \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044f \u0438 \u043e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f uniontypes. \u041d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0438 \u0438\u043b\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0435\u0440\u043e\u0432 \u043e\u0442 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f.  <\/div>\n<\/p><\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0432 \u0441\u043b\u043e\u044f\u0445 Controller, Service \u0438 Models. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0441\u043b\u043e\u0435 Repository \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c Repository \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0439\u0434\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Dependency Injection.<\/p>\n<h2>Dependency Injection \u2014 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/h2>\n<p>  <b>Dependency Injection<\/b> \u2014 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0441\u043b\u043e\u0438 Contoller, Service, Repository \u0438 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u0435\u0432.<\/p>\n<p>  \u0412 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 \u0441\u043b\u043e\u0439 Controller \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043b\u043e\u044f Service, \u0430 \u043e\u043d \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043b\u043e\u044f Repository. \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0441\u043b\u043e\u0438 \u0441\u0430\u043c\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430. \u0410 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u0441\u043b\u043e\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437 \u0432\u043d\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u044d\u0442\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043d\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435.<\/p>\n<p>  \u0422\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"actionscript\">var programm = new IndexPageController(new ProfileService(new ProfileRepository())); <\/code><\/pre>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c \u2014 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0430\u0441\u043d\u043e. \u0414\u0430\u0436\u0435 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u044d\u0442\u043e \u0443\u0436\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0430\u0441\u043d\u043e. \u0427\u0442\u043e \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0442\u043d\u0438 \u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0439\u0442\u0438. \u0415\u0441\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043e\u043f\u044b\u0442\u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Asp.Net Core \u0442\u043e \u0442\u0430\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"actionscript\">DI.register(IProfileService,ProfileService); <\/code><\/pre>\n<p>  \u0430 \u0434\u0430\u043b\u0435\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0443\u0436\u0435 \u0441\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u0442 \u044d\u0442\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n<p>  \u041d\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:  <\/p>\n<ol>\n<li>\u041f\u0440\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 Typescript \u0432 Javascript \u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043d\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0438 \u0441\u043b\u0435\u0434\u0430.<\/li>\n<li>\u0412\u0441\u0435 \u0447\u0442\u043e \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 DI \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u043c \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430. \u0415\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435. \u0410 \u0432 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u0439\u0442.<\/li>\n<li>\u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 DI \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u0437\u0430\u043d\u044f\u0442\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438.<\/li>\n<\/ol>\n<p>  \u0412 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 DI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Angular 2+. \u0412 Angular 1 \u043f\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0442\u0440\u043e\u043a\u0430, \u0432 InversifyJS \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043d\u0442\u0440\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Symbol. \u0418 \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0436\u0430\u0441\u043d\u043e, \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e new \u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0447\u0435\u043c \u044d\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0431\u044b\u043b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 DI, \u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043c\u043d\u0435 \u043f\u043e\u043c\u043e\u0433 \u043d\u0430\u0439\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Java Spring \u0438 \u0435\u0433\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 autowired. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e DI \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/habr.com\/ru\/post\/496860\/\">\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>, \u0430 <a href=\"https:\/\/github.com\/LabEG\/first-di\" rel=\"nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 GitHub<\/a>.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f DI \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<h2>\u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435<\/h2>\n<p>  \u0414\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f DI \u043d\u0430 \u0432\u0441\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430\u043a\u0438\u043d\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 reflection, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043c\u0435\u0442\u0430\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0438\u043f\u0430\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u0412 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0433\u0434\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 autowired. \u0410 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0433\u0434\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0432 \u043a\u0430\u043a\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f UserProfilRepository \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u043d\u043e \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">Main.ts. \u041c\u0435\u0441\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { override } from &quot;first-di&quot;; import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { MockUserProfilRepository } from &quot;.\/MockUserProfilRepository&quot;;  if (process.env.NODE_ENV === &quot;test&quot;) {     \/\/ \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435     override(UserProfilRepository, MockUserProfilRepository); } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 autowired<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { InsuranceCaseDto } from &quot;.\/InsuranceCasesDto&quot;; import { autowired } from &quot;first-di&quot;;  export class UserPageController {      public userProfile: UserProfileDto = new UserProfileDto();     public insuranceCases: InsuranceCaseDto[] = [];     public tariffs: TariffDto[] = [];     public bestTariff: TariffDto | void = void 0;      @autowired() \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c     private readonly userProfilService!: UserProfilService;      @autowired() \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c     private readonly tarifService!: TariffService;      constructor() {         \/\/ \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0442.\u043a. \u0437\u0430\u043d\u044f\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c         this.activate();     }      public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             this.tariffs = await this.tarifService.getTariffs();         } catch (e) {             console.error(e);         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilService. \u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0438 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class UserProfilService {      private readonly userProfilRepository: UserProfilRepository;      constructor(userProfilRepository: UserProfilRepository) {         \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440         this.userProfilRepository = userProfilRepository;     }      public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         return await this.userProfilRepository.getUserProfile();     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffService. \u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0438 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffRepository } from &quot;.\/TariffRepository&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class TariffService {      private readonly tarifRepository: TariffRepository;      constructor(tarifRepository: TariffRepository) {         \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440         this.tarifRepository = tarifRepository;     }      public async getTariffs(): Promise&lt;TariffDto[]&gt; {         return await this.tarifRepository.requestTariffs();     }      public async findBestTariff(userProfile: UserProfileDto): Promise&lt;TariffDto | void&gt; {         const tariffs = await this.tarifRepository.requestTariffs();         return tariffs.find((tarif: TariffDto) =&gt; {             const age = userProfile.getAge();             return age &amp;&amp;                 tarif.ageFrom &lt;= age &amp;&amp;                 age &lt; tarif.ageTo;         });     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438      *\/ }  <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilRepository. \u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class UserProfilRepository {     public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         const response = await fetch(&quot;.\/api\/user-profile&quot;);         const object = await response.json();         return new UserProfileDto().fromJSON(object);     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">MockUserProfilRepository. \u041d\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class MockUserProfilRepository { \/\/ \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432     public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         const profile = new UserProfileDto();         profile.firstName = &quot;\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u044f&quot;;         profile.lastName = &quot;\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438\u043d\u043e\u043f\u043e\u043b\u044c\u0441\u043a\u0430\u044f&quot;;         profile.birthdate = new Date(Date.now() - 1.5e12);         return Promise.resolve(profile); \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffDto } from &quot;.\/TariffDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class TariffRepository {     public async requestTariffs(): Promise&lt;TariffDto[]&gt; {         const response = await fetch(&quot;.\/api\/tariffs&quot;);         const objects: object[] = await response.json();         return objects.map((object: object) =&gt; {             return new TariffDto().fromJSON(object);         });     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u044b \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043a\u0430\u043a\u043e\u043c \u043b\u0438\u0431\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0435, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u0430 \u0432 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435 \u0443\u0436\u0435 \u043d\u043e\u0432\u044b\u0439. \u041f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c A\/B \u0442\u0435\u0441\u0442\u044b \u0441 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0431\u0430\u0437\u0443 \u043d\u0430 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u0443\u044e, \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u044b. \u0418 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u0435\u0437 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043b\u043e\u0439 View.<\/p>\n<h2>\u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c View<\/h2>\n<p>  \u0421\u043b\u043e\u0439 View \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432 \u0441\u043b\u043e\u0435 Controller \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u042f \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e React, \u043d\u043e \u043d\u0430 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Preact, Svelte, Vue, Mithril, WebComponent \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0442 React.Component, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u043c\u0435\u0442\u043e\u0434 render \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">Main.ts. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { override } from &quot;first-di&quot;; import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { MockUserProfilRepository } from &quot;.\/MockUserProfilRepository&quot;; import { UserPageController } from &quot;.\/UserPageController&quot;; import React from &quot;react&quot;; import { render } from &quot;react-dom&quot;;  if (process.env.NODE_ENV === &quot;test&quot;) {     \/\/ \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435     override(UserProfilRepository, MockUserProfilRepository); }  render(React.createElement(UserPageController), document.body); <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442 React.Component \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 render<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { InsuranceCaseDto } from &quot;.\/InsuranceCasesDto&quot;; import { autowired } from &quot;first-di&quot;; import React from &quot;react&quot;;  \/\/ \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0442 React.Component export class UserPageController extends React.Component&lt;object, object&gt; {      public userProfile: UserProfileDto = new UserProfileDto();     public insuranceCases: InsuranceCaseDto[] = [];     public tariffs: TariffDto[] = [];     public bestTariff: TariffDto | void = void 0;      @autowired()     private readonly userProfilService!: UserProfilService;      @autowired()     private readonly tarifService!: TariffService;      \/\/ \u0440\u0435\u0430\u043a\u0442 \u0437\u0430\u043d\u044f\u043b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440     constructor(props: object, context: object) {         super(props, context);     }      \/\/ \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b     public componentDidMount(): void {         this.activate();     }      public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);             this.forceUpdate(); \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c view \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             this.tariffs = await this.tarifService.getTariffs();             this.forceUpdate(); \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c view \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445         } catch (e) {             console.error(e);         }     }      \/\/ \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f view     public render(): JSX.Element {         return (             &lt;&gt;                 &lt;div className=&quot;user&quot;&gt;                     &lt;div className=&quot;user-name&quot;&gt;                         \u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f: {this.userProfile.getFullname()}                     &lt;\/div&gt;                     &lt;div className=&quot;user-age&quot;&gt;                         \u0412\u043e\u0437\u0440\u0430\u0441\u0442: {this.userProfile.getAge()}                     &lt;\/div&gt;                 &lt;\/div&gt;                 &lt;div className=&quot;tarif\u0430s&quot;&gt;                     {\/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044c\u044e\u0445\u0438 *\/}                 &lt;\/div&gt;             &lt;\/&gt;         );     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043a\u0442\u0430 \u0441 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f forceUpdate \u0432\u043c\u0435\u0441\u0442\u043e setState?<\/b>                         <\/p>\n<div class=\"spoiler_text\">\u0412 \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e forceUpdate \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f setState. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u0437\u0430 \u043b\u044e\u0431\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 setState, Redux, mobX \u0438\u043b\u0438 \u0434\u0440., \u0432 \u043b\u044e\u0431\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412 React \u0438 Preact \u044d\u0442\u043e forceUpdate, \u0432 \u0410\u043d\u0433\u0443\u043b\u044f\u0440\u0435 ChangeDetectorRef.detectChanges(), \u0432 Mithril \u0441\u0440\u0430\u0437\u0443 redraw \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0443\u0447\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c Observable \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 MobX \u0438\u043b\u0438 Angular, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0434\u0435\u043b\u043e \u0432\u043a\u0443\u0441\u0430 \u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f.  <\/div>\n<\/p><\/div>\n<p>  \u041d\u043e \u0434\u0430\u0436\u0435 \u0432 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0432\u044f\u0437\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 React \u0441 \u0435\u0433\u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 view, \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0442\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0427\u0438\u0441\u0442\u043e\u0439 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b. \u0410 \u043b\u043e\u0433\u0438\u043a\u0430 \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u0447\u0442\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 Controller \u0438 View<\/h2>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043b\u043e\u0439 view \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \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 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0417\u0430\u043e\u0434\u043d\u043e \u043e\u043f\u0438\u0448\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageView. \u0412\u044b\u043d\u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserPageOptions, UserPageController } from &quot;.\/UserPageController&quot;; import React from &quot;react&quot;;  export const userPageView = &lt;P extends UserPageOptions, S&gt;(     ctrl: UserPageController&lt;P, S&gt;,     props: P ): JSX.Element =&gt; (     &lt;&gt;         &lt;div className=&quot;user&quot;&gt;             &lt;div className=&quot;user-name&quot;&gt;                 \u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f: {ctrl.userProfile.getFullname()}             &lt;\/div&gt;             &lt;div className=&quot;user-age&quot;&gt;                 \u0412\u043e\u0437\u0440\u0430\u0441\u0442: {ctrl.userProfile.getAge()}             &lt;\/div&gt;         &lt;\/div&gt;         &lt;div className=&quot;tarif\u0430s&quot;&gt;             {\/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044c\u044e\u0445\u0438 *\/}         &lt;\/div&gt;     &lt;\/&gt; ); <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageOptions. \u0412\u044b\u043d\u0435\u0441\u043b\u0438 view \u0438 React \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { InsuranceCaseDto } from &quot;.\/InsuranceCasesDto&quot;; import { autowired } from &quot;first-di&quot;; import { BaseComponent } from &quot;.\/BaseComponent&quot;; import { userPageView } from &quot;.\/UserPageview&quot;;  export interface UserPageOptions {     param1?: number;     param2?: string; }  \/\/ \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0442 BaseComponent export class UserPageController&lt;P extends UserPageOptions, S&gt; extends BaseComponent&lt;P, S&gt; {      public userProfile: UserProfileDto = new UserProfileDto();     public insuranceCases: InsuranceCaseDto[] = [];     public tariffs: TariffDto[] = [];     public bestTariff: TariffDto | void = void 0;      \/\/ \u0438\u043d\u044c\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     public readonly view = userPageView;      @autowired()     private readonly userProfilService!: UserProfilService;      @autowired()     private readonly tarifService!: TariffService;      \/\/ \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b     constructor(props: P, context: S) {         super(props, context);     }      \/\/ \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u0440\u0438 componentDidMount, \u0441\u043c. BaseComponent     public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);             this.forceUpdate();         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             this.tariffs = await this.tarifService.getTariffs();             this.forceUpdate();         } catch (e) {             console.error(e);         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">BaseComponent. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0441 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import React from &quot;react&quot;;  export class BaseComponent&lt;P, S&gt; extends React.Component&lt;P, S&gt; {      \/\/ \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c view     public view?: (ctrl: this, props: P) =&gt; JSX.Element;      constructor(props: P, context: S) {         super(props, context);         \/\/ \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443     }      \/\/ \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u043c \u043e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430     public componentDidMount(): void {         this.activate &amp;&amp; this.activate();     }      \/\/ \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u043c \u043e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430     public shouldComponentUpdate(         nextProps: Readonly&lt;P&gt;,         nextState: Readonly&lt;S&gt;,         nextContext: any     ): boolean {         return this.update(nextProps, nextState, nextContext);     }      public componentWillUnmount(): void {         this.dispose();     }      public activate(): void {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f     }      public update(nextProps: Readonly&lt;P&gt;, nextState: Readonly&lt;S&gt;, nextContext: any): boolean {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f         return false;     }      public dispose(): void {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f     }      \/\/ \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f view     public render(): React.ReactElement&lt;object&gt; {         if (this.view) {             return this.view(this, this.props);         } else {             return React.createElement(&quot;div&quot;, {}, &quot;\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e&quot;);         }     }  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e \u043d\u0435\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043e\u043d\u043e \u0435\u0441\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Angular, \u043d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0412 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u043e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0412\u043e \u0432\u0441\u0435\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u043e\u043d\u0438 \u0440\u0430\u0437\u043d\u044b\u0435, \u043d\u043e \u043e\u043d\u0438 \u0435\u0441\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. Angular \u044d\u0442\u043e ngOnInit, ngOnChanges, ngOnDestroy. \u0412 React \u0438 Preact \u044d\u0442\u043e componentDidMount, shouldComponentUpdate, componentWillUnmount. \u0412 Vue \u044d\u0442\u043e created, updated, destroyed. \u0412 Mithril \u044d\u0442\u043e oncreate, onupdate, onremove. \u0412 WebComponents \u044d\u0442\u043e connectedCallback, attributeChangedCallback, disconnectedCallback. \u0418 \u0442\u0430\u043a \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u0423 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0434\u0430\u0436\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0438\u043b\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043d\u0435\u0434\u0440\u044f\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438, \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430, \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0440.<\/p>\n<h2>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h2>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0447\u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0412\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434:  <\/p>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">Main.ts. \u0424\u0430\u0439\u043b \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { override } from &quot;first-di&quot;; import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { MockUserProfilRepository } from &quot;.\/MockUserProfilRepository&quot;; import { UserPageController } from &quot;.\/UserPageController&quot;; import React from &quot;react&quot;; import { render } from &quot;react-dom&quot;;  if (process.env.NODE_ENV === &quot;test&quot;) {     override(UserProfilRepository, MockUserProfilRepository); }  render(React.createElement(UserPageController), document.body); <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageView. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserPageOptions, UserPageController } from &quot;.\/UserPageController&quot;; import React from &quot;react&quot;;  export const userPageView = &lt;P extends UserPageOptions, S&gt;(     ctrl: UserPageController&lt;P, S&gt;,     props: P ): JSX.Element =&gt; (     &lt;&gt;         &lt;div className=&quot;user&quot;&gt;             &lt;div className=&quot;user-name&quot;&gt;                 \u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f: {ctrl.userProfile.getFullname()}             &lt;\/div&gt;             &lt;div className=&quot;user-age&quot;&gt;                 \u0412\u043e\u0437\u0440\u0430\u0441\u0442: {ctrl.userProfile.getAge()}             &lt;\/div&gt;         &lt;\/div&gt;         &lt;div className=&quot;tarif\u0430s&quot;&gt;             {\/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044c\u044e\u0445\u0438 *\/}         &lt;\/div&gt;     &lt;\/&gt; ); <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserPageController. \u041b\u043e\u0433\u0438\u043a\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilService } from &quot;.\/UserProfilService&quot;; import { TariffService } from &quot;.\/TariffService&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { InsuranceCaseDto } from &quot;.\/InsuranceCasesDto&quot;; import { autowired } from &quot;first-di&quot;; import { BaseComponent } from &quot;.\/BaseComponent&quot;; import { userPageView } from &quot;.\/UserPageview&quot;;  export interface UserPageOptions {     param1?: number;     param2?: string; }  export class UserPageController&lt;P extends UserPageOptions, S&gt; extends BaseComponent&lt;P, S&gt; {      public userProfile: UserProfileDto = new UserProfileDto();     public insuranceCases: InsuranceCaseDto[] = [];     public tariffs: TariffDto[] = [];     public bestTariff: TariffDto | void = void 0;      public readonly view = userPageView;      @autowired()     private readonly userProfilService!: UserProfilService;      @autowired()     private readonly tarifService!: TariffService;      \/\/ \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u0440\u0438 componentDidMount, \u0441\u043c. BaseComponent     public activate(): void {         this.requestUserProfile();         this.requestTariffs();     }      public async requestUserProfile(): Promise&lt;void&gt; {         try {             this.userProfile = await this.userProfilService.getUserProfile();             this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);             this.forceUpdate();         } catch (e) {             console.error(e);         }     }      public async requestTariffs(): Promise&lt;void&gt; {         try {             this.tariffs = await this.tarifService.getTariffs();             this.forceUpdate();         } catch (e) {             console.error(e);         }     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432,      * \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0432\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">BaseComponent. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import React from &quot;react&quot;;  export class BaseComponent&lt;P, S&gt; extends React.Component&lt;P, S&gt; {      public view?: (ctrl: this, props: P) =&gt; JSX.Element;      constructor(props: P, context: S) {         super(props, context);     }      public componentDidMount(): void {         this.activate &amp;&amp; this.activate();     }      public shouldComponentUpdate(         nextProps: Readonly&lt;P&gt;,         nextState: Readonly&lt;S&gt;,         nextContext: any     ): boolean {         return this.update(nextProps, nextState, nextContext);     }      public componentWillUnmount(): void {         this.dispose();     }      public activate(): void {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f     }      public update(nextProps: Readonly&lt;P&gt;, nextState: Readonly&lt;S&gt;, nextContext: any): boolean {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f         return false;     }      public dispose(): void {         \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f     }      public render(): React.ReactElement&lt;object&gt; {         if (this.view) {             return this.view(this, this.props);         } else {             return React.createElement(&quot;div&quot;, {}, &quot;\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e&quot;);         }     }  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfilRepository } from &quot;.\/UserProfilRepository&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection export class UserProfilService {      private readonly userProfilRepository: UserProfilRepository;      constructor(userProfilRepository: UserProfilRepository) {         this.userProfilRepository = userProfilRepository;     }      public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         return await this.userProfilRepository.getUserProfile();     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffService. \u0421\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffRepository } from &quot;.\/TariffRepository&quot;; import { TariffDto } from &quot;.\/TariffDto&quot;; import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection export class TariffService {      private readonly tarifRepository: TariffRepository;      constructor(tarifRepository: TariffRepository) {         this.tarifRepository = tarifRepository;     }      public async getTariffs(): Promise&lt;TariffDto[]&gt; {         return await this.tarifRepository.requestTariffs();     }      public async findBestTariff(userProfile: UserProfileDto): Promise&lt;TariffDto | void&gt; {         const tariffs = await this.tarifRepository.requestTariffs();         return tariffs.find((tarif: TariffDto) =&gt; {             const age = userProfile.getAge();             return age &amp;&amp;                 tarif.ageFrom &lt;= age &amp;&amp;                 age &lt; tarif.ageTo;         });     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfilRepository. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection export class UserProfilRepository {     public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         const response = await fetch(&quot;.\/api\/user-profile&quot;);         const object = await response.json();         return new UserProfileDto().fromJSON(object);     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">MockUserProfilRepository. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { UserProfileDto } from &quot;.\/UserProfileDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class MockUserProfilRepository { \/\/ \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432     public async getUserProfile(): Promise&lt;UserProfileDto&gt; {         const profile = new UserProfileDto();         profile.firstName = &quot;\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u044f&quot;;         profile.lastName = &quot;\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438\u043d\u043e\u043f\u043e\u043b\u044c\u0441\u043a\u0430\u044f&quot;;         profile.birthdate = new Date(Date.now() - 1.5e12);         return Promise.resolve(profile); \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u044b\u0442 \u0441 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffRepository. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u0430\u0440\u0438\u0444\u043e\u0432 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { TariffDto } from &quot;.\/TariffDto&quot;; import { reflection } from &quot;first-di&quot;;  @reflection \/\/ \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 typescript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e export class TariffRepository {     public async requestTariffs(): Promise&lt;TariffDto[]&gt; {         const response = await fetch(&quot;.\/api\/tariffs&quot;);         const objects: object[] = await response.json();         return objects.map((object: object) =&gt; {             return new TariffDto().fromJSON(object);         });     }      \/**      * ... \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u0432      *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">UserProfileDto. \u041c\u043e\u0434\u0435\u043b\u044c \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043b\u043e\u044f\u043c\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { Serializable, jsonProperty } from &quot;ts-serializable&quot;;  export class UserProfileDto extends Serializable {      @jsonProperty(String, null)     public firstName: string | null = null;      @jsonProperty(String, null)     public lastName: string | null = null;      @jsonProperty(Date, null)     public birthdate: Date | null = null;      public getAge(): number | null {         if (this.birthdate) {             const ageDifMs = Date.now() - this.birthdate.getTime();             const ageDate = new Date(ageDifMs);             return Math.abs(ageDate.getUTCFullYear() - 1970);         }         return null;     }      public getFullname(): string | null {         return [             this.firstName ?? &quot;&quot;,             this.lastName ?? &quot;&quot;         ]             .join(&quot; &quot;)             .trim() || null;     }  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<blockquote>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">TariffDto. \u041c\u043e\u0434\u0435\u043b\u044c \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043b\u043e\u044f\u043c\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"actionscript\">import { Serializable, jsonProperty } from &quot;ts-serializable&quot;;  export class TariffDto extends Serializable {      @jsonProperty(Number, null)     public ageFrom: number = 0;      @jsonProperty(Number, null)     public ageTo: number = 0;      @jsonProperty(Number, null)     public price: number = 0;  } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 (1 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, 3 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043d\u0430 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441) \u0438 \u043e\u0447\u0435\u043d\u044c \u043d\u0438\u0437\u043a\u0438\u043c\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0445\u043e\u0434\u0430\u043c\u0438 (\u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043b\u043e\u0433\u0438\u043a\u0430). \u0422\u0430\u043a \u0436\u0435 \u043c\u044b \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430 \u043a\u0430\u043a\u0443\u044e \u043b\u0438\u0431\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041a\u043e\u0433\u0434\u0430 \u0443\u043c\u0435\u0440 Angular 1 \u043c\u043d\u043e\u0433\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 React. \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0447\u0438\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f Angular 2, \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u043b\u0438 \u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c \u0438\u0437-\u0437\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041a\u043e\u0433\u0434\u0430 \u0443\u043c\u0440\u0435\u0442 React \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u041d\u043e \u0441 \u0427\u0438\u0442\u043e\u0439 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u043e \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c.<\/p>\n<h2>\u0412 \u0447\u0435\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e Redux?<\/h2>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0432 \u0447\u0435\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0441\u0435\u0431\u044f Redux \u043f\u0440\u0438 \u0440\u043e\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jj\/i9\/cc\/jji9ccsijjqancrthtv9gpudc48.png\" alt=\"Redux\"><\/p>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u0441\u0445\u0435\u043c\u044b \u0441 \u0440\u043e\u0441\u0442\u043e\u043c Redux \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e, Store \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e Reducers \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0435 \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u043e. \u0410 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Store \u0438 \u043f\u043e\u0438\u0441\u043a \u043d\u0443\u0436\u043d\u043e\u0433\u043e Reducer \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443.<\/p>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043a \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0442\u0435\u0441\u0442\u043e\u043c.  <\/p>\n<pre><code class=\"actionscript\">let create = new Function([ &quot;return {&quot;, ...new Array(100).fill(1).map((val, ind) =&gt; `param${ind}:${ind},`), &quot;}&quot; ].join(&quot;&quot;));  let obj1 = create();  console.time(&quot;store recreation time&quot;); let obj2 = {     ...obj1,     param100: 100 ** 2 } console.timeEnd(&quot;store recreation time&quot;);  console.time(&quot;clear logic&quot;); let val = 100 ** 2; console.timeEnd(&quot;clear logic&quot;);  console.log(obj2, val);  \/\/ store recreation time: 0.041015625ms \/\/ clear logic: 0.0048828125ms <\/code><\/pre>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Store \u0432 100 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0443\u0448\u043b\u043e \u0432 8 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0447\u0435\u043c \u043d\u0430 \u0441\u0430\u043c\u0443 \u043b\u043e\u0433\u0438\u043a\u0443. \u041f\u0440\u0438 1000 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u0443\u0436\u0435 50 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u043e\u0434\u043d\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0432\u044b\u0437\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u044f\u0436\u0435\u043b\u043e \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0432\u043e\u0437\u0440\u0430\u0437\u0438\u0442\u044c \u0447\u0442\u043e 0,04 \u043c\u0441 \u043d\u0430 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Store \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041d\u043e 0,04 \u043c\u0441 \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435 Core i7 \u0438 \u043d\u0430 \u043e\u0434\u0438\u043d \u044d\u043a\u0448\u0435\u043d. \u0421 \u0443\u0447\u0435\u0442\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u0430\u0431\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 \u0438 \u0442\u0435\u043c \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043d\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 16 \u043c\u0441 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0441 \u0442\u0435\u043c \u043a\u0430\u043a \u0440\u0430\u0441\u0442\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0427\u0438\u0441\u0442\u043e\u0439 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oz\/eg\/uk\/ozegukclnowpqlzdnckk3pfkckc.png\" alt=\"\u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430\"><\/p>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u043b\u043e\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u043c\u0443 \u043b\u0438\u0431\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u043d \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0443, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0435\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0441\u0435\u0440\u0432\u0438\u0441\u044b. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0438 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f, \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0437\u0430 4 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043f\u043e \u043a\u043e\u0434\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u0435\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044e \u0441 \u043a\u0438\u0440\u043f\u0438\u0447\u043d\u043e\u0439 \u0441\u0442\u0435\u043d\u043e\u0439, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u044a\u044f\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043a\u0438\u0440\u043f\u0438\u0447\u0438\u043a \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0435\u043d\u044b \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0432 \u043d\u0430 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0439 \u0441\u0442\u0435\u043d\u044b.<\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441 1: \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430<\/h2>\n<p>  \u0411\u043e\u043d\u0443\u0441\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0443:  <\/p>\n<pre><code class=\"actionscript\">export class BaseComponent&lt;P, S&gt; extends React.Component&lt;P, S&gt; {      ...      public render(): React.ReactElement&lt;object&gt; {         try {             if (this.view) {                 return this.view(this, this.props);             } else {                 return React.createElement(&quot;div&quot;, {}, &quot;\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e&quot;);             }         } catch (e) {             return React.createElement(                 &quot;div&quot;,                 { style: { color: &quot;red&quot; } },                 `\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430: ${e}`             );         }     }  } <\/code><\/pre>\n<p>  \u0422\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0430\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430. \u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433, \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0438\u0448\u0442\u044f\u043a\u0438.<\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441 2: \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>  \u041c\u043e\u0434\u0435\u043b\u0438 \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043b\u043e\u044f\u043c\u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0437\u0430\u043f\u0430\u0441\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/typestack\/class-validator\" rel=\"nofollow\">class-validator<\/a>, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u044f\u0445, \u0432 \u0442.\u0447. \u043f\u0440\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0431 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441 3: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439<\/h2>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/typeorm\/typeorm\" rel=\"nofollow\">typeorm<\/a> \u0438 \u0432\u0430\u0448\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u044f\u0442\u0441\u044f \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<h2>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043b\u0430\u0439\u043a\u0438 \u0438 \u043d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0430\u0434\u0435\u043f\u0442 Redux \u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0430\u043a\u043e\u043c\u044b\u0441\u043b\u0438\u0435, \u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u0435 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a\u0430\u043a \u0432\u044b \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0435, \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/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\/493430\/\"> https:\/\/habr.com\/ru\/post\/493430\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/493430\/\">\u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u043d\u043e\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c, \u0442.\u043a. \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0432\u0435\u0431\u0435 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043e\u0447\u0435\u043d\u044c \u0441\u043a\u0443\u0434\u043d\u043e, \u0445\u043e\u0442\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0435\u0441\u0442\u044c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u043d\u0430 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/microsoft\/vscode\/tree\/master\/src\/vs\/editor\/common\" rel=\"nofollow\">\u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 VS Code<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dj\/ju\/vy\/djjuvyjprjf_nnnb0bv34ymklkc.png\" alt=\"\u0427\u0438\u0441\u0442\u0430\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430\"><\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432\u044b \u043e\u0442\u0432\u044f\u0436\u0435\u0442\u0435\u0441\u044c \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0421\u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 React, Preact, Vue, Mithril \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438, \u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0434\u0430\u0436\u0435 \u0432\u044c\u044e\u0445\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular 1, \u0432\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u043d\u0430 Angular 2+, React, Svelte, WebComponents \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular 2+, \u043d\u043e \u043d\u0435\u0442\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0435\u0433\u043e, \u0442\u043e \u0432\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438. \u0410 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0444\u0440\u0435\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0427\u0442\u043e \u0436\u0435 \u044d\u0442\u043e \u0437\u0430 \u043c\u0430\u0433\u0438\u044f \u0442\u0430\u043a\u0430\u044f?  <\/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-302964","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302964","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=302964"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302964\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}