کلیدی برای ساختن اپلیکیشن‌های بزرگ جاوااسکریپتی: جریان کاری Modlet

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 12 اسفند 1396
دسته بندی ها : جاوا اسکریپت

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

یکی از کلیدهایی که ما در Bitovi به آن در رابطه با ساختن اپلیکیشن های بزرگ رسیده ایم این است که هیچوقت اپلیکیشن های بزرگ را درست نکنید. وقتی که شما بتوانید اپلیکیشن تان را به قسمت های کوچکتری تقسیم کنید پس در نهایت خواهید توانست که آن ها را بهتر آزمایش نمایید و در نهایت بهتر همه را با هم دیگر در یک اپلیکیشن جمع کنید. ما برای این کار از قاعده ای به نام جریان کاری «modlet» پیروی می کنیم. این روش به ما می گوید که هر قسمت از پروژه بزرگ تان را به عنوان اپلیکیشن کوچکی از آن بسازید، این اپلیکیشن کوچک همراه با پیش نمایش مربوط به خودشان، مستندسازی و تست های خودشان توسعه داده می شوند.

پیروی کردن از این الگوی توسعه باعث می شود که:

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

بیاید در رابطه با هرکدام از این فواید بیشتر صحبت کنیم تا متوجه شویم که جریان کاری modlet چگونه می تواند روی روند کاری تیم تان اثر مثبت بگذارد.

اعضای جدید می توانند بهتر با پروسه های در حال اجرا تعامل برقرار کنند

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

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

اضافه بر این، ما modletها را به عنوان اپلیکیشن های کوچکی از اپلیکیشن بزرگ ایجاد کردیم، در این پوشه ها حداقل باید فایل های زیر موجود باشد:

  • فایل های مربوط به سورس اصلی (جاوااسکریپت، استایل شیت، قالب ها و…)
  • یک فایل تست جاوااسکریپت
  • یک فایل نشانه گذاری یا متن ساده برای مستندات (البته در صورتی که آن ها داخل کدهای تان نیستند)
  • یک برگه تست اچ تی ام ال
  • یک برگه پیش نمایش اچ تی ام ال

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

مستندات و تست های قسمت های مختلف اپلیکیشن تان را بروز نگه دارید

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

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

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

جریان کاری تست گرفتن و رفع عیب کردن برای تان ساده تر می شود و بهبود می یابد

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

برگه پیش نمایش اچ تی ام ال :

  • به شما اجازه می دهد تا بدون نیاز به بارگذاری کل اپلیکیشن قسمت مورد نظر را مشاهده کنید.
  • به شما امکانی را می دهد که بتوانید باگ های تان را درست کنید.
  • به شما اجازه می دهد تا در حالت های متفاوت بخش های اپلیکیشن تان را ببینید.

موضوع آخر این لیست می تواند در مسیر های متفاوتی کاربرد داشته باشد. من روی پروژه هایی کار کرده ام که در آن ما:

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

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

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

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

طراحی خوبی از API هایی داشته باشید و از نگرانی ها دور بمانید

پیروی از جریان کاری modlet همچنین باعث می شود که APIها به خوبی طراحی شوند. با استفاده از هر قسمت حداقل در دو مکان (اپلیکیشن اصلی و قسمت پیش نمایش) شما قادر خواهید بود:

  • بدانید که چه چیزی همراه با API قسمت های مختلف شما الزامی است.
  • مرزهای مشخصی را بین قسمت های مختلف اپلیکیشن تعیین نمایید.

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

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

ارتقا و انتقال ساده تر شود

پیروی کردن از جریان کاری modlet به شما کمک می کند تا بتوانید نسخه جدید اپلیکیشن های تان را براساس ویژگی های جدید ارائه کنید. بیاید به یک مثال نگاه کنیم:

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

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

بعد از اینکه قسمت های مختلف کار کرد، بعد از آن ها می توانید قسمت های دیگر را که مبتنی بر قسمت های قبلی بوده اند را بروزرسانی کنید:

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

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

استفاده از جریان کاری modlet در اپلیکیشن های تان را از همین امروز شروع کنید

شما می توانید همین الان از جریان کاری modlet استفاده کنید – اول از همه اگر گروه تان هنوز فایل ها را براساس نوع آن ها دسته بندی می کند دست نگه دارید و آن ها را با استفاده از قسمت های مختلف اپلیکیشن تان دسته بندی نمایید. فایل های تست تان را به پوشه مربوط به کامپوننت ها بیاورید و برای هرکدام برگه های اچ تی ام ال پیش نمایش را ایجاد کنید. این موضوع ممکن است کمی روی تیم تاثیر منفی بگذارد اما در ادامه همه چیز خوب پیش خواهد رفت.

منبع

مقالات پیشنهادی

۱۰ ابزار برای بهبود جریان کاری توسعه وب

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

۴ اقدام عملی برای اینکه کاریزما خود را بالا ببرید

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

5 راه برای ساختن گروه IT متعادل

در این مقاله قصد داریم تا شما را با تاکنیک های ساختن یک تیم IT خوب و متعادل آشنا کنیم. تیم it خود کلید موفقیت و کسب کار شماست و این به عهده شماست تا ب...

کتابخانه جاوا اسکریپت برای ساختن ویرایشگر WYSIWYG

امروز میخوام یک ابزار مفید رو بهتون معرفی کنم Content Tools ، این ابزار یک کتابخانه جاوااسکریپت مفیده برای ساختن ویرایشگر WYSIWYG برای محتوای HTML . ا...