رضا کرامت
رضا کرامت
خواندن ۳ دقیقه·۳ سال پیش

برنامه نویسی فرانت اند چیست؟ و چگونه برنامه نویس فرانت اند شویم؟

مقدمه: در اول مسیر برای تبدیل شدن به یک برنامه نویس دانستن اصطلاحات هست از جمله برنامه نویس فرانت اند یا بک اند کیست؟ چگونه برنامه نویس شویم و حتی چگونه کسب درآمد داشته باشیم؟ ئر اینجا به این میپردازیم که فرانت اند چیست پس برای پیدا کردن و رسیدن به این جواب این مقاله به شما کمک میکند.

تعریف واژه‌ی فرانت اند :

در واقع فرانت اند Front End بمعنای جلو هست هر چیزی که در حالت اول صفحات وب میبینی رو فرانت اند میبینند(چیزهایی که قابل دیدن است و با آن تعاملداریم). یه چیز دیگه فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش می‌دهد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند

فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود:

در گذشته اگر کسی از توسعه صحبت می کرد، عموما مربوط به بک اند بود اما در سال گذشته این موضوع کرده نیاز داریم میان کسی که سایت را در نرم افزاری مانند فوتوشاپ تفاوت بگذاریم. اما الان اگر بگیم "طراح سایت" یعنی کسی که هم با فتوشاپ و هم کد نویسی را بتواند انجام دهد و اما این دو هم میتوانند از هم مجزا باشند یعنی یکی بیاد با فتوشاپ و دومی فقط بیاد انرا به کد تبدیل کند این بستگی به صاحب پروژه که همان کارفرما هست بستگی دارد.

مثالی از فرانت در دنیای واقعی

برای اینکه مفهوم Front end را بهتر درک کنید، یک فیلم سینمایی را در نظر بگیرید. ظاهر سایت همانند یک فیلم سینمایی است که در حال تماشای آن هستید. بازیگران و صحنه‌های فیلمبرداری شده اجزایی هستند که Front end را تشکیل می‌دهند و بر اساس دستورات کارگردان در مکان موردنظر خود قرار می‌گیرند و به بازیگری می‌پردازند. دستورات کارگردان، همان کدهای HTML، CSS و جاوا اسکریپت می‌باشند که رابط کاربری را ایجاد می‌کنند

زبانHTML

یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به عنوان هسته و بدنه اصلی صفحات وب به حساب می‌آید. آخرین نسخه HTML5 هست از کجا بفهمیم که نسخه بعدی اگر منتشر شود از سایت w3schools.com که سایت انتشار دهنده هست یا از کانال های تگرامی یا اینستاگرامی و...

زبانCSS

زبانCSS (مخفف عبارت Cascading Style Sheets) به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و... ساخته شده است. رنگ دهی بزرگ و کوچک کردن المان ها در کل زیبا سازی را انجام میدهد.

زبانJavaScript

این دیگه زبان برنامه نویس خیلی محبوب هست که اینقد محبوب هست که فریم هایی از قبیل VueJs,Angluar,ReactJs,JQuery را برای توسعه آن ساخته شده اند مثلا ریکت را فیسبوک ساخت یا حتی کتابخانه های زیادی برای راحتی کار ساخته شده است.


تفاوت بین HTML CSS JS
تفاوت بین HTML CSS JS

پس برای مثال اسکلت ماشین را با html و طرح بندی رنگ ها با CSS و اینکه وقتی پامون روی گاز اگر بره چه اتفاقی بافتد را با JS میسازیم.

آشنایی با اصول UI&UX

خیلی فوق خلاصه با تصور کردن اینکه بخواهید یک صفحه‌ی وب را پیاده سازی کنید که پیچیدگی المان‌های آن بالا است. در این حالت بهتر است که قبل از شروع کدنویسی طرح آن را با فتوشاپ ترسیم کرده و بعد از موافقت اعضای تیم آن را پیاده سازی کنید. نرم افزارهای گرافیکی مانند Adobe xd، Figma و... در بیشتر مراحل طراحی یک رابط کاربری توسط طراحان فرانت مورد استفاده قرار می‌گیرند. پس یادگیری حداقل یکی از آن‌ها برای برنامه نویس فرانت اند الزامی است.

نکته: اگر اصطلاحات "Full Stack" یا اصطلاحات عمومی "Web Developer" در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی به‌کار رود که مسئولیت کلیه جنبه‌های توسعه‌ی وب / برنامه‌ها را در بر می‌گیرد، یعنی هر دو بخش Backend و Front-End. پس سعی کنید که قبل از شروع کار، مسئولیت‌ها و وظایفی که به آن متعهد می‌شوید را با کارفرمای خود مشخص کنید.

در نتیجه ساخت اولیه مثل لوگو سایت بخش بندی سایت و حتی ui ux سایت را میسازیم بعد آنرا به کد تبدیل میکنیم.

فرانت اندfront endhtmlcssjavascript
سلام و درود به همگی دنیای تکنولوژی همیشه در حال پیشرفت هست و ما باید همیشه خرد خود را بیشتر و گسترش کرده از این رو باید این علم را هم یاد بدیم پس بهترین کار نوشتن هست.
شاید از این پست‌ها خوشتان بیاید