✨ نقشه راه یا Roadmap برنامهنویسی Front-End ✨📂 برنامهنویسی فرانتاند
وب، ایجاد رابط کاربری صفحات
وب است یعنی بخشی که کاربرها مستقیما با آن سروکار دارند. پیچیدگی برنامهنویسی و الگوریتممحوری بودن آن نسبت به سایر شاخههای برنامهنویسی کمتر است اما برخلاف طنزهای به کار رفته در توصیف این شاخه، کار برنامهنویس فرانت صرفا نقاشی کردن صفحات یا تعیین رنگ بکگراند و فونت
وبسایت نیست. در بسیاری از مسائل، برنامهنویس باید عناصر تعاملی جذابی ایجاد کند، از قبیل اسلایدر و منوهای ریسپانسیو که باید پیادهسازی رابط کاربری به گونهای باشد که در دستگاههای مختلف از قبیل دسکتاپ، لپتاپ و گوشی به درستی نشان داده شود. سه پایه اصلی فرانت html و css و JavaScript هستند و بعد از آن تکنولوژیهای گسترده و گوناگونی برای یادگیری وجود دارد. نقشهراهی که در زیر میآید یکی از نقشههای راه جامع است که به ترتیب از پایهایترین مباحث تا پیشرفته را شامل میشود.
۱-
زبان نشانهگذاری HTML:پایهایترین مبحث فرانت برای ایجاد عناصر و المانهای یک
وبسایت از جمله متن، تیتر، عکس و فرمها.
۲-
زبان استایلدهی CSS:زبانی ضروری که بدون آن
وبسایتهایی با ساختار زیبا وجود ندارد. وظیفه این زبان استایلدادن به صفحات است، مانند رنگها، اندازه متنها و تصاویر، ایجاد انیمیشنها و غیره. از مهمترین قابلیتهای این زبان امکان ریسپانسیو کردن
وبسایت در دستگاههای مختلف است، یعنی صفحات
وب در آنها مطابق با طول و عرض صفحه نمایش به درستی نشان داده شود.
۳-
زبان برنامهنویسی JavaScript:شما بدون این زبان میتوانید یک
وبسایت ایجاد کنید اما آن
وبسایت اصطلاحا استاتیک است. برای دینامیککردن آن قطعا به این زبان نیاز دارید. چند مثال از کاربردهای این زبان قدرتمند fetch کردن دادهها از سرور، تعریف رویدادها یا event های مختلف و قابلیت دستکاری صفحات html از طریق DOM یا Document Object Model است.
۴-
پکیجمنیجر NPM:برای حذف، نصب، بروزرسانی و مدیریت کتابخانههای Node.js ای و جاوا اسکریپتی در پروژه.
۵-
ماژول باندلر Webpack:وظیفه Bundle کردن فایلهای جاوا اسکریپتی و یک سری فایلهای دیگر مانند css را برعهده دارد. فرضا به جای ۱۰۰ فایل js همه آنها را در قالب یک فایل به شما تحویل دهد.
۶-
فریمورک Tailwind CSS:یک فریمورک utility-first برای css است و با کلاسهای بسیار زیادی که دارد، استایلدهی پروژه را نسبت به css خام بسیار سریعتر و لذتبخشتر میکند.
۷-
کتابخانه React.js:یک کتابخانه جاوا اسکریپتی محبوب برای ساخت رابط کاربری. این کتابخانه با تعریف JSX امکان ترکیب جاوا اسکریپت و html باهمدیگر را فراهم کرده و به دلیل component محور بودنش قابلیت نوشتن کدهای قابل استفاده مجدد و تجزیه پروژه به فایلها و بخشهای کوچکتر را میدهد.
۸-
زبان برنامهنویسی TypeScript:همان جاوا اسکریپت است ولی تایپ متغیرهای استاتیک و بسیاری امکانات بیشتری دارد و در نهایت کدهای آن به جاوا اسکریپت کامپایل میشود.
۹-
پیشپردازنده Sass:در واقع همان css است و تمام کدهای css را میتوان در آن زد به علاوه امکانات بسیار بیشتر که در نهایت کدهای آن به css کامپایل میشوند که توسط مرورگر قابل درک باشد.
۱۰-
فریمورک Next.js:هنگامی که سراغ این فریمورک بیایید، متوجه خواهید شد که چقدر قدرتمندتر، جذابتر، پرامکاناتتر از React.js است. نکست در واقع فریمورکی برای ریاکت است که نحوه کار کردن با آن بسیار سادهتر از React.js خام است و میتوان با آن عملیات SSR یا Server Side Rendering را انجام داد که نتیجه آن سرعت load شدن بیشتر و SEO بهتر برای
وبسایت است.
#وب@ISC_IUST