این مقاله در ابتدا در Rails Designer منتشر شد
Trifecta Hotwire به شما امکان می دهد برنامه های وب مدرن (ریل) را بنویسید ، بدون نیاز به نوشتن (زیاد) جاوا اسکریپت دست و پا گیر با درایو ، قاب ، جریان یا مورف. اما با تمام این گزینه ها ، از کدام یک استفاده می شود و چه زمانی؟
Hotwire ، مانند ریل ، به عنوان توسعه دهنده نیاز به تغییر ذهنی از شما دارد. شما می توانید سعی کنید از محرک به صورت هر جزء استفاده کنید ، اما اگر به جای آن کنترل کننده های عمومی را می نویسید ، بیشتر از آن استفاده می کنید. در مورد گزینه های مختلف توربو نیز همین کار را می کند.
اگر از Enhancement Progressive Enhancement پیروی کنید ، یک استراتژی طراحی وب که در سال 2008 توسط آرون گوستافسون محبوبیت پیدا کرده است ، بیشترین ارزش را از HotWire دریافت می کنید که در حالی که ویژگی های پیشرفته ای را برای مرورگرهای مدرن می گذارد ، عملکرد اساسی را برای همه کاربران تضمین می کند. در حالی که امروزه این استراتژی با توجه به پشتیبانی گسترده مرورگر مدرن برای CSS و ویژگی های JavaScript بسیار مهم است ، اما برای کمک به شما در انتخاب ابزار مناسب برای کار بسیار ارزشمند است.
من به ترتیب زیر به هر گزینه می رسم:
- درایو توربو
- قاب
- جریان توربو (از جمله پخش)
- مورف توربو
این ممکن است آشکار به نظر برسد ، با این کار. اما این به شما کمک نمی کند همیشه به جریان های توربو دسترسی پیدا کنید یا گزینه های مختلفی را که درایوهای توربو دارند ، کاملاً فراموش کنید.
من یک برنامه اصلی ریل را با چند تعهد برای هر مرحله که در اینجا بیان شده بود ، گنجانده ام. من پیشنهاد می کنم آن را بررسی کنید تا درک کنید که هر نکته بهتر شده است. اولین تعهد نقطه شروع است و از ریل های پیش فرض redirect_to استفاده می کند (به root_path در این مثال). از آن برای کدگذاری همراه با این مقاله استفاده کنید. ✌ تعهد دوم نتیجه نهایی این مقاله است.
درایو توربو
متوجه خواهید شد که همه کار خوب است! برچسب دکمه به روز می شود و تعداد آنها در H1 نیز وجود دارد. البته هیچ چیز خاص ، این در اینجا فقط یک صفحه کلی است (هرچند سریعتر به دلیل درایو توربو ، بنابراین فقط بدن تزریق می شود!).
اما آنچه شما متوجه می شوید (از طریق پیمایش اجباری که اضافه کردم) ، که صفحه “پیمایش” به بالا باز می گردد. اوه خوشبختانه برای ما ، یک ابزار کوچک وجود دارد که می توانید از آنها استفاده کنید: بشر با این کار ، پیمایش را در هنگام تازه کردن صفحه حفظ می کند. باحال
در برنامه/بازدیدها/طرح بندی/برنامه. html.erb موارد زیر را اضافه کنید:
<%%= content_for(:title) || "Turbo When" %>
+
<%%= csrf_meta_tags %>
<%%= csp_meta_tag %>
این همه بسیار جالب است ، اما فقط برای پیمایش روی بدن کار می کند. بیایید پیمایش به عنصر اصلی را مجبور کنیم:
-
+
-
+
و اکنون وضعیت پیمایش دیگر همچنان ادامه ندارد.
قاب های توربو
این لحظه ای است که فریم های توربو مفید هستند. بیایید لایک های-مهمانی را در یک عنصر قاب توربو بپیچیم. و ببینید چه اتفاقی می افتد.
-
+
<%% if user.likes.exists?(post: post) %>
<%%= button_to post_like_path(post, user.likes.find_by(post: post)), method: :delete do %>
Unlike
<%% end %>
<%% else %>
<%%= button_to post_likes_path(post), method: :post do %>
Like
<%% end %>
<%% end %>
-
+
عالی ، دکمه Likes بر اساس بیانیه IF/Else تغییر می کند و موقعیت پیمایش هنوز حفظ می شود!
اما صبر کنید … تعداد در element doesn’t change!
Turbo Stream (including Broadcasts)
Now you reach for Turbo Streams! These are for smaller, (multiple) UI updates in different parts of the page.
Update the show action to extract the title into its own partial. While this is a fair bit of overhead for this simple example, it shows the conventional way to do it.
-
+ <%%= render partial: "title", locals: { post: @post } %>
<%%= @post.content %>
<%%= render partial: "likes/like", locals: { user: Current.user, post: @post } %>
سپس جزئی:
+
سپس اقدامات جریان توربو. در برنامه/نمایش/لایک/ایجاد. turbo_stream.erb:
+ <%%= turbo_stream.replace "likes" do %>
+ <%%= render partial: "likes/like", locals: { user: Current.user, post: @post } %>
+ <%% end %>
+ <%%= turbo_stream.replace "title" do %>
+ <%%= render partial: "posts/title", locals: { post: @post } %>
+ <%% end %>
وت برنامه/نمایش/لایک/Deور.Turbo_stream.erb:
+ <%%= turbo_stream.replace "likes" do %>
+ <%%= render partial: "likes/like", locals: { user: Current.user, post: @post } %>
+ <%% end %>
+ <%%= turbo_stream.replace "title" do %>
+ <%%= render partial: "posts/title", locals: { post: @post } %>
+ <%% end %>
بله ، آنها یکسان هستند! احتمالاً می توانید منطق را تغییر داده و از عمل به روزرسانی برای گرفتن هر دو استفاده کنید ، اما من ترجیح می دهم که اقدامات من آرامش بخش و نیاز به جاده بین آنچه باید بین اقدامات اتفاق بیفتد تغییر کند. بنابراین من ترجیح می دهم چند نسخه تکراری داشته باشم و کد خود را به هوشمند تبدیل کنم.
یک قدم دیگر برای برداشتن وجود دارد و آن حذف آن است redirect_to در هر دو عمل کنترلر:
class LikesController < ApplicationController
before_action :set_post, only: %w[create destroy]
def create
Current.user.likes.create(post: @post)
-
- redirect_to root_path
end
def destroy
Current.user.likes.find_by(post: @post).destroy
-
- redirect_to root_path
end
private
def set_post
@post = Post.find(params[:post_id])
end
end
و با این کار همه عملکردهای یکسانی داریم.
مورف توربو
بنابراین در مورد مورف توربو چطور؟ در حالی که تجربه من با آن محدود است ، محدود است ، زیرا من نمی توانم به راحتی یا بدون عوارض جانبی غیر منتظره کار کنم. حتی با برنامه مثال کوچک ، هنگام پیروی از اسناد کار نمی کند. این تعهد را برای این مجموعه مشاهده کنید. من فرضیه آن را دوست دارم ، اما در حال حاضر احساس می کنم خیلی “جادویی” (با نام مستعار من نمی دانم چه اتفاقی می افتد).
اگر بینش یا نمونه های دنیای واقعی دارید ، احساس راحتی کنید. خوشحالم که از شما می شنوم ، و احتمالاً در اینجا ارسال می کنم.
رشدی
این ، به عنوان مثال تا حدودی متناقض ، باید در هنگام استفاده از ویژگی روشن شود. به طور خلاصه:
- پیش فرض به Turbo Drive ، با هر یک از گزینه های اضافی آن.
- تغییر در همان عنصر: فریم های توربو
- تغییرات مورد نیاز در جای دیگر در صفحه (یک یا بسیاری از عناصر): جریان توربو
- تغییرات مورد نیاز خارج از چرخه درخواست فعلی (یعنی از طریق یک اقدام کنترلر): پخش توربو جریان پخش می شود
مثالی دارید که از آن مطمئن نیستید؟ به این نتیجه برسید ، من خوشحالم که به شما کمک می کنم تصمیم درستی بگیرید.
