{"id":327279,"date":"2022-01-10T08:49:54","date_gmt":"2022-01-10T08:49:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=327279"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=327279","title":{"rendered":"Angular vs React \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u043d\u043e\u0432\u0438\u0447\u043a\u0430. \u0427\u0430\u0441\u0442\u044c 1: Angular<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
<\/figcaption><\/figure>\n

\u0412 2021 \u0433\u043e\u0434\u0443 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442 React, Angular \u0438, \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u043d\u0438\u0435\u043c, Vue. \u0412 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u043d \u0443\u043f\u043e\u0440 \u043d\u0430 React, \u043d\u043e \u0440\u044f\u0434 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Angular. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u0435\u0439 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n

\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c?<\/h3>\n

\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 Angular \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u0438 \u043f\u0440\u043e\u0439\u0442\u0438 \u00ab\u0422\u0443\u0440 \u0413\u0435\u0440\u043e\u0435\u0432\u00bb<\/a>. \u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u0438 \u0432\u0437\u044f\u0432 \u00ab\u0422\u0443\u0440 \u0433\u0435\u0440\u043e\u0435\u0432\u00bb \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u0432\u043e\u0451 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular \u0438 React, \u0441\u0440\u0430\u0432\u043d\u0438\u0432 \u0441\u0443\u0431\u044c\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. <\/p>\n

\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n

\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0432\u0440\u043e\u0434\u0435 \u00ab\u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\u00bb, \u00ab\u0431\u043b\u043e\u0433\u00bb \u0438\u043b\u0438 \u00ab\u0443\u0447\u0451\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432\u00bb. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u0431\u0443\u0441\u043d\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435. Bus-\u0444\u0430\u043a\u0442\u043e\u0440<\/a> \u2014 \u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u0435 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437-\u0437\u0430 \u0414\u0422\u041f \u0441 \u0430\u0432\u0442\u043e\u0431\u0443\u0441\u043e\u043c) \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. <\/p>\n

\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u00ab\u0422\u0443\u0440\u043e\u043c \u0433\u0435\u0440\u043e\u0435\u0432\u00bb \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 dashboard-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438, \u0438 \u0441 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043d\u0430\u0432\u044b\u043a\u0443 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0443. \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043b\u0451\u043a \u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Angular \u0438 React \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n

\u041d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 MVP \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0430\u043c\u044b\u0445 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432, \u0447\u044c\u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u043d\u0430\u0434\u043e \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435\u0439 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435<\/p>\n

<\/figcaption><\/figure>\n

\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u0432\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043d\u0430\u0432\u044b\u043a \u0438\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430. \u041d\u0430\u0432\u044b\u043a\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0437\u043d\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0432\u044b\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0435\u0433\u043e \u0437\u043d\u0430\u044e\u0442, \u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0441\u0432\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043c \u043d\u0430\u0432\u044b\u043a\u043e\u0432.<\/p>\n

<\/figcaption><\/figure>\n

\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u043f\u043e\u0445\u043e\u0436\u0438: \u043d\u0430 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u0430 \u0438\u043b\u0438 \u0438\u043c\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a \u0438\u0437\u0443\u0447\u0438\u043b \u043d\u0430\u0432\u044b\u043a (\u0442\u043e\u0433\u0434\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u043d\u0430\u043a \u0441\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0437\u0435\u043b\u0451\u043d\u0443\u044e \u0433\u0430\u043b\u043e\u0447\u043a\u0443).<\/p>\n

<\/figcaption><\/figure>\n

\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u0436\u0438\u0432\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0442 \u0442\u0443\u0442: https:\/\/bus-factor.web.app<\/a>, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u2014 https:\/\/github.com\/domclick\/bus_factor<\/a><\/p>\n

\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b \u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439<\/h3>\n

\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0433\u043e \u0431\u0435\u043a\u0435\u043d\u0434\u0430, \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Google Firebase<\/a> \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043b\u044c Backend-as-a-service. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n

<\/figcaption><\/figure>\n

\u0412\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u2014 \u00ab\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438\u00bb \u0438 \u0438\u0445 \u00ab\u041d\u0430\u0432\u044b\u043a\u0438\u00bb, \u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u0430 \u043a \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0443. \u0414\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b Angular-\u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 CRUD \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 Firebase-\u0431\u0435\u043a\u0435\u043d\u0434\u043e\u043c:<\/p>\n

\n\u041a\u043e\u0434<\/summary>\n
\n
import { Injectable } from '@angular\/core'; import { FbCreateResponse, Employee } from '..\/interfaces'; import { Observable, of } from 'rxjs'; import { HttpClient, HttpHeaders } from '@angular\/common\/http'; import { catchError, map, tap } from 'rxjs\/operators'; import { environment } from '..\/..\/..\/environments\/environment';  @Injectable({   providedIn: 'root' }) export class EmployeesService {   constructor(private http: HttpClient) { }    private employeesUrl = 'api\/employees';   private entityName = 'employees';    httpOptions = {     headers: new HttpHeaders({ 'Content-Type': 'application\/json' })   };    getEmployees(): Observable<Employee[]> {     return this.http.get<Employee[]>(`${environment.fbDbUrl}\/${this.entityName}.json`)       .pipe(         tap(_ => this.log('fetched employees')),         map((response: {[key: string]: any}) => {           return Object.           keys(response)             .map(key => ({               ...response[key],               id: key,             }));         }),         catchError(this.handleError<Employee[]>('getEmployees', []))       );   }    getEmployee(id: string): Observable<Employee> {     const url = `${environment.fbDbUrl}\/${this.entityName}\/${id}.json`;     return this.http.get<Employee>(url).pipe(       tap(_ => this.log(`fetched employee id=${id}`)),       map((employee: Employee) => {         return {           ...employee,           id         };       }),       catchError(this.handleError<Employee>(`getEmployee id=${id}`))     );   }    updateEmployee(employee: Employee): Observable<any> {     return this.http.patch(`${environment.fbDbUrl}\/employees\/${employee.id}.json`, employee, this.httpOptions).pipe(       tap(_ => this.log(`updated employee id=${employee.id}`)),       catchError(this.handleError<any>('updateEmployee'))     );   }    addEmployee(employee: Employee): Observable<Employee> {     return this.http.post<Employee>(`${environment.fbDbUrl}\/employees.json`, employee, this.httpOptions).pipe(       tap((newEmployee: Employee) => this.log(`added employee w\/ id=${newEmployee.id}`)),       map((response: FbCreateResponse) => {         return {           ...employee,           id: response.name,         };       }),       catchError(this.handleError<Employee>('addEmployee'))     );   }    deleteEmployee(employee: Employee | string): Observable<Employee> {     const id = typeof employee === 'string' ? employee : employee.id;     const url = `${environment.fbDbUrl}\/${this.entityName}\/${id}.json`;      return this.http.delete<Employee>(url, this.httpOptions).pipe(       tap(_ => this.log(`deleted employee id=${id}`)),       catchError(this.handleError<Employee>('deleteEmployee'))     );   }    searchEmployees(term: string): Observable<Employee[]> {     if (!term.trim()) {       \/\/ if not search term, return empty employee array.       return of([]);     }     return this.http.get<Employee[]>(`${this.employeesUrl}\/?name=${term}`).pipe(       tap(x => x.length ?         this.log(`found employees matching \"${term}\"`) :         this.log(`no employees matching \"${term}\"`)),       catchError(this.handleError<Employee[]>('searchEmployees', []))     );   }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u0430\u0431\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:   <\/p>\n
dashboard<\/strong><\/p>\n
\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f, \u0443\u043c\u0435\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0427\u0442\u043e\u0431\u044b \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u0438 \u043f\u043e \u0438\u0445 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c forkJoin<\/a> \u0438\u0437 rxjs. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0431\u043e\u0440\u0430 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0435\u0439), \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { Component, OnInit } from '@angular\/core'; import { Employee, EmployeeSkill } from '..\/shared\/interfaces'; import { SkillsService } from '..\/shared\/services\/skills.service'; import { forkJoin } from 'rxjs'; import { EmployeeSkillsService } from '..\/shared\/services\/employee-skills.service'; import { EmployeesService } from '..\/shared\/services\/employee.service';  @Component({   selector: 'app-dashboard',   templateUrl: '.\/dashboard.component.html',   styleUrls: [ '.\/dashboard.component.scss' ] }) export class DashboardComponent implements OnInit {   employees: Employee[] = [];   employeeSkills: EmployeeSkill[];   employeesHasSkills = {};   employeesDictionary = {};   bestEmployees = [];   employeesHasSkill: Employee[] = [];    constructor(     private skillsService: SkillsService,     private employeesService: EmployeesService,     private employeeSkillsService: EmployeeSkillsService,   ) { }    ngOnInit(): void {     forkJoin([       this.employeesService.getEmployees(),       this.employeeSkillsService.getEmployeeSkills()])       .subscribe(([employees, employeeSkills]) => {         this.employeeSkills = employeeSkills;         this.employees = employees;         if (this.employeeSkills) {           for (const es of this.employeeSkills) {             if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {               this.employeesHasSkills[es.employeeId] += 1;             } else {               this.employeesHasSkills[es.employeeId] = 1;             }           }           this.bestEmployees = Object.entries(this.employeesHasSkills).sort((a, b) => {             const aCount = a[1];             const bCount = b[1];             if (aCount < bCount) {               return 1;             } else if (aCount > bCount) {               return -1;             } else {               return 0;             }           });           for (const e of employees) {             this.employeesDictionary[e.id] = e;           }           this.bestEmployees = this.bestEmployees.slice(0, 4);         }       });   } }<\/code><\/pre>\n<\/div>\n<\/details>\n
bus-factor-list<\/strong><\/p>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b skill-item<\/code> \u0438 <\/em>employee-item<\/code>. <\/em>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <\/em>Output<\/a>, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 handleDeleteSkill<\/code> \u0438 handleDeleteEmployee<\/code>. <\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
<div class=\"skills\">   <div class=\"skills-header\">     <input #skillName placeholder=\"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u041d\u0430\u0432\u044b\u043a\u0430\" \/>     <button (click)=\"addSkill(skillName.value); skillName.value=''\">       \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c     <\/button>   <\/div>   <div class=\"bus_factors\">     <app-skill-item *ngFor=\"let skill of skills\"                        [skill]=\"skill\"                        [skillCount]=\"skillTeachedByEmployee[skill.id] ||  0\"                        (deleteButtonClick)=\"handleDeleteSkill($event)\"     >     <\/app-skill-item>   <\/div> <\/div> <!--\u041a\u043e\u0434 \u0434\u043b\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d, \u0432 \u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d--><\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u0446\u0435\u043b\u043e\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u00ab\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u00bb \u0438 \u00ab\u041d\u0430\u0432\u044b\u043a\u00bb \u0432 MVP \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436, \u043d\u043e \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. Typescript-\u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f bus-factor-list<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { SkillsService } from '..\/shared\/services\/skills.service'; import { Component, OnInit } from '@angular\/core'; import { Employee, EmployeeSkill, Skill } from '..\/shared\/interfaces'; import { EmployeesService } from '..\/shared\/services\/employee.service'; import { EmployeeSkillsService } from '..\/shared\/services\/employee-skills.service'; import { forkJoin } from 'rxjs';  @Component({   selector: 'app-bus-factor-list',   templateUrl: '.\/bus-factor-list.component.html',   styleUrls: ['.\/bus-factor-list.component.scss'] }) export class BusFactorListComponent implements OnInit {   skills: Skill[];   employees: Employee[];   employeeSkills: EmployeeSkill[];   employeesHasSkills = {};   skillTeachedByEmployee = {};    constructor(     private skillsService: SkillsService,     private employeesService: EmployeesService,     private employeeSkillsService: EmployeeSkillsService,   ) { }    ngOnInit() {     forkJoin([       this.skillsService.getSkills(),       this.employeesService.getEmployees(),       this.employeeSkillsService.getEmployeeSkills()])       .subscribe(([skills, empoyees, employeeSkills]) => {         this.skills = skills;         this.employees = empoyees;         this.employeeSkills = employeeSkills;         this.calculateSkillsData();       });   }    calculateSkillsData(): void {     this.employeesHasSkills = {};     this.skillTeachedByEmployee = {};      if (this.employeeSkills) {       for (const es of this.employeeSkills) {         if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {           this.employeesHasSkills[es.employeeId] += 1;         } else {           this.employeesHasSkills[es.employeeId] = 1;         }          if (this.skillTeachedByEmployee.hasOwnProperty(es.skillId)) {           this.skillTeachedByEmployee[es.skillId] += 1;         } else {           this.skillTeachedByEmployee[es.skillId] = 1;         }       }     }   }    getSkills(): void {     this.skillsService.getSkills()       .subscribe(skills => this.skills = skills);   }    addSkill(name: string): void {     name = name.trim();     if (!name) { return; }     this.skillsService.addSkill({ name } as Skill)       .subscribe(skill => {         this.skills.push(skill);       });   }    deleteSkill(skill: Skill): void {     const skillId = typeof skill === 'string' ? skill : skill.id;      this.skills = this.skills.filter(h => h !== skill);     this.skillsService.deleteSkill(skill).subscribe();      for (const es of this.employeeSkills) {       if (es.skillId === skillId) {         this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();       }     }     this.skills = this.skills.filter(s => s !== skill);     this.skillsService.deleteSkill(skill).subscribe();     this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);     this.calculateSkillsData();   }    handleDeleteSkill(skill: Skill): void {     const skillId = typeof skill === 'string' ? skill : skill.id;     for (const es of this.employeeSkills) {       if (es.skillId === skillId) {         this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();       }     }     this.skills = this.skills.filter(h => h !== skill);     this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);     this.calculateSkillsData();   }   \/\/ \u043a\u043e\u0434 \u0434\u043b\u044f \u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d, \u0432 \u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d }<\/code><\/pre>\n<\/div>\n<\/details>\n
skill-item<\/strong><\/p>\n
\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043a\u043b\u043e\u043d\u044f\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u043e\u0432\u043e \u00ab\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u00bb, \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d pipe<\/a> pluralize:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { Pipe, PipeTransform } from '@angular\/core';  @Pipe({     name: 'pluralize' }) export class PluralizePipe implements PipeTransform {   decline(num: number, titles: string[]) {     const cases = [2, 0, 1, 1, 1, 2];     return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];   }    transform(value: any, titles: string[]): any {         return this.decline(+value, titles);     } } import { Pipe, PipeTransform } from '@angular\/core';  @Pipe({     name: 'pluralize' }) export class PluralizePipe implements PipeTransform {   decline(num: number, titles: string[]) {     const cases = [2, 0, 1, 1, 1, 2];     return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];   }    transform(value: any, titles: string[]): any {         return this.decline(+value, titles);     } }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 skill-item<\/code> \u043e\u043d \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
<div class=\"skill-container\" (click)=\"onSkillClick()\">   <div class=\"skill-info\">     <div class=\"skill-name\">{{ skill.name }}<\/div>     <div class=\"skill-skills\">       {{ skillCount }} {{ skillCount | pluralize: ['\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a', '\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430', '\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432'] }}     <\/div>   <\/div>   <button class=\"delete\" title=\"delete skill\"           (click)=\"deleteSkill(skill)\">     \u0423\u0434\u0430\u043b\u0438\u0442\u044c   <\/button> <\/div><\/code><\/pre>\n
\u0412\u043d\u0443\u0442\u0440\u0438 Typescript-\u043b\u043e\u0433\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f Output<\/code>:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { Component, EventEmitter, Input, OnInit, Output } from '@angular\/core'; import { Skill } from '..\/shared\/interfaces'; import { SkillsService } from '..\/shared\/services\/skills.service'; import { ActivatedRoute, Router } from '@angular\/router';  @Component({   selector: 'app-skill-item',   templateUrl: '.\/skill-item.component.html',   styleUrls: ['.\/skill-item.component.scss'] }) export class SkillItemComponent implements OnInit {   @Input() skill: Skill;   @Input() skillCount: number;   @Output() deleteButtonClick = new EventEmitter<Skill>();    constructor(     private skillsService: SkillsService,     private router: Router,     private activatedRoute: ActivatedRoute,   ) { }    ngOnInit(): void {   }    deleteSkill(skill: Skill): void {     this.skillsService.deleteSkill(skill).subscribe();     this.deleteButtonClick.emit(skill);   }    onSkillClick(): void {     this.router.navigate(['skills', this.skill.id],       {relativeTo: this.activatedRoute.parent});   }  }<\/code><\/pre>\n<\/div>\n<\/details>\n
skill-detail<\/strong> \u0438 employee-detail<\/strong><\/p>\n
\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 (employee-detail<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430 \u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u043c \u044d\u0442\u0438\u043c \u043d\u0430\u0432\u044b\u043a\u043e\u043c (skill-detail<\/code>) \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b ng-template<\/a> \u0432 else<\/code>-\u0431\u043b\u043e\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u044f\/\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u0430:<\/p>\n
<div class=\"card-title\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u043e\u043c<\/div> <div class=\"skill-info\">   <div class=\"skill-id\"><\/div>   <input [(ngModel)]=\"skill.name\" placeholder=\"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u0430\"\/>   <div class=\"skill-controls\">     <button (click)=\"goBack()\">\u041d\u0430\u0437\u0430\u0434<\/button>     <button (click)=\"save()\">\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c<\/button>   <\/div> <\/div> <div class=\"skill-box\">   <div class=\"skills-title\">\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0441 \u044d\u0442\u0438\u043c \u043d\u0430\u0432\u044b\u043a\u043e\u043c<\/div>   <div class=\"skill\" *ngFor=\"let employee of employees\" (click)=\"changeEmployeeSkill(employee.id)\">     <img src=\"assets\/icons\/done.svg\" *ngIf=\"employeeIdsHasSkill.includes(employee.id); else noSkill\">     <ng-template #noSkill><img class=\"square-img\" src=\"assets\/icons\/icon_warning_red.svg\"><\/ng-template>     <div class=\"skill-name\"> {{employee.name}}<\/div>   <\/div> <\/div> <\/code><\/pre>\n
header<\/strong> \u0438 sidebar<\/strong> <\/p>\n
\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0438\u043f\u043e\u0432\u044b\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h2>\n
<\/figcaption><\/figure>\n
\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Angular \u043d\u0430\u043f\u0438\u0441\u0430\u043d, \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a React-\u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043b\u0438\u0431\u043e \u0443\u0433\u043b\u0443\u0431\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 Angular-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u0430\u0434\u043c\u0438\u043d\u043a\u0443, \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u043f\u0440\u043e\u0447\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041b\u0438\u0431\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0435\u043a\u0435\u043d\u0434\u043e\u043c, \u0437\u0430\u043c\u0435\u043d\u0438\u0432 Firebase \u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 \u0447\u0451\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 fastAPI<\/a>. \u041a\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u2014 \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \ud83d\ude42<\/p>\n<\/div>\n<\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/company\/domclick\/blog\/596573\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
<\/figcaption><\/figure>\n
\u0412 2021 \u0433\u043e\u0434\u0443 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442 React, Angular \u0438, \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u043d\u0438\u0435\u043c, Vue. \u0412 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u043d \u0443\u043f\u043e\u0440 \u043d\u0430 React, \u043d\u043e \u0440\u044f\u0434 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Angular. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u0435\u0439 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n
\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c?<\/h3>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 Angular \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u0438 \u043f\u0440\u043e\u0439\u0442\u0438 \u00ab\u0422\u0443\u0440 \u0413\u0435\u0440\u043e\u0435\u0432\u00bb<\/a>. \u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u0438 \u0432\u0437\u044f\u0432 \u00ab\u0422\u0443\u0440 \u0433\u0435\u0440\u043e\u0435\u0432\u00bb \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u0432\u043e\u0451 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Angular \u0438 React, \u0441\u0440\u0430\u0432\u043d\u0438\u0432 \u0441\u0443\u0431\u044c\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. <\/p>\n
\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0432\u0440\u043e\u0434\u0435 \u00ab\u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\u00bb, \u00ab\u0431\u043b\u043e\u0433\u00bb \u0438\u043b\u0438 \u00ab\u0443\u0447\u0451\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432\u00bb. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u0431\u0443\u0441\u043d\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435. Bus-\u0444\u0430\u043a\u0442\u043e\u0440<\/a> \u2014 \u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u0435 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437-\u0437\u0430 \u0414\u0422\u041f \u0441 \u0430\u0432\u0442\u043e\u0431\u0443\u0441\u043e\u043c) \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. <\/p>\n
\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u00ab\u0422\u0443\u0440\u043e\u043c \u0433\u0435\u0440\u043e\u0435\u0432\u00bb \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 dashboard-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438, \u0438 \u0441 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043d\u0430\u0432\u044b\u043a\u0443 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0443. \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043b\u0451\u043a \u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Angular \u0438 React \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n
\u041d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 MVP \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u0430\u043c\u044b\u0445 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432, \u0447\u044c\u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u043d\u0430\u0434\u043e \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435\u0439 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u0432\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043d\u0430\u0432\u044b\u043a \u0438\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430. \u041d\u0430\u0432\u044b\u043a\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0437\u043d\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0432\u044b\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0435\u0433\u043e \u0437\u043d\u0430\u044e\u0442, \u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0441\u0432\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043c \u043d\u0430\u0432\u044b\u043a\u043e\u0432.<\/p>\n
<\/figcaption><\/figure>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u043f\u043e\u0445\u043e\u0436\u0438: \u043d\u0430 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u0430 \u0438\u043b\u0438 \u0438\u043c\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a \u0438\u0437\u0443\u0447\u0438\u043b \u043d\u0430\u0432\u044b\u043a (\u0442\u043e\u0433\u0434\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u043d\u0430\u043a \u0441\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0437\u0435\u043b\u0451\u043d\u0443\u044e \u0433\u0430\u043b\u043e\u0447\u043a\u0443).<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u0436\u0438\u0432\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0442 \u0442\u0443\u0442: https:\/\/bus-factor.web.app<\/a>, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u2014 https:\/\/github.com\/domclick\/bus_factor<\/a><\/p>\n
\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b \u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439<\/h3>\n
\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0433\u043e \u0431\u0435\u043a\u0435\u043d\u0434\u0430, \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Google Firebase<\/a> \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043b\u044c Backend-as-a-service. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0441\u0435\u0433\u043e \u0434\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u2014 \u00ab\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438\u00bb \u0438 \u0438\u0445 \u00ab\u041d\u0430\u0432\u044b\u043a\u0438\u00bb, \u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u0430 \u043a \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0443. \u0414\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b Angular-\u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 CRUD \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 Firebase-\u0431\u0435\u043a\u0435\u043d\u0434\u043e\u043c:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { Injectable } from '@angular\/core'; import { FbCreateResponse, Employee } from '..\/interfaces'; import { Observable, of } from 'rxjs'; import { HttpClient, HttpHeaders } from '@angular\/common\/http'; import { catchError, map, tap } from 'rxjs\/operators'; import { environment } from '..\/..\/..\/environments\/environment';  @Injectable({   providedIn: 'root' }) export class EmployeesService {   constructor(private http: HttpClient) { }    private employeesUrl = 'api\/employees';   private entityName = 'employees';    httpOptions = {     headers: new HttpHeaders({ 'Content-Type': 'application\/json' })   };    getEmployees(): Observable<Employee[]> {     return this.http.get<Employee[]>(`${environment.fbDbUrl}\/${this.entityName}.json`)       .pipe(         tap(_ => this.log('fetched employees')),         map((response: {[key: string]: any}) => {           return Object.           keys(response)             .map(key => ({               ...response[key],               id: key,             }));         }),         catchError(this.handleError<Employee[]>('getEmployees', []))       );   }    getEmployee(id: string): Observable<Employee> {     const url = `${environment.fbDbUrl}\/${this.entityName}\/${id}.json`;     return this.http.get<Employee>(url).pipe(       tap(_ => this.log(`fetched employee id=${id}`)),       map((employee: Employee) => {         return {           ...employee,           id         };       }),       catchError(this.handleError<Employee>(`getEmployee id=${id}`))     );   }    updateEmployee(employee: Employee): Observable<any> {     return this.http.patch(`${environment.fbDbUrl}\/employees\/${employee.id}.json`, employee, this.httpOptions).pipe(       tap(_ => this.log(`updated employee id=${employee.id}`)),       catchError(this.handleError<any>('updateEmployee'))     );   }    addEmployee(employee: Employee): Observable<Employee> {     return this.http.post<Employee>(`${environment.fbDbUrl}\/employees.json`, employee, this.httpOptions).pipe(       tap((newEmployee: Employee) => this.log(`added employee w\/ id=${newEmployee.id}`)),       map((response: FbCreateResponse) => {         return {           ...employee,           id: response.name,         };       }),       catchError(this.handleError<Employee>('addEmployee'))     );   }    deleteEmployee(employee: Employee | string): Observable<Employee> {     const id = typeof employee === 'string' ? employee : employee.id;     const url = `${environment.fbDbUrl}\/${this.entityName}\/${id}.json`;      return this.http.delete<Employee>(url, this.httpOptions).pipe(       tap(_ => this.log(`deleted employee id=${id}`)),       catchError(this.handleError<Employee>('deleteEmployee'))     );   }    searchEmployees(term: string): Observable<Employee[]> {     if (!term.trim()) {       \/\/ if not search term, return empty employee array.       return of([]);     }     return this.http.get<Employee[]>(`${this.employeesUrl}\/?name=${term}`).pipe(       tap(x => x.length ?         this.log(`found employees matching \"${term}\"`) :         this.log(`no employees matching \"${term}\"`)),       catchError(this.handleError<Employee[]>('searchEmployees', []))     );   }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u0430\u0431\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:   <\/p>\n
dashboard<\/strong><\/p>\n
\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f, \u0443\u043c\u0435\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0427\u0442\u043e\u0431\u044b \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u0438 \u043f\u043e \u0438\u0445 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c forkJoin<\/a> \u0438\u0437 rxjs. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0431\u043e\u0440\u0430 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0435\u0439), \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { Component, OnInit } from '@angular\/core'; import { Employee, EmployeeSkill } from '..\/shared\/interfaces'; import { SkillsService } from '..\/shared\/services\/skills.service'; import { forkJoin } from 'rxjs'; import { EmployeeSkillsService } from '..\/shared\/services\/employee-skills.service'; import { EmployeesService } from '..\/shared\/services\/employee.service';  @Component({   selector: 'app-dashboard',   templateUrl: '.\/dashboard.component.html',   styleUrls: [ '.\/dashboard.component.scss' ] }) export class DashboardComponent implements OnInit {   employees: Employee[] = [];   employeeSkills: EmployeeSkill[];   employeesHasSkills = {};   employeesDictionary = {};   bestEmployees = [];   employeesHasSkill: Employee[] = [];    constructor(     private skillsService: SkillsService,     private employeesService: EmployeesService,     private employeeSkillsService: EmployeeSkillsService,   ) { }    ngOnInit(): void {     forkJoin([       this.employeesService.getEmployees(),       this.employeeSkillsService.getEmployeeSkills()])       .subscribe(([employees, employeeSkills]) => {         this.employeeSkills = employeeSkills;         this.employees = employees;         if (this.employeeSkills) {           for (const es of this.employeeSkills) {             if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {               this.employeesHasSkills[es.employeeId] += 1;             } else {               this.employeesHasSkills[es.employeeId] = 1;             }           }           this.bestEmployees = Object.entries(this.employeesHasSkills).sort((a, b) => {             const aCount = a[1];             const bCount = b[1];             if (aCount < bCount) {               return 1;             } else if (aCount > bCount) {               return -1;             } else {               return 0;             }           });           for (const e of employees) {             this.employeesDictionary[e.id] = e;           }           this.bestEmployees = this.bestEmployees.slice(0, 4);         }       });   } }<\/code><\/pre>\n<\/div>\n<\/details>\n
bus-factor-list<\/strong><\/p>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b skill-item<\/code> \u0438 <\/em>employee-item<\/code>. <\/em>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <\/em>Output<\/a>, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 handleDeleteSkill<\/code> \u0438 handleDeleteEmployee<\/code>. <\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
<div class=\"skills\">   <div class=\"skills-header\">     <input #skillName placeholder=\"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u041d\u0430\u0432\u044b\u043a\u0430\" \/>     <button (click)=\"addSkill(skillName.value); skillName.value=''\">       \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c     <\/button>   <\/div>   <div class=\"bus_factors\">     <app-skill-item *ngFor=\"let skill of skills\"                        [skill]=\"skill\"                        [skillCount]=\"skillTeachedByEmployee[skill.id] ||  0\"                        (deleteButtonClick)=\"handleDeleteSkill($event)\"     >     <\/app-skill-item>   <\/div> <\/div> <!--\u041a\u043e\u0434 \u0434\u043b\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d, \u0432 \u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d--><\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u0446\u0435\u043b\u043e\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u00ab\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u00bb \u0438 \u00ab\u041d\u0430\u0432\u044b\u043a\u00bb \u0432 MVP \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436, \u043d\u043e \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. Typescript-\u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f bus-factor-list<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
\n\u041a\u043e\u0434<\/summary>\n
\n
import { SkillsService } from '..\/shared\/services\/skills.service'; import { Component, OnInit } from '@angular\/core'; import { Employee, EmployeeSkill, Skill } from '..\/shared\/interfaces'; import { EmployeesService } from '..\/shared\/services\/employee.service'; import { EmployeeSkillsService } from '..\/shared\/services\/employee-skills.service'; import { forkJoin } from 'rxjs';  @Component({   selector:<\/code><\/pre>\n<\/div>\n<\/details>\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-327279","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327279","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=327279"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327279\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=327279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=327279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}