پیش‌گفتار

توسعه‌ وب و شاخه‌ی فرانت‌اند (front end) یکی از پرطرفدار‌ترین شاخه‌های برنامه‌نویسی است.

با استفاده روز‌افزون از اینترنت و در نتیجه افزایش تعداد کاربران در بستر وب‌سایت‌های متعدد، نیاز به متخصّصین فرانت‌اند بیش از گذشته احساس می‌شود. اما چگونه می‌توان در این مسیر گام برداشت؟

همان‌طورکه می‌دانید برای تحقّق هر هدفی داشتن یک مسیر مشخّص و برنامه‌ریزی نیاز است؛ در این مقاله به بررسی نقشه‌ راه فرانت‌اند به‌صورت اصولی و کاربردی امّا به زبان ساده می‌پردازیم، به‌طوری که بعد از پیمودن این مسیر به بازار‌کار واقعی راه پیدا کنید.

 

فرانت‌اند چیست؟

فرانت‌اند به بخشی از وب‌سایت گفته می‌شود که کاربران با آن تعامل دارند. در‌واقع این بخش شامل: طرّاحی ظاهری، رابط‌ کاربری و تجربه‌کاربری (UI/UX) می‌شود. به عبارت دیگر همان بخشی از وب‌سایت است که شما به‌عنوان کاربر می‌بینید و با آن کار می‌کنید. برای مثال وقتی یک دکمه را انتخاب می‌کنید، متن می‌خوانید، یا یک ویدئو پخش می‌کنید، شما در حال استفاده از فرانت‌اند هستید.

 

HTML CSS

اولین گام برای ورود به دنیای فرانت‌اند و ساخت وب‌سایت‌های شگفت‌انگیز، دانش یا همان مهارت مورد‌نیازِ HTML CSS است. می‌توان گفت HTML اسکلت یا بدنه‌ی وب‌سایت و CSS ویترین و رنگ و لعاب یک وب‌سایت را تشکیل می‌دهد. با یاد‌گیری کامل هر دو مورد می‌توانید ظاهر بصری و شمای‌کلی وب‌سایت را به‌صورت ایستا (static) طرّاحی کنید. 

 

 

JavaScript

در ادامه باید زبان برنامه‌نویسی JavaScript را آموزش ببینید تا بتوانید صفحات وب ایستا را به صفحات وب پویا (dynamic) تبدیل کنید. برای مثال تصور کنید زمانی که دکمه‌ای را انتخاب می‌کنید هیچ اتّفاقی رخ ندهد، برای تکمیل سفارش شما را به درگاه پرداخت هدایت نکند و ...

بنابراین js یا همان JavaScript  به اجزای رابط کاربری جان می‌بخشد.

 

 

تبریک! اگر مهارت‌های بالا را خوب فرا‌گرفته باشید، شما یک توسعه‌دهنده فرانت‌اند محسوب می‌شوید که می‌توانید وب‌سایت‌های تحت‌وب را پیاده‌سازی کنید. امّا این نکته حائز‌اهمیت است که برای راه‌یابی به بازار‌کار بایستی کتاب‌خانه‌ها (library) و چهار‌چوب‌ها (framework) آن را نیز مسلط باشید؛ چرا که امروزه بدون دانش این ابزار‌ها راه‌یافتن به بازار‌کار ممکن نیست. پس در گام‌های بعدی با این ابزار‌ها بیش‌تر آشنا خواهیم شد.

 

کتاب‌خانه‌ و فریم‌ورک

کد‌نویسی HTML CSS و JavaScript یا دیگر زبان‌های برنامه‌نویسی به‌صورت خالص (pure) دارای نقاط ضعفی است از جمله: زمان زیاد هنگام توسعه، حجم انبوه کد، مشکلات اسامی کلاس‌ها و ... بنابراین نیاز به ابزارهایی که فرایند برنامه‌نویسی را ساده‌تر کنند احساس می‌شد تا روند توسعه را بهبود ببخشند.

به‌طور کل مزیت آن‌ها عبارت‌اند از:

·        افزایش سرعت توسعه

·        کاهش حجم کد

·       بهینه کردن عملکرد (performance) وب‌سایت‌ها

تفاوت

• کتابخانه: یک کار خاص را انجام می‌دهد؛ در‌واقع ابزار‌های زیادی در اختیار ما قرار نمی‌دهد (امّا باز هم کار را ساده‌تر می‌کند).
• فریم‌ورک: چهارچوب مشخّصی دارد و بر اساس قواعد کار می‌کند؛ کامل است و ما را از ابزار‌های دیگر بی نیاز می‌سازد.

 

Responsive design

Responsive design به معنای طرّاحی صفحات واکنش‌گرا است. هدف از این کار نمایش ظاهر مطلوب صفحات وب در دستگاه‌های گوناگون است؛ به عبارت دیگر یعنی وب‌سایت را طوری طرّاحی کنیم که در هر دستگاهی (تلفن همراه، رایانه، نمایش‌گر‌های رومیزی و ...) بار‌گذاری می‌شود ظاهر مناسبی داشته باشد و چیدمان اجزای وب‌سایت متناسب با نمایش‌گر کاربر باشد.

این کار با استفاده از همان  HTML CSS انجام می‌گیرد؛ که از جمله فریم‌ورک‌های آن می توان به Bootstrap، Foundation و Tailwind اشاره نمود؛ امروزه Tailwind.css به‌روز‌ترین و محبوب‌ترین فنّاوری توسعه css و responsive در بازار‌کار و میان کار‌فرما‌های شرکت‌ به‌شمار می‌رود.

در فهرست زیر به بررسی تعدادی از مزیت‌های این فریم‌ورک می‌پردازیم:

·        ارتقا سرعت وب‌سایت

·        بهینه‌سازی عملکرد

·        قدرت ریسپانسیو بالا

·        طرّاحی سفارشی

·        یک‌پارچگی عالی با سایر فریم‌ورک‌ها

 

کتاب‌خانه‌ها و فریم‌ورک‌های JavaScript

1. React.js: یکی از محبوب‌ترین کتاب‌خانه‌های جاوااسکریپت برای ایجاد رابط کاربری است که توسط فیسبوک (Facebook) توسعه داده‌شده‌است.

مزایا:

·        سرعت بالا

·        توسعه و نگهداری به‌نسبت راحت‌تر

2.Angular: یک فریم‌وک توسعه‌دهی است که توسط گوگل (Google) ساخته‌شده‌است و برای ساخت برنامه‌های پیچیده استفاده می‌شود.

مزایا:

·        ابزار‌های پیش‌رفته

·        مدیریت ساختار پروژه و ماژول‌ها

3.  Vue.js: یک فریم‌ورک سبک و قدرت‌مند برای ساخت رابط‌های کاربری است. در مقایسه با React و Angular از نظر یاد‌گیری و پیاده‌سازی ساده‌تر است.

مزایا:

·        سهولت در یاد‌گیری و استفاده

·        قابلیت انعطاف‌پذیری بالا

4.    Next.js: فریم‌ورکی برای React.js

اگر هدف شما بازار‌کار است، بعد از React باید به سراغ Next بروید. در‌واقع این فریم‌ورک نقاط ضعف React راپوشش داده و کامل می‌کند. همچنین می‌توانید پس از یاد‌گیری Next برنامه‌های کاملی را هم که در سمت سرور (SSR) و هم سمت کاربر (CSR) ارائه (render) می‌شود پیاده‌سازی کنید.

مزایا:

·        بهبود سئو

·        تصاویر بهینه‌سازی‌شده  (Image Optimization)

5.    Nuxt.js: فریم‌ورکی قوی برای Vue.js طرّاحی شده تا تجربه توسعه‌دهندگان را بهبود ببخشد.

·        بهبود سئو

·        پشتیبانی از ماژول‌ها  (Modules)

 

توجه داشته باشید که اگر کتاب‌خانه React.js برای یاد‌گیری و توسعه انتخاب می‌کنید قدم بعدی شما Next.js و اگر Vue.js را در نظر دارید قدم بعدی شما Nuxt.js است. نیازی نیست تمامی کتاب‌خانه‌ها و فریم‌ورک‌ها را آموزش ببینید بلکه باید متناسب با نیاز بازار‌کار این کار را انجام دهید تا در بهینه‌ترین مدت‌زمان ممکن به نتیجه مطلوب برسید؛ امروزه محبوب‌ترین آن‌ها React.js و Next.js است.

 

ابزار‌های کاربردی برای توسعه‌دهندگان فرانت‌اند

علاوه بر یادگیری زبان‌ها و فریم‌ورک‌های اساسی، استفاده از ابزارهای کاربردی یکی از مهم‌ترین مهارت‌هایی است که به شما کمک می‌کنند تا بهینه‌تر کدنویسی کنید، گروهی کار کنید، پروژه‌های خود را مدیریت کنید و در نتیجه کیفیّت کار را افزایش دهید تا در بازار رقابتی جلو بیفتید. در ادامه، با ابزارهایی از این قبیل آشنا می‌شویم.

Git: سیستم کنترل نسخه کد

یکی از مهم‌ترین ابزار‌های مورد‌نیاز در دنیای برنامه‌نویسی Git است که برای مدیریت نسخه‌های مختلف کد استفاده می شود.

مزایا:

·        ثبت تمامی تغییرات کد به همراه تاریخچه کامل

·        فراهم کردن بستر کار گروهی و ادغام کدها

·        برطرف کردن مشکل کد (ردیابی تغییرات و حتی امکان باز‌گشت به نسخه پیشین)

جهت میزبانی پروژه‌های Git از GitHub، GitLab و Bitbucket استفاده می‌شود که دو مورد اول پر‌کاربرد هستند.

TypeScript: نسخه پیش‌رفته‌تر JavaScript

یک زبان برنامه‌نویسی بر پایه JavaScript است و قابلیت‌های بیش‌تری از جمله تعریف نوع (Typing) را ارائه می‌دهد. استفاده از این فناوری به‌خصوص زمانی که پروژه‌ها بزرگ، پیچیده و یا گروهی هستند بسیار کمک‌کننده است.

مزایا:

·       جلوگیری از خطا‌های رایج در برنامه‌نویسی

·        بهبود خوانایی کد

State Management: مدیریت وضعیّت (state) و اطّلاعات (data) داخل برنامه

مدیریت state به ما کمک می‌کند تا کدی تمیز‌تر، خواناتر و با قابلّیت نگهداری بهتری داشته‌باشیم، به‌ویژه در برنامه‌هایی که تعاملات زیادی با کاربران دارند.

ابزار‌های محبوب مدیریت state:

Redux: معروف‌ترین ابزار مدیریت state به‌خصوص در React

Context: ابزار داخلی در React

MobX: ساده‌تر و سریع‌تر از Redux برای پروژه‌های کوچک و متوسط

نرم‌افزار‌های گرافیکی: طرّاحی ظاهر و رابط کاربری

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

باعث می‌شود این فرآیند روان‌تر صورت‌بپذیرد.

Figma: ابزاری محبوب در گروه‌های توسعه

ویژگی‌ها:

·        مدیریت ساده

·        امکان همکاری گروهی به‌صورت بر‌خط (online)

Photoshop: ابزار طرّاحی گرافیکی

ویژگی‌ها:

·        ابزار‌های متنوّع برای ایجاد جزئیات دقیق

 

معرّفی منابع (روش فراگیری آموزش)

 

روش‌های مختلفی برای یادگیری برنامه‌نویسی فرانت‌اند وجود دارد که به‌طور خلاصه به آن‌ها اشاره می‌کنیم:

• استفاده از مستندات رسمی وب‌سایت‌ها مانند w3schools.com و javascript.info.
• مستندات درج‌شده در وب‌سایت کتاب‌خانه‌ها و فریم‌وک‌ها‌ی مدّنظر مانند nextjs.org و ...
• ویدئو‌های آموزشی در یوتیوب و آپارات
• مطالعه‌ی کتاب
• شرکت در دوره‌های پروژه‌محور رایگان مانند freecodecamp.org
• مراجعه به انجمن‌های پرسش و پاسخ مثل stackoverflow.com هنگام بروز خطا

 

حوزه پیشنهادی بعد از تسلّط به فرانت‌اند

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

(back end) را انتخاب نموده و یک full stack developer شوید.

 

سوالات متداول

به‌احتمال زیاد یک‌سری ابهاماتی در ذهن شما شکل‌گرفته‌است مانند: ارتباط رشته‌دانشگاهی شما با برنامه‌نویسی، سنّ‌و‌سال برای شروع، داشتن دست‌گاه کامپیوتر قوی و ...

در پاسخ به این سوالات باید بگویم اگر رشته‌تحصیلی‌تان مرتبط با رشته‌کامپیوتر و حتّی زیر‌شاخه‌های آن نیست یا هیچ پیش‌نیازی ندارید، اهمّیتی ندارد چرا که شما به‌اندازه شخصی که رشته‌‌مرتبطی دارد فرصت پیش‌رفت و شانس کسب درآمد در این حوزه را به‌طور کامل دارید.

رده‌سنی نیز در برنامه‌نویسی معنایی ندارد و اگر در این رابطه نگرانی دارید، فراموش کنید.

برای شروع در حوزه فرانت‌اند نیاز به دستگاه خیلی قدرتمند نیست بلکه با یک رایانه (Laptop) ساده و سطح متوسّط هم می‌توان کار را آغاز نمود.

در صورت وجود هرگونه سوال یا نیاز به اطلاعات بیشتر، در قسمت نظرات پرسش خود را مطرح کنید؛ ما در کنار شما هستیم تا بهترین پاسخ را ارائه دهیم.

 

سخن پایانی

فرانت‌اند یک سیر هیجان ‌انگیز و فوق‌العاده است که با تلاش و استمرار می‌تواند به شغلی پر‌درآمد و جذّاب تبدیل شود. به یاد داشته‎‌باشید به‌روز‌رسانی مهارت‌های خود را فراموش نکنید چرا که با توجه به گسترش روز‌افزون دنیای وب و فنّاوری، امری ضروری به‌شمار می‌آید.

با داشتن نقشه راه مشخّص و تمرکز بر مهارت‌های موردنیاز بازار‌کار می‌توانید در این مسیر موفّق شوید و آینده‌ای درخشان برای خود رقم بزنید!

 

بااحترام،

تیم فنّی و آموزشی توت 🍇ناااا‌ااااااااااااااللناتتامزال