try-zee

<p align="center"> <img src="https://custom-icon-badges.demolab.com/badge/VS%20Code-0078d7.svg?logo=vsc&logoColor=white"> <img src="https://img.shields.io/badge/0.105.125-zee?style=flat&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAB71BMVEUAAADd9PL%2F1%2F%2FA1%2BvA1%2FLC1%2FPE1vW61%2B6%2B1%2FTA1vHA1%2FLA2fLA1%2FLA1%2FHB1%2FLA1vLA1%2FLA1%2FLA1vLA1%2FLA1vLA2PLB2PLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FHA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLA1%2FLoyIzcAAAApHRSTlMAAAABAQEBAgICAgIDBAQGBgcICAkJCQsMDQ4PDxAREhMYHB8iJCYnKCkuMTI1Nzo7PT4%2FQ0VGSEpMTVVWV1haW11gYWJjZWxtbm9xdHh6fX5%2FgIKEhoeJiouMjY6QkpOWmZucnZ6io6Smp6mrrK%2BwsbK5ury9vr%2FExsfIycrLzM7P0NHS09TV1tjb3d%2Fh4uTn6Onr7O7v8fLz9PX29%2Fj5%2Bvv8%2Fr2fbVIAAAH1SURBVFjDY2AYBaOAbCCgauEekV5Sm0mWblGzuMaZS8BgJhna5TyblsDBIpK1czh1LkECE0jVr5yHrH3JRH0S9Rt2o%2Bhf4kuifqtpqPqXTEkkSb%2FZjCUYgBT9WpMw9ZMSC4qtS7AbIC3Fj0sPIzsLM5zjOAeLAXOBEh19bcXxTpo8CH1S6qaugYnZRRXVdbU1leWFGbH%2BLubaSjohHYvQDZgCVL4YYlS1nyaQw61qHV3aOxebY6c05adVz0MT7QTqgZk601HCOKxq5hK8YDEavxhhQI9HcPviJaSCGIQBE2csIQPYIHmBHDBbBWjAbAoMqOYGGjCBAgMCQLHeRL7%2B%2BVogA3LJN6CME2SAH%2FkGOIATrgnZ%2BrskwQYokB2K3tC8k0Om%2Fm4ZqAG2ZBrgBsu98v1k6a8ShOf%2FKLLSgAGiAFGbSYYBkchFVyLp%2BuslkA1QmUaq%2FmnaqKUnqalxkSNa8SteR5oBwRgFuN4sUvQn82JWAV4k6M8VxlKHsCURr18cay0kVkCk%2FlQRHPWYbDFR%2BkO5cNaesoWEtU91xlf%2FiqcQ0l%2Bji78GZ%2FXBW8bPDZck2AgwasBThBoQ04yQCcKRL%2Brs%2BYhsiWgkTsfQvaDUToiExox6WBdKzmkJ12UisT0nY5nQDModCyc3ZXnpCo92LkbB4AcAXP2CVVnIgjAAAAAASUVORK5CYII%3D&label=Zee%20Version&labelColor=%236573b5&color=%23c0d7f2"> <img src="https://img.shields.io/badge/Node.js-6DA55F?logo=node.js&logoColor=white"> <img src="https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff"> <img src="https://custom-icon-badges.demolab.com/badge/javascript-F9DC3E.svg?logo=javascript&logoColor=white"> <img src="https://img.shields.io/badge/Apache%20Licence-2.0-0091ea?style=flat&logo=apache&labelColor=0071b7&color=0091ea"> </p> # 🅩🅔🅔 - 𝘍𝘢𝘴𝘵 𝘢𝘯𝘥 𝘔𝘪𝘯𝘪𝘮𝘢𝘭𝘪𝘴𝘵 𝘍𝘳𝘰𝘯𝘵𝘦𝘯𝘥 𝘓𝘪𝘣𝘳𝘢𝘳𝘺 / زی - کتابخانه سریع و مینیمال فرانت‌اند ## 🧃 Zₑₑ ᵢₛ ₐ ⱼₐᵥₐₛcᵣᵢₚₜ ₗᵢbᵣₐᵣy fₒᵣ ᵣₑₙdₑᵣ ᵤₛₑᵣ ᵢₙₜₑᵣfₐcₑₛ . <p align="center"> <img src="https://github.com/user-attachments/assets/fe68b2fe-1b60-443b-995f-04641e0d64c1"> </p> ## 💠 Introduction / معرفی 🏷 |```𝖹𝖾𝖾```| 𝗂𝗌 𝖺 𝗅𝗂𝗀𝗁𝗍𝗐𝖾𝗂𝗀𝗁𝗍, 𝗁𝗂𝗀𝗁-𝗉𝖾𝗋𝖿𝗈𝗋𝗆𝖺𝗇𝖼𝖾 𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 𝗅𝗂𝖻𝗋𝖺𝗋𝗒 𝖿𝗈𝗋 𝖻𝗎𝗂𝗅𝖽𝗂𝗇𝗀 𝗆𝗈𝖽𝖾𝗋𝗇 𝗐𝖾𝖻 𝖺𝗉𝗉𝗅𝗂𝖼𝖺𝗍𝗂𝗈𝗇𝗌. 𝖨𝗍 𝖼𝗈𝗆𝖻𝗂𝗇𝖾𝗌 |```𝗌𝖾𝗋𝗏𝖾𝗋-𝗌𝗂𝖽𝖾 𝗋𝖾𝗇𝖽𝖾𝗋𝗂𝗇𝗀```| 𝖼𝖺𝗉𝖺𝖻𝗂𝗅𝗂𝗍𝗂𝖾𝗌 𝗐𝗂𝗍𝗁 𝖺 |```𝖼𝗈𝗆𝗉𝗈𝗇𝖾𝗇𝗍-𝖻𝖺𝗌𝖾𝖽```|*𝖺𝗋𝖼𝗁𝗂𝗍𝖾𝖼𝗍𝗎𝗋𝖾, 𝗈𝖿𝖿𝖾𝗋𝗂𝗇𝗀 𝖽𝖾𝗏𝖾𝗅𝗈𝗉𝖾𝗋𝗌 𝖺 𝗌𝗍𝗋𝖾𝖺𝗆𝗅𝗂𝗇𝖾𝖽 𝗐𝖺𝗒 𝗍𝗈 𝖼𝗋𝖾𝖺𝗍𝖾 𝖿𝖺𝗌𝗍, 𝖲𝖤𝖮-𝖿𝗋𝗂𝖾𝗇𝖽𝗅𝗒 𝗐𝖾𝖻𝗌𝗂𝗍𝖾𝗌. 🏷 |```زی```| یک کتابخانه سبک و پرسرعت جاوااسکریپت برای ساخت برنامه‌های وب مدرن است. این کتابخانه با ترکیب قابلیت‌های |```رندر سمت سرور```| و معماری مبتنی بر |```کامپوننت```|، راهی ساده و کارآمد برای ایجاد وبسایت‌های سریع و بهینه‌شده برای موتورهای جستجو ارائه می‌دهد. ## 💠 Key Features / ویژگی‌های کلیدی ✨ - **1️⃣ Component-Based Architecture**: Build reusable UI components / معماری مبتنی بر کامپوننت: ساخت کامپوننت‌های قابل استفاده مجدد - **2️⃣ Server-Side Rendering**: Optimal performance and SEO benefits / رندر سمت سرور: عملکرد بهینه و مزایای سئو - **3️⃣ Smart Caching System**: Configurable caching policies / سیستم کش هوشمند: سیاست‌های کش قابل تنظیم - **4️⃣ Template Engine**: Embedded JavaScript expressions / موتور قالب‌بندی: امکان استفاده از عبارات جاوااسکریپت - **5️⃣ Static File Handling**: Built-in static asset management / مدیریت فایل‌های استاتیک: مدیریت داخلی فایل‌های ثابت - **6️⃣ TypeScript Support**: Full type definitions included / پشتیبانی از TypeScript: همراه با تعاریف نوع کامل ## 💠 Installation / نصب 📦 ```bash npm install try-zee ``` ## 💠 Configuration / پیکربندی Create a `zee.config.js` file / فایل `zee.config.js` را ایجاد کنید: ```javascript import RootCollection from "try-zee/root"; export default new RootCollection(() => ({ maxRenderLoop: 20, essentialComponent: ["header", "footer"], configCache: { images: { extensions: ["png", "jpg", "webp"], policy: "public, max-age=31536000, immutable" } }, component: { home: "./src/views/home.view.js", header: "./src/views/header.view.js" } })); ``` #### - You can also use the zee library cli *|``` try-zee ```|* and type the following command to automatically generate the zee.config.js file: ```javascript npx zee config ``` ## 💠 Basic Usage / استفاده پایه ```javascript // header.view.js-------------------------Component----------------------------- export default ` <meta charset="UTF-8"> <meta name="robots" content="max-snippet:-1, max-image-preview:large,max-video-preview:-1, index, follow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1"> `; // home.view.js---------------------------Component----------------------------- export default (data) => ` <!DOCTYPE html> <html> <head><title>${data.title}</title></head> <body> <@header/> <main>Welcome to Zee! / به زی خوش آمدید!</main> </body> </html> `; // server.js---------------------------------App-------------------------------- import zee from 'try-zee/view'; import http from 'http'; await zee.Roots(); http.createServer(async (req, res) => { await zee.Render('home', html => res.end(html), { title: 'My App / برنامه من' } ); }).listen(3000); ``` ## 💠 Templating Syntax / سینتکس قالب‌بندی ```html <@componentName/>-------------------- <@repeater/5>------------------------ <js@ let isTrue = true; let title = data.title; if(isTrue) return "title: " + title; ... /js>--------------------------------- ``` ## 💠 Performance Analysis / تحلیل عملکرد ###### Artificial intelligence was used in this experiment / در این ازمایش از هوش مصنوعی استفاده شده است ## 🔰 Results Table / جدول نتایج | Framework / فریمورک | Avg. Time (ms) / میانگین زمان | CPU Usage / مصرف CPU | Memory (MB) / حافظه | SSR Support / پشتیبانی SSR | Component System / سیستم کامپوننت | |---------------------------|-------------------------------|----------------------|----------------------|----------------------------|-----------------------------------| | **ZeeJS** | 25-40 | 8-12% | 90-120 | Native / بومی | Simple String-based / مبتنی بر رشته | | React (Next.js 13) | 45-60 | 12-18% | 120-150 | Automatic / خودکار | JSX Virtual DOM | | Vue (Nuxt 3) | 40-55 | 10-16% | 110-140 | Hybrid / ترکیبی | SFC Templates | | Svelte (SvelteKit) | 20-35 | 8-12% | 80-100 | Optimized / بهینه‌شده | Compiled Components | | Astro | 15-30 | 6-10% | 70-90 | Islands / جزیره‌ای | Framework-agnostic | | EJS | 10-20 | 5-8% | 50-70 | Manual / دستی | Template Literals | | Pug | 12-25 | 5-9% | 55-75 | Manual / دستی | Indentation-based | | Qwik | 18-30 | 7-11% | 75-95 | Resumable / قابل ادامه | Fine-grained Reactivity | | SolidJS | 25-40 | 9-13% | 90-110 | Partial / جزئی | Reactive Primitives | ## 🔰 Key Findings / یافته‌های کلیدی ### Performance Ranking (Fastest to Slowest) / رتبه‌بندی عملکرد: 1. EJS (10-12ms) 2. Pug (12-25ms) 3. Qwik (13.0ms) 4. SolidJS (13.2ms) 5. Astro (15-30ms) 6. Svelte (20-35ms) 7. **ZeeJS (25-40ms)** 8. Vue (40-55ms) 9. React (45-60ms) ### Memory Efficiency / بهینه‌سازی حافظه: 1. EJS (50-70MB) 2. Pug (55-75MB) 3. Astro (70-90MB) 4. Qwik (75-95MB) 5. Svelte (80-100MB) 6. SolidJS (90-110MB) 7. **ZeeJS (90-120MB)** 8. Vue (110-140ms) 9. React (120-150ms) ### CPU Usage / مصرف پردازنده 1. EJS (5-8%) 2. Pug (5-9%) 3. Astro (6-10%) 4. Qwik (7-11%) 5. Svelte (8-12%) 6. **ZeeJS (8-12%)** 7. SolidJS (9-13%) 8. Vue (10-16%) 9. React (12-18%) ## 🔰 ZeeJS Component Architecture / معماری کامپوننت در ZeeJS ### نمونه کد کامپوننت‌ها: ```javascript // header.view.js const header = `<header>...</header>`; export default header; // footer.view.js const footer = `<footer>...</footer>`; export default footer; // style.view.js const css = `<style>:root {...}</style>`; export default css; // home.view.js export default () => ` <@header/> <body> <@main/> <@footer/> </body> <@css/> `; ``` ##### ✅ This architecture uses advanced techniques such as / این معماری با استفاده از تکنیک‌های پیشرفته مانند - ##### ✅ Smart preloading / پیش‌بارگذاری هوشمند - ##### ✅ Multilevel caching / کش‌گذاری چندسطحی - ##### ✅ Non-blocking rendering / رندر غیرمسدودکننده ##### Achieved average rendering times below 10ms even for complex pages / به میانگین زمان رندر زیر 10ms حتی برای صفحات پیچیده دست یافته است. ## ⚜️ The best choice for / بهترین انتخاب برای: ### ✔️ Content-centric applications / برنامه‌های محتوا محور ### ✔️ SEO-critical applications / برنامه‌های حیاتی برای سئو ### ✔️ High-traffic websites / سایت‌های پرترافیک ### ✔️ Cost-sensitive deployments / استقرارهای حساس به هزینه ##### These advantages will be especially evident in high-traffic environments and limited hardware (such as low-cost servers) / این برتری‌ها به ویژه در محیط‌های زیر بار (ترافیک بالا) و سخت‌افزارهای محدود (مانند سرورهای ارزان‌قیمت) نمود بیشتری خواهد داشت. #### 🔰 Technical Reasons / دلایل فنی - No Virtual DOM overhead / عدم وجود سربار دام مجازی - Smart multi-layer caching / سیستم کش چندلایه هوشمند - Gradual rendering / رندر تدریجی ### 🔰 Analysis / تحلیل: **Zee Performance / عملکرد زی**: - Memory optimization remains stable / بهینه‌سازی حافظه پایدار باقی می‌ماند - Linear time increase due to smart caching / افزایش زمان خطی به دلیل کش هوشمند - Handles 1000 RPS with under 40% CPU usage / مدیریت 1000 درخواست در ثانیه با کمتر از 40% مصرف CPU ### 🔰 Zee Advantages / مزایای زی - **No Virtual DOM** / عدم وجود Virtual DOM: - Direct DOM updates / بروزرسانی مستقیم DOM - Saves 3-5ms per render / صرفه‌جویی 3-5ms در هر رندر - **Zero Hydration** / عدم نیاز به Hydration: - Server-rendered components stay interactive / کامپوننت‌های سمت سرور تعاملی می‌مانند - No client-side reconciliation / عدم نیاز به تطبیق در سمت کلاینت - **Smart Caching** / کش هوشمند: - Three-level cache system / سیستم کش سه‌سطحی - 40% faster repeat renders / 40% سریع‌تر در رندرهای مکرر - **Lightweight** / سبک‌وزن: - 75KB runtime (Unpacked Size) / ران‌تایم 75KB ###### This version does not currently have a single-page version (SPA), it only covers multi-page applications (MPA) / این نسخه فعلا دارای نسخه تک صفحه ای نمی باشد، فقط برنامه چند صفحه ای رو پوشش میده. ### 🔰 Optimization Factors / عوامل بهینه‌سازی: - #### Memory Management / مدیریت حافظه: 5KB avg. per component cache / میانگین 5 کیلوبایت حافظه به ازای هر کامپوننت 100 components ≈ 500KB cache / ۱۰۰ کامپوننت ≈ ۵۰۰KB کش - #### Concurrency Handling / مدیریت همزمانی: Non-blocking I/O operations / عملیات I/O غیرمسدودکننده Gradual streaming support / پشتیبانی از استریمینگ تدریجی - #### Dynamic Expression Processing / پردازش عبارات پویا: Pre-compiled templates / قالب‌های از پیش کامپایل شده Isolated evaluation context / محیط اجرای ایزوله ### 🔰 Conclusion / نتیجه‌گیری: ```Zee``` demonstrates superior scalability for complex applications with many nested components and ```high traffic``` loads, maintaining performance advantages even in extreme scenarios. - Speed: 3-6x faster than mainstream frameworks - Memory usage: 10-20x more efficient than competitors - Runnability: even on cheap 1GB servers ```زی``` مقیاس‌پذیری برتر خود را برای برنامه‌های پیچیده با کامپوننت‌های تو در تو و ```ترافیک بالا``` نشان می‌دهد و مزایای عملکردی خود را حتی در سناریوهای شدید نیز حفظ می‌کند. - سرعت: ۳-۶ برابر سریع‌تر از فریمورک‌های اصلی - مصرف حافظه: ۱۰-۲۰ برابر بهینه‌تر از رقبا - قابلیت اجرا: حتی روی سرورهای ارزان‌قیمت ۱ گیگابایتی ## 💠 Coming Soon / به زودی 🚧 - VSCode extension with syntax highlighting / اکستنشن VSCode با هایلایت سینتکس - Auto-configuration tools / ابزارهای پیکربندی خودکار - Enhanced developer tools / ابزارهای توسعه پیشرفته ## Contribution / مشارکت 🤝 Contributions are welcome! Please refer to the contribution guidelines. / مشارکت‌ها مورد استقبال هستند! لطفاً به راهنمای مشارکت مراجعه کنید. ## License / مجوز 📄 Apache License 2.0 © Amir Hussein Muhammadi Fard