{"id":498835,"date":"2026-10-15T20:08:02","date_gmt":"2026-10-15T17:08:02","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=498835"},"modified":"2026-10-15T20:08:02","modified_gmt":"2026-10-15T17:08:02","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=498835","title":{"rendered":"Specify \u2014 open-source Framer \u043d\u0430 \u0441\u043f\u0435\u043a\u0430\u0445"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u042f \u043f\u0440\u0438\u043d\u0451\u0441 <a href=\"https:\/\/specifyui.com\/\" rel=\"noopener nofollow\">Specify<\/a> \u2014 open-source \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043a\u0430\u043a\u00a0Framer, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u00a0\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u00a0\u0431\u0435\u0437\u00a0\u0447\u0451\u0440\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 AI \u043f\u043e\u0434\u00a0\u043a\u0430\u043f\u043e\u0442\u043e\u043c.<\/p>\n<p>\u0418\u0437\u00a0\u043a\u043e\u0440\u043e\u0431\u043a\u0438 Specify \u0443\u043c\u0435\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c PWA (SPA) \u043d\u0430\u00a0Svelte, \u0441\u00a0\u0431\u0440\u043e\u043d\u0435\u0431\u043e\u0439\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432\u00a0\u043b\u0438\u0444\u0442\u0435, \u043d\u0430\u00a0\u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0435, \u043f\u0440\u0438\u00a0\u0431\u0435\u043b\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u0430\u0445 \u0438\u00a0\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u00a0\u0441\u0442\u0430\u043d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0415\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u00a0open-source \u0431\u044d\u043a\u0435\u043d\u0434-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 Appwrite, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f\u00a0\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0438\u0436\u0435.<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u044f \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b<\/h3>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435, \u044f\u00a0\u043d\u0435\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043c\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u043f\u044b\u0442 \u0432\u00a0\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0430\u00a0\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u044e \u044f \u0434\u043b\u044f\u00a0\u0434\u0443\u0448\u0438).<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 3 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u0443\u00a0\u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0432\u0435\u0441\u044c \u0446\u0438\u043a\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 15-20 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u044f \u043c\u043e\u0433 \u0441\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u0439\u0442, \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043d\u0430\u0442\u044f\u043d\u0443\u0442\u044c HTML c\u00a0CSS \u043d\u0430\u00a0CMS, \u0442\u043e\u00a0\u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u00a0\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a \u0441\u00a0\u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438 \u0438\u00a0\u0442.\u0434.<\/p>\n<p>\u042f \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e\u00a0\u0440\u0443\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438\u00a0\u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u0437\u00a0\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u00a0\u043a\u043e\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0442. \u0418 \u044f\u00a0\u043d\u0430\u0447\u0430\u043b \u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u043e\u00a0\u0441\u0443\u0442\u0438, \u0441\u0432\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 Framer. \u0417\u0430 3 \u0433\u043e\u0434\u0430 \u044f\u00a0\u043f\u0440\u043e\u0448\u0435\u043b \u043f\u0443\u0442\u044c \u043e\u0442\u00a0\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u00a0\u043a\u043e\u0434 (\u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 JSON-\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f) \u2014 \u0434\u043e\u00a0\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.<\/p>\n<p>\u042f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u043d\u043e\u00a0\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0430\u00a0\u044d\u0442\u043e \u043d\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u0417\u0430\u0442\u043e \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e\u00a0\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c MVP \u0431\u0435\u0437\u00a0\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 IDE \u0434\u043b\u044f\u00a0\u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f DX.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f Specify, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u00a0\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432\u00a0\u043e\u0434\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Specify<\/h3>\n<p>Specify \u2014\u00a0\u044d\u0442\u043e \u043d\u0435\u00a0\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438 \u043d\u0435\u00a0\u0431\u0438\u043b\u0434\u0435\u0440, \u0445\u043e\u0442\u044f \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430\u00a0\u043e\u0434\u043d\u043e \u0438\u00a0\u0434\u0440\u0443\u0433\u043e\u0435. \u042d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438\u00a0\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 (\u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0442\u043e\u0440) \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u00a0\u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u042f \u0434\u0435\u043b\u0430\u043b \u0435\u0433\u043e \u0434\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u043e\u00a0\u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u00a0\u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c \u0438\u00a0\u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0438\u0433\u0440\u0430\u0442\u044c \u0432\u00a0\u0441\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043c\u0435\u0436\u0434\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434.<\/p>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0435\u0441\u043b\u0438 \u0442\u044b\u00a0\u0435\u0449\u0451 \u0437\u0434\u0435\u0441\u044c, Specify \u2014 \u044d\u0442\u043e \u043d\u0435\u00a0\u0431\u043e\u043b\u044c\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u2014 \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u044f \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u0437 Figma.<\/p>\n<\/li>\n<li>\n<p>IDE \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c: \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (HMR).<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0440\u0443\u043a\u0430\u043c\u0438 \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e AI \u0438\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 Google Stitch (\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c Skill).<\/p>\n<\/li>\n<\/ol>\n<p>\u041b\u0443\u0447\u0448\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0435\u043c \u0441\u0442\u043e \u0440\u0430\u0437 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6ad0dba294d2580d55dc88a1\" data-style=\"\" id=\"6ad0dba294d2580d55dc88a1\" width=\"\" data-habr-games=\"\"><\/div>\n<p>(\u0421\u043b\u0435\u0432\u0430 YAML-\u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u043e\u0434 \u043d\u0438\u043c Svelte-\u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.)<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c Specify, \u043f\u0440\u043e\u0432\u0435\u0434\u0443 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438 \u0441 Figma.<\/p>\n<h3>\u0421\u0442\u0438\u043b\u0438<\/h3>\n<p>\u0412 Specify \u0432 \u043f\u0430\u043f\u043a\u0435 <code>specs\/<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>tokens.yaml<\/code> \u2014 \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a Figma Variables. \u0412\u00a0<code>specs\/components\/<\/code> \u2014 YAML-\u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u00a0<code>specs\/screens\/<\/code> \u2014 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0423\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0438 (<code>frame<\/code>, <code>text<\/code>, <code>image<\/code> \u0438 \u0442.\u0434.), \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u2014 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c \u0438 \u043f\u043e\u0447\u0442\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 Figma: <\/p>\n<ul>\n<li>\n<p><code>pos<\/code> \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Position<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/8e\/32\/ae\/8e32ae5d1f94af3ff63b02e3f55d974e.png\" width=\"1324\" height=\"408\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/8e\/32\/ae\/8e32ae5d1f94af3ff63b02e3f55d974e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/8e\/32\/ae\/8e32ae5d1f94af3ff63b02e3f55d974e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ul>\n<li>\n<p><code>lay<\/code> \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Auto Layout<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/0b\/bb\/8a\/0bbb8a3f0b079a865ebd3db21d984c62.png\" width=\"1324\" height=\"904\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/0b\/bb\/8a\/0bbb8a3f0b079a865ebd3db21d984c62.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/0b\/bb\/8a\/0bbb8a3f0b079a865ebd3db21d984c62.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ul>\n<li>\n<p><code>vis<\/code> \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Appearance<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/f2\/87\/ef\/f287efc42e6719178a4dc207ace77d74.png\" width=\"1324\" height=\"402\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/f2\/87\/ef\/f287efc42e6719178a4dc207ace77d74.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/f2\/87\/ef\/f287efc42e6719178a4dc207ace77d74.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ul>\n<li>\n<p><code>txt<\/code> \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Typography<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/70\/11\/05\/7011059404e1fdab0f805224c0031a1c.png\" width=\"1324\" height=\"444\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/70\/11\/05\/7011059404e1fdab0f805224c0031a1c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/70\/11\/05\/7011059404e1fdab0f805224c0031a1c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ul>\n<li>\n<p><code>fill<\/code>, <code>stroke<\/code>, <code>shadow<\/code>, <code>blur<\/code> \u2014 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"yaml\">styles:  lay: column                 # Auto Layout \u2014 Flow: Vertical  lay-width: fill-container   # \u0422\u044f\u043d\u0435\u043c \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443  lay-align-h: center         # \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438  lay-align-v: center         # \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper\"><\/span><\/a><\/div><\/pre>\n<p>\u0412 Figma \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 Specify \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438, \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a \u0432\u00a0CSS:<\/p>\n<ul>\n<li>\n<p><code>hover<\/code> \u2014 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><code>focus<\/code> \u2014 \u0444\u043e\u043a\u0443\u0441 \u0432 \u043f\u043e\u043b\u0435 \u0438\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p><code>pressed<\/code> \u2014 \u043a\u043b\u0438\u043a\/\u043d\u0430\u0436\u0430\u0442\u0438\u0435<\/p>\n<\/li>\n<li>\n<p><code>disabled<\/code> \u2014 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p><code>selected<\/code> \u2014 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435: <code>hover<\/code>, <code>focus<\/code>, <code>pressed<\/code>, <code>disabled<\/code>)<\/p>\n<\/li>\n<li>\n<p><code>valid<\/code> \u2014 \u043f\u043e\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e (\u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438)<\/p>\n<\/li>\n<li>\n<p><code>invalid<\/code> \u2014 \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e (\u0442\u043e\u0436\u0435 \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438).<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"yaml\">styles:  fill: \"#F5F5F5\"  hover:    fill: \"#EBEBEB\"    pressed:  fill: \"#E0E0E0\"    focus:  stroke:        - color: white          weight: 1          position: inside        - color: blue          weight: 2          position: outside    invalid:  stroke:        - color: red          weight: 2          position: outside<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><code>props<\/code> \u2014 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043d\u0430\u0440\u0443\u0436\u0438 (\u043a\u0430\u043a \u0432 Figma).<\/p>\n<\/li>\n<li>\n<p><code>state<\/code> \u2014 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><code>stores<\/code> \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u00a0\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u00a0\u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><code>logic<\/code> \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u0439 \u043a\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n<\/li>\n<li>\n<p><code>data<\/code> \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u00a0\u0431\u044d\u043a\u0435\u043d\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0442\u0430\u043a \u0436\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u043e <code>props<\/code> \u2014 <code>path<\/code> \u0438 <code>params<\/code> (\u043e \u043d\u0438\u0445 <a href=\"https:\/\/specifyui.com\/docs\/screens\" rel=\"noopener nofollow\">\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>).<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"yaml\">button:  props:             label: Text                       # \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c props  layers:    - text:        content: \"{{ props.label }}\"  # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 props<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c props:<\/p>\n<pre><code class=\"yaml\">demo:  path: \/demo  layers:    - c.button:        props:  label: \u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043c\u0435\u043d\u044f<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<h3>\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0438 \u0446\u0438\u043a\u043b\u044b<\/h3>\n<p><code>cond-if<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e.<\/p>\n<pre><code class=\"yaml\">demo:  path: \/demo  state:    count: 0    min: -10    max: 10  layers:    - text:        content: \"\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043b\u0430\u0439\u043a\u043e\u0432: {{ state.count }}\"    - c.button:        # \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 state.count \u0431\u043e\u043b\u044c\u0448\u0435 state.min        cond-if: \"{{ state.count &gt; state.min }}\"        props:          label: \ud83d\udc4e        on-click:                                               set-state:            count: \"{{ state.count - 1 }}\"    - c.button:        # \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 state.count \u043c\u0435\u043d\u044c\u0448\u0435 state.max        cond-if: \"{{ state.count &lt; state.max }}\"        props:          label: \ud83d\udc4d        on-click:                                               set-state:            count: \"{{ state.count + 1 }}\"<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0426\u0438\u043a\u043b\u044b \u0440\u0430\u0437\u043c\u043d\u043e\u0436\u0430\u044e\u0442 \u0441\u043b\u043e\u0439 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"yaml\">demo:  path: \/demo  state:    isAnnually: false  data:    pricing:                        # \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u0430\u043d\u043d\u044b\u0445      - id: 1        title: Free        monthly: 0        annually: 0      - id: 2        title: Pro        monthly: 100        annually: 80      - id: 3        title: Max        monthly: 200        annually: 150  layers:    - frame:        for: item in data.pricing  # \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0446\u0438\u043a\u043b, \u044d\u0442\u043e\u0442 frame \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435        key: item.id               # \u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0434\u0438\u0444\u0444\u0430 \u0432 DOM        layers:          - text:            content: \"{{ item.title }}\" # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435          - text:              content: \"\u0426\u0435\u043d\u0430: {{ state.isAnnually ? item.annually : item.monthly }} \u20bd\" # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0446\u0435\u043d\u0443 \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e state.isAnnually<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<h3>\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h3>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433 Interactions \u0438\u0437 Figma. \u0421\u043e\u0431\u044b\u0442\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>on-click<\/code> \u2014 \u043a\u043b\u0438\u043a.<\/p>\n<\/li>\n<li>\n<p><code>on-mount<\/code> \/ <code>on-unmount<\/code> \u2014 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\/\u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f.<\/p>\n<\/li>\n<li>\n<p><code>on-change<\/code> \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0434\u043b\u044f \u0441\u043b\u043e\u0451\u0432 <code>field<\/code> \u0438 <code>text<\/code>).<\/p>\n<\/li>\n<li>\n<p><code>on-submit<\/code> \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<\/li>\n<li>\n<p><code>on-keydown<\/code> \u2014 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>set-state<\/code> \u2014 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c state.<\/p>\n<\/li>\n<li>\n<p><code>set-props<\/code> \u2014 \u0434\u043b\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0441\u00a0\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 props (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432\u00a0<a href=\"https:\/\/specifyui.com\/docs\/events\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>).<\/p>\n<\/li>\n<li>\n<p><code>navigate-to<\/code> \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0440\u0430\u043d (\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439) \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><code>navigate-back<\/code> \u2014 \u043d\u0430\u0437\u0430\u0434.<\/p>\n<\/li>\n<li>\n<p><code>set-notification<\/code> \u2014 \u0441\u043d\u0435\u043a\u0431\u0430\u0440.<\/p>\n<\/li>\n<li>\n<p><code>post-data<\/code> \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0432 Appwrite.<\/p>\n<\/li>\n<li>\n<p><code>run<\/code> \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043e\u0442 <code>console.log()<\/code> \u0434\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0432\u043e\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u0442\u043e\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><code>submit<\/code> \/ <code>reset<\/code> \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\/\u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434<\/h3>\n<p>\u041d\u0435 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>slider-md<\/code> \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>createSlider<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0437\u0430\u0445\u0432\u0430\u0442\u043e\u043c \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 <code>value<\/code>.<\/p>\n<p>Specify \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"yaml\">screenName:  path: \/demo  logic:    - fnName  # \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437 src\/logic  stores:    - cart    # \u0421\u0442\u043e\u0440 \u043a\u043e\u0440\u0437\u0438\u043d\u044b \u0438\u0437 src\/stores  on-keydown:    - key: Control+S      run: \"{{ logic.fnName(stores.cart.list) }}\" # \u0412\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 Control+S    layers:    - text:        content: \"\u0412 \u043a\u043e\u0440\u0437\u0438\u043d\u0435: {{ stores.cart.list.length }}\" # \u0412\u044b\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0432\u0430\u0440\u043e\u0432    - c.button:        props:          label: \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c            on-click:              run: \"{{ stores.cart.add({ name: '\u042d\u0441\u043f\u0440\u0435\u0441\u0441\u043e', price: 150 }) }}\" # \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0442\u043e\u0432\u0430\u0440<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 Appwrite<\/h3>\n<h4>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e Appwrite<\/h4>\n<p>\u042d\u0442\u043e open-source \u0431\u044d\u043a\u0435\u043d\u0434, \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0451\u043c VPS, \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 WordPress. \u042e\u0437\u0435\u0440\u0444\u0440\u0435\u043d\u0434\u043b\u0438, \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0441\u0430\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u0442 SSL \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043c\u0435\u043d\u043e\u0432. \u041e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0432 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 API, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 MongoDB \u0438 PostgreSQL. \u0422\u044f\u043d\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/appwrite\/realtime-1-million\/\" rel=\"noopener nofollow\">\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a<\/a>, \u0433\u0434\u0435 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439. \u041f\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0435: VPS \u0434\u043e\u0440\u043e\u0436\u0435 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430, \u043d\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0445\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u0430\u0439\u0442\u044b.<\/p>\n<h4>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 (get-data)<\/h4>\n<p>\u041d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 Appwrite SDK. \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0435\u0448\u0435\u043c, \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 \u043a\u0435\u0448\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u044b \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0411\u0414 \u2014 \u0441\u0430\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442.  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0435. \u0427\u0435\u0440\u0435\u0437 <code>get-data<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0431\u0430\u0437\u044b, \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u043c\u0430\u043d\u0434 \u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f Realtime (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e WebSocket, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u043c <code>realtime<\/code>) \u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b (\u0444\u043b\u0430\u0433 <code>infinite-scroll<\/code>). <a href=\"https:\/\/specifyui.com\/docs\/data\" rel=\"noopener nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<h4>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (post-data)<\/h4>\n<p>\u0422\u043e\u0436\u0435 \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 SDK. \u0412 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0435 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0430 \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0435\u0442\u044c \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 Appwrite. \u0421\u043e\u0437\u0434\u0430\u0451\u0442, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442, \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0411\u0414. \u0412\u0441\u0451, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 Storage. <a href=\"https:\/\/specifyui.com\/docs\/data\" rel=\"noopener nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<h3>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c<\/h3>\n<p>Specify \u043d\u0435 \u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0435\u043a. \u0422\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438\u0434\u0451\u0442 \u0447\u0435\u0440\u0435\u0437 Vite-\u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435:<\/p>\n<ul>\n<li>\n<p><strong>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 Vite-\u043f\u043b\u0430\u0433\u0438\u043d<\/strong> \u0438 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043b\u044e\u0431\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a: React, Vue, Svelte, Solid \u2014 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c DSL<\/strong> \u043f\u043e\u0434 \u0441\u0432\u043e\u0439 \u0431\u044d\u043a\u0435\u043d\u0434: \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 Appwrite, \u0430 Supabase, Firebase, \u0441\u0432\u043e\u0439 REST \u0438\u043b\u0438 GraphQL \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b <code>get-data<\/code> \/ <code>post-data<\/code> \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u043a\u0430\u043a \u0441 \u0440\u043e\u0434\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b<\/h3>\n<ol>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\/\u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>P.S. \u0415\u0441\u043b\u0438 \u0442\u0435\u0431\u0435 \u043e\u0442\u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0441\u044f Specify \u0438 \u0442\u044b \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 (\u043a\u043e\u0434, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0434\u0438\u0437\u0430\u0439\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u2014 \u043f\u0438\u0448\u0438 \u043d\u0430 <a href=\"mailto:kov@lenko.email\" rel=\"noopener nofollow\">kov@lenko.email<\/a>. \u0422\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0444\u0438\u0434\u0431\u0435\u043a\u0443 \u0438 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430\u043c \u043d\u0430 <a href=\"https:\/\/github.com\/Redigen\/specify-starter\" rel=\"noopener nofollow\">GitHub<\/a>.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1094938\/\">https:\/\/habr.com\/ru\/articles\/1094938\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!\u042f \u043f\u0440\u0438\u043d\u0451\u0441 Specify \u2014 open-source \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043a\u0430\u043a\u00a0Framer, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u00a0\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u00a0\u0431\u0435\u0437\u00a0\u0447\u0451\u0440\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 AI \u043f\u043e\u0434\u00a0\u043a\u0430\u043f\u043e\u0442\u043e\u043c.\u0418\u0437\u00a0\u043a\u043e\u0440\u043e\u0431\u043a\u0438 Specify \u0443\u043c\u0435\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c PWA (SPA) \u043d\u0430\u00a0Svelte, \u0441\u00a0\u0431\u0440\u043e\u043d\u0435\u0431\u043e\u0439\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432\u00a0\u043b\u0438\u0444\u0442\u0435, \u043d\u0430\u00a0\u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0435, \u043f\u0440\u0438\u00a0\u0431\u0435\u043b\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u0430\u0445 \u0438\u00a0\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u00a0\u0441\u0442\u0430\u043d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0415\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u00a0open-source \u0431\u044d\u043a\u0435\u043d\u0434-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 Appwrite, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f\u00a0\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0438\u0436\u0435.\u0417\u0430\u0447\u0435\u043c \u044f \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0412\u043e\u043e\u0431\u0449\u0435, \u044f\u00a0\u043d\u0435\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043c\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u043f\u044b\u0442 \u0432\u00a0\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0430\u00a0\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u044e \u044f \u0434\u043b\u044f\u00a0\u0434\u0443\u0448\u0438).\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 3 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u0443\u00a0\u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0432\u0435\u0441\u044c \u0446\u0438\u043a\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 15-20 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u044f \u043c\u043e\u0433 \u0441\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u0439\u0442, \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043d\u0430\u0442\u044f\u043d\u0443\u0442\u044c HTML c\u00a0CSS \u043d\u0430\u00a0CMS, \u0442\u043e\u00a0\u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u00a0\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a \u0441\u00a0\u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438 \u0438\u00a0\u0442.\u0434.\u042f \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e\u00a0\u0440\u0443\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438\u00a0\u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u0437\u00a0\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u00a0\u043a\u043e\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0442. \u0418 \u044f\u00a0\u043d\u0430\u0447\u0430\u043b \u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u043e\u00a0\u0441\u0443\u0442\u0438, \u0441\u0432\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 Framer. \u0417\u0430 3 \u0433\u043e\u0434\u0430 \u044f\u00a0\u043f\u0440\u043e\u0448\u0435\u043b \u043f\u0443\u0442\u044c \u043e\u0442\u00a0\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u00a0\u043a\u043e\u0434 (\u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 JSON-\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f) \u2014 \u0434\u043e\u00a0\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.\u042f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u043d\u043e\u00a0\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0430\u00a0\u044d\u0442\u043e \u043d\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u0417\u0430\u0442\u043e \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e\u00a0\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c MVP \u0431\u0435\u0437\u00a0\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 IDE \u0434\u043b\u044f\u00a0\u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f DX.\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f Specify, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u00a0\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432\u00a0\u043e\u0434\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SpecifySpecify \u2014\u00a0\u044d\u0442\u043e \u043d\u0435\u00a0\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438 \u043d\u0435\u00a0\u0431\u0438\u043b\u0434\u0435\u0440, \u0445\u043e\u0442\u044f \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430\u00a0\u043e\u0434\u043d\u043e \u0438\u00a0\u0434\u0440\u0443\u0433\u043e\u0435. \u042d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438\u00a0\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 (\u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0442\u043e\u0440) \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u00a0\u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u042f \u0434\u0435\u043b\u0430\u043b \u0435\u0433\u043e \u0434\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u043e\u00a0\u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u00a0\u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c \u0438\u00a0\u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0438\u0433\u0440\u0430\u0442\u044c \u0432\u00a0\u0441\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043c\u0435\u0436\u0434\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434.\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0435\u0441\u043b\u0438 \u0442\u044b\u00a0\u0435\u0449\u0451 \u0437\u0434\u0435\u0441\u044c, Specify \u2014 \u044d\u0442\u043e \u043d\u0435\u00a0\u0431\u043e\u043b\u044c\u043d\u043e:\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u2014 \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u044f \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u0437 Figma.IDE \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c: \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.\u041b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (HMR).\u041d\u0435 \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0440\u0443\u043a\u0430\u043c\u0438 \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e AI \u0438\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 Google Stitch (\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c Skill).\u041b\u0443\u0447\u0448\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0435\u043c \u0441\u0442\u043e \u0440\u0430\u0437 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c:(\u0421\u043b\u0435\u0432\u0430 YAML-\u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u043e\u0434 \u043d\u0438\u043c Svelte-\u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043f\u0440\u0430\u0432\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.)\u0427\u0442\u043e\u0431\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c Specify, \u043f\u0440\u043e\u0432\u0435\u0434\u0443 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438 \u0441 Figma.\u0421\u0442\u0438\u043b\u0438\u0412 Specify \u0432 \u043f\u0430\u043f\u043a\u0435 specs\/ \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b tokens.yaml \u2014 \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a Figma Variables. \u0412\u00a0specs\/components\/ \u2014 YAML-\u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u00a0specs\/screens\/ \u2014 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0423\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0438 (frame, text, image \u0438 \u0442.\u0434.), \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u2014 \u0441\u0442\u0438\u043b\u0438.\u0421\u0442\u0438\u043b\u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c \u0438 \u043f\u043e\u0447\u0442\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 Figma: pos \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Positionlay \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Auto Layoutvis \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Appearancetxt \u2014 \u0441\u0435\u043a\u0446\u0438\u044f Typographyfill, stroke, shadow, blur \u2014 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432.\u041f\u0440\u0438\u043c\u0435\u0440:styles:  lay: column                 # Auto Layout \u2014 Flow: Vertical  lay-width: fill-container   # \u0422\u044f\u043d\u0435\u043c \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443  lay-align-h: center         # \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438  lay-align-v: center         # \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438\u0412 Figma \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 Specify \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438, \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a \u0432\u00a0CSS:hover \u2014 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430focus \u2014 \u0444\u043e\u043a\u0443\u0441 \u0432 \u043f\u043e\u043b\u0435 \u0438\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044bpressed \u2014 \u043a\u043b\u0438\u043a\/\u043d\u0430\u0436\u0430\u0442\u0438\u0435disabled \u2014 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442selected \u2014 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435: hover, focus, pressed, disabled)valid \u2014 \u043f\u043e\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e (\u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438)invalid \u2014 \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e (\u0442\u043e\u0436\u0435 \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438).\u041f\u0440\u0438\u043c\u0435\u0440:styles:  fill: &#171;#F5F5F5&#187;  hover:    fill: &#171;#EBEBEB&#187;    pressed:  fill: &#171;#E0E0E0&#187;    focus:  stroke:        &#8212; color: white          weight: 1          position: inside        &#8212; color: blue          weight: 2          position: outside    invalid:  stroke:        &#8212; color: red          weight: 2          position: outside\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c:props \u2014 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043d\u0430\u0440\u0443\u0436\u0438 (\u043a\u0430\u043a \u0432 Figma).state \u2014 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.stores \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u00a0\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u00a0\u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.logic \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u0439 \u043a\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.data \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u00a0\u0431\u044d\u043a\u0435\u043d\u0434\u0430.\u0423 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0442\u0430\u043a \u0436\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u043e props \u2014 path \u0438 params (\u043e \u043d\u0438\u0445 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438).\u041f\u0440\u0438\u043c\u0435\u0440:button:  props:             label: Text                       # \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c props  layers:    &#8212; text:        content: &#171;{{ props.label }}&#187;  # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 props\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c props:demo:  path: \/demo  layers:    &#8212; c.button:        props:  label: \u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043c\u0435\u043d\u044f\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0438 \u0446\u0438\u043a\u043b\u044bcond-if \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e.demo:  path: \/demo  state:    count: 0    min: -10    max: 10  layers:    &#8212; text:        content: &#171;\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043b\u0430\u0439\u043a\u043e\u0432: {{ state.count }}&#187;    &#8212; c.button:        # \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 state.count \u0431\u043e\u043b\u044c\u0448\u0435 state.min        cond-if: &#171;{{ state.count &gt; state.min }}&#187;        props:          label: \ud83d\udc4e        on-click:                                               set-state:            count: &#171;{{ state.count &#8212; 1 }}&#187;    &#8212; c.button:        # \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 state.count \u043c\u0435\u043d\u044c\u0448\u0435 state.max        cond-if: &#171;{{ state.count &lt; state.max }}&#187;        props:          label: \ud83d\udc4d        on-click:                                               set-state:            count: &#171;{{ state.count + 1 }}&#187;\u0426\u0438\u043a\u043b\u044b \u0440\u0430\u0437\u043c\u043d\u043e\u0436\u0430\u044e\u0442 \u0441\u043b\u043e\u0439 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0434\u0430\u043d\u043d\u044b\u0445:demo:  path: \/demo  state:    isAnnually: false  data:    pricing:                        # \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u0430\u043d\u043d\u044b\u0445      &#8212; id: 1        title: Free        monthly: 0        annually: 0      &#8212; id: 2        title: Pro        monthly: 100        annually: 80      &#8212; id: 3        title: Max        monthly: 200        annually: 150  layers:    &#8212; frame:        for: item in data.pricing  # \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0446\u0438\u043a\u043b, \u044d\u0442\u043e\u0442 frame \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435        key: item.id               # \u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0434\u0438\u0444\u0444\u0430 \u0432 DOM        layers:          &#8212; text:            content: &#171;{{ item.title }}&#187; # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435          &#8212; text:              content: &#171;\u0426\u0435\u043d\u0430: {{ state.isAnnually ? item.annually : item.monthly }} \u20bd&#187; # \u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0446\u0435\u043d\u0443 \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e state.isAnnually\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u0410\u043d\u0430\u043b\u043e\u0433 Interactions \u0438\u0437 Figma. \u0421\u043e\u0431\u044b\u0442\u0438\u044f:on-click \u2014 \u043a\u043b\u0438\u043a.on-mount \/ on-unmount \u2014 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\/\u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u044f.on-change \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0434\u043b\u044f \u0441\u043b\u043e\u0451\u0432 field \u0438 text).on-submit \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b.on-keydown \u2014 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438.\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:set-state \u2014 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c state.set-props \u2014 \u0434\u043b\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0441\u00a0\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 props (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438).navigate-to \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0440\u0430\u043d (\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439) \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443.navigate-back \u2014 \u043d\u0430\u0437\u0430\u0434.set-notification \u2014 \u0441\u043d\u0435\u043a\u0431\u0430\u0440.post-data \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0432 Appwrite.run \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043e\u0442 console.log() \u0434\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0432\u043e\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u0442\u043e\u0440\u0430.submit \/ reset \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\/\u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443.\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434\u041d\u0435 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 slider-md \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f createSlider, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0437\u0430\u0445\u0432\u0430\u0442\u043e\u043c \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 value.Specify \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434:screenName:  path: \/demo  logic:    &#8212; fnName  # \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437 src\/logic  stores:    &#8212; cart    # \u0421\u0442\u043e\u0440 \u043a\u043e\u0440\u0437\u0438\u043d\u044b \u0438\u0437 src\/stores  on-keydown:    &#8212; key: Control+S      run: &#171;{{ logic.fnName(stores.cart.list) }}&#187; # \u0412\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 Control+S    layers:    &#8212; text:        content: &#171;\u0412 \u043a\u043e\u0440\u0437\u0438\u043d\u0435: {{ stores.cart.list.length }}&#187; # \u0412\u044b\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0432\u0430\u0440\u043e\u0432    &#8212; c.button:        props:          label: \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c            on-click:              run: &#171;{{ stores.cart.add({ name: &#8216;\u042d\u0441\u043f\u0440\u0435\u0441\u0441\u043e&#8217;, price: 150 }) }}&#187; # \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0442\u043e\u0432\u0430\u0440\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 Appwrite\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e Appwrite\u042d\u0442\u043e open-source \u0431\u044d\u043a\u0435\u043d\u0434, \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0451\u043c VPS, \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 WordPress. \u042e\u0437\u0435\u0440\u0444\u0440\u0435\u043d\u0434\u043b\u0438, \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0441\u0430\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u0442 SSL \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043c\u0435\u043d\u043e\u0432. \u041e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0432 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 API, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 MongoDB \u0438 PostgreSQL. \u0422\u044f\u043d\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0435\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a, \u0433\u0434\u0435 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 WebSocket-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439. \u041f\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0435: VPS \u0434\u043e\u0440\u043e\u0436\u0435 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430, \u043d\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0445\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u0430\u0439\u0442\u044b.\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 (get-data)\u041d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 Appwrite SDK. \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0435\u0448\u0435\u043c, \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 \u043a\u0435\u0448\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u044b \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0411\u0414 \u2014 \u0441\u0430\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442.  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0435. \u0427\u0435\u0440\u0435\u0437 get-data \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0431\u0430\u0437\u044b, \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u043c\u0430\u043d\u0434 \u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f Realtime (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e WebSocket, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u043c realtime) \u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b (\u0444\u043b\u0430\u0433 infinite-scroll). \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (post-data)\u0422\u043e\u0436\u0435 \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 SDK. \u0412 \u043e\u0444\u0444\u043b\u0430\u0439\u043d\u0435 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0430 \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0435\u0442\u044c \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 Appwrite. \u0421\u043e\u0437\u0434\u0430\u0451\u0442, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442, \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0411\u0414. \u0412\u0441\u0451, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 Storage. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044cSpecify \u043d\u0435 \u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0435\u043a. \u0422\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438\u0434\u0451\u0442 \u0447\u0435\u0440\u0435\u0437 Vite-\u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435:\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 Vite-\u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043b\u044e\u0431\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a: React, Vue, Svelte, Solid \u2014 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e.\u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c DSL \u043f\u043e\u0434 \u0441\u0432\u043e\u0439 \u0431\u044d\u043a\u0435\u043d\u0434: \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 Appwrite, \u0430 Supabase, Firebase, \u0441\u0432\u043e\u0439 REST \u0438\u043b\u0438 GraphQL \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b get-data \/ post-data \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u043a\u0430\u043a \u0441 \u0440\u043e\u0434\u043d\u044b\u043c\u0438.\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\/\u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.\u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.P.S. \u0415\u0441\u043b\u0438 \u0442\u0435\u0431\u0435 \u043e\u0442\u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0441\u044f Specify \u0438 \u0442\u044b \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 (\u043a\u043e\u0434, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0434\u0438\u0437\u0430\u0439\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u2014 \u043f\u0438\u0448\u0438 \u043d\u0430 kov@lenko.email. \u0422\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0444\u0438\u0434\u0431\u0435\u043a\u0443 \u0438 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430\u043c \u043d\u0430 GitHub.\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1094938\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-498835","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/498835","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=498835"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/498835\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=498835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=498835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=498835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}