{"id":65289,"date":"2024-06-05T19:31:50","date_gmt":"2024-06-05T16:01:50","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/"},"modified":"2024-06-05T19:31:50","modified_gmt":"2024-06-05T16:01:50","slug":"ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/","title":{"rendered":"\u0645\u0646 \u0627\u0632 \u062f\u0647\u0647 90 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u0628\u06a9\u200c\u0627\u0646\u062f \u0648 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648\u0628 \u067e\u0631\u062f\u0627\u062e\u062a\u0645.  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a: \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u062f\u06a9\u0644\u0631\u0627\u062a\u06cc\u0648 \u0648 \u067e\u0648\u06cc\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f"},"content":{"rendered":"<div data-article-id=\"1877999\" id=\"article-body\">\n<p>\u0645\u0646 \u0627\u0632 \u062f\u0647\u0647 90 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u0628\u06a9\u200c\u0627\u0646\u062f \u0648 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648\u0628 \u067e\u0631\u062f\u0627\u062e\u062a\u0645.  CGI\u060c ISAPI\u060c AJAX &#8211; \u0634\u0645\u0627 \u0646\u0627\u0645 \u0628\u0628\u0631\u06cc\u062f\u060c TLA \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062e\u062f\u0645\u0627\u062a \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u062a\u0648\u0644\u06cc\u062f\u060c \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0648 \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u0645.<\/p>\n<p>CGI \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0641\u0631\u06cc\u0645 \u06a9\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631\u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u0627\u0646 \u062c\u0644\u0633\u0647 \u06a9\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0628\u0648\u062f \u0648 \u0641\u0627\u0642\u062f \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a\u0646\u062f.  React \u06cc\u06a9 \u062a\u0639\u0631\u06cc\u0641 \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0648\u0628 \u0645\u0627\u0698\u0648\u0644\u0627\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0631\u0627\u0626\u0647 \u06a9\u0631\u062f\u060c \u0627\u0645\u0627 \u0648\u0642\u062a\u06cc \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u062f\u0647 \u0641\u0631\u0627\u062a\u0631 \u0631\u0641\u062a\u06cc\u062f\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u06a9\u0645\u06cc \u062f\u0631\u062f\u0646\u0627\u06a9 \u0645\u06cc \u0634\u0648\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f raw.js \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u067e\u0631\u062f\u0627\u062e\u062a\u0647\u200c\u0627\u0646\u062f\u060c \u0627\u0645\u0627 \u0622\u0646\u0647\u0627 \u0627\u0633\u0627\u0633\u0627 \u062f\u0631\u062e\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0628\u0644\u06a9\u0647 \u0635\u0631\u0641\u0627\u064b \u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0686\u0647 front-end (React \u0648 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647) \u0648 \u0686\u0647 \u0628\u0627\u0637\u0646 (CGI\u060c \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc)\u060c \u0634\u0631\u0637 \u0627\u0633\u0627\u0633\u06cc \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc HTML \u0631\u0627 \u0628\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0639\u0644\u0627\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"\/>\n<span class=\"nt\"\/>\n  <span class=\"nt\"\/>Hello ${name}!<span class=\"nt\"\/>\n  <span class=\"nt\"><p>Here is the news...<span class=\"nt\"\/><\/p><\/span>\n  ${newsItems}\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0641\u0631\u0642\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 \u062c\u0627\u0646\u0634\u06cc\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06cc\u0627 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 DOM \u0645\u062c\u0627\u0632\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u0647\u062f\u0641 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0686\u06cc\u062f\u0645\u0627\u0646 \u06a9\u0646\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u062e\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f \u062c\u0627\u062f\u0648\u06cc\u06cc \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0648\u0645\u06cc \u0648 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u0622\u0646\u0642\u062f\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0648 \u062f\u0631\u062e\u062a \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0622\u0646\u0642\u062f\u0631 \u0645\u062a\u0631\u0627\u06a9\u0645 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u062e\u0648\u0634\u200c\u0634\u0627\u0646\u0633 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f \u06a9\u0647 \u0627\u0632 \u062c\u0646\u06af\u0644 \u0628\u0647 \u0645\u0646\u0627\u0637\u0642 \u0645\u0631\u062a\u0641\u0639 \u0622\u0641\u062a\u0627\u0628\u06cc \u062a\u062d\u0648\u06cc\u0644 \u0648\u0627\u0642\u0639\u06cc \u067e\u0631\u0648\u0698\u0647 \u0641\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f!<\/p>\n<p>AI-UI &#8220;Async Iterator UI&#8221; \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u06a9\u0648\u0686\u06a9 \u0648 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc\u060c \u0628\u062f\u0648\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0648\u0645\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#%D9%85%D8%B4%DA%A9%D9%84_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7\" >\u0645\u0634\u06a9\u0644 \u0642\u0627\u0644\u0628 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#%D8%AA%DA%A9%D8%B1%D8%A7%D8%B1_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%D8%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%D8%8C_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7\" >\u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0645\u0624\u0644\u0641\u0647 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#%D9%85%D8%B4%D8%AE%D8%B5_%DA%A9%D8%B1%D8%AF%D9%86_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86\" >\u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0686\u06cc\u062f\u0645\u0627\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#%D8%AA%DB%8C%DA%A9_%D8%AA%D8%A7%DA%A9\" >\u062a\u06cc\u06a9 \u062a\u0627\u06a9!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#Hello_World\" >Hello World<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/ive-been-writing-web-backends-and-frontends-since-the-90s-finally-declarative-dynamic-markup-done-right-3jmj\/#Where_next\" >Where next?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%DA%A9%D9%84_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u0634\u06a9\u0644 \u0642\u0627\u0644\u0628 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0634\u06a9\u0644 \u0627\u0633\u0627\u0633\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631\u0628\u0646\u0627\u06cc\u06cc \u062e\u0648\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u062b\u0627\u0628\u062a\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u067e\u0631\u062f\u0627\u0632\u0634 \u0627\u0644\u06af\u0648 \u0647\u0633\u062a\u0646\u062f.  \u0627\u0628\u0632\u0627\u0631 \u06cc\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0646\u062d\u0648\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u062e\u0648\u0627\u0646\u062f \u06cc\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u062f <code>${variables}<\/code> \u0648 <code>${expressions}<\/code> \u062f\u0631 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u062e\u0648\u062f (\u06cc\u0627 \u0628\u062f\u062a\u0631 \u0627\u0632 \u0622\u0646\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u06cc\u0627 \u062a\u0627\u0628\u0639 \u0645\u062d\u0631\u0645\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u00ab\u0648\u0636\u0639\u06cc\u062a\u00bb \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f)\u060c \u0648 \u0633\u067e\u0633 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0622\u0646 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u06cc\u0627\u0628\u06cc\u062f.<\/p>\n<p>\u062f\u0631 AI-UI\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u0639\u0628\u0627\u0631\u0627\u062a \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062e\u0648\u062f\u0634\u0627\u0646 \u00ab\u0632\u0646\u062f\u0647\u00bb \u0628\u0627\u0634\u0646\u062f &#8211; \u0622\u0646\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062e\u0648\u062f\u0634\u0627\u0646 \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u0646\u062f\u060c \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b DOM \u0631\u0627 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0637\u0628\u06cc\u0639\u062a\u0627\u064b \u062d\u062f\u0627\u0642\u0644 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0645\u0631\u0627\u062c\u0639 \u0633\u0644\u0648\u0644\u06cc \u062f\u0631 \u0635\u0641\u062d\u0647\u200c\u06af\u0633\u062a\u0631\u062f\u0647 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f: \u06cc\u06a9 \u0633\u0644\u0648\u0644 \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0628\u0642\u06cc\u0647 \u0633\u0644\u0648\u0644\u200c\u0647\u0627 \u0631\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0645\u062d\u0627\u0633\u0628\u0647 \u0648 \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0628\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u200c\u0647\u0627 \u062f\u0631 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc AI-UI \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0631\u0627\u0631\u06a9\u0646\u0646\u062f\u0647 \u06cc\u0627 \u0648\u0639\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u06af\u0627\u0645 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc\u200c\u0622\u06cc\u062f (\u0627\u0644\u0628\u062a\u0647\u060c \u0622\u0646\u0647\u0627 \u0641\u0642\u0637 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0639\u0628\u0627\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u0639\u0627\u062f\u06cc \u0646\u06cc\u0632 \u0628\u0627\u0634\u0646\u062f).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%DA%A9%D8%B1%D8%A7%D8%B1_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%D8%8C_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%D8%8C_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0645\u0624\u0644\u0641\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0647\u0648\u0644\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c AI-UI \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u06a9\u0631\u0627\u0631\u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 (<code>map<\/code>\u060c <code>filter<\/code>\u060c <code>consume<\/code>\u060c <code>merge<\/code>\u060c <code>combine<\/code>&#8230;)<\/li>\n<li>\u0627\u0631\u0627\u0626\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc DOM \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0631\u0627\u0631\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u06af\u0627\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0648 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0639\u0646\u0627\u0635\u0631 DOM \u0631\u0627 \u0628\u0647 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u067e\u06cc\u0648\u0646\u062f \u062f\u0647\u06cc\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0644 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u062d\u0630\u0641 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 DOM \u0628\u0627\u0634\u062f.<\/li>\n<li>\u0645\u062d\u0635\u0648\u0631 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 DOM \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u062f\u0631 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u06cc\u0645\u0646 \u0627\u0632 \u0646\u0638\u0631 \u0646\u0648\u0639\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0635\u0631\u0641 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u06cc \u062f\u0627\u0646\u0646\u062f \u0686\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f.<\/li>\n<li>\u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0646\u0635\u0631 DOM \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>iterable<\/code>\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f\u060c \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u0628\u0627\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u06cc\u062f <code>weatherChart.location = \"London\";<\/code>\n<\/li>\n<li>\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0641\u06cc\u062f Chrome Devtools \u0628\u0631\u0627\u06cc \u06a9\u0627\u0648\u0634 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc DOM \u0648 \u0633\u0644\u0633\u0644\u0647 \u0645\u0631\u0627\u062a\u0628 \u0622\u0646\u0647\u0627 \u0648 \u062b\u0628\u062a \u06af\u0632\u0627\u0631\u0634 \u0645\u0641\u06cc\u062f \u062f\u0631 \u0637\u0648\u0644 \u062a\u0648\u0633\u0639\u0647.<\/li>\n<\/ul>\n<p>\u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 AI-UI \u0639\u0646\u0627\u0635\u0631 DOM \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0647\u0633\u062a\u0646\u062f \u0648 \u0627\u0632 API \u06a9\u0627\u0645\u0644 \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f DOM \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0647\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06cc\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0648\u062c\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%D8%AE%D8%B5_%DA%A9%D8%B1%D8%AF%D9%86_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86\"><\/span>\n<p>  \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0686\u06cc\u062f\u0645\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 AI-UI \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u060c \u0634\u0645\u0627 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0631\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c JSX \u0648 htm \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0622\u0634\u0646\u0627\u062a\u0631\u06cc \u0628\u0647 \u0642\u06cc\u0645\u062a \u0627\u0632 \u062f\u0633\u062a \u062f\u0627\u062f\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 \u0627\u06cc\u0645\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0627 \u062f\u0631 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc AI-UI \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0646 \u0627\u0632 \u0646\u0645\u0627\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0645\u0646 \u062a\u0631\u06cc\u0646 \u0646\u0648\u0639 \u0622\u0646 \u0627\u0633\u062a.  \u062e\u06cc\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a: \u06cc\u06a9 \u0639\u0646\u0635\u0631 DOM \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0646\u0627\u0645 \u0622\u0646 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ AI-UI uses normal functions to create fully typed elements<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">elt<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">div<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Hello <\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"nf\">span<\/span><span class=\"p\">({<\/span><span class=\"na\">style<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">color: green<\/span><span class=\"dl\">'<\/span><span class=\"p\">},<\/span> \n    <span class=\"dl\">\"<\/span><span class=\"s2\"> there <\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span>\n  <span class=\"p\">)<\/span>\n<span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ elt is derived from HTMLDivElement<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>&#8230; \u06a9\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ HTM uses tagged template strings to create one or more Nodes<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">elt<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">html<\/span><span class=\"s2\">`\n<p>Hello \n  <span style=\"color: green\">\n   there <\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\">\n  <\/span>\n<\/p>`<\/span><span class=\"p\">;<\/span>  \n<span class=\"c1\">\/\/ elt is a Node or Node[]<\/span>\n\n<span class=\"c1\">\/\/ JSX uses a transpiler to change the markup into function calls that return an unknown type<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">elt<\/span> <span class=\"o\">=<\/span> \n<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Hello<\/span> \n  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">color: green<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n   <span class=\"nx\">there<\/span> <span class=\"p\">{<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div&gt;; <\/span><span class=\"err\"> \n<\/span><span class=\"c1\">\/\/ elt is any<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0648\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0635\u0631 \u0647\u0645\u06af\u06cc \u06cc\u06a9 \u0634\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0648 \u0635\u0641\u0631 \u06cc\u0627 \u0686\u0646\u062f \u06af\u0631\u0647 \u0641\u0631\u0632\u0646\u062f\u060c \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u060c \u0627\u0639\u062f\u0627\u062f\u060c \u06af\u0631\u0647\u200c\u0647\u0627\u06cc DOM\u060c \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0627\u06cc\u0646\u0647\u0627 \u06cc\u0627 \u0648\u0639\u062f\u0647\u200c\u0647\u0627 \u06cc\u0627 \u062a\u06a9\u0631\u0627\u0631\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631\u0647\u0645\u06af\u0627\u0645 \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0628\u0627\u0644\u0627 \u0628\u0627\u0634\u062f. <\/p>\n<p>\u062c\u0627\u062f\u0648 \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 <code>name<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0646\u0647 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0645\u0627\u0646\u0646\u062f \u0628\u0627\u0634\u062f <code>\"Mat\"<\/code> \u06cc\u0627 <code>123<\/code>\u060c \u0627\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f\u0647 \u063a\u06cc\u0631 \u0647\u0645\u06af\u0627\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f\u0647 \u063a\u06cc\u0631 \u0647\u0645\u06af\u0627\u0645 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c AI-UI DOM \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0645\u0646\u0639\u06a9\u0633 \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%DB%8C%DA%A9_%D8%AA%D8%A7%DA%A9\"><\/span>\n<p>  \u062a\u06cc\u06a9 \u062a\u0627\u06a9!<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u06cc\u06a9 \u0633\u0627\u0639\u062a \u0633\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n  <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"c\"><!-- There are also CommonJS and ESM builds --><\/span>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"https:\/\/unpkg.com\/@matatbread\/ai-ui\/dist\/ai-ui.js\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"><script\/><\/span>\n  <span class=\"cm\">\/* Specify what base tags you reference in your UI *\/<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">h2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">div<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">AIUI<\/span><span class=\"p\">.<\/span><span class=\"nf\">tag<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"cm\">\/* Define a _new_ tag type, called `App`, based on the standard \"<div>\" tag,\n    that is composed of an h2 and div elements. It will generate markup like:\n\n  <div>\n      <h2><span class=\"ez-toc-section\" id=\"Hello_World\"><\/span>Hello World<span class=\"ez-toc-section-end\"><\/span><\/h2>\n      <p>{some content goes here}<\/p>\n  <\/div>\n\n  *\/\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">div<\/span><span class=\"p\">.<\/span><span class=\"nf\">extended<\/span><span class=\"p\">({<\/span>\n    <span class=\"nf\">constructed<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ When constructed, this \"div\" tag contains some other tags<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">[<\/span>\n        <span class=\"c1\">\/\/ h2(...) is \"tag function\". It generates an \"h2\" DOM element with the specified children<\/span>\n        <span class=\"nf\">h2<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Hello World<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>  \n        <span class=\"c1\">\/\/ div(...) is also \"tag function\". It generates an \"div\" DOM element with the specified children<\/span>\n        <span class=\"nf\">div<\/span><span class=\"p\">(<\/span><span class=\"nf\">clock<\/span><span class=\"p\">())<\/span>        \n      <span class=\"p\">]<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"cm\">\/* Add add it to the document so the user can see it! *\/<\/span>\n  <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span>\n  <span class=\"c1\">\/\/ App(...) is also a \"tag function\", just like div() <\/span>\n  <span class=\"c1\">\/\/ and h2(), created by extended() which generates a \"div\"<\/span>\n  <span class=\"c1\">\/\/ containing the DOM tree returned by constructed().<\/span>\n    <span class=\"nc\">App<\/span><span class=\"p\">({<\/span>   \n    <span class=\"na\">style<\/span><span class=\"p\">:{<\/span>\n      <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">blue<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">Tick Tock<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"cm\">\/* A simple async \"sleep\" function *\/<\/span>\n  <span class=\"kd\">function<\/span> <span class=\"nf\">sleep<\/span><span class=\"p\">(<\/span><span class=\"nx\">seconds<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Promise<\/span><span class=\"p\">(<\/span><span class=\"nx\">resolve<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setTimeout<\/span><span class=\"p\">(<\/span><span class=\"nx\">resolve<\/span><span class=\"p\">,<\/span> <span class=\"nx\">seconds<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">))<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"cm\">\/* The async generator that yields the time once a second *\/<\/span>\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"o\">*<\/span><span class=\"nf\">clock<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">while <\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">yield<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toString<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nf\">sleep<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"nt\"\/>\n\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>You can specify attributes, content, children - in fact anything you can insert into a DOM - using native JavaScript async iterators, generators or promises.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Where_next\"><\/span>\n  \n  \n  Where next?\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>The above example just demonstrates the first step unleashed by the power of async iterators in UI. <\/p>\n\n<p>The AI-UI <code>when(...)<\/code> function creates iterators from other DOM elements, so you can make one element control another, and the <code>iterable<\/code> member of an <code>extended<\/code> component allows you to implement \"hot\" properties in your own components, which can be used to update your components with a simple assignment.<\/p>\n\n<p>There's a guide on GitHub together with some examples, like this weather chart (open dev tools to see how it works).<\/p>\n\n<p>The underlying concepts in AI-UI have been used in projects for over a decade, both public and private, with hundreds of thousands of users. After 10 years of refinement, the time is right to share it. <\/p>\n\n<p>Given AI-UI is new to open source, it'd be great to get your feedback and I'm actively looking for collaborators to help hone the API and set the direction for future developments.<\/p>\n\n<p>I look forward to seeing your comments or questions here, or on the Github repo.<\/p>\n\n\n          <\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646 \u0627\u0632 \u062f\u0647\u0647 90 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u0628\u06a9\u200c\u0627\u0646\u062f \u0648 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648\u0628 \u067e\u0631\u062f\u0627\u062e\u062a\u0645. CGI\u060c ISAPI\u060c AJAX &#8211; \u0634\u0645\u0627 \u0646\u0627\u0645 \u0628\u0628\u0631\u06cc\u062f\u060c TLA \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062e\u062f\u0645\u0627\u062a \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u062a\u0648\u0644\u06cc\u062f\u060c \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0648 \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u0645. CGI \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0641\u0631\u06cc\u0645 \u06a9\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631\u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u0627\u0646 \u062c\u0644\u0633\u0647 \u06a9\u0627\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":65290,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-65289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/65289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=65289"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/65289\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/65290"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=65289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=65289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=65289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}