توسعه دهنده وب front end شخصیه که رابط کاربری یک وب سایت یا یک برنامه وب رو ایجاد می‌کنه. فرانت اند دولوپر اساسا روی ایجاد قسمت بصری و پویایی سایت کار می‌کنه تا به کاربر امکان تعامل با صفحه وب یا برنامه را بده.
امروزه توسعه وب فرانت بسیار پیچیده‌تر از گذشته شده که این موارد فراتر از HTML ، CSS و JavaScript هستند. فناوری‌های زیادی وجود داره که شما باید آنها را بیاموزید و به تبع آن وظایفتان نیز بیشتر می‌شود. با این حال اگر اشتیاق و نظم و انضباط داشته باشید، قطعا می‌توانید به یک توسعه دهنده وب front end موفق تبدیل شوید.
در این مقاله به شما یک نقشه راه در زمینه توسعه وب و چگونگی یادگیری آن در سال 2022 خواهیم داد.
در قدم اول ما باید دانش خوبی با مفاهیم اولیه اینترنت بدست بیاوریم. یعنی بدانیم اینترنت چگونه کار می‌کند؟ در این راستا باید با مفاهیم زیر آشنا بشویم.
اچ تی ام ال که مخفف Hypertext Markup Language است که برای ساخت ستون یا اسکلت هر صفحه و نشانه گذاری صفحات وب سایت استفاده می‌شود. شما باید اصول HTML را بیاموزید، اما باید بیشتر به فرم‌های موجود در آن توجه کنید زیرا در آینده اساسی خواهند بود.
پس از درک کلی از HTML، می‌توانید اصول CSS را یاد بگیرید. CSS مخفف Cascading Style Sheets است که برای تعریف نحوه شکل گیری عناصر HTML استفاده می‌شود. همچنین با ایجاد طرح‌های واکنش گرا و استایل دادن به صفحه وب، آن را زیباتر می‌کند.
یادگیری CSS آسان است، اما تسلط بر آن دشوار. چند موضوع وجود دارد که باید بیشتر به آنها توجه کنید، مانند:
همچنین توصیه می‌کنیم که برخی از اصول طراحی وب و رابط کاربری را بیاموزید. این به شما امکان می‌دهد که به عنوان یک توسعه دهنده وب front end، صفحات وب زیبایی را خلق کنید.
گیت یک سیستم کنترل نسخه است که به شما اجازه می‌دهد تغییرات پایگاه کد و فایل‌های خود را پیگیری کنید. همچنین به شما امکان می‌دهد بدون هیچ مشکلی به برخی از نسخه‌های قبلی کد مراجعه کنید. به علاوه به همکاری افرادی که روی یک کد یکسان کار می‌کنند، کمک می‌کند.
بنابراین اصول گیت و نحوه استفاده از آن را در خط فرمان بیاموزید. همچنین یک حساب کاربری در گیت هاب ایجاد کنید و یاد بگیرید چگونه اولین مخزن خود را ایجاد کنید تا کد HTML و CSS را با استفاده از گیت به اصطلاح در آن پوش کنید. این کار به شما کمک می‌کند که از گیت و گیت هاب برای پروژه‌های آینده خود در توسعه وب فرانت استفاده کنید.
اکنون که HTML و CSS را شناختید، می‌توانید با استفاده از این دو فناوری صفحات وب ساده‌ای ایجاد کنید. اما شما باید آنها را در اینترنت قرار دهید تا افراد بتوانند مشاهده کنند.
در سال‌های گذشته انجام این کار دشوارتر بود. اما اکنون فوق‌العاده آسان است و می توانید از ابزارهایی مانند GitHub Pages یا Netlify استفاده کنید.
جاوااسکریپت ملکه توسعه وب است و نمی‌توان وب را بدون آن تصور کرد. این بهترین زبان برنامه نویسی و اسکریپت نویسی برای توسعه دهندگان وب است. با آن می‌توانید کارهای زیادی در زمینه front end، بک-اند و حتی برنامه‌های موبایل انجام دهید.
وقتی نوبت به جاوااسکریپت می‌رسد، ابتدا باید اصول را یاد بگیرید. مواردی مانند متغیرها، انواع داده‌ها، توابع، آرایه‌ها، اشیا و موارد دیگر. همچنین باید در مورد نحوه دستکاری در DOM و مواردی از این دست اطلاعات کافی داشته باشید.
در اینجا لیستی از مواردی وجود دارد که باید در نظر بگیرید:
یادگیری این پیش پردازنده که مخفف Syntactically Awesome Stylesheets است. این یک پیش پردازشگر CSS است که کار با CSS، کاهش تکرار و صرفه جویی در وقت را فراهم می‌کند. همچنین به شما کمک می‌کند تا به راحتی صفحات خود را با خطوط کد کمتری استایل‌دهی کنید.
اگر خیلی با CSS کار می‌کنید، Sass می‌تواند ابزاری قدرتمندی برای شما باشد. بهره گیری از آن زندگیتان را آسان‌تر می‌کند و به شما کمک می‌کند تا از تکرار در CSS پرهیز کنید.
وقتی صحبت از مدیران بسته می‌شود، اولین چیزی که به ذهن خطور می‌کند NPM و Yarn است. بنابراین یکی از این دو مورد را انتخاب کنید و اصول آن را فرا بگیرید.
مدیر بسته در اصل ابزاری است که فرآیند نصب، به روزرسانی، پیکربندی و حذف برنامه‌ها یا پروژه‌ها را خودکار می‌کند.
پس از آن باید در مورد ابزارهای ساخت اطلاعات کسب کنید. مواردی مانند اجرای برنامه‌ها (اسکریپت‌های NPM یا Gulp) و باندلرهای وب (Webpack یا Parcel).
پس از یادگیری تمام اصول و ابزارهای فوق، می‌توانید هر فریمورک جاوااسکریپت را انتخاب کنید. من واقعا توصیه می‌کنم با React یا Vue شروع کنید. اگر این چیزی نیست که می‌خواهید، می‌توانید با Angular پیش بروید.
ریکت در واقع یک کتابخانه جاوااسکریپت برای ساخت رابط کاربری است. این برنامه مبتنی بر کامپوننت‌های سازنده می‌باشد و دارای یک DOM مجازی است که باعث می‌شود برنامه وب شما عملکردی بهتر و سریع‌تر داشته باشد. Vue نیز یک فریمورک عالی است، هر دوی آنها دارای یک جامعه پشتیبانی و مستندات شگفت انگیز هستند.
برای جمع‌بندی بسته به بازار هدف خود، هر فریمورکی را که می‌خواهید انتخاب کنید. در نهایت آنها فقط ابزار هستند، مهم این است که شما اصول را بدانید.
همچنین باید در مورد مدیریت stateها بیاموزید، در آنجا از ابزارهای زیادی می‌توانید بر اساس فریورکی که انتخاب می‌کنید استفاده کنید (Redux، VueX). در زیر یک تصویر از نقشه راه می‌بینید.
نکست جی اس برای رندرینگ سمت سرور یا تولید وب سایت‌های ایستا استفاده می‌شود. درست است که Next.js هنوز کاملا جدید است، اما من معتقدم این مهارتی است که باید به عنوان توسعه دهنده React داشته باشیم. اگر از Vue استفاده می‌کنید، باید ابزار دیگری به نام Nuxt.js را که آن هم برای رندرینگ در سمت سرور استفاده می‌شود، بیاموزید. برای Angular هم فکر می‌کنم بهتر است Universal را یاد بگیرید.
پس از آن می‌توانید برخی از برنامه‌هایی مانند جستجوی شغل، یک وبلاگ یا یک صفحه ساده را ایجاد کنید.
وقتی نوبت به تست می‌رسد، باید تفاوت بین تست‌های واحد، یکپارچه سازی و عملکردی را بدانید و نحوه نوشتن آنها را نیز بیاموزید.
همانطور که می‌بینید امروزه توسعه وب front end پیچیده شده است. ابزارهای زیادی برای یادگیری وجود دارند. اما اگر اشتیاق دارید، می‌توانید این کار را انجام دهید و به یک توسعه دهنده عالی تبدیل شوید. فقط باید به صورت مداوم تمرین کنید، زیرا بدون تمرین هرگز در کارهایی که انجام می‌دهید مهارت نخواهید داشت.
با تشکر از شما برای خواندن این مقاله، امیدوارم مفید واقع شده باشد. اگر هرگونه سوال یا نظری دارید، دربخش زیر با ما در میان بگذارید.
