برنامه نویسی از شغل های چالش برانگیزی هست که کمتر پیش میاد تکراری و خسته کننده باشه اما در هر زمینه مشکلات خاص خودش رو داره که اگر به این زمینه علاقه نداشته باشید، شما رو به فردی عصبی یا پر استرس تبدیل می کنه. فرانت اند به عنوان یکی از بخش‌های توسعه وب، چالش‌های خاص خودش رو داره اما به دلیل ترکیب دیزاین و برنامه نویسی، طرفداران زیادی داره، با اینکه از سمت سایر حوزه‌های برنامه نویسی برای تغییر پیکسل یا دادن شدو، مورد تمسخر واقع میشه? اما جذابیت خودش رو داره. قبل از خوندن این مقاله بهتره با خودتون رو راست باشین که آیا واقعا این شغل رو دوست دارین. برای راهنمایی در این مورد می‌تونید به بخش سری اول Road Map CMD مراجعه کنید.
مسعود بنابی(Frontend Engineer بازار) , ( Jeff Mosawy (Frontend Engineer at snapp، امیرحسین جعفری(Supervisor of marketing web development at digikala) و اشکان پور قاسمی(Frontend Developer at peeyade) در نوشتن این مقاله کمک زیادی کردند که همینجا ازشون تشکر می‌کنم.
مزایا و معایب فرانت?
فرانت اند به دلیل اینکه محصول نهایی رو در اختیار کاربران قرار میده، دقت زیادی رو می‌طلبه و می‌تونه در انتخاب محصول توسط کاربر تأثیر گذار باشه، پس باید کمی حوصله به‌خرج بدید. اما این موضوع باعث شده تا پیشرفت‌ها و تحولات زیادی داشته باشه و جذاب‌تر به‌نظر برسه.
به قول کتاب (You Dont Know JS):
When developers encounter confusion they usually blame the language instead of their lack of understanding.
البته علاوه‌بر درگیری با کد و استایل باید مراقب پشتیبانی مرورگر‌ها، داده‌های تعریف شده، ابعاد دیوایس‌های مختلف و چیز‌های از این قبیل هم باشید.
درصورتی که جاوااسکریپت رو یاد بگیرید، علاوه‌بر توسعه وب، می‌تونید با لایبرری‌هایی مثل Electron.js, React native, Native script اپلیکیشن موبایل یا دسکتاپ تولید کنید.
ویژگی‌ها:
ـ ریز بینی باشید تا پروژه ظاهر بی نقصی داشته باشه.
ـ عاشق کارهای اینتراکشن باشن.
ـ تا کاری درست انجام نشه، بی خیالش نشیم.
ـ تفکر منطقی و خلاق داشته باشید و اینکه هر روز یک مشکل رو باید حل کنید.
ـ همیشه باید بروز باشید و یادبگیرید.
ـ اگر علاقه داشته باشید کارتون، میشه سرگرمیتون.
ـ از شروع کردن چیزای جدید از جمله شروع به کارکردن با یه لایبرری جدید نترسیم(شیرجه بزنیم تو قضیه).
ـ راستی برای هرکاری از لایبرری استفاده نکنید و سعی کنید خودتون مشکل رو حل کنید.
ـ گاهی اوقات لازمه یک پروژه حتی بدون هدف رو شروع کنید تا تجربه بیشتری بدست بیارید.
دانشگاه؟؟؟????
زیاد شنیدیم که دانشگاه تأثیر زیادی نداره اما بیشتر مباحث آکادمی از معماری کامپیوتر تا الگوریتم‌ها کاربردی هستند پس دو نشتنش لازمه اما صرفا به تحصیلات آکادمی ختم نمیشه و می‌تونید خودتون وقت بذارید و دانش مورد نیاز رو کسب کنید. برای مثال: زمانی که لازمه یک انیمیشن پیچیده رو پیاده سازی کنید، آگاهی از نحوه عملکرد CPU و GPU لازمه، Data Stracture ,Binery Search ،Algorithm ،Big-o-Notation,.... اینم یه لینک بدرد بخور: Algorithm and Data Structure
مهارت ها:
ـRoad Mapهای متعددی از جمله DeveloperRoad Map برای فرانت اند وجود داره اما در ابتدا مهارت پیداکردن در HTML ,CSS , JS لازمه که نیاز به تمرین زیاد داره. پس از رسیدن به حد قابل قبول، می‌تونید این رود مپ رو شروع کنید. این لینک به‌صورت کامل توضیح داده که برای تبدیل شدن به یک فرانت اند دولوپر واقعی، چه مهارت‌هایی نیاز دارید اما در نظر داشته باشید که باشروع هریک از این مباحث، حتما تمرین کنید(البته سعی کنید اقیانوسی به عمق یک بند انگشت نباشید?). از جمله مهارت‌های اصلی، توانایی حل مسئله و منطقی فکر کردنه، که با تمرین کردن بدست میاد; همچنین فرانت هم میشه در شاخه‌های مختلفی، به‌صورت تخصصی انتخاب کرد، مثل: دیزاین کردن یا لایبرری نوشتن، مثل فریم ورک خوبی که امیر برای ویو نوشته.پس برای شروع لازمه که این موارد رو یاد بگیرید:
۱- مفاهیم اولیه برنامه نویسی، مثل: شرط، حلقه, Design Pattern و...
2- HTML, CSS, Design fundamental
3- Javascript
4- Sass, Less, Style Foundation
۳- فریمورک(مثل Vue, Angular, React که از فریمورک‌های پرطرفدار هستند)
۴- ارتباط بین فرانت اند و بک‌اند(Restful Api ,HTTP ,Ajax , Graphql )
۵- ورژن کنترل(Git, CVS یا...) و (Build Tools(webpack, Babel
۶- کارکردن با ترمینال لینوکس(بهتره LPIC1 رو بگذرونید)
8- Test Code: TDD/ Karma/ Unit Test/ UI Test
۹-وب و اینترنت چگونه کارمیکنه؟
10- Status Code/ Ports / Networking
منابع:
HTML & CSS:
-css tricks(از جمله سایت‌هایی هست که دوستش دارم)
JS:
-Laracast(این هم از سایت‌هایی هست که خیلی دوستش دارم)
You Do't Know JS(از بهترین کتاب‌ها)
- دبلیو تری و MDN یکی از منابع خوب هستند اما این‌ها فقط برای شروع هست و نباید به آنها اکتفا کنید.
- دیدن کار بقیه خیلی می‌تونه مفید باشه و شما رو با راه حل‌های جدید آشنا کنه.(codepen.io)
-کنفرانس‌هایی مثل JS Conf هم می‌تونه کمک زیادی به شما بکنه.
-فرانت کست هم از سایت‌های خوب ایرانیه اما لطفا با دیدن این سایت از خوندن مقالات و داکیومنتیشن‌های انگلیسی خودداری نکنید.
اینجا هم یکسری پروژه open source هست که می‌تونید کم کم با کار کردن روی اونها، تجربیات بیشتری بدست بیارید.
به روز ماندن :
توصیه‌هایی بدون ادیت:
- از پروژه‌های جدید و چالشی نترسیم و با علاقه به سمت اونها بریم، چون دقیقاً یادگیری در انجام چنین پروژه‌هایی هست که باعث میشه تجربه‌های زیادی کسب کنید.
- قطعاً در هر مرحله‌ای، Stackoverflow یکی از نزدیک‌ترین دوستانتون خواهد بود، اما چه خوب هست تا اولین کد رو دیدیم، سریع همون رو کپی-پیست نکنیم و پس از فهم منطقش، از اون کد استفاده کنیم، البته هیچ تضمینی نیست که اولین جواب، درست‌ترین و بهینه‌ترین هست.
- کنجکاو باشیم؛ یعنی به این صورت که اگر بعد از چندبار سعی و خطا مشکلی رو حل کردید، اکتفا نکنید، حتماً بفهمید که دقیقاً چه کاری کردید که مشکل حل شد. این مورد دو تا مزیت داره؛ اول اینکه باعث یادگیری شما خواهد شد و دوم اینکه ممکنه کاری که کردید باعث بشه قسمت دیگری تحت تاثیر قرار بگیره. پس هر کدی که زده میشه و یا هرکاری که می‌کنید با دقت و کنجکاوی انجام بدید.
- سریع به دنبال یادگیری فریمورک نباشیم؛ یادگیری پایه و اساس خیلی مهم‌تر هست و باعث میشه یادگیری فریم‌ورک‌ها و کتابخانه‌ها راحت‌تر باشه.
- بهترین منبع یادگیری فریمورک و یافتن جواب سوال‌ها، مستندات خود فریمورک و یا کتابخانه هست. پس خوندن مستندات رو فراموش نکنیم.
- کسی که تازه Frontend رو شروع کرده حتماً پیشنهاد میشه که قبلش روش جستجو کردن و پیدا کردن پاسخ سوالاتش رو یاد بگیره.
- مقالاتی که با عناوین Best Practiceها هستند رو هم در نظر بگیرید. چون در نهایت برای حرفه‌ای شدن باید یک سری Best Practiceها رو رعایت کرد. تمیز و با حوصله کد زدن هم فراموش نشود.
دو تا Cheat Sheet:
