{"id":473584,"date":"2025-09-02T17:00:36","date_gmt":"2025-09-02T17:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=473584"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=473584","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u0438, \u0438\u043b\u0438 \u041f\u043e\u0447\u0435\u043c\u0443 \u0440\u0435\u0441\u0451\u0440\u0447 \u0432\u0430\u0436\u043d\u0435\u0435 \u043a\u043e\u0434\u0430<\/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 decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce5\/d33\/81f\/ce5d3381f39944ed5600d9e7695864df.jpg\" width=\"1600\" height=\"900\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ce5\/d33\/81f\/ce5d3381f39944ed5600d9e7695864df.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce5\/d33\/81f\/ce5d3381f39944ed5600d9e7695864df.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438\u043d, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u044f\u0442\u044c \u043b\u0435\u0442 \u044f \u0432\u043e\u0437\u0433\u043b\u0430\u0432\u043b\u044f\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 RnD. \u041c\u044b \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e Frontend-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0430 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0411\u042e, \u041f\u043e\u0447\u0442\u044b \u0438 \u041e\u0431\u043b\u0430\u043a\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430: \u043a\u0430\u043a \u043c\u044b \u0441 \u043d\u0443\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441 VK \u0414\u043e\u0441\u043a\u0430.<\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0443\u0441\u043f\u0435\u0445\u0430, \u0434\u0430 \u0438 \u043d\u0435 \u043f\u0440\u043e \u0414\u043e\u0441\u043a\u0443 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u0443\u044e. \u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0432 \u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0435\u0439\u0447\u0430\u0441. \u042d\u0442\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u043f\u043e \u0441\u0443\u0442\u0438, \u0441\u0442\u0430\u0440\u0442\u0430\u043f \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0442\u0435\u0431\u044f \u0441\u0436\u0430\u0442\u044b\u0435 \u0441\u0440\u043e\u043a\u0438, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0434\u0435\u0434\u043b\u0430\u0439\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438, \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0442\u0435\u0431\u044f.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u043e\u0439 \u043f\u0443\u0442\u044c \u043c\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u0441 \u043d\u0443\u043b\u044f \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u041f\u043e\u0447\u0435\u043c\u0443 \u0440\u0435\u0441\u0451\u0440\u0447 \u0432\u0430\u0436\u043d\u0435\u0435 \u043a\u043e\u0434\u0430, \u043a\u0430\u043a \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0436\u0438\u0442\u044c \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u0443\u044e \u0441\u043c\u0435\u043d\u0443 \u0431\u0438\u0437\u043d\u0435\u0441-\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043c\u044b \u0438 \u0442\u043e\u0447\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c \u0432\u044b \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0441 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<h2>\u041d\u0430\u0447\u0430\u043b\u043e<\/h2>\n<p>\u0412\u0441\u0451 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u0451\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430 \u0438 \u0441\u043a\u0430\u0437\u0430\u043b: \u00ab\u041a\u043e\u0441\u0442\u044f, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u0441\u043a\u0430\u00bb. \u041a \u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0434\u0430\u0432\u043d\u043e \u043d\u0430\u0437\u0440\u0435\u043b\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u0435 \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0434\u043b\u044f VK Workspace. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u043a\u0430\u043f\u043b\u0435\u0439 \u0441\u0442\u0430\u043b \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u043e\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u0423 \u043d\u0438\u0445 \u0431\u044b\u043b \u0436\u0451\u0441\u0442\u043a\u0438\u0439 \u0434\u0435\u0434\u043b\u0430\u0439\u043d \u2014 1 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f. \u0410 \u043d\u0430 \u0434\u0432\u043e\u0440\u0435 \u0441\u0442\u043e\u044f\u043b \u043c\u0430\u0440\u0442. \u041e\u043f\u044b\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u0431\u044b\u043b\u043e. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u044f \u00ab\u0442\u0440\u043e\u0433\u0430\u043b\u00bb Canvas \u043b\u0435\u0442 \u0434\u0435\u0441\u044f\u0442\u044c \u043d\u0430\u0437\u0430\u0434. \u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0442\u044c\u0441\u044f \u0431\u044b\u043b\u043e \u043d\u0435\u043b\u044c\u0437\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0442 \u043d\u0430\u0441 \u0437\u0430\u0432\u0438\u0441\u0435\u043b \u0443\u0441\u043f\u0435\u0445 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u043d\u0438\u044f, \u043d\u043e \u0438 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u0434\u0441\u0442\u0443\u043f\u0438\u0442\u044c\u0441\u044f \u043a \u0437\u0430\u0434\u0430\u0447\u0435? \u041d\u0435 \u043f\u0430\u043d\u0438\u043a\u043e\u0432\u0430\u0442\u044c, \u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e \u0441\u0431\u043e\u0440\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c, \u0447\u0442\u043e \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434 \u00ab\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u0441\u043a\u0430\u00bb. \u041a\u043e\u043f\u043d\u0443\u0432, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0442\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0438\u043b\u0438\u0441\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/894\/06d\/70f\/89406d70f8623681979f74189e6b93f3.png\" width=\"1600\" height=\"660\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/894\/06d\/70f\/89406d70f8623681979f74189e6b93f3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/894\/06d\/70f\/89406d70f8623681979f74189e6b93f3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ol>\n<li>\n<p><strong>\u00ab\u0414\u043e\u0441\u043a\u0430\u00bb<\/strong>. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c: \u0444\u0438\u0433\u0443\u0440\u044b, \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440\u044b, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u042d\u0442\u043e \u044f\u0434\u0440\u043e, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u043e\u0441\u043a\u043e\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0410 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 Workspace \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u0438 \u0435\u0449\u0451 \u043e\u0434\u043d\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435: \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c local-first.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f<\/strong>. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u0445\u043e\u0442\u0435\u043b \u043d\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0430 \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u044d\u0442\u0438\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h2>\u0414\u0432\u0430 \u043f\u0443\u0442\u0438<\/h2>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/766\/2b5\/9ef\/7662b59ef296d6ed42e63d10a092136a.png\" width=\"1504\" height=\"666\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/766\/2b5\/9ef\/7662b59ef296d6ed42e63d10a092136a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/766\/2b5\/9ef\/7662b59ef296d6ed42e63d10a092136a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u0434\u043e\u0441\u043a\u0443? \u0414\u0443\u043c\u0430\u044e, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442 \u00ab\u043d\u0435\u0442\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0436\u0435 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 VK, \u0441\u043e\u0431\u0440\u0430\u0442\u044c (\u0432 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0441\u0440\u043e\u043a\u0438) \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e. \u0418 \u0445\u043e\u0442\u044c \u043c\u044b \u0440\u0435\u0431\u044f\u0442\u0430 \u043d\u0435 \u0433\u043b\u0443\u043f\u044b\u0435, \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0442\u0440\u0435\u0437\u0432\u043e \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438: in-house \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u2014 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c, \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043a\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u043a open source. \u041d\u0430 \u0440\u044b\u043d\u043a\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u044f \u0432\u044b\u0434\u0435\u043b\u0438\u043b \u0442\u0440\u0438:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f35\/5e5\/384\/f355e5384060301551c687fc1984c2fb.png\" width=\"1600\" height=\"837\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/f35\/5e5\/384\/f355e5384060301551c687fc1984c2fb.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f35\/5e5\/384\/f355e5384060301551c687fc1984c2fb.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0443 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0438\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u043b\u044e\u0431\u043e\u0439 GPT \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442 \u043b\u0443\u0447\u0448\u0435,<em> \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/em> :]. \u0423\u043f\u043e\u043c\u044f\u043d\u0443 \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430\u043c \u043d\u0430 GitHub, \u0438\u043d\u0430\u0447\u0435 \u00ab\u0432\u0430\u0448\u00bb \u0432\u044b\u0431\u043e\u0440 \u2014 ExcaliDraw. \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u0438 \u0441\u0430\u043c\u044b\u0439 \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0439, \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u00ab\u0447\u0451\u0440\u043d\u0430\u044f \u043a\u043e\u0440\u043e\u0431\u043a\u0430\u00bb: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c CSS. \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u044f\u0434\u0440\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p><strong>\u041f\u043e\u043c\u043d\u0438\u0442\u0435: \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b. \u0424\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c.<\/strong><\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u043e\u043a\u043e\u043b\u043e \u043f\u043e\u043b\u0443\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e Proof of Concept \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 ExcaliDraw, Tldraw \u0438 Blocksuite. \u041c\u044b \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0443\u043f\u044b\u0432\u0430\u043b\u0438 \u043a\u043e\u0434, \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0444\u0438\u0447\u0438, \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 TLDraw \u0440\u0435\u043d\u0434\u0435\u0440 \u0431\u044b\u043b \u043d\u0430 SVG, \u0438 \u043f\u043e \u043d\u0430\u0448\u0438\u043c \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0430\u043c \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0440\u0435\u043a \u043f\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0435\u0433\u043e \u043d\u0430 Canvas.<\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u043b\u0438 UX-\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435: \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0438 \u0434\u0430\u043b\u0438 \u0438\u043c \u00ab\u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c\u00bb \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0446\u0435\u043d\u0438\u043b\u0438, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u0430 \u043a\u0430\u043a \u0434\u0435\u043b\u0430 \u0441 \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0440\u0430\u0431\u043e\u0442\u043e\u0439? \u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0435\u0439? \u0411\u044d\u043a\u0435\u043d\u0434\u043e\u043c?<\/p>\n<ul>\n<li>\n<p>ExcaliDraw:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0447\u0435\u0440\u0435\u0437 WebSocket [<a href=\"https:\/\/vertexaisearch.cloud.google.com\/grounding-api-redirect\/AUZIYQHio1iTnRbtSj2RfDJI2k5x3-QF18X7EN1-dKEIq_ih3E6Kn4XzhOXtWtp3T2x5SvNaNxRyOVChfVt3EkPfssLNOMMf89AhzXK0qInMS7F3OAePsO7-avfm-Bp-736pMRTUfT8EfdnjtnW9Y5zl2nWy0A3mmQ==\" rel=\"noopener noreferrer nofollow\">1<\/a>], \u043a\u043e\u0433\u0434\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u043d\u043e\u0441\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043b\u0438\u0431\u043e \u0432\u0441\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u0446\u0435\u043d\u0443, \u043b\u0438\u0431\u043e \u0434\u0435\u043b\u044c\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0421\u0435\u0440\u0432\u0435\u0440 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u0441\u0435\u0441\u0441\u0438\u0438. \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u00ablast-write-wins\u00bb (\u043a\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0442\u043e\u0442 \u0438 \u043f\u0440\u0430\u0432).<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e. \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u0441\u044b\u043b\u043e\u043c \u00ab\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438 \u0445\u043e\u0441\u0442\u0438\u0442\u0435 \u0441\u0430\u043c\u0438\u00bb.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Tldraw:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 @tldraw\/sync.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 Docker-\u043e\u0431\u0440\u0430\u0437, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Cloudflare Durable Objects.\u00a0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Blocksuite:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u0410\u0432\u0442\u043e\u0440\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043a\u0430\u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u044f\u0434\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432\u043e\u043a\u0440\u0443\u0433 CRDT \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Yjs. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 Blocksuite \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f local-first \u0438 \u0430\u043f\u0440\u0438\u043e\u0440\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0444\u043b\u0430\u0439\u043d-\u0440\u0435\u0436\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Rust. \u041d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Yjs, \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \ud83d\ude42<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u0447\u0442\u043e \u0438 ExcaliDraw, \u0438 Tldraw, \u043f\u043e \u0441\u0443\u0442\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0440\u0438\u0441\u043a: \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0439\u0434\u0451\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0436\u0434\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0442 \u043a\u043e\u0433\u043e.<\/p>\n<p>\u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f Blocksuite \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Yjs. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u042d\u0442\u043e, \u0434\u0435-\u0444\u0430\u043a\u0442\u043e, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0412\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0446\u0435\u043b\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430: \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0442\u043e\u043d\u043d\u044b \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u043d\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u043e\u0434 ExcaliDraw \u0438\u043b\u0438 Tldraw, \u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0441 \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 CRDT \u0438 Yjs \u2014 \u0435\u0441\u0442\u044c.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u0431\u044b\u043b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 (CRDT), \u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0437\u0440\u0435\u043b\u043e\u0439, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0441\u0436\u0430\u0442\u044b\u0435 \u0441\u0440\u043e\u043a\u0438, \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0430\u044e\u0449\u0438\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u043c.<\/p>\n<p>\u270d\ufe0f\u0412\u0410\u0416\u041d\u041e: \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0443 ExcaliDraw \u0438 Tldraw \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Yjs, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u0444\u0438\u0447\u0430 \u00ab\u0441\u0431\u043e\u043a\u0443\u00bb.<\/p>\n<h2>CRDT&#8230; CRDT&#8230; \u0427\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435?<\/h2>\n<p>CRDT (Conflict-free Replicated Data Type) \u2014 \u044d\u0442\u043e \u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0443 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u0427\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435?<\/p>\n<p><strong>\u0411\u0435\u0437 CRDT<\/strong> \u043c\u044b \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0446\u0435\u043b\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0438 \u043f\u043e\u0442\u0435\u0440\u044f \u0434\u0430\u043d\u043d\u044b\u0445 (\u0433\u043e\u043d\u043a\u0438);<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043c\u0435\u043d\u044b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 offline-\u0440\u0435\u0436\u0438\u043c\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442;<\/p>\n<\/li>\n<li>\n<p>\u00ab\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u00bb \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d8a\/ab0\/c01\/d8aab0c01abbddc2804bf70c1bfda638.gif\" width=\"498\" height=\"358\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d8a\/ab0\/c01\/d8aab0c01abbddc2804bf70c1bfda638.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d8a\/ab0\/c01\/d8aab0c01abbddc2804bf70c1bfda638.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0430, \u043d\u043e \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f CRDT, \u0442\u043e \u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0440\u043e\u0441\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0445\u0440\u0443\u043f\u043a\u043e\u0441\u0442\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c: \u0435\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435. \u041d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438, \u0442\u0430\u043a \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0451 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c WebSocket, \u0432\u0432\u043e\u0434\u044f\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438, \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c. \u0410 \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0433\u043e\u043d\u043a\u0438, \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442. \u042d\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u044f\u043c\u043e\u0435 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f \u0438 \u043e\u0444\u0444\u043b\u0430\u0439\u043d, \u0442\u043e \u0431\u0435\u0437 CRDT \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n<p>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 CRDT:<\/p>\n<ul>\n<li>\n<p>\u200b\u200b\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043a\u0430\u043a \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a \u0438 offline;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043c\u0435\u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b67\/7e8\/d44\/b677e8d44ee71d00e107b12748b4a6c4.png\" width=\"1420\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b67\/7e8\/d44\/b677e8d44ee71d00e107b12748b4a6c4.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b67\/7e8\/d44\/b677e8d44ee71d00e107b12748b4a6c4.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 CRDT-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 (Yjs, Logo \u0438 \u0434\u0440\u0443\u0433\u0438\u0435) \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 local-first. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u044c \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043f\u0440\u0438\u0447\u0451\u043c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438 \u0441\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u043e \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u043c\u0435\u0447\u0442\u0430\u044e\u0442, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>\u0414\u0430, CRDT \u0440\u0435\u0448\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043f\u043b\u0430\u0441\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043d\u043e \u0432\u0437\u0430\u043c\u0435\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043a\u0430\u043a \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 state-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 (\u043d\u043e, \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0432 \u043d\u043e\u0433\u0443, \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0438\u0436\u0435).<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0430 \u0440\u0435\u0441\u0451\u0440\u0447, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u00ab\u0434\u043e\u0441\u043a\u0430\u00bb \u2014 \u0435\u0441\u0442\u044c, Canvas API;<\/p>\n<\/li>\n<li>\n<p>\u00ab\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00bb \u2014 \u0435\u0441\u0442\u044c, CRDT (Yjs).<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0441\u0451 \u043e\u0442\u043b\u0438\u0447\u043d\u043e. \u041d\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f Blocksuite \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Rust.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/424\/8e0\/c6b\/4248e0c6b3bc6e3a44acdb050fef6f76.png\" width=\"1600\" height=\"824\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/424\/8e0\/c6b\/4248e0c6b3bc6e3a44acdb050fef6f76.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/424\/8e0\/c6b\/4248e0c6b3bc6e3a44acdb050fef6f76.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0443\u043c\u0435\u0435\u0442 \u0432 Go \u0438 Node.js, \u0434\u0430\u0436\u0435 \u0432 Perl, \u043d\u043e \u0441 Rust \u043c\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u041f\u0440\u0438\u0442\u0430\u0449\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0434 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0438 \u0443 \u043a\u043e\u0433\u043e \u043d\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u044b, \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0435 \u043c\u0438\u043d\u044b \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.\u00a0<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0441\u0442\u0430\u0432\u043a\u0430 \u043d\u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 Yjs \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u043e\u043f\u0440\u0430\u0432\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0431\u044f. \u041c\u044b \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u043e\u0442 Blocksuite. \u041c\u044b \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>\u041d\u0430\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0441\u0442\u0430\u043b <a href=\"https:\/\/github.com\/ueberdosis\/hocuspocus\" rel=\"noopener noreferrer nofollow\">Hocuspocus<\/a> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 open-source \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f Yjs \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <a href=\"https:\/\/github.com\/ueberdosis\/tiptap\" rel=\"noopener noreferrer nofollow\">Tiptap<\/a> (\u043a\u0440\u0443\u0442\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440), \u0430 \u043e\u043d \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 NodeJS, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430.<\/p>\n<p>Hocuspocus \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0442\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0434\u043b\u044f WebSocket, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044f \u043d\u0430\u0448\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u043e \u043e\u043d \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c HTTP-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c. \u041d\u0430\u043c \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043d\u0430\u0448 \u0441\u0442\u0435\u043a \u0442\u0440\u0435\u0442\u0438\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u0438 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 HTTP-\u0440\u043e\u0443\u0442\u0435\u0440 <a href=\"https:\/\/github.com\/delvedor\/find-my-way\" rel=\"noopener noreferrer nofollow\">find-my-way<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/fastify\/fastify\" rel=\"noopener noreferrer nofollow\">Fastify<\/a> \u0438 <a href=\"https:\/\/github.com\/restify\/node-restify\" rel=\"noopener noreferrer nofollow\">Restify<\/a>. \u041e\u043d \u043d\u0435 \u0442\u0430\u0449\u0438\u043b \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043b Hocuspocus.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e8c\/cf0\/37a\/e8ccf037a86ef193f46baa9edd658787.png\" width=\"1600\" height=\"795\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e8c\/cf0\/37a\/e8ccf037a86ef193f46baa9edd658787.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e8c\/cf0\/37a\/e8ccf037a86ef193f46baa9edd658787.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0430\u0437\u043b \u0441\u043b\u043e\u0436\u0438\u043b\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b:<\/p>\n<ol>\n<li>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442: Blocksuite (Canvas + CRDT\/Yjs) + Hocuspocus Provider.<\/p>\n<\/li>\n<li>\n<p>\u0411\u044d\u043a\u0435\u043d\u0434: Hocuspocus Server (WebSocket + Yjs) + find-my-way (HTTP-\u0440\u043e\u0443\u0442\u0438\u043d\u0433).<\/p>\n<\/li>\n<\/ol>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f, \u0438\u043b\u0438 \u041a\u0430\u043a \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c?<\/h3>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0440\u044f\u0434 \u0436\u0451\u0441\u0442\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438<\/strong>. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u2014 \u0441\u0432\u043e\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0441\u0432\u043e\u0438 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0444\u0438\u0447 \u0438 \u0444\u0438\u043a\u0441\u043e\u0432<\/strong>. \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u0431\u0430\u0433 \u0438\u043b\u0438 \u0432\u044b\u043a\u0430\u0442\u0438\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0444\u0438\u0447\u0443, \u0442\u043e \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u00ab\u043f\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0443\u00bb. \u041c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0441\u0435\u0431\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0431\u0435\u0433\u0430\u0442\u044c \u0437\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0441 \u043f\u0440\u043e\u0441\u044c\u0431\u043e\u0439: \u00ab\u0420\u0435\u0431\u044f\u0442\u0430, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0430\u0448 NPM-\u043f\u0430\u043a\u0435\u0442\u0438\u043a\u00bb.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0441\u0432\u043e\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0443\u043c\u0435\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445, \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f\u0441\u044c \u0432 \u0438\u0445 \u043c\u0438\u0440, \u0430 \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043d\u0430\u0448.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c<\/strong>. \u0412\u0441\u044f \u0433\u043e\u043b\u043e\u0432\u043d\u0430\u044f \u0431\u043e\u043b\u044c \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044e \u043e\u0442\u043a\u0430\u0437\u043e\u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0441\u0442\u0438 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0430\u0436\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043c\u0435\u044f \u043d\u0430 \u0440\u0443\u043a\u0430\u0445 \u044d\u0442\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430.<\/p>\n<ol>\n<li>\n<p><strong>NPM-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/strong>. \u041f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043d\u0435 \u0436\u0438\u0437\u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u043b \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e \u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0435 \u0444\u0438\u043a\u0441\u043e\u0432. \u0412\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u044b \u043d\u0430\u0448\u0438\u043c \u043a\u043e\u0448\u043c\u0430\u0440\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>Self-hosted<\/strong>. \u041e\u0442\u0434\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u00ab\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c\u00bb \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439, \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\u044e. \u042d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e \u0442\u043e\u043c\u0443, \u0447\u0435\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>PaaS (Platform as a Service)<\/strong>. \u042d\u0442\u043e \u0431\u044b\u043b \u0431\u044b \u0432\u044b\u0441\u0442\u0440\u0435\u043b \u0438\u0437 \u043f\u0443\u0448\u043a\u0438 \u043f\u043e \u0432\u043e\u0440\u043e\u0431\u044c\u044f\u043c. \u041c\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u043e\u043a, \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n<\/li>\n<li>\n<p><strong>SaaS (Software as a Service)<\/strong>. \u0418 \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043b\u043e\u0436\u0438\u043b\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435?<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 BoardSDK \u2014 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e JavaScript-\u043f\u0430\u043a\u0435\u0442\u0430. \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 SDK, \u0430 \u0442\u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 iframe, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0436\u0438\u0432\u0451\u0442 \u0432\u0441\u044f \u00ab\u043c\u0430\u0433\u0438\u044f\u00bb \u043d\u0430\u0448\u0435\u0439 \u0434\u043e\u0441\u043a\u0438. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0412 \u0441\u0430\u043c\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e SDK \u043c\u044b \u0437\u0430\u043b\u043e\u0436\u0438\u043b\u0438 \u0444\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b\u043b\u0430 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u0430 \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438: \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0430\u0441, \u0430 \u043c\u044b \u043f\u043e\u0434 \u043d\u0435\u0433\u043e. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, SDK \u0434\u0430\u0432\u0430\u043b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0434\u043e\u0441\u043a\u043e\u0439, \u043d\u043e \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u043e\u043a).<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe1\/369\/cb1\/fe1369cb1114e191dfc5388ec50ff8f8.png\" width=\"1600\" height=\"676\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/fe1\/369\/cb1\/fe1369cb1114e191dfc5388ec50ff8f8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe1\/369\/cb1\/fe1369cb1114e191dfc5388ec50ff8f8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u0430\u0432\u0430\u043b \u043d\u0430\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e, \u0441\u0442\u0440\u043e\u0433\u0438\u0435 CSP (Content Security Policy) \u0438, \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c. \u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441 \u0445\u043e\u0442\u044c \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u044c \u0440\u0430\u0437 \u043d\u0430 \u0434\u043d\u044e, \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043b\u0438, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0432\u0441\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0421\u0430\u043c SDK \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API:<\/p>\n<ul>\n<li>\n<p><code>render(el, opts)<\/code> \u2014 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0434\u043e\u0441\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u043b\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>renderList(el, opts)<\/code> \u2014 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0447\u0430\u0441\u0442\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c (\u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e)<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e API: <code>create<\/code>, <code>get<\/code>, <code>edit<\/code>, <code>delete<\/code>, <code>share<\/code> \u2014 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u043e\u0441\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e SDK \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0433:<\/p>\n<ul>\n<li>\n<p>\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u0438\u0445 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u043a\u0430 \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u043d\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u2014 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, BFF \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 Go, \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u043a\u0440\u044b\u0442\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dbb\/2a8\/260\/dbb2a826080af16fb2ff552b9640e96d.png\" width=\"1600\" height=\"635\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/dbb\/2a8\/260\/dbb2a826080af16fb2ff552b9640e96d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dbb\/2a8\/260\/dbb2a826080af16fb2ff552b9640e96d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041c\u044b \u043e\u0442\u0432\u0435\u0447\u0430\u043b\u0438 \u0437\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0437\u0430 \u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0442\u044b.<\/p>\n<h2>\u041d\u0443, \u0442\u0435\u043f\u0435\u0440\u044c-\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c?<\/h2>\n<p>\u0418\u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0440\u0430\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p>\u044f\u0434\u0440\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043e (Blocksuite, Hocuspocus, find-my-way);<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 (SaaS \u0447\u0435\u0440\u0435\u0437 \u0443\u043c\u043d\u044b\u0439 SDK).<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u041c\u043e\u0436\u043d\u043e, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u044b\u0434\u043e\u0445\u043d\u0443\u0442\u044c \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c IDE?<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0451 \u0440\u0430\u0437 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0445\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443 \u043d\u0430\u0441 \u0432\u044b\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0430\u0441\u044c:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f27\/a50\/908\/f27a509089d600f2cb755f6a11b17f13.png\" width=\"1600\" height=\"641\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/f27\/a50\/908\/f27a509089d600f2cb755f6a11b17f13.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f27\/a50\/908\/f27a509089d600f2cb755f6a11b17f13.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0430\u0448 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u2014 \u043d\u0435 \u043c\u043e\u043d\u043e\u043b\u0438\u0442. \u042d\u0442\u043e, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0442\u0440\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435, \u0445\u043e\u0442\u044c \u0438 \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435, \u0447\u0430\u0441\u0442\u0438:<\/p>\n<ol>\n<li>\n<p>BoardSDK \u2014 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 NPM-\u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>Application \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0436\u0438\u0432\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 iframe;<\/p>\n<\/li>\n<li>\n<p>BFF (Backend for Frontend) \u2014 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Node.js, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0438 API.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u041d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u0442\u0440\u0451\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0438\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0441\u0435\u0431\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043e\u0441\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f) \u0442\u0440\u0438 \u0440\u0430\u0437\u0430 \u0434\u043b\u044f \u0442\u0440\u0451\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0434\u0430 \u0438 \u0441\u043c\u044b\u0441\u043b\u0430 \u0432 \u044d\u0442\u043e\u043c \u043c\u0430\u043b\u043e.\u00a0<\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u043f\u043e\u0434\u0445\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434, \u043f\u043e\u0434\u0447\u0438\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u044e\u0449\u0438\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 NPM-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, BFF \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430.<\/p>\n<h2>\u0412\u044b\u0431\u043e\u0440 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430<\/h2>\n<p>\u041a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u044b, \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 FSD (Feature-Sliced Design). \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u00ab\u043d\u0430\u0442\u044f\u043d\u0435\u043c\u00bb \u0435\u0433\u043e \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<ul>\n<li>\n<p>BoardSDK? \u042d\u0442\u043e NPM-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0442\u0430\u043c \u043d\u0435\u0442 \u043d\u0438 \u00ab\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u00bb, \u043d\u0438 \u00ab\u0444\u0438\u0447\u00bb \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 Application? \u0414\u0430, \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u043e \u0432 \u043d\u0451\u043c \u0442\u043e\u0436\u0435 \u043d\u0435\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u00ab\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u00bb. \u042d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0443\u0436 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043d\u0430\u0448\u0438\u043c BFF \u043d\u0430 Node.js.<\/p>\n<\/li>\n<\/ul>\n<p>\u0413\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c FSD \u0438 \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430, \u043d\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043a\u0430\u043a \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u043e\u0433\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043b\u044f \u043d\u0435\u0451 \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c. \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043f\u0440\u043e\u0433\u0438\u0431\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f, \u0430 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c71\/d3a\/12c\/c71d3a12c174a4579556b02fa54a6a46.png\" width=\"1600\" height=\"857\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c71\/d3a\/12c\/c71d3a12c174a4579556b02fa54a6a46.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c71\/d3a\/12c\/c71d3a12c174a4579556b02fa54a6a46.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u043f\u0435\u0440\u0432\u043e\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 \u2014 Clean Architecture. \u041d\u043e \u043c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0435\u043f\u043e \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0435\u0451 \u043a\u0430\u043d\u043e\u043d\u0443, \u0430 \u0432\u0437\u044f\u043b\u0438 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u00ab\u0447\u0438\u0441\u0442\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b\u00bb:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u043e\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (Dependency Inversion).<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2014 LLM. \u0411\u0435\u0440\u0451\u043c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u2014 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0435\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e) \u2014 \u0438 \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u043e \u0418\u0418, \u0447\u0442\u043e\u0431\u044b \u00ab\u043e\u0431\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u00bb \u0438 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u043d\u0430\u0439\u0442\u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0438 \u0442\u043e\u0447\u043a\u0438 \u0440\u043e\u0441\u0442\u0430. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u043c. \u0418\u0418 \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u0442\u0432\u0430, \u0432\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u0436\u0451\u0441\u0442\u043a\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0440\u0430\u0432\u0438\u043b, \u0438 \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043b\u044e\u0431\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438. \u0422\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0439 \u0432\u0430\u043c \u0441\u043e\u0432\u0435\u0442, \u0434\u0435\u0440\u0436\u0438\u0442\u0435 \u0418\u0418 \u0432 \u0441\u0443\u043f\u0435\u0440\u043f\u043e\u0437\u0438\u0446\u0438\u0438: \u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0431\u044b\u0442\u044c \u0431\u0435\u0441\u043f\u0440\u0438\u0441\u0442\u0440\u0430\u0441\u0442\u043d\u044b\u043c \u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0431\u043e\u0440 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043a\u043e\u0433\u043e-\u0442\u043e. \u042d\u0442\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u043d\u0430\u0447\u0435 KV Cache \u0432\u0430\u0441 \u0437\u0430\u0431\u043e\u0440\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/395\/251\/30b\/39525130bab5b0882b10642b65edcb38.png\" width=\"1500\" height=\"854\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/395\/251\/30b\/39525130bab5b0882b10642b65edcb38.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/395\/251\/30b\/39525130bab5b0882b10642b65edcb38.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u0430 \u0441\u0445\u0435\u043c\u0435:<\/p>\n<ol>\n<li>\n<p>Entities \u2014 \u0431\u0438\u0437\u043d\u0435\u0441-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 (\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0434\u043e\u0441\u043a\u0430 \u0438 \u0442. \u0434.).<\/p>\n<\/li>\n<li>\n<p>Shared \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0430\u043f\u043a\u0430-\u043f\u043e\u043c\u043e\u0439\u043a\u0430, \u0430 \u043e\u0431\u0449\u0438\u0439 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0439 \u043a\u043e\u0434: \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442\u044b-\u0441\u0430\u0442\u0435\u043b\u043b\u0438\u0442\u044b (BoardSDK, Application, BFF), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u043e\u0434 \u0438\u0437 Shared \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0432\u043e\u044e, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u0443\u044e \u0434\u043b\u044f \u0438\u0445 \u0441\u0440\u0435\u0434\u044b, \u043b\u043e\u0433\u0438\u043a\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 Application \u0438\u043b\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0432 BFF).<\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 Clean Architecture, \u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b, \u0438 \u0441\u0442\u0430\u043b \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u043d\u0430\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430.<\/p>\n<h2>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?<\/h2>\n<p>\u0412\u044b\u0431\u0440\u0430\u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u00ab\u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c\u00bb Clean Architecture, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 buzzword \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 (<em>\u043a\u0430\u043a \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u0438\u043a\u0438, \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c<\/em>), \u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (DI) \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161: \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441, \u0434\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 (HTTP \u0438 gRPC)<\/h3>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c BoardService, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0434\u043e\u0441\u043a\u0430\u043c\u0438 (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0442. \u0434.). \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0438 \u0432 Application (\u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0431\u044d\u043a\u0435\u043d\u0434 \u043f\u043e HTTP), \u0438 \u0432 BFF (\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u043f\u043e gRPC).<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/70a\/92a\/17e\/70a92a17e9c48b2e540c733d98959bb6.png\" width=\"1600\" height=\"732\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/70a\/92a\/17e\/70a92a17e9c48b2e540c733d98959bb6.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/70a\/92a\/17e\/70a92a17e9c48b2e540c733d98959bb6.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437? \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<ol>\n<li>\n<p>\u0412 shared-\u0441\u043b\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 BoardService. \u041e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043d\u0438 \u043f\u0440\u043e HTTP, \u043d\u0438 \u043f\u0440\u043e gRPC. \u041e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u0435\u043d \u043d\u0435\u043a\u0438\u0439 API-provider, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<\/li>\n<li>\n<p>\u042d\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u043a\u0435\u043d \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0436\u0438\u0442 \u043a\u043b\u044e\u0447\u043e\u043c \u0432 DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f DI-\u043c\u0430\u0433\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0412 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443: \u00ab\u041a\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442 <code>BOARD_API_PROVIDER_TOKEN<\/code>, \u0432\u044b\u0434\u0430\u0439 \u0435\u043c\u0443 <code>BoardHttpProvider<\/code>\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0432 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430 \u043d\u0430\u0448\u0435\u0433\u043e BFF \u043d\u0430 Node.js \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u00ab\u0410 \u0437\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0434\u0430\u0442\u044c <code>BoardGrpcProvider<\/code>\u00bb.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a64\/34d\/507\/a6434d5079bd3cc867dd89032b66c8d1.png\" width=\"1600\" height=\"631\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a64\/34d\/507\/a6434d5079bd3cc867dd89032b66c8d1.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a64\/34d\/507\/a6434d5079bd3cc867dd89032b66c8d1.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c6b\/b06\/e04\/c6bb06e04ccf3eb73cd59313da8f238a.png\" width=\"1600\" height=\"714\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c6b\/b06\/e04\/c6bb06e04ccf3eb73cd59313da8f238a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c6b\/b06\/e04\/c6bb06e04ccf3eb73cd59313da8f238a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, BoardService \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u043c \u0438 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u043c. \u041c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u0440\u0435\u0434\u043e\u0439. \u042d\u0442\u043e \u0434\u0430\u043b\u043e \u043d\u0430\u043c \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0432 \u0434\u0430\u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439 (mock), \u043f\u043e\u043a\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0435\u0449\u0451 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0433\u043e\u0442\u043e\u0432\u044b.<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162: \u041f\u0440\u0430\u0432\u043e \u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0443, \u0438\u043b\u0438 \u041a\u0430\u043a \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u043e\u0442\u2026 \u0441\u0435\u0431\u044f \u0436\u0435<\/h3>\n<p>\u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0430\u043c\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u043d\u0430 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u0430 \u043d\u0435 \u043e\u0448\u0438\u0431\u043a\u0430, \u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u043d\u0435\u043f\u043e\u043c\u0435\u0440\u043d\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0435\u0451 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412\u044b\u0431\u0440\u0430\u0432 Blocksuite, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0438 \u0435\u0433\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a: \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 <a href=\"https:\/\/github.com\/lit\/lit\" rel=\"noopener noreferrer nofollow\">Lit<\/a>. \u0414\u043b\u044f \u044f\u0434\u0440\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041d\u043e \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0438\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0441\u0442\u0430\u0442\u044c \u0444\u0438\u0447\u0430\u043c\u0438, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c. \u0414\u043b\u044f \u043d\u0438\u0445 \u0443 \u043d\u0430\u0441 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/VKCOM\/VKUI\" rel=\"noopener noreferrer nofollow\">VKUI<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 React. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u041a\u0430\u043a \u043d\u0430\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043d\u043e \u0437\u0430\u0442\u0435\u043c &#171;\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c&#187; \u0435\u0451 \u043a Lit-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443? \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u044b\u043b \u0435\u0434\u0438\u043d\u044b\u0439, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e View-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043d \u043f\u0438\u0448\u0435\u0442 UI?\u00bb<\/p>\n<p>\u0422\u0443\u0442 \u044f \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b \u043f\u0440\u043e <a href=\"https:\/\/github.com\/tldraw\/signia\" rel=\"noopener noreferrer nofollow\">Signia<\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043f\u0440\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0435 TLDraw. \u042d\u0442\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u0430\u044f\/\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041e\u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0430\u0441\u044c \u043e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0442\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e clock-based \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0430\u043c\u0438 \u0438 \u044d\u043f\u043e\u0445\u0430\u043c\u0438. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0447\u0430\u0441\u0442\u043e\u0442\u043d\u044b\u043c\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u2014 \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430\u0448 \u0441\u043b\u0443\u0447\u0430\u0439 \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u043e\u0439. \u0418 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a-\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439, \u0447\u0442\u043e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0432\u044f\u0437\u0430\u0442\u044c Lit \u0438 React.<\/p>\n<p>\u041e\u0441\u043e\u0431\u043e\u0435 \u0434\u043e\u0432\u0435\u0440\u0438\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u0442\u043e, \u0447\u0442\u043e Signia \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Tldraw \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0439 \u0434\u043e\u0441\u043a\u0438. \u0417\u0430\u0434\u0430\u0447\u0438 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0442\u0435 \u0436\u0435 \ud83d\ude42<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u0449\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0440\u0438\u0441\u043a. \u041d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u043f\u043b\u0430\u043d \u00ab\u0411\u00bb. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u043b\u043e\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u043d\u0430\u0434 Signia \u0432 \u0432\u0438\u0434\u0435 Reactive API. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0448\u043d\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0438:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/531\/3cc\/e3e\/5313cce3e85603c056f793f968a62dbf.png\" width=\"940\" height=\"458\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/531\/3cc\/e3e\/5313cce3e85603c056f793f968a62dbf.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/531\/3cc\/e3e\/5313cce3e85603c056f793f968a62dbf.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u0430\u0448 \u0444\u0430\u0441\u0430\u0434 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 (reactive) \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 (reactive.computed) \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (reactive.query) \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0432\u0440\u043e\u0434\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443.<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0434\u043b\u044f Lit \u0438 React, \u0447\u0442\u043e\u0431\u044b \u00ab\u043f\u043e\u0434\u0440\u0443\u0436\u0438\u0442\u044c\u00bb \u043d\u0430\u0448\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 View-\u0441\u043b\u043e\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u044d\u0442\u0438\u043c API. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0444\u0430\u0441\u0430\u0434\u0430 \u0436\u0438\u043b\u0430 Signia. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0451 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">\/\/ \u041b\u0435\u043d\u0438\u0432\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 export const username = reactive('username', () =&gt; '');  \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 username export const greeting = reactive.computed(() =&gt; { \u00a0\u00a0const name = username(); \u00a0\u00a0return name ? Hi, ${name}! : ''; });<\/code><\/pre>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 View-\u0441\u043b\u043e\u044f\u043c\u0438:<\/p>\n<h4>\u0414\u043b\u044f React<\/h4>\n<p>\u041c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u00bb \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 <code>reactiveObserver<\/code>. \u0417\u0430\u0442\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0445\u0443\u043a <code>useBoardContext<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0438 \u0437\u0430\u0431\u0438\u0440\u0430\u043b\u0438 \u0438\u0437 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439.<\/p>\n<pre><code class=\"typescript\">\/\/ 1. \u0414\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c export const ShareAttentionWidget = reactiveObserver(() =&gt; {  \u00a0\u00a0\/\/ 2. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u00a0\u00a0const { useCases: { board } } = useBoardContext();  \u00a0\u00a0\/\/ 3. \u0427\u0438\u0442\u0430\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u00a0\u00a0if (!board.currentHasPublicAccess) { \u00a0\u00a0\u00a0\u00a0return null; \u00a0\u00a0} \u00a0return ( \u00a0\u00a0\u00a0\u00a0&lt;Card mode=\"shadow\" className={cn.host}&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u0439 \u0414\u043e\u0441\u043a\u0435 \u0435\u0441\u0442\u044c \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u00a0\u00a0\u00a0\u00a0&lt;\/Card&gt; \u00a0\u00a0); });<\/code><\/pre>\n<h4>\u0414\u043b\u044f Lit<\/h4>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043b\u0438 \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@reactiveCustomElement<\/code>, \u0430 \u0434\u043e\u0441\u0442\u0443\u043f \u043a DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435.<\/p>\n<pre><code class=\"typescript\">\/\/ 1. \u0414\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c @reactiveCustomElement(VK_COMMENTS_WIDGET) export class VkCommentsWidget extends BlocksuiteWidgetElement {  \u00a0\u00a0\/\/ 2. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DI-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u00a0\u00a0private boardThreads = useBoardContext(this).useCases.boardThread(); \u00a0\u00a0override render() {  \u00a0\u00a0\u00a0\u00a0\/\/ 3. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0447\u0438\u0442\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u00a0\u00a0\u00a0\u00a0const { data: threads } = this.boardThreads.getList(); \u00a0\u00a0\u00a0\u00a0const { draft, activeThreadId } = this.boardThreads;  \u00a0\u00a0\u00a0\u00a0\/\/ \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043c UI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e html-\u043b\u0438\u0442\u0435\u0440\u0430\u043b\u0430 Lit \u00a0\u00a0\u00a0\u00a0return html` \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"comments-container\"&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0${_someRenderLogic(draft, activeThreadId, threads)} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0`; \u00a0\u00a0} }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u044b\u043b\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f React \u0438\u043b\u0438 Lit \u043e\u043d \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.\u00a0<\/p>\n<p>\u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0430\u0441\u044c. \u0421 Signia \u0443 \u043d\u0430\u0441, \u0447\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u00ab\u043d\u0435 \u0441\u0440\u043e\u0441\u043b\u043e\u0441\u044c\u00bb: \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u043e\u0438\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 \u043f\u043b\u0430\u043d \u00ab\u0411\u00bb.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/54f\/9f3\/6f4\/54f9f36f4ff12e5a3a6ec59300f69a8b.png\" width=\"1494\" height=\"586\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/54f\/9f3\/6f4\/54f9f36f4ff12e5a3a6ec59300f69a8b.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/54f\/9f3\/6f4\/54f9f36f4ff12e5a3a6ec59300f69a8b.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Signia \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u043d\u0438 \u0438\u043b\u0438 \u043d\u0435\u0434\u0435\u043b\u0438, \u0432\u044b\u0447\u0438\u0449\u0430\u044f \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u0431\u044b \u0442\u0435\u0441\u043d\u043e \u0441 \u043d\u0435\u0439 \u0441\u0432\u044f\u0437\u0430\u043d\u0430. \u0410 \u0442\u0430\u043a \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0435\u0439 \u0436\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u043d\u044f\u043b\u043e \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u0430\u0440\u0443 \u043c\u0438\u043d\u0443\u0442 (<em>\u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u0430 <\/em>\ud83d\ude0f).<\/p>\n<p>\u0418 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u044b <a href=\"https:\/\/github.com\/reatom\/reatom\" rel=\"noopener noreferrer nofollow\">Reatom<\/a> \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u0451\u043b, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043d\u0430\u0433\u043e\u0442\u043e\u0432\u0435 \u043f\u043b\u0430\u043d \u00ab\u0412\u00bb: \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0435\u0439 <a href=\"https:\/\/github.com\/mobxjs\/mobx\" rel=\"noopener noreferrer nofollow\">MobX<\/a>.<\/p>\n<p>\u0426\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u2014 \u0432 \u043f\u0440\u0430\u0433\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438. \u041c\u044b \u043d\u0435 \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u0433\u0430\u0434\u0430\u0442\u044c \u0432\u0441\u0451 \u0438 \u0441\u0440\u0430\u0437\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0449\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u0440\u043e\u0441\u0442\u0430 \u0438, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0440\u0438\u0441\u043a\u0430: \u0442\u0435 \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u043b\u0438 \u0433\u0434\u0435 \u043c\u044b \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0443\u0432\u0435\u0440\u0435\u043d\u044b \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0422\u0430\u043c \u043c\u044b \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c <strong>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f<\/strong> \u2014 \u0431\u0443\u0434\u044c \u0442\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f Dependency Injection \u0438\u043b\u0438 \u0444\u0430\u0441\u0430\u0434 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043d\u0430\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, npm-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439).<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438\u00bb, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0451. \u0410 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0451\u0442 \u0432\u0440\u0435\u043c\u044f, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u0444\u0430\u0441\u0430\u0434\u043e\u043c.<\/p>\n<h3>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h3>\n<p>\u041a\u0430\u043a \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435?\u00a0<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c: \u043c\u044b \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u00ab\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439\u00bb \u0432 \u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435: \u0441 PNPM\/NPM-workspaces, NX \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0451 \u044d\u0442\u043e \u2014 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u043c\u043e\u0434\u043e\u0439\u00bb. \u041c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043f\u043b\u043e\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a9\/0e3\/7e9\/1a90e37e972b1a8dec21ba72ea2333c1.png\" width=\"1488\" height=\"640\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1a9\/0e3\/7e9\/1a90e37e972b1a8dec21ba72ea2333c1.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a9\/0e3\/7e9\/1a90e37e972b1a8dec21ba72ea2333c1.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u043e \u0443 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0435\u0441\u0442\u044c \u0446\u0435\u043d\u0430. \u041a\u043b\u044e\u0447\u043e\u043c \u043a \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0431\u044b\u043b\u0430 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430. \u041d\u0430\u043c \u0431\u044b\u043b\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0434, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430, \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0435 \u00ab\u043f\u0440\u043e\u0442\u0451\u043a\u00bb \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0412 \u043b\u0443\u0447\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0443\u043f\u0430\u043b\u043e \u0431\u044b \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412 \u0445\u0443\u0434\u0448\u0435\u043c \u2014 \u0432\u0441\u0451 \u0431\u044b \u0440\u0430\u0437\u043b\u0435\u0442\u0435\u043b\u043e\u0441\u044c \u0443\u0436\u0435 \u0432 \u0431\u043e\u044e.<\/p>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u043d\u0435\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0442\u0435\u043c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438 \u0447\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f. \u041c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0441\u0435\u0431\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0434\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u043e\u0435 FSD, \u0442\u0430\u043c \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0435\u043d\u0430 \u0438\u0437 \u00ab\u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u043b\u0438\u043d\u0442\u0435\u0440\u0430.\u00a0<\/p>\n<p>\u041d\u0430\u0448 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0434\u0438\u043a\u0430\u043b\u0435\u043d: \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0432\u043e\u0451 eslint-\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 <strong>\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u043b\u044e\u0431\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/strong> (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 npm deps). \u0427\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430: \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, UUID \u0438\u043b\u0438 \u043e\u0431\u0449\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 src\/entities:<\/p>\n<pre><code class=\"json\">{ \u00a0\u00a0\"target\": \"*\", \u00a0\u00a0\"allow\": [\"uuid\", \"src\/entities\/*\", \"src\/shared\/*\", \"...\"] }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u043b\u043e\u0435\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044f, \u0447\u0442\u043e \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a util) \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 (\u0432\u0440\u043e\u0434\u0435 framework \u0438\u043b\u0438 service). \u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (enforcing the dependency rule) \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0437\u0430\u043f\u0440\u0435\u0442\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0431\u0438\u0442\u044c\u044f \u043f\u043e \u0440\u0443\u043a\u0430\u043c \u043d\u0430 code review.<\/p>\n<pre><code class=\"json\">\/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0448\u0435\u0433\u043e shared-\u0441\u043b\u043e\u044f { \u00a0\u00a0\"target\": \"src\/shared\/*\", \u00a0\u00a0\"allow\": [...], \/\/ \u041e\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f shared \u00a0\u00a0\"restricts\": [ \u00a0\u00a0\u00a0\u00a0{              \/\/ \u0417\u0410\u041f\u0420\u0415\u0429\u0410\u0415\u041c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \"frameworks\"... \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"target\": \"src\/shared\/frameworks\/*\", \u00a0             \/\/ ...\u0438\u0437 \"utils\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"from\": \"src\/shared\/utils\/*\" \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0{  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0417\u0410\u041f\u0420\u0415\u0429\u0410\u0415\u041c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \"services\"... \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"target\": \"src\/shared\/services\/*\",  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ ...\u0438\u0437 \"utils\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"from\": \"src\/shared\/utils\/*\" \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0] }<\/code><\/pre>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u0436\u0430. \u041d\u0430\u0448\u0430 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0435 \u0432 Confluence, \u0430 \u0432 \u043a\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043c\u0438\u0442\u0435. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u0434 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u043c, \u0430 \u0441\u043b\u043e\u0438 \u2014 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>\u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u043b\u0438\u043d\u0442\u0435\u0440 \u2014 \u044d\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0434\u043e\u043e\u0446\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043f\u0440\u0438\u0447\u0451\u043c \u043a\u0430\u043a \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435. \u0418 \u0447\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435, \u0432\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u043d\u0443\u043b\u044f, \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/feature-sliced\/eslint-plugin-boundaries\" rel=\"noopener noreferrer nofollow\">eslint-plugin-boundaries<\/a> \u2014 \u043c\u043e\u0449\u043d\u0435\u0439\u0448\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u043b\u043e\u0451\u0432 (\u043a\u0442\u043e \u043a\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c);<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Igorkurepin\/eslint-plugin-project-structure\" rel=\"noopener noreferrer nofollow\">eslint-plugin-project-structure<\/a> \u2014 \u0434\u043b\u044f \u0436\u0451\u0441\u0442\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c \u0438 \u0438\u0445 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p><em>\u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0435\u0441\u0442\u044c <\/em><a href=\"https:\/\/habr.com\/ru\/companies\/psb\/articles\/905398\/\" rel=\"noopener noreferrer nofollow\"><em>\u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/em><\/a><em>, \u0433\u0434\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b \u044d\u0442\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e.<\/em><\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0414\u043e\u0441\u043a\u0430 v1.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0bf\/d98\/08c\/0bfd9808cf58f6e50f2284f8097661c7.png\" width=\"1600\" height=\"1057\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/0bf\/d98\/08c\/0bfd9808cf58f6e50f2284f8097661c7.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0bf\/d98\/08c\/0bfd9808cf58f6e50f2284f8097661c7.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u0412\u0435\u043b\u0438\u043a\u0438\u0439 \u043f\u043e\u0432\u043e\u0440\u043e\u0442<\/h2>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0442\u0430\u043a\u043e\u0439, \u043a\u0430\u043a\u043e\u0439 \u043c\u044b \u0435\u0451 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438: \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0431\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u00ab\u043b\u0438\u0446\u0430\u00bb \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 SDK \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b. \u041c\u044b \u0431\u044b\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u043e\u0439, \u0432\u0441\u0451 \u0448\u043b\u043e \u043f\u043e \u043f\u043b\u0430\u043d\u0443.<\/p>\n<p>\u0410 \u043f\u043e\u0442\u043e\u043c, \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u2026<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ec\/c94\/1fe\/0ecc941fe15ca46383a4e1fbe0b925c4.png\" width=\"1312\" height=\"736\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/0ec\/c94\/1fe\/0ecc941fe15ca46383a4e1fbe0b925c4.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ec\/c94\/1fe\/0ecc941fe15ca46383a4e1fbe0b925c4.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u2026\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043d\u0430 \u0431\u0443\u043a\u0432\u0443 \u00ab\u041c\u00bb \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0430 \u043e\u0431 \u0443\u0445\u043e\u0434\u0435 \u0438\u0437 \u0420\u043e\u0441\u0441\u0438\u0438.<\/p>\n<p>\u041a \u043d\u0430\u043c \u043f\u0440\u0438\u0431\u0435\u0436\u0430\u043b\u0430 \u043a\u0443\u0447\u0430 \u043b\u044e\u0434\u0435\u0439 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0441 \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c:\u00a0<\/p>\n<p>\u2014 \u0412\u044b \u0436\u0435 \u0434\u043e\u0441\u043a\u0443 \u0434\u0435\u043b\u0430\u0435\u0442\u0435! \u0413\u0434\u0435 \u043e\u043d\u0430? \u041a\u0430\u043a \u043d\u0430\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c?<\/p>\n<p>\u041c\u044b:\u00a0<\/p>\n<p>\u2014 \u0422\u0430\u043a \u0432\u043e\u0442 \u0436\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c SDK, \u0431\u0435\u0440\u0438\u0442\u0435, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0439\u0442\u0435.<\/p>\n<p>\u2014 \u041d\u0435-\u043d\u0435, \u043a\u0430\u043a\u043e\u0439 SDK? \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442, \u043a\u0443\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u042d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043d\u0430 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438.<\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e:<\/p>\n<ol>\n<li>\n<p>\u041c\u044b \u043d\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u043b\u0438 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API. \u041d\u0430\u0448 SDK \u0443\u0436\u0435 \u0443\u043c\u0435\u043b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0441\u043a\u0443, \u043d\u043e \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0432\u0440\u043e\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043e\u0441\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u043d\u0435 \u0438\u043c\u0435\u043b\u0438 \u0441\u0432\u043e\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043c\u043e\u0433\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u044e\u0431\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u0441\u0430\u043c\u0438 \u0441\u0442\u0430\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e \u0436\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0412\u0437\u044f\u043b\u0438 BoardSDK, \u00ab\u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u043b\u0438\u00bb VK ID \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u043e\u0434\u043d\u044f\u043b\u0438 \u0434\u043e\u043c\u0435\u043d\u044b (\u044d\u0442\u043e \u0437\u0430\u043d\u044f\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u0441\u0430\u043c\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430) \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 BoardSDK.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/acb\/42c\/7bd\/acb42c7bdb28ba53880e90668c07fcef.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/acb\/42c\/7bd\/acb42c7bdb28ba53880e90668c07fcef.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/acb\/42c\/7bd\/acb42c7bdb28ba53880e90668c07fcef.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0411\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043d\u0435\u0439 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u0438\u0437 SaaS-\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e VK \u0414\u043e\u0441\u043a\u0443.<\/p>\n<p>\u0420\u0435\u0441\u0451\u0440\u0447 \u043d\u0443\u0436\u0435\u043d \u043d\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0430\u043c\u0443\u044e \u043c\u043e\u0434\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0430 \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0431\u044b\u043b \u0433\u043e\u0442\u043e\u0432 \u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b, \u043a\u043e\u0433\u0434\u0430 \u0431\u0438\u0437\u043d\u0435\u0441-\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u0432\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0441 \u043d\u0443\u043b\u044f, \u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u0443\u0431\u0438\u043a\u043e\u0432 \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u044b\u043d\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<h2>\u041d\u044e\u0430\u043d\u0441\u044b \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438<\/h2>\n<p>\u041c\u044b \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0433\u0438\u0431\u043a\u0443\u044e, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. \u041d\u043e \u043e\u0434\u043d\u043e \u0434\u0435\u043b\u043e \u2014 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0430\u043c\u0430 \u043f\u0440\u0438\u0440\u043e\u0434\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441 \u043d\u0438\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c.<\/p>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0441 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0435\u0439 \u2014 \u044d\u0442\u043e \u043a\u0430\u043a \u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u0448\u0430\u0445\u043c\u0430\u0442\u044b \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439. \u041f\u0440\u0438\u0447\u0451\u043c \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0441 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0444\u043b\u0430\u0439\u043d, \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0442\u0430\u043c \u0444\u0438\u0433\u0443\u0440\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u2014 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0435\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442 \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u041c\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 \u2014 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u0443\u0442\u044c \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043d\u0435\u0440\u0432\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3e\/97c\/07d\/c3e97c07d1161bdbb3d0f80aab1d79f7.gif\" width=\"1000\" height=\"563\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3e\/97c\/07d\/c3e97c07d1161bdbb3d0f80aab1d79f7.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3e\/97c\/07d\/c3e97c07d1161bdbb3d0f80aab1d79f7.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043d\u044e\u0430\u043d\u0441 \u2014 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0412\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 local-first: \u043b\u044e\u0431\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a.<\/p>\n<ol>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 IndexedDB. \u0411\u043b\u0430\u0433\u043e, CRDT-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 Yjs \u0445\u0440\u0430\u043d\u044f\u0442 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0436\u0434\u0443 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 BroadcastChannel.<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435, \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0443\u043b\u0435\u0442\u0430\u044e\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 WebSocket \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4d5\/705\/97c\/4d570597c2c00a3851ce21e47f922da5.png\" width=\"1600\" height=\"888\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/4d5\/705\/97c\/4d570597c2c00a3851ce21e47f922da5.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4d5\/705\/97c\/4d570597c2c00a3851ce21e47f922da5.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0435\u0441\u044c \u0432\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/79d\/857\/87a\/79d85787a7a7de316fb511182de05576.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/79d\/857\/87a\/79d85787a7a7de316fb511182de05576.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/79d\/857\/87a\/79d85787a7a7de316fb511182de05576.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u043e \u0441\u0430\u043c\u044b\u0439 \u0432\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441 \u2014 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0423 \u043d\u0430\u0441 \u0438\u0445 \u0447\u0435\u0442\u044b\u0440\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435.<\/p>\n<ol>\n<li>\n<p><strong>AppState<\/strong>. \u042d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u041e\u0442\u043a\u0440\u044b\u0442\u0430 \u043b\u0438 \u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c, \u043a\u0430\u043a\u0430\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430 \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0437\u0434\u0435\u0441\u044c. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0438 \u0441 \u043a\u0435\u043c \u043d\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u043f\u043e\u0447\u0442\u0438 :)).<\/p>\n<\/li>\n<li>\n<p><strong>SessionState<\/strong>. \u041c\u044b \u0435\u0433\u043e \u0435\u0449\u0451 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c Global State. \u042d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043e\u0431\u0449\u0435\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438: \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043b\u0438 \u0442\u0430\u0439\u043c\u0435\u0440, \u043a\u0430\u043a\u043e\u0439 \u0444\u043e\u043d \u0443 \u0434\u043e\u0441\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043b\u0438 \u0440\u0435\u0436\u0438\u043c readOnly. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 Redis, \u043a\u043b\u0438\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u0431\u044d\u043a\u0435\u043d\u0434 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0440\u0430\u0432.<\/p>\n<\/li>\n<li>\n<p><strong>Y.Doc<\/strong>. \u042d\u0442\u043e CRDT-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0412\u0441\u0435 \u0444\u0438\u0433\u0443\u0440\u044b, \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u0442\u0435\u043a\u0441\u0442, \u0444\u0440\u0435\u0439\u043c\u044b \u2014 \u0432\u0441\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0421\u0435\u0440\u0434\u0446\u0435 \u043d\u0430\u0448\u0435\u0439 \u00ab\u0414\u043e\u0441\u043a\u0438\u00bb.<\/p>\n<\/li>\n<li>\n<p><strong>Y.Awareness<\/strong>. \u042d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 (\u043e\u0434\u0438\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c 10 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 10 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432). \u0417\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u00ab\u043d\u0435\u0432\u0430\u0436\u043d\u0430\u044f\u00bb \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u0432, \u0438\u043c\u0435\u043d\u0430 \u043d\u0430\u0434 \u043d\u0438\u043c\u0438, \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0443\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442. \u041e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2af\/3ed\/151\/2af3ed15170731d303009e6c47998fe0.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/2af\/3ed\/151\/2af3ed15170731d303009e6c47998fe0.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2af\/3ed\/151\/2af3ed15170731d303009e6c47998fe0.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0445\u0438\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u043f\u043b\u0435\u0442\u0435\u043d\u044b \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0448 BFF, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0434\u0438\u0440\u0438\u0436\u0451\u0440\u0430, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0438\u0445 \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<h2>\u041a\u0430\u043a \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c CRDT \u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u043a\u043e\u043b\u0435\u043d\u043e<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043b\u0430\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438, \u0432\u0435\u0440\u043d\u043e? \u0423\u0432\u044b, \u043a\u0430\u043a \u044f \u0441\u043a\u0430\u0437\u0430\u043b \u0440\u0430\u043d\u0435\u0435, CRDT \u043d\u0435 \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043d\u0430\u044f \u043f\u0443\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 CRDT-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u042d\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u0443\u0442\u044c \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043e\u043f\u044b\u0442\u0443.<\/p>\n<h3>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438\u043b\u0438 \u00ab\u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0449\u0438\u0435\u00bb \u0434\u0430\u043d\u043d\u044b\u0435<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0435, \u2014 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f mind map \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u0435\u043c <code>children<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0443\u0437\u043b\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/154\/c28\/0e9\/154c280e98b591c13449ed8edc95f298.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/154\/c28\/0e9\/154c280e98b591c13449ed8edc95f298.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/154\/c28\/0e9\/154c280e98b591c13449ed8edc95f298.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u00ab\u0410\u00bb \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0444\u043b\u0430\u0439\u043d \u0438 \u0446\u0435\u043b\u044b\u0439 \u0447\u0430\u0441 \u0443\u0441\u0435\u0440\u0434\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0443\u0437\u043b\u044b (children). \u0412 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u00ab\u0411\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u043d\u043b\u0430\u0439\u043d\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0443\u0437\u0435\u043b \u00abHoly\u00bb. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u00ab\u0410\u00bb \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u043d\u043b\u0430\u0439\u043d \u0438 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0442, \u0432\u0441\u0451 \u0447\u0442\u043e \u043e\u043d \u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0442\u0435\u0440\u044f\u043b\u043e\u0441\u044c \ud83d\ude40\u00a0<\/p>\n<p><strong>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e?\u00a0<\/strong><\/p>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f CRDT, \u0432\u0441\u0451 \u0447\u0435\u0441\u0442\u043d\u043e. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u00ab\u0410\u00bb \u0431\u0443\u0434\u0443\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0432 <code>children<\/code>, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432. \u041d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u0430.<\/p>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441 \u2014 \u0433\u043e\u2026 \u044d\u044d\u044d, \u043f\u043b\u043e\u0445\u043e\u0439: \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u0447\u0435\u0437\u043b\u0430 \u0441 \u0434\u043e\u0441\u043a\u0438. \u0418 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0431\u0443\u0434\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u0430\u0432.\u00a0<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0432 CRDT, \u0430 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/strong>: \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u043e\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0412\u043c\u0435\u0441\u0442\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u2014 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e ID. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043d\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438, \u0430 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u043c\u0438. \u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f, \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442? \u0410 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f (undo\/redo)? \u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0442\u0443\u043f\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0441\u044f \u0432 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Y.Array \u0441\u043b\u043e\u0436\u043d\u043e<\/h3>\n<p>\u0412 Yjs (\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445) \u0435\u0441\u0442\u044c \u0442\u0438\u043f <code>Y.Array<\/code>, \u0438 \u043e\u0447\u0435\u043d\u044c \u0432\u0435\u043b\u0438\u043a \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c JavaScript \u0432\u044b \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432. \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0433\u043e.<\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c\u0438 \u0432 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435, \u0433\u0434\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 (\u043e\u043d\u043b\u0430\u0439\u043d \u0438 \u043e\u0444\u0444\u043b\u0430\u0439\u043d) \u043c\u043e\u0433\u0443\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u2014 \u044d\u0442\u043e \u0430\u0434. \u0412\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435, \u0432\u0441\u0451 \u0435\u0449\u0451 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u043c\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a8\/6f2\/62c\/9a86f262ce2a5377c44a70752c0640a0.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/9a8\/6f2\/62c\/9a86f262ce2a5377c44a70752c0640a0.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a8\/6f2\/62c\/9a86f262ce2a5377c44a70752c0640a0.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/strong>: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u0442\u0438\u043f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445, append-only \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432. \u0412\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u0430\u0448\u0438 \u043b\u0443\u0447\u0448\u0438\u0435 \u0434\u0440\u0443\u0437\u044c\u044f \u2014 \u044d\u0442\u043e <code>Y.Map<\/code> \u0438\u043b\u0438 <code>Y.KeyVal<\/code>. \u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0435\u0435, \u0447\u0435\u043c \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c\u0438.<\/p>\n<h3>CRDT-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u043e \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f<\/h3>\n<p>CRDT \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u0442. \u041a\u0430\u0436\u0434\u043e\u0435 \u0432\u0430\u0448\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0435\u0433\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0435, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u041d\u043e \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u0435\u0443\u043c\u043e\u043b\u0438\u043c\u043e \u00ab\u043f\u0443\u0445\u043d\u0443\u0442\u044c\u00bb. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044d\u0442\u043e \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442\u044b, \u043f\u043e\u0442\u043e\u043c \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u044b, \u043f\u043e\u0442\u043e\u043c \u0441\u043e\u0442\u043d\u0438 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u043e\u0432. \u0412 Issues \u043d\u0430 GitHub \u0434\u043b\u044f Yjs \u0432\u0438\u0441\u0438\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e\u0442 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0440\u043e\u0441\u0441\u044f \u0434\u043e \u0433\u0438\u0433\u0430\u0431\u0430\u0439\u0442\u0430, \u0430 \u0432\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u043d\u043e \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u0440\u0438\u0447\u0435\u043c \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u0434\u0430\u0445\/\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430\u0445.<\/p>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/strong>: \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<ul>\n<li>\n<p><strong>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438<\/strong>. \u041b\u044e\u0431\u044b\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u0432 <code>doc.transact(() =&gt; { ... })<\/code>. \u042d\u0442\u043e \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0438\u0445 \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043a\u0430\u043a \u043e\u0434\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>Throttle \u0438 Debounce \u0432\u0430\u0448\u0438 \u043b\u0443\u0447\u0448\u0438\u0435 \u0434\u0440\u0443\u0437\u044c\u044f<\/strong>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 CRDT \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>mousemove<\/code> \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e (\u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u2014 \u0435\u0449\u0451 \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0448\u0430\u0433\u0438).<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0445\u0440\u0430\u043d\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/strong>. \u041d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0438\u0445 \u0432 \u043a\u043e\u0434\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0432\u0441\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0447\u0438\u0441\u0435\u043b \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u0437\u0430\u043f\u044f\u0442\u043e\u0439, \u0445\u0432\u0430\u0442\u0438\u0442 2-3 \u0437\u043d\u0430\u043a\u043e\u0432. \u041a\u0430\u0436\u0434\u043e\u0435 \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e\u0449\u0435<\/strong>. \u0427\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u0432\u0430\u0448\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0438\u0442\u044c \u0438 \u0442\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432 \u043d\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ae\/2c1\/da2\/5ae2c1da2c3236962ee4c6fff4d54e29.gif\" alt=\"\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439\" title=\"\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439\" width=\"800\" height=\"443\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ae\/2c1\/da2\/5ae2c1da2c3236962ee4c6fff4d54e29.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ae\/2c1\/da2\/5ae2c1da2c3236962ee4c6fff4d54e29.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0442\u043e\u0433\u043e:<\/p>\n<ul>\n<li>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043b\u043e\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0434\u0430\u043d\u043d\u044b\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 <code>Y.Array<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>YMap<\/code> \u0438 <code>YKeyVal<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0445\u0440\u0430\u043d\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0438\u0441\u043b\u0430 \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u0437\u0430\u043f\u044f\u0442\u043e\u0439).<\/p>\n<\/li>\n<li>\n<p>\u0411\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e\u0449\u0435 \ud83d\udc81\ud83c\udffb\u200d\u2642\ufe0f<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0431\u0430\u0448\u043a\u043e\u0439 backend<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u0438\u0437 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e VK \u0414\u043e\u0441\u043a\u0443, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u043e\u0441\u044c \u043a\u0440\u0430\u0442\u043d\u043e. \u0418 \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u044d\u0442\u043e:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b37\/3f6\/2a2\/b373f62a2bf985aa6dbb4462a765b5ae.png\" width=\"1426\" height=\"1164\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b37\/3f6\/2a2\/b373f62a2bf985aa6dbb4462a765b5ae.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b37\/3f6\/2a2\/b373f62a2bf985aa6dbb4462a765b5ae.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0423 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044f, \u043d\u043e \u043d\u0430 \u0432\u0441\u0435\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u0445 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b\u0441\u044f \u0431\u0443\u0440\u043d\u044b\u0439 \u0440\u043e\u0441\u0442, \u0432\u044b\u044f\u0432\u0438\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043d\u0435 \u0443\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c. \u041f\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0449\u0451 \u043c\u0435\u0442\u0440\u0438\u043a, \u0438 \u0441\u0442\u0430\u043b\u0438 \u0435\u0449\u0451 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p>\u0411\u044b\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0433\u0434\u0435-\u0442\u043e \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438, \u043d\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u0435\u0451 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0435 \u043c\u043e\u0433\u043b\u0438, \u0430 \u0441\u0442\u0440\u0435\u0441\u0441-\u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0430\u043d\u043e\u043c\u0430\u043b\u0438\u0439. \u041e\u0441\u0442\u0430\u0432\u0430\u043b\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431: \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u043e\u044e.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043f\u0438\u043a\u043e\u0432\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438\u0441\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c. \u0422\u043e\u0442, \u043a\u0442\u043e \u0443\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c Node.js, \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0437\u043d\u0430\u0435\u0442, \u0432 \u0447\u0451\u043c \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0434\u0432\u043e\u0445. \u0410 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f, \u043f\u043e\u044f\u0441\u043d\u044e: \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Chrome DevTools, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u00ab\u0435\u0434\u044f\u0442\u00bb \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043f\u0435\u0440\u0435\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u0442 \u0437\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 500 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u043e\u0432, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043b\u0438\u0431\u043e \u0432\u0438\u0441\u043d\u0443\u0442 \u043d\u0430\u043c\u0435\u0440\u0442\u0432\u043e, \u043b\u0438\u0431\u043e \u043f\u0430\u0434\u0430\u044e\u0442.<\/p>\n<p>\u041d\u0430\u0448\u0438\u043c \u0441\u043f\u0430\u0441\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b <a href=\"https:\/\/github.com\/discoveryjs\/cpupro\" rel=\"noopener noreferrer nofollow\">cpupro<\/a> \u043e\u0442 <a href=\"https:\/\/t.me\/gorshochekvarit\" rel=\"noopener noreferrer nofollow\">\u0420\u043e\u043c\u044b \u0414\u0432\u043e\u0440\u043d\u043e\u0432\u0430<\/a>. \u042d\u0442\u043e \u043e\u0444\u0438\u0433\u0435\u043d\u043d\u043e \u043a\u0440\u0443\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0434\u0430\u0436\u0435 \u0431\u0438\u0442\u044b\u0435.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/515\/d38\/a22\/515d38a22c931ef74dd35c785852c79a.png\" width=\"1600\" height=\"1230\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/515\/d38\/a22\/515d38a22c931ef74dd35c785852c79a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/515\/d38\/a22\/515d38a22c931ef74dd35c785852c79a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f44\/832\/6ee\/f448326ee26af789d6af9855a3baec79.gif\" width=\"800\" height=\"464\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f44\/832\/6ee\/f448326ee26af789d6af9855a3baec79.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f44\/832\/6ee\/f448326ee26af789d6af9855a3baec79.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435 \u0432 \u043a\u043e\u0434\u0435, \u0430 \u0432 \u043d\u0435\u0434\u043e\u0441\u043c\u043e\u0442\u0440\u0435. \u041c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 Hocuspocus \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 Redis, \u043d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u043b\u043e\u0445\u043e \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438.\u00a0<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0433\u0434\u0435-\u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0440\u0435\u0442\u0440\u043e. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0434\u043e\u0441\u043a\u0443. Kubernetes \u0434\u043b\u044f \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u00ab\u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u00bb \u0432\u0441\u0435\u0445 \u0440\u043e\u0432\u043d\u0435\u043d\u044c\u043a\u043e \u043f\u043e \u0432\u0441\u0435\u0439 \u0444\u0435\u0440\u043c\u0435.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/800\/cb6\/5eb\/800cb65ebddbdae655e7dbfe6ad91350.png\" width=\"1296\" height=\"1016\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/800\/cb6\/5eb\/800cb65ebddbdae655e7dbfe6ad91350.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/800\/cb6\/5eb\/800cb65ebddbdae655e7dbfe6ad91350.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435:<\/p>\n<ol>\n<li>\n<p>\u0427\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0430 \u043f\u043e\u0434\u0435 \u21161 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c. \u0415\u0433\u043e \u043f\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 Redis.<\/p>\n<\/li>\n<li>\n<p>Redis, \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u043a\u0430\u043a \u0448\u0438\u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (event bus), \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u0434\u0430\u043c (\u21162, \u21163, \u21164&#8230;), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0432\u0441\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 \u044d\u0442\u043e\u0442 \u043a\u0430\u043d\u0430\u043b \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0438\u0445 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u044d\u0442\u043e\u0439 \u0434\u043e\u0441\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0430 \u043f\u043e\u0434\u0435 \u21162 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435. \u0418 \u0446\u0438\u043a\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u041e\u0434\u0438\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u2014 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438. \u041d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u043e\u0439.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0430\u0431\u0441\u0443\u0440\u0434\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f: \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u043e\u0432, \u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0443\u0436\u0435. \u041f\u043e \u0441\u0443\u0442\u0438, \u043c\u044b \u0441\u0430\u043c\u0438 \u0441\u0435\u0431\u044f DDoS-\u043b\u0438.<\/p>\n<p>\u0412\u0438\u0448\u0435\u043d\u043a\u043e\u0439 \u043d\u0430 \u0442\u043e\u0440\u0442\u0435 \u0431\u044b\u043b\u0430 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043e\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 <code>Y.Awareness<\/code> (\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u0432). \u042d\u0442\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0447\u0430\u0441\u0442\u043e\u0442\u043d\u044b\u0435, \u043d\u043e \u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0436\u0435 \u0433\u043e\u043d\u044f\u043b\u0438\u0441\u044c \u0447\u0435\u0440\u0435\u0437 Redis, \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u00ab\u043f\u043e\u0434\u00bb \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c JS-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043d\u0430\u043f\u0440\u044f\u0433\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u0443\u0441\u043e\u0440\u0430.<\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439: \u0430 \u0437\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e \u0444\u0435\u0440\u043c\u0435? \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u0448\u043b\u0438 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0434\u043e\u0441\u043a\u0443, \u0442\u043e \u043f\u0443\u0441\u0442\u044c \u043e\u043d\u0438 \u0438 \u0441\u043e\u0431\u0435\u0440\u0443\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u043f\u043e\u0434\u0435 \ud83d\udc81\ud83c\udffb\u200d\u2642\ufe0f.<\/p>\n<h3>\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u0432\u043c\u0435\u0441\u0442\u0435<\/h3>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u2014 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Consistent_hashing\" rel=\"noopener noreferrer nofollow\">Consistent Hashing Ring<\/a>.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e43\/7d9\/b82\/e437d9b82151788399214760d03c7fdc.png\" width=\"1012\" height=\"760\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e43\/7d9\/b82\/e437d9b82151788399214760d03c7fdc.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e43\/7d9\/b82\/e437d9b82151788399214760d03c7fdc.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u0435 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442 \u0447\u0430\u0441\u043e\u0432, \u0433\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0447\u0438\u0441\u0435\u043b \u2014 \u043f\u043e\u0434\u044b. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0434\u043e\u0441\u043a\u0435 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c UID, \u043c\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0445\u0435\u0448 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e UID, \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0432 \u043a\u0430\u043a\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043d\u0430 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0435 \u043e\u043d \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442, \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043f\u043e\u0434 \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435. \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441 \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 UID \u0434\u043e\u0441\u043a\u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043f\u043e\u0434. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0448\u0438\u043b\u0438.<\/p>\n<p>\u041d\u043e \u0442\u0443\u0442 \u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0434\u0440\u0443\u0433\u0430\u044f. \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0444\u0435\u0440\u043c\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0438? \u041f\u043e\u0434\u044b \u0443\u0445\u043e\u0434\u044f\u0442, \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043d\u043e\u0432\u044b\u0435, \u00ab\u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u00bb \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0441\u043a\u0438\u0434\u0430\u0442\u044c \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430\u043c. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p>\u041c\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041a\u043e\u0433\u0434\u0430 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f, \u043e\u043d \u043f\u0438\u0448\u0435\u0442 \u0432 Redis \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435: \u00ab\u042f \u043f\u043e\u0434\u043d\u044f\u043b\u0441\u044f\u00bb. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435, \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u044b, \u0441\u043b\u0443\u0448\u0430\u044e\u0442 \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u044b \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u0441\u0432\u043e\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u0447\u0435\u0440\u0435\u0437 WebSocket: \u00ab\u041f\u0435\u0440\u0435\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u0441\u044c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0447\u0435\u0440\u0435\u0437 \u0425\u0425 \u043c\u0438\u043d\u0443\u0442\u00bb.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u044f \u0444\u0435\u0440\u043c\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043a\u043b\u0438\u0435\u043d\u0442\u044b, \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u0441\u044f \u0438, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Consistent Hashing, \u0441\u043e\u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0430. \u0414\u0430, \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0430\u0437\u0430\u043d\u044b, \u043d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0441\u0435\u0431\u044f \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u0443\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8bd\/d9c\/22b\/8bdd9c22be04389b5eb7dab0ddb24b69.png\" width=\"1600\" height=\"598\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8bd\/d9c\/22b\/8bdd9c22be04389b5eb7dab0ddb24b69.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8bd\/d9c\/22b\/8bdd9c22be04389b5eb7dab0ddb24b69.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u0412\u0435\u043b\u0438\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2014 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043e\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u0432 (<code>Y.Awareness<\/code>) \u2014 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0435\u0449\u0451 \u043f\u0440\u043e\u0449\u0435: \u0432\u044b\u043d\u0435\u0441\u043b\u0438 \u0435\u0451 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e, \u00ab\u043d\u0435\u0432\u0430\u0436\u043d\u0443\u044e\u00bb \u0444\u0435\u0440\u043c\u0443.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a40\/b26\/44f\/a40b2644f559a693f15908b4ceb88da0.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a40\/b26\/44f\/a40b2644f559a693f15908b4ceb88da0.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a40\/b26\/44f\/a40b2644f559a693f15908b4ceb88da0.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0434\u0432\u0430 WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u043e\u0434\u043d\u043e \u2014 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439, \u00ab\u0432\u0430\u0436\u043d\u043e\u0439\u00bb \u0444\u0435\u0440\u043c\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 (<code>Y.Doc<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u0432\u0442\u043e\u0440\u043e\u0435 \u2014 \u0441 \u0444\u0435\u0440\u043c\u043e\u0439 \u0434\u043b\u044f <code>Awareness<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430\u043c\u0438 \u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u0430\u044f \u0444\u0435\u0440\u043c\u0430 \u0443\u043f\u0430\u0434\u0451\u0442 \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0443\u0440\u0441\u043e\u0440\u044b \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u044f\u0434\u0440\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043e\u0442 \u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0445, \u043d\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u043d\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0431\u044b\u0442\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043f\u043e WebRTC \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 Awareness-\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043d\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 open-source \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043d\u0435 \u043d\u0430\u0448\u043b\u0438, \u0430 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0451 \u0431\u044b\u043b\u043e \u043d\u0435\u043a\u043e\u0433\u0434\u0430.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u0448 \u043f\u043b\u0430\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u0434 \u043f\u043e UID \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Consistent Hashing.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u043d\u043e\u0441\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 <code>YAwareness<\/code> \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0435\u0440\u043c\u0443.<\/p>\n<\/li>\n<li>\n<p>(\u0412 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435) \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c Redis pub\/sub \u043d\u0430 Redis Streams, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u044b \u043c\u043e\u0433\u043b\u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u0438\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u043e\u0442\u043b\u0438\u043c \u0438 \u0434\u0435\u0431\u0430\u0443\u043d\u0441\u0438\u043c \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u043c, \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>\u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u043d\u0430 \u0440\u0435\u0441\u0451\u0440\u0447 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0435\u0433\u043e \u0431\u044b\u043b\u043e \u043c\u0430\u043b\u043e, \u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u0430\u0432\u0430 \u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<p>\u041d\u043e \u043e\u0448\u0438\u0431\u043a\u0438 \u2014 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e. \u0421\u0442\u0440\u0430\u0448\u043d\u043e \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0441\u0451\u0440\u0447 \u2014 \u044d\u0442\u043e, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442 \u0440\u0438\u0441\u043a\u043e\u0432 \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u042d\u0442\u043e \u0442\u043e, \u043d\u0430 \u0447\u0451\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<p>\u041a\u0430\u043a \u0433\u043b\u0430\u0441\u0438\u0442 \u043d\u0430\u0440\u043e\u0434\u043d\u0430\u044f \u043c\u0443\u0434\u0440\u043e\u0441\u0442\u044c:<\/p>\n<p>\u00ab\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043f\u043e\u0442\u043e\u043c \u043f\u0438\u0448\u0438 \u043a\u043e\u0434\u00bb.<\/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\/933172\/\"> https:\/\/habr.com\/ru\/articles\/933172\/<\/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\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438\u043d, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u044f\u0442\u044c \u043b\u0435\u0442 \u044f \u0432\u043e\u0437\u0433\u043b\u0430\u0432\u043b\u044f\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 RnD. \u041c\u044b \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e Frontend-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0430 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0411\u042e, \u041f\u043e\u0447\u0442\u044b \u0438 \u041e\u0431\u043b\u0430\u043a\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430: \u043a\u0430\u043a \u043c\u044b \u0441 \u043d\u0443\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441 VK \u0414\u043e\u0441\u043a\u0430.<\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0443\u0441\u043f\u0435\u0445\u0430, \u0434\u0430 \u0438 \u043d\u0435 \u043f\u0440\u043e \u0414\u043e\u0441\u043a\u0443 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u0443\u044e. \u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0432 \u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0435\u0439\u0447\u0430\u0441. \u042d\u0442\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u043f\u043e \u0441\u0443\u0442\u0438, \u0441\u0442\u0430\u0440\u0442\u0430\u043f \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0442\u0435\u0431\u044f \u0441\u0436\u0430\u0442\u044b\u0435 \u0441\u0440\u043e\u043a\u0438, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0434\u0435\u0434\u043b\u0430\u0439\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438, \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0442\u0435\u0431\u044f.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u043e\u0439 \u043f\u0443\u0442\u044c \u043c\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u0441 \u043d\u0443\u043b\u044f \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u041f\u043e\u0447\u0435\u043c\u0443 \u0440\u0435\u0441\u0451\u0440\u0447 \u0432\u0430\u0436\u043d\u0435\u0435 \u043a\u043e\u0434\u0430, \u043a\u0430\u043a \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0436\u0438\u0442\u044c \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u0443\u044e \u0441\u043c\u0435\u043d\u0443 \u0431\u0438\u0437\u043d\u0435\u0441-\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043c\u044b \u0438 \u0442\u043e\u0447\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c \u0432\u044b \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0441 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<h2>\u041d\u0430\u0447\u0430\u043b\u043e<\/h2>\n<p>\u0412\u0441\u0451 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u0451\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430 \u0438 \u0441\u043a\u0430\u0437\u0430\u043b: \u00ab\u041a\u043e\u0441\u0442\u044f, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u0441\u043a\u0430\u00bb. \u041a \u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0434\u0430\u0432\u043d\u043e \u043d\u0430\u0437\u0440\u0435\u043b\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u0435 \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0434\u043b\u044f VK Workspace. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u043a\u0430\u043f\u043b\u0435\u0439 \u0441\u0442\u0430\u043b \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u043e\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u0423 \u043d\u0438\u0445 \u0431\u044b\u043b \u0436\u0451\u0441\u0442\u043a\u0438\u0439 \u0434\u0435\u0434\u043b\u0430\u0439\u043d \u2014 1 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f. \u0410 \u043d\u0430 \u0434\u0432\u043e\u0440\u0435 \u0441\u0442\u043e\u044f\u043b \u043c\u0430\u0440\u0442. \u041e\u043f\u044b\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u0431\u044b\u043b\u043e. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u044f \u00ab\u0442\u0440\u043e\u0433\u0430\u043b\u00bb Canvas \u043b\u0435\u0442 \u0434\u0435\u0441\u044f\u0442\u044c \u043d\u0430\u0437\u0430\u0434. \u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0442\u044c\u0441\u044f \u0431\u044b\u043b\u043e \u043d\u0435\u043b\u044c\u0437\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0442 \u043d\u0430\u0441 \u0437\u0430\u0432\u0438\u0441\u0435\u043b \u0443\u0441\u043f\u0435\u0445 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u043d\u0438\u044f, \u043d\u043e \u0438 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u0434\u0441\u0442\u0443\u043f\u0438\u0442\u044c\u0441\u044f \u043a \u0437\u0430\u0434\u0430\u0447\u0435? \u041d\u0435 \u043f\u0430\u043d\u0438\u043a\u043e\u0432\u0430\u0442\u044c, \u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e \u0441\u0431\u043e\u0440\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c, \u0447\u0442\u043e \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434 \u00ab\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u0441\u043a\u0430\u00bb. \u041a\u043e\u043f\u043d\u0443\u0432, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0442\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0438\u043b\u0438\u0441\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><\/figure>\n<ol>\n<li>\n<p><strong>\u00ab\u0414\u043e\u0441\u043a\u0430\u00bb<\/strong>. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c: \u0444\u0438\u0433\u0443\u0440\u044b, \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440\u044b, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u042d\u0442\u043e \u044f\u0434\u0440\u043e, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u043e\u0441\u043a\u043e\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0410 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 Workspace \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u0438 \u0435\u0449\u0451 \u043e\u0434\u043d\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435: \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c local-first.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f<\/strong>. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u0445\u043e\u0442\u0435\u043b \u043d\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0430 \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u044d\u0442\u0438\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h2>\u0414\u0432\u0430 \u043f\u0443\u0442\u0438<\/h2>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u0434\u043e\u0441\u043a\u0443? \u0414\u0443\u043c\u0430\u044e, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442 \u00ab\u043d\u0435\u0442\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0436\u0435 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 VK, \u0441\u043e\u0431\u0440\u0430\u0442\u044c (\u0432 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0441\u0440\u043e\u043a\u0438) \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e. \u0418 \u0445\u043e\u0442\u044c \u043c\u044b \u0440\u0435\u0431\u044f\u0442\u0430 \u043d\u0435 \u0433\u043b\u0443\u043f\u044b\u0435, \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0442\u0440\u0435\u0437\u0432\u043e \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438: in-house \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u2014 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c, \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043a\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u043a open source. \u041d\u0430 \u0440\u044b\u043d\u043a\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u044f \u0432\u044b\u0434\u0435\u043b\u0438\u043b \u0442\u0440\u0438:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0443 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0438\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u043b\u044e\u0431\u043e\u0439 GPT \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442 \u043b\u0443\u0447\u0448\u0435,<em> \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/em> :]. \u0423\u043f\u043e\u043c\u044f\u043d\u0443 \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430\u043c \u043d\u0430 GitHub, \u0438\u043d\u0430\u0447\u0435 \u00ab\u0432\u0430\u0448\u00bb \u0432\u044b\u0431\u043e\u0440 \u2014 ExcaliDraw. \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u0438 \u0441\u0430\u043c\u044b\u0439 \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0439, \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u00ab\u0447\u0451\u0440\u043d\u0430\u044f \u043a\u043e\u0440\u043e\u0431\u043a\u0430\u00bb: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c CSS. \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u044f\u0434\u0440\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p><strong>\u041f\u043e\u043c\u043d\u0438\u0442\u0435: \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b. \u0424\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c.<\/strong><\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u043e\u043a\u043e\u043b\u043e \u043f\u043e\u043b\u0443\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e Proof of Concept \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 ExcaliDraw, Tldraw \u0438 Blocksuite. \u041c\u044b \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0443\u043f\u044b\u0432\u0430\u043b\u0438 \u043a\u043e\u0434, \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0444\u0438\u0447\u0438, \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 TLDraw \u0440\u0435\u043d\u0434\u0435\u0440 \u0431\u044b\u043b \u043d\u0430 SVG, \u0438 \u043f\u043e \u043d\u0430\u0448\u0438\u043c \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0430\u043c \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0440\u0435\u043a \u043f\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0435\u0433\u043e \u043d\u0430 Canvas.<\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u043b\u0438 UX-\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435: \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0438 \u0434\u0430\u043b\u0438 \u0438\u043c \u00ab\u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c\u00bb \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0446\u0435\u043d\u0438\u043b\u0438, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u0430 \u043a\u0430\u043a \u0434\u0435\u043b\u0430 \u0441 \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0440\u0430\u0431\u043e\u0442\u043e\u0439? \u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0435\u0439? \u0411\u044d\u043a\u0435\u043d\u0434\u043e\u043c?<\/p>\n<ul>\n<li>\n<p>ExcaliDraw:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0447\u0435\u0440\u0435\u0437 WebSocket [<a href=\"https:\/\/vertexaisearch.cloud.google.com\/grounding-api-redirect\/AUZIYQHio1iTnRbtSj2RfDJI2k5x3-QF18X7EN1-dKEIq_ih3E6Kn4XzhOXtWtp3T2x5SvNaNxRyOVChfVt3EkPfssLNOMMf89AhzXK0qInMS7F3OAePsO7-avfm-Bp-736pMRTUfT8EfdnjtnW9Y5zl2nWy0A3mmQ==\" rel=\"noopener noreferrer nofollow\">1<\/a>], \u043a\u043e\u0433\u0434\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u043d\u043e\u0441\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043b\u0438\u0431\u043e \u0432\u0441\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u0446\u0435\u043d\u0443, \u043b\u0438\u0431\u043e \u0434\u0435\u043b\u044c\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0421\u0435\u0440\u0432\u0435\u0440 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u0441\u0435\u0441\u0441\u0438\u0438. \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u00ablast-write-wins\u00bb (\u043a\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u0442\u043e\u0442 \u0438 \u043f\u0440\u0430\u0432).<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e. \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u0441\u044b\u043b\u043e\u043c \u00ab\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438 \u0445\u043e\u0441\u0442\u0438\u0442\u0435 \u0441\u0430\u043c\u0438\u00bb.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Tldraw:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 @tldraw\/sync.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 Docker-\u043e\u0431\u0440\u0430\u0437, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Cloudflare Durable Objects.\u00a0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Blocksuite:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f<\/strong>. \u0410\u0432\u0442\u043e\u0440\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043a\u0430\u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u044f\u0434\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432\u043e\u043a\u0440\u0443\u0433 CRDT \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Yjs. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 Blocksuite \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f local-first \u0438 \u0430\u043f\u0440\u0438\u043e\u0440\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0444\u043b\u0430\u0439\u043d-\u0440\u0435\u0436\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong>. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Rust. \u041d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Yjs, \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \ud83d\ude42<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u0447\u0442\u043e \u0438 ExcaliDraw, \u0438 Tldraw, \u043f\u043e \u0441\u0443\u0442\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0440\u0438\u0441\u043a: \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0439\u0434\u0451\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0436\u0434\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0442 \u043a\u043e\u0433\u043e.<\/p>\n<p>\u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f Blocksuite \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Yjs. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u042d\u0442\u043e, \u0434\u0435-\u0444\u0430\u043a\u0442\u043e, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0412\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0446\u0435\u043b\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430: \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0442\u043e\u043d\u043d\u044b \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u043d\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u043e\u0434 ExcaliDraw \u0438\u043b\u0438 Tldraw, \u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0441 \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 CRDT \u0438 Yjs \u2014 \u0435\u0441\u0442\u044c.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u0431\u044b\u043b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 (CRDT), \u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0437\u0440\u0435\u043b\u043e\u0439, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0441\u0436\u0430\u0442\u044b\u0435 \u0441\u0440\u043e\u043a\u0438, \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0430\u044e\u0449\u0438\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u043c.<\/p>\n<p>\u270d\ufe0f\u0412\u0410\u0416\u041d\u041e: \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0443 ExcaliDraw \u0438 Tldraw \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Yjs, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u0444\u0438\u0447\u0430 \u00ab\u0441\u0431\u043e\u043a\u0443\u00bb.<\/p>\n<h2>CRDT&#8230; CRDT&#8230; \u0427\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435?<\/h2>\n<p>CRDT (Conflict-free Replicated Data Type) \u2014 \u044d\u0442\u043e \u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0443 \u0432\u0441\u0435\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u0427\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435?<\/p>\n<p><strong>\u0411\u0435\u0437 CRDT<\/strong> \u043c\u044b \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0446\u0435\u043b\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0438 \u043f\u043e\u0442\u0435\u0440\u044f \u0434\u0430\u043d\u043d\u044b\u0445 (\u0433\u043e\u043d\u043a\u0438);<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043c\u0435\u043d\u044b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 offline-\u0440\u0435\u0436\u0438\u043c\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442;<\/p>\n<\/li>\n<li>\n<p>\u00ab\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u00bb \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0430, \u043d\u043e \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f CRDT, \u0442\u043e \u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0440\u043e\u0441\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0445\u0440\u0443\u043f\u043a\u043e\u0441\u0442\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c: \u0435\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435. \u041d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438, \u0442\u0430\u043a \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0451 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c WebSocket, \u0432\u0432\u043e\u0434\u044f\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438, \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c. \u0410 \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0433\u043e\u043d\u043a\u0438, \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442. \u042d\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u044f\u043c\u043e\u0435 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u044f \u0438 \u043e\u0444\u0444\u043b\u0430\u0439\u043d, \u0442\u043e \u0431\u0435\u0437 CRDT \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n<p>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 CRDT:<\/p>\n<ul>\n<li>\n<p>\u200b\u200b\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043a\u0430\u043a \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a \u0438 offline;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043c\u0435\u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 CRDT-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 (Yjs, Logo \u0438 \u0434\u0440\u0443\u0433\u0438\u0435) \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 local-first. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u044c \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043f\u0440\u0438\u0447\u0451\u043c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438 \u0441\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u043e \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u043c\u0435\u0447\u0442\u0430\u044e\u0442, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>\u0414\u0430, CRDT \u0440\u0435\u0448\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043f\u043b\u0430\u0441\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043d\u043e \u0432\u0437\u0430\u043c\u0435\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043a\u0430\u043a \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 state-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 (\u043d\u043e, \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0432 \u043d\u043e\u0433\u0443, \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0438\u0436\u0435).<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0430 \u0440\u0435\u0441\u0451\u0440\u0447, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u00ab\u0434\u043e\u0441\u043a\u0430\u00bb \u2014 \u0435\u0441\u0442\u044c, Canvas API;<\/p>\n<\/li>\n<li>\n<p>\u00ab\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00bb \u2014 \u0435\u0441\u0442\u044c, CRDT (Yjs).<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0441\u0451 \u043e\u0442\u043b\u0438\u0447\u043d\u043e. \u041d\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f Blocksuite \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Rust.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0443\u043c\u0435\u0435\u0442 \u0432 Go \u0438 Node.js, \u0434\u0430\u0436\u0435 \u0432 Perl, \u043d\u043e \u0441 Rust \u043c\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u041f\u0440\u0438\u0442\u0430\u0449\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0434 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0438 \u0443 \u043a\u043e\u0433\u043e \u043d\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u044b, \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0435 \u043c\u0438\u043d\u044b \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.\u00a0<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0441\u0442\u0430\u0432\u043a\u0430 \u043d\u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 Yjs \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u043e\u043f\u0440\u0430\u0432\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0431\u044f. \u041c\u044b \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u043e\u0442 Blocksuite. \u041c\u044b \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>\u041d\u0430\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0441\u0442\u0430\u043b <a href=\"https:\/\/github.com\/ueberdosis\/hocuspocus\" rel=\"noopener noreferrer nofollow\">Hocuspocus<\/a> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 open-source \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f Yjs \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <a href=\"https:\/\/github.com\/ueberdosis\/tiptap\" rel=\"noopener noreferrer nofollow\">Tiptap<\/a> (\u043a\u0440\u0443\u0442\u043e\u0439 \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440), \u0430 \u043e\u043d \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 NodeJS, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430.<\/p>\n<p>Hocuspocus \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0442\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0434\u043b\u044f WebSocket, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044f \u043d\u0430\u0448\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u043e \u043e\u043d \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c HTTP-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c. \u041d\u0430\u043c \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043d\u0430\u0448 \u0441\u0442\u0435\u043a \u0442\u0440\u0435\u0442\u0438\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u0438 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 HTTP-\u0440\u043e\u0443\u0442\u0435\u0440 <a href=\"https:\/\/github.com\/delvedor\/find-my-way\" rel=\"noopener noreferrer nofollow\">find-my-way<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/fastify\/fastify\" rel=\"noopener noreferrer nofollow\">Fastify<\/a> \u0438 <a href=\"https:\/\/github.com\/restify\/node-restify\" rel=\"noopener noreferrer nofollow\">Restify<\/a>. \u041e\u043d \u043d\u0435 \u0442\u0430\u0449\u0438\u043b \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043b Hocuspocus.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0430\u0437\u043b \u0441\u043b\u043e\u0436\u0438\u043b\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b:<\/p>\n<ol>\n<li>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442: Blocksuite (Canvas + CRDT\/Yjs) + Hocuspocus Provider.<\/p>\n<\/li>\n<li>\n<p>\u0411\u044d\u043a\u0435\u043d\u0434: Hocuspocus Server (WebSocket + Yjs) + find-my-way (HTTP-\u0440\u043e\u0443\u0442\u0438\u043d\u0433).<\/p>\n<\/li>\n<\/ol>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f, \u0438\u043b\u0438 \u041a\u0430\u043a \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c?<\/h3>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0440\u044f\u0434 \u0436\u0451\u0441\u0442\u043a\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438<\/strong>. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u2014 \u0441\u0432\u043e\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0441\u0432\u043e\u0438 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0444\u0438\u0447 \u0438 \u0444\u0438\u043a\u0441\u043e\u0432<\/strong>. \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u0431\u0430\u0433 \u0438\u043b\u0438 \u0432\u044b\u043a\u0430\u0442\u0438\u043b\u0438<\/p>\n<\/li>\n<\/ul>\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-473584","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/473584","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=473584"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/473584\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=473584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=473584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=473584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}