گام اول: کار آماده است!

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

تنها موارد ذکر شده را یاد بگیرید و بعد از آن به راحتی می توانید تبدیل به یک برنامه نویس فرانت اند شوید و یک فرصت شغلی مناسب پیدا کنید. من مطمئن هستم که بسیاری از افرادی که این کار را انجام داده‌اند یا به صورت فری لنسری و یا به صورت کارهای استخدامی حقوق زیادی را دریافت می‌کنند. با قرار دادن زمان بیشتر برای این نقشه راه می‌توانید موارد بیشتری را بیاموزید و بسیاری از پروژه‌های مختلف را انجام دهید. در ادامه لیستی از ایده‌های جالب برای کار کردن را در اختیار شما قرار خواهیم داد.
اقداماتی که می‌توانید انجام دهید:

– یک اپلیکیشن pomodoro ایجاد کنید، می‌توانید نسخه وب این اپلیکیشن را ایجاد کنید.

– یک صفحه وب ایجاد کنید که از GitHub Repositories API برای مشخص کردن ۱۰ ریسورس برتر هفته استفاده کند.

– یک اپلیکیشن ساده لیست todo ایجاد کنید که به شما اجازه می‌دهد تا فعالیت‌هایی که قصد انجام آن را دارید را به آن اضافه کنید و آن‌ها را علامت بزنید و یا آن ها را ویرایش کرده یا حتی حذف کنید.

– یک ساعت ایجاد کنید که کاربر با استفاده از آن بتواند زمان را شروع کرده یا متوقف کند و دوباره آن را راه اندازی کند.

هنگامی که این کارها را انجام دادید، درباره ی سیستم های کنترلی تحقیق کنید و نحوه‌ی استفاده از Git را نیز بیاموزید و در GitHub یک پروفایل ایجاد کنید.

گام دوم: CSS را به شکل بهتری بنویسید!

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

اقداماتی که می‌توانید انجام دهید:

– یادگیری بوت استرپ را به پروژه‌هایی که باید می‌آموختید اضافه کنید.

– پروژه‌هایی که در مرحله اول ساخته‌اید را با استفاده از این ابزارها دوباره نویسی کنید و پروژه‌هایی با کیفیت تر را تولید کنید.

– بهتر است CSS را درون SASS بنویسید.

گام سوم: بخش‌های سخت کار

این مرحله نیازمند صرف زمان بیشتری بوده و مهم‌ترین گام شما برای دست پیدا کردن به پیشرفت‌های مدرن می‌باشد. یادگیری بیشتر درباره زبان برنامه نویسی جاوا اسکریپت، یادگیری کار کردن با Webpack و آشنایی با مفاهیم اولیه آن از جمله موارد مورد نیازی است که شما در این مرحله باید به آنها دست پیدا کنید. درک این موضوع که Babel چیست و چرا ما از آن استفاده می‌کنیم و چگونه باید آن را با Webpack ادغام کنیم و در نهایت نحوه کد کردن آن با استفاده از ESLint از جمله موارد دیگری است که در این مرحله باید بیاموزید. اگر شما همین الان شروع به یادگیری این موارد کنید می‌توانید تا آخر هفته طعم تبدیل شدن به یک برنامه نویس فرانت اند مدرن را بچشید و به سمت جلو حرکت کنید. شما در طول تبدیل شدن به یک برنامه نویس فرانت اند مدرن می‌توانید از ابزارهای زیر نیز استفاده کنید.

اقداماتی که می‌توانید انجام دهید:

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

یک اپلیکیشن لیست فعالیت‌های روزانه بنویسید که از SASS برای CSS استفاده کند. استایل‌های بوت استرپ را به آن اضافه کنید. از BEM استفاده کنید. زبان برنامه نویسی جاوا اسکریپت را با استفاده از babel بارگذاری کنید و آن را با وب پک بسازید. صفحات بهینه سازی شده را ایجاد کنید و از آن در صفحه شخصی خود در گیت هاب استفاده کنید. تمامی این کارها برای تبدیل شدن به یک برنامه نویس فرانت اند مدرن مورد نیاز می‌باشد.

گام چهارم: اپلیکیشن‌های مدرن فرانت اند

گام بعدی برای تبدیل شدن به یک برنامه نویس فرانت اند، یادگیری برخی از فریم‌ورک‌های فرانت اند می‌باشد. گزینه‌های متعددی برای یک برنامه نویس فرانت اند مدرن وجود دارد اما مواردی که امروزه از آنها بیشتر استفاده می‌شود عبارت اند از React، Angular و Vue که من به شما توصیه می‌کنم از React برای این کار استفاده کنید.

اول از همه شروع به یادگیری React کنید، سپس نگاهی به Redux بیندازید و بعد از آن نیز استفاده کردن از CSS در جاوا اسکریپت را بیاموزید که البته این مورد خیلی نیاز نیست، اما اگر بخواهید حرفه ای شوید حتما باید نگاهی به styled components در CSS داشته باشید.

هنگامی که شما React را به خوبی آموختید باز هم پیش بروید و درباره اپلیکیشن‌های پیشرفته‌ای که وجود دارند مطالعه کنید، اکنون که فریم‌ورک‌های فرانت اند را به خوبی می‌شناسید در این مسیر نباید برای شما مشکلی پیش بیاید. نگاهی به چک لیست PWA بیندازید، درباره سرویس‌های مختلف مطالعه کنید، عملکرد وب سایت خود را مورد بررسی قرار دهید و آن را اندازه گیری کنید، به API‌های مختلف مرورگرها نگاهی بیندازید و سعی کنید که از مزایای استفاده از آن ها نهایت بهره را ببرید. به عنوان مثال شما می‌توانید درباره نحوه ذخیره سازی در آن ها و … و همینطور مدل‌های RAIL و الگوی PRPL مطالعه کنید.

اقداماتی که می‌توانید انجام دهید:

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

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

اپلیکیشنی طراحی کنید که به یوزر این اجازه را بدهد که مدت زمانی که قصد انجام فعالیتی را دارد را تنظیم کند و در طول این فعالیت نوتیفیکیشن‌هایی را برای او به نمایش بگذارد و در صورت تمایل موزیکی را نیز در حین انجام کار و بعد از تمام شدن کار اجرا کند.

سعی کنید که صفحه اصلی گیت هاب را با استفاده از React دوباره طراحی کنید، شما می‌توانید برای این کار از سایر کتابخانه‌هایی که در این زمینه وجود دارند نیز استفاده کنید.

گام پنجم: استفاده از تست‌های خودکار

یاد گرفتن نوشتن تست‌های خودکار یکی دیگر از مراحل مهمی است که برای تبدیل شدن به یک برنامه نویس فرانت اند به آن نیاز دارید. این موضوع باعث می‌شود تا در آینده از بسیاری از دردسرهایی که برای یک برنامه نویس فرانت اند وجود دارد رها شده و موقعیت شغلی بهتری را برای خود پیدا کنید. بهترین کاری که می‌توانید انجام دهید این است که رو به جلو حرکت کنید و تمامی انواع مختلف تست‌هایی که برای یک برنامه نویس فرانت اند نیاز دارد را یاد بگیرید و با مفاهیم اولیه و پیشرفته آن نیز به خوبی آشنا شوید و بتوانید برای اپلیکیشن‌های خود تست بنویسید. بعد از آن باز هم جلوتر بروید و با jest، Enzyme و Cypress بیشتر آشنا شوید و همچنین یاد بگیرید که test coverage را به خوبی محاسبه کنید تا آینده‌ی خوبی به عنوان یک برنامه نویس فرانت اند مدرن داشته باشید.

اقداماتی که می‌توانید انجام دهید:

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

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

بررسی کننده نوع داده به شما این اجازه را می‌دهد که کد خود را قابل نگهداری کنید و به همین دلیل رشد دادن کد بسیار راحت می‌شود. علاوه بر این با استفاده کردن از این امکان می‌توانید سرعت refactoring را بهبود ببخشید و در ide‌های مختلف کدهای خود را به راحتی اجرا کنید و همینطور داکیومنتیشن مناسب تری را نیز برای کدهای خود فراهم کنید. با این حال استفاده از typescript مزایای بسیار زیادی را برای شما دارد که به همین علت من به شما توصیه می‌کنم که از این روش استفاده کنید.

بعد از اتمام یادگیری typescript باز هم پیش بروید و هر کدام از برنامه‌های جاوا اسکریپت که از typescript استفاده می‌کنند را مورد استفاده قرار دهید و استفاده از آن‌ها را یاد بگیرید.

گام هفتم: رندر کردن سمت سرور

اپلیکیشن‌هایی که سمت سرور رندر می‌شوند به کاربر این اجازه را می‌دهند که عملکرد بهتری را از وب سایت مشاهده کنند و جست و جو گرها نیز نسبت به آن‌ها روند بهتری را برای جست و جو دارند و به راحتی نیز می توان آنها را ارتقا داد. اگر چه این موضوع خیلی مهم نیست ولی بدون شک به شما کمک می‌کند تا اپلیکیشن های پیشرفته تری را طراحی کنید. گزینه‌های مختلفی بر اساس فریم ورک انتخابی شما وجود دارد که به شما کمک می‌کند تا به یک برنامه نویس فرانت اند مدرن تبدیل شوید. اما اگر شما React.js را به عنوان فریم ورک خود انتخاب کرده اید به شما توصیه می‌کنیم تا Next.js را انتخاب کنید.

اقداماتی که می‌توانید انجام دهید:

شما با استفاده از Next.js می‌توانید به راحتی هر برنامه کاربردی که در بالا ساخته بودید را به سمت سرور متصل کنید و به راحتی باعث افزایش عملکرد وب سایت و یا اپلیکیشن تحت وب خود شوید.

گام هشتم: فراتر بروید!

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

نقشه‌ی راه کامل

ترجمه‌ای از:

Learn to become a modern Frontend Developer in 2019. Medium

منبع: https://bit.ly/2ARrDnR