Front-End چیست و چگونه آن را یاد بگیریم ؟

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

در گام اول به صورت مختصر مروری بر مفاهیم و منابع Front-End خواهیم داشت. و در گام دوم و سوم مباحث آموزشی و منابع را بررسی کرده، در گام چهارم و پنجم بر حوزه‌های شغلی و زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد. در گام آخر نیز حوزه‌های کاربری بعد از مسلط شدن بر Front-End را معرفی خواهیم کرد.

گام اول: دانشنامه‌ی Front-End ، پیش‌نیازها و مفاهیم پایه

Front-End و اهمیت آن

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

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

Front-End به دو بخش اصلی طراحی وب و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی وب، طراحان با نرم افزار‌های گرافیکی مانند فتوشاپ ظاهر سایت را طراحی می‌کنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و    Javascript  است. زبان‌های برنامه نویسی که در فرانت به کار می‌روند، سمت کاربر یا Client – side می‌باشند. بنابراین کدهای نوشته شده در فرانت در مرورگر کاربر پردازش و اجرا می‌شوند. این بدین معنی است که کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Back-end) در ارتباط مستقیم است و تاثیر بسیاری بر روی تجربه کاربری (UX) دارد.

مرورگرهای وب (Web browsers)

یک مرورگر وب نرم‌افزاری است که برای بازیابی، ارائه و اطلاعات جغرافیایی در اینترنت استفاده می‌شود. به طور معمول، مرورگرهای وب روی کامپیوتر دسکتاپ یا لپ‌تاپ، تبلت، یا تلفن اجرا می‌شوند، اما با پیشرفت فناوری، امروزه یک مرورگر ممکن است در مورد هر چیزی (مانند وسایل خانه از جمله یخچال، تلویزیون و … ) یافت شود. معمول‌ترین مرورگرهای وب که به ترتیب اغلب مورد استفاده قرار می‌گیرند:

• کروم (chrome)
• سافاری (Safari)
• اینترنت اکسپلورر (Internet Explore)
• فایرفاکس (Firefox)
• لبه (Edge)

تجربه‌ی کاربری (User Experience)

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

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

بک اند (Backend)

Back-end به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. سایت‌های دینامیک به برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند.

کاربران به کدهای نوشته‌شده در بک اند دسترسی ندارند و نمی‌ توانند آن‌ها را مشاهده کنند. این بخش از سایت مانند قسمتی از کوه یخ است که در زیر سطح آب قرار گرفته است. سمت سرور با بخش سمت کاربر ارتباط مستقیم دارد و به اجزایی که در رابط کاربری طراحی شده‌اند جان می‌بخشد. برنامه نویس Back-end باید اطلاعات را متناسب با اهداف مختلف از پایگاه‌داده دریافت کند و در صورت نیاز پس از پردازش به کاربر نمایش دهد. بنابراین Back-end از دو بخش منطق سایت و پایگاه داده تشکیل شده است.

گام دوم: معرفی همه مباحث آموزشی و ابزارها، تا آخرین تکنولوژی‌های روز

اگر می‌خواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه ای کد HTML ، CSS و JavaScript بنویسید. در این بخش نقشه‌ی راه برای کسب مهارت‌های مورد نیاز بروز آورده شده است. نکات مورد توجه این نقشه عبارتند از:

• نحوه‌ی کار بستر وب را بیاموزید. مطمئن شوید که “چه زمان” و “کجا” از چه فناوری‌ها و زبان‌هایی استفاده می‌شود. همچنین بهتر است در مورد دامنه‌ها ، DNS ، URL‌ها ، HTTP ، مرورگرها و سرورها و سایر مفاهیم وب اطلاعات پایه‌ای کسب کنید. البته توجه داشته باشید که در این مرحله لازم نیست در این موارد غرق شوید، فقط هدف خود را درک کنید که هر قسمت چیست و چگونه کنار سایر قسمتها قرار می‌گیرند. با ساختن صفحات وب ساده شروع کنید.
• یادگیری مفاهیم پایه‌ای شامل HTML, CSS, JavaScript
• اصول طراحی واسط کاربری (یعنی الگوهای UI ، طراحی تعامل ، طراحی تجربه کاربر و قابلیت استفاده) را بیاموزید.
• یادگیری عمیق‌تر مفاهیم: در HTML: فونت‌ها، آیکون‌ها، رنگ‌ها و نمودارها، در جاوا اسکریپت: HTML DOM
• برای کار با درخواست‌های سمت سرور XML, AJAX و JSON را یاد بگیرید.
• هدف سایت خود را پیدا کرده و جعبه ابزار مرتبط با کارکرد آن را پیاده سازی کنید.
• یکی از فریم‌ ورک‌های مرتبط در CSS  را بیاموزید: بوت استرپ، متریال دیزاین .
• یکی از فریم ورک‌های مرتبط در جاوا اسکریپت  را بیاموزید:  /JQuery, React.js , Angular.js , Vue.js, W3.JS

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

• تمرین مهندسی نرم افزار (به عنوان مثال ، طراحی و معماری برنامه، قالب ها، Git، آزمایش، نظارت، خودکارسازی، کیفیت کد، روش‌های توسعه) را بیاموزید.
• Nodejs را یاد بگیرید.
• یک توصیه مفید: در مرحله اول ، فناوری‌های اساسی و واقعی را بیاموزید. jQuery را یاد نگیرید ، DOM را یاد بگیرید. SASS را یاد نگیرید، CSS را یاد بگیرید. JSX را یاد نگیرید ، HTML را یاد بگیرید. TypeScript را یاد نگیرید، جاوا اسکریپت را یاد بگیرید. فقط از Bootstrap استفاده نکنید ، الگوهای UI را بیاموزید. یادگیری اصول ابتدایی باعث فهم بهتر و سرعت بیشتر شما خواهد شد و بعدها خواهید دید سایر فناوری‌های این زمینه فرزندان همین اصول پایه‌ای هستند.

نقشه‌ی راه را بصورت گرافیکی می‌توانید از اینجا مشاهده کنید. توجه داشته باشید که در هر زمینه‌ای باید در مورد اتفاقات و پیشرفت‌های آن به روز بود چرا که بر روی عملکرد و سرعت یادگیری ما بسیار تاثیر خواهد داشت. به عنوان مثال نمی‌توان منکر افزایش تعداد زیاد کاربران typescript در سال جاری (۲۰۲۰) شد. و یا با گذشت سالها، امروزه VScode، به عنوان ویرایشگر متن نسبت به سایرین جایگاه برتری دارد.

گام سوم: معرفی منابع و روش برای مطالعه پیش‌نیازها

استفاده از مدارس و کمپهای کدنویسی Front-End یکی از رایج‌ترین راه‌های کسب دانش در این زمینه است. اما به خاطر داشته باشید، بهترین و جامع‌ترین منبع آموزشی در مورد فناوری‌های وب، خود وب است! همه‌ی چیزهایی که شما باید یاد بگیرید در وب به صورت رایگان با هزینه‌های ناچیزی وجود دارد. اولین و بهترین منبع خودآموز رایگان برای یادگیری سایت https://www.w3schools.com/ است، جایی که می‌توانید کدهای خود را به صورت مستقیم اجرا کرده و نتیجه را ببینید. از سایر منابع (شامل ویدیوها و کتاب‌ها) می‌توان به گزینه‌های زیر اشاره کرد:

گام چهارم: حوزه‌های شغلی مرتبط

شکاف بزرگی که برای چندین سال در فضای توسعه دهنده Front-End وجود دارد بین دو نوع بسیار متفاوت توسعه دهندگان این حوزه است. گروه اول برنامه نویسان متمرکز هستند که JavaScript را به عنوان زبان برنامه نویسی در نظر می‌گیرند و از HTML و CSS به عنوان یک انتزاع  و در قالب زبانهایی مثل JSX و CSS در JS  استفاده می‌کنند. گروه دوم توسعه دهندگان علوم غیر رایانه ای هستند که به HTML ، CSS و JavaScript توجه می‌کنند، زیرا به طور خاص به UI مربوط می‌شوند. رفته رفته اصطلاح توسعه دهنده front-end بدون بیان کلمات برای پرداختن به اینکه در مورد چه نوع توسعه دهنده Front-End ای مورد بحث قرار گرفته است، در آستانه بی معنی بودن است.

در زیر لیست و توضیحات عناوین مختلف شغلی این زمینه آورده شده است. توجه داشته باشید که هر شغل که شامل کلمه “front-end” ، “سمت مشتری” ، “UI وب” ، “HTML” ، “CSS” یا “JavaScript” باشد به طور معمول خواستار افرادی هستند که دارای HTML، CSS، DOM  و متخصص JavaScript می‌باشند.  درآمد یک توسعه دهنده  Front-End در جهان بین ۶۵ هزار دلار تا ۱۱۰ هزار دلار است و در کشور ما از سه میلیون تومان شروع می‌شود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز می‌رسد.

• Front-End Developer: عنوان شغلی عمومی است که یک توسعه دهنده را توصیف می‌کند که تا حدی در HTML ، CSS ، DOM و JavaScript مهارت دارد و این فناوری‌ها را روی بستر وب پیاده سازی می‌کند.
• Front-End Engineer (با نام مستعار JavaScript Developer یا Full Stack JavaScript Developer): عنوان شغلی است که به یک توسعه دهنده داده می‌شود که از علوم کامپیوتر و مهندسی پیش زمینه دارد و از این مهارت‌ها برای همکاری با فناوری‌های Front end استفاده می‌کند. این نقش به طور معمول نیاز به دانش علوم کامپیوتر و سال‌ها تجربه‌ی توسعه نرم افزار دارد. هنگامی که کلمه “برنامه‌نویس JavaScript” در عنوان شغل گنجانده شده است ، نشان می‌دهد که توسعه دهنده باید یک توسعه دهنده‌ی پیشرفته جاوا اسکریپت باشد که دارای دانش برنامه نویسی پیشرفته ، توسعه نرم افزار و مهارت‌های توسعه برنامه (یعنی دارای سالها تجربه در ساخت برنامه‌های نرم‌افزاری پیشرفته) باشد. .

• CSS / HTML Developer: عنوان شغلی که یک توسعه دهنده را توصیف می‌کند که در HTML و CSS ماهر است (شامل JavaScript و سایرین نمی‌شود)

• Front-End Designer Web: هنگامی که کلمه “طراح” در عنوان شغلی گنجانده شده است ، این نشان می‌دهد که طراح نه تنها دارای مهارت‌های Front end (یعنی HTML و CSS) بلکه دارای مهارت‌های طراحی حرفه ای (طراحی ویژوال و طراحی تعامل) خواهد بود.
• توسعه دهنده / مهندس UI (User Interface): هنگامی که کلمه “رابط” یا “UI” در عنوان شغلی درج شده باشد ، این بدان معنی است که توسعه دهنده می‌تواند علاوه بر مهارت‌های توسعه دهنده جلویی یا مهندسی جلو ، از مهارت‌های طراحی تعامل نیز برخوردار باشد.

• Mobile / Tablet Front-End Developer: هنگامی که کلمه “Mobile” یا “Tablet” در عنوان کار گنجانده شده است ، این نشان می‌دهد که توسعه دهنده باید دارای تجربه توسعه Front-End ای باشد که در دستگاه‌های تلفن همراه یا تبلت‌ها قرار می‌گیرد.

•  Expert SEO: هنگامی که کلمه “SEO” در عنوان شغلی درج شده است ، این نشان می‌دهد که توسعه دهنده تجربه گسترده‌ای در زمینه تهیه‌ی فناوری‌های Front-End به سمت یک استراتژی سئو دارد.

• Front-End Accessibility Expert: هنگامی که کلمه “قابلیت دستیابی” در عنوان شغلی درج شده است ، این نشان می‌دهد که توسعه دهنده تجربه‌ی گسترده ای در زمینه‌ی تهیه فناوری‌های Front-End ای را دارد که از الزامات و استانداردهای دستیابی پشتیبانی می‌کند.

• Front-End DevOps : هنگامی که کلمه “DevOps” در عنوان شغل موجود است ، این نشان می‌دهد که توسعه دهنده باید تجربه‌ی گسترده‌ای با شیوه‌های توسعه نرم افزار مربوط به همکاری ، ادغام ، استقرار ، اتوماسیون و کیفیت داشته باشد.

• Test-End Testing / QA: هنگامی که کلمه “Testing” یا “QA” در عنوان شغلی درج شده است ، این بدان معنی خواهد بود که توسعه‌دهنده دارای تجربه گسترده ای برای تست و مدیریت نرم افزار است که شامل تست واحد، آزمایش عملکردی و آزمایش کاربر می‌باشد.

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

گام پنجم: مدت زمان لازم برای پیمودن مسیر

• اصول اولیه وب: حداقل یک هفته
• HTML, CSS, JavaScript: حداقل یک ماه
• تسلط بر ابزارهای مرتبط با توسعه وب (مانند فتوشاپ و …): ۱۵ روز
• ساخت یک وب‌ سایت اولیه: حداقل یک ماه

گام ششم: حوزه‌های پیشنهادی بعد از تسلط بر Front-End

در سال‌های اخیر، چارچوب مبتنی بر وب در یک جریان بی‌انتها در حال ظهور است، مانند React, Vue, AngulaJS و … . شرکت‌های بزرگ زیادی توجه بیشتری به Front-End می‌کنند که باعث می‌شود توسعه دهنده وب، یکی از پرخواستارترین مشاغل در دنیا باشد. بسیاری از مردم، به خصوص جوانان مشتاق رسیدن به این صنعت هستند.

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