مقدمه
در این مقاله برسی میکنیم برای یادگیری فرانت چه موضوعاتی رو باید درک و آموزش دید تا تبدیل به یک توسعه دهنده فرانت شویم.
این مقاله برای کسانی که علاقه به یادگیری فرانت دارند و نمیدونن از کجا شروع کنن و چه مطالبی رو بخونند و آموزش ببینند بسیار مناسب و کاربردی است.
HTML
در اولین مرحله یادگیری فرانت نیاز است که HTML رو کاملا یاد بگیرید و تسلط کامل بهش داشته باشید؛ HTML یک زبان نشانه گذاری هست که استخوانبندی صفحات وب رو تشکیل میده ، موتورهای سرچ گوگل کد های HTML ما رو تفسیر میکنن پس باید به عنوان توسعه دهنده فرانت تمام تگ های معنایی یا semantic html رو یادبگیریم تا بتونیم صفحاتی که نیاز داریم رو برای موتور های جستجو بهینه کنیم (البته یک توسعه دهنده فرانت نیاز نیست تمام تکنیک های مربوط به سئو سایت رو بلد باشه ولی باید درک دقیقی از سئو کد داشته باشه).
شما باید تمام ویژگی های HTML رو یاد بگیرید و با فرم ها و اعتبارسنجی فرم ها کار کنید.
منابع برای یادگیری :
CSS
از css برای استایل دادن به صفحاتمون استفاده میکنیم ، بدون CSS صفحات وبسایت ما ظاهر ساده ای بیش ندارن ، این انیمیشن ها و استایل های CSS است که ظاهر وبسایت ما رو زیبا میکنن و باعث میشن کاربر راحت تر با سایت ارتباط برقرار کنه؛ مهم ترین بخش CSS ریسپانسیو کردن وب سایت در صفحه نمایشگر های مختلف اعم از موبایل ها ، تبلت ها ، TV و… میباشد ما باید طوری استایل بدیم که وبسایت ما بدون مشکل روی همه صفحه نمایشگر ها به درستی نمایش داده بشه. استایل هایی که میدیم باید حواسمون باشه روی مرورگر های مختلف مثل Safari به درستی اعمال بشه.
برای صفحه بندی وبسایت ها نیاز است که css flex و css grid ها رو آموزش ببینید، با position ها و انیمیشن ها و دیگر امکانات CSS کار کنید.
منابع برای یادگیری :
SASS
SASS یک PreProcessor (پیش پردازنده) برای CSS است به این معنا که ما کد های CSS رو داخل SASS مینویسیم و در آخر به CSS کامپایل میکنیم. SASS قابلیت های فراتر از CSS به ما میده نه از لحاظ استایل ها بلکه از لحاظ ساختار. زمانی که پروژه بزرگ میشه اگر از CSS استفاده کنیم حجم کدامون زیاد میشه و کار کردن با CSS مشکل و طاقت فرسا میشه ، اینجا هست که SASS به کمکمون میاد با قبلیت هایی که داره میتونیم از کد های تکراری CSS توی پروژه جلوگیری کنیم ، متغیر تعریف کنیم و خیلی از کارای دیگه که CSS نوشتن رو برای ما راحت میکنه.
منبع برای یادگیری :
BEM
قواعد مختلفی برای نامگذاری کلاس ها در HTML داریم که محبوب ترین آن BEM است. BEM یک ساختار مناسبی به ما میده و قابلیت هایی که SASS به ما میده در کنار BEM خیلی کار ما رو راحت تر میکنه.
منبع برای یادگیری :
JavaScript
تا الان مطالب مقدماتی ورود به دنیای فرانت رو یاد گرفتیم حالا نیازه با یک زبان برنامه نویسی آشنا بشیم ، جاوا اسکریپت زبان برنامه نویسی برای مرورگرها است که باعث میشه وبسایت ما به صورت داینامیک کار کنه، وب اپلیکیشن هایی که نیاز به محاسبات داره رو با جاوااسکریپت پیاده میکنیم اما امروزه به دلیل محبوبیت، جاوااسکریپت قدم های بزرگی در دنیای برنامه نویسی برداشته ، در گذشته جاوااسکریپت روی مرورگرها اجرا میشد اما امروزه این زبان در خارج از مرورگر ها به وسیله NodeJs هم مورد استفاده قرار میگیره. شما برای تبدیل شدن به توسعه دهنده فرانت باید درک عمیقی از کارکرد جاوااسکریپت داشته باشید، رفتار های جاوااسکریپت رو بشناسید، کلاس ها و تابع ها رو کاملا یاد بگیرید ؛ مباحثی که توصیه میشه فرابگیرید شامل :
DOM
Fetch API
ES6+ and modular JavaScript
Hoisting
Shadow DOM
Scope
Prototype
strict
Promise
Event Bubbling
و…
منابع برای یادگیری :
تبدیل فایل های گرافیکی به کد
شما به عنوان توسعه دهنده فرانت با استفاده از مواردی که در بالا گفته شده باید توانایی پیاده سازی UI به کد رو داشته باشید، نرم افزار های گرافیکی مثل Figma یا XD و… هستند که میشه template سایت رو بااستفاده از اون ها طراحی کرد ، حالا باید بتونیم هر template رو به کد تبدیل کنیم.
منابع برای یادگیری :
GIT
گیت یکی دیگر از ابزار ها است که کمک زیادی به جامعه برنامه نویس ها کرده ، گیت یک ورژن کنترل است که باعث میشه هیچ وقت کد های ما از بین نره و هر موقع خواستیم بتونیم برگردیم به همون نسخه ایی که نیاز داریم ، کاربرد دیگر این ابزار برای زمانی است که چند برنامه نویس روی یک پروژه بدون تداخل میتونن کار کنند. شما نیاز دارید branching strategy رو یاد بگیرید، پروفایل گیت هاب شما میتونه رزومه شما باشه ، داخل جامعه نرم افزار های آزاد مشارکت کنید کد های بقیه رو بخونید و کد های خودتونو با بقیه به اشتراک بزارید.
منابع برای یادگیری :
Package Managers
بسیاری از کتابخونه ها هستند که کار ما رو راحت تر میکنند ؛ از پکیج های مدیریت درخواست ها گرفته تا پکیج هایی برای کار کردن با تاریخ ها و…
برای مدیریت پکیج هاتون میتونید از ابزار های npm و yarn استفاده کنید. بسیاری از پکیج ها هستند که به پکیج های دیگر وابسته هستند، برای مدیریت این پکیج ها و دیگر پکیج هایی که در پروژه نیاز داریم از Package Manager ها استفاده میکنیم. باید به خوبی با فایل package.json و دستورات yarn و npm آشنا باشید.
منابع برای یادگیری :
Linters and Formatters
prettier یک کد استایل است به این معنا که کد های ما را از لحاظ قواعد برنامه نویسی مرتب میکنه و خوانایی کد رو بیشتر میکنه ، این قواعد قابل تغییر است به عنوان مثال بعد از تعریف هر تابع یک فضای خالی وجود داشته باشه یا مثلا indent ها ۲ تا اسپیس باشن یا…
eslint یکی دیگر از ابزار ها است که باعث میشه کدی که مینویسیم مطابق قوانینی که تعیین میکنیم باشه، این ابزار باعث میشه کل اعضای تیم از اون قوانین پیروی کنند و کد های مناسب تری بنویسند.
منابع برای یادگیری :
webpack
Webpack یک کامپایلر و module bundler برای JS است. Webpack تمام فایل های مورد استفاده در پروژه رو باندل میکنه. (باندل به این معناست که تمام کد های JS رو داخل یک فایل قرار میده) . قابلیت دیگه webpack این است که فایل هایی که از preprocessor ها و superset ها استفاده میکنند (مثل SASS و typescript) رو به کد های قابل درک برای مرورگر تبدیل میکنه به این صورت دیگه نیاز نیست بعد از هر تغییر کامپایل بشه تا خروجی رو ببینیم. از قابلیت های دیگر webpack میشه به این اشاره کرد که مدیریت فایل‌های پروژه و سایر Asset ها رو برای ما اتوماتیک میکنه.
منبع برای یادگیری :
انتخاب یک فریمورک JS
حالا که به دانش نسبتا خوبی رسیدید نوبت این است که یک فریمورک انتخاب کنید تا با استفاده از اون بتونید صفحات SPA (Single Page Application) رو ایجاد کنید. از بین سه فریمورک معروف (reactjs , angularjs , vuejs ) باید حداقل یکی رو انتخاب کنید. طبق نظرسنجی ۲۰۲۱ stackowerflow فریمورک Reactjs محبوبترین فریمورک بین توسعه دهندگان فرانت است.
منابع برای یادگیری :
انتخاب یک فریمورک CSS
استایل نوشتن یکی از کارهایی است که وقت طولانی رو از ما میگیره برای همین یکسری فریمورک های css هستند که کار ما رو راحت میکنه. بسته به فریمورک js که انتخاب میکنید فریمورک های css مختلفی وجود داره اما از این بین بعضی از فریمورک های css هستند که به صورت عمومی عمل میکنند.
- Tailwind CSS
- Chakra UI
- Material UI
- ant design
- vuetify
- suave ui
- bootstrap
- TypeScript
جاوااسکریپت خطا های مربوط به تایپ ها رو خودکار چک نمیکنه به همین دلیل نیاز است از یک Type Checker استفاده کنیم. معروف ترین آن TypeScript است که با استفاده از اون میتونید خطا های مربوط به تایپ ها رو چک کنید و از رفتار های غیر منطقی تایپ ها تا حد ممکن جلوگیری کنید.
منبع برای یادگیری :
Server Side Rendering (SSR)
زمانی که از فریمورک های js استفاده میکنید اپلیکیشن سمت کاربر رندر میشه که به اصطلاح بهش CSR (client-side rendering) گفته میشه. این حالت برای سئو مناسب نیست حالا اگر بخواهیم اپلیکیشن ما سمت سرور رندر بشه باید از فریمورک های دیگری استفاده کنیم. NextJs محبوبترین فریمورک برای کسانی هست که react کار میکنند و میخوان اپلیکیشن SSR (Server Side Rendering) داشته باشند از طرفی دیگر NuxtJs برای SSR کردن اپلیکیشن های Vue است. Angular Universal هم فریمورکی برای SSR کردن برنامه های Angular است.
منابع برای یادگیری :
نتیجه گیری
مباحثی که تا به اینجا بیان شد صرفا یک مسیری برای یادگیری است توجه داشته باشید که این تجربه است که شما رو متمایز میکنه به کسی که صرفا نحوه کار این تکنولوژی ها را آموزش دیده، مطالب زیادی است که در این مقاله بیان نشده و خودتون باید به دنبال اون باشید. داخل سایت هایی مانند medium سعی کنید مطالعه روزانه در مورد فرانت داشته باشید. از سایت stackoverflow استفاده کنید و سوالاتتونو بپرسید و سعی کنید سوال های دیگران رو پاسخ بدید. codepen هم یک منبع خیلی خوب از سورس کد های فرانت است که چیزای جالبی میتونید داخلش پیدا کنید و در آخر از GIT غافل نشود.
خوشحال میشیم نظراتتون رو راجب این مقاله بشنویم (: