چالش جبهه مدرن در ریل ها
توسعه دهندگان ریل اغلب با یک معضل روبرو هستند: آیا آنها باید با ابزارهای ریل داخلی بچسبند یا برای تعامل واکنش نشان دهند؟ ظهور برنامه های سنگین جاوا اسکریپت باعث شده است تا پروژه های ریل برای نگهداری سخت تر شوند. بسیاری از تیم ها احساس می کنند که جلوی و پس زمینه را جدا می کنند و منجر به پیچیدگی اضافی ، مدیریت API و وابستگی های بیشتر برای مدیریت می شوند. در حالی که React قدرتمند است ، اغلب برای برنامه های سنتی ریل های سنتی بیش از حد لازم را اضافه می کند.
اما اگر بتوانید UI مدرن و پویا را بدون پیچیدگی اضافی بسازید ، چه می شود؟
وارد Hotwire شوید-یک جایگزین بومی ریل
Hotwire در حالی که هنوز یک تجربه کاربری سریع و تعاملی را ارائه می دهد ، قدرت HTML با سرور را در بر می گیرد. به جای اینکه همه چیز را به جلو تغییر دهید ، ریل ها را در هسته نگه می دارد و تعامل را به روشی که در چارچوب طبیعی باشد ، کنترل می کند.
با Hotwire ، نیازی به تنظیم یک API جداگانه ، مدیریت حالت سمت مشتری یا به روزرسانی های بی پایان JavaScript نیست. شما بهترین های هر دو جهان را دریافت می کنید – تعامل UI مدرن بدون REACT سربار.
Hotwire چیست؟ دیدگاه توسعه دهنده ریل
Hotwire چارچوبی است که تعامل مدرن UI را به ریل ها بدون پیچیدگی یک جبهه کامل جاوا اسکریپت می بخشد. این کار را با تکیه بر به روزرسانی های سرور به جای فشار آوردن همه چیز به مشتری ، ساده نگه می دارد.
در هسته آن ، HotWire = Turbo + محرک:
- توربو -بارهای صفحه سریع ، به روزرسانی های زمان واقعی و تغییرات صفحه جزئی را بدون نوشتن JavaScript سفارشی کنترل می کند. این به معنای فرم ها ، لیست ها و تعامل UI بدون مدیریت وضعیت جبهه است.
- محرک – یک چارچوب کوچک جاوا اسکریپت که در صورت لزوم پیشرفت هایی را اضافه می کند. بر خلاف React ، UI را به دست نمی گیرد – این رفتار را به عناصر HTML موجود متصل می کند.
چرا Hotwire خیلی خوب به ریل ها می رسد
ریل ها همیشه در مورد “کنوانسیون بیش از پیکربندی” بوده است. به جای مجبور کردن توسعه دهندگان برای تصمیم گیری های بی پایان در مورد معماری جبهه ، Hotwire از اصول ریل پیروی می کند:
- با ابزارهای موجود ریل خارج از جعبه کار می کند.
- این منطق عقب را در ریل ها به جای پخش آن در چندین لایه نگه می دارد.
- با جلوگیری از چارچوب های سنگین جاوا اسکریپت ، پیچیدگی غیر ضروری را کاهش می دهد.
با Hotwire ، نیازی به کار مجدد نحوه ساخت برنامه خود نیست – شما فقط نقاط قوت ریل را گسترش می دهید تا یک UI سریع و تعاملی با حداقل تلاش ایجاد کنید.
چه موقع به جای واکنش از HotWire استفاده کنید
موارد بسیاری وجود دارد که واکنش در برنامه ریل بیش از حد است. اگر نیازی به یک برنامه تک صفحه ای تمام عیار (SPA) ندارید ، ممکن است Reserct پیچیدگی بیشتری نسبت به ارزش داشته باشد.
هنگامی که واکنش بیش از حد است
- برنامه شما آبگرم نیست ، اما هنوز هم عناصر تعاملی دارد.
- شما فقط برای چند ویژگی کوچک (مدالها ، فرم ها یا به روزرسانی های UI) از React استفاده می کنید.
- شما با زمان ساخت طولانی ، بارهای صفحه اولیه آهسته یا مشکلات عملکرد ناشی از ارائه مشتری در حال سر و کار هستید.
وقتی Hotwire می درخشد
- شما می خواهید برنامه خود را به طور کامل در ریل ها نگه دارید بدون اینکه یک چارچوب جلوی جداگانه اضافه کنید.
- شما به به روزرسانی در زمان واقعی نیاز دارید اما نمی خواهید WebSockets را به صورت دستی تنظیم کنید.
- شما جاوا اسکریپت کمتری را ترجیح می دهید و بیشتر از سادگی ریل ها را ترجیح می دهید.
Hotwire یک انتخاب عالی برای کسانی است که می خواهند ویژگی های UI مدرن را بدون پیچیدگی یک مجموعه سنگین جاوا اسکریپت می خواهند. این امکان را به شما می دهد تا ضمن تمیز نگه داشتن برنامه ریل های خود ، برنامه های سریع و تعاملی بسازید.
Hotwire in Action: چگونه از آن در سیاره آرگون استفاده می کنیم
در پروژه اخیر ما برای Olsson Boofing ، ما یک برنامه وب اول موبایل را برای کارگران تعمیر و نگهداری میدانی ایجاد کردیم. ما به جای استفاده از React همانطور که به طور معمول استفاده می کنیم ، ما رویکرد مدرن Rails را برای ساختن برنامه های وب پاسخگو بدون نوشتن جاوا اسکریپت پذیرفتیم.
جریان توربو برای مراحل فرم
یکی از کاربردهای اصلی ما از Hotwire اجرای یک فرآیند شکل چند مرحله ای برای بازرسی های سقف بود. ما از جریان های توربو برای حرکت در بخش های مختلف فرم بدون بارگیری مجدد صفحه استفاده کردیم. هنگامی که کاربران یک مرحله فرم را ارسال می کنند ، کنترل کننده با یک جریان توربو پاسخ می دهد که فقط محتوای فرم را به روز می کند:
شکل جزئی برای کار با این به روزرسانی های جریان توربو ساخته شده است:
این رویکرد به ما اجازه داد:
- هر مرحله را جدا و حفظ کنید
- هنگام حرکت بین مراحل ، بازخورد فوری ارائه دهید
- با اتصالات آهسته تر تجربه کاربر صاف را در دستگاه های تلفن همراه حفظ کنید
- خطاهای اعتبار سنجی فرم را بدون از دست دادن زمینه کنترل کنید
محرک برای تعامل افزایش یافته
در حالی که توربو بیشتر نیازهای ما را برطرف می کرد ، ما از محرک برای تعامل طرف مشتری استفاده کردیم که به JavaScript نیاز داشت. با نگاهی به نظرات خود ، می توانیم ببینیم که چگونه کنترل کننده های محرک را متصل می کنیم:
این Data-Controller = “فرم” ویژگی به کنترلر فرم ما متصل می شود که پیش نمایش های تصویر را کنترل می کند:
کنترلر به لطف پیکربندی محرک ما در آن به طور خودکار بارگیری می شود App/JavaScript/Controllers/index.js:
آنچه یاد گرفتیم
خوب
- افزایش بهره وری: Hotwire به ما اجازه داد تا ویژگی های تعاملی را با کد قابل توجهی کمتر از یک رویکرد مبتنی بر واکنش ایجاد کنیم.
- عملکرد: با تشکر از پخش هوشمند HTML Smart Turbo ، این برنامه حتی در اتصالات موبایل کندتر احساس می کند.
چالش برانگیز
- تغییر مدل ذهنی: با توجه به React ، زمان لازم بود تا تفکر خود را از مدیریت حالت سمت مشتری به به روزرسانی های HTML سمت سرور منتقل کنیم.
- اشکال زدایی: در ابتدا ، اشکال زدایی قاب توربو و مسائل جریان از آنجا که متفاوت از درخواست های سنتی آژاکس عمل می کردند ، مشکل بود.
- مستندات: در حالی که مستندات Hotwire خوب است ، پیدا کردن راه حل هایی برای موارد لبه که گاهی اوقات نیاز به غواصی به کد منبع یا بحث در جامعه دارند.
کاری که می خواهیم متفاوت انجام دهیم
- سازمان فریم: ما بهتر می توانیم سلسله مراتب فریم های توربو خود را سازماندهی کنیم. به عنوان مثال ، ما می توانستیم قاب های مربوط به بخش های مربوط به فرم های مرتبط را برای مدیریت بهتر دولت توخالی کنیم:
-
کنترل کننده های محرک: به جای کنترلر فرم تا حدودی یکپارچه که به آن پایان دادیم ، ما کنترل کننده های محرک متمرکز و قابل استفاده مجدد را ایجاد می کنیم.
-
رسیدگی به خطا: ما می توانیم برای درخواست های توربو ، خطای قوی تری را برای درخواست های توربو اجرا کنیم ، احتمالاً با یک کنترل کننده محرک خطای اختصاصی:
سؤالات متداول و منابع
- “آیا Hotwire می تواند UIS پیچیده را اداره کند؟” → بله ، اما نیاز به تجدید نظر در نحوه ساختار منطق جلوی شما دارد.
- “در مورد مؤلفه های React موجود چیست؟” requirect رویکرد ترکیبی: در صورت لزوم واکنش نشان دهید و بقیه را انتقال دهید.
- “آیا یادگیری سخت است؟” → اگر ریل را می شناسید ، می توانید Hotwire را سریع انتخاب کنید – در اینجا برخی از منابع مورد علاقه ما وجود دارد.
غذای اصلی
تجربه ما با Hotwire تا حد زیادی مثبت بوده است. در حالی که یک منحنی یادگیری وجود داشت ، مزایای کد ساده تر ، عملکرد بهتر و قابلیت اطمینان پیشرفته ، آن را به یک انتخاب عالی برای این برنامه اول موبایل تبدیل کرده است. رویکرد چارچوب به پیشرفت مترقی به ویژه در مورد استفاده ما درخشید ، جایی که اتصال شبکه نمی تواند تضمین شود.
ما با استفاده از درسهایی که آموخته ایم برای ساختن برنامه های حتی بهتر استفاده کنیم ، به استفاده از Hotwire برای پروژه های آینده ادامه می دهیم. تراز این چارچوب با فلسفه “کنوانسیون بر روی پیکربندی ریل ها” به این معنی است که می توانیم بیشتر بر حل مشکلات تجاری و کمتر روی جزئیات اجرای فنی تمرکز کنیم.
همچنین! گوش دادن به جوئل هاوکسلی در مورد چگونگی تأثیر پیچیدگی جبهه بر قابلیت حفظ و اینکه چرا سادگی در پادکست قابل حفظ است ، تأثیر می گذارد: هزینه های پنهان پیچیدگی جبهه.
ما فکر می کنیم شما نیز از خواندن لذت خواهید برد …
متداول
س: “محدودیت های Hotwire چیست؟”
پاسخ: Hotwire ساخت برنامه های ریل های تعاملی را ساده می کند اما ممکن است برای برنامه های بسیار پیچیده و سنگین دولت که معمولاً برای چارچوب های کامل جاوا اسکریپت مانند React یا Vue مناسب هستند ، کوتاه شود. در حالی که برای اکثر پروژه های ریل بسیار عالی است ، ممکن است برای رسیدگی به منطق پیشرفته جلوی یا اجزای UI بسیار تعاملی ، به ادغام های جاوا اسکریپت یا شخص ثالث اضافی نیاز داشته باشد.
س: “آیا می توانم از Hotwire با برنامه های ریل موجود استفاده کنم؟”
پاسخ: بله! Hotwire برای ادغام یکپارچه در برنامه های ریل های موجود طراحی شده است. شما می توانید با جایگزینی اجزای خاص UI یا تعامل با توربو و محرک بدون بازنویسی کل جلوی خود ، آن را به صورت تدریجی اتخاذ کنید.
س: “چگونه Hotwire با تعامل های پیچیده برخورد می کند؟”
پاسخ: Hotwire با استفاده از توربو برای به روزرسانی های صفحه جزئی یکپارچه و محرک برای رفتار هدفمند جاوا اسکریپت ، تعامل پیچیده را مدیریت می کند. آنها در کنار هم ، آنها به توسعه دهندگان اجازه می دهند تا تجربیات غنی و تعاملی را بدون اعتماد به نفس سنگین به چارچوب های پیچیده جاوا اسکریپت انجام دهند و UI خود را حفظ و عملکرد خود نگه دارند.
