{"id":315260,"date":"2020-12-21T15:02:04","date_gmt":"2020-12-21T15:02:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=315260"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=315260","title":{"rendered":"\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0438\u043c\u0430 \u0427\u0443\u0434\u0438\u043d\u043e\u0432, \u044f \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a \u043d\u0430 <a href=\"https:\/\/praktikum.yandex.ru\/web\/?utm_source=pr&amp;utm_medium=content&amp;utm_term=21_12_20&amp;utm_campaign=pr_content_web_habr\">\u0432\u0435\u0431-\u0444\u0430\u043a\u0443\u043b\u044c\u0442\u0435\u0442\u0435<\/a> \u042f\u043d\u0434\u0435\u043a\u0441.\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u043c\u0430, Head of Group, Front-end, ABBYY. <\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0443\u0434\u0435\u043d\u0442\u044b \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043b\u0438 \u043c\u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0427\u0442\u043e \u043b\u0443\u0447\u0448\u0435: Angular \u0438\u043b\u0438 React?\u00bb. \u042f \u043d\u0430\u0447\u0430\u043b \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u044f. \u041f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442. <\/p>\n<p>  <\/p>\n<p>\u041e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437. \u0410 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0448\u0443 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438.\u00a0\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442. \u0417\u0430\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u043f\u043e\u0440\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0443\u0445\u043d\u0435 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0440\u0430\u043d\u0442\u0438\u043d\u0430) \u0438 \u0432 \u0441\u0435\u0442\u0438. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0441\u0432\u043e\u0451 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u00ab\u0437\u043e\u043e\u043f\u0430\u0440\u043a\u00bb \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441\u0432\u0435\u0440\u0445\u0443. <\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/533702\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/24\/dc\/jd\/24dcjdelkh3b0swqrhx8ynlutws.png\"><\/a><\/p>\n<p>  <\/p>\n<h2 id=\"biblioteki-i-freymvorki\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e <strong>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/strong> \u0438 <strong>\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/strong> \u2014 \u043d\u0435 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435. <\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h3 id=\"biblioteki\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u2014 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0435\u0448\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043d\u0435\u0435 \u0432\u043e\u0437\u043b\u043e\u0436\u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\/\u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ul>\n<li>jQuery \u2014 \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0441 DOM, \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/li>\n<li>D3 \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c SVG.<\/li>\n<li>React \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e DOM \u0434\u0435\u0440\u0435\u0432\u043e\u043c.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"freymvorki\">\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u2014 \u043a\u0430\u0440\u043a\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. <\/p>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u043e\u043d\u0438 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0435. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u043d \u0434\u0438\u043a\u0442\u0443\u0435\u0442, \u043a\u0430\u043a \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<ul>\n<li>AngularJS \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f SPA, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b MVC \u0438 MVVM, \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/li>\n<li>Vue.js \u2014 \u0442\u0430\u043a\u0436\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f SPA, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d MVVM, \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/li>\n<li>Ember.js \u2014 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f SPA \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d MVC.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"chto-i-kogda-ispolzuyut\">\u0427\u0442\u043e \u0438 \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435. \u041d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u0431\u043e\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0439 \u043a\u0430\u0440\u043a\u0430\u0441 \u0432\u0437\u044f\u0442\u044c \u0438\u043b\u0438 \u0438\u0437 \u043a\u0430\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0430\u0448\u0435\u0439 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u044b \u0438 \u043a\u0440\u0443\u0433\u043e\u0437\u043e\u0440\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043b\u0438\u0431\u043e \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e JS \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043b\u0438\u0431\u043e \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432. \u0418\u0437\u0443\u0447\u0430\u044e\u0442 \u0435\u0433\u043e, \u043d\u0430\u0445\u043e\u0434\u044f\u0442 \u0441\u043b\u0430\u0431\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0438 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438. <\/p>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u0436\u0435 \u0437\u043d\u0430\u044e\u0442 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0437\u0430\u0434\u0430\u0447. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0434\u0438\u043d \u0438\u0437 \u0447\u0430\u0441\u0442\u044b\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 React \u0438 Redux \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0434\u0430\u044e\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u0440\u043a\u0430\u0441\u0430, \u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"chto-bylo-ranshe\">\u0427\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u043d\u044c\u0448\u0435<\/h2>\n<p>  <\/p>\n<p>React, Vue, lodash, D3\u2026 \u043d\u043e\u0432\u0438\u0447\u043a\u0443 \u043f\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u0445. \u0422\u0430\u043a \u0432 \u0441\u0435\u0442\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0448\u0443\u0442\u043a\u0430 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0438\u0442 \u0440\u0435\u043a\u0440\u0443\u0442\u0435\u0440\u043e\u0432 \u043d\u0430\u0437\u0432\u0430\u0442\u044c, \u043a\u0442\u043e \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432 \u0435\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u0435 \u2014 \u043f\u043e\u043a\u0435\u043c\u043e\u043d. \u0421\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0433\u0430\u0434\u0430\u0442\u044c?<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/39\/c5\/vr\/39c5vrcoo9pmgh9p139uwgeku6s.png\"><br \/>  <em>\u0418\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u044f \u043c\u0435\u043c\u0430: &quot;I typically ask recruiters to point out which of these are pokemon&quot;<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 2000-\u0445 \u0433\u043e\u0434\u0430\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u043b\u0438\u0448\u044c \u0441\u0430\u0439\u0442\u044b \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u0442\u0434\u0430\u0432\u0430\u043b\u0438 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 PHP \u0438\u043b\u0438 .NET (C#). \u0410 \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u0440\u0443\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 SVG \u0431\u044b\u043b\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 image.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/74\/yv\/1l\/74yv1lrrmguh72ixdiy2yxwtlos.png\"><br \/>  <em>Google \u0432 2000-\u0435 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441. UX \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f: \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u043d \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 html-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u0445, \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u0431\u044b\u043b\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043d\u0430 \u0442\u0435\u043c\u0443, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c: \u00abReact, Angular \u0438\u043b\u0438 Vue?\u00bb. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0432\u0435\u0431\u0430. \u041d\u043e \u0431\u044b\u043b\u0438 \u0438 \u043f\u044b\u0442\u043b\u0438\u0432\u044b\u0435 \u0443\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0440\u0430\u043b\u0438\u0441\u044c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430. \u0422\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u0430\u0432\u0430\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u00ab\u0431\u043e\u0433\u0430\u0442\u044b\u0435\u00bb \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u043e\u0439, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0440\u0430\u0434\u043e\u0441\u0442\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>  <\/p>\n<h3 id=\"pervye-shagi-k-prilozheniyam-buduschego\">\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e<\/h3>\n<p>  <\/p>\n<p>\u0412 \u043c\u0430\u0440\u0442\u0435 2005 \u0433\u043e\u0434\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f Dojo Toolkit, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c\u0438 \u0438 REST-\u043a\u043b\u0438\u0435\u043d\u0442. \u0412 \u0438\u044e\u043d\u0435 2006 \u0433\u043e\u0434\u0430 \u0431\u044b\u043b\u0430 \u0432\u044b\u043f\u0443\u0449\u0435\u043d\u0430 \u0430\u043b\u044c\u0444\u0430-\u0432\u0435\u0440\u0441\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 jQuery, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430 \u0432 \u0441\u0435\u0431\u044f \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0441 DOM, \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438, \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043c\u043e\u0434\u0443\u043b\u044c AJAX. \u0412\u0441\u0435 \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0438 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0430 \u0431\u0440\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"javascript-es3-i-es5\">JavaScript: ES3 \u0438 ES5<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fv\/t7\/jg\/fvt7jgexbizt_so_lrvtonfzopc.png\"><\/p>\n<p>  <\/p>\n<p>Javascript \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0441\u044f \u043e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u0430\u043a \u043f\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c. \u0412 1999 \u0433\u043e\u0434\u0443 \u0431\u044b\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 ECMAScript 3. \u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0431\u0430\u0437\u0443 \u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0441\u0435\u0439\u0447\u0430\u0441. \u0410 \u0432\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 ECMAScript 5 2009 \u0433\u043e\u0434\u0430 \u0443\u0436\u0435 \u0438\u043c\u0435\u043b \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 (\u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043c\u0435\u0442\u043e\u0434 bind);<\/li>\n<li>\u043c\u0435\u0442\u043e\u0434\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a filter, map, reduce;<\/li>\n<li>\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f JSON;<\/li>\n<li>\u0432\u0438\u0448\u0435\u043d\u043a\u0430 \u043d\u0430 \u0442\u043e\u0440\u0442\u0435 \u2014 strict mode.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0448\u0430\u0433 \u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e Javascript. \u041a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u0451\u043c \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b commonArray,   * \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0451\u043c \u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c undefined  *\/  const commonArray = [1, undefined, 3, 6, undefined, 5, 2, undefined]; let filteredArray = [];  \/**  * \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 for loop  *\/ for (let i = 0; i &lt; commonArray.length; i++) {   const item = commonArray[i];    if (item !== undefined) {     filteredArray.push(item);   } }  \/**  * \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Array.filter  *\/ filteredArray = commonArray.filter(function(item) {   return item !== undefined; });  \/**  * \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Array.filter \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443 (\u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438)  *\/ filteredArray = commonArray.filter(Boolean);<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"kuda-delsya-es4\">\u041a\u0443\u0434\u0430 \u0434\u0435\u043b\u0441\u044f ES4<\/h3>\n<p>  <\/p>\n<p>ECMAScript 4 \u0431\u044b\u043b \u0430\u043c\u0431\u0438\u0446\u0438\u043e\u0437\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043d\u043e \u043f\u043e \u0441\u043b\u0443\u0445\u0430\u043c \u0438\u043c\u0435\u043b \u043f\u043b\u043e\u0445\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 ES3. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u043b\u0433\u0438\u0445 \u043f\u0440\u0435\u043d\u0438\u0439, \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u0438\u0442\u0435\u0442\u043e\u043c TC-39, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0445\u043e\u0434\u0438\u043b\u0438 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0438\u0437 Google, Intel, Microsoft, Facebook, \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 ECMAScript 3.1. \u041f\u043e\u0437\u0436\u0435, \u0432 2009, \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d \u0432 ECMAScript 5.<\/p>\n<p>  <\/p>\n<h2 id=\"era-freymvorkov\">\u042d\u0440\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041d\u043e\u0432\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0434\u0430\u043b \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0442\u043e\u043b\u0447\u043e\u043a \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e \u043a\u0430\u043a Javascript, \u0442\u0430\u043a \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432. <\/p>\n<p>  <\/p>\n<h3 id=\"backbonejs\">Backbone.js<\/h3>\n<p>  <\/p>\n<p>\u0412 2010 \u0433\u043e\u0434\u0443 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f <strong>Backbone.js<\/strong> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 MPV (Model-Presenter-View) \u043f\u0430\u0442\u0442\u0435\u0440\u043d. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Backbone.js \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c SPA \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u0440\u0443\u0442\u0438\u043d\u0433\u043e\u043c. \u0414\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0440\u0443\u0442\u0438\u043d\u0433 \u0431\u044b\u043b \u0434\u0438\u043a\u0438\u043c \u043d\u0435\u0443\u043a\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u043c \u0437\u0432\u0435\u0440\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043e\u0442\u0434\u0430\u0447\u0435\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u2014 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0443\u0442\u0438\u043d\u0433\u043e\u043c. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430 Backbone.js \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Backbone.js \u2014 \u0447\u0430\u0441\u0442\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 CoffeeScript \u043e\u0442 \u0442\u043e\u0433\u043e \u0436\u0435 \u0430\u0432\u0442\u043e\u0440\u0430. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 Javascript: \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043a\u043e\u0440\u043e\u0447\u0435 \u0438 \u0431\u044b\u043b \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c, \u0431\u044b\u043b\u0438 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435. \u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0437\u0430\u0431\u044b\u0442\u044b \u043d\u0430 \u043d\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0445\u043e\u0442\u044f \u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n<p>  <\/p>\n<h3 id=\"angularjs\">AngularJS<\/h3>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0451\u043b \u0440\u0435\u043b\u0438\u0437 <strong>AngularJS<\/strong> \u043e\u0442 Google \u2014 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u043a\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0437\u0430\u0432\u043e\u0435\u0432\u0430\u043b \u0441\u0435\u0440\u0434\u0446\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u2014 \u043d\u0430 \u043d\u0451\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0430\u0439\u0442 <a href=\"http:\/\/www.mcdonalds.com\">\u041c\u0430\u043a\u0414\u043e\u043d\u0430\u043b\u044c\u0434\u0441\u0430<\/a>:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6q\/ug\/kb\/6qugkbs-hvh3gr_-onf5pfzdxp4.png\"><br \/>  <em>\u0421\u0430\u0439\u0442 \u041c\u0430\u043a\u0414\u043e\u043d\u0430\u043b\u044c\u0434\u0441\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 AngularJS<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c, AngularJS \u0441\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041a\u0430\u043a \u0442\u0430\u043a \u0432\u044b\u0448\u043b\u043e \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0434\u0430\u043b\u044c\u0448\u0435. <\/p>\n<p>  <\/p>\n<h3 id=\"emberjs\">Ember.js<\/h3>\n<p>  <\/p>\n<p>2011 \u0433\u043e\u0434 \u043f\u0440\u0438\u043d\u0435\u0441 <strong>Ember.js<\/strong> \u2014 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d SPA \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Handlebars. \u0421\u0430\u043c \u0436\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MVC (Model-View-Controller). \u0423 Ember \u043e\u0447\u0435\u043d\u044c \u0434\u0440\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0438 \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u2014 \u0434\u0430\u0436\u0435 \u0432 2020 \u0433\u043e\u0434\u0443 \u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0435\u0441\u0442\u044c \u0440\u043e\u0430\u0434\u043c\u0430\u043f \u0438 \u0446\u0435\u043b\u0438 \u043f\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e. \u0412\u0441\u0451 \u0435\u0449\u0451 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438: \u00ab\u041a\u0430\u043a \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 React \u043d\u0430 Ember\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0438\u0447\u043a\u0430 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0447\u0435\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 2010-\u0445 \u0433\u043e\u0434\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u2014 \u0441\u0442\u0430\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043d\u0430\u0439\u0442\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u043d\u0430\u043b \u0431\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0432\u0441\u0435 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 JS \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0432\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u043b \u0441\u0432\u043e\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0431\u043e\u0442\u043e\u0434\u0430\u0442\u0435\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u0438 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u0449\u0438\u0439 \u043a\u0440\u0443\u0433\u043e\u0437\u043e\u0440 \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0430 \u0443\u043c\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442.<\/p>\n<p>  <\/p>\n<h2 id=\"horoshiy-marketing--angularjs\">\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433 \u2014 AngularJS<\/h2>\n<p>  <\/p>\n<p>\u0412 2010 \u0433\u043e\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Google \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a AngularJS. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043a\u0440\u0443\u043f\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u043b\u0438 \u0435\u0433\u043e \u0441\u0440\u0435\u0434\u0438 \u0440\u0430\u0432\u043d\u044b\u0445 \u2014 Backbone \u0438 Ember.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, AngularJS \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 <strong>two-way data binding<\/strong> (\u0441 \u0430\u043d\u0433\u043b. \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0451 \u043d\u0435 \u0431\u044b\u043b \u0448\u0438\u0440\u043e\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-angularjs\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 AngularJS<\/h3>\n<p>  <\/p>\n<p>AngularJS \u2014 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0446\u0435\u043b\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 Single Page Applications.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u0430\u043a \u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u2014 \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u043e\u043b\u0435 \u2192 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u2192 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2192 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u2192 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u2192 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f <strong>two-way data binding.<\/strong><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4z\/nt\/xe\/4zntxeo_mal8upnjahin69dhvri.png\"><br \/>  <em>\u0421\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 AngularJS \u043f\u0440\u0438\u0432\u043d\u0451\u0441 \u043d\u0435\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 <strong>Dependency Injection<\/strong> (\u0441 \u0430\u043d\u0433\u043b. \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438). <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/la\/4n\/et\/la4netu47ptfzxe2sqcil6qb1mi.png\"><br \/>  <em>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 Dependency Injection<\/em><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c. \u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a: \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440), \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 (\u0441\u0435\u0440\u0432\u0438\u0441) \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 (\u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430). \u0412\u0441\u0435 \u043e\u043d\u0438 \u0441\u0438\u0434\u044f\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435 (DI \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440). \u041a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0443\u0436\u0435\u043d \u043c\u0430\u043a\u0435\u0442, \u043e\u043d \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443, \u0430 \u0442\u043e\u0442 \u0431\u0435\u0440\u0451\u0442 \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430. \u042d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e, \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0438\u0434\u044f\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e AngualrJS \u043d\u0435 \u0431\u044b\u043b \u0431\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u0435\u0441\u043b\u0438 \u0431\u044b \u0434\u0435\u0440\u0436\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0430\u0440\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432. \u0412 \u043d\u0435\u0433\u043e \u0432\u0445\u043e\u0434\u0438\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li>Animations \u2014 \u043c\u043e\u0434\u0443\u043b\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/li>\n<li>Karma \u2014 \u0442\u0435\u0441\u0442-\u0440\u0430\u043d\u043d\u0435\u0440 \u043f\u0440\u0438 unit-\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438;<\/li>\n<li>Jasmine \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f unit-\u0442\u0435\u0441\u0442\u043e\u0432;<\/li>\n<li>Protractor \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f e2e \u0442\u0435\u0441\u0442\u043e\u0432;<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438;<\/li>\n<li>REST-\u043a\u043b\u0438\u0435\u043d\u0442 \u2014 \u043c\u043e\u0434\u0443\u043b\u044c\/\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u0430\u043d\u0430\u043b\u043e\u0433 fetch, XHR);<\/li>\n<li>Router \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439. \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>AngularJS \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u043c\u043d\u043e\u0433\u043e\u0435 \u0432 \u043c\u0438\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u043e AngularJS \u043d\u0435 \u0431\u044b\u043b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0438 \u0440\u0430\u0437\u0431\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0434\u0435\u0446. <\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>AngularJS \u0442\u044f\u043d\u0443\u043b \u0441 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u043b\u0435\u0433\u0447\u0451\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e JQuery \u2014 JQLite. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0432\u0435\u0440\u0445\u0435\u0434\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0433\u0434\u0435 JQuery \u0431\u044b\u043b \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0438\u043b\u0438 \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0431\u044b\u043b\u0430 \u043d\u0430 \u043d\u0435\u0433\u043e \u0430\u043b\u043b\u0435\u0440\u0433\u0438\u044f, \u0434\u043b\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0436\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u2014 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u201cdigest loop\u201d \u0438 \u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. Digest loop \u2014 \u0442\u043e, \u043d\u0430 \u0447\u0451\u043c \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 two-way data binding. \u042d\u0442\u043e\u0442 \u0446\u0438\u043a\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a: \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438. \u0415\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c, \u044d\u0442\u043e\u0442 \u0446\u0438\u043a\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u043a\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043a\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430, \u0446\u0438\u043a\u043b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ye\/nt\/ui\/yentuikb-d3i1ot2muhbbemzir4.png\"><br \/>  <em>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b digest loop \u0432 AngularJS<\/em><\/p>\n<p>  <\/p>\n<p>\u0422\u0443\u0442 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0430 \u0438\u0437-\u0437\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0446\u0438\u043a\u043b\u0430 \u0438 \u0447\u0430\u0441\u0442\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043c\u043e\u0434\u0435\u043b\u0438. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043e\u0449\u0443\u0442\u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u201crealtime data\u201d \u0438\u043b\u0438 \u0447\u044c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438 \u0447\u0430\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0430 \u0442\u0430\u043a \u0438 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 AngularJS, \u0432\u0435\u0434\u044c \u0442\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u044f\u0434\u0440\u043e \u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f Angular 2+ \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e Angular.<\/p>\n<p>  <\/p>\n<h2 id=\"rabota-nad-oshibkami--angular-2\">\u0420\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0434 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u2014 Angular 2<\/h2>\n<p>  <\/p>\n<p>\u0412 2014 \u0433\u043e\u0434\u0443 \u0432 \u0442\u0451\u043c\u043d\u044b\u0445 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u0438\u044f\u0445 Google \u043d\u0435\u043f\u043e\u0434\u0430\u043b\u0451\u043a\u0443 \u043e\u0442 \u0437\u043e\u043d\u044b 51 (Area 51) \u043d\u0430\u0447\u0430\u043b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u2014 Angular.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u0435 2016 \u0431\u044b\u043b\u0430 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u2014 \u0430\u043d\u043e\u043d\u0441 Angular 4, \u0430 3 \u0432\u0435\u0440\u0441\u0438\u044f \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u0430. \u042d\u0442\u043e \u0441\u043c\u0443\u0442\u0438\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u2014 \u0432\u0441\u0435 \u0431\u043e\u044f\u043b\u0438\u0441\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u043e\u043f\u044b\u0442\u0430 AngularJS, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u043f\u043e\u0434\u043d\u044f\u0442\u0438\u0435\u043c \u043c\u0430\u0436\u043e\u0440\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u041d\u043e, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, 4 \u0432\u0435\u0440\u0441\u0438\u044f \u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430 \u0441\u043e 2. <\/p>\n<p>  <\/p>\n<p>Angular \u043d\u0430\u0447\u0430\u043b \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f Angular \u2014 11.<\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-angular\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 Angular<\/h3>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u0447\u043b\u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 AngularJS. \u0418\u0437\u044e\u043c\u0438\u043d\u043a\u043e\u0439 Angular 2 \u0441\u0442\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u044c \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u2014 Typescript. <\/p>\n<p>  <\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/strong> \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0441\u0442\u0438\u043b\u0438, \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043c\u043e\u0434\u0435\u043b\u044c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0448\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0435\u043b\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u043c\u0435\u043d\u044f\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 Angular:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({     \/**    * \u0422\u0435\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438    *\/    selector:    'navigation',           \/**    *  HTML \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439    *\/                templateUrl: '.\/navigation.component.html',     \/**    * \u0421\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430    *\/    styleUrls:   '.\/navigation.component.css' })  \/**  * \u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438  *\/  export class Navigation {     \/* . . . *\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 Angular \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 state, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 Dependency Injection. \u0415\u0441\u043b\u0438 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043c\u043d\u043e\u0433\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439, \u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 NgRx.<\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Angular \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 AngularJS: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c (PWA, Mobile, Desktop);<\/li>\n<li>Code-splitting \u2014 \u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0430 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c;<\/li>\n<li>\u0417\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"nedostatki-1\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>Typescript \u2014 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a Angular. \u042d\u0442\u043e \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u0432\u0435\u0434\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0435\u0437 \u043d\u0435\u0433\u043e Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b Typescript \u0434\u043b\u044f \u043e\u0431\u044b\u0432\u0430\u0442\u0435\u043b\u044f: \u0441\u0442\u0440\u043e\u0433\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0440\u043e\u0439 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e; \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0442\u0438\u043f\u044b, \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, Angular \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u0431\u043e\u0433\u0430\u0442\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f, \u043d\u0435\u0442, \u0441\u043a\u043e\u0440\u0435\u0435, \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u0441\u0434\u0430\u044e\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u00ab\u043b\u0451\u0433\u043a\u0438\u0435\u00bb \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438. \u041d\u043e \u0442\u0435, \u043a\u0442\u043e \u0443\u043f\u043e\u0440\u043d\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c Angular, \u2014 \u0440\u0435\u0434\u043a\u043e \u0432 \u043d\u0451\u043c \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"serebryanaya-pulya-ot-facebook--react\">\u0421\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f \u043e\u0442 Facebook \u2014 React<\/h2>\n<p>  <\/p>\n<p><strong>\u0412 2011 \u0433\u043e\u0434\u0443<\/strong> \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Facebook \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0430\u043b\u0438 \u0431\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u2014 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0432\u0448\u0438\u0435 \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u2014 AngularJS, Backbone, Ember, Knockout \u2014 \u043d\u0435 \u0434\u0430\u0432\u0430\u043b\u0438 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u0423 Facebook \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 FaxJS. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043c\u0435\u043b \u0441\u0432\u043e\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0418\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u044c;<\/li>\n<li>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434;<\/li>\n<li>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/li>\n<li>\u0411\u044b\u0441\u0442\u0440\u043e\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430 FaxJS \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b\u0438 Facebook Ads Org, \u0430 \u0437\u0430\u0442\u0435\u043c Instagram \u0438\u0441\u043f\u044b\u0442\u0430\u043b \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0435\u0439 \u043b\u0435\u043d\u0442\u0435. \u041f\u0440\u043e\u0435\u043a\u0442 FaxJS \u0431\u044b\u043b \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0434\u0430\u043b \u043d\u0430\u0447\u0430\u043b\u043e \u0437\u043d\u0430\u043c\u0435\u043d\u0438\u0442\u043e\u043c\u0443 \u0441\u0435\u0433\u043e\u0434\u043d\u044f React. \u0412 2013 React \u0431\u044b\u043b \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0430\u043a open-source \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 JSConf US.<\/p>\n<p>  <\/p>\n<p>React \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f Virtual DOM, JSX, \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, React \u2014 \u044d\u0442\u043e \u0443\u043c\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440. <\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-react\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 React<\/h3>\n<p>  <\/p>\n<p><strong>Virtual DOM, \u0438\u043b\u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM,<\/strong> \u2014 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u043a\u043e\u043f\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e HTML DOM \u0432 \u0432\u0438\u0434\u0435 JS-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041e\u043d \u0430\u0433\u0440\u0435\u0433\u0438\u0440\u0443\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0445 \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 DOM. <\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e HTML DOM \u2014 \u0435\u0433\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438: \u0438\u0437 \u043d\u0435\u0433\u043e \u0434\u043e\u0440\u043e\u0433\u043e \u043a\u0430\u043a \u0447\u0438\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u0438 \u043c\u043d\u043e\u0433\u043e \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 HTML DOM.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;container&quot;&gt;     &lt;p&gt;Some simple text&lt;\/p&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e DOM:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const virtualDOM = {     tagName: &quot;div&quot;,     attributes: { &quot;class&quot;: &quot;container&quot; },     children: [         {             tagName: &quot;p&quot;,             textContent: &quot;Some simple text&quot;         }     ] } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u043d\u0451\u0441 React, \u2014 <strong>JSX (Javascript and XML)<\/strong>. \u042d\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u0438\u043b\u0438, \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 JavaScript. JSX \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u044f\u0437\u044b\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043d\u0430\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u0438\u043b\u043e\u0439 JavaScript.<\/p>\n<p>  <\/p>\n<p>JSX \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;div className=&quot;container&quot;&gt;Content&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432 JS:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">React.createElement(&quot;div&quot;, {   className: &quot;container&quot; }, &quot;Content&quot;);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043f\u0440\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b MVC \u0438 MVVM, \u0442\u0430\u043a \u0432\u043e\u0442 React \u0438 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u0431\u0443\u043a\u0432\u0430 \u201cV\u201d \u0432 MVC\/MVVM, \u0442\u043e \u0435\u0441\u0442\u044c view \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c <strong>\u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong> \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 JSX:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;FormComponent&gt;     &lt;InputComponent type=&quot;text&quot; name=&quot;userName&quot; onChange={handleChange} value={userName} \/&gt;     &lt;InputComponent type=&quot;password&quot; name=&quot;password&quot; onChange={handleChange} value={password} \/&gt;     &lt;ButtonComponent type=&quot;submit&quot;&gt;Click me&lt;\/ButtonComponent&gt; &lt;\/FormComponent&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki-2\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>React \u2014 \u0441\u043b\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0418\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432 \u043d\u0451\u043c \u043d\u0435\u0433\u0434\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0432\u0435\u0434\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432\u0435\u0434\u0451\u0442 \u043a \u0430\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u2014 prop drilling. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430, \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0441\u0430\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f (\u043d\u043e\u0432\u043e\u0435 \u0438\u043c\u044f \u0438\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f). \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 prop-drilling \u0442\u0440\u0430\u0442\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0432\u0435\u0434\u0451\u0442 \u043a \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0431\u0430\u0433\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xl\/i7\/uk\/xli7ukjp08h1bvkp048yxrpcx7s.png\"><br \/>  <em>\u0421\u0445\u0435\u043c\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a prop-drilling<\/em><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Facebook \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 React \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 Flux.<\/p>\n<p>  <\/p>\n<h2 id=\"popytka-ulozhit-vsyo-po-polochkam--flux\">\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0443\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0451 \u043f\u043e \u043f\u043e\u043b\u043e\u0447\u043a\u0430\u043c \u2014 Flux<\/h2>\n<p>  <\/p>\n<p><strong>Flux<\/strong> \u2014 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d. \u042d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u044b\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a React, \u0445\u043e\u0442\u044f \u0441\u0430\u043c\u0430 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e, \u0438\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, framework-agnostic.<\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u0421\u0445\u0435\u043c\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 React, \u043a\u0430\u043a \u0438 \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 MVVM, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dd\/e-\/lb\/dde-lb-fmyqc2y4ek5ov8yvgqfo.png\"><br \/>  <em>\u041e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 MVVM-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043a\u0430\u0442\u0430\u0441\u0442\u0440\u043e\u0444\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438 \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u0431\u044b\u043b \u0440\u0435\u0448\u0438\u0442\u044c Flux. \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c Flux \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c: \u043e\u043d\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>Flux \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 4-\u0445 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>Dispatcher \u2014 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. \u0414\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/li>\n<li>Store \u2014 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430 \u0441\u0432\u043e\u0451 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435.<\/li>\n<li>Actions \u2014 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u043e\u043c.<\/li>\n<li>Views \u2014 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0432 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a: <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ab\/u4\/yg\/abu4ygako7o-glogukrpa0nkw34.png\"><br \/>  <em>\u0421\u0445\u0435\u043c\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043e Flux-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u00ab\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u00bb \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u00ab\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u00bb. \u041e\u043d \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u00ab\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043d\u0451\u043c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b. \u00ab\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u00bb \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u044e\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u00ab\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u00bb. \u0422\u0430\u043a\u043e\u0439 \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0443 \u0438\u043b\u0438 \u043e\u043d\u043e \u043d\u0435 \u0443\u043f\u0430\u0434\u0451\u0442 \u0432 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u201cUncaught (in promise) Error: &#8230;\u201d<\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki-3\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 Flux \u0438\u043c\u0435\u043b \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c\u0438, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u044e\u0440\u043f\u0440\u0438\u0437\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 2015 \u0433\u043e\u0434\u0443 \u0414\u0430\u043d\u0438\u0438\u043b \u0410\u0431\u0440\u0430\u043c\u043e\u0432 \u0438 \u042d\u043d\u0434\u0440\u044e \u041a\u043b\u0430\u0440\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 Redux. \u041e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 Flux-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"na-etot-raz-poluchilos-luchshe--redux\">\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043b\u0443\u0447\u0448\u0435 \u2014 Redux<\/h2>\n<p>  <\/p>\n<p>Redux \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c API, \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043b\u0438 state container \u0441 \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u043e Flux \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449, \u0432 Redux \u2014 \u043e\u0434\u043d\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-1\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 React \u0441 Redux \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0438\u043c\u0435\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043f\u0440\u043e\u0434\u0430\u0451\u0442\u0435 \u0437\u043d\u0430\u0447\u043a\u0438: \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0449\u0435\u0442\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441\u0431\u044b\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0438 \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u0422\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 React \u0431\u0435\u0437 Redux. \u041d\u043e \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c Redux, \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043b\u043e\u0449\u0430\u0434\u043a\u0430 \u0434\u043b\u044f \u0441\u0431\u044b\u0442\u0430 \u2014 Redux store. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 Wildberries \u0438\u043b\u0438 Lamoda, \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0434\u0430\u0432\u0435\u0446 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u0432\u0430\u0440 \u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u0436\u0443 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0422\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0441\u0445\u0435\u043c\u0435: <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gi\/fs\/hs\/gifshs4znktsghfoapqtosbvu7w.png\"><br \/>  <em>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 React \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Redux \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Redux:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ig\/vb\/ui\/igvbui8gtakoq_srgosjoaoawuc.png\"><br \/>  <em>\u0421\u0445\u0435\u043c\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Redux<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u0440\u043e\u043c\u0435 Reducer. <\/p>\n<p>  <\/p>\n<p>Reducer \u2014 \u0447\u0438\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 (Action) \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043c\u043e\u0434\u0435\u043b\u044c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0430 \u043d\u0435 \u043c\u0443\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e, \u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u044b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. <\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e Redux \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0441 \u0444\u043e\u043a\u0443\u0441\u043e\u043c \u043d\u0430 React, \u043e\u043d \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u0430\u0448\u0451\u043b \u0441\u0435\u0431\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u0434\u0430\u0436\u0435 \u0441 AngularJS.<\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki-redux\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 Redux<\/h3>\n<p>  <\/p>\n<p>Redux \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0434\u0440\u0443\u0447\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\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 (\u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c, \u0445\u043e\u0442\u044f \u043e\u043d \u043d\u0435 \u043d\u0435\u0441\u0451\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043b\u043e\u0433\u0438\u043a\u0438): \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Action (\u0438\u043d\u043e\u0433\u0434\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439), Reducer, Selector. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u043f\u0438\u0448\u0435\u0448\u044c, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0430\u043d\u0434\u043b.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 Redux \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043d\u043e \u0441 \u043d\u0438\u043c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u00ab\u043d\u0430\u0431\u0438\u0442\u044c \u0440\u0443\u043a\u0443\u00bb: \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0430 \u044d\u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0432\u044f\u0437\u043a\u0435 React \u0438 Redux \u043f\u0438\u0448\u0443\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Redux \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d \u0438 \u0432 2020 \u0433\u043e\u0434\u0443. \u042d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043e\u043f\u044b\u0442\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"ot-multipage-k-spa-i-obratno--nextjs\">\u041e\u0442 Multipage \u043a SPA \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u2014 Next.js<\/h2>\n<p>  <\/p>\n<p>\u0414\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043f\u0440\u043e SPA-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. SPA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0431\u044c\u0451\u0442 \u043f\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 UX (\u0441 \u0430\u043d\u0433\u043b. User Experience). \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0431\u043e\u0442\u044b \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 JS, \u2014 \u0432 2020 \u0433\u043e\u0434\u0443 Google-Bot \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0435\u043c\u043d\u043e\u0433\u0438\u0445, \u043a\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u0435\u0442 SPA. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/1-\/zk\/kp\/1-zkkpfl3ipin7tqqefvhmbt2ss.png\"><br \/>  <em>\u0412\u043b\u0438\u044f\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043e \u043d\u043e\u0432\u043e\u043c\u043e\u0434\u043d\u044b\u0445 SPA \u0432 \u0442\u0440\u0435\u043d\u0434\u0435 \u0431\u044b\u043b \u043f\u043e\u0434\u0445\u043e\u0434 multipage, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0438\u043c\u0435\u043b \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0435\u0451 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0432\u0437\u044f\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f ZEIT. \u0422\u0430\u043a \u0432 2016 \u0433\u043e\u0434\u0443 \u0431\u044b\u043b \u0432\u044b\u043f\u0443\u0449\u0435\u043d <strong>SSR (Server Side Rendering)<\/strong> \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u2014 <strong>Next.js.<\/strong> \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0432\u0435\u0440\u0445 React \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c multipage \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c SPA. <\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-2\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c Next.js \u2014 <strong>SSR.<\/strong> \u042d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043f\u043e\u0432\u0435\u0440\u0445 React, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0432\u0441\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441 \u043f\u0440\u0435\u0434\u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 DOM, \u0438 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 JS \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043a\u0430\u043a \u0441 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c SPA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u0421ode-scplitting<\/strong> (\u0441 \u0430\u043d\u0433\u043b. \u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0430 \u043a\u043e\u0434\u0430) \u2014 \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 JS-\u043a\u043e\u0434\u0430 \u043d\u0435 \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043b\u0438\u0448\u044c \u043c\u0430\u043b\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0441\u0435\u0442\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u043e\u0434 \u0438 \u043d\u0435 \u0442\u044f\u043d\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p>\u0421 Next.js \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u043e\u043d \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0447\u0451\u0440\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435. <\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043f\u0430\u0440\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript;<\/li>\n<li>Hot Reload \u2014 \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u043d\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435;<\/li>\n<li>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Router.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"nedostatki-4\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043d\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u0438 \u043f\u043e\u0434 \u0432\u0441\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u0422\u0430\u043a \u0438 Next.js \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0440\u0438\u0431\u0438\u0442\u0443\u044e \u0433\u0432\u043e\u0437\u0434\u044f\u043c\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0443\u0447\u0443 \u043b\u043e\u0443\u0434\u0435\u0440\u043e\u0432, \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438, \u0442\u0443\u0442 \u044d\u0442\u043e\u0442 \u043d\u043e\u043c\u0435\u0440 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 \u2014 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0431\u043e\u0440\u043a\u0430, \u0441\u043a\u0440\u044b\u0442\u0430 \u043e\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u044e\u0431\u0443\u044e \u043f\u0440\u0438\u0445\u043e\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, Next.js \u2014 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u043d\u0438\u043a\u0430\u0442\u044c, \u0445\u043e\u0442\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0438 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u0445\u043e\u0440\u043e\u0448\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 <strong>2015\u20132016 \u0433\u043e\u0434\u0430\u0445<\/strong> \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u043e\u0432 \u043d\u0430 \u0442\u0435\u043c\u0443 SPA vs SSR. \u0412\u0441\u0451 \u043d\u043e\u0432\u043e\u0435 \u2014 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u0430\u0431\u044b\u0442\u043e\u0435 \u0441\u0442\u0430\u0440\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u043b\u0438 multipage-\u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 Next.js. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0438\u0447\u0443\u0442\u044c \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c, \u0430, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0441\u0442\u0430\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c SSR. \u0412 2020 \u0433\u043e\u0434\u0443 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a SPA-, \u0442\u0430\u043a \u0438 SSR-\u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u043e\u0432 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u043e\u0441\u044c. <\/p>\n<p>  <\/p>\n<h2 id=\"iz-kitaya-s-lyubovyu--vuejs\">\u0418\u0437 \u041a\u0438\u0442\u0430\u044f \u0441 \u043b\u044e\u0431\u043e\u0432\u044c\u044e \u2014 Vue.js<\/h2>\n<p>  <\/p>\n<p>\u0412 2014 \u0433\u043e\u0434\u0443 React \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u043b \u043e\u0431\u043e\u0440\u043e\u0442\u044b, AngularJS, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0443\u0442\u0440\u0430\u0447\u0438\u0432\u0430\u043b \u0441\u0432\u043e\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c, \u0430 Angular \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0435\u0449\u0451 \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0423 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0443\u0436\u0435 \u0431\u044b\u043b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u043d\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u0430\u043a \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430, \u043d\u0438\u0437\u043a\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u00ab\u0432\u0437\u043b\u0435\u0442\u0435\u043b\u043e\u00bb. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u2014 Vue.js. \u0415\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044c, \u0431\u044b\u0432\u0448\u0438\u0439 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a Google, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b AngularJS \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Vue.js \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436.<\/p>\n<p>  <\/p>\n<p>\u0423 Vue.js \u0431\u044b\u043b \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0443\u0442\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u0444\u0438\u0447\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043e\u0442 \u0440\u0435\u043b\u0438\u0437\u0430 \u043a \u0440\u0435\u043b\u0438\u0437\u0443. \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0435\u043c\u0443 \u043f\u0440\u043e\u0432\u0430\u043b, \u043d\u043e \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043e\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u043b \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c: \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f 3.0 \u0432\u044b\u0448\u043b\u0430 \u0432 2020 \u0433\u043e\u0434\u0443. \u0412 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u0435\u043c\u0443 \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u0441\u043f\u043b\u043e\u0447\u0451\u043d\u043d\u043e\u0435 \u0430\u0437\u0438\u0430\u0442\u0441\u043a\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0430 \u0432 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u0435\u0432\u0430\u043d\u0433\u0435\u043b\u0438\u0441\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043e\u0448\u0451\u043b \u0432 \u0442\u043e\u043f-3 \u043a\u0438\u0442\u043e\u0432 \u0438 \u0441\u0442\u0430\u043b \u0442\u044f\u0433\u0430\u0442\u044c\u0441\u044f \u0441 Angular \u0438 React:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fb\/wn\/xr\/fbwnxrcgiicdbv82qorsrsb9hyi.png\"><br \/>  <em>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0442\u043e\u043f-3 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043d\u0430 Github<\/em><\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-3\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>Vue \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>C\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432:<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!-- v-if, \u043a\u0430\u043a \u0438 ng-if \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 --&gt;  &lt;!-- Vue.js --&gt; &lt;span v-if=&quot;disabled&quot;&gt;{{ message }}&lt;\/span&gt;  &lt;!-- AngularJS --&gt; &lt;span ng-if=&quot;disabled&quot;&gt;{{ message }}&lt;\/span&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0432 \u044d\u0442\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043c\u043d\u043e\u0433\u043e\u0435: \u043e\u0442 \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u043e\u0433\u0430 \u0432\u0445\u043e\u0434\u0430 \u0434\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n<p>  <\/p>\n<p>\u0418\u0437 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 Vue.js \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442:<\/p>\n<p>  <\/p>\n<ul>\n<li>Two-way data binding (\u043f\u043e\u0434\u043e\u0431\u043d\u043e Angular);<\/li>\n<li>SSR, \u043a\u0430\u043a \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0435\u0441\u0442\u044c Nuxt.js;<\/li>\n<li>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b, \u0447\u0442\u043e \u0441\u0445\u043e\u0436\u0435 \u0441 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439 React);<\/li>\n<li>State container \u2014 Vuex (\u0430\u043d\u0430\u043b\u043e\u0433 Redux \u0434\u043b\u044f React);<\/li>\n<li>CLI \u2014 command line interface, \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439;<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JSX \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li>\u041c\u0430\u043b\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 React \u0438 Angular.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>Vue \u043d\u0435 \u043f\u0440\u0438\u0432\u043d\u0451\u0441 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435, \u043e\u043d \u0432\u0437\u044f\u043b \u0443\u0436\u0435 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u0431\u0430\u0433\u0430\u0436 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438\u0437 React\/AngularJS\/Angular \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0443\u0431\u0440\u0430\u043b \u0440\u0430\u0437\u0434\u0443\u0442\u043e\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 API \u0438 \u043f\u0440\u0438\u0432\u0451\u043b \u0432\u0441\u0451 \u043a \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0432\u0438\u0434\u0443. <\/p>\n<p>  <\/p>\n<p>Vue.js \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0438\u0441\u043a\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0441\u0431\u043e\u0440\u043a\u0443. \u0423 \u043d\u0435\u0433\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u0442\u0430\u0432\u044f\u0442 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440. \u041d\u0430 Vue \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki-5\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0436\u0430\u043b\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0433\u0430\u0439\u0434\u043e\u0432 \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e LOC (lines of code \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430) \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0437\u043d\u0430\u043b\u0438, \u043a\u0443\u0434\u0430 \u0438 \u043a\u0430\u043a \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u0442\u0435\u0440\u044f\u0442\u044c \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. <\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c: \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0432\u044b\u0440\u043e\u0441\u043b\u043e \u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u0435\u043f\u043b\u043e\u0445\u043e\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 Vue.js, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0435\u0431\u044f \u0438\u0437\u0436\u0438\u043b\u0438. <\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0434\u043e\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u0434\u043e \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 React \u043f\u043e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438. \u041d\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u0432\u0438\u043d\u044b Vue.js, \u0432\u0435\u0434\u044c \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u043e\u0433\u0434\u0430 \u043a\u0430\u043a React \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c Vue.js \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u043b \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043d\u043e\u0433\u0438 \u0437\u0430 \u0441\u043a\u0440\u043e\u043c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u0415\u043c\u0443 \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432, \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u0410 \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0442\u044f\u043d\u0443\u0442\u044c\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043d\u0435 \u0443\u0442\u043e\u043d\u0443\u0442\u044c \u0432 \u0437\u043e\u043e\u043f\u0430\u0440\u043a\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<p>  <\/p>\n<h2 id=\"chernaya-magiya--svelte\">\u0427\u0435\u0440\u043d\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u2014 Svelte<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0442\u043e\u043f-3 \u043b\u0438\u0434\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u0435\u043d \u0438 \u0443\u0441\u0442\u043e\u044f\u043b\u0441\u044f, \u043d\u043e \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u044b\u043b\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0418\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0440\u0442\u0443\u043e\u0437\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0451 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0438 \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0445\u0432\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u043d\u0438 React, \u043d\u0438 Angular, \u043d\u0438 Vue.<\/p>\n<p>  <\/p>\n<p>Svelte \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u043e\u0432\u0430\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0443 \u0432 2016 \u0433\u043e\u0434\u0443, \u043d\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u043b\u0430\u0441\u044c. \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432 2018 \u0433\u043e\u0434\u0443, \u0430 \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e \u043d\u0451\u043c \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"osobennosti-4\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b Svelte: \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u2014 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, <em>\u0447\u0442\u043e<\/em> \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0443\u0436\u0435 \u0440\u0435\u0448\u0430\u0435\u0442, <em>\u043a\u0430\u043a<\/em> \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0418\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0430 \u043d\u0435 \u043f\u0443\u0442\u044c \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 Svelte \u043e\u0442\u0434\u0430\u0451\u0442 \u0443\u0436\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cd\/0y\/or\/cd0yoriytqpxqnfzyh0arac1jpe.png\"><br \/>  <em>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 Svelte \u0438 React \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, Svelte \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043d\u0435\u0441\u0451\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443, \u0447\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0441\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0431\u0435\u0437 \u0443\u0447\u0451\u0442\u0430 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\/\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/th>\n<th>\u0420\u0430\u0437\u043c\u0435\u0440, \u043a\u0431<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>React (v.16)<\/td>\n<td>97.5<\/td>\n<\/tr>\n<tr>\n<td>Vue (v.2)<\/td>\n<td>58.8<\/td>\n<\/tr>\n<tr>\n<td>Angular (v.2)<\/td>\n<td>566<\/td>\n<\/tr>\n<tr>\n<td>Svelte<\/td>\n<td>0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0446\u0438\u0444\u0440\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0443 Svelte \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f 0.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, Svelte \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0445\u0432\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u0412\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u201cruntime\u201d (\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435);<\/li>\n<li>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438;<\/li>\n<li>\u0418\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438;<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 SSR;<\/li>\n<li>\u041a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e (Svelte Native);<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Typescript.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0435\u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e Svelte \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0441 \u0442\u0430\u043a\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439. \u0410 \u0435\u0449\u0451 \u043e\u043d \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u0435\u043d \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 <a href=\"https:\/\/svelte.dev\/tutorial\/basics\">\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"nedostatki-6\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0411\u0435\u0434\u043d\u044b\u0439 CLI \u0438\u043b\u0438, \u0442\u043e\u0447\u043d\u0435\u0435, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e CLI \u0434\u043b\u044f Svelte \u2014 \u043e\u0449\u0443\u0442\u0438\u043c\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a. \u0412\u0435\u0434\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u0430\u0440\u043a\u0430\u0441\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0443 Svelte \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 React, Vue \u0438 Angular. \u041d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f Svelte, \u043a\u0430\u043a \u0432 React. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u044b\u0441\u043a\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0445 \u043d\u0430\u043f\u0438\u043b\u044c\u043d\u0438\u043a\u043e\u043c, \u0430 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0431\u0430\u0433\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u2014 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438. \u042d\u0442\u043e\u0442 \u0432\u044b\u0432\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 <a href=\"https:\/\/stackoverflow.com\/\">https:\/\/stackoverflow.com\/<\/a>, \u0433\u0434\u0435 \u0438\u0445 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0443 Angular \u0438\u043b\u0438 Vue. <\/p>\n<p>  <\/p>\n<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Svelte \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u044f\u043c\u0438, \u0430 \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433, Svelte \u043e\u0431\u0437\u0430\u0432\u0451\u043b\u0441\u044f 40k stars \u043d\u0430 github. \u0415\u0433\u043e \u0447\u0430\u0441\u0442\u043e \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e\u0442 \u043d\u0430 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f\u0445 \u0438 \u0432 \u0431\u043b\u043e\u0433\u0430\u0445, \u0447\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0435\u0433\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p><strong>\u0412 2020 \u0433\u043e\u0434\u0443<\/strong> \u043b\u0438\u0434\u0435\u0440\u0430\u043c\u0438 \u0441\u0440\u0435\u0434\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f React, Angular \u0438 Vue.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043d\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0435 \u0437\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0443\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Svelte.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0441\u0432\u0435\u0436\u0438\u0442\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0432\u0441\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u0413\u043e\u0434 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f<\/th>\n<th>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/th>\n<th>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>AngularJS<\/td>\n<td>2010<\/td>\n<td>\u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0438\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Dependency injection. <br \/>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Two-way data binding \u043f\u043e\u0434\u0445\u043e\u0434. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Router. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. <br \/>  \u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0442\u0435\u0441\u0442-\u0440\u0430\u043d\u043d\u0435\u0440\u0430. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 HTTP-\u043a\u043b\u0438\u0435\u043d\u0442.<\/td>\n<td>\u041e\u0431\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JQuery. <br \/>  \u0418\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/td>\n<\/tr>\n<tr>\n<td>Angular<\/td>\n<td>2016<\/td>\n<td>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c SSR \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <br \/>  \u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0431\u043e\u0433\u0430\u0442\u044b\u0439 CLI. <br \/>  \u041a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439. <br \/>  \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0438\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Dependency injection. <br \/>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Two-way data binding \u043f\u043e\u0434\u0445\u043e\u0434. <br \/>  \u0418\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Router; \u0421\u0432\u043e\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. <br \/>  \u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0442\u0435\u0441\u0442-\u0440\u0430\u043d\u043d\u0435\u0440\u0430. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 HTTP-\u043a\u043b\u0438\u0435\u043d\u0442. <br \/>  \u0418\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. <br \/>  Code-splitting. <br \/>  \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Typescript.<\/td>\n<td>\u0412\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430. <br \/>  \u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430. <br \/>  \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Typescript.<\/td>\n<\/tr>\n<tr>\n<td>React.js<\/td>\n<td>2013<\/td>\n<td>\u0412\u044b\u0441\u043e\u043a\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. <br \/>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <br \/>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. <br \/>  \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. <br \/>  \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f Virtual DOM. <br \/>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043cJSX. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript.<\/td>\n<td>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/td>\n<\/tr>\n<tr>\n<td>Flux<\/td>\n<td>2014<\/td>\n<td>\u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445.<br \/>  \u041b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430.<br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript.<\/td>\n<td>\u0412\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430. \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430.<\/td>\n<\/tr>\n<tr>\n<td>Redux<\/td>\n<td>2015<\/td>\n<td>\u0415\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0435\u043c \u0432\u043e Flux. <br \/>  \u041b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript.<\/td>\n<td>\u041d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430. <br \/>  \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430.<\/td>\n<\/tr>\n<tr>\n<td>Next.js<\/td>\n<td>2016<\/td>\n<td>SSR-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. <br \/>  Code-splitting \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript. <br \/>  \u0425\u043e\u0440\u043e\u0448\u0438\u0439 CLI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Router. <br \/>  Hot reload \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/td>\n<td>\u0416\u0451\u0441\u0442\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <br \/>  \u041d\u0435\u0433\u0438\u0431\u043a\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438.<\/td>\n<\/tr>\n<tr>\n<td>Vue.js<\/td>\n<td>2014<\/td>\n<td>\u041d\u0438\u0437\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430. <br \/>  Two-way data binding. <br \/>  \u0418\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. <br \/>  \u041d\u0435\u043f\u043b\u043e\u0445\u043e\u0439 CLI. <br \/>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. <br \/>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JSX. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript.<\/td>\n<td>\u041d\u0435 \u0442\u0430\u043a\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 React. <br \/>  \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c.<\/td>\n<\/tr>\n<tr>\n<td>Svelte<\/td>\n<td>2016<\/td>\n<td>\u041d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u0435. <br \/>  \u0412\u044b\u0441\u043e\u043a\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. <br \/>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SSR. <br \/>  \u041a\u0440\u043e\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439. <br \/>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Typescript.<\/td>\n<td>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438. <br \/>  \u0421\u043b\u0430\u0431\u044b\u0439 CLI. <br \/>  \u041d\u0435\u0431\u043e\u0433\u0430\u0442\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<h2 id=\"poleznaya-literatura\">\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u0430<\/h2>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442 \u0432\u0430\u0441 \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043c\u043e\u0447\u044c. <\/p>\n<p>  <\/p>\n<h3 id=\"angularjs-i-angular\">AngularJS \u0438 Angular<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/toddmotto\/angularjs-styleguide\">https:\/\/github.com\/toddmotto\/angularjs-styleguide<\/a> \u2014 \u0441\u0442\u0430\u0439\u043b-\u0433\u0430\u0439\u0434 \u043f\u043e AngularJS \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/PatrickJS\/awesome-angular\">https:\/\/github.com\/PatrickJS\/awesome-angular<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Angular \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<h3 id=\"reactjs\">React.js<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/enaqx\/awesome-react\">https:\/\/github.com\/enaqx\/awesome-react<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React.js \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/pomb.us\/build-your-own-react\/\">https:\/\/pomb.us\/build-your-own-react\/<\/a> \u2014 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 React.js.<\/p>\n<p>  <\/p>\n<h3 id=\"redux\">Redux<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">https:\/\/redux.js.org\/introduction\/getting-started<\/a> \u2014 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u043f\u0440\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0435 \u0441 Redux.<\/p>\n<p>  <\/p>\n<h3 id=\"nextjs\">Next.js<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/unicodeveloper\/awesome-nextjs\">https:\/\/github.com\/unicodeveloper\/awesome-nextjs<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Next.js \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<h3 id=\"vuejs\">Vue.js<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/vuejs\/awesome-vue\">https:\/\/github.com\/vuejs\/awesome-vue<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Vue.js \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/nuxtjs.org\/\">https:\/\/nuxtjs.org<\/a> \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 Next.js \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Vue.js.<\/p>\n<p>  <\/p>\n<h3 id=\"svelte\">Svelte<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/svelte-community.netlify.app\/\">https:\/\/svelte-community.netlify.app<\/a> \u2014 \u043e\u0433\u0440\u043e\u043c\u043d\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u043e\u0442 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438. <\/p>\n<p>  <\/p>\n<h3 id=\"interesno\">\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/tastejs\/todomvc\">https:\/\/github.com\/tastejs\/todomvc<\/a> \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 to-do \u043b\u0438\u0441\u0442\u043e\u0432, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/gothinkster\/realworld\">https:\/\/github.com\/gothinkster\/realworld<\/a> \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/533702\/\"> https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/533702\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0438\u043c\u0430 \u0427\u0443\u0434\u0438\u043d\u043e\u0432, \u044f \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a \u043d\u0430 <a href=\"https:\/\/praktikum.yandex.ru\/web\/?utm_source=pr&amp;utm_medium=content&amp;utm_term=21_12_20&amp;utm_campaign=pr_content_web_habr\">\u0432\u0435\u0431-\u0444\u0430\u043a\u0443\u043b\u044c\u0442\u0435\u0442\u0435<\/a> \u042f\u043d\u0434\u0435\u043a\u0441.\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u043c\u0430, Head of Group, Front-end, ABBYY. <\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0443\u0434\u0435\u043d\u0442\u044b \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043b\u0438 \u043c\u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0427\u0442\u043e \u043b\u0443\u0447\u0448\u0435: Angular \u0438\u043b\u0438 React?\u00bb. \u042f \u043d\u0430\u0447\u0430\u043b \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u044f. \u041f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442. <\/p>\n<p>  <\/p>\n<p>\u041e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437. \u0410 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0448\u0443 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438.\u00a0\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442. \u0417\u0430\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u043f\u043e\u0440\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0443\u0445\u043d\u0435 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0440\u0430\u043d\u0442\u0438\u043d\u0430) \u0438 \u0432 \u0441\u0435\u0442\u0438. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0441\u0432\u043e\u0451 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u00ab\u0437\u043e\u043e\u043f\u0430\u0440\u043a\u00bb \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441\u0432\u0435\u0440\u0445\u0443. <\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/533702\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/24\/dc\/jd\/24dcjdelkh3b0swqrhx8ynlutws.png\"><\/a><\/p>\n<p>  <\/p>\n<h2 id=\"biblioteki-i-freymvorki\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e <strong>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/strong> \u0438 <strong>\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/strong> \u2014 \u043d\u0435 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435. <\/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-315260","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315260","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=315260"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315260\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=315260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=315260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}