محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020

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

برای شما

مطلب رو به چند بخش تقسیم کردم و تک تک توضیحشون رو دادم.

فهرست

سیستم عامل

من از ابتدا کاربر Windows بودم و الانم با نسخه 10 ویندوز کد نویسی میکنم. یک زمانی برای اینکه از دنیای لینوکس عقب نمونم، لینوکس و ویندوز رو باهم داشتم ولی محیط توسعه فعلی که استفاده میکنم، ویندوز هست. البته WSL رو هم کنارش استفاده میکنم که در ادامه توضیح دادم.

نرم افزارهای کاربردی من

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

برنامه Comfort Clipboard Manager: بدون شک بهترین و کاربردی ترین برنامه ای هست که میتونم برای دوستان برنامه نویس معرفی کنیم، برنامه مدیریت ClipBoard که به کمکش میتونید تاریخچه ای از حافظه کلیپ بوردتون رو ببینید و هر موقع که نیاز داشتید دوباره از مواردی که قبلا کپی کردید استفاده کنید (paste کنید). البته برنامه های مشابه زیادی هست که میشه به جای این برنامه استفاده کرد و بستگی به سلیقه کاری شما داره. و به نظر من مهم اینه که حتما یک برنامه مدیریت clipboard بر روی سیستمون وجود داشته باشه.
برنامه f.lux: برنامه تنظیم روشنایی صفحه. این برنامه تنظیماتی داره که میتونه شفافیت صفحه رو با توجه به ساعت شبانه روز و موقعیت شهری که انتخاب میکنید به صورت خودکار تنظیم کنه.
برنامه Everything: این برنامه جایگزین بسیار خوبی برای سرچ خود ویندوز هست، با این برنامه میتونید با سرعت خیلی بالایی در فایل هایتون جستجو کنید. امکان جستجو در مسیر سفارشی و نوع فایل های مختلف هم بهتون میده.

ویرایشگر کد (IDE)

من به عنوان IDE محیط های Intellij رو دوست دارم و از Intellij WebStorm و Intellij PhpStorm استفاده میکنم ولی همیشه Visual Studio Code رو هم کنارش دارم و از اولین نسخه اش آپدیت هاش رو دنبال کردم و کلی کیف کردم. 🙂

قطعا VSC خیلی سبک تر هست و بسته به نیاز پروژه است که من تصمیم میگیرم کدام پروژه رو در کدام IDE باز کنم. از طرفی Intellij همه چیز رو توی خودش داره و نیازی نیست با پلاگین ها و افزونه های زیادی سروکله بزنیم.

افزونه هایی من در VSC:

افزونه های Intellij من:

مرورگر

من از Google Chrome استفاده میکنم. 🙂

البته کنارش مرورگرهای FireFox، Opera، Edge و Tor (?) رو هم دارم، چون فرانت اند کار میکنم و باید تست کنم. و البته به Internet Explorer هم مجبورم 🙁

افزونه های Chrome من:

JSON Formatter: فرمت کردن فایل ها و نتایج JSON در مرورگر
30 Seconds of Knowledge: نیاز به توضیح نداره و استفاده ازش به شدت توصیه میشه.
Awesome Screenshot: Screen Video Recorder : ضبط ویدئو و گرفتن اسکرین شات از صفحه مرورگر
Emmet Re:view: کمک به طراحی ریسپانسیو
Redux DevTools
React Developer Tools
Custom JavaScript for websites 2: امکان اضافه کردن کد جاوا اسکریپت به سایت ها رو میده
CSSViewer: با این افزونه میتونید استایل های المنت ها رو به جزئیات ببینید
Dark Reader
Wappalyzer: ابزارها و تکنولوژیهایی که در توسعه یک سایت استفاده شده رو بهتون نشون میده
BuiltWith Technology Profiler: ابزارها و تکنولوژیهایی که در توسعه یک سایت استفاده شده رو بهتون نشون میده
Eye Dropper: انتخاب رنگ از صفحه وب
Alexa Traffic Rank
Picture-in-Picture Extension (by Google): اینم توضیحش زیاد میشد، خودتون نصب کنید و لذت ببرید. توصیه میشه.
AdBlock — best ad blocker: برای بلاک کردن تبلیغات مزاحم، زشت و بد. به شدت توصیه میشه اگه ندارینش.

کنترل ورژن (VSC)

برای کنترل ورژن من از git استفاده میکنم. سرویس دهنده هم زیاد فرقی نمیکنه ولی ترجیح من gitlab.com هست. بیشتر به این ظاهر کاربریش. 🙂

شما میتونید به جای gitlab از github یا bitbucket هم استفاده کنید و البته به جای git هم میتونید از Mercurial و یا Apache Subversion (SVN) استفاده کنید و انتخاب هر کودوم بستگی به سلیقه شخصی و نیازهای شما داره.

توسعه بک اند (Back-End Development)

برای توسعه بک اند من از زبان PHP استفاده میکنم، اوایل Native مینوشتم ولی بعد از مدت کوتاهی به استفاده از فریمورک ها رو آوردم. تمرکزم بر روی Laravel بوده و با نسخه 5 به بعدش کار کردم.

از طرفی در بعضی پروژه هام با سیستم مدیریت محتوای wordpress و هم کار میکنم.

از طرف دیگه در Node.js با فریم ورک های Adonis و کمی هم Express کار میکنم. علت اینکه Adonis رو انتخاب کردم، شباهت ساختارش با Laravel بود و اینطوری تونستم بدون گذاشتن وقت زیاد برای یادگیریش باهاش کار کنم.

البته در توسعه بک اند نیازهای پروژه خیلی تاثیر گذارند و تصمیم در مورد تکنولوژی ها بعد از نیازسنجی انجام میشه و انتخاب پایگاه داده هم به این موضوع بستگی داره ولی من به شخصه با MySQL راحتم ولی MongoDB رو هم دوست دارم. 🙂

برای ارتباط ثالث از پروتوکل Rest (Restful API) استفاده میکنم و البته بسته به نیازم به طرف WebSocket هم رفتم.

خیلی وقتا زور زدم که از Docker استفاده کنم ولی تا الانش هم نتونستم در یک پروژه واقعی ازش استفاده کنم.

توسعه فرانت اند (Front-End Development)

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

‌‌VanillaJS: جاوا اسکریپت خالی! برای توسعه front-end نیازی ندارید حتما از یک فریم ورک استفاده کنید. با یادپیری دقیق خود JS قادر به پیاده سازی هر چیزی خواهید بود.
HTML/CSS: نیاز به توضیح نیست.
SASS: یک پیش پردازنده CSS که ویژگی هایی اضافه تر از CSS خالی داره و در نهایت به CSS کامپایل میشه.
Babel js: یک کامپایلر برای جاوا اسکریپت
UI Framework:
ReactJs
SvelteJS
Material UI
Semantic UI و Semantic UI React
PolymerJS
NextJS: برای رندر سمت سرور SSR
ابزارهای باندلینگ:

Create React App: کمک میکنه که یک پروژه react رو بدون تنظیمات ایجاد کنید.
Webpack: مشهورترین اباز باندلینگ که هر فرانت اند کاری روزی به گیرش میفته!
Gulp: به نظر من ساده و قدرتمند. یک سال بعد از Webpack (2013) معرفی شد و طرفدارای زیادی هم پیدا کرد.
Parcel-bundler: تازه چند هفته است با این معجزه آشنا شدم و کارم خیلی راحت شده. فعلا که عزیزترینه پیش من.
Rollup: رول آپ هم راحته و نیاز نیست زیاد باهاش درگیر بشید و من توی باندلینگ پک های react ازش استفاده میکنم.

ابزارهای ارتباطی و مدیریت پروژه

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

راه های ارتباطی من:

ایمیل: ایمیل رو برای ارتباط های رسمی تر و مهم استفاده میکنم.
تلگرام: معمولا همیشه آنلایه روی سیستم و به عنوان Cloud Storage و راه ارتباطی ارش استفاده میکنمم
واتس اپ: عین Internet Explorer میمونه برام، بهش مجبورم! 🙁
اسلک (Slack): برای ارتباط های تیمی بد نیست ولی پولی بودنش یکم روی اعصابه. مخصوصا این که تاریخچه پیام هاش برای اکانت ویژه فعال هست و کاربر معمولی تاریخچه اش محدود به چند روز و یا چند پیام هست.

ابزارهای مدیریت پروژه:

تریلو (Trello): دوست داشتنی کلاسیک. تعداد تسک هایی که توی trello اضافه کردم و بعد از مدتی حذف کردم نزدیک به بی نهایت هست 😀
جیزا (Jira): پیچیدگی های خودش رو داره و در نهایت بهش عادت میکنید.

وب سرور مجازی

برای این مورد از XAMPP استفاده می کنم. باهاش سرور مجازی Apache روی سیستم راه اندازی میکنم. برای تمام نسخه های PHP هم فایل نصبی داره و یا میتونید خودتون ورژن PHPاش رو تعییر بدید. از طرفی MySQL و phpmyadmin رو هم همراه خودش داره.

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

ماشین مجازی (Virtual Machine)

ویندوز حدود سه سال پیش یک ویژگی به اضافه کرد با عنوان Windows Subsystem for Linux که بدون نیاز به درگیری های زیاد میتونی یکی از توزیع های لینوکس رو داخل ویندوز داشته باشی. حدود یک سالی هم هست که دارم از این ویژگی استفاده میکنم و بسیار هم کاربردی هست. مخصوصا اینکه با افزونه Remote – WSL که بالاتر برای Visual Studio Code لیست کرده بودم، میتونید به این توزیع وصل بشید و ازش به عنوان محیط توسعتون هم استفاده کنید. خیلی مجلسی و شیک 🙂

از طرف دیگه برنامه ای که در صورت نیاز ازش استفاده میکنم VirtualBox هست.

هاستینگ و سرور

حدود 4 سال مشتری میهن وب هاست بودم و ازشون راضی بودم. ولی VPS هاشون زیاد قابل تعریف نیست. ولی از لحاظ قیمت و پشتیبانی خوب هستن.

حدود 2 سالی هم هست که دارم با سینداد همکاری میکنم، از سرویسی که ازشون میگیرم کاملا راضی ام. تا الان 6 تا VPS ازشون تهیه کردم و به هیچ مشکلی برنخوردم. به جز موارد کوچیک که پشتیبانیشون خیلی خوب عمل کردم در اون موارد هم.

آنالیز و سئو (SEO & Analytics)

من هم مثل همه توسعه دهنده های وب، دوست دارم نتیجه کارم رو تست کنم و برای اون از ابزارهای زیر استفاده میکنم.

پک های npm که خیلی به کارم میان:

yarn: به جای دستور npm ازش استفاده میکنم
cloc: برای شمارش تعداد خط کدی که توی پروژه نوشتم به کارم میاد.
npm-check-updates: برای بروزرسانی dependency های پروژه که توی package.js هست به کار میبرم این پک رو. در واقع بهم نشون میده که کودوم پک آپدیت شده و اگر بخوام میتونم dependency های پروژه رو به صورت اتوماتیک بروزرسانی کنم.

بعضی از لینک ها و ابزارهای به درد بخور:

CodeSandbox: ویرایشگر کد آنلاین برای فرانت اند.
Play.io: ویرایشگر کد آنلاین برای فرانت اند
Leaf DNS: بررسی DNS
Bit.dev: مرجع کامپوننت های آماده
IcoMoon: وب اپ ساخت فونت آیکن با SVG
فرازین: ترجمه متون فارسی به انگلیسی و انگلیسی به فارسی که دقیق تر از گوگل و یا بینگ و هر مورد مشابه دیگه ای کار میکنه
Tinypng.com: فشرده سازی آنلاین تصاویر. که متاسفانه کاربرای ایرانی رو تحریم کرده.

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

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

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

همیشه شاد باشید.

نویسنده مطلب: بهنام عظیمی

منبع مطلب