Hotwire ile geliştirilen Rails uygulamasında Turbo 7'den Turbo 8'e geçiş

Transcript

1. Tayfun (Öziş) Erikan Tam donanımlı web/mobil uygulama geliştirici - Genel koordinatör @lab2023 tayfun.erikan@hey.com - @tayfunerikan Hotwire ile geliştirilen Rails uygulamasında Turbo 7'den Turbo 8'e geçiş Görsel kaynakları: https://rubyonrails.org https://hotwired.dev ➕ 🟰 ☺❤💪🚀
2. Merhaba 👋 Tayfun (Öziş) Erikan • Ruby, Rails, HOTWIRE (Turbo + Stimulus + Strada), Shape Up, Basecamp, Heroku ve AWS kullanarak web ve mobil uygulamalar yapıyorum. • @lab2023 & @bulutfon kurucu ortağıyım. • Evliyim ve bir kız babasıyım :) • Full-stack web/mobil geliştirici • SSI Dalgıç • Gitarist @fazla_mesai • Organizatör @ruby_turkiye
3. Bu sunum size neler vaadediyor? 🎁 Tarihçe · Tanıtım · Özellikler · İşlevler · Yenilikler · Kavramlar · Farklılıklar • Hotwire nedir? • Hotwire nasıl çalışır? • Hotwire neler içeriyor? • Hotwire nasıl bir felsefesi var? • Hotwire neyi farklı yapıyor? • Hotwire Rails kullanmalısınız? • Hotwire kimeler içindir? • Hotwire’e nereden başlamalısınız? The Creation of Adam - Michelangelo https://en.wikipedia.org/wiki/The_Creation_of_Adam
4. Rails’in ön uç çerçevesi: HOTWIRE https://hotwired.dev Görsel kaynağı: https://hotwired.dev
5. HOTWIRE / Turbolinks tarihçesi… Geçmiş’de ve Günümüz’de Web Geliştirme Daha detaylı bilgi için bkz: https://www.youtube.com/watch?v=SWEts0rlezA - RailsConf 2016 Görsel sahibi: Sam Stephenson
6. HOTWIRE / Turbolinks tarihçesi… Turbolinks’in ortaya koyduğu çözüm Görsel sahibi: Sam Stephenson
7. HOTWIRE / Tarihçe… Görsel kaynağı: https://github.com/turbolinks/turbolinks
8. HOTWIRE Turbo / Stimulus / Strada Hotwire, kablo üzerinden JSON yerine HTML göndererek çok fazla JavaScript kullanmadan modern web uygulamaları oluşturmaya yönelik alternatif bir yaklaşımdır. Bu, hızlı ilk yükleme sayfaları sağlar, şablon oluşturmayı sunucuda tutar ve geleneksel tek sayfalık bir uygulamayla ilişkili hız veya yanıt verebilirlikten herhangi bir ödün vermeden herhangi bir programlama dilinde daha basit, daha üretken bir geliştirme deneyimi sağlar.
9. HOTWIRE / Turbo Herhangi bir JavaScript yazmaya gerek kalmadan tek sayfalık bir web uygulamasının hızını yakalayın HOTWIRE'ın kalbi Turbo'dur. Turbo sayfa değişikliklerini ve form gönderimlerini hızlandırmak için sayfa içeriklerini Frame adı verilen küçük parçalara bölerek sunucu tarafından JavaScript kullanmadan güncellemenize olanak tanır. Bu güncellemeleri asenkron olarak WebSocket üzerinden de gerçekleştirebilirsiniz. Turbo akışları HTTP veya WebSocket ile gerçekleştirilebilir. Aynı zamanda Turbo iOS ve Android adaptörleri ile de haberleşir ve Strada ile güçlerini birleştirip hibrit uygulama geliştirmenize olanak tanır.
10. HOTWIRE / Turbo Replace visits Restoration visits Görsel kaynağı: https://hotwired.dev
11. HOTWIRE / Turbo • Turbo Drive, tam sayfa yeniden yükleme ihtiyacını ortadan kaldırarak bağlantıları ve form gönderimlerini hızlandırır. • Turbo Frame, sayfaları, gezinmeyi kapsayan ve tembelce yüklenebilen bağımsız bağlamlara ayrıştırır. • Turbo Stream, WebSocket, SSE üzerinden veya yalnızca HTML ve bir dizi CRUD benzeri eylem kullanarak form gönderimlerine yanıt olarak sayfa değişikliklerini sağlar. • Turbo Native, web ve yerel bölümler arasında sorunsuz geçişlerle, görkemli yekpare yapınızın yerel iOS ve Android uygulamalarınızın merkezini oluşturmasını sağlar. • Her şey kablo üzerinden HTML göndererek yapılır. Bunun yeterli olmadığı durumlarda Hotwire'ın diğer tarafına uzanabilir ve Stimulus ile işi bitirebilirsiniz. Turbo, çoğu web uygulamasının yazması gereken özel JavaScript miktarını önemli ölçüde azaltmak için tamamlayıcı teknikler kullanır:
12. HOTWIRE / Turbo Görsel kaynağı: https://hotwired.dev
13. HOTWIRE / Stimulus Zaten sahip olduğunuz HTML için mütevazı bir JavaScript çerçevesi. Turbo genellikle geleneksel olarak JavaScript gerektirecek olan etkileşimin en az %80'ini halletse de, yine de bir dizi özel kodun gerekli olduğu durumlar vardır. Stimulus, duruma ve kablolamaya yönelik HTML merkezli bir yaklaşımla bunu kolaylaştırır. Stimulus HTML elemanlarına bağlanarak tarayıcı üzerindeki gerçekleştirmek istediğiniz etkileşimleri sade HTML sözdizimi ve “data-attirbute” ekleri kullanarak yönetmenize olanak sunar. Böylece daha okunaklı bir HTML/JavaScript uygulaması geliştirmenizi sağlar. Stimulus kullanarak aşırıya kaçmadan, bir tutam JavaScript ile uygulamanıza daha fazla etkileşim kazandırabilirsiniz.
14. HOTWIRE / Stimulus Görsel kaynağı: https://hotwired.dev
15. HOTWIRE / Stimulus • Ön ucunuzun tamamını ele geçirmeye çalışmaz - aslında HTML'yi işlemekle hiç ilgilenmez. • Bunun yerine, HTML'nizi parlatmaya yetecek kadar davranışla zenginleştirmek için tasarlanmıştır. • Stimulus, Turbo ile güzel bir şekilde eşleşerek hızlı, zorlayıcı uygulamalar için minimum çabayla eksiksiz bir çözüm sağlar.
16. HOTWIRE / Strada Herhangi bir JavaScript yazmaya gerek kalmadan tek sayfalık bir web uygulamasının hızını yakalayın Native uygulamaların ve tamamen native ekranların yanı sıra web’in gücünden ve esnekliğinden faydalanmak için Turbo Native uygulamalar oluşturabilirsiniz. Şu anda Native uygulamanın Web Görünümü'nde neler olduğunu bilmesinin ve görüntülediği içeriğe uyum sağlaması zahmetlidir. Strada, bir mobil hibrit uygulamanın web ve yerel bölümlerinin HTML köprüsü öznitelikleri aracılığıyla birbirleriyle konuşma şeklini standartlaştırır. Bu, yerel değiştirmelerle web etkileşimlerini kademeli olarak yükseltmeyi kolaylaştırır. Strada, web uygulamanız ile yerel uygulama kodunuz arasında bir "köprü" görevi görerek web uygulamanız ile yerel uygulamanızın bileşen tabanlı bir çerçeve aracılığıyla iletişim kurmasına olanak tanır. Bir Web Görünümünde JavaScript koduyla ve uygulamanızdaki yerel kodla iletişim kurmanın karmaşıklığını ortadan kaldırır.
17. HOTWIRE / Strada Görsel kaynağı: https://hotwired.dev
18. HOTWIRE Kaynaklar • https://discuss.hotwired.dev • https://github.com/hopsoft/ turbo_ready • https://github.com/stimulus- components • https://github.com/stimulus-use/ stimulus-use • https://boringrails.com • https://www.hotrails.dev • https://guides.rubyonrails.org/ caching_with_rails.html • https://guides.rubyonrails.org/ association_basics.html#options-for- belongs-to-touch • https://guides.rubyonrails.org/ layouts_and_rendering.html • https://github.com/hotwired/turbo- rails • https://marcoroth.dev/posts/guide-to- custom-turbo-stream-actions
19. HOTWIRE Kaynaklar • https://superails.com • https://blog.corsego.com/hotwire- turbo-8-morphing • https://boringrails.com • https://boringrails.com/articles/ thinking-in-hotwire-progressive- enhancement • https://htmx.org/docs/#morphing • https://www.patreon.com/ TheHotwireClub/collections • https://github.com/gobijan/todo-rails- realtime-morphing • https://github.com/hotwired/turbo/ issues/1093 • https://github.com/hotwired/turbo/ pull/1099 • https://github.com/hotwired/turbo- rails/issues/545 • https://github.com/hotwired/turbo- rails/pull/521
20. https://hotwire.io
21. Rails ve Hotwire kimlere hitap eder? Vitruvian Man - Leonardo da Vinci https://en.wikipedia.org/wiki/Vitruvian_Man
22. Tam donanımlı geliştiriciler Hayatlarında basitlik ve sadelik arayanlar Hedef / ürün odaklı ve pragmatik geliştiriciler Yeniliklere açık ve teknolojiyi yakından takip edenler Hype teknolojilere kendini hemen kaptırmayanlar İşinde gücüde ve üretken insanlar Yaptıkları işin kalitesine ve felsefesine inananlar One-Person Framework Tek Kişilik Çerçeve Renaissance Developers Rönesans Geliştiricisi
23. RailsGuides! http://guides.rubyonrails.org Nereden başlamalıyım? https://www.rubyturkiye.org Ruby Türkiye! https://hotwired.dev Hotwire
24. Soru-Cevap-Sohbet Teşekkürler 😇 Tayfun (Öziş) Erikan Tam donanımlı web/mobil uygulama geliştirici - Genel koordinatör @lab2023 tayfun.erikan@hey.com - @tayfunerikan Bu sunumun hazırlanmasında kullanılan bazı görseller, kaynaklar ve referans içerikler: https://rubyonrails.org ve https://hotwired.dev'e aittir.