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

صحبت های ابتدایی

در این پست قصد داریم درباره نقشه راه شما برای تبدیل شدن به یک برنامه نویس فرانت اند صحب کنیم پس در صورتی که قصد دارید به یک برنامه نویس فرانت اند مدرن تبدیل شوید ما این نقشه ی راه کامل را در اختیار شما قرار خواهیم داد.

تحریکات اولیه

قبل از آن که مقاله را شروع کنیم به شما توضیحاتی درباره خودم می دهم، در طی شش سال گذشته من به عنوان یک برنامه نویس فول استک فعالیت کرده ام و به عنوان یک مهندس ارشد فعالیت دارم و به همین علت است که علاوه بر سرگرمی بخشی از فعالیت های شغلی من این است که شاهد پیشرفت های سیستم ها باشم و استفاده از این سیستم ها و ابزارها را به توسعه دهندگان آموزش دهم.

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

سلب مسئولیت

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

هدف از این مقاله این است که برای شما یک نقشه ی راه ارائه شود که ایده ای درباره آینده ی تبدیل شدن به یک برنامه نویس فرانت اند به شما بدهد، اگر از یادگیری ابزارهایی که در آینده باید یاد بگیرید کسل می شوید، نمی توانید موفق باشید. شما به هیچ وجه نباید توجهی به ابزارهایی که مد می شوند داشته باشید بلکه باید بدانید که چرا یک ابزار نسبت به سایر ابزارهای موجود بهترین است. نادیده گرفتن این واقعیت می تواند بازار کار آینده ی شما را تحت تاثیر خود قرار دهد. مورد سوم این است که شما نیازی به آموختن تمامی مطالبی که ما بیان می کنیم ندارید. شاید این نقشه ی راه کمی بزرگ باشد اما نگران نباشید و بدانید که شما تنها نیاز دارید که بخشی از آن را بیاموزید. من در این مطلب سعی کرده ام که فقط چیزهایی که شما در آینده برای تبدیل شدن به یک برنامه نویس فرانت اند مدرن نیاز دارید را بیان کنم و شما می توانید تنها برخی از آن ها را برای موفقیت خود بیاموزید.

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

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

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

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

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

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

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

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

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

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

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

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

-          CSS را درون SASS بنویسید.

مرحله سوم: بخش های سخت کار

این مرحله نیازمند صرف زمان بیشتری بوده و مهم ترین گام شما برای دست پیدا کردن به پیشرفت های مدرن می باشد. یادگیری بیشتر درباره زبان برنامه نویسی جاوا اسکریپت، یادگیری کار کردن با Webpack و آشنایی با مفاهیم اولیه آن از جمله موارد مورد نیازی است که شما در این مرحله باید به آنها دست پیدا کنید. درک این موضوع که Babel چیست و چرا ما از آن استفاده می کنیم و چگونه باید آن را با webpck ادغام کنیم و در نهایت نحوه کد کردن آن با استفاده از 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 می توانید به راحتی هر برنامه کاربردی که در بالا ساخته بودید را به سمت سرور متصل کنید و به راحتی باعث افزایش عملکرد وب سایت و یا اپلیکیشن تحت وب خود شوید.

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

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

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

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

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