مسیر برنامه نویسی فرانت اند: نظر ماش همدانی اصل آموز

برنامه نویسی Front-end یکی از مهمترین جنبه های ایجاد برنامه های کاربر پسند برای برنامه های تلفن همراه و وب است. و زبان برنامه نویسی فرانت اند برای بسیاری از برنامه نویسان از اهمیت بسیاری برخوردار است. ایشون مشفق همدانی هستن و همونطور که حدس زدین ایرانی الاصل هستن اما تو استرالیا بزرگ شدن. چون اسمشون بصورت Moshfegh نوشته میشه واسه خودشون برند شخصی Mosh (ماش) رو انتخاب کردن. ایشون بیش از 20 ساله که داره برنامه نویسی میکنه و به علاقه مندای برنامه نویسی آموزش برنامه نویسی میده.

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

پیشرفت های تکنولوژیکی و چارچوب های موجود برای توسعه فرانت اند ، کارها را سریعتر انجام می شود. TypeScript یه زبان برنامه‌ نویسی است که روی جاوااسکریپت ساخته شده و تایپ‌ دهی ایستا (Static Typing) رو اضافه میکنه. ویژگی‌ هایی مثل کلاس‌ ها، اینترفیس‌ ها و قابلیت‌ های ES6 رو داره و به بهبود دیباگ و کدنویسی کمک میکنه. کسی که میخواد کارش رو بعنوان یه برنامه نویس بک اند شروع کنه، باید این مسیر رو بره تا بتونه موفق باشه. این مسیر رو استاد ماش همدانی پیشنهاد دادن و میتونین از دوره های ایشون تو مسیر یادگیری تون استفاده کنین.

GET برای گرفتن داده از سرور استفاده میشه و پارامترها رو توی URL میفرسته، بنابراین محدودیت اندازه داره. POST برای ارسال داده به سرور استفاده میشه و داده‌ها رو در بدنه درخواست ارسال میکنه، پس ایمن‌ تر و مناسب‌ تر برای داده‌های حجیم یا حساس هست. Null به معنای یه مقدار خالی یا پوچ عمدیه که برنامه نویس به متغیر اختصاص میده. البته که خرید این دوره اونم بصورت دلاری علاوه بر این که کار مشکلیه، گرون در میاد و مقرون به صرفه نیست. اما اگه خواستین میتونین همین دوره رو از طریق اصل آموز بصورت ریالی و با قیمت بسیار پایین تری خریداری نمایید.

Map برای زمانی که بخوایم داده‌ ها رو تغییر بدیم و آرایه جدید بسازیم، مناسب‌تره. در نهایت، اگر خود را فردی هنرمند نمی‌دانید و بیشتر به منطق و فرآیندهای پشت صحنه علاقه دارید، شاید توسعه Backend برای شما مناسب‌تر باشد. یکی از راه‌های تصمیم‌گیری در مورد اینکه آیا توسعه Frontend برای شما مناسب است یا خیر، این است که ببینید آیا از دیدن نتایج بصری کارتان لذت می‌برید یا خیر. با استفاده از تکنولوژی‌های Frontend، شما طرح‌های از پیش آماده را پیاده‌سازی می‌کنید و تمام عناصر بصری را می‌سازید. این طراحی شامل تایپوگرافی (فونت‌ها) برای تمام متن‌ها، ترکیب رنگ‌ها، لوگوی شرکت و چیدمان صفحات است، که تنها چند مثال از وظایف شماست. در این مقاله به تفاوت‌های بین این دو بخش خواهیم پرداخت و هر کدام را جداگانه بررسی خواهیم کرد.

CSS Animations برای ایجاد انیمیشن‌ های پیچیده‌ تر و کنترل دقیق‌تر استفاده میشه و میتونن بدون تعامل کاربر هم اجرا بشن. با استفاده از تگ و ویژگی‌های srcset و sizes میتونیم تصاویر واکنش‌گرا تعریف کنیم که بر اساس دستگاه کاربر و اندازه صفحه بارگذاری میشن. این بخش شامل تمام فعالیت‌هایی است که زیر پوسته برنامه در حال رخ دادن است و تمام اجزای ضروری که موجب عملکرد صحیح و روان Frontend می‌شوند. شما از اصول اولیه شروع کرده و نحو (syntax) و بلوک‌های ساختاری لازم برای پیشرفت به موضوعات پیشرفته‌تر مانند برنامه‌نویسی شیء‌گرا را یاد خواهید گرفت. یکی دیگر از بخش‌های کار یک توسعه‌دهنده Frontend طراحی و ایجاد فرم‌های کاربردی برای وب است.

در این مقاله برخی موارد مهمی که به عنوان یک توسعه‌دهنده فرانت‌اند در سال 2020 بدانید را بررسی می‌کنیم و در این خصوص فرقی نمی‌کند که شما یک توسعه‌دهنده تازه‌کار یا با تجربه باشید. فریم ورک Backbone.js یک فریم ورک جاوا اسکریپت است که برای توسعه برنامه‌های کاربردی وب تک‌صفحه‌ای (SPA) استفاده می‌شود. این فریم ورک بر اساس الگوی MVVM (Model-View-ViewModel) طراحی شده است که باعث می‌شود کد شما سازمان‌یافته‌تر و قابل نگهداری‌تر باشد. لزوما کد نویسی فرانت اند با طراحی ui تفاوت دارد ولی شما بهتر است در کنار آموزش برنامه نویسی فرانت اند مهارت های ui و همچنین طراحی با فتوشاپ خود را بهبود بخشید. یادگیری فتوشاپ به شما این امکان را می دهد تا کمتر وابسته به نفرات دیگر باشید و برای پروژه های کوچک خود بتوانید طراحی های لازم بر روی عکس خود انجام دهید. برای یادگیری فتوشاپ می توانید از منابع مختلف استفاده کنید بعضی از سایت ها آموزش فتوشاپ رایگان را در اختیار شما قرار می دهند.

به همین دلیل است که بسیاری از مشاغل در سراسر جهان برای برآوردن الزامات طراحی وب سایت خود به HTML تکیه می کنند. HTML ، مخفف Hypertext Markup Language ، یک زبان برنامه نویسی فرانت اند برای ایجاد اسناد الکترونیکی است که به عنوان صفحات در سراسر وب معرفی می شوند. هر صفحه دارای پیوندهای متعدد به لینک ها یا پیوندهایی به صفحات دیگر است. با استفاده از دو تا زبانی که بالاتر در موردشون صحبت شد فقط میشه یه سری صفحات ثابتی رو ایجاد کرد و نمیشه از اون زبان ها انتظار داشت که صفحاتمون رو پویا و دارای عملکرد کنن. اگه بخوایم بهشون یه عملکرد خوبی رو هم اضافه کنیم باید از اون زبان ها فراتر برین و جاوااسکریپت رو هم یاد بگیرین.

به علاوه قابلیت‌هایی مانند رندرینگ سمت سرور بدون نیاز به اجرای مرورگر، Pre-rendering و Objects As Properties ارائه می‌دهد. ضمنا ایجاد کامپوننت‌ها توسط آن آسان است، زیرا کلاس‌های ES6/TypeScript را به همراه Decorator Metadata پشتیبانی می‌کند. مسیر تبدیل شدن به یک متخصص فرانت‌اند با حقوق بالا چالشی، اما کاملاً قابل‌دستیابی است. داشتن تسلط بر یک فریم‌ورک فرانت‌اند کافی نیست؛ برای تبدیل شدن به یک متخصص حرفه‌ای و افزایش درآمد، نیاز به ابزارهای مکمل دارید. این ابزارها نه‌تنها کارایی و بهره‌وری شما را افزایش می‌دهند، بلکه شما را از دیگر رقبا متمایز می‌کنند. در این بخش، به معرفی برخی از مهم‌ترین ابزارها و تکنولوژی‌هایی که باید در کنار مهارت‌های اصلی فرانت‌اند یاد بگیرید، می‌پردازیم.

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

ماش همدانی توی سایتش بنام codewithmosh.com این دو زبان رو در قالب سه بخش ارائه داده که لینکش رو واستون قرار میدیم. اگر از حل مسائل با تجزیه آن‌ها به بخش‌های کوچک‌تر، پیاده‌سازی الگوریتم‌ها و یافتن راه‌حل‌های مؤثر لذت می‌برید، شاید توسعه Backend مناسب شما باشد. Backend به عنوان بخش سمت سرور (Server-Side) برنامه شناخته می‌شود. در واقع، Backend همه فرآیندهای پشت صحنه و بخش‌های مخفی یک برنامه وب است. توسعه Frontend یک فعالیت خلاقانه و هنری است که ترکیبی از هنر بصری و برنامه‌نویسی را در خود جای داده است.

بعد از تسلط بر موارد موجود در این مقاله و تبدیل شدن به یک توسعه‌ دهنده Front-End، می‌توانید سایر مباحث مربوط به وب مانند Backend را شروع کنید و در نهایت به یک Full Stack Developer تبدیل شوید. توصیه ما به شما این است که حتما در یک زمینه مهارت کامل و بالا کسب کرده و سپس به سراغ مبحث بعدی بروید و نسبت به مسائل نگاه سطحی نداشته باشید. اگر درمورد فرانت اند سوال داشته و یا نیاز به مشورت و راهنمایی دارید حتما با ما و سایر کاربران سون لرن در میان بگذارید. برنامه نویس فرانت اند به کمک Javascript می‌تواند به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است بپردازد. در حقیقت، شما با کمک جاوا اسکریپت می‌توانید به صفحات طراحی شده جان ببخشید. برای مثال اگر  روی یک دکمه‌ی ارسال کلیک کنید، این جاوا اسکریپت است که فرم را به سرور ارسال می‌کند.

ممنون از مقاله‌ی خوبتون.می‌خواستم بپرسم آیا واقعا رشته‌ی تحصیلی مرتبط برای بازار کار اینقدر مهمه؟! درودتمرکزتون رو روی دروس مدرسه و کنکور بذارید تا دانشگاه خوبی قبول بشید. رشته مهندسی کامپیوتر و بعد از اون علوم کامپیوتر هدفتون باشه.تابستان بعد که کنکور دادید مبانی کامپیوتر و برنامه نویسی رو استارت بزنید. بعد از قبولی دو ترم اول طبق برنامه دانشگاه پیش برید و بعد از اون، زمینه کاری خودتون در برنامه نویسی رو انتخاب کنید و بر اون اساس مطالب رو حرفه ای‌تر یاد بگیرید. استفاده از این پسوند به کاربران امکان می دهد ساختارهای HTML ایجاد کنند که در همان فایل کد جاوا اسکریپت وجود دارد. پشتیبانی مرورگر – جاوا اسکریپت را می توان بر اساس نوع مرورگر مورد بررسی قرار داد.

اکنون که فهمیدیم فرانت اند چیست و چه کاربردی در برنامه نویسی دارد، برخی از پرسش‌های رایج در این زمینه را نیز به‌همراه پاسخ‌هایشان با هم مرور می‌کنیم. من در این محتوا به سوالاتی که درآغاز طرح شد پاسخ می‌دهم و بهترین فریم ورک‌ فرانت اند در سال ۲۰۲۴ را معرفی می‌کنم. اگر به جزئیات علاقه مند بودید می توانید خودتان به بنچ‌مارک Stefan Krause’s benchmark tool سری بزنید. یکی از داغ‌ترین موضوعات حال حاضر و یکی از چیزهایی که حتماً باید در سال 2020 بیاموزید GraphQL است. هر دو فریمورک با داشتن هزاران افزونه و بهینه سازی‌های فراوان، راه حل بسیار خوبی برای راه اندازی و اجرای سریع وب سایت‌ها هستند (البته به صورت استاتیک). همچنین روز به روز روند توسعه وب و برنامه‌های بومی ماژولار سازمان یافته‌تر می‌شود، زیرا تمرکز کمتری باید روی نحوه پیاده سازی و پیکربندی‌ها گذاشته شود و بیشتر روی ایجاد و ترکیب برنامه‌ها باشد.

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

معمولاً وقتی میخوایم رفتار رویداد رو محدود کنیم، این دو رو استفاده میکنیم. State متغیرهایی هستن که یه کامپوننت میتونه مدیریت کنه و تغییر بده. Props مقادیری هستن که از والد به فرزند منتقل میشن و کامپوننت‌ ها نباید اون‌ ها رو تغییر بدن. به عبارت ساده‌ تر، state داده‌های داخلی و قابل تغییره، و props داده‌های خارجی و ثابت هستن. استفاده از external stylesheets برای نگهداری و بهینه‌ سازی بهتره.

درودکلا سه حوزه وب - بازی - برنامه نویسی موبایل خیلی مشابه به هم هستند و این سردرگمی شما طبیعی هست. اینکه مثلا روند بازی سازی طولانی تره یا در برنامه نویسی موبایل شما محدود روی یک پلتفرم هستید و... همچنین همونطور که در دوره الفبای برنامه نویسی استاد توضیح میده، شرایط استخدام و فریلنسری هرکدوم هم متفاوت هست و میتونه در انتخابتون موثر باشه. سلام وقتتون بخیرمن ۲۳ سالمه .میخوام که وارد حوزه برنامه نویسی شم . ولی نمیدونم که تو چه قسمتی (وب ،بازی 'برنامه‌های گوشی و...) مشغول شم .یا اینکه به کدوم بیشتر علاقه دارم .ممنون میشم راهنمایی کنید.

این فریمورک امکان استفاده از خصوصیات Reactive و Virtual DOM را فراهم می‌کند و باعث بهبود عملکرد و سرعت بارگذاری برنامه می‌شود. همچنین، Svelte دارای محیط توسعه بسیار قوی و جامعی است که توسعه‌دهندگان را در فرآیند توسعه برنامه‌های وب یاری می‌کند. وظیفه اصلی یک فرانت اند دولوپر این است که از کاربر پسند بودن، زیبا و چشم‌نواز بودن و کاربردی بودن - از نظر عملکرد - جنبه‌های بصری و تعاملی وب‌سایت یا برنامه تحت وب اطمینان حاصل کند. برنامه‌نویسان فرانت اند از ابزارها، زبان‌ها و همچنین تکنولوژی‌های - کتابخانه‌ها و فریمورک‌های - گوناگونی نظیر CSS ،HTML و جاوا اسکریپت استفاده می‌کنند. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و... اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است.

این اولین ابزار CI است که به تنهایی نمی‌تواند برنامه‌ای کامل را بسازد، ولی به ساده‌تر شدن روند توسعه کمک می‌نماید. Webpack و Vite ابزارهایی برای باندل کردن کدها و مدیریت منابع پروژه هستند. این ابزارها به شما کمک می‌کنند تا پروژه‌های خود را سریع‌تر و بهینه‌تر کنید. GraphQL یک زبان برای مدیریت API‌هاست که به شما این امکان را می‌دهد تنها داده‌های موردنیازتان را از سرور درخواست کنید. سعی کنید دوره ای رو انتخاب کنید که پشتیبانی داشته باشه و به سوالات تون جواب داده بشه.

CSS برای مرورگرهایی نظیر گوگل کروم، فایرفاکس و غیره ضروری است تا نمایش بصری مناسبی را برای صفحات وب فراهم کنند. اما نکته اینجاست که طراح سایت چه مسیر شغلی و حرفه‌ای را برای خود درنظر گرفته است. چنین مقاله ای در خصوص بهترین فریم ورک های فرانت اند در دنیای وب فارسی کمتر یافت می شود و امیدوارم این مقاله کمکی به توسعه دهندگان عزیز ایرانی و اعتلای دانش عمومی در این زمینه کرده باشد. Cypress یک ابزار متن باز (در حال حاضر یک پلتفرم تجاری) برای تست خودکار فرانت-اند در وب مدرن است. این بر اساس یک معماری نوین ساخته شده و در یک حلقه اجرای برنامه مورد تست اجرا می‌شود. در نتیجه برای هر چیزی که در مرورگر اجرا شده یک تست بهتر، سریعتر و مطمئن‌تری ارائه می‌دهد.

مهم‌ترین تفاوت تایپ‌اسکریپت با جاوااسکریپت این است که از آن برای برنامه‌نویسی پروژه‌های پیچیده و درمقیاس بزرگ (که چندین هزار خط کد دارند) استفاده می‌‌کنند. یک وب‌سایت سریع و کارآمد، تجربه کاربری بهتری را برای بازدیدکنندگان فراهم می‌کند. بهینه‌سازی وب‌سایت شامل تکنیک‌هایی مانند کاهش حجم فایل‌ها، بهینه‌سازی تصاویر، استفاده از کش و مینیمایز کردن کد می‌شود. با یادگیری این تکنیک‌ها، می‌توانید وب‌سایت‌هایی با سرعت بارگذاری بالا ایجاد کنید. در طی چند سال اخیر برخی کتابخانه‌ها و فریمورک‌های جدید مانند ReactJS ،VueJS و Svelte معرفی شده‌اند که از جاوا اسکریپت برای طراحی وب‌اپلیکیشن‌های عمده استفاده می‌کنند.

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

یه داستان خوب از پروژه‌ ای که انجام دادی، مشکلی که حل کردی، یا مهارتی که یاد گرفتی، می‌تونه تأثیر زیادی روی مصاحبه‌ کننده‌ها بذاره. تلاش کن که نشون بدی هم توی کدنویسی حرفه‌ ای هستی و هم توی کار تیمی خوب عمل می‌کنی. یه نکته دیگه که خیلی به چشم میاد، اشتیاق و علاقه‌ت به یادگیری چیزهای جدیده. شاید بد نباشه تو مصاحبه اشاره کنی که به تازگی چی یاد گرفتی یا روی چه چیزی کار می‌کنی. DOM (Document Object Model) یه ساختار داده ایه که مرورگر از صفحه HTML میسازه و اجازه میده با جاوااسکریپت به عناصر دسترسی داشته باشیم و تغییرشون بدیم. مثلاً میتونیم با document.getElementById() یه عنصر رو بگیریم و محتوای اون رو تغییر بدیم.

در گذشته، صنعت توسعه وب شامل ایجاد تمام صفحات وب با استفاده از HTML و ارائه آنها بر روی سرور بود. محبوبیت سازمان‌هایی که «وب اپلیکیشن‌های پیش رونده» (Progressive Web Applications | PWA) را به‌کار می‌گیرند، بیان‌گر این است که آینده شگفت‌انگیری برای توسعه فرانت اند پیش رو داریم. PWA-ها در واقع همان وب‌سایت هستند که عملکردی شبیه به اپلیکیشن‌ها - و با ویژگی‌هایی شبیه به اپلیکیشن‌ها - دارند. وب اپلیکیشن های پیش رونده به‌دلیل فراهم کردن UI عالی به‌همراه مزیت‌هایی دیگری که دارند - نظیر آگاهی از موقعیت - بیشتر پیشنهاد می‌شوند. همچنین اگر HTML را به‌عنوان پایه و اساس وب در نظر بگیریم، آنگاه CSS به‌عنوان یک طرح و نقشه برای آن عمل می‌کند.