معرفی flow برای جاواسکرپیت

در این مقاله قصد دارم در مورد کتابخونه قدرتمند فیسبوک یعنی flow برای جاواسکرپیت صحبت کنم. همونطور که میدونید کتابخونه های قدرتمندی مثل typeScript برای کنترل تایپ جاواسکریپت وجود داره. flow هم یکی از همین کتابخونه هاست.

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

طرح مسأله

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

زبان برنامه نویسی جاواسکریپت بدون نوع هست یعنی شما میتونید یه متغیر تعریف کنید و مثلا مقدارش رو ۲ قرار بدید. در ادامه کدهاتون اون رو به ۱۰ تغییر بدید (درصورتی که const تعریف کنید این اتفاق نمی افته) و یا حتی نوعش رو هم عوض کنید و یک رشته مثل Hello قرار بدید. جاواسکریپت به شما این اجازه رو میده و مشکلی با این روند نداره.

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

این موضوع باعث شده که مایکروسافت کتابخونه قدرتمند TypeScript رو ارائه کنه. این کتابخونه برای زبان جاواسکریپت نوشته شده و به شما کمک میکنه تا برای متغیرها، کلاس‌ها و ... تایپ ( نوع) تعریف کنید.
این همه ماجرا نیست. این کتابخونه ابزارهای قدرتمند دیگه ای هم داره که تو این مقاله نمیخوام درمودش صحبت کنم.

از خیلی از جهات مقایسه این دو کتابخونه اشتباه است. تایپ اسکریپت علاوه بر اینکه اجازه تعریف تایپ رو میده تمام ساختار نوشتاری کد شمارو تغییر میده.فایلی که شما توش کد میزنید با پسوند ts ذخیره میکنید و در نهایت در زمان اجرا فایل ها به js ترجمه و میشن (کامپایل میشن). ولی flow با این شکل عمل نمیکنه!

در هر صورت چه درست و چه غلط این دو ابزار رو باهم مقایسه میکنند. من تو این مقاله کاری به برتری‌ها و نقطه ضعف های هر کدم ندارم و قصدم آشنایی شما با flow است.

معرفی

فیسبوک در یک جمله کتابخونه flow رو معرفی میکنه:

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT

فلو چه جوری به برنامه نویس ها کمک میکنه ؟‌

۱- افزایش سرعت کد زدن
فلو به شما کمک میکنه قبل اینکه کدهاتون رو اجرا کنید به مشکلش پی ببرید. با یک مثال این مورد رو توضیح میدم:
مثلا شما یک پراپس دارید که اسم هست و مقدارش هم یک رشته (string) پس اگه تو کد هاتون این متغیر رو صدا بزنید و روش تغییراتی بدید و بخواهید نوعش رو به number تغییر بدید، flow مانع انجام این کار میشه! پس میتونید با اعتماد به فلو جلو برید و کمتر به خطا بخورید.

۲- باهوش تر کد بزنید
ساختن ابزارها برای زبان های برنامه نوسی داینامیک کمی سخت تر از زبان های استاتیک است ولی فلو کد شما رو میفهمه و به نوعی میتونه فهم خودش از کد شما رو به ابزارهای دیگه که توی پروژه استفاده میشه برسونه

۳- با اعتماد کد بزنید
تغییرات بزرگ روی پروژه های بزرگ کار بسیار سخت و ترسناکی محسوب میشه. در صورتی که فلو به شما کمک میکنه راحت تر کدتون رو ری فاکتور کنید و به قسمت هایی که میخواهید تغییر بدید تمرکز کنید و نگران از کار افتادن و خطای قسمت های دیگه نباشید.

۴- پروژه های بزرگ بزنید
توی پروژه های بزرگ که چندین برنامه نویس وجود داره مشکلاتی هم به وجود میاد و در نتیجه نگهداری برنچ master سخت میشه. فلو به این موضوع کمک میکنه و این امکان رو میده که کدهایی که ۶ ماه قبل نوشتیم هم به راحتی درک بشه.

جاواسکریپت و داینامیک تایپ بودنش

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

خوب تا اینجا که همه چی خوبه پس چرا دیگه به تایپ چکر نیاز داریم ؟

دلیلش اینه که من گفتم تو قسمت توسعه سرعت بیشتری رو داریم! اما در مورد دیباگ (که اون هم معمولا در قسمت توسعه در نظر گرفته میشه) چی ؟‌
به نظر شما کدی که هیچ تایپی نداره و از هر طرف قابل تغییر و انعطافه رو میشه راحت تر دیباگ کرد و یا کدی به زبان جاوا و C شارپ ؟‌

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

تایپ چکرها مثل فلو و تایپ اسکرپیت به داکیومنت کردن هم کمک میکنن ؟‌

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

استفاده از تایپ چکری مثل فلو باعث کاهش سرعت کد زدن میشه ؟‌

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

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

چه تایپ هایی توی فلو داریم؟‌

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

جمع بندی

فلو با افزایش کارایی کدهاتون باعث کاهش خطاهای احتمالی در حین توسعه پروژه میشه و به برنامه نویس ها کمک میکنه که کدهای با کیفیت تری بنویسن.

تجربه خودم

اولین باری که با فلو روبرو میشید ممکنه کمی عجیب به نظر برسه و یا اینکه هنوز فواید استفاده اش رو ندونید اما کافیه که روی یک پروژه خیلی ساده پیاده سازی کنید و ببینید که چه مزایای خوبی بهتون میده. اولش پیاده سازی فلو ممکنه براتون کمی گیچ کننده باشه ولی اگه قبلا با schema کار کرده باشید و مفهوم interface رو بدونید خیلی راحت میتونید با دیدن چند تا مثال از پیاده سازی فلو در قسمت های مختلف پروژه ، به پیاده سازی و سینتکسش مسلط شید. برای کسی که جاواسکریپت کار میکنه این پروسه بیشتر از ۱ روز طول نمیکشه!

قسمت بعدی ، نصب و اجرای فلو:

سایر مقاله های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123