» نقشه راه برای تبدیل شدن به یک برنامه نویس Front-end

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

تعریف فرانت اند:

به قسمت قابل مشاهده وب سایت توسط کاربر گفته می شود که به کدها دسترسی مستقیم دارد و با بخش بک اند(back end) هم در ارتباط مستقیم است.front end یا بخش کاربر به دو بخش تقسیم می شود:

1.طراحی وب: که طراحان با نرم افزارهای گرافیکی مثل فتوشاپ ظاهر سایت را طراحی می کنند

2.توسعه رابط کاربری: پساده سازی ظاهر سایت با کدهای HTML، CSS و Javascript

مثالی در دنیای واقعی:

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

آشنایی با دو بخش اصلی Front-End:

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

اما HTML CSS و Javascript چیست:

Html: با کمک تگ‌های از قبل تعریف‌شده خود ساختار و اسکلت صفحه‌وب را مشخص میکند، html استخوان های پر از کلسیم را برای صفحاتتان ایجاد می کند.

Css: به ما کمک میکند یک صفحه وب با ظاهر قابل‌قبول داشته باشیم مثل جا به جا کردن عناصر مختلف در صفحه، تغییر رنگ‌بندی، فونت و غیره...

Java script: به ما اجازه میدهد صفحات وب را به‌طور داینامیک یا پویا طراحی کنیم و با Js آن عناصر تعاملی مثل اسلایدر، گالری عکس و .... تولید کنیم.

مقایسه بین فرانت-اند و بک-اند

• فرانت-اند بخشی از وب سایت است که کاربران می‌بینند و با آن تعامل برقرار می‌کنند؛ مانند رابط کاربر گرافیکی (GUI) و خط فرمان که شامل طراحی، منوهای ناوبری، متن‌ها، تصاویر، ویدئوها و غیره است. در مقابل بک-اند به عنوان بخش غیرقابل مشاهده وب سایت برای کاربران است.

• جنبه‌های بصری وب سایت که قابل مشاهده از جانب کاربران است، فرانت-اند نام دارد. از طرف دیگر هر آنچه که در پس زمینه این ظاهر به وقوع می‌پیوندد به بک-اند مربوط می‌شود.

• بخش فرانت-اند با کمک زبان‌هایی چون: HTML، CSS و Java Script ساخته می‌شود ولی در مقابل برنامه نویسان بک-اند از زبان¬هایی مثل PHP، #C، Java، python و .... استفاده می¬کنند.

• فریم‌ورکهای فرانت-اند شامل AngularJS، React.js، Bootstap، JQuery، SASS و .... است ولی کتابخانه های مورد استفاده بک-اندکارها Express, Django, Rails, Laravel, Spring و ...... میباشد.

• از بخش بک-اند برای ذخیره و بازیابی اطلاعات استفاده میشود اما در مقابل فرانت-اند توانایی ذخیره و بازیابی ندارد.

• برنامه نویسان بک-اند برای تفسیر درخواست ها باید از فیلترهای پایگاه داده و مرورگر گذر کنند اما در بخش فرانت-اند تماما توسط مرورگر چیده می شود.

مسیر تبدیل شدن به Front-End:

1. نحوه‌ی کاربا بستر وب را بیاموزید. مطمئن شوید که "چه زمان" و "کجا" از چه فناوری‌ها و زبان‌هایی استفاده می‌شود. همچنین بهتر است در مورد دامنه‌ها ، DNS ، URLها ، HTTP ، مرورگرها و سرورها و سایر مفاهیم وب اطلاعات پایه‌ای کسب کنید. البته در این مرحله لازم نیست در این موارد غرق شوید، فقط هدف خود را درک کنید که هر قسمت چیست و چگونه کنار سایر قسمتها قرار می‌گیرند. با ساختن صفحات وب ساده شروع کنید.

2. یادگیری HTML، CSS و JavaScript

3. آموختن اصول طراحی واسط کاربری (یعنی الگوهای UI ، طراحی تعامل ، طراحی تجربه کاربر و قابلیت استفاده).

4. هدف سایت خود را پیدا و جعبه ابزار مرتبط با کارکرد آن را پیاده سازی کنید.

5. یکی از فریم‌ ورک‌های مرتبط در CSS را بیاموزید: بوت استرپ، متریال دیزاین .

6. یکی از فریم ورک‌های مرتبط در جاوا اسکریپت را بیاموزید: /JQuery, React.js , Angular.js , Vue.js, W3.JS

7. CLI و خطوط فرمان را بیاموزید.

کلام آخر:

در هر زمینه‌ای باید در مورد اتفاقات و پیشرفت‌های آن به روز بود چرا که بر روی عملکرد و سرعت یادگیری ما بسیار تاثیر خواهد داشت. به عنوان مثال نمی‌توان منکر افزایش تعداد زیاد کاربران typescript در سال 2020 شد. یا با گذشت سالها، امروزه VScode به عنوان یک ویرایشگر متن نسبت به بقیه جایگاه برتری دارد. پس در این راه همواره باید به روز باشید. اما به طور کلی مهارت های توسعه دهنده front end developer عبارت است از:

تسلط بر زبان هایی چون: HTML، CSS و Javascript

استفاده از کتابخانه ها و فریم ورک ها: در جاوا اسکریپت مانند جی کوئری و ... ، CSS مثل بوت استرپ و ..

آشنایی با اصول طراحی واکنش گرا: نمایش صحیح سایت متناسب با هر نوع دستگاهی

استفاده از نرم افزارهای گرافیکی: برای طراحی رابط کاربری

داشتن سلیقه وخلاقیت

آشنایی با اصول تجربه کاربری: بخاطر شناخت نیازهای کاربر

تگ ها : html css مسیر یادگیری فرانت اند

۰ نظر / ۸۶ بازدید