اگر تصمیم گرفته‌اید که وارد دنیای توسعه وب شوید شاید از خودتان بپرسید که ابتدا باید چه چیزی را یاد بگیرم؟! از آنجایی که دنیای توسعه وب بسیار بزرگ است و منابع و تکنولوژی‌های بسیار زیادی دارد ممکن است انتخاب یک مسیر درست کار سخت و پیچیده‌ای باشد.
دلیل نوشتن این مطلب هم دقیقا چنین موضوعی بوده، ما سعی داریم تا در این مطلب شما را با مسیرهای موجود آشنا کرده و به شما در انتخاب یکی از آن‌ها کمک کنیم. بیایید شروع کنیم.
تکنولوژی‌هایی که به عنوان توسعه‌دهنده وب باید بدانید
فارغ از آنکه در چه مسیری از توسعه‌دهنده بودن قرار دارید، شما باید با ابزارهای مشترک برنامه‌نویسان کار بکنید. بیایید با پنج مورد از این ابزارها آشنا شویم:
- سورس کنترل: یکی از فاکتورهای یک توسعه‌دهنده خوب این است که گیت را می‌داند و از آن استفاده می‌کند. استفاده از گیت یا به صورت کلی یک سورس کنترل به شما این قابلیت را می‌دهد تا بتوانید به خوبی کدهای‌تان را مدیریت کنید و با افراد تیم همکاری داشته باشید.
- Bash: برای آنکه بتوانید کارهای‌تان را سریع‌تر انجام دهید، استفاده از رابط گرافیکی کار منطقی نیست، از طرف دیگر بیشتر ابزارهای توسعه از رابط گرافیکی پشتیبانی نمی‌کنند، به همین دلیل نیاز است که کار با Bash یا محیط متنی سیستم عامل‌تان و دستورات آن را به خوبی فرا بگیرید.
- دیباگینگ: خواه در مسیر توسعه Front-End باشید و یا Back-End، در تمام روال‌های کدنویسی با مشکلات و باگ‌ها برخورد خواهید کرد. مطمئن شوید که با ابزارهای دیباگینگ IDE یا کد ادیتوری که استفاده می‌کنید آشنا شوید.
- IDE یا کد ادیتور: IDEها و کد ادیتورهای بسیار زیادی ساخته شده‌اند. پیشنهاد من این است که یک مورد را انتخاب کرده و به خوبی با تمام قابلیت‌های آن آشنا شوید. IDE بهترین دوست یک توسعه‌دهنده است، اگر به خوبی بتواند با کلیدهای میانبر و ابزارهای یک مورد خاص آشنا شوید می‌توانید روال توسعه بسیار سریعی داشته باشید. من به شخصه VS Code را پیشنهاد می‌کنم.
- متدولوژی‌های Agile/SCRUM/Kanban: زمانی که در یک تیم کار می‌کنید بسیار مهم است که با متدولوژی‌های توسعه محصول آشنایی داشته باشید.
توسعه‌دهنده Front-End
در حالت کلی یک توسعه‌دهنده Front-End کارهای زیر را انجام می‌دهد:
- طراحی صفحات وب با استفاده از HTML/CSS
- تعامل و کار با DOM از طریق جاوااسکریپت و فریمورک‌های آن
- تعامل با APIها
HTML/CSS
پایه‌های اصلی طراحی وبسایت و توسعه Front-End این دو مورد هستند. HTML برای ساختاردهی به محتوای وبسایت استفاده می‌شود، CSS نیز کمک می‌کند تا روی محتوای صفحه استایل‌های منحصر به فردی را اعمال کنید.
انتظار می‌رود که یک تازه‌کار دنیای وب بتواند موارد زیر را پیاده‌سازی کند:
- استفاده از HTML برای ساخت یک صفحه وب
- استایل‌دهی به المان‌های صفحه با استفاده از CSS
- کار با CSS از طُرُق مختلف (Inline، External و Internal)
بعد از آنکه یک توسعه‌دهنده مبتدی توانست کارهای بالا را انجام دهد، باید سراغ موضوعات پیشرفته‌تری برود:
- استفاده از CSS Grid و Flexbox برای موقعیت‌دهی به المان‌ها
- استفاده از یک پیش‌پردازنده برای مدیریت بهتر کدهای CSS
برای آنکه بتوانید دانش‌تان را کاربردی‌تر کنید می‌توانید چند پروژه ساده را برای خود تعریف کرده و روی آن‌ها کار کنید. نگران Javascript و فریمورک‌ها نباشید، فعلا تنها روی CSS خالص تمرکز کنید.
فریمورک‌ها
قدم بعدی شما یادگیری فریمورک‌های CSS خواهد بود. در واقع فریمورک‌ها شامل یکسری المان از پیش ساخته شده هستند که به شما کمک می‌کنند تا بتوانید سریع‌تر یک پروژه را توسعه داده و باری دیگر چرخ را اختراع نکنید! فریمورک‌های بسیار زیادی برای CSS توسعه داده شده‌اند، اغلب آن‌ها نیز به همدیگر شباهت دارند، از این رو با یادگیری یکی از آن‌ها می‌توان به سادگی موارد دیگر را یاد گرفت.
بوت‌استرپ
انتخاب شخصی بنده یادگیری بوت‌استرپ خواهد بود. بوت‌استرپ بسیار محبوب است و از آنجایی که المان‌های کاملی را به شما می‌دهد توسط شرکت‌های بسیار زیادی استفاده می‌شود.
حال شاید بپرسید که چرا من مستقیما بدون یادگیری CSS/HTML وارد فرایند یادگیری یک فریمورک نشوم؟ خب سوال خوبی است. دلیل این موضوع آن است که شما ابتدا باید موارد پایه‌ای را به خوبی یاد گرفته و با آن‌ها آشنا شوید. یادگیری یک فریمورک بدون دانستن المان‌های پایه مانند رانندگی یک ماشین بدون داشتن درکی از ساختار کلی آن است.
طراحی واکنشگرا
زمانی که مشغول طراحی وبسایت هستید، بسیار مهم است که کاربران موبایلی را در نظر داشته باشید. حدود ۶۰ درصد ترافیک کلی اینترنت در جهان توسط موبایل‌ها صورت می‌گیرد و نادیده گرفتن این حجم بزرگ می‌تواند به کارتان آسیب وارد کند. بوت‌استرپ، CSS Grid و Flexbox جزو ابزارهایی هستند که به شما در پیاده‌سازی طراحی واکنشگرا کمک می‌کنند. یکی دیگر از راه‌های پیاده‌سازی طراحی واکنشگرا در وبسایت استفاده از مدیا کوئری است. با استفاده از مدیا کوئری می‌توانید شیوه نمایش المان‌ها در اندازه‌های مختلف صفحه نمایش را تعیین کنید.
جاوااسکریپت
جاوااسکریپت زبان برنامه‌نویسی دنیای وب است. اگر به دنبال آن هستید که به یک توسعه‌دهنده موفق فرانت-اند تبدیل شوید نیاز است که به خوبی جاوااسکریپت را بدانید. البته جاوااسکریپت نیز فریمورک‌های بسیاری دارد اما درست مانند حالتی که CSS را بررسی کردیم، ابتدا نیاز است که به خوبی جاوااسکریپت را بدانید، بعد از آن می‌توانید سراغ فریمورک‌ها بروید. یادگیری عمیق جاوااسکریپت به شما این کمک را می‌کند تا بتوانید در درازمدت توسعه‌دهنده بهتری باشید چرا که فریمورک‌ها تغییرات بسیار زیادی خواهند کرد اما اصل زبان همواره یکسان است. از این رو شما پایه‌ای محکم برای یادگیری فریمورک‌های دیگر خواهید داشت.
به صورت مینیمال، یک توسعه‌دهنده تازه‌کار نیاز دارد تا موارد زیر را از جاوااسکریپت به خوبی یاد بگیرد:
- اشیا‌ء، توابع،شروط، حلقه‌ها، عملگرها و دیگر المان‌های پایه‌ای که در هر زبان برنامه‌نویسی پیدا می‌شوند.
- ماژول‌ها
- کار با DOM و رویدادها
- کار با API
- Async/Await
- JSON
- اکمااسکریپت ۶، ۷ و ۸
- تستینگ
ممکن است از یک تازه‌کار تمام این موارد انتظار نرود اما هر چه قدر بیشتر بدانید می‌توانید بهتر عمل کنید. اگر قصد دارید که به یک متخصص جاوااسکریپت تبدیل شوید بنابراین بهتر است که ریشه‌ای با این زبان آشنا شده و آن را یاد بگیرید. برای یادگیری موضوعات گفته شده می‌توانید دوره آموزشی «آموزش برنامه‌نویسی جاوااسکریپت» را مشاهده کنید.
فریمورک‌ها
فریمورک‌های بسیار زیادی برای جاوااسکریپت توسعه داده شده‌اند. یک مورد را انتخاب کرده و آن را یاد بگیرید. محبوب‌ترین فریمورک‌های جاوااسکریپت عبارت هستند از AngularJS، ReactJS و VueJS. نیازی به دانستن تمام این موارد نیست. فاکتور شما برای انتخاب یک فریمورک می‌تواند میزان راحتی‌تان با سینتکس و دستورات آن باشد. از طرفی دیگر می‌توانید براساس بازار کار آن را انتخاب کنید. در حال حاضر React بازار کار بسیار خوبی داشته و می‌تواند انتخابی مناسب باشد.
React
ری‌اکت فریمورکی است که توسط فیسبوک پشتیبانی می‌شود و دارای جامعه کاربری بسیار بزرگی است. اگر به صورت عمیق جاوااسکریپت را درک کرده باشید یادگیری ری‌اکت برای‌تان بسیار سخت نخواهد بود. ری‌اکت مبتنی بر کامپوننت‌های مختلف است و برای ساختن المان‌های یک صفحه وب از JSX استفاده می‌کند. موضوعات پیشرفته بسیار زیادی وجود دارد که با وارد شدن به دنیای React می‌توانید با آن‌ها آشنا شوید. برای یادگیری کامل ری‌اکت می‌توانید به دوره آموزشی «آموزش React» مراجعه کنید.
State Management
بعد از یادگیری ری‌اکت نیاز است که وارد مرحله بعدی یعنی یادگیری یک فریمورک برای مدیریت وضعیت یا State Management شوید. برای ری‌اکت ما از Redux استفاده می‌کنیم. به صورت ساده فرایند مدیریت وضعیت را مانند یک بانک اطلاعاتی تصور کنید که در آن وضعیت وب اپلیکیشن شما در آن قرار گرفته و شما در یک مکان می‌توانید آن را به خوبی مدیریت کنید.
برای فراگیری این مقوله می‌توانید به «آموزش Redux» مراجعه کنید.
ابزارهای توسعه
برای دیباگ کردن کدهای ری‌اکت/ری‌داکس ابزارهای توسعه‌ای وجود دارند که برخی از آن‌ها روی مرورگر به صورت افزونه موجود هستند.
البته این ابزارها را می‌توانید برای دیگر فریمورک‌ها نیز پیدا کنید.
مرورگر وب
به عنوان یک توسعه‌دهنده وب بسیار مهم است که با مرورگر به خوبی آشنایی داشته باشید. کروم، فایرفاکس، سافاری و اج از مهمترین موارد هستند. برای درک کارایی یک مرورگر نیاز است که موارد زیر را یاد بگیرید:
- کار با ابزارهای دیباگینگ «برای مثال Chrome dev tools»
- کار با متدهای ذخیرهسازی «برای مثال ذخیرهسازی محلی، ذخیرهسازی Session و کوکی‌ها)
- از میزان پشتیبانی مرورگرها مطمئن شوید. ببینید که آیا ویژگی‌های داخل اپلیکیشن شما می‌تواند توسط مرورگرها اجرا شود یا خیر. برای اینکار می‌توانید از وبسایت whatwebcando.today استفاده کنید.
دیپلوی و میزبانی
یک توسعه‌دهنده فرانت-اند باید شیوه دیپلوی و میزبانی وب اپلیکیشن خود را بداند. دانستن این موضوع می‌تواند برگه برنده شما در روال استخدامی باشد، چرا که موضوعی مهم برای بسیاری از شرکت‌هاست. برای انجام این کار پیشنهاد می‌کنم که از گزینه‌های زیر استفاده کنید:
- GitHub Pages
- Heruko
- Netlify
- Digital Ocean
- AWS
- Firebase
البته فارغ از این موارد شما می‌توانید روی فضای میزبانی خودتان نیز کار بکنید، اما از آنجایی که شرکت‌ها در حال مهاجرت به سمت فضاهای ابری می‌روند یادگیری شیوه کار با موارد بالا مهم است.
توسعه‌دهنده Back-End
به صورت مختصر این دقیقا قسمتی است که داده‌های اصلی وبسایت را در خود ذخیره می‌کند و کارهای پردازشی وبسایت را انجام می‌دهد. برای مثال تصور کنید در شبکه اجتماعی توییتر یک توییت را ارسال می‌کنید، این توییت از قسمت فرانت-اند یا لایه مشتری دریافت شده و بعد از طریق سرور یا قسمت بک-اند در یک دیتابیس ذخیره می‌شود.
یک توسعه‌دهنده بک-اند به صورت کلی کارهای زیر را انجام می‌دهد:
- ساخت API
- طراحی قسمت منطقی یک وب اپلیکیشن
- ذخیره و بازیابی اطلاعات از دیتابیس
- امن‌سازی ارتباطات میان فرم‌ها و بخش‌های مختلف وبسایت
زبان‌های برنامه‌نویسی
برای توسعه‌دهندگان بک-اند زبان‌های برنامه‌نویسی بسیار زیادی وجود دارد که ۵ مورد از محبوب‌ترین آن‌ها را در زیر می‌توانید مشاهده کنید:
- پایتون
- نودجی‌اس (اساسا یک زبان برنامه‌نویسی نیست بلکه یک محیط اجرایی برای اجرای جاوااسکریپت در سمت سرور است)
- پی‌اچ‌پی
- سی‌شارپ
- جاوا
- گو
هر کدام از این موارد را که انتخاب می‌کنید مطمئن باشید که آن را به صورت کامل یاد می‌گیرید. من از نودجی‌اس استفاده می‌کنم چرا که برای تبدیل شدن به یک توسعه‌دهنده وب Full-Stack برای من بسیار ساده‌تر است. نودجی‌اس از جاوااسکریپت استفاده می‌کند، فریمورک‌های فرانت-اند نیز به همین صورت، پس دیگر نیازی به یادگیری زبانی غیر از جاوااسکریپت ندارم. از طرفی دیگر نودجی‌اس کارایی‌های لازم را برای یک اپلیکیشن به من می‌دهد پس نیازی به نگرانی نیست.
هر گاه که یک زبان را انتخاب کردید مطمئن شوید که می‌توانید کارهای زیر را با آن انجام دهید:
- ایجاد API جدید
- کار با موارد پایه‌ای در زبان
- ارتباط با بانک اطلاعاتی
- کوئری گرفتن از بانک اطلاعاتی
- مدیریت پکیج‌ها
- نوشتن تست
REST API و JSON
ایجاد REST API یکی از کارهای مهم و اصلی است که توسط توسعه‌دهنده بک-اند باید انجام شود. در این زمینه نیاز است که با موارد زیر آشنایی داشته باشید:
- آشنایی با اصطلاحات مختلفی که در REST API استفاده می‌شود
- ایجاد پاسخ‌های مناسب
- مدیریت درست درخواست‌ها
- درخواست‌های احرازهویت
- مستندسازی برای APIها
REST API را به مانند یک پل بین بک-اند و فرانت-اند در نظر بگیرید. یاد گرفتن شیوه کاری آن‌ها بسیار تاثیرگذار خواهد بود.
JSON زبان اصلی برای انتقال داده از طریق REST API است. داده‌ها در جی‌سان به صورت یکسری شئ ذخیره می‌شوند. سینتکس آن نیز کاملا شبیه به جاوااسکریپت است. بنابراین در مدت زمان بسیار کوتاهی می‌توان با آن آشنایی پیدا کرد.
بانک‌های اطلاعاتی و DevOps
این قسمت بیشتر با زیرساخت‌های دنیای توسعه وب ارتباط دارد. البته انتظاری از یک توسعه‌دهنده مبتدی نمی‌رود که این موارد را بداند اما بهتر است برای یادگیری آن در آينده برنامه‌ریزی بکنید. شما نیاز دارید که در زمینه DevOps با موارد زیر کار بکنید:
- شیوه مدیریت یک دیتابیس
- کار با پلتفرم‌های مختلف میزبانی مانند AWS، Google Cloud و Azure
- شیوه کار CICD
- توانایی در استفاده از ابزارهایی مانند Jenkins و GitLab
- مانیتورینگ و لاگینگ
براساس تیمی که در آن حضور دارید ممکن است این موارد را افراد دیگری انجام دهند. با این حال دانستن این موارد می‌تواند به استخدام شدن شما کمک بیشتری کرده و دانش شخصی خودتان را نیز بالاتر ببرد.
موضوعات پیشرفته
پس از دانستن موضوعات گفته شده انتظار می‌رود که فرایند یادگیری را متوقف نکرده و به یادگیری ادامه دهید. در این قسمت از مطلب قصد داریم که چند موضوع پیشرفته را مورد بحث قرار بدهیم که بهتر است آن‌ها را یاد بگیرید.
احراز هویت با استفاده از JWT/OAuth
احرازهویت و اعتبارسنجی با استفاده از JWT/OAuth یکی از رویکردهای معمول در اپلیکیشن‌هاست. برای یادگیری موضوعات بیشتر در این رابطه به این لینک مراجعه نمایید.
الگوهای طراحی یا Design Patterns
الگوهای طراحی راه‌حل‌های مرسوم برای مشکلات مرسوم هستند. با فراگیری الگوهای طراحی می‌توانید بهتر در حل مشکلات مشارکت داشته باشید و تبدیل به توسعه‌دهنده بهتری شوید.
برای یادگیری این موضوع می‌توانید به دوره آموزشی «آموزش دیزاین پترن‌ها» مراجعه نمایید.
توسعه اپلیکیشن‌های موبایل و اپلیکیشن‌های پیش‌رونده وب
شما می‌توانید با استفاده از تکنولوژی‌هایی مانند React Native و Flutter شروع به توسعه اپلیکیشن‌های موبایل کنید. از طرفی دیگر نیز می‌توانید با اپلیکیشن‌های پیش‌رونده کار کنید. این اپلیکیشن‌ها در حقیقت وب اپلیکیشن‌هایی هستند که المان‌های یک اپلیکیشن محلی موبایل را دارند.
برای فراگیری هر کدام از این موارد می‌توانید به آموزش‌های زیر مراجعه کنید:
رندرینگ سمت سرور
رندرینگ سمت سرور موضوعی نسبتا جدید است که توسعه‌دهندگان فرانت-اند می‌توانند برای بالا بردن کارایی اپلیکیشن‌شان آن را یاد بگیرند.
در پایان
در این مطلب نسبتا طولانی از وبسایت راکت ما نقشه و مسیر راه بسیار شفافی را به شما برای تبدیل شدن به توسعه‌دهنده وب نشان دادیم. بخش‌های مختلفی از جمله فرانت-اند، بک-اند و DevOps را بررسی نمودیم و موضوعات پایه‌ای/پیشرفته‌ای که هر توسعه‌دهنده باید بداند را نیز مطرح کردیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید