الگوهایی درباره پروژه های جاوا اسکریپت

اگر با جاوا اسکریپت آشنایی داشته باشید، و در طراحی سایت های خود از آن استفاده کرده باشید، می دانید که یک ماجراجویی است. بعد از تقریبا  یک دهه از توسعه حرفه‌ای و آماتور در صنایع مختلف، من معتقدم که همه در مورد این نظریه موافق خواهند بود. پروژه های سمت کاربر، به برنامه نویسان آزادی انتخاب بیشتری می دهد، همچنین انعطاف‌پذیری و فضای زیادی برای خلاقیت می‌دهند ؛ اما در عوض آن‌ها نیاز به دانش، برنامه‌ریزی و مسئولیت به نوبه خود دارند.  بعد از اتمام پروژه‌های جاوا اسکریپ با jQuery ، require.js ، Angulars ، ReactJs ، ExtJs ، و شاید پروژه های فراوان دیگر، که به یاد نمی‌آورم،  من چیزهای غیرقابل‌تصوری را در پروژه های سمت کاربر(frontend) دیده ام، و همه ما احتمالا  آن ها را انجام داده ایم.

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

تقسیم و غلبه در پروژه های جاوا اسکریپت

تقسیم و غلبه به معنی جدا کردن فایل های جاوا اسکریپت از یکدیگر می باشد، بیشتر ما اصطلاح تقسیم و غلبه را در جایی شنیده‌ایم،  اما به نظر می‌رسد که بسیاری افراد این قانون را دست‌کم می‌گیرند. CommonJS ,Webpack ,NodeJS به ما توانایی این را می دهند، که بتوانیم فایل مربوط به کد ها را از یکدیگر جدا کنیم، پس چرا به آن ها اهمیت نمی دهیم؟ در مبحث تقسیم و غلبه ما ۲ موضوع زیر را مورد بررسی قرار می دهیم:

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

نامگذاری همه عناصر در پروژه های جاوا اسکریپت

هر متغیر، تابع، یا فایلی زمان شما را می‌گیرد؛ آن‌ها را طوری نامگذاری می‌کنید که انگار دارید نوزاد خود را نامگذاری می‌کنید. شما ممکن است با نامیدن متغیر”x”زمان ۰٫۳ ثانیه در روز صرف کنید، اما در یک ماه شما ۲ روز وقت صرف خواهید کرد تا بفهمید چه معنایی دارد، سپس ۴ نفر دیگر در اصلاح کردن آن وقت می گذارند. به جلو فکر کنید، و از اسم‌های طولانی نترسید.  از هک کردن و چیزهایی که باعث می‌شوند شما فکر کنید مستقیما به MIT(موسسه فناوری ماساچوست) متصل می شودی، خودداری کنید. راه‌حل شما ممکن است با درایت و پیچیده باشد، و گاهی مربوط به زمانی در آینده شما، یا یک نفر در تیم تان باشد، روی آن توافق کنید و سپس یک تکه بزرگ از زمان را صرف تلاش برای مشخص کردن آنچه در این کد اتفاق می‌افتد کنید. بر روی ایجاد چیزهای ساده، بدون نیاز به مستند سازی، تمرکز کنید.

اعداد و رشته های جادویی 

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

مبارزه داخلی در پروژه های جاوا اسکریپت 

اگر کد شما فراتر از ۱۲۰ کاراکتر به سمت راست برود، یا فراتر از ۵۰۰ خط به پایین حرکت کند، یا اگر توضیحات شما ۳ سطح عمیق دارد، نهایت تلاش خود را بکنید که آن را تقسیم کنید. شما می توانید این شرایط را حل کنید، پیچیدگی کد ها را با تقسیم آن ها در فایل های جداگانه، اگر توضیحات شما زیاد است، آن را در توابع مختلف، وعده ها، یا شواهد عینی تقسیم کنید. اگر از فراخوانی های ناهماهنگ زیادی استفاده می کنید، هماهنگ سازی می تواند کد های شما را آسان تر سازد. 

پیکر بندی جداگانه برای برخی فایل ها

اگر برنامه شما از ارزش‌های سراسری، نقاط انتهایی API(رابط کاربردی برنامه نویسی)، یا نمایش ویژگی ها استفاده می‌کند، آن‌ها را در یک فایل پیکربندی جداگانه قرار دهید. تعدادی از بسته‌ها وجود دارند، که به مدیریت پیکر بندی ها کمک می‌کنند. در برخی موارد برنامه شما هم روی سرور و هم روی لوکال هاست برای توسعه در دسترس خواهد بود . ایجاد فایل پیکربندی اولیه بسیار آسان‌تر از ساخت آن در مراحل بعدی است، و به شما اجازه می‌دهد تا موارد زیر را تنظیم کنید:

• نحوه رفتار محیط های پیکر بندی
• از چه اختیاراتی می توانند استفاده کنند؟
• چه ویژگی هایی دردسترس است؟ و سایر موارد…

استفاده ازچهارچوب ها در پروژه های جاوا اسکریپت

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

1. React: وقتی که شما به کنترل کامل بر روی معماری و ساخت نیاز دارید، React می تواند گزینه خوبی برای شما باشد، اما باید در نظر داشته باشید که، این فریم ورک فقط برای برنامه های وب ساخته شده است. توسعه محیط React زمان می برد، و نیازمند برنامه ریزی زیادی قبل از آن می باشد. React بازدهی خوبی برای شما دارد، تنها در صورتی که بدانید، چه کاری میخواهید انجام دهید.
2. Angular / VueJS / Ember : زمانی که شما به یک برنامه تحت وب سریع و قابل‌اعتماد نیاز دارید، در عوض یک جعبه سیاه بزرگ به جای معماری این فریم ورک خواهید یافت. این چارچوب‌ها کار های زیادی برای شما انجام می‌دهند، از بین بردن مزایا و معایب ساختار معماری نیز از ویژگی های این فریم ورک می باشد. ساختار سخت فریم ورک های Angular ،VueJS ، Ember نیز اشتباهات بیشتری نسبت چهارچوب React دارد.
3. jQuery / lodash / یا similar : زمانی که شما به یک صفحه وب با سرعت بالا نیاز دارید، این چهارچوب ها گزینه خوبی برای شما می باشند، شما همچنین  می‌توانید چند کیلوبایت به آن ها اضافه کنید. فریم ورک های نام برده، می‌توانند به طور قابل‌توجهی زمان توسعه را کاهش دهند، اما به مراقبت نیاز دارند، زیرا به شما این امکان را می‌دهند که کد های غیر قابل نگهداری را بنویسید، از این فریم ورک ها بهعنوان کمکی استفاده کنید، نه به عنوان پایه پروژه های جاوا اسکریپت!
4. Vanilla / فاقد چهارچوب: هم برای برنامه های وب، و هم برنامه های تلفن همراه، شما می‌توانید زمان زیادی را صرف توسعه و برنامه‌ریزی کنید. جاوا اسکریپت خام،  یک انتخاب خوب است هنگامی که، پروژه شما می خواهد چیز جدیدی را معرفی کند. انیمیشن های مرورگر یا بهینه سازی عمیق می تواند نمونه های آن باشد. شما به خلق کردن نوعی چارچوب خود پایان خواهید داد.

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

انجام دادن تست تا مرحله نهایی

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

کنترل نسخه در پروژه های جاوا اسکریپت

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

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

مدیریت موقعیت در پروژه های جاوا اسکریپت

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

• React: از آن جایی که یک محیط باز برای این چهار چوب وجود دارد، راه حل های زیادی برای آن وجود دارد. Redux و  Mobx دو کتابخانه ای هستند که می توانند با React مورد استفاده قرار بگیرند. redux این امکان را به شما می دهد، که برنامه هایی که می نویسید بر روی محیط های مختلف مثل سرور و کلاینت، قابل تست باشد، MobX یک کتابخانه مستقل است، اما بیشتر مردم آن را با React استفاده می کنند، هر کدام از این دو کتابخانه مزایا و معایب خود را دارند، قبل از استفاده از آن ها، اصول آن ها را درک کنید.
  
• Angular ,Ember ,and VueJS: با توجه به مدیریت موقعیت خود که در آن قرار دارید، از آن ها استفاده می‌شود. در حالی که نیازی به استفاده از کتابخانه های اضافی نیست، ngRx , Akita and Vuex می تواند همراه با آن ها استفاده شود.
• برای هر چارچوب دیگری در جاوا اسکریپت، شما می توانید از کتابخانه های Redux , Mobx  یا هر راه حل مدیریتی دیگری، بنا به موقعیت خود استفاده کنید. هدف اصلی این است که، اطمینان حاصل شود کل نرم افزار همان منبع حقیقت است، و ناهماهنگی در آن وجود نداشته باشد. این منبع می‌تواند یک سرویس، یک کتابخانه یا یک موقعیت ساده قابل‌ مشاهده باشد.

نکات پایانی

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

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