نقشه راه برنامه نویسی فرانت اند وب سایت در سال ۱۴۰۲
![نقشه راه برنامه نویسی فرانت اند وب سایت](https://devedoping.ir/wp-content/uploads/2021/10/frontend-roadmap-cover.jpg)
در این نوشته درباره نقشه راه برنامه نویسی فرانت اند وب سایت صحبت میکنیم. اما قبل از هر چیز باید جواب چند سوال را بدهیم:
نقشه راه برنامه نویسی چیست؟
فرانت اند وب سایت چیست؟
بهترین و کاملترین نقشه راه برنامه نویسی فرانت اند وب سایت
در ادامه مسیر بهینه و حرفهای برای تبدیل شدن به یک برنامهنویس فرانتاند را معرفی میکنیم. البته اوایل این مسیر، با مسیری که یک برنامهنویس بکاند میپیماید مشترک است چون آشنایی به کلیات و نیز چکیدهای از زبانهای HTML و CSS برای همه توسعهدهندگان وب ضروریست.
ابزارها و نرمافزارهای پایه برنامهنویسی
در گام بعدی شما باید با چهار بخش مهم آشنا بشوید:
- ویرایشگر کد و متن (Code Editor / IDE)
در این رابطه نرمافزار VS Code به دلیل راحتی استفاده، سبکی در اجرا و رایگان بودن، محبوبیت بیشتری دارد. هرچند نرمافزارهای دیگری نظیر Sublime Text و Atom و حتی Vim موجود است. با این حال لیست بلندی از ویرایشگرهای کد وجود دارد که به Brackets و WebStorm هم میشود اشاره کرد. - مرورگرها
در رابطه با مرورگرها، میزان استفاده از کروم بیشتر از سایرین است البته بعضیها با فایرفاکس احساس راحتی بیشتری میکنند. با این حال برای توسعه، ابزارهایی که Google Chrome در اختیارتان میگذارد واقعاً خیلی قویتر از سایر مرورگرهاست. - کار با ترمینال
ترمینال (Terminal) یکی دیگر از ابزار تخصصی برنامهنویسیست که توسط سیستمهای عامل قابل اجراست. اگر با ترمینال آشنایی ندارید، همان محیط CMD یا Command Prompt ویندوز را در نظر بگیرید. حالا ترمینالهای قویتر و بهتری هم برای کار با سیستمعامل و دستور دادن به آن موجود است که شاید برای شروع Git Bash از همه آنها سادهتر و راحتتر باشد. - کار با نرمافزارهای طراحی
شما به عنوان برنامهنویس فرانتاند هرگز وظیفه دیزاین و طراحی سایت را برعهده ندارید و تنها موظف به پیادهسازی طراحیها هستید. هرچند در بعضی پروژهها و شرکتها، این کارِ غیرحرفهای دیده میشود و شاید جزء مهارتهای اضافی و کمکی به حساب بیاید. با این حال منظور ما در این بخش، یادگیری کار با نرمافزارهای طراحی خصوصا فیگما (Figma) در حد برنامهنویسان است. یعنی بتوانید طراحیها را داخل آنها باز کرده، ابعاد، سایزها، فونتها و … را از آن استخراج نمایید.
گام اصلی نقشه راه برنامه نویسی فرانت اند
حالا نوبت به بخش اصلی در راه برنامهنویس فرانتاند شدن و آشنایی و یادگیری زبانهای HTML و CSS است.
یادگیری زبان HTML
HTML یک زبان نشانهگذاری (و نه برنامهنویسی) برای مشخص کردن ساختار متنی ما و پایه و اساس هر صفحه یک سایت است. در مسیر یادگیری برنامه نویسی وب، اولین قدم اصلی، یادگیری زبان HTML است. در مورد این زبان مفاهیم زیر مهمترین بخشها جهت یادگیری هستند:
- Best Practices
یا همان بهترین روش کدنویسی HTML. زیرا با تگها و روشهای مختلفی امکان ساخت یک صفحه وب هست اما قطعاً هر روشی، بهینه، استاندارد یا حرفهای نیست. - Semantic HTML
یا کدهای معنایی. بعضی از تگهای HTML معنا و مفهوم مشخصی ندارند؛ مثل div یا span. اما تگهایی مثل section یا article یا header دارای مفهوم مشخصی هستند. باید سعی کنید تا جای ممکن از تگهای معنایی استفاده کنید. - Form و Validation
بخش مهم دیگر در زبان HTML فرمها و اعتبارسنجی اولیه آنها توسط خود HTML و پیشفرض مرورگر است. - Accessibility
بخش مهم دیگر این است که بخشهای مختلف وبسایتی که نوشته میشود، دسترسی پذیری مناسبی داشته باشد. - SEO یا Search Engine Optimization
بحث مهم بعدی استفاده از کدهای استاندارد و تگهای مرتبط با SEO یا بهینهسازی موتورهای جستجو نظیر گوگل است.
یادگیری زبان CSS
گام مهم بعدی، یادگیری زبان CSS است که وظیفه استایلدهی و رنگ و لعاب دادن به کدهای خام HTML را دارد. اگر CSS نبود، همه سایتها شمایلی مثل متنهای داخل Notepad را داشتند و نه بیشتر.
آنچه باید در زبان CSS یاد بگیریم:
- مبانی
- فلکسباکس – راهنمای کامل آموزش Flexbox در CSS
- گرید – راهنمای کامل آموزش Grid در CSS
- tarnsition و animation
- طراحی واکنشگرا یا ریسپانسیو
- پیشپردازندههای CSS نظیر SASS
- سیاساس مدرن مثل Styled Components
- فریمورکهای CSS نظیر Tailwind CSS و Bootstrap
فراموش نکنید که بخشهای پیشرفتهتر که در بالا گفته شد در ابتدای راه ضروری نیستند.
یادگیری زبان برنامهنویسی JavaScript
در قدم مهم و کلیدی بعدی باید سراغ یادگیری زبان برنامهنویسی جاوااسکریپت بروید. وظیفه جاوااسکریپت، دمیدن روح به جسم خشک و ساختار HTML و CSS است. چیزی که کمک میکند کاربر با سرور تعامل داشته باشد، در صفحه تغییراتی ایجاد کند و بسیاری از امکانات دیگر.
- یادگیری سینتکس (نحو و دستورات) پایهای
- دستکاری DOM یا همان Document Object Model
- Fetch API و ارسال و دریافت غیرهمزمان اطلاعات از سرور
- JSON فرمت مورد علاقه برنامهنویسان در تبادل اطلاعات
- ES۶ یا ECMAScript 2015 که قابلیتهای جدیدی به جاوااسکریپت اضافه کرد
- یادگیری تایپاسکریپت (این مرحله را میتوانید بعدتر هم انجام بدهید.)
تا همینجا شما برنامهنویس فرانتاند محسوب میشوید! اما برای گرفتن کار (پروژه یا استخدام) باید با ابزارها و نیز حداقل یکی از فریمورکهای جاوااسکریپت آشنایی داشته باشید که در ادامه به معرفی ابزارها میپردازیم و بعد فریمورکها.
ابزارهای دیگر
بعد از مراحلی که در یادگیری برنامهنویسی فرانتاند سایت گفته شد، نوبت میرسد به ارتقای مهارتها و این فرآیند قبل از شروع کار با فریمورکهای جاوااسکریپت نظیر ریاکت، انگولار و ویو است.
مدیریت پکیج
ابزارهای ساخت
برای ساخت یک نرمافزار تحت وب (وباپلیکیشن) و یا وبسایت، بهرهبردن از ابزارهای ساخت بسیار کمککننده و مفید است. در این گام با سه مفهوم کلی باید آشنا شده و از بعضی از آنها استفاده کنید.
اجرا کننده وظیفه Task Runners
کار Task Runnerها اجرا کردن دستوراتی برای ساخت و دستهبندی فایلهاست.
فرمتکنندهها Prettier – Linter
کارشان مرتبکردن و تمیزکردن کد است و باعث استانداردسازی کد ما میشوند.
ماژول سازی Module Bandler
به کمک بستهبندها نظیر Webpack کدها و تصاویر و… دستهبندی میشوند.
یادگیری گیت (تکنولوژی Git و سرویس GitHub)
با این که این مرحله میتواند کمی پس و پیش شود اما حذف شدنی نیست! پس حتماً در برنامه خود یادگیریاش را بگنجانید.
این که گیت چیست و چه کار میکند نیاز به توضیح مفصلی دارد که در این مقاله نمیگنجد ولی به صورت خلاصه، وظیفه کنترل ورژن کد ما را دارد و میتوان به وسیله Git نسخههای مختلف کد را مدیریت کرد. همچنین برای انجام کار گروهی (چه به صورت حضوری چه به صورت کار تیمی ریموت و دورکاری) کاربرد دارد.
چند ابزار که کمکتان میکند
قبل از ورود به فریمورکهای جاوااسکریپت، اگر با ابزار زیر آشنایی داشته باشید، سرعت و دقت توسعه نرمافزار در شما افزایش پیدا میکند. با این حال، نباید یادگیری آنها مانع حرکت شما به مرحله بعدی باشد:
- ابزار توسعه مرورگر (Browser Dev Tools) که همان بخش inspect و سایر تبهای دیگر پنجره مذکور در مرورگر است.
- افزونههای ویرایشگر کد یا IDE نظیر VS Code که کدنویسی را برای ما آسانتر و سریعتر میکند.
- ابزار Emmet که برای سرعتبخشی به کدنویسی HTML به کار میرود تا زمان اصلی را روی مسائل مهمتر بگذاریم و درگیر باز و بسته کردن تگها نشویم.
- Axios که کتابخانهای برای درخواست (request) به صورت غیرهمزمان Async است و به جای Ajax و fetch میتوان از آن استفاده نمود.
فریمورکهای فرانتاند
حالا پس از پشت سر گذاشتن این مسیر نسبتا طولانی، زمان ورود به فریمورکهای جاوااسکریپت است. با این که React (ریاکت) کتابخانه است و خصوصیات فریمورک را ندارد؛ اما در بنچمارکها جزو دستهبندی فریمورکهای جاوااسکریپت قرار میگیرد.
در این لیست فریمورکهای دیگر نظیر Vue و Angular هم به چشم میخورد که بهترین راه برای انتخاب فریمورک جهت یادگیری، یک نگاه به سایتهای کاریابیست و این که ببینید با توجه به شرایط خودتان، کدام گزینه مناسبتر، پردرآمدتر است و خواهان بیشتری دارد.
با این حال، چشم بسته اگر بخواهیم یکی را برای شروع انتخاب کنیم، پیشنهاد دوپینگ برنامهنویسی به شما قطعاً ریاکت است.
اما وقتی پروژه بزرگ میشود، نگهداری و مدیریت همه این وضعیتها به شدت دشوار خواهد شد. برای این کار ابزار و کتابخانههای متنوعی ارائه شده است. مثلا برای React از Context API یا Redux میشود استفاده نمود و برای ویو از Vuex یا برای فریمورک انگولار از Services. پس یادگیری هر یک از اینها با توجه به فریمورک جاوااسکریپتی که کار میکنید، در گام بعدی و پروژههای حرفهای ناگزیر است.
مهارتهای تکمیلی
مهارتهای تکمیلی این حوزه، بعد از فائق آمدن بر مراحل قبلی، عبارتاند از:
تکنولوژی Server Side Rendering (SSR) یا رندر شدن سمت سرور
میدانید که فریمورکهای جاوااسکریپت نظیر React و… همگی در سمت کلاینت (Client) یا همان مرورگر کاربر رندر (نمایش) میشوند و یک بار کدها از سرور دریافت شده و بر اساس نیاز کاربر، محتوای آن بروزرسانی میگردد. یعنی کد همه کامپوننتها از قبل دانلود شده و با کلیکهای کاربر، بازسازی و بازنمایی میشوند. هرچند اطلاعاتی نیز به صورت ایجکس و async یعنی غیرهمزمان از سرور دریافت و نمایش داده میشود. اما برخلاف فریمورکهایی مثل Laravel و Django که هر صفحه به طور کامل از سمت سرور، رندر شده به کاربر میرسد، اگر بخواهیم این کار را در فریمورکهای فرانتاند انجام بدهیم باید از Nuxt.js برای ویو و Next.js برای ریاکت استفاده کنیم.
تکنولوژی سایتسازهای ایستا یا Static Site Generators
این تکنولوژیها هم برای راحتتر کردن کار با فریمورکها و نیز ساخت سایتهایی که لزوماً بکاند خاصی هم ممکن است نداشته باشند، استفاده میشود. که از معروفترین آنها میتوان به Gatsby و Next.js و Nuxt.js اشاره نمود.
ادامه راه بینهایت...
در ادامه این راه که هیچ وقت یادگیری در آن متوقف نمیشود، میتوانید سراغ Progressive Web Apps (PWA) یا همان «وباپلیکیشن پیشرونده» و نیز یادگیری JAMstack (JavaScript API Markup Stack) بروید.
ثبت نام در دوره معجون HTML و CSS
پیشنهاد میکنم توی این مسیر همراه دوپینگ برنامهنویسی شوید و دوره معجون HTML و CSS رو تهیه کنید.
آموزش طراحی سایت واکنشگرا (دوره آموزشی معجون HTML و CSS)
پسورد فایل : ندارد گزارش خرابی لینک
دیدگاهتان را بنویسید