[{"data":1,"prerenderedAt":128},["ShallowReactive",2],{"page:\u002Ffa\u002Fcats\u002Ftuts":3,"mdc-20qphg-key":10,"logs-archives-\u002Ffa\u002Fcats\u002Ftuts-tuts":21},{"title":4,"thumbnail":5,"description":4,"path":6,"body":7,"tocData":8,"type":9},"آموزش ها","\u002Fcontent\u002Fblogging.webp","\u002Ffa\u002Fcats\u002Ftuts","\u003CLogsArchives cat=\"tuts\" \u002F>",[],"page",{"data":11,"body":12},{},{"type":13,"children":14},"root",[15],{"type":16,"tag":17,"props":18,"children":20},"element","logs-archives",{"cat":19},"tuts",[],[22],{"title":23,"thumbnail":24,"description":25,"date":26,"cat":19,"intro":27,"comments":28,"newsletter":28,"toc":28,"path":29,"body":30,"tocData":31,"type":9},"آشنایی با WASM","\u002Fcontent\u002Fweb-assembly-logo.webp","وب‌اسمبلی (WebAssembly) یک استاندارد باز است که امکان اجرای کدهای باینری بهینه را در محیط‌های جاوا اسکریپت فراهم می‌کند. هدف اصلی آن افزایش سرعت و کارایی برنامه‌های وب است، اما می‌توان آن را در محیط‌های دیگر نیز اجرا کرد.","2023-09-12T16:33:46.294Z",false,true,"\u002Ffa\u002Flogs\u002Fwork-with-wasm\u002Fintro-wasm","## دوره آموزشی WebAssembly: ساخت برنامه‌های سریع وب با Go و TinyGo\n\n### معرفی WebAssembly (WASM): آینده برنامه‌های وب\n\nوب امروزی پر از برنامه‌های پیچیده است: از بازی‌های آنلاین مثل **Krunker** تا ویرایشگرهای بلادرنگ مثل **Figma**. جاوااسکریپت، با وجود انعطاف‌پذیری‌اش، گاهی تو تأمین عملکرد لازم برای این برنامه‌ها کم میاره. اینجا **WebAssembly (WASM)** وارد می‌شه، یه فناوری انقلابی که عملکرد برنامه‌های وب رو به سطح جدیدی می‌بره.\n\n**WASM** یه استاندارد باز و فرمت باینریه که به توسعه‌دهندگان اجازه می‌ده کدهای نوشته‌شده با زبان‌هایی مثل **C**، **C++**، **Rust** و **Go** رو به‌صورت بهینه تو مرورگرها اجرا کنن. این کدها تو محیطی ایزوله با امنیت بالا اجرا می‌شن و سرعتشون گاهی تا چند برابر جاوااسکریپته. WASM از سال 2017، که به‌صورت رسمی پشتیبانی مرورگرها رو به دست آورد، توسط غول‌هایی مثل **گوگل**، **مایکروسافت**، **موزیلا** و **اپل** حمایت شده و حالا تو پروژه‌های واقعی، از Adobe Premiere Web تا بازی‌های AAA، نقش کلیدی داره.\n\n### چرا WebAssembly؟\n\n- **سرعت بالا**: کدهای باینری WASM نزدیک به عملکرد زبان‌های بومی اجرا می‌شن.\n- **امنیت قوی**: محیط سندباکس از دسترسی غیرمجاز جلوگیری می‌کنه.\n- **چندزبانه بودن**: از C++ تا Go، هر زبانی رو به وب بیارید.\n- **حجم کم**: فایل‌های WASM فشرده‌تر از جاوااسکریپت مشابهن.\n- **پشتیبانی گسترده**: همه مرورگرهای مدرن (کروم، فایرفاکس، سافاری) WASM رو اجرا می‌کنن.\n\nمثال عملی: یه ویرایشگر عکس آنلاین رو تصور کن. با WASM، می‌تونی پردازش تصویر رو با سرعت C++ تو مرورگر انجام بدی، بدون اینکه کاربر چیزی نصب کنه.\n\n### پیش‌نیازها\n\nبرای شروع این دوره، به این موارد نیاز دارید:\n\n- آشنایی اولیه با **جاوااسکریپت** و **HTML**.\n- نصب **Go** (نسخه 1.21 یا بالاتر) و **TinyGo** (ابزار سبک برای WASM).\n- یه ویرایشگر کد مثل **VS Code**.\n- مرورگر مدرن (کروم یا فایرفاکس پیشنهاد می‌شه).\n\nبیایید اولین پروژه WASM رو بسازیم و قدرت این فناوری رو از نزدیک ببینیم!\n\n## بخش 1: ساخت اولین پروژه WASM با Go و TinyGo\n\n### 1.1 نصب ابزارهای موردنیاز\n\nبرای کار با Go در WASM، از **TinyGo** استفاده می‌کنیم، نسخه‌ای سبک‌تر از Go که برای محیط‌های محدود مثل مرورگرها بهینه شده.\n\n#### نصب TinyGo\n\nاگر از **Homebrew** استفاده می‌کنید (مک\u002Fلینوکس):\n\n```bash\nbrew install tinygo\n```\n\nبرای ویندوز یا روش‌های دیگه، به [tinygo.org](https:\u002F\u002Ftinygo.org\u002Fgetting-started\u002Finstall\u002F) سر بزنید.\n\n#### بررسی نصب\n\nاین دستورات رو اجرا کنید تا مطمئن بشید همه‌چیز آماده است:\n\n```bash\ngo version\ntinygo version\n```\n\nخروجی باید چیزی شبیه این باشه:\n\n```\ngo version go1.21.5\ntinygo version 0.31.0\n```\n\n### 1.2 نوشتن اولین برنامه Go برای WASM\n\nیه پوشه پروژه بسازید و فایل `main.go` رو با این کد پر کنید:\n\n```go\npackage main\n\nimport \"fmt\"\n\nfunc main() {\n    fmt.Println(\"سلام از WebAssembly و Go!\")\n}\n```\n\nاین کد ساده یه پیام رو تو کنسول مرورگر چاپ می‌کنه.\n\n### 1.3 کامپایل به فرمت WASM\n\nبرای تبدیل کد Go به WASM، این دستور رو اجرا کنید:\n\n```bash\ntinygo build -o main.wasm -target wasm -no-debug -opt=2 main.go\n```\n\n- `-target wasm`: خروجی رو برای مرورگرها تنظیم می‌کنه.\n- `-no-debug`: اندازه فایل رو کوچیک‌تر می‌کنه.\n- `-opt=2`: بهینه‌سازی حداکثری اعمال می‌شه.\n\nفایل `main.wasm` تولید می‌شه که کد باینری شماست.\n\n### 1.4 آماده‌سازی فایل‌های جاوااسکریپت و HTML\n\nبرای اجرای WASM تو مرورگر، به یه فایل جاوااسکریپت کمکی به اسم `wasm_exec.js` نیاز دارید. این فایل رو از [مخزن Go](https:\u002F\u002Fgithub.com\u002Fgolang\u002Fgo\u002Fblob\u002Fmaster\u002Fmisc\u002Fwasm\u002Fwasm_exec.js) دانلود کنید و کنار پروژه بذارید.\n\nحالا فایل `index.html` رو با این کد بسازید:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"fa\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Ctitle>اولین پروژه WebAssembly\u003C\u002Ftitle>\n    \u003Cscript src=\"wasm_exec.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>سلام از WebAssembly و Go!\u003C\u002Fh1>\n    \u003Cscript>\n      const go = new Go();\n      WebAssembly.instantiateStreaming(fetch(\"main.wasm\"), go.importObject)\n        .then((result) => {\n          go.run(result.instance);\n        })\n        .catch((err) => console.error(\"خطا:\", err));\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 1.5 اجرای پروژه\n\nیه سرور محلی راه بندازید (چون مرورگرها فایل‌های WASM رو مستقیم از سیستم نمی‌خونن):\n\n```bash\npython -m http.server 8080\n```\n\nحالا به `http:\u002F\u002Flocalhost:8080` برید. تو کنسول مرورگر (F12 > Console)، باید پیام **\"سلام از WebAssembly و Go!\"** رو ببینید.\n\n## بخش 2: تعامل جاوااسکریپت و WebAssembly\n\nحالا بیایید WASM و جاوااسکریپت رو به هم وصل کنیم تا یه ماشین‌حساب ساده بسازیم که جمع دو عدد رو انجام بده.\n\n### 2.1 تعریف تابع در Go\n\nفایل `main.go` رو با این کد جایگزین کنید:\n\n```go\npackage main\n\nimport \"syscall\u002Fjs\"\n\n\u002F\u002Fexport add\nfunc add(a, b int) int {\n    return a + b\n}\n\nfunc main() {\n    js.Global().Set(\"add\", js.FuncOf(func(this js.Value, args []js.Value) interface{} {\n        return add(args[0].Int(), args[1].Int())\n    }))\n    select {} \u002F\u002F برنامه رو در حال اجرا نگه می‌داریم\n}\n```\n\n- `\u002F\u002Fexport add`: تابع `add` رو برای جاوااسکریپت قابل دسترسی می‌کنه.\n- `select {}`: از خروج برنامه جلوگیری می‌کنه.\n\n### 2.2 کامپایل دوباره\n\n```bash\ntinygo build -o main.wasm -target wasm -no-debug main.go\n```\n\n### 2.3 به‌روزرسانی HTML\n\nفایل `index.html` رو به این شکل تغییر بدید:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"fa\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Ctitle>ماشین‌حساب با WebAssembly\u003C\u002Ftitle>\n    \u003Cscript src=\"wasm_exec.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>ماشین‌حساب ساده با Go و WASM\u003C\u002Fh1>\n    \u003Cinput type=\"number\" id=\"a\" placeholder=\"عدد اول\" \u002F>\n    \u003Cinput type=\"number\" id=\"b\" placeholder=\"عدد دوم\" \u002F>\n    \u003Cbutton id=\"calc\">محاسبه\u003C\u002Fbutton>\n    \u003Cp>نتیجه: \u003Cspan id=\"result\">0\u003C\u002Fspan>\u003C\u002Fp>\n    \u003Cscript>\n      const go = new Go();\n      WebAssembly.instantiateStreaming(fetch(\"main.wasm\"), go.importObject)\n        .then((result) => {\n          go.run(result.instance);\n          document.getElementById(\"calc\").addEventListener(\"click\", () => {\n            const a = parseInt(document.getElementById(\"a\").value);\n            const b = parseInt(document.getElementById(\"b\").value);\n            const res = window.add(a, b);\n            document.getElementById(\"result\").textContent = res;\n          });\n        })\n        .catch((err) => console.error(\"خطا:\", err));\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 2.4 تست پروژه\n\nسرور رو دوباره اجرا کنید (`python -m http.server 8080`) و به `localhost:8080` برید. دو عدد وارد کنید، روی **محاسبه** کلیک کنید و نتیجه جمع رو ببینید. این تعامل نشون می‌ده چطور WASM و جاوااسکریپت می‌تونن باهم کار کنن.\n\n## بخش 3: تغییر DOM با WebAssembly\n\nحالا بیایید مستقیماً از Go به DOM مرورگر دسترسی پیدا کنیم و یه پیام پویا اضافه کنیم.\n\n### 3.1 کد Go برای تغییر DOM\n\nفایل `main.go` رو با این کد به‌روزرسانی کنید:\n\n```go\npackage main\n\nimport \"syscall\u002Fjs\"\n\nfunc main() {\n    document := js.Global().Get(\"document\")\n    div := document.Call(\"createElement\", \"div\")\n    div.Set(\"innerHTML\", \"این پیام از Go و WebAssembly اومده!\")\n    div.Set(\"style\", \"color: blue; font-size: 18px; margin-top: 10px;\")\n    document.Get(\"body\").Call(\"appendChild\", div)\n\n    select {} \u002F\u002F برنامه رو فعال نگه می‌داریم\n}\n```\n\n- `syscall\u002Fjs`: به Go اجازه می‌ده با DOM و جاوااسکریپت تعامل کنه.\n- کد بالا یه `div` جدید می‌سازه و پیامی رو تو صفحه نمایش می‌ده.\n\n### 3.2 کامپایل و اجرا\n\n```bash\ntinygo build -o main.wasm -target wasm -no-debug main.go\n```\n\nفایل `index.html` رو به حالت ساده برگردونید:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"fa\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Ctitle>تغییر DOM با WebAssembly\u003C\u002Ftitle>\n    \u003Cscript src=\"wasm_exec.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>تغییر DOM با Go و WASM\u003C\u002Fh1>\n    \u003Cscript>\n      const go = new Go();\n      WebAssembly.instantiateStreaming(fetch(\"main.wasm\"), go.importObject)\n        .then((result) => {\n          go.run(result.instance);\n        })\n        .catch((err) => console.error(\"خطا:\", err));\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 3.3 تست پروژه\n\nسرور رو اجرا کنید و به `localhost:8080` برید. باید یه پیام آبی‌رنگ با متن **\"این پیام از Go و WebAssembly اومده!\"** زیر عنوان ببینید. این نشون می‌ده WASM می‌تونه مستقیماً DOM رو دستکاری کنه.\n\n## نتیجه‌گیری: قدم اول به سوی WASM\n\nتو این ماژول، با **WebAssembly** آشنا شدید و یاد گرفتید چطور با **Go** و **TinyGo** برنامه‌های وب سریع و امن بسازید. از چاپ یه پیام ساده تو کنسول تا ساخت یه ماشین‌حساب تعاملی و تغییر DOM، قدم‌های اولیه رو برداشتید. WASM دنیایی از امکاناته: از اجرای بازی‌های سنگین تو مرورگر تا اپلیکیشن‌های ابری پیچیده. تو ماژول‌های بعدی، سراغ موضوعات پیشرفته‌تر می‌ریم، مثل بهینه‌سازی عملکرد، کار با کتابخونه‌های C++ و ادغام با فریم‌ورک‌های مدرن.\n\n### نکات کلیدی\n\n- WASM سرعت و امنیت رو به برنامه‌های وب میاره.\n- TinyGo ابزار سبک و قدرتمندیه برای پروژه‌های WASM.\n- تعامل جاوااسکریپت و WASM امکانات بی‌نهایتی فراهم می‌کنه.\n- تغییر DOM با Go نشون‌دهنده انعطاف‌پذیری WASMه.\n\n## منابع برای ادامه یادگیری\n\n- **وب‌سایت رسمی WebAssembly**: [webassembly.org](https:\u002F\u002Fwebassembly.org) برای مفاهیم پایه.\n- **مستندات TinyGo**: [tinygo.org\u002Fdocs](https:\u002F\u002Ftinygo.org\u002Fdocs) برای راهنمای کامل.\n- **مخزن GitHub TinyGo**: [github.com\u002Ftinygo-org](https:\u002F\u002Fgithub.com\u002Ftinygo-org) برای مثال‌های بیشتر.\n- **MDN WebAssembly**: [developer.mozilla.org\u002Fen-US\u002Fdocs\u002FWebAssembly](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWebAssembly) برای نکات جاوااسکریپت.\n- **انجمن WebAssembly**: [reddit.com\u002Fr\u002FWebAssembly](https:\u002F\u002Freddit.com\u002Fr\u002FWebAssembly) برای بحث و پشتیبانی.\n\nبیایید تو ماژول بعدی، WASM رو به پروژه‌های بزرگ‌تر ببریم و وب رو سریع‌تر کنیم!",[32,48,80,100,116,124],{"title":33,"url":34,"items":35},"دوره آموزشی WebAssembly: ساخت برنامه‌های سریع وب با Go و TinyGo","#دوره-آموزشی-webassembly-ساخت-برنامههای-سریع-وب-با-go-و-tinygo",[36,40,44],{"title":37,"url":38,"items":39},"معرفی WebAssembly (WASM): آینده برنامه‌های وب","#معرفی-webassembly-wasm-آینده-برنامههای-وب",[],{"title":41,"url":42,"items":43},"چرا WebAssembly؟","#چرا-webassembly",[],{"title":45,"url":46,"items":47},"پیش‌نیازها","#پیشنیازها",[],{"title":49,"url":50,"items":51},"بخش 1: ساخت اولین پروژه WASM با Go و TinyGo","#بخش-1-ساخت-اولین-پروژه-wasm-با-go-و-tinygo",[52,64,68,72,76],{"title":53,"url":54,"items":55},"1.1 نصب ابزارهای موردنیاز","#11-نصب-ابزارهای-موردنیاز",[56,60],{"title":57,"url":58,"items":59},"نصب TinyGo","#نصب-tinygo",[],{"title":61,"url":62,"items":63},"بررسی نصب","#بررسی-نصب",[],{"title":65,"url":66,"items":67},"1.2 نوشتن اولین برنامه Go برای WASM","#12-نوشتن-اولین-برنامه-go-برای-wasm",[],{"title":69,"url":70,"items":71},"1.3 کامپایل به فرمت WASM","#13-کامپایل-به-فرمت-wasm",[],{"title":73,"url":74,"items":75},"1.4 آماده‌سازی فایل‌های جاوااسکریپت و HTML","#14-آمادهسازی-فایلهای-جاوااسکریپت-و-html",[],{"title":77,"url":78,"items":79},"1.5 اجرای پروژه","#15-اجرای-پروژه",[],{"title":81,"url":82,"items":83},"بخش 2: تعامل جاوااسکریپت و WebAssembly","#بخش-2-تعامل-جاوااسکریپت-و-webassembly",[84,88,92,96],{"title":85,"url":86,"items":87},"2.1 تعریف تابع در Go","#21-تعریف-تابع-در-go",[],{"title":89,"url":90,"items":91},"2.2 کامپایل دوباره","#22-کامپایل-دوباره",[],{"title":93,"url":94,"items":95},"2.3 به‌روزرسانی HTML","#23-بهروزرسانی-html",[],{"title":97,"url":98,"items":99},"2.4 تست پروژه","#24-تست-پروژه",[],{"title":101,"url":102,"items":103},"بخش 3: تغییر DOM با WebAssembly","#بخش-3-تغییر-dom-با-webassembly",[104,108,112],{"title":105,"url":106,"items":107},"3.1 کد Go برای تغییر DOM","#31-کد-go-برای-تغییر-dom",[],{"title":109,"url":110,"items":111},"3.2 کامپایل و اجرا","#32-کامپایل-و-اجرا",[],{"title":113,"url":114,"items":115},"3.3 تست پروژه","#33-تست-پروژه",[],{"title":117,"url":118,"items":119},"نتیجه‌گیری: قدم اول به سوی WASM","#نتیجهگیری-قدم-اول-به-سوی-wasm",[120],{"title":121,"url":122,"items":123},"نکات کلیدی","#نکات-کلیدی",[],{"title":125,"url":126,"items":127},"منابع برای ادامه یادگیری","#منابع-برای-ادامه-یادگیری",[],1781786493521]