{"id":414092,"date":"2024-06-29T23:32:57","date_gmt":"2024-06-29T23:32:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=414092"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=414092","title":{"rendered":"<span>\u041f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0438\u043b\u0438\u0441\u044c \u0432 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u043d\u043e\u043b\u0438\u0442, \u0430 \u043d\u0435 \u0432 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/814\/9f0\/98a\/8149f098aa97aecbd8b5b4125d1b695e.png\" width=\"740\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/814\/9f0\/98a\/8149f098aa97aecbd8b5b4125d1b695e.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043f\u043e\u0434\u0445\u043e\u0434. \u0414\u0430\u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043f\u0440\u0438\u0440\u043e\u0441\u043b\u0430 \u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438.<\/p>\n<p>\u041d\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0438\u0437\u043d\u0443\u0442\u0440\u0438 &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;. \u0412 \u044d\u0442\u043e\u0439, \u043f\u0435\u0440\u0432\u043e\u0439, \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e UI. \u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0442\u043e \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u043e \u043d\u0430\u0441 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0435\u043a \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u0434\u043e\u043c, \u0438 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435.<\/p>\n<p><strong>\u041e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/strong>. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u043d\u0435 \u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;, \u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430. \u042f \u043c\u043e\u0433\u0443 \u0431\u044b\u0442\u044c \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u043d\u0430 \u0442\u0435\u043c\u0443 \u0442\u043e\u0433\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u0442\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0435\u0449\u0435 \u0434\u043e \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443. \u0412 \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0435 \u0432\u0438\u0434\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u043b\u044e\u0431\u0438\u0442 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0430 \u0441 \u043d\u043e\u0442\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439, \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\n<p><strong>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u0442\u0435\u0445.\u043e\u0431\u0437\u043e\u0440<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u043d\u043e\u043b\u0438\u0442 \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435 \u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435. \u041e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043e\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u0445 + \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 <strong>Community\u00a0Edition<\/strong>\u00a0(\u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f\u00a0\u0432 <a href=\"https:\/\/gitlab.com\/unidata-community-group\"><u>\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c\u00a0\u0433\u0438\u0442\u043b\u0430\u0431\u0435<\/u><\/a>)\u00a0\u0438\u00a0<strong>Enterprise\u00a0Edition<\/strong>.<\/p>\n<p>\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 20 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u0447\u0438\u0441\u043b\u043e \u043d\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435). \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u0435\u0436\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e typescript \u0438 \u043f\u043e\u0447\u0442\u0438 \u0441\u0432\u0435\u0436\u0443\u044e react (\u0441\u0435\u0439\u0447\u0430\u0441 16, \u043d\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043d\u0430 17 &#8212; \u0434\u0435\u043b\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438). \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c MVC \u043f\u043e\u0434\u0445\u043e\u0434 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435: \u0440\u0435\u0430\u043a\u0442 \u0442\u043e\u043b\u044c\u043a\u043e view-\u0441\u043b\u043e\u0439, \u0441\u0432\u043e\u044f observable \u043c\u043e\u0434\u0435\u043b\u044c (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e \u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e), mobx\u00a0\u0441\u0442\u043e\u0440\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432.<\/p>\n<p><strong>\u0421\u0442\u0430\u0440\u044b\u0435 \u0431\u043e\u043b\u044f\u0447\u043a\u0438<\/strong><\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e UI &#171;\u042e\u043d\u0438\u0434\u0430\u0442a&#187; \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 ExtJS. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0434\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043b\u0430\u0433\u043e\u0432 \u0432 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0438 if-else \u0432 \u043a\u043e\u0434\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 (\u0434\u0430\u043b\u0435\u0435 UserExits \u0438\u043b\u0438 UE), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0438\u0434\u0435 \u0438 \u0432 \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0447\u0430\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0444\u0430\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043d\u0443\u0434\u0438\u043b\u0438 \u043d\u0430\u0441 \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0435\u043a:<\/p>\n<p><strong>1. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440<\/strong><\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b ExtJS \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443. \u0414\u0430\u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u043b\u0438 \u043f\u0440\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 layout \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 ExtJS \u0438\u0442\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439 \u043b\u0438\u0431\u043e \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 ExtJS \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f. \u0410 \u043d\u0430\u0448\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u0447\u0430\u0441\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043b \u043b\u0438\u0431\u043e &#171;\u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0435&#187; \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043b\u0438\u0431\u043e \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<p><strong>2. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0439 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432<\/strong><\/p>\n<p>\u0418\u0437-\u0437\u0430 \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 \u043c\u043d\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u0440\u0435\u0441\u043b\u043e\u0432\u0443\u0442\u044b\u0435 if-else \u0446\u0435\u043f\u043e\u0447\u043a\u0438). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e UE, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u0441\u0430\u043b \u043e\u0442\u0434\u0435\u043b \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f, \u0442\u043e\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438: \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438, \u0431\u0435\u0437 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u0445 \u043a \u043f\u0440\u0430\u0432\u043a\u0430\u043c \u0432 UE.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 javascript, \u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u043d\u0430 \u0441\u0442\u044b\u043a\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 UE \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u0432 UE \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0436\u0438\u0434\u0430\u044e\u0442\u0441\u044f, \u0438 \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418 \u044d\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c, \u0447\u0442\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/51c\/33c\/da3\/51c33cda3907ac3267e45fbe6b862ff3.png\" width=\"740\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/51c\/33c\/da3\/51c33cda3907ac3267e45fbe6b862ff3.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u044b\u043b\u0438 \u0435\u0449\u0451 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u044d\u0442\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043e\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0449\u0438\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043d\u0430\u0448\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d typescript. \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u0443\u0436\u0435 \u0434\u0435-\u0444\u0430\u043a\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0434\u043b\u044f frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043e\u043d \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0442\u0430\u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d. \u0422\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 typescript, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u043e \u043d\u0430 \u0432\u044b\u0431\u043e\u0440.<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b ExtJS \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0432\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 angular, react \u0438 vue.<\/p>\n<p>\u0415\u0449\u0435 \u0431\u044b\u043b\u0438 \u0441\u0432\u0435\u0436\u0438 \u0432\u043e\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u043e\u0431 angular\u00a0js, \u0432\u0442\u043e\u0440\u043e\u0439 \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u0441\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439, \u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u0434\u043e\u0432\u0435\u0440\u0438\u0435 \u043a \u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0411\u043e\u044f\u043b\u0438\u0441\u044c, \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043d\u0435 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0435\u0433\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c. \u0425\u043e\u0442\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442 \u0431\u044b\u043b \u0431\u044b \u043d\u0430 \u043d\u0451\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/984\/d87\/f51\/984d87f51a784aa551d4947a98f83292.png\" width=\"740\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/984\/d87\/f51\/984d87f51a784aa551d4947a98f83292.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0430 Vue. \u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u0438 \u0435\u0433\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c, \u043d\u043e Vue \u043d\u0435 \u0438\u043c\u0435\u043b \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 typescript, \u0438 \u0431\u0440\u0430\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0432 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043c\u044b \u0431\u044b\u043b\u0438 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b (\u043a \u0441\u043b\u043e\u0432\u0443, \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0438\u0437-\u0437\u0430 react&#8217;\u0430, \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430 Vue). \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0431\u0435\u0434\u0438\u043b react. \u0421\u044b\u0433\u0440\u0430\u043b\u0430 \u0440\u043e\u043b\u044c \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0438 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u044e\u0441\u043e\u0432\/\u043c\u0438\u043d\u0443\u0441\u043e\u0432 react&#8217;a.<\/p>\n<p>\u0412\u044b\u0431\u043e\u0440 \u043d\u0430 mobx \u043f\u0430\u043b \u0432 \u0432\u0438\u0434\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 &#171;\u0443\u043c\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b ExtJs. \u041c\u043e\u0434\u0435\u043b\u0438 \u0432 ExtJs \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c <em>commit &#8212; \u0444\u0438\u043a\u0441\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438, revert &#8212; \u043e\u0442\u043a\u0430\u0442 \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043c\u043e\u0434\u0435\u043b\u0438, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d commit<\/em>. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c Dirty &#8212; \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0430 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e commit. \u041d\u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0435, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 UI, \u043a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0435\u0439\u0431\u043b\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 save, \u0435\u0441\u043b\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0444\u043b\u0430\u0433\u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0435\u043b\u0438, \u0442.\u043a. \u043e\u043d\u0438 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. Redux \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435 \u043c\u043e\u0433, \u0442.\u043a. \u043e\u043d \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f react + mobx \u043d\u0430 typescript.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/63d\/801\/071\/63d801071762975808d20d6b84a52a7b.png\" width=\"740\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/63d\/801\/071\/63d801071762975808d20d6b84a52a7b.png\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u041f\u0435\u0440\u0432\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/strong><\/p>\n<p>\u0421 \u043d\u043e\u0432\u044b\u043c \u0441\u0442\u0435\u043a\u043e\u043c \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u0432 \u0441\u0435\u0431\u044f:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0434\u0435\u043b\u044c,<\/p>\n<\/li>\n<li>\n<p>\u0441\u0435\u0440\u0432\u0438\u0441\u044b,<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c,<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u043e\u0440\u044b (\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b),<\/p>\n<\/li>\n<li>\n<p>observer\u00a0react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0435.<\/p>\n<p>\u041f\u043e\u00a0\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435\u00a0\u0432\u0441\u0451\u00a0\u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u00a0\u0442\u0430\u043a:<\/p>\n<pre><code>\u2014\u00a0src   |\u00a0\u00a0components\u00a0-\u00a0\u043e\u0431\u0449\u0438\u0435\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00a0UI   |\u00a0\u00a0model\u00a0-\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f     |\u00a0--\u00a0core\u00a0-\u00a0\u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f\u00a0\u043c\u043e\u0434\u0435\u043b\u044c,\u00a0\u043e\u0442\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439\u00a0\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u00a0\u0432\u0441\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0438.\u00a0\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u00a0\u0432\u00a0\u0441\u0435\u0431\u0435\u00a0\u043b\u043e\u0433\u0438\u043a\u0443\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0dirty\u00a0\u0438\u00a0deepDirty,\u00a0\u0440\u0430\u0431\u043e\u0442\u0443\u00a0\u0441\u00a0\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438\u00a0\u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438\u00a0\u0438\u00a0\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438.     |\u00a0UserModel.ts\u00a0-\u00a0\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0438     |\u00a0SearchHitModel.ts     |\u00a0...   |\u00a0\u00a0page\u00a0-\u00a0\u043a\u0430\u0436\u0434\u0430\u044f\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u00a0-\u00a0\u0441\u0432\u043e\u0439\u00a0\u0440\u0435\u0430\u043a\u0442-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.    \u00a0\u00a0|--\u00a0data_page        |-\u2014\u00a0component\u00a0-\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00a0\u0434\u043b\u044f\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u041e\u0431\u0449\u0438\u0435\u00a0\u043d\u0430\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00a0\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b\u00a0\u0432\u00a0src\/components        |\u00a0DataPage.tsx     |-\u2014\u00a0search_page        |\u00a0SearchPage.tsx     |-\u2014\u00a0user_page        |\u00a0UsetPage.tsx   |\u00a0\u00a0service\u00a0-\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u00a0\u0441\u00a0\u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c     |-\u2014\u00a0operation\u00a0-\u00a0\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438\u00a0-\u00a0\u044d\u0442\u043e\u00a0\u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u0430:\u00a0\u043c\u0435\u0442\u043e\u0434,\u00a0\u043f\u0443\u0442\u044c,\u00a0payload,\u00a0\u0430\u00a0\u0442\u0430\u043a\u0436\u0435\u00a0\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439\u00a0\u0438\u0437\u00a0json\u00a0\u0438\u0437\u00a0\u043e\u0442\u0432\u0435\u0442\u0430       |-\u2014\u00a0data       |-\u2014\u00a0search       |-\u2014\u00a0user       |--\u00a0...     |--\u00a0DataService.ts     |--\u00a0SearchService.ts     |--\u00a0UserService.ts     |--\u00a0...   |\u00a0\u00a0store\u00a0-\u00a0\u0441\u0442\u043e\u0440\u044b.\u00a0\u0423\u00a0\u043a\u0430\u0436\u0434\u043e\u0439\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u00a0\u0441\u0432\u043e\u0439\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439\u00a0\u0441\u0442\u043e\u0440.\u00a0\u0421\u0442\u043e\u0440\u00a0\u044d\u0442\u043e\u00a0\u043f\u043e\u00a0\u0441\u0443\u0442\u0438\u00a0\u0441\u043f\u0438\u0441\u043e\u043a\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432\u00a0\u0434\u043b\u044f\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b,\u00a0\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445\u00a0\u0441\u00a0\u0431\u044d\u043a\u0430\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439     |--\u00a0DataPageStore.ts     |--\u00a0SearchPageStore.ts     |--\u00a0...<\/code><\/pre>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u0440\u043e\u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u0432: AbstractListStore \u0438\u043b\u0438 AbstractCrudStore.<\/p>\n<p>AbstractListStore &#8212; \u044d\u0442\u043e \u0441\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430. \u0412\u00a0\u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b\u00a0\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438:<\/p>\n<pre><code class=\"java\">\/** *\u00a0Abstract\u00a0store,\u00a0if\u00a0you\u00a0need\u00a0list\u00a0and\u00a0some\u00a0one\u00a0selected\u00a0item\u00a0from\u00a0it.\u00a0(Many\u00a0pages\u00a0in\u00a0admin\u00a0or\u00a0data\u00a0management\u00a0sections) * *\/ import {AbstractModel, ReactiveProp} from '@unidata\/core'; import {action,\u00a0computed,\u00a0observable} from 'mobx'; import {UdLogger} from '..\/index'; import {AbstractLoadingStore} from '.\/AbstractLoadingStore';  export abstract class AbstractListStore&lt;    T extends AbstractModel, \/\/\u00a0\u0422\u0438\u043f\u00a0\u043c\u043e\u0434\u0435\u043b\u0438,\u00a0\u043a\u043e\u0442\u043e\u0440\u0430\u044f\u00a0\u0431\u0443\u0434\u0435\u0442\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c\u00a0\u0441\u043f\u0438\u0441\u043a\u0430    ItemKey = string \/\/\u00a0\u0422\u0438\u043f\u00a0\u043a\u043b\u044e\u0447\u0430\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430  > extends AbstractLoadingStore {    protected abstract fetchList\u00a0(): Promise&lt;T[]>; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u00a0\u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f\u00a0\u0441\u043f\u0438\u0441\u043a\u0430\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439     protected abstract fetchItem\u00a0(key: ItemKey): Promise&lt;T>; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u00a0\u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f\u00a0\u043e\u0434\u043d\u043e\u0439\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u043e\u00a0\u043a\u043b\u044e\u0447\u0443     protected abstract findItem\u00a0(key: ItemKey):\u00a0(item: T,\u00a0index: number)\u00a0=> boolean; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u043e\u00a0\u043a\u043b\u044e\u0447\u0443\u00a0\u0432\u00a0\u0442\u0435\u043a\u0449\u0435\u043c\u00a0\u0441\u043f\u0438\u0441\u043a\u0435     @observable.ref    protected selectedItem: T | undefined; \/\/\u00a0\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0\u0438\u0437\u00a0\u0441\u043f\u0438\u0441\u043a\u0430     @observable.shallow    protected list: T[]\u00a0=\u00a0[]; \/\/\u00a0\u0441\u043f\u0438\u0441\u043e\u043a\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     @computed    public get getList\u00a0(): T[]\u00a0{return this.list;}     @computed    public get getSelectedItem\u00a0(): T | undefined {        return this.selectedItem;    }     @action    public loadList\u00a0(): Promise&lt;void>\u00a0{        this.setLoading(true);                return this.fetchList()            .then((result)\u00a0=>\u00a0{                this.setList(result);            })            .finally(()\u00a0=>\u00a0{                this.setLoading(false);            });    }     @action    public loadItem\u00a0(key: ItemKey): Promise&lt;void>\u00a0{        this.setLoading(true);         return this.fetchItem(key)            .then((result)\u00a0=>\u00a0{                this.setSelectedItem(result);            })            .finally(()\u00a0=>\u00a0{                this.setLoading(false);            });    }     public selectItem\u00a0(name?: ItemKey): void {        if (name\u00a0=== undefined)\u00a0{            this.setSelectedItem(undefined);        } else {            const selected\u00a0= this.getList.find(this.findItem(name));             if (selected\u00a0=== undefined)\u00a0{                UdLogger.warn(`You\u00a0try\u00a0to\u00a0select\u00a0item\u00a0by\u00a0unknown\u00a0identifier:\u00a0\"${name}\"`);            }             this.setSelectedItem(selected);        }    }     @action    protected setList\u00a0(list: T[])\u00a0{        this.list\u00a0=\u00a0list;    }     @action    protected setSelectedItem\u00a0(selected: T | undefined)\u00a0{        this.selectedItem\u00a0=\u00a0selected;         if (this.selectedItem\u00a0!== undefined)\u00a0{            \/\/\u00a0\u041f\u043e\u0441\u043b\u0435\u00a0\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0434\u043e\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0435\u0433\u043e\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u00a0(\u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\u00a0\u0432\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u00a0\u0442\u043e\u043b\u044c\u043a\u043e\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0value)            this.selectedItem.setReactiveCascade([                ReactiveProp.DIRTY,                ReactiveProp.VALIDATION_RESULT,                ReactiveProp.PHANTOM            ]);        }    } }<\/code><\/pre>\n<p>AbstractCrudStore &#8212; \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 AbstractListStore \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <a href=\"https:\/\/gitlab.com\/unidata-community-group\/unidata-platform-ui\/-\/blob\/master\/module\/core-app\/src\/store\/AbstractCrudStore.ts\"><u>\u041f\u043e\u043b\u043d\u044b\u0439\u00a0\u043a\u043e\u0434\u00a0\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b =)<\/strong><\/p>\n<p>\u041f\u0443\u0442\u044c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u0438\u043d\u043d\u0435\u0435. \u0412 \u0446\u0435\u043b\u043e\u043c, \u0434\u043b\u044f MVP \u0441\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0445\u043e\u0440\u043e\u0448\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0435\u0449\u0435 \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432. \u0418 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u0432 open\u00a0source.<\/p>\n<p>\u0421\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043c\u043e\u0434\u0443\u043b\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u043d\u0438\u043c\u0438 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c (\u0438\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u044f &#8212; \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0434\u0430\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c lerna \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441, \u043f\u043e \u043f\u0440\u043e\u0448\u0435\u0441\u0442\u0432\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u043d\u044b \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0435\u0435 \u0441\u043e\u0440\u043e\u043d\u0443).<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f &#8212; \u0438\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u043d\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 UE, \u0432 \u044d\u0442\u0438\u0445 \u0436\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u0445 \u043e\u043d\u0438 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u0435\u0441\u0442\u0438 \u0438 \u0438\u0445. \u0410 typesctipt \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043d\u0430\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0442\u0438\u043f\u043e\u0432 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435.<\/p>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439, \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u043d\u043e\u043b\u0438\u0442 \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u0438\u043b \u0434\u043b\u044f \u043d\u0430\u0441 \u043f\u043b\u044e\u0441\u044b &#8212; \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u043a \u043c\u043e\u043d\u043e\u043b\u0438\u0442, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044f \u0441\u0435\u0431\u044f \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0441\u0438\u043b\u044c\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0441\u0447\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a tsconfig \u0438 webpack.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u044b\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u0430\u043c\u0438. \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435, \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0438\u0447\u044c &#8212; \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>\u041d\u0430\u0447\u0430\u043b\u0438 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e &#8212; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0430\u043f\u043a\u0443 module \u0432 src, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430:<\/p>\n<pre><code>config\u00a0-\u00a0\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00a0(\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00a0npm\u00a0\u043c\u043e\u0434\u0443\u043b\u044c\u00a0config)  module\u00a0-\u00a0\u0441\u0430\u043c\u0438\u00a0\u043c\u043e\u0434\u0443\u043b\u0438     audit     core     core-app     data     dq-base     draft     icon     job     library     meta     override     search     security     system-config     types     uikit  react-resources\u00a0-\u00a0assets  src\u00a0-\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435\u00a0\u0442\u0435\u043b\u043e\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00a0(layout,\u00a0\u043a\u043e\u0434\u00a0\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f,\u00a0\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u00a0\u043b\u043e\u043a\u0430\u043b\u0435\u0439,\u00a0UE\u00a0\u0438\u00a0\u0442\u0434)<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 tsconfig.json, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e tsconfig, \u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 path \u0438 references \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f meta:<\/p>\n<pre><code>{  \"extends\": \"..\/..\/tsconfig.lib\",  \"compilerOptions\":\u00a0{      \"baseUrl\": \".\",      \"paths\":\u00a0{          \"@unidata\/uikit\":\u00a0[\"..\/uikit\/src\"],          \"@unidata\/core\":\u00a0[\"..\/core\/src\"],          \"@unidata\/core-app\":\u00a0[\"..\/core-app\/src\"],          \"@unidata\/draft\":\u00a0[\"..\/draft\/src\"],          \"@unidata\/types\":\u00a0[\"..\/types\/src\"],          \"@unidata\/icon\":\u00a0[\"..\/icon\/src\"]       },       \"rootDir\": \"src\"  },  \"references\":\u00a0[      {\"path\": \"..\/uikit\"},      {\"path\": \"..\/core\"},      {\"path\": \"..\/core-app\"},      {\"path\": \"..\/draft\"},      {\"path\": \"..\/types\"},      {\"path\": \"..\/icon\"}  ] }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0441\u0432\u043e\u0439 package.json. \u0422\u0443\u0434\u0430 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u0410 \u043e\u0431\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0438\u043f\u0430 react, mobx, react-router \u0438 \u0442\u0434, \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0432 peedDependency.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0441\u0442\u0430\u043b \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0441 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\/\u0441\u0442\u043e\u0440\u043e\u0432\/\u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. \u0410\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u0442\u0430\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u043c core, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0435\u0433\u043e. \u041e\u0431\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0432 \u043c\u043e\u0434\u0443\u043b\u044c uikit &#8212; \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u043a\u0430\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 resolve.alias \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 webpack.<\/p>\n<pre><code>{     \u2026     resolve:\u00a0{         alias:\u00a0{             '@unidata\/core': 'path\/to\/ud-core',             '@unidata\/meta': 'path\/to\/ud-meta',             \u2026         }     }     \u2026 }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c (\u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432), \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0439\u0442\u0438 \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438, \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<pre><code>\u2014\u00a0CORE_MODULES \u2014\u00a0CE_MODULES \u2014\u00a0EE_MODULES<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0443\u0442\u0435\u0439 \u0434\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u0433\u0434\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430 \u0432\u0441\u0435 \u0442\u0440\u0438 \u0441\u043f\u0438\u0441\u043a\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0451\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c\/\u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u043c.<\/p>\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0447\u0438\u0442\u0430\u0435\u043c \u044d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0438 \u0432 alias \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0441\u0431\u043e\u0440\u043a\u0435.<\/p>\n<p>\u0412\u043e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u0445, \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0431\u043e\u0440\u043a\u0430 \u0430\u043b\u0438\u0430\u0441\u043e\u0432:<\/p>\n<pre><code>const path\u00a0=\u00a0require('path'); const config\u00a0=\u00a0require('config');  const getModulesMap\u00a0=\u00a0()\u00a0=>\u00a0{     const coreModules\u00a0=\u00a0config.has('CORE_MODULES')\u00a0?\u00a0config.get('CORE_MODULES')\u00a0:\u00a0[];     const ceModules\u00a0=\u00a0config.has('CE_MODULES')\u00a0?\u00a0config.get('CE_MODULES')\u00a0:\u00a0[];     const eeModules\u00a0=\u00a0config.has('EE_MODULES')\u00a0?\u00a0config.get('EE_MODULES')\u00a0:\u00a0[];     const modules\u00a0=\u00a0coreModules.concat(ceModules,\u00a0eeModules);       return modules.reduce((result,\u00a0item)\u00a0=>\u00a0{         const modulePathItems\u00a0=\u00a0item.split('\/');         const moduleName\u00a0=\u00a0modulePathItems[modulePathItems.length\u00a0- 1];          if (result[moduleName])\u00a0{             throw new Error(`Module\u00a0with\u00a0name ${moduleName} already\u00a0exist`);         }          result[moduleName]\u00a0=\u00a0{             pathToModule:\u00a0modulePathItems         };          return result;     },\u00a0{}); };  const resolveAliasApp\u00a0=\u00a0()\u00a0=>\u00a0{     const modules\u00a0=\u00a0getModulesMap();          return Object.keys(modules).reduce((result,\u00a0moduleName)\u00a0=>\u00a0{         const key\u00a0= `@unidata\/${moduleName}`;                  result[key]\u00a0=\u00a0path.resolve(process.cwd(),\u00a0...modules[moduleName].pathToModule, 'src');                  return result;     },\u00a0{}); };  module.exports\u00a0=\u00a0{     getModulesMap,     resolveAliasApp };<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c <strong>Community\u00a0Edition<\/strong> (\u0434\u0430\u043b\u0435\u0435 CE) \u0438 <strong>Enterprise\u00a0Edition<\/strong> (\u0434\u0430\u043b\u0435\u0435 EE), \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 CE \u0443 \u043d\u0430\u0441 \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c gitlab, \u0430 EE &#8212; \u0432 \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u043c. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 EE \u0447\u0435\u0440\u0435\u0437 git-submodule \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438\u0437 CE \u0438 \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u0434\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043b\u0430 \u044f\u0441\u043d\u0430 \u0441\u0445\u0435\u043c\u0430 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f. \u041f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u041a \u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f CE \u043a\u0430\u043a git-submodule (\u0415\u0415 \u0442\u043e\u0436\u0435, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438). \u0412 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code>#\u00a0Core\u00a0modules CORE_MODULES:  - 'unidata-platform-ui\/module\/override'  - 'unidata-platform-ui\/module\/icon'  - 'unidata-platform-ui\/module\/types'  - 'unidata-platform-ui\/module\/core'  - 'unidata-platform-ui\/module\/core-app'  - 'unidata-platform-ui\/module\/uikit'  #\u00a0CE CE_MODULES:  - 'unidata-platform-ui\/module\/search'  - 'unidata-platform-ui\/module\/library'  - 'unidata-platform-ui\/module\/meta'  - 'unidata-platform-ui\/module\/draft'  - 'unidata-platform-ui\/module\/data'  - 'unidata-platform-ui\/module\/security'  - 'unidata-platform-ui\/module\/audit'  - 'unidata-platform-ui\/module\/system-config'  - 'unidata-platform-ui\/module\/job'  - 'unidata-platform-ui\/module\/dq-base'  #\u00a0EE EE_MODULES:  - 'unidata-frontend-ee\/module\/dq'  - 'unidata-frontend-ee\/module\/workflow'  - 'unidata-frontend-ee\/module\/data-ee'  - 'unidata-frontend-ee\/module\/meta-ee'  #\u00a0modules\u00a0for\u00a0demo  - 'module\/demo'  ENTRY_APP_DIR: 'unidata-platform-ui\/src'<\/code><\/pre>\n<p>ENTRY_APP_DIR &#8212; \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f webpack. \u0412 \u0442\u0435\u043e\u0440\u0438\u0438, \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439 layout \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p><strong>\u0418\u00a0\u043e\u0442\u043a\u0440\u044b\u043b\u043e\u0441\u044c\u00a0\u043d\u0430\u0448\u0435\u043c\u0443\u00a0\u0432\u0437\u043e\u0440\u0443\u00a0\u043f\u043e\u043b\u0435\u00a0\u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438&#8230;<\/strong><\/p>\n<p><strong>&#8230; \u0432\u00a0\u0447\u0430\u0441\u0442\u0438\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e\u00a0\u043a\u043e\u0434\u0430<\/strong><\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0438\u00a0webpack, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 unidata-ui-cli, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u0438 \u0432 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f. \u0412 \u043d\u0435\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f webpack (\u0434\u043b\u044f dev \u0438 prod \u0440\u0435\u0436\u0438\u043c\u043e\u0432), \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u0449\u0438\u0445 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>\u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"bash\">npm run ud-cli -- --type=create_module --moduleName=myNewModule \u2014pathToModule=some\/path\/to\/module \u2014dependencies='[\"core-app\", \"uikit\", \"meta\", \"dq\"]'<\/code><\/pre>\n<p>\u0433\u0434\u0435:<\/p>\n<ul>\n<li>\n<p>pathToModule &#8212; \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 module.<\/p>\n<\/li>\n<li>\n<p>dependencies &#8212; \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b \u043e\u0442 core-app. \u0415\u0441\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0443\u043a\u0430\u0437\u0430\u043d, \u0442\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 tsconfig \u043a\u0430\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0439\/\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0439\/\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0434\u043b\u044f \u043d\u0435\u0451.<\/p>\n<p>npm run ud-cli &#8212; &#8212;type=create_model &#8212;moduleName=myNewModule \u2014modelName=myNewModel<\/p>\n<p><strong>&#8230; \u0432\u00a0\u0447\u0430\u0441\u0442\u0438\u00a0\u0442\u0438\u043f\u043e\u0432<\/strong><\/p>\n<p>\u041f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043c\u043e\u043d\u043e\u043b\u0438\u0442, \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438, \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0438\u0441\u043a, \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445 (\u0447\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435). \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>\u0412 \u043e\u0431\u043e\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f\u0445 \u0441\u0431\u043e\u0440\u043a\u0438 \u0437\u0430 \u0441\u0430\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430. \u0412 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f.<\/p>\n<pre><code class=\"java\">export class SearchOp extends AppModelListHttpOp {     protected apiVersion\u00a0= 'v1';      protected config: IModelOpConfig =\u00a0{         url: '\/search',         method: 'post',         model: SearchHit     };       constructor (payload: SearchPayload,\u00a0mainResponseKey: SearchPayloadKeys)\u00a0{         super();          this.config.data\u00a0=\u00a0{             payload         };          this.config.rootProperty\u00a0=\u00a0['payload',\u00a0mainResponseKey];     } }<\/code><\/pre>\n<p>\u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 payload \u0438 \u0442\u0438\u043f \u0434\u043b\u044f \u043d\u0435\u0433\u043e. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u0433\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, SearchPayload \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">export type SearchPayload =\u00a0{ \u00a0\u00a0\u00a0 'org.unidata.mdm.rest.v1.data\u2019?: DataSearchQuery; }<\/code><\/pre>\n<p>\u0433\u0434\u0435 DataSearchQuery &#8212; \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<pre><code class=\"java\">export interface DataSearchQuery =\u00a0{     formFields?: IFormField[];     formGroups?: IFormGroup[];     countOnly: boolean;     fetchAll: boolean;     returnFields: string[];     searchFields: string[];     asOf?: string;     searchDataType: DataType;     facets?: FACETS[];     text?: string;     supplementaryRequests?: ISupplementaryRequest[];     entity: string;     count?: number;     start?: number;     page?: number;     sortFields?: ISortField[]; }<\/code><\/pre>\n<p>\u0410 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0438 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0432 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">export type SearchPayload =\u00a0{     'org.unidata.mdm.rest.v1.data'?: DataSearchQuery;     'org.unidata.mdm.rest.v1.dq.data'?: DqSearchQuery; }<\/code><\/pre>\n<p>\u0433\u0434\u0435 DataSearchQuery \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0430 DqSearchQuery \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">export interface DQSearchQuery {     setNames: string[];     ruleNames: string[];     functionNames: string[];     message: string | null;     severity: Severity | null;     category: any;     totalScore: 0;     matchAll: boolean; }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u0438\u0441\u043a\u0435, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u044e\u0447 (\u044d\u0442\u043e \u0438\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f) \u0432 SearchPayload \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c &#8212; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 SearchPayload \u0442\u0438\u043f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432 \u043c\u043e\u0434\u0443\u043b\u044f\u0445. \u041c\u044b \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043e\u0434\u0438\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041e\u043d \u043b\u0435\u0436\u0438\u0442 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435, \u0430 \u0444\u0430\u0439\u043b \u0441 \u043d\u0438\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043a\u043b\u044e\u0447 \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 SearchPayload. \u0421\u0430\u043c \u0442\u0438\u043f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043a\u0430\u043a ISearchQuery \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b module\/dq\/src\/model\/search_query\/org.unidata.mdm.rest.v1.dq.data.ts \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"java\">import {Severity} from '..\/..\/type\/Severity';  export interface ISearchQuery {     setNames: string[];     ruleNames: string[];     functionNames: string[];     message: string | null;     severity: Severity | null;     category: any;     totalScore: 0;     matchAll: boolean; }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f Data &#8212; \u0444\u0430\u0439\u043b module\/data\/src\/model\/search_query\/org.unidata.mdm.rest.v1.data.ts \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"java\">import {ISortField} from '@unidata\/core-app'; import {IFormField, IFormGroup} from '@unidata\/search'; import {FACETS} from '.\/facet\/AbstractFacet'; import {DataType, ISupplementaryRequest} from '.\/supplementary_request\/AbstractSupplementaryRequest';  export type ISearchQuery =\u00a0{     formFields?: IFormField[];     formGroups?: IFormGroup[];     countOnly: boolean;     fetchAll: boolean;     returnFields: string[];     searchFields: string[];     asOf?: string;     searchDataType: DataType;     facets?: FACETS[];     text?: string;     supplementaryRequests?: ISupplementaryRequest[];     entity: string;     count?: number;     start?: number;     page?: number;     sortFields?: ISortField[]; } <\/code><\/pre>\n<p>\u0412 ud-cli \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <a href=\"https:\/\/gitlab.com\/unidata-community-group\/unidata-platform-ui-cli\/-\/blob\/master\/utils\/bindSearchPayload.js\"><u>\u0441\u043a\u0440\u0438\u043f\u0442<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0432\u0441\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c, \u0438\u0449\u0435\u0442 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043f\u043e \u043f\u0443\u0442\u0438 src\/model\/search_query \u0444\u0430\u0439\u043b, \u0432 \u0438\u043c\u0435\u043d\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 unidata.mdm.rest, \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u043e\u0434\u0438\u043d, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043c\u043e\u0434\u0443\u043b\u044c core-app (\u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438).<\/p>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"java\">import {ISearchQuery as DataSearchQuery} from '..\/..\/..\/..\/unidata-platform-ui\/module\/data\/src\/model\/search_query\/org.unidata.mdm.rest.v1.data'; import {ISearchQuery as DqSearchQuery} from '..\/..\/..\/..\/module\/dq\/src\/model\/search_query\/org.unidata.mdm.rest.v1.dq.data';  export enum SearchPayloadKeys {     DATA = 'org.unidata.mdm.rest.v1.data',     DQ = 'org.unidata.mdm.rest.v1.dq.data' }  export type SearchPayload =\u00a0{     [SearchPayloadKeys.DATA]?: DataSearchQuery;     [SearchPayloadKeys.DQ]?: DqSearchQuery; }<\/code><\/pre>\n<p>unidata-platform-ui \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0443\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 EE, \u0430 data- \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u0437 CE, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d \u0447\u0435\u0440\u0435\u0437 git-submodule.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e npm\u00a0ci (\u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d \u0432 postinstall) \u0438\u043b\u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e &#8212; npm\u00a0run\u00a0ud-cli &#8212; &#8212;type\u00a0bind_search_payload<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0432 UE.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438 \u0442\u043e\u0447\u043a\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0442\u0438\u043f\u044b UE \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 (\u043e\u043d\u0438 \u043b\u0435\u0436\u0430\u0442 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 &#8212; module\/ModuleName\/src\/type\/ue_export\/InterfaceName.d.ts. \u0424\u0430\u0439\u043b\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u0438\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e &#8212; \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0438\u043c\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f UE).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b npm\u00a0run\u00a0bind_user_exits \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e npm\u00a0ci \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432 core-app \u043e\u0431\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 UE \u0432 \u0441\u0431\u043e\u0440\u043a\u0435:<\/p>\n<pre><code class=\"java\">import {UEType as AppDataLoader} from '..\/..\/..\/..\/unidata-platform-ui\/module\/core-app\/src\/type\/ue_export\/appDataLoader'; import {UEType as DataProvider} from '..\/..\/..\/..\/unidata-platform-ui\/module\/core-app\/src\/type\/ue_export\/dataProvider'; import {UEType as GlobalHotkey} from '..\/..\/..\/..\/unidata-platform-ui\/module\/core-app\/src\/type\/ue_export\/globalHotkey'; \/\/\u00a0... import {UEType as TaskCardTab} from '..\/..\/..\/..\/module\/workflow\/src\/type\/ue_export\/taskCardTab';  export enum UEList {     AppDataLoader = 'AppDataLoader',     DataProvider = 'DataProvider',     GlobalHotkey = 'GlobalHotkey',     \/\/\u00a0...     TaskCardTab = 'TaskCardTab' }  export type UEModule =\u00a0{     [UEList.AppDataLoader]: AppDataLoader;     [UEList.DataProvider]: DataProvider;     [UEList.GlobalHotkey]: GlobalHotkey;     \/\/\u00a0...     [UEList.TaskCardTab]: TaskCardTab; }  export type UEModuleUnion = AppDataLoader |     DataProvider |     GlobalHotkey |     \/\/\u00a0...     TaskCardTab; <\/code><\/pre>\n<p>\u0412 \u043b\u044e\u0431\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0435\u0433\u043e \u0442\u0438\u043f\u0435 \u0438 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438, \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f &#8212; \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d1e\/6f9\/477\/d1e6f9477eec17324e28ef4fd87665fa.png\" width=\"740\" height=\"417\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d1e\/6f9\/477\/d1e6f9477eec17324e28ef4fd87665fa.png\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u041f\u043b\u0430\u043d\u044b<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438\u0437 \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u043f\u043b\u0430\u043d\u0430\u0445 &#8212; \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 Lerna \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 npm-registry, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u0438 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u043c\u044b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u0430, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044e \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n<p>\u00a0<\/p>\n<p>p.s. \u041a\u0430\u043a \u0432\u0430\u043c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438? \u041c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/575784\/\"> https:\/\/habr.com\/ru\/articles\/575784\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043f\u043e\u0434\u0445\u043e\u0434. \u0414\u0430\u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043f\u0440\u0438\u0440\u043e\u0441\u043b\u0430 \u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438.<\/p>\n<p>\u041d\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0438\u0437\u043d\u0443\u0442\u0440\u0438 &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;. \u0412 \u044d\u0442\u043e\u0439, \u043f\u0435\u0440\u0432\u043e\u0439, \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e UI. \u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0442\u043e \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u043e \u043d\u0430\u0441 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0435\u043a \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u0434\u043e\u043c, \u0438 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435.<\/p>\n<p><strong>\u041e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/strong>. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u043d\u0435 \u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 &#171;\u042e\u043d\u0438\u0434\u0430\u0442\u0430&#187;, \u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430. \u042f \u043c\u043e\u0433\u0443 \u0431\u044b\u0442\u044c \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u043d\u0430 \u0442\u0435\u043c\u0443 \u0442\u043e\u0433\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u0442\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0435\u0449\u0435 \u0434\u043e \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443. \u0412 \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0435 \u0432\u0438\u0434\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u043b\u044e\u0431\u0438\u0442 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0430 \u0441 \u043d\u043e\u0442\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439, \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\n<p><strong>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u0442\u0435\u0445.\u043e\u0431\u0437\u043e\u0440<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u043d\u043e\u043b\u0438\u0442 \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435 \u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435. \u041e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043e\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u0445 + \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 <strong>Community\u00a0Edition<\/strong>\u00a0(\u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f\u00a0\u0432 <a href=\"https:\/\/gitlab.com\/unidata-community-group\"><u>\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c\u00a0\u0433\u0438\u0442\u043b\u0430\u0431\u0435<\/u><\/a>)\u00a0\u0438\u00a0<strong>Enterprise\u00a0Edition<\/strong>.<\/p>\n<p>\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 20 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u0447\u0438\u0441\u043b\u043e \u043d\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435). \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u0435\u0436\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e typescript \u0438 \u043f\u043e\u0447\u0442\u0438 \u0441\u0432\u0435\u0436\u0443\u044e react (\u0441\u0435\u0439\u0447\u0430\u0441 16, \u043d\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043d\u0430 17 &#8212; \u0434\u0435\u043b\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438). \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c MVC \u043f\u043e\u0434\u0445\u043e\u0434 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435: \u0440\u0435\u0430\u043a\u0442 \u0442\u043e\u043b\u044c\u043a\u043e view-\u0441\u043b\u043e\u0439, \u0441\u0432\u043e\u044f observable \u043c\u043e\u0434\u0435\u043b\u044c (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e \u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e), mobx\u00a0\u0441\u0442\u043e\u0440\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432.<\/p>\n<p><strong>\u0421\u0442\u0430\u0440\u044b\u0435 \u0431\u043e\u043b\u044f\u0447\u043a\u0438<\/strong><\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e UI &#171;\u042e\u043d\u0438\u0434\u0430\u0442a&#187; \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 ExtJS. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0434\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043b\u0430\u0433\u043e\u0432 \u0432 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0438 if-else \u0432 \u043a\u043e\u0434\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 (\u0434\u0430\u043b\u0435\u0435 UserExits \u0438\u043b\u0438 UE), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0438\u0434\u0435 \u0438 \u0432 \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0447\u0430\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0444\u0430\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043d\u0443\u0434\u0438\u043b\u0438 \u043d\u0430\u0441 \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0435\u043a:<\/p>\n<p><strong>1. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440<\/strong><\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b ExtJS \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443. \u0414\u0430\u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u043b\u0438 \u043f\u0440\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 layout \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 ExtJS \u0438\u0442\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439 \u043b\u0438\u0431\u043e \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 ExtJS \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f. \u0410 \u043d\u0430\u0448\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u0447\u0430\u0441\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043b \u043b\u0438\u0431\u043e &#171;\u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0435&#187; \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043b\u0438\u0431\u043e \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<p><strong>2. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0439 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432<\/strong><\/p>\n<p>\u0418\u0437-\u0437\u0430 \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 \u043c\u043d\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u0440\u0435\u0441\u043b\u043e\u0432\u0443\u0442\u044b\u0435 if-else \u0446\u0435\u043f\u043e\u0447\u043a\u0438). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e UE, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0438\u0441\u0430\u043b \u043e\u0442\u0434\u0435\u043b \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f, \u0442\u043e\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438: \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438, \u0431\u0435\u0437 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u0445 \u043a \u043f\u0440\u0430\u0432\u043a\u0430\u043c \u0432 UE.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 javascript, \u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u043d\u0430 \u0441\u0442\u044b\u043a\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 UE \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u0432 UE \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0436\u0438\u0434\u0430\u044e\u0442\u0441\u044f, \u0438 \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418 \u044d\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c, \u0447\u0442\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u043e.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u044b\u043b\u0438 \u0435\u0449\u0451 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u044d\u0442\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043e\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0449\u0438\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043d\u0430\u0448\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d typescript. \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u0443\u0436\u0435 \u0434\u0435-\u0444\u0430\u043a\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0434\u043b\u044f frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043e\u043d \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0442\u0430\u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d. \u0422\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 typescript, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u043e \u043d\u0430 \u0432\u044b\u0431\u043e\u0440.<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b ExtJS \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0432\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 angular, react \u0438 vue.<\/p>\n<p>\u0415\u0449\u0435 \u0431\u044b\u043b\u0438 \u0441\u0432\u0435\u0436\u0438 \u0432\u043e\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u043e\u0431 angular\u00a0js, \u0432\u0442\u043e\u0440\u043e\u0439 \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u0441\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439, \u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u0434\u043e\u0432\u0435\u0440\u0438\u0435 \u043a \u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>\u0411\u043e\u044f\u043b\u0438\u0441\u044c, \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043d\u0435 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0435\u0433\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c. \u0425\u043e\u0442\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442 \u0431\u044b\u043b \u0431\u044b \u043d\u0430 \u043d\u0451\u043c.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0430 Vue. \u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u0438 \u0435\u0433\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c, \u043d\u043e Vue \u043d\u0435 \u0438\u043c\u0435\u043b \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 typescript, \u0438 \u0431\u0440\u0430\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0432 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043c\u044b \u0431\u044b\u043b\u0438 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b (\u043a \u0441\u043b\u043e\u0432\u0443, \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0438\u0437-\u0437\u0430 react&#8217;\u0430, \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430 Vue). \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0431\u0435\u0434\u0438\u043b react. \u0421\u044b\u0433\u0440\u0430\u043b\u0430 \u0440\u043e\u043b\u044c \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0438 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043b\u044e\u0441\u043e\u0432\/\u043c\u0438\u043d\u0443\u0441\u043e\u0432 react&#8217;a.<\/p>\n<p>\u0412\u044b\u0431\u043e\u0440 \u043d\u0430 mobx \u043f\u0430\u043b \u0432 \u0432\u0438\u0434\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 &#171;\u0443\u043c\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b ExtJs. \u041c\u043e\u0434\u0435\u043b\u0438 \u0432 ExtJs \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c <em>commit &#8212; \u0444\u0438\u043a\u0441\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438, revert &#8212; \u043e\u0442\u043a\u0430\u0442 \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043c\u043e\u0434\u0435\u043b\u0438, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d commit<\/em>. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c Dirty &#8212; \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0430 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e commit. \u041d\u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0435, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 UI, \u043a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0435\u0439\u0431\u043b\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 save, \u0435\u0441\u043b\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0444\u043b\u0430\u0433\u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0435\u043b\u0438, \u0442.\u043a. \u043e\u043d\u0438 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. Redux \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435 \u043c\u043e\u0433, \u0442.\u043a. \u043e\u043d \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f react + mobx \u043d\u0430 typescript.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u041f\u0435\u0440\u0432\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/strong><\/p>\n<p>\u0421 \u043d\u043e\u0432\u044b\u043c \u0441\u0442\u0435\u043a\u043e\u043c \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u0432 \u0441\u0435\u0431\u044f:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0434\u0435\u043b\u044c,<\/p>\n<\/li>\n<li>\n<p>\u0441\u0435\u0440\u0432\u0438\u0441\u044b,<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c,<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u043e\u0440\u044b (\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b),<\/p>\n<\/li>\n<li>\n<p>observer\u00a0react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0435.<\/p>\n<p>\u041f\u043e\u00a0\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435\u00a0\u0432\u0441\u0451\u00a0\u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u00a0\u0442\u0430\u043a:<\/p>\n<pre><code>\u2014\u00a0src   |\u00a0\u00a0components\u00a0-\u00a0\u043e\u0431\u0449\u0438\u0435\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00a0UI   |\u00a0\u00a0model\u00a0-\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f     |\u00a0--\u00a0core\u00a0-\u00a0\u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f\u00a0\u043c\u043e\u0434\u0435\u043b\u044c,\u00a0\u043e\u0442\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439\u00a0\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u00a0\u0432\u0441\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0438.\u00a0\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u00a0\u0432\u00a0\u0441\u0435\u0431\u0435\u00a0\u043b\u043e\u0433\u0438\u043a\u0443\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0dirty\u00a0\u0438\u00a0deepDirty,\u00a0\u0440\u0430\u0431\u043e\u0442\u0443\u00a0\u0441\u00a0\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438\u00a0\u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438\u00a0\u0438\u00a0\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438.     |\u00a0UserModel.ts\u00a0-\u00a0\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0438     |\u00a0SearchHitModel.ts     |\u00a0...   |\u00a0\u00a0page\u00a0-\u00a0\u043a\u0430\u0436\u0434\u0430\u044f\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u00a0-\u00a0\u0441\u0432\u043e\u0439\u00a0\u0440\u0435\u0430\u043a\u0442-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.    \u00a0\u00a0|--\u00a0data_page        |-\u2014\u00a0component\u00a0-\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00a0\u0434\u043b\u044f\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0\u041e\u0431\u0449\u0438\u0435\u00a0\u043d\u0430\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00a0\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b\u00a0\u0432\u00a0src\/components        |\u00a0DataPage.tsx     |-\u2014\u00a0search_page        |\u00a0SearchPage.tsx     |-\u2014\u00a0user_page        |\u00a0UsetPage.tsx   |\u00a0\u00a0service\u00a0-\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u00a0\u0441\u00a0\u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c     |-\u2014\u00a0operation\u00a0-\u00a0\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438\u00a0-\u00a0\u044d\u0442\u043e\u00a0\u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u0430:\u00a0\u043c\u0435\u0442\u043e\u0434,\u00a0\u043f\u0443\u0442\u044c,\u00a0payload,\u00a0\u0430\u00a0\u0442\u0430\u043a\u0436\u0435\u00a0\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439\u00a0\u0438\u0437\u00a0json\u00a0\u0438\u0437\u00a0\u043e\u0442\u0432\u0435\u0442\u0430       |-\u2014\u00a0data       |-\u2014\u00a0search       |-\u2014\u00a0user       |--\u00a0...     |--\u00a0DataService.ts     |--\u00a0SearchService.ts     |--\u00a0UserService.ts     |--\u00a0...   |\u00a0\u00a0store\u00a0-\u00a0\u0441\u0442\u043e\u0440\u044b.\u00a0\u0423\u00a0\u043a\u0430\u0436\u0434\u043e\u0439\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u00a0\u0441\u0432\u043e\u0439\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439\u00a0\u0441\u0442\u043e\u0440.\u00a0\u0421\u0442\u043e\u0440\u00a0\u044d\u0442\u043e\u00a0\u043f\u043e\u00a0\u0441\u0443\u0442\u0438\u00a0\u0441\u043f\u0438\u0441\u043e\u043a\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432\u00a0\u0434\u043b\u044f\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b,\u00a0\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445\u00a0\u0441\u00a0\u0431\u044d\u043a\u0430\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439     |--\u00a0DataPageStore.ts     |--\u00a0SearchPageStore.ts     |--\u00a0...<\/code><\/pre>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u0440\u043e\u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u0432: AbstractListStore \u0438\u043b\u0438 AbstractCrudStore.<\/p>\n<p>AbstractListStore &#8212; \u044d\u0442\u043e \u0441\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430. \u0412\u00a0\u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b\u00a0\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438:<\/p>\n<pre><code class=\"java\">\/** *\u00a0Abstract\u00a0store,\u00a0if\u00a0you\u00a0need\u00a0list\u00a0and\u00a0some\u00a0one\u00a0selected\u00a0item\u00a0from\u00a0it.\u00a0(Many\u00a0pages\u00a0in\u00a0admin\u00a0or\u00a0data\u00a0management\u00a0sections) * *\/ import {AbstractModel, ReactiveProp} from '@unidata\/core'; import {action,\u00a0computed,\u00a0observable} from 'mobx'; import {UdLogger} from '..\/index'; import {AbstractLoadingStore} from '.\/AbstractLoadingStore';  export abstract class AbstractListStore&lt;    T extends AbstractModel, \/\/\u00a0\u0422\u0438\u043f\u00a0\u043c\u043e\u0434\u0435\u043b\u0438,\u00a0\u043a\u043e\u0442\u043e\u0440\u0430\u044f\u00a0\u0431\u0443\u0434\u0435\u0442\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c\u00a0\u0441\u043f\u0438\u0441\u043a\u0430    ItemKey = string \/\/\u00a0\u0422\u0438\u043f\u00a0\u043a\u043b\u044e\u0447\u0430\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430  > extends AbstractLoadingStore {    protected abstract fetchList\u00a0(): Promise&lt;T[]>; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u00a0\u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f\u00a0\u0441\u043f\u0438\u0441\u043a\u0430\u00a0\u043c\u043e\u0434\u0435\u043b\u0435\u0439     protected abstract fetchItem\u00a0(key: ItemKey): Promise&lt;T>; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u00a0\u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f\u00a0\u043e\u0434\u043d\u043e\u0439\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u043e\u00a0\u043a\u043b\u044e\u0447\u0443     protected abstract findItem\u00a0(key: ItemKey):\u00a0(item: T,\u00a0index: number)\u00a0=> boolean; \/\/\u00a0\u043c\u0435\u0442\u043e\u0434\u00a0\u0434\u043b\u044f\u00a0\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u043f\u043e\u00a0\u043a\u043b\u044e\u0447\u0443\u00a0\u0432\u00a0\u0442\u0435\u043a\u0449\u0435\u043c\u00a0\u0441\u043f\u0438\u0441\u043a\u0435     @observable.ref    protected selectedItem: T | undefined; \/\/\u00a0\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0\u0438\u0437\u00a0\u0441\u043f\u0438\u0441\u043a\u0430     @observable.shallow    protected list: T[]\u00a0=\u00a0[]; \/\/\u00a0\u0441\u043f\u0438\u0441\u043e\u043a\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     @computed    public get getList\u00a0(): T[]\u00a0{return this.list;}     @computed    public get getSelectedItem\u00a0(): T | undefined {        return this.selectedItem;    }     @action    public loadList\u00a0(): Promise&lt;void>\u00a0{        this.setLoading(true);                return this.fetchList()            .then((result)\u00a0=>\u00a0{                this.setList(result);            })            .finally(()\u00a0=>\u00a0{                this.setLoading(false);            });    }     @action    public loadItem\u00a0(key: ItemKey): Promise&lt;void>\u00a0{        this.setLoading(true);         return this.fetchItem(key)            .then((result)\u00a0=>\u00a0{                this.setSelectedItem(result);            })            .finally(()\u00a0=>\u00a0{                this.setLoading(false);            });    }     public selectItem\u00a0(name?: ItemKey): void {        if (name\u00a0=== undefined)\u00a0{            this.setSelectedItem(undefined);        } else {            const selected\u00a0= this.getList.find(this.findItem(name));             if (selected\u00a0=== undefined)\u00a0{                UdLogger.warn(`You\u00a0try\u00a0to\u00a0select\u00a0item\u00a0by\u00a0unknown\u00a0identifier:\u00a0\"${name}\"`);            }             this.setSelectedItem(selected);        }    }     @action    protected setList\u00a0(list: T[])\u00a0{        this.list\u00a0=\u00a0list;    }     @action    protected setSelectedItem\u00a0(selected: T | undefined)\u00a0{        this.selectedItem\u00a0=\u00a0selected;         if (this.selectedItem\u00a0!== undefined)\u00a0{            \/\/\u00a0\u041f\u043e\u0441\u043b\u0435\u00a0\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0434\u043e\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c\u00a0\u0435\u0433\u043e\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u00a0(\u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\u00a0\u0432\u00a0\u043c\u043e\u0434\u0435\u043b\u0438\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u00a0\u0442\u043e\u043b\u044c\u043a\u043e\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0value)            this.selectedItem.setReactiveCascade([                ReactiveProp.DIRTY,                ReactiveProp.VALIDATION_RESULT,                ReactiveProp.PHANTOM            ]);        }    } }<\/code><\/pre>\n<p>AbstractCrudStore &#8212; \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 AbstractListStore \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <a href=\"https:\/\/gitlab.com\/unidata-community-group\/unidata-platform-ui\/-\/blob\/master\/module\/core-app\/src\/store\/AbstractCrudStore.ts\"><u>\u041f\u043e\u043b\u043d\u044b\u0439\u00a0\u043a\u043e\u0434\u00a0\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b =)<\/strong><\/p>\n<p>\u041f\u0443\u0442\u044c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-414092","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/414092","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=414092"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/414092\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=414092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=414092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=414092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}