نقشه راه فرانت اند (front end)

نقشه راه فرانت اند

قبل از این که بخواهم نقشه را یادگیری فرانت‌اند (برنامه نویسی سمت کاربر) را به شما بگویم، می‌خواهم در رابطه با برنامه نویسی فرانت‌اند مقداری با شما صحبت کنم.

بخشی از یک وب سایت که کاربر به طور مستقیم با آن در تعامل است، فرانت‌اند نامیده می شود. همچنین به آن "سمت کاربر برنامه" نیز گفته می شود. این شامل همه چیزهایی است که کاربران به طور مستقیم آن‌ها را می‌بینند:

• رنگ ها
• فونت‌های متن
• تصاویر
• نمودارها
• جداول
• دکمه ها
• رنگ ها
• منوی ناوبری

HTML، CSS و جاوا اسکریپت تکنولوژی‌هایی هستند که برای توسعه Front End استفاده می شوند. رسپانسیو بودن و بهترین عملکرد دو هدف اصلی Front End هستند. توسعه دهنده فرانت‌اند باید اطمینان حاصل کند که سایت ریسپانسیو است. این به درستی در دستگاه های با هر اندازه ظاهر می شود، هیچ بخشی از وب سایت صرف نظر از اندازه صفحه نمایش، نباید به طور غیرعادی رفتار کند.

خب حال که اطلاعات کوتاهی در رابطه با فرانت‌اند کسب کردید، زمان آن رسیده که در مورد نقشه راه فرانت اند با شما صحبت کنیم.

شما قبل از هر چیزی باید یک سری اطلاعات کلی در رابطه با اینترنت به دست آورید و بعضی مفاهیم را درک کنید. در زیر این مفاهیم را برای شما لیست کرده‌ایم.

نقشه راه فرانت اند مرحله اول – اینترنت

اینترنت یک شبکه جهانی از رایانه های متصل به یکدیگر است که از طریق مجموعه ای استاندارد از پروتکل ها با یکدیگر ارتباط برقرار می کنند. مطالعه موارد زیر برای درک اینترنت بسیار کاربردی هستند:

• اینترنت چگونه کار می کند؟ - اینترنت با اتصال دستگاه ها و سیستم های کامپیوتری به یکدیگر با استفاده از مجموعه ای از پروتکل های استاندارد کار می کند. این پروتکل‌ها نحوه تبادل اطلاعات بین دستگاه‌ها را تعریف می‌کنند و اطمینان می‌دهند که داده‌ها به طور قابل اعتماد و ایمن منتقل می‌شوند.
• HTTP چیست؟ - HTTP پروتکل ارتباطی لایه برنامه مبتنی بر TCP/IP است که نحوه ارتباط کلاینت و سرور با یکدیگر را به شکل استاندارد برقرار می کند. HTTP از یک "مدل کلاینت-سرور" کلاسیک پیروی می کند که مشتری یک درخواست اتصال را باز می کند، سپس منتظر می ماند تا پاسخی دریافت کند.
• مرورگرها - مرورگر وب یک برنامه نرم افزاری است که کاربر را قادر می سازد از طریق رابط کاربری گرافیکی (طراحی UI سایت) خود به صفحات وب یا سایر محتوای آنلاین دسترسی داشته باشد و آنها را نمایش دهد.
• DNS - سیستم نام دامنه (DNS) دفترچه تلفن اینترنت است. انسان ها از طریق نام های دامنه مانند nytimes.com یا espn.com به اطلاعات آنلاین دسترسی دارند. مرورگرهای وب از طریق آدرس های پروتکل اینترنت (IP) با یکدیگر تعامل دارند. DNS نام دامنه را به آدرس های IP ترجمه می کند تا مرورگرها بتوانند منابع اینترنتی را بارگیری کنند.
• نام دامنه - نام دامنه یک آدرس منحصر به فرد و آسان برای به خاطر سپردن است که برای دسترسی به وب‌سایت‌هایی مانند «google.com» و «facebook.com» استفاده می‌شود. کاربران می توانند با استفاده از نام دامنه به لطف سیستم نام دامنه (DNS) به وب سایت ها متصل شوند.
• میزبانی وب - میزبانی وب یک سرویس آنلاین است که به شما امکان می دهد فایل های وب سایت خود را در اینترنت منتشر کنید. بنابراین، هر کسی که به اینترنت دسترسی داشته باشد، به وب سایت شما نیز دسترسی دارد.

حال که در مورد اینترنت اطلاعات کسب کردید و با مفاهیم آن آشنا شدید نیاز است که شروع به یادگیری  اولین تکنولوژی بکنید.

نقشه راه فرانت اند مرحله دوم – HTML

HTML مخفف HyperText Markup Language است. در قسمت فرانت وب سایت‌ها استفاده می شود و ساختاری را به صفحه وب می‌دهد که می‌توانید با استفاده از CSS استایل دهید و با استفاده از جاوا اسکریپت صفحه وب را تعاملی کنید.

بعد از یادگیری مفاهیم پایه HTML یادگیری مفاهیم زیر برای HTML ضروری است:

• HTML معنایی - عنصر معنایی به وضوح معنای خود را برای مرورگر و توسعه دهنده توصیف می کنند. در HTML، عنصر معنایی به آن دسته از عناصر گفته می شود که می توان از آنها برای تعریف بخش های مختلف یک صفحه وب مانند form>>، <table>، <article>، <header>، <<footer و غیره استفاده کرد.
• فرم ها و اعتبارسنجی ها - قبل از ارسال داده ها به سرور، مهم است که مطمئن شوید تمام کنترل های فرم مورد نیاز با فرمت صحیح پر شده اند. این اعتبارسنجی فرم سمت مشتری نامیده می شود و کمک می کند تا اطمینان حاصل شود که داده های ارسالی با الزامات مندرج در کنترل های فرم مختلف مطابقت دارند.
• Best Practice ها - یاد بگیرید که بهترین روش‌ها را برای نوشتن اسناد HTML را برای قابل نگهداری بودن و مقیاس پذیر بودن استفاده کنید.
• دسترسی‌پذیری - دسترسی به وب به این معنی است که وب سایت ها، ابزارها و فناوری ها به گونه ای طراحی و توسعه یافته اند که افراد دارای معلولیت بتوانند به راحتی از آنها استفاده کنند.
• مبانی سئو - سئو یا بهینه سازی موتور جستجو تکنیکی است که برای بهینه سازی وب سایت شما برای رتبه بندی بهتر در موتورهای جستجو مانند گوگل، بینگ و غیره استفاده می شود.

نقشه راه فرانت اند مرحله سوم – CSS

CSS یا Cascading Style Sheets تکنولوژی است که برای استایل دادن به ظاهر هر وب سایتی استفاده می شود. CSS یک فناوری پایه برای شبکه جهانی وب، در کنار HTML و جاوا اسکریپت است.

بعد از یادگیری مفاهیم پایه سی اس اس یادگیری مفاهیم زیر برای CSS ضروری است ایجاد طرح بندی (layout) - flex، grid، flexbox، positioning، display box model از موضوعات کلیدی هستند که برای ساخت چیدمان در صفحات وب استفاده می شوند. توصیه می‌کنم حتما این موارد را یاد بگیرید:

• Floats
• Positioning
• Display
• Box Model
• CSS Grid
• Flex Box

طراحی وب سایت ریسپانسیو - طراحی وب ریسپانسیو تکنیکی است که صفحات وب شما را در تمام اندازه های صفحه نمایش خوب نشان می دهد. تکنیک های خاصی برای دستیابی به آن استفاده می شود به عنوان مثال. Media Queries CSS، عرض‌های درصدی، Min/Max Widths and Hieghts و غیره.

نقشه راه فرانت اند مرحله چهارم - جاوا اسکریپت

جاوا اسکریپت به شما اجازه می دهد تا ویژگی تعاملی را به صفحات خود اضافه کنید. نمونه‌های رایجی که ممکن است در وب‌سایت‌ها دیده باشید عبارتند از اسلایدر (طراحی اسلایدر)، تعامل کلیک، پنجره‌های بازشو و غیره.

بعد از ادگیری مفاهیم پایه JS یادگیری مفاهیم زیر برای JS ضروری است:

• DOM - Document Object Model) _ DOM) یک رابط برنامه نویسی است که برای اسناد HTML و XML ساخته شده است. صفحه‌ای را نشان می‌دهد که به برنامه‌ها و اسکریپت‌ها اجازه می‌دهد تا ساختار، محتوا و سبک سند را به‌صورت پویا به‌روزرسانی کنند. با DOM به راحتی می‌توانیم به برچسب‌ها، شناسه‌ها، کلاس‌ها، ویژگی‌ها و غیره دسترسی داشته باشیم و آن‌ها را دستکاری کنیم.
• واکشی API - Ajax تکنیکی است که به ما امکان می دهد داده ها را به صورت ناهمزمان از سرورها ارسال و دریافت کنیم. به عنوان مثال، به روز رسانی نمایه کاربر یا واکشی ناهمزمان لیست محصولات جستجو شده بدون بارگیری مجدد صفحه. ایجکس چیست؟
• جاوا اسکریپت مدرن - ECMAScript 2015 یا ES2015 به روز رسانی قابل توجهی برای زبان برنامه نویسی جاوا اسکریپت است. این اولین به روز رسانی اصلی این زبان از زمان ES5 است که در سال 2009 استاندارد شد.
• مفاهیم جاوا اسکریپت - مفاهیمی مانند Hoisting، Event Bubbling، Scope، Prototype، Shadow DOM و strict را بیاموزید و درک کنید.

نقشه راه فرانت اند مرحله پنجم - سیستم های کنترل نسخه

سیستم‌های کنترل نسخه به شما امکان می‌دهند تغییرات در پایگاه کد/فایل‌های خود را در طول زمان پیگیری کنید. آنها به شما اجازه می دهند بدون هیچ مشکلی به برخی از نسخه های قبلی پایگاه کد بازگردید. همچنین، آن‌ها به همکاری به افرادی که روی یک پروژه کار می‌کنند کمک می‌کنند – اگر تا به حال با افراد دیگری در پروژه‌ای همکاری کرده‌اید، ممکن است از قبل از کپی کردن و ادغام تغییرات از شخص دیگری در پایگاه کد خود با ناامیدی مواجه شده باشید. سیستم های کنترل نسخه به شما این امکان را می دهند که از شر این مشکل خلاص شوید.

سیستم‌های کنترل نسخه شامل مفاهیم زیر هستند:

• Git - Git یک سیستم کنترل نسخه توزیع شده رایگان و منبع باز است که برای مدیریت همه چیز از پروژه های کوچک تا بسیار بزرگ با سرعت و کارایی طراحی شده است.
• خدمات میزبانی Repo - سرویس های میزبانی مخزن مختلفی وجود دارد که معروف ترین آنها GitHub، GitLab و BitBucket است. من ایجاد یک حساب کاربری در GitHub را توصیه می کنم زیرا بیشتر کارهای OpenSource در آنجا انجام می شود و بیشتر توسعه دهندگان در آنجا هستند.
• GitHub - GitHub یک ارائه دهنده میزبانی اینترنت برای توسعه نرم افزار و کنترل نسخه با استفاده از Git است. این کنترل نسخه توزیع شده و عملکرد مدیریت کد منبع Git را به همراه ویژگی های خاص خود ارائه می دهد.
• GitLab - GitLab یک ارائه دهنده میزبانی اینترنت برای توسعه نرم افزار و کنترل نسخه با استفاده از Git است. این کنترل نسخه توزیع شده و عملکرد مدیریت کد منبع Git را به همراه ویژگی های خاص خود ارائه می دهد.
• BitBucket - BitBucket یک ارائه دهنده میزبانی اینترنت برای توسعه نرم افزار و کنترل نسخه با استفاده از Git است. این کنترل نسخه توزیع شده و عملکرد مدیریت کد منبع Git را به همراه ویژگی های خاص خود ارائه می دهد.

نقشه راه فرانت اند مرحله ششم - دانش امنیت وب

امنیت وب به اقدامات حفاظتی که توسط توسعه دهندگان برای محافظت از برنامه های کاربردی وب در برابر تهدیدهایی که می تواند بر تجارت تأثیر بگذارد، اطلاق می شود. که شامل موارد زیر است:

• HTTPS - HTTPS روشی امن برای ارسال داده بین وب سرور و مرورگر است. پروتکل امن انتقال ابرمتن (HTTPS) نسخه ایمن HTTP است که پروتکل اولیه ای است که برای ارسال داده بین مرورگر وب و وب سایت استفاده می شود. HTTPS به منظور افزایش امنیت انتقال داده ها رمزگذاری شده است. این امر به ویژه هنگامی مهم است که کاربران داده های حساس را منتقل می کنند، مانند ورود به حساب بانکی، سرویس ایمیل یا ارائه دهنده بیمه سلامت.
• خط مشی امنیت محتوا - سیاست امنیتی محتوا یک استاندارد امنیتی رایانه ای است که برای جلوگیری از اسکریپت بین سایتی، کلیک جک و سایر حملات تزریق کد ناشی از اجرای محتوای مخرب در زمینه صفحه وب قابل اعتماد معرفی شده است.
• CORS - اشتراک‌گذاری منابع متقاطع (CORS) یک مکانیسم مبتنی بر هدر HTTP است که به سرور اجازه می‌دهد هر منبعی (دامنه، طرح یا پورت) غیر از منبع خود را که مرورگر باید از طریق آن اجازه بارگیری منابع را بدهد، نشان دهد.
• خطرات امنیتی OWASP - OWASP یا Open Web Application Security Project یک انجمن آنلاین است که مقالات، متدولوژی ها، اسناد، ابزارها و فن آوری های آزادانه را در زمینه امنیت برنامه های کاربردی وب تولید می کند.

نقشه راه فرانت اندمرحله هفتم – Package Manager

مدیریت بسته به شما این امکان را می دهند که وابستگی هایی (کد خارجی نوشته شده توسط شما یا شخص دیگری) را که پروژه شما برای درست کار کردن به آن نیاز دارد، مدیریت کنید. که شامل موارد زیر است که می‌توانید به یکی یا همه آن‌ها مسلط شوید:

• Npm - npm یک مدیر بسته برای زبان برنامه نویسی جاوا اسکریپت است که توسط npm نگهداری می شود. npm مدیر بسته پیش فرض برای اجرا در محیط Node.js است.
• Yarn - Yarn یک سیستم بسته بندی نرم افزاری است که در سال 2016 توسط فیس بوک برای محیط اجرا Node.js  و JavaScript توسعه یافته است که سرعت، ثبات، ثبات و امنیت را به عنوان جایگزینی برای npm فراهم می کند.
• Pnpm - PNPM یک مدیر بسته جایگزین برای Node.js است که مخفف عبارت Performant NPM است. هدف اصلی PNPM این است که تمام بسته ها را در یک فروشگاه جهانی (متمرکز) نگهداری کند و در صورت نیاز توسط پروژه های دیگر، با ایجاد پیوندهای سخت از آن ها استفاده کند.

مسیر فرانت اند مرحله هشتم - معماری CSS

مدیریت CSS در سیستم‌های بزرگ و پیچیده بسیار دشوار است. روش های مختلفی برای نوشتن CSS وجود دارد که امکان نوشتن CSS با قابلیت نگهداری بیشتر را فراهم می کند.

BEM - متدولوژی Block, Element, Modifier (که معمولاً BEM نامیده می شود) یک قرارداد نامگذاری محبوب برای کلاس ها در HTML و CSS است. که توسط تیم Yandex توسعه یافته است، هدف آن کمک به توسعه دهندگان برای درک بهتر رابطه بین HTML و CSS در یک پروژه خاص است.

مسیر فرانت اند مرحله نهم - پیش پردازنده‌های CSS

پیش پردازنده های CSS زبان های برنامه نویسی هستند که قابلیت های پیش فرض CSS را گسترش می دهند. آنها ما را قادر می سازند تا از منطق در کدهای CSS خود مانند متغیرها، تودرتو، وراثت، مخلوط ها، توابع و عملیات ریاضی استفاده کنیم.

Sass - Sass یک زبان برنامه نویسی پیش پردازشگر است که به صورت Cascading Style Sheets تفسیر یا کامپایل می شود. این به شما امکان می دهد CSS قابل نگهداری بنویسید و ویژگی هایی مانند متغیر، تودرتو، میکسین، افزونه، توابع، حلقه ها، شرطی ها و غیره را ارائه می دهد.

PostCSS - PostCSS ابزاری برای تبدیل استایل ها با افزونه های JS است. این پلاگین ها می توانند CSS شما را Lint کنند، از متغیرها و میکسین ها پشتیبانی کنند، تصاویر درون خطی و موارد دیگر را انتقال دهند

نقشه راه فرانت اند مرحله دهم – Build Tools

Task runner ها به طور خودکار دستورات را اجرا می کنند و فرآیندها را در پشت صحنه انجام می دهند. این به خودکارسازی گردش کار شما با انجام کارهای روزمره و تکراری کمک می کند، در غیر این صورت زمان زیادی را برای کارهای تکراری باید تلف کنید.

کاربردهای متداول task runner ها شامل وظایف توسعه متعددی مانند:

• چرخش سرورهای توسعه
• کامپایل کردن کد (مثلاً SCSS به CSS)
• ارائه فایل ها از یک پورت محلی در رایانه شما

Build toolها شامل موارد زیر هستند :

• Linters formatters - Linter ابزاری است که برای تجزیه و تحلیل کد و کشف اشکالات، خطاهای نحوی، ناسازگاری های سبکی و ساختارهای مشکوک استفاده می شود. Linterهای محبوب برای جاوااسکریپت شامل ESLint، JSLint و JSHint است.

دو Linter معروف :

Prettier - Prettier یک فرمت‌کننده کد نظری با پشتیبانی از طرحواره‌های جاوا اسکریپت، HTML، CSS، YAML، Markdown، GraphQL است.

ESLint - با ESLint می توانید استاندارد کدگذاری را با استفاده از مجموعه خاصی از قوانین مستقل تحمیل کنید.

• Task Runners - Task Runner ابزارهایی برای ساده کردن برخی از وظایف خسته کننده توسعه هستند، مانند خودکارسازی کامپایل sass/scss، بسته بندی دارایی ها، کد منبع و بارگذاری مجدد سرور محلی.

اسکریپت های npm - اسکریپت های npm ورودی هایی در قسمت اسکریپت های فایل package.json هستند. فیلد اسکریپت ها یک شی را در خود جای می دهد که می توانید دستورات و اسکریپت های مختلفی را که می خواهید در معرض نمایش قرار دهید را مشخص کنید.

• باندلرهای ماژول - باندلر ماژول ابزاری است که تکه‌هایی از جاوا اسکریپت و وابستگی‌های آن‌ها را می‌گیرد و آن‌ها را در یک فایل واحد، معمولاً برای استفاده در مرورگر، جمع می‌کند. ممکن است از ابزارهایی مانند Browserify، Webpack، Rollup یا یکی از ابزارهای دیگر استفاده کرده باشید. معمولاً با یک فایل ورودی شروع می شود و از آنجا همه کدهای مورد نیاز برای آن فایل ورودی را جمع می کند.

Vite - Vite یک ابزار ساخت است که هدف آن ارائه یک تجربه توسعه سریعتر و ناب برای پروژه های وب مدرن است.

Esbuild - ابزارهای ساخت کنونی ما برای وب 10-100 برابر کندتر از آنچه می تواند باشد است. هدف اصلی پروژه esbuild bundler ایجاد دوره جدیدی از عملکرد ابزار ساخت و ایجاد یک باندلر مدرن با استفاده آسان در طول مسیر است.

WebPack - Webpack یک بسته‌ بندی کننده ماژول است. هدف اصلی آن بسته‌بندی فایل‌های جاوا اسکریپت برای استفاده در مرورگر است، اما همچنین می‌تواند تقریباً هر منبع یا دارایی را تبدیل یا بسته‌بندی کند.

Rollup - Rollup یک بسته ماژول برای جاوا اسکریپت است که قطعات کوچکی از کد را در چیزی بزرگتر و پیچیده تر، مانند یک کتابخانه یا برنامه، کامپایل می کند.

Parcel - Parcel یک بسته نرم افزاری وب است که با تجربه توسعه دهنده آن متمایز شده است. با استفاده از پردازش چند هسته‌ای، عملکرد فوق‌العاده سریعی را ارائه می‌دهد و نیاز به پیکربندی صفر دارد.

نقشه راه فرانت اند مرحله یازدهم - یک فریمورک انتخاب کنید

فریمورک های وب برای نوشتن برنامه های کاربردی وب طراحی شده اند. فریمورک ها مجموعه ای از کتابخانه ها هستند که به توسعه یک محصول نرم افزاری یا وب سایت کمک می کنند. فریم ورک های توسعه برنامه های کاربردی وب مجموعه ای از ابزارهای مختلف هستند. فریم ورک ها بسته به وظایف تعیین شده، از نظر قابلیت ها و عملکردهایشان متفاوت هستند. آنها ساختار را تعریف می کنند، قوانین را ایجاد می کنند و ابزارهای توسعه مورد نیاز را فراهم می کنند.

• React - React محبوب‌ترین کتابخانه JavaScript فرانت برای ساخت رابط‌های کاربری است. React همچنین می‌تواند با استفاده از Node روی سرور رندر کند و با استفاده از React Native، برنامه‌های موبایل را تقویت کند.
• Angular - Angular یک چارچوب توسعه فرانت‌اند مبتنی بر کامپوننت است که بر اساس TypeScript ساخته شده است که شامل مجموعه‌ای از کتابخانه‌های به خوبی یکپارچه است که شامل ویژگی‌هایی مانند مسیریابی، مدیریت فرم‌ها، ارتباط مشتری-سرور و غیره است. (آموزش انگولار (angular) دوره پروژه محور فروشگاه اینترنتی پیشرفته)
• Vue - Vue.js یک فریمورک جاوا اسکریپت منبع باز برای ساخت رابط های کاربری و برنامه های تک صفحه ای است. این عمدتا بر روی توسعه front end متمرکز است.
• Svelte - Svelte یک فریمورک جاوا اسکریپت است که برخلاف Vue و React از تغییر وضعیت DOM استفاده نمی‌کند، اما در عوض می‌داند که در صورت تغییر وضعیت دقیقاً چه چیزی و کجا را به‌روزرسانی کند.
• SolidJS - Solid یک جعبه ابزار جاوا اسکریپت واکنشی برای ساخت رابط های کاربری بدون DOM مجازی است. برای اطمینان از اینکه فقط کد مربوطه در هنگام به‌روزرسانی وضعیت اجرا می‌شود، یک بار قالب‌ها را به گره‌های DOM واقعی کامپایل می‌کند و تغییرات را در واکنش‌های ریز دانه‌بندی می‌کند.

بسته به نیاز شما باید یکی از این فریمورک‌ها را بلد باشید.

نقشه راه فرانت اند مرحله دوازده - CSS مدرن

نحوه نوشتن CSS در برنامه های کاربردی پیشرفته مدرن کاملاً با روشی که قبلاً CSS می نوشتیم متفاوت است. در CSS مدرن روش هایی مانند Styled Components، CSS Modules، Styled JSX، Emotion و غیره وجود دارد.

• Styled components - Styled-components یک کتابخانه CSS-in-JS است که به شما امکان می دهد CSS معمولی بنویسید و آن را به اجزای جاوا اسکریپت متصل کنید. با استفاده از styled-components، می‌توانید به جای یادگیری ساختار استایل جدید، از CSS که قبلاً با آن آشنا هستید، استفاده کنید.
• CSS Modules - فایل‌های CSS که در آن‌ها نام کلاس‌ها و نام‌های انیمیشن به‌طور پیش‌فرض به صورت محلی درج شده‌اند.
• Styled JSX - Styled JSX یک کتابخانه CSS-in-JS است که به شما امکان می دهد CSS کپسوله شده و محدوده بندی شده را برای استایل دادن به اجزای خود بنویسید. سبک‌هایی که برای یک جزء معرفی می‌کنید بر سایر مؤلفه‌ها تأثیر نمی‌گذارند، و به شما امکان می‌دهند بدون نگرانی در مورد عوارض جانبی ناخواسته، استایل‌ها را اضافه، تغییر و حذف کنید.
• Emotion - Emotion کتابخانه ای است که برای نوشتن سبک های css با جاوا اسکریپت طراحی شده است. این ترکیب سبک قدرتمند و قابل پیش بینی را علاوه بر تجربه توسعه دهنده عالی با ویژگی هایی مانند نقشه منبع، برچسب ها و ابزارهای آزمایشی ارائه می دهد. از هر دو استایل دهی به روش رشته‌ای و شی‌ای پشتیبانی می شوند.

یکی از روش‌های بالا را بسته به نیاز خود یاد بگیرید.

نقشه راه فرانت اند مرحله سیزدهم – فریمورک‌های CSS

یک فریمورک CSS یک شیوه نامه CSS کاملاً کاربردی را در اختیار کاربر قرار می دهد و به آنها اجازه می دهد تا با کدگذاری HTML با کلاس ها، ساختار و شناسه های مناسب یک صفحه وب ایجاد کنند. کلاس‌هایی برای ویژگی‌های یک وب‌سایت محبوب مانند فوتر، اسلایدر، منوی ناوبری، منوی همبرگر، طرح‌بندی‌های مبتنی بر ستون و غیره قبلاً در فریمورک گنجانده شده‌اند.

• Tailwind CSS - چارچوب CSS که کلاس‌های CSS را فراهم می‌کند تا به شما کمک کند تا با این اجزای قالب‌بندی کنید. flex، pt-4، text-center و rotate-90 که می توانند برای ساخت هر طرحی، مستقیماً در نشانه گذاری شما ساخته شوند.
• Mantine - Mantine یک کتابخانه اجزای React با بیش از 100 جزء قابل تنظیم و 40 قلاب است که شما را در هر شرایطی پوشش می دهد.
• Chakra UI - Chakra UI یک کتابخانه کامپوننت ساده، ماژولار و در دسترس است که بلوک های ساختمانی مورد نیاز برای ساخت برنامه های React را در اختیار شما قرار می دهد.
• Material UI - Material-UI یک فریمورک منبع باز است که دارای اجزای React است که طراحی متریال گوگل را پیاده سازی می کند.
• Daisy UI - کتابخانه کامپوننت در کنار Tailwind CSS که دارای چندین مؤلفه داخلی است.
• Radix UI - یک کتابخانه کامپوننت UI منبع باز برای ساخت سیستم های طراحی با کیفیت بالا و در دسترس و برنامه های وب.

یکی از روش‌های بالا را بسته به نیاز خود یاد بگیرید.

مسیر فرانت اند مرحله چهاردهم - آزمایش برنامه

قبل از اینکه برنامه خود را به کاربران تحویل دهید، باید مطمئن شوید که برنامه شما الزاماتی را که برای آن طراحی شده است برآورده می کند، و هیچ چیز عجیب و غریب و ناخواسته ای انجام نمی دهد (به نام «باگ»). برای انجام این کار، ما برنامه های خود را به روش های مختلف "آزمایش" می کنیم.

• Jest - Jest یک فریمورک تست جاوا اسکریپت لذت بخش با تمرکز بر سادگی است. با پروژه های Babel، TypeScript، Node، React، Angular، Vue و موارد دیگر کار می کند.
• React Testing Library - کتابخانه React Testing یک راه حل بسیار سبک وزن برای آزمایش اجزای React است. این توابع کاربردی نور را در بالای react-dom و react-dom/test-utils فراهم می کند، به گونه ای که روش های تست بهتر را تشویق می کند. اصل راهنمای اصلی آن این است : هرچه تست‌های شما بیشتر شبیه روش استفاده از نرم‌افزار شما باشد، اعتماد به نفس بیشتری می‌توانند به شما بدهند.
• Cypress - فریمورک Cypress یک فریمورک آزمایشی سرتاسر مبتنی بر جاوا اسکریپت است که بر روی Mocha ساخته شده است - یک فریمورک آزمایشی غنی از ویژگی های جاوا اسکریپت که در مرورگر و در مرورگر اجرا می شود و آزمایش ناهمزمان را ساده و راحت می کند. همچنین از یک کتابخانه ادعایی BDD/TDD و یک مرورگر برای جفت شدن با هر چارچوب تست جاوا اسکریپت استفاده می کند.
• Playwright - Playwright یک کتابخانه اتوماسیون تست منبع باز است که در ابتدا توسط همکاران مایکروسافت توسعه یافت. این برنامه از زبان های برنامه نویسی مانند جاوا، پایتون، سی شارپ و NodeJS پشتیبانی می کند. Playwright با مجوز آپاچی 2.0 عرضه می شود و در NodeJS با Javascript/Typescript محبوبیت بیشتری دارد.

شما می‌توانید با هر مدام از روش‌های بالا پروژه خود را تست کنید.

مسیر فرانت اند مرحله پانزده - استراتژی های احراز هویت

استراتژی‌های احراز هویت روش‌ها یا تکنیک‌هایی هستند که برای تأیید هویت یک کاربر یا سیستم به منظور اعطای دسترسی به یک منبع محافظت شده استفاده می‌شوند. چندین استراتژی مختلف برای احراز هویت وجود دارد که می توان از آنها استفاده کرد، از جمله:

• احراز هویت پایه
• احراز هویت مبتنی بر نشست
• احراز هویت مبتنی بر توکن
• احراز هویت JWT
• OAuth
• SSO

لزوماً لازم نیست همه اینها را یاد بگیرید، نحوه پیاده سازی و نکات مهم را ابتدا یاد بگیرید. اما مهم است که بدانیم آنها چیست و چگونه کار می کنند. این به شما کمک می کند هنگام انتخاب استراتژی احراز هویت برای برنامه خود تصمیمات بهتری بگیرید.

نقشه راه فرانت اند مرحله شانزدهم - Web Components

Web Components مجموعه‌ای از فن‌آوری‌های مختلف است که به شما امکان می‌دهد عناصر سفارشی قابل استفاده مجدد را ایجاد کنید - با عملکرد آنها دور از بقیه کد شما - و از آنها در برنامه‌های وب خود استفاده کنید.

• HTML Templates - عنصر <template> HTML مکانیزمی برای نگهداری HTML است که نباید بلافاصله هنگام بارگیری صفحه ارائه شود، اما ممکن است متعاقباً در طول زمان اجرا با استفاده از جاوا اسکریپت نمونه سازی شود. یک الگو را به عنوان یک قطعه محتوایی در نظر بگیرید که برای استفاده بعدی در سند ذخیره می شود.
• Custom Elements - یکی از ویژگی‌های کلیدی استاندارد Web Components، توانایی ایجاد عناصر سفارشی است که عملکرد شما را در یک صفحه HTML محصور می‌کند، به‌جای اینکه مجبور باشید به یک دسته طولانی و تودرتو از عناصر اکتفا کنید که با هم یک ویژگی صفحه سفارشی را ارائه می‌دهند.
• Shadow DOM - یکی از جنبه‌های مهم اجزای وب، کپسوله‌سازی است – توانایی پنهان نگه داشتن ساختار نشانه‌گذاری، سبک، و رفتار پنهان و جدا از سایر کدهای صفحه به طوری که قسمت‌های مختلف با هم برخورد نکنند، و کد را می‌توان خوب و تمیز نگه داشت. Shadow DOM API یک بخش کلیدی است که راهی برای پیوست کردن یک DOM مخفی جدا شده به یک عنصر را فراهم می کند.

نقشه راه فرانت اند مرحله هفدهم - Type Checkers

Type checker به توسعه دهندگان کمک می کند تا با افزودن انواع کد، تلاش برای کشف انواع خطاها در کد و سپس حذف آنها در طول زمان کامپایل، کدهایی را با اشکالات کمتر بنویسند. Flow و TypeScript دو ​​بررسی کننده نوع استاتیک محبوب برای جاوا اسکریپت هستند.

• TypeScript - TypeScript یک زبان برنامه نویسی با تایپ قوی است که بر اساس جاوا اسکریپت ساخته شده و ابزارهای بهتری را در هر مقیاسی در اختیار شما قرار می دهد.

نقشه راه فرانت اند مرحله هجدهم - Progressive Web Apps

برنامه های وب پیشرو (تک صفحه ای - PWA) وب سایت هایی هستند که به تدریج بهبود می یابند تا مانند برنامه های نصب شده و بومی در پلتفرم های پشتیبانی کننده عمل کنند، در حالی که مانند وب سایت های معمولی در سایر مرورگرها کار می کنند.

• Web Storage API - Web Storage API مکانیسم هایی را برای ذخیره جفت های کلید-مقدار در یک مرورگر وب فراهم می کند. این شامل دو شی ذخیره سازی است: localStorage و sessionStorage که به شما امکان می‌دهند داده‌ها را در سمت کلاینت ذخیره کرده و به ترتیب در چندین جلسه مرورگر حفظ کنید. (آموزش Web Workers API یا اجرا در پس زمینه در html)
  Web Storage API به گونه ای طراحی شده است که استفاده از آن ساده و آسان باشد و به طور گسترده در مرورگرهای وب مدرن پشتیبانی می شود. اغلب به عنوان جایگزینی برای کوکی ها استفاده می شود، زیرا اجازه می دهد تا مقادیر بیشتری از داده ها ذخیره شود و از نظر عملکرد کارآمدتر است.
• Web Sockets - سوکت های وب فناوری است که امکان برقراری ارتباط تمام دوبلکس را از طریق یک اتصال TCP فراهم می کند. این امکان ارتباط بی‌درنگ و دوطرفه بین یک کلاینت و یک سرور را فراهم می‌کند و معمولاً در برنامه‌هایی استفاده می‌شود که به ارتباطات پرسرعت و با تأخیر کم نیاز دارند، مانند بازی‌های آنلاین و جریان داده در زمان واقعی.
  Web Sockets از یک اتصال دائمی بین یک کلاینت و یک سرور استفاده می کند که امکان تبادل مداوم داده ها را بدون نیاز به مشتری برای ارسال درخواست های اضافی به سرور فراهم می کند. این باعث می شود که آن را کارآمدتر و سریعتر از سایر فناوری ها، مانند HTTP، که نیاز به ارسال یک درخواست جدید برای هر قطعه داده دارد، کند.
  Web Sockets توسط اکثر مرورگرهای وب مدرن پشتیبانی می شود و می توان آن را با انواع زبان‌های برنامه نویسی و فریمورک‌ها استفاده کرد.
• Server Sent Events - رویدادهای ارسال شده از سرور (SSE) فناوری است که به سرور وب اجازه می‌دهد تا داده‌ها را در زمان واقعی به مشتری ارسال کند. از اتصال HTTP برای ارسال جریانی از داده ها از سرور به کلاینت استفاده می کند و مشتری می تواند به این رویدادها گوش دهد و هنگام دریافت آنها اقدام کند.
  SSE برای برنامه‌هایی که نیاز به به‌روزرسانی‌های هم‌زمان دارند، مانند سیستم‌های چت، نمادهای سهام و فید رسانه‌های اجتماعی مفید است. این یک راه ساده و کارآمد برای ایجاد یک ارتباط طولانی مدت بین یک کلاینت و یک سرور است و توسط اکثر مرورگرهای وب مدرن پشتیبانی می شود.
  برای استفاده از SSE، کلاینت باید یک شی EventSource ایجاد کند و URL اسکریپت سمت سرور را که رویدادها را ارسال می کند، مشخص کند. سپس سرور می تواند رویدادها را با نوشتن آنها در جریان پاسخ با قالب بندی مناسب ارسال کند.
• Service Workers - Service Workers نوعی وب کارگر است که به عنوان یک پروکسی بین یک صفحه وب و شبکه عمل می کند و به توسعه دهندگان وب اجازه می دهد تا برنامه های آفلاین و قابل اعتماد را بسازند. Service Workers می توانند درخواست های شبکه را رهگیری کنند، به حافظه پنهان دسترسی داشته باشند و بر اساس منابع موجود در مورد نحوه پاسخگویی به درخواست تصمیم گیری کنند.
  Service Workers در جاوا اسکریپت نوشته شده و توسط یک صفحه وب ثبت می شود. پس از ثبت نام، آنها می توانند صفحه و تمام درخواست های آن را کنترل کنند، حتی زمانی که صفحه در مرورگر باز نیست. این به Service Workers اجازه می دهد تا ویژگی هایی مانند push notification، همگام سازی پس زمینه و پشتیبانی آفلاین را فعال کنند.
  Service Workers توسط اکثر مرورگرهای وب مدرن پشتیبانی می‌شوند و آنها جزء ضروری progressive web applications (PWA) هستند.
• Location API - Geolocation API یک API وب است که دسترسی به داده های مکان دستگاه مانند طول و عرض جغرافیایی را فراهم می کند. این به توسعه دهندگان وب (وب 3 چیست؟) اجازه می دهد تا برنامه های مبتنی بر مکان مانند نقشه برداری و اشتراک گذاری موقعیت مکانی را با استفاده از GPS، Wi-Fi و سایر حسگرهای دستگاه برای تعیین موقعیت مکانی کاربر بسازند.
  برای استفاده از Geolocation API، یک صفحه وب ابتدا باید از کاربر اجازه دسترسی به موقعیت مکانی خود را درخواست کند. در صورت اعطای مجوز، صفحه می‌تواند از شی navigator.geolocation برای دسترسی به داده‌های مکان دستگاه استفاده کند. API چندین روش برای بدست آوردن موقعیت فعلی کاربر، مشاهده تغییرات مکان و محاسبه فاصله بین دو مکان ارائه می دهد.
• Notifications API - Notifications API یک API وب است که به صفحات وب اجازه می دهد اعلان های سطح سیستم را به کاربر نمایش دهند. از این اعلان‌ها می‌توان برای آگاه کردن کاربر از رویدادهای مهم، مانند پیام‌های جدید یا به‌روزرسانی‌ها، حتی زمانی که صفحه وب در مرورگر باز نیست، استفاده کرد.
  برای استفاده از Notifications API، یک صفحه وب ابتدا باید برای نمایش اعلان‌ها از کاربر اجازه درخواست کند. در صورت اعطای مجوز، صفحه می‌تواند از سازنده Notification برای ایجاد اعلان جدید و نمایش آن به کاربر استفاده کند. این اعلان می تواند شامل عنوان، متن، متن و نماد باشد و می توان آن را با گزینه هایی مانند مهلت زمانی و یک کلیک سفارشی کرد.
• Device Orientation API - Device Orientation API یک API وب است که دسترسی به جهت گیری و داده های حرکتی دستگاه، مانند پیچ، رول، و انحراف آن را فراهم می کند. این به توسعه دهندگان وب اجازه می دهد تا برنامه هایی بسازند که می توانند به جهت گیری و حرکت دستگاه پاسخ دهند، مانند بازی های واقعیت افزوده و کنترل حرکت.
  برای استفاده از Device Orientation API، یک صفحه وب ابتدا باید از کاربر اجازه دسترسی به داده های جهت گیری دستگاه را درخواست کند. در صورت اعطای مجوز، صفحه می تواند از شی DeviceOrientationEvent برای دسترسی به داده های جهت گیری دستگاه و پاسخ به تغییرات جهت گیری استفاده کند. API چندین ویژگی را برای دسترسی به جهت گیری و داده های حرکتی دستگاه و همچنین رویدادهایی برای تشخیص تغییرات جهت ارائه می دهد.
  Device Orientation API توسط اکثر مرورگرهای وب مدرن پشتیبانی می شود و اغلب همراه با سایر APIها مانند Geolocation API برای ساخت برنامه های مبتنی بر مکان استفاده می شود.
• Payments - Payment Request API یک API وب است که به توسعه دهندگان وب اجازه می دهد تا جریان های پرداخت را در برنامه های وب خود ایجاد کنند. این یک رابط استاندارد و مبتنی بر مرورگر برای جمع آوری اطلاعات پرداخت و حمل و نقل از کاربر ارائه می دهد و از طیف گسترده ای از روش های پرداخت، از جمله کارت های اعتباری، کارت های نقدی و کیف پول های دیجیتال پشتیبانی می کند.
  برای استفاده از Payment Request API، یک صفحه وب ابتدا باید یک شی PaymentRequest ایجاد کند و گزینه های پرداخت و ارسال را که در دسترس کاربر است مشخص کند. سپس صفحه می تواند با فراخوانی متد show() روی شی PaymentRequest، واسط درخواست پرداخت را فراخوانی کند. سپس کاربر می‌تواند گزینه‌های پرداخت و ارسال دلخواه خود را انتخاب کرده و پرداخت را تأیید کند، در این مرحله، API درخواست پرداخت، یک شی پاسخ پرداخت را برمی‌گرداند که می‌تواند برای تکمیل تراکنش استفاده شود.
  API درخواست پرداخت توسط اکثر مرورگرهای وب مدرن پشتیبانی می شود و به گونه ای طراحی شده است که هم برای توسعه دهنده و هم برای کاربر ساده و کارآمد باشد.
• Credentials API - Credential Management API یک API وب است که به توسعه دهندگان وب اجازه می دهد تا جریان های ورود مبتنی بر رمز عبور و فدرال را در برنامه های خود ادغام کنند. این یک رابط استاندارد و مبتنی بر مرورگر برای ذخیره و بازیابی اطلاعات کاربری، مانند ترکیب نام کاربری و رمز عبور و توکن‌های OAuth ارائه می‌کند.
  برای استفاده از Credential Management API، یک صفحه وب ابتدا باید یک آبجکت Credential ایجاد کند و اعتبارنامه هایی را که کاربر می خواهد ذخیره کند را مشخص کند. سپس صفحه می تواند از شی navigator.credentials برای ذخیره و بازیابی اعتبار کاربر استفاده کند. API چندین روش برای ذخیره و بازیابی اعتبارنامه ها و همچنین برای ترغیب کاربر به ورود یا ثبت نام ارائه می دهد.
  Credential Management API توسط اکثر مرورگرهای وب مدرن پشتیبانی می‌شود و برای بهبود امنیت و قابلیت استفاده جریان‌های ورود با اجازه دادن به کاربر برای ذخیره و استفاده مجدد از اعتبار خود در چندین سایت و دستگاه طراحی شده است.
• PRPL Pattern - الگوی PRPL یک الگوی بهینه سازی عملکرد برای برنامه های کاربردی وب است که بر به حداقل رساندن زمان لازم برای رندر اولیه یک صفحه وب تمرکز دارد. مخفف Push، Render، Pre-cache و Lazy-load است و شامل مراحل زیر است:

1. Push: تحویل منابع مهم مانند HTML، CSS و جاوا اسکریپت را در اسرع وقت به مشتری در اولویت قرار دهید.
2. Render: به محض دریافت منابع مهم، شروع به رندر کردن صفحه وب می‌کند، حتی اگر برخی از منابع غیر مهم هنوز در حال دانلود هستند.
3. Pre-cache: منابع غیر بحرانی را در پس زمینه از پیش ذخیره کنید تا در صورت نیاز در دسترس باشند.
4. Lazy-load: بارگذاری منابع غیر حیاتی را تا زمانی که به آنها نیاز است، به تعویق بیاندازید، مانند زمانی که کاربر به آنها پیمایش می کند یا با آنها در تعامل است. (بارگذاری تنبل (lazy load - لیزی لود) چیست؟)

الگوی PRPL برای بهبود عملکرد درک شده یک صفحه وب با کاهش زمان لازم برای تعاملی شدن صفحه طراحی شده است. این به ویژه برای برنامه هایی مفید است که در شبکه های کند یا غیرقابل اعتماد ارائه می شوند، زیرا به صفحه اجازه می دهد تا در سریع ترین زمان ممکن رندر شود و سپس منابع باقی مانده را به تدریج بارگذاری کند.

• RAIL Model - مدل RAIL یک مدل بهینه سازی عملکرد برای برنامه های کاربردی وب است که بر بهبود عملکرد درک شده یک صفحه وب تمرکز دارد. مخفف عبارت Response، Animation، Idle و Load است و چهار هدف اجرایی زیر را شامل می شود:

1. Response: مدت زمانی که طول می کشد تا صفحه وب به ورودی کاربر پاسخ دهد باید کمتر از 100 میلی ثانیه باشد.
2. Animation: مدت زمان لازم برای اجرای یک انیمیشن باید کمتر از 10 میلی ثانیه باشد.
3. Idle: صفحه وب باید از زمان بیکاری برای انجام کارهای غیر حیاتی استفاده کند.
4. Load: مدت زمانی که طول می کشد تا صفحه وب به طور کامل بارگذاری شود باید کمتر از 1 ثانیه باشد.

مدل RAIL برای ارائه چارچوبی برای بهینه سازی عملکرد یک صفحه وب با تمرکز بر چهار حوزه کلیدی که بر ادراک کاربر از عملکرد تأثیر می گذارد، طراحی شده است. به ویژه برای برنامه هایی که به سطوح بالایی از تعامل نیاز دارند، مانند بازی ها و برنامه های رسانه های اجتماعی مفید است.

• Performance Metrics - معیارهای عملکرد وب، معیارهای کمی عملکرد یک صفحه وب یا برنامه هستند. آنها برای ارزیابی سرعت و کارایی یک صفحه وب استفاده می شوند و می توانند به شناسایی زمینه های بهبود وب سایت کمک کنند. برخی از معیارهای رایج عملکرد وب عبارتند از:

1. زمان بارگذاری: زمانی که طول می کشد تا یک صفحه وب به طور کامل بارگذاری شود و تعاملی شود.
2. First contentful paint (FCP): مدت زمانی که طول می کشد تا اولین محتوا در صفحه ظاهر شود. (اولین بارگیری محتوایی (FCP))
3. Time to Interactive (TTI): مدت زمانی که طول می کشد تا صفحه کاملاً تعاملی شود.
4. تاخیر ورودی اول (FID): مدت زمانی که طول می کشد تا صفحه به اولین ورودی کاربر پاسخ دهد.
5. زمان مسدود کردن کل (TBT): زمانی که طول می کشد تا صفحه کاملاً تعاملی شود، با در نظر گرفتن زمان صرف شده برای مسدود کردن موضوع اصلی.

ابزارها و تکنیک های زیادی برای اندازه گیری معیارهای عملکرد وب وجود دارد، از جمله ابزارهای توسعه دهنده مرورگر، ابزارهای نظارت بر عملکرد و APIهای عملکرد وب. با ردیابی این معیارها و تجزیه و تحلیل نتایج، توسعه دهندگان وب می توانند زمینه های بهبود را شناسایی کرده و عملکرد صفحات وب خود را بهینه کنند.

• Lighthouse - Lighthouse یک ابزار منبع باز است که توسط گوگل توسعه یافته و برای بررسی عملکرد، دسترسی و سئوی صفحات وب استفاده می شود. این به عنوان یک افزونه مرورگر و به عنوان یک ابزار خط فرمان در دسترس است و می توان آن را در هر صفحه وب اجرا کرد تا گزارشی با توصیه هایی برای بهبود ایجاد کند.
  Lighthouse با شبیه‌سازی بار و تعامل یک صفحه وب و اندازه‌گیری معیارهای مختلف عملکرد، مانند زمان بارگذاری و زمان برای تعامل، کار می‌کند. همچنین مشکلات رایجی مانند اندازه‌های نادرست تصویر، متن جایگزین و لینک‌های شکسته را بررسی می‌کند.
  Lighthouse یک ابزار جامع و آسان برای شناسایی و رفع مشکلات عملکرد و دسترسی در صفحات وب ارائه می دهد. این به طور گسترده توسط توسعه دهندگان وب استفاده می شود و در بسیاری از ابزارهای توسعه محبوب ادغام شده است.
• Browser DevTools - بیشتر مرورگرها دارای ابزارهای توسعه‌دهنده داخلی هستند که به شما کمک می‌کنند وظایف خاص توسعه وب را در یک صفحه وب انجام دهید. توصیه شخصی من این است که از Chrome DevTools استفاده کنید زیرا پیشرفته ترین است و بیشترین ویژگی ها را دارد. با این حال، اگر از مرورگر دیگری استفاده می کنید، همچنان می توانید از DevTools برای اشکال زدایی برنامه وب خود استفاده کنید.
  Chrome DevTools مجموعه ای از ابزارهای توسعه وب است که در مرورگر Google Chrome تعبیه شده است. این به توسعه دهندگان وب اجازه می دهد تا با ارائه طیف وسیعی از ویژگی ها برای بازرسی و دستکاری HTML، CSS و جاوا اسکریپت صفحات وب را اشکال زدایی و بهینه سازی کنند.
  برخی از ویژگی های ارائه شده توسط Chrome DevTools عبارتند از:

1. پنل عناصر: HTML و CSS صفحه را بررسی و اصلاح کنید.
2. پنل کنسول: خطاهای جاوا اسکریپت و پیام های گزارش را مشاهده و اشکال زدایی کنید.
3. پنل شبکه: درخواست‌ها و پاسخ‌های شبکه را نظارت کرده و مسائل مربوط به عملکرد را تجزیه و تحلیل می‌کند.
4. پنل عملکرد: عملکرد صفحه را تجزیه و تحلیل کنید و گلوگاه ها را شناسایی کنید.
5. پنل برنامه: منابع صفحه مانند کوکی ها و فضای ذخیره سازی محلی را بررسی کنید.

Chrome DevTools یک ابزار قدرتمند و ضروری برای توسعه دهندگان وب است و به طور گسترده برای اشکال زدایی و بهینه سازی صفحات وب استفاده می شود. به طور مداوم با ویژگی ها و پیشرفت های جدید به روز می شود و در تمام مرورگرهای وب مدرن موجود است.

نقشه راه فرانت اند مرحله نوزدهم - Server-side rendering

رندر سمت سرور به فرآیندی اشاره دارد که سمت سرور، ساختار HTML صفحه را تکمیل می‌کند، آن را به مرورگر می‌فرستد و سپس وضعیت و رویدادها را برای تبدیل شدن به یک صفحه کاملاً تعاملی پیوند می‌دهد.

چهار فریمورک React، Angular، Vue  و Svelte جزو فریمورک‌هایی هستند که به واسطه فریمورک‌هایشان قابلیت برنامه نویسی Server Side Rendering را دارند.

• React، فریمورک Remix - Remix یک چارچوب وب تمام پشته است که به شما امکان می دهد بر روی رابط کاربری تمرکز کنید و با استانداردهای وب کار کنید تا تجربه کاربری سریع، نرم و انعطاف پذیری را ارائه دهید.
• React فریمورک NextJS - Next.js یک چارچوب توسعه منبع باز است که بر روی Node.js ساخته شده است که عملکردهای برنامه های کاربردی وب مبتنی بر React مانند رندر سمت سرور و تولید وب سایت های ثابت را امکان پذیر می کند.
• Angular فریمورک Universal - پروژه Angular Universal یک پروژه جامعه محور برای گسترش APIهای اصلی از Angular (پلتفرم-سرور) است تا توسعه دهندگان را قادر سازد تا رندر سمت سرور برنامه های Angular را انجام دهند. عمدتاً از express برای رندر صفحات در صفحات سرور node.js استفاده می کند.
• Vue فریمورک NuxtJS - Nuxt.js یک کتابخانه جاوا اسکریپت رایگان و منبع باز مبتنی بر Vue.js، Node.js، Webpack و Babel.js است. Nuxt از Next.js الهام گرفته شده است، که چارچوبی با هدف مشابه، بر اساس React.js است.
• Svelte فریمورک Svelte Kit - Svelte Kit چارچوبی برای ساخت برنامه های تحت وب با فریم ورک Svelte  است. این طراحی شده است تا یک راه حل کامل برای ساخت برنامه های وب، با پشتیبانی از رندر سمت سرور، تقسیم خودکار کد و عملکرد بهینه باشد.

نقشه راه فرانت اند مرحله بیستم - Static Site Generators

Static Site Generators ابزاری است که یک وب سایت HTML استاتیک کامل را بر اساس داده های خام و مجموعه ای از الگوها ایجاد می کند. اساساً، یک Static Site Generators ، وظیفه کدگذاری صفحات تکی HTML را به طور خودکار انجام می دهد و آن صفحات را زودتر از موعد برای ارائه به کاربران آماده می کند. از آنجایی که این صفحات HTML از پیش ساخته شده اند، می توانند خیلی سریع در مرورگرهای کاربران بارگیری شوند.

• Eleventy - Eleventy (11ty) آسان برای استفاده، ساده برای سفارشی سازی، با کارایی بالا و قدرتمند Static Site Generators با مجموعه ای مفید از افزونه ها (مانند navigation ، build-time image transformations ، cache assets) است. صفحات را می توان با انواع زبان های قالب (HTML، Markdown، JavaScript، Liquid، Nunjucks، Handlebars، Mustache، EJS، Haml، Pug یا قالب JS) ساخت و نوشت. اما همچنین امکان ایجاد پویا صفحات از داده های محلی یا منابع خارجی که در زمان ساخت کامپایل می‌شوند را نیز ارائه می‌کند. وابستگی جاوا اسکریپت سمت کلاینت صفر است.
• Astro - Astro یک چارچوب وب All-In-One برای طراحی سایت های سریع و متمرکز بر محتوا است. Astro قدرت یک چارچوب مدرن مبتنی بر مؤلفه را با عملکرد و انعطاف‌پذیری یک مولد سایت استاتیک ترکیب می‌کند.
• Component Islands: معماری جدید وب برای ساخت وب سایت های سریعتر.
• Server-first API design: هیدراتاسیون گران قیمت را از دستگاه های کاربران خود حذف کنید.
• Zero JS، به طور پیش فرض: بدون سربار زمان اجرا جاوا اسکریپت برای کاهش سرعت شما.
• Edge-ready: استقرار در هر مکانی، حتی یک زمان اجرا لبه جهانی مانند Deno یا Cloudflare.
• قابل تنظیم: Tailwind، MDX، و 100+ ادغام دیگر برای انتخاب.
• UI-agnostic: از React، Preact، Svelte، Vue، Solid، Lit و موارد دیگر پشتیبانی می کند.
• NextJS – قبلا در رابطه با آن صحبت کردیم. (ناکست جی اس (nuxt.js))
• Gatsby - گتسبی یک چارچوب متن باز مبتنی بر React با عملکرد، مقیاس پذیری و امنیت داخلی است.
• Vuepress - VuePress از دو بخش تشکیل شده است: یک Static Site Generators مینیمالیستی (پنجره جدید باز می شود) با یک سیستم موضوعی مبتنی بر Vue و API پلاگین، و یک موضوع پیش فرض که برای نوشتن اسناد فنی بهینه شده است. برای پشتیبانی از نیازهای مستندسازی پروژه های فرعی خود Vue ایجاد شده است.
• Jekyll - جکیل یک Static Site Generators است. متنی را می گیرد که به زبان نشانه گذاری مورد علاقه شما نوشته شده است و از طرح بندی برای ایجاد یک وب سایت ثابت استفاده می کند. می‌توانید ظاهر و ظاهر سایت، URL‌ها، داده‌های نمایش داده شده در صفحه و موارد دیگر را تغییر دهید.
• Hugo - Hugo سریعترین موتور وب سایت استاتیک در جهان است. این در Go (معروف به Golang) نوشته شده است و توسط bep، spf13 و دوستان توسعه یافته است.
• Nuxt js - قبلا در رابطه با آن صحبت کردیم.
• Remix - قبلا در رابطه با آن صحبت کردیم.

نقشه راه فرانت اند مرحله آخر – Graphql

GraphQL یک زبان پرس و جو برای API ها و یک زمان اجرا برای انجام آن پرس و جوها با داده های موجود شما است. GraphQL شرح کامل و قابل فهمی از داده‌های API شما ارائه می‌کند، به مشتریان این قدرت را می‌دهد که دقیقاً آنچه را که نیاز دارند و هر چیز دیگری بخواهند، تکامل APIها را در طول زمان آسان‌تر می‌کند و ابزارهای توسعه‌دهنده قدرتمند را فعال می‌کند.

• Apollo - آپولو پلتفرمی برای ایجاد یک نمودار یکپارچه، یک لایه ارتباطی است که به شما کمک می‌کند جریان داده‌ها را بین مشتریان برنامه خود (مانند برنامه‌های وب و بومی) و سرویس‌های بک‌اند مدیریت کنید.
• Relay Modern - Relay یک کلاینت جاوا اسکریپت است که در مرورگر برای واکشی داده های GraphQL استفاده می شود. این یک چارچوب جاوا اسکریپت است که توسط فیس بوک برای مدیریت و واکشی داده ها در برنامه های React ایجاد شده است. این با مقیاس پذیری در ذهن ساخته شده است تا برنامه های پیچیده ای مانند فیس بوک را تقویت کند. هدف نهایی GraphQL و Relay ارائه تعاملات پاسخ فوری UI است.