بسیاری از ما هنگامی که میخواهیم یک توسعه دهنده در زمینهای خاص شویم، نمیدانیم باید از کجا شروع کنیم. یک نقشه راه کمک میکند تا آمادگی بهتری نسبت به زمینههایی که قرار هست بیاموزیم و در آنها حرفهای شویم کسب کنیم. در این مقاله سعی کردهایم تا یک نقشه جامع برای افرادی که علاقه به کار در حوزه Front-End هستند ارائه دهیم. این نقشه در واقع یک راهنما است که همه از جمله کارآموزان، مدیران، علاقهمندان و غیره میتوانند برای یادگیری و تمرین از آن استفاده کنند و به طور گسترده به تشریح مسیر Front-End (نحوه یادگیری آن و ابزار مورد استفاده آن) میپردازد.
در گام اول به صورت مختصر مروری بر مفاهیم و منابع Front-End خواهیم داشت. در گام دوم و سوم مباحث آموزشی و منابع را بررسی کرده، در گام چهارم و پنجم بر حوزههای شغلی و زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد. در گام آخر نیز حوزههای کاربری بعد از مسلط شدن بر Front-End را معرفی خواهیم کرد.
فرانت اند یا Front-End ، به قسمت قابل مشاهدهی وب سایت (نرمافزار) توسط کاربران میگویند. هدف از طراحی سایت این است که اطمینان حاصل شود که وقتی کاربران سایت را باز میکنند، اطلاعات را به گونهای مشاهده میکنند که به راحتی قابل خواندن و مرتبط هستند. در واقع باید تدبیری اندیشید تا کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آنها نمایش داد تا بتوانند به راحتی از بخشهای مختلف سایت استفاده کنند. بخش فرمهای ورودی اطلاعات، صداها، تصاویر، ویدیوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، جزو این اطلاعات قرار میگیرند.
این مسئله با این واقعیت پیچیدهتر است که کاربران اکنون از دستگاههای متنوعی با اندازه و وضوح صفحه نمایش متفاوت استفاده میکنند؛ بنابراین طراح مجبور میشود هنگام طراحی سایت، این جنبهها را مورد توجه قرار دهد. آنها باید اطمینان حاصل کنند که سایت آنها به درستی در مرورگرهای مختلف (مرورگر متقاطع)، سیستم عاملهای مختلف و دستگاههای مختلف (چندسکویی) ظاهر میشود که به برنامه ریزی دقیق از طرف توسعه دهنده احتیاج دارند.
Front-End به دو بخش اصلی طراحی وب و توسعه رابط کاربری تقسیم میشود. در بخش طراحی وب، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ ظاهر سایت را طراحی میکنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و Javascript است. زبانهای برنامه نویسی که در فرانت به کار میروند، سمت کاربر یا Client – side میباشند. بنابراین کدهای نوشته شده در فرانت در مرورگر کاربر پردازش و اجرا میشوند. این بدین معنی است که کاربر به راحتی به این کدها دسترسی مستقیم دارد و میتواند آنها را مشاهده کند. فرانت اند با بخش بک اند (Back-end) در ارتباط مستقیم است و تاثیر بسیاری بر روی تجربه کاربری (UX) دارد.
یک مرورگر وب نرمافزاری است که برای بازیابی، ارائه و اطلاعات جغرافیایی در اینترنت استفاده میشود. به طور معمول، مرورگرهای وب روی کامپیوتر دسکتاپ یا لپتاپ، تبلت، یا تلفن اجرا میشوند، اما با پیشرفت فناوری، امروزه یک مرورگر ممکن است در مورد هر چیزی (مانند وسایل خانه از جمله یخچال، تلویزیون و … ) یافت شود. معمولترین مرورگرهای وب که به ترتیب اغلب مورد استفاده قرار میگیرند:
UX یکی از مسائل مهم و ضروری است که در موفقیت وب سایت / اپلیکیشن یا سایر محصولات بسیار تاثیرگذار است. در گذشته طراح با فتوشاپ یا هر برنامه طراحی دیگر و با سلیقه خود و با فکر اینکه خروجی یک طرح با ظاهر زیبا باشد، اقدام به طراحی سایت یا اپلیکیشن مینمود. اما حالا چنین راهی نه تنها درست نیست بلکه احتمال شکست را در هدفی که داریم قوت میبخشد. تصور کنید سایت سفارش غذایی را طراحی کردید که ظاهری بسیار زیبا دارد. اما کاربر نمیتواند تمامی مراحل را به درستی طی کند و غذای خود را سفارش دهد. اگر وب سایت شما برای کاربر تجربه ای خوبی را رقم نزند در این بازار رقابتی وب و اپ، کاربر به سمت وب سایت یا اپلیکیشن رقیب شما خواهد رفت چرا که با استفاده آن تجربه بهتری نسبت به اپ یا وب سایت شما داشته است. آموزش تجربه کاربری فقط طراحی رابط نیست و موارد گستردهتری را شامل میشود. عده ای به اشتباه طراحی رابط کاربری (UI) را با تجربه کاربری یکی میدانند که این یک برداشت اشتباه است. تجربه کاربری یک موضوع گستردهتر میباشد که موارد بسیار مهمی را شامل میشود. مواردی که بایستی در طراحی محصول، سایت، اپ یا … در نظر گرفته شود.
Back-end به بخشی از یک وب سایت یا نرم افزار میگویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفهی کنترل منطق آن را بر عهده دارد. سایتهای دینامیک به برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبانهای برنامه نویسی پیادهسازی کنند. کاربران به کدهای نوشتهشده در بک اند دسترسی ندارند و نمی توانند آنها را مشاهده کنند. این بخش از سایت مانند قسمتی از کوه یخ است که در زیر سطح آب قرار گرفته است. سمت سرور با بخش سمت کاربر ارتباط مستقیم دارد و به اجزایی که در رابط کاربری طراحی شدهاند جان میبخشد. برنامه نویس Back-end باید اطلاعات را متناسب با اهداف مختلف از پایگاهداده دریافت کند و در صورت نیاز پس از پردازش به کاربر نمایش دهد. بنابراین Back-end از دو بخش منطق سایت و پایگاه داده تشکیل شده است.
اگر میخواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه ای کد HTML ، CSS و JavaScript بنویسید. در این بخش نقشهی راه برای کسب مهارتهای مورد نیاز بروز آورده شده است. نکات مورد توجه این نقشه عبارتند از:
نقشهی راه را بصورت گرافیکی میتوانید از اینجا مشاهده کنید. توجه داشته باشید که در هر زمینهای باید در مورد اتفاقات و پیشرفتهای آن به روز بود چرا که بر روی عملکرد و سرعت یادگیری ما بسیار تاثیر خواهد داشت. به عنوان مثال نمیتوان منکر افزایش تعداد زیاد کاربران 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 در جهان بین 65 هزار دلار تا 110 هزار دلار است و در کشور ما از سه میلیون تومان شروع میشود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز میرسد.
توجه: اگر اصطلاحات “Full Stack” یا اصطلاحات عمومی “Web Developer” در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی بهکار رود که مسئولیت کلیه جنبههای توسعهی وب / برنامهها را دربرمیگیرد، یعنی هر دو بخشBackend و Front-End.
در سالهای اخیر، چارچوب مبتنی بر وب در یک جریان بیانتها در حال ظهور است، مانند React, Vue, AngulaJS و … . شرکتهای بزرگ زیادی توجه بیشتری به Front-End میکنند که باعث میشود توسعه دهنده وب، یکی از پرخواستارترین مشاغل در دنیا باشد. بسیاری از مردم، به خصوص جوانان مشتاق رسیدن به این صنعت هستند. بعد از تسلط بر موارد موجود در این مقاله و تبدیل شدن به یک توسعه دهنده Front-End میتوانید سایر مباحث مربوط به وب مانند Backend را شروع کنید و در نهایت به یک Full Stack Developer تبدیل شوید. توصیه ما به شما این است که حتما در یک زمینه مهارت کامل و بالا کسب کرده و سپس به سراغ مبحث بعدی بروید و نسبت به مسائل نگاه سطحی نداشته باشید. اگر درمورد این نقشه راه نیاز به مشورت و راهنمایی دارید حتما با ما در میان بگذارید.
به نظر من مطالب وب سایت شما از همه نظر قابل مقایسه با سایت های دیگه نیست و بابت همه چی ممنون