https://virgool.io/feed/@alieslamifard برنامه نویس فرانت اند کیان دیجیتال و عضو سابق تیم فرانت اند نت برگ، چیلیوری و تیکت. علاقمند به ری اکت، اکسپرس جی اس، نود، الکترون و ... fa 2026-06-07 09:47:46 https://files.virgool.io/upload/users/26499/avatar/xrbaia.png?height=120&width=120 https://virgool.io/@alieslamifard https://virgool.io/@alieslamifard/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%DB%8C%DA%A9-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D9%85%D9%81%DB%8C%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-pwa-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-w9fuxrbfsaa2 react-pwa-toolkitreact-pwa-toolkitبعد از همه گیر شدن تب استفاده از pwa ها مخصوصا در ایران، که اتفاقا خیلی هم عالیه ? به همه اون دلایلی که همگی میدونیم، تصمیم گرفتم یک پکیج ساده و کاربردی بر مبنای ساختار hooks ها ایجاد کنم که کار رو تا حدی برای ما فرانت-اند دولوپر ها راحت تر کنه. ?‍??قطعا پیشنهادات شما باعث بهبود سریع پروژه میشه، چه به صورت کامنت، چه issue و چه pull-request که قطعا باعث افتخار بنده خواهد بود. ?بریم سراغ فانکشن های پکیج:نصب و ایمپورت فانکشن های پکیج : https://gist.github.com/alieslamifard/a826c221b58438f31898916facdcd92d#file-gistfile1-txt تشخیص مرورگر و دیوایس کاربر : https://gist.github.com/alieslamifard/80668a1a4206f849c104354b014c55c0#file-gistfile1-txt تشخیص PWA: https://gist.github.com/alieslamifard/7e90ba9e85b8435a80485758716e605a#file-gistfile1-txt تشخیص وضعیت اتصال به اینترنت: https://gist.github.com/alieslamifard/deecf9724f8eb277d9517980eb5f8863#file-gistfile1-txt تشخیص قابل مشاهده بودن صفحه: https://gist.github.com/alieslamifard/63f1f49ef7d9dd6f77484c8b20e8e94e#file-gistfile1-txt تشخیص انتخاب کاربر بعد از نمایش پاپ-آپ Add-to-home-screen و امکان نمایش دستی پاپ-آپ https://gist.github.com/alieslamifard/559448f4448200f21acdf561c38f681e#file-gistfile1-txt توضیحات بیشتری رو طی روزهای آینده اضافه میکنم، واقعا دیگه خوابم میاد، ساعت سه شب شده ?? علی اسلامی فرد علی اسلامی فرد Sat, 07 Sep 2019 03:03:33 +0430 https://virgool.io/iran-react-community/%DB%8C%D9%88%D9%85%D9%8E%D9%86-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B7%D9%88%D8%B1-%D8%A8%D9%87-%DA%A9%D8%AF%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%AF%D8%B1-react-%DA%A9%D9%85%DA%A9-%D9%85%DB%8C%DA%A9%D9%86%D8%AF-a81ymtxbayek یومَن چیست؟جواب کوتاه: یومن ابزاریه که کمک میکنه خیلی سریع یک پروژه یا بخش هایی از اون رو ( که از قبل کدنویسی و ساختاربندی شده ) فقط با چند تا دستور ساده بسازید.جواب بلند: یومن یک ابزار (generator) در اختیار شما قرار میده که یک بار بشینید ساختار یک پروژه ( یا مثلا یک کامپوننت یا بخشی از پروژه ) رو کد نویسی کنید و از حالا به بعد هر وقت میخواید یک پروژه جدید بسازید کافیه که فقط دستوری که از قبل تعیین کردید رو صدا بزنید تا براتون کل کدها با همون ساختار فولدربندی هایی که کردید رو با پارامترهایی که تعریف کردید بسازه و شمارو از شَر کپی پِیست کردن خلاص میکنه.مثال:ریداکس: فرض کنید یه پروژه ری اکت ریداکسی دارید و هر بار که یک سرویس جدید میخواید ایجاد کنید باید فایل های action, service, reducer رو بسازید، توی این فایل ها کلی نامگذاری هست، کلی کد، کلی ساختاربندی هست و چیزای دیگه که با کپی پیست کردن و rename کردن تابع ها و فایل ها همیشه یه جایی از دستتون در میره و به خطا میخورید، این وسط ممکنه بخواید یه سری فایل های پروژه ارو هم به ازای هر بار ساختن یه اکشن جدید بازنویسی کنید. خب کار سخت و روو اعصابیه! حالا فرض کنید یه دستور داشته باشید مثل yo myapp redux که همه این کارهارو بکنه!کامپوننت: فرض کنید میخواید یه کامپوننت جدید ری اکتی بسازید. با این ساختاری که میبینید. لازم هست که تمام این فایل ها ساخته بشه، نام گذاری بشه و کدهای داخلش هم ایجاد بشه. فرض کنید با دستور yo myapp component یه کامپوننت با نام CPAlert ساخته بشه و توی فولدر CP هم قرار بگیره.پروژه: یا حتی ممکنه بخواید کل ساختار یه پروژه ارو با یک خط کد بسازید. دقیقا همون کاری که expressjs ازش استفاده کرده برای اینکه بتونید خیلی سریع یه پروژه بسازید.نصب و راه اندازی یومَنابتدا ابزار یومن را به صورت گلوبال نصب کنید: npm install -g yoسپس generator-generator را نصب کنید. این پروژه به ساخت سریع تر generator ها کمک میکند.npm install -g generator-generatorایجاد یک generator جدید:یک فولدر ایجاد کنید. درون آن دستور زیر را اجرا کنید. بعد از اجرای دستور سوالاتی در رابطه با نام و مشخصات پروژه مُوَلِد شما پرسیده میشود که درنهایت این موارد در فایل package.json پروژه شما ذخیره میشود و سپس مابقی فایل ها و فولدر های پروژه ایجاد میشود.دقت کنید نام پروژه شما به صورت پیشفرض با generator- شروع میشود، بنابراین مجددا از این نام در نامگذاری پروژه مولد خود استفاده نکنید.yo generatorدر فولدر پروژه فولدری با نام generators وجود دارد که درون آن فایل index.js قرار گرفته است که تمامی تنظیمات و تسک ها درون این فایل قرار دارد.معرفی فایل index.jsاز طریق یک کلاس جاوااسکریپت کلاس اصلی مولد را گسترش میدهیم: https://gist.github.com/alieslamifard/7adf57e49097ab08ba1caca90982f5fa سپس از طریق فانکشن prompting سوالاتی از کاربر پرسیده شده و پاسخ ها را برای استفاده بعدی در this.props ذخیره میکنیم. https://gist.github.com/alieslamifard/fa62769518b251a7ce3ead670a6a4ccc سوالات میتوانند از نوع input, list, confirm , … باشند. یومن برای نمایش این سوالات از کتابخانه Inquirer.js استفاده کرده است. مطالعه بیشتردر کنار فایل index.js یک فولدر با نام templates وجود دارد که شما میبایست تمام فایل هایی را که میخواهید بعد از اتمام سوالات در پروژه جدید ایجاد کنید درون آن قرار دهید.فرض کنید میخواهیم بعد از اتمام سوالات یک فایل data.json به شکل زیر ایجاد کنیم. https://gist.github.com/alieslamifard/08ce918db81d6fbd44a57e43b69c42be بدین منظور یک فایل _data.json به شکل زیر ایجاد کنید: توجه کنید فایل های تمپلیت با آندرلاین شروع میشوند. https://gist.github.com/alieslamifard/a33dbae4291835e2d231fe4b9e8eceae سپس در فایل index.js در فانکشن writing پاسخ ها را در فایل _data.json جایگذاری میکنیم و فایل جدیدی با نام data.json در مسیر دلخواه ذخیره میکنیم: https://gist.github.com/alieslamifard/77b9986ebc86edabc10aca56c847ffaf همانطور که مشاهده میکنید از طریق فانکشن copyTpl فایل تمپلیت ورودی و فایل و مسیر مقصد را مشخص میکنیم و به عنوان پارامتر سوم دیتای مورد نیاز را پاس میدهیم. در صورتی که فقط نیاز دارید تا فایلی را بدون جایگذاری متغییر ها کپی کنید به جای دستور copyTpl از copy استفاده کنید و پارامتر سوم را نیز پاس ندهید.The Run Loopفانکشن های اصلی ای که شما میتوانید بر اساس مستندات یومن درون کلاس خود استفاده کنید به ترتیب زیر است:initializing - Your initialization methods (checking current project state, getting configs, etc)prompting - Where you prompt users for options (where you’d call this.prompt())configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)default - If the method name doesn’t match a priority, it will be pushed to this group.writing - Where you write the generator specific files (routes, controllers, etc)conflicts - Where conflicts are handled (used internally)install - Where installations are run (npm, bower)end - Called last, cleanup, say good bye, etcتعریف argument و optionشما میتوانید برای پروژه خود argument و option تعریف کنید. این مقادیر میبایست در constructor تعریف شوند و در نهایت به شکل زیر در دسترس قرار میگیرند:yo webapp some-argument --coffee https://gist.github.com/alieslamifard/13239c046e799eeff510ab096b8ef046 برای دسترسی به مقدار آنها از this.options استفاده میکنیم.اجرای مولدبرای دسترسی به مولد خود، نیازی نیست پروژه ای که ایجاد کرده اید را در npm منتشر کنید و سپس از آن استفاده کنید. صرفا کافیست در مسیر روت پروژه دستور زیر را اجرا کنید:npm linkاجرای پروژه مولدیک فولدر جدید ایجاد کنید و درون آن دستور yo name را اجرا کنید. به جای name نام پروژه مولد خود را قرار دهید.نمونه کد کامل از فایل index.js https://gist.github.com/alieslamifard/603cb5258e6a3c40b70f69dba07246a4 کلام آخر!خیلی از ابزارهایی که الان داریم استفاده میکنیم برای اینه که ما پروداکتیو تر باشیم و خودمون رو درگیر زیرساخت یا دوباره کاری های پی در پی نکنیم و تا حد امکان DRY کد بزنیم. شاید در نگاه اول خیلی سخت و نامعقول باشه تایم گذاشتن برای استفاده از یومن، ولی ما الان یک تیم چهار نفره هستیم که هر روز داریم برای ساخت کامپوننت ها، رُوت ها، اکشن ها و غیره از یومن استفاده میکنیم و همگی راضی ان. علی اسلامی فرد علی اسلامی فرد Tue, 05 Mar 2019 18:07:12 +0330 https://virgool.io/iran-react-community/%D8%A7%D8%B3%DA%A9%DB%8C%D9%85%D8%A7-%D9%88%D9%84%D8%AF%DB%8C%D8%B4%D9%86-%D8%AF%D8%B1-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-dans8xodqh9l صورت مساله:فرض کنید یه json از یه rest api گرفتید و حالا میخواید بر اساس مقادیری که فرض میکنید توی این json هست دیتا هاتونو نمایش بدید. یه جاهاییش احتمالا array هست، یه جاهایی string یه جاهایی object و غیره. ولی فرض کنید دیتاها خراب باشن، یعنی اونجایی که توقع دارید array باشه یهو string بگیرید یا کلا اون key توی ریسپانس سرور وجود نداشه باشه و اینجاست که قطعا اررور پارسر جاوااسکریپت رو میگیرید. راه حل چیه؟احتمالا میدونید که وقتی یه برنامه نویس جاوا یه json از یک سرویس میگیره اولین کاری که میکنه اینه که این json رو بر اساس مدلی که تعریف کرده پارس میکنه، بنابر این اگر مقادیری که انتظار داشته دریافت کنه، وجود نداشته باشن یا تایپ هاشون متفاوت باشه کل پروسه میره توو دیوار و همینجا اکسپشن میگیره و ادامه کد ها اجرا نمیشه و میتونه خطای مناسب نمایش بده ولی ما وقتی یه json میگیریم میریزیمش توی استور ریداکسمون و بعد مستقیم ازش استفاده میکنیم.پس PropTypes ها چی؟!به نظر میاد propTypes ها بیشتر کارکرد مستند سازی props هارو بر عهده دارن و اگر مقداری متفاوت با تعریفشون وارد بشه فقط اخطار توی کنسول میگیرید که همونم توی محیط پروداکشن نمیگیرید!خب if ... else statement ها چی؟!اولا یه کم نامرتب و کثیف هستن، دوما اولا. https://gist.github.com/alieslamifard/de0369ac521fd4e41c80366d7afb78ab هووم، optional chaining چی؟مشخصه که سینتکسش تمیز تره ولی بازم best practice نیست. بعلاوه اینکه باید هر جای دیگه ای که میخواید کاری با این دیتا انجام بدید باز باید یه if دیگه بنویسید. و البته این مزیت وجود نداره که در یک سطح بالاتر کل خطاهای مربوط به خراب بودن دیتای api یکجا هدل بشه و خطای مناسب نمایش داده بشه. https://gist.github.com/alieslamifard/9809bed0bb399c1e03175b24e91dba8a راه حل چیه؟این وقت ها بهتره که از schema validation برای اعتبارسنجی ریسپانسی که از سرور دریافت میکنید داشته باشید.Yup: Dead simple Object schema validation احتمالا قبلا از Yup توی Formik استفاده کردید. اونجاکارکردش اینه که دیتایی که کاربر توی فرم وارد میکنه ارو چک میکنه و این امکان رو میده که دکمه submit فرم رو غیر فعال کنید یا خطای مناسب برای هر فیلد نمایش بدید.پیاده سازیفرض کنید ما یه اکشن داریم که میره یه ریکوئست میزنه، اگر response سالم باشه اکشن success رو dispatch میکنه و اگر نه failure رو dispatch میکنه. خیلی ساده. https://gist.github.com/alieslamifard/2b6da55e3ff325a67fc1ba195e8fb06e حالا میتونیم یه اسکیما برای مقدار response بنویسیم و معتبر بودنش روچک کنیم و اگر معتبر نبود مثلا مقدار NOT_VALID رو dispatch کنیم. https://gist.github.com/alieslamifard/ee2a307e32b960bf8bd977a03db98dc7 تمام! علی اسلامی فرد علی اسلامی فرد Mon, 18 Feb 2019 17:51:20 +0330