HOTWIRE ile Modern Web/Mobil Uygulamaları Geliştirme

Transcript

1. Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - tayfun.erikan@hey.com - Kaynak: https://hotwired.dev HOTWIRE Modern Web / Mobil Uygulamaları Geliştirme
2. Merhaba 👋 Tayfun (Öziş) Erikan • Ruby, Rails, HOTWIRE (Turbo + Stimulus), Shape Up, Basecamp, Heroku ve AWS kullanarak web ve mobil uygulamalar yapıyorum. • @lab2023 & @bulutfon kurucu ortağıyım. • Bir kız babasıyım :) • Full-stack web geliştirici • SSI Dalgıç • Gitarist @fazla_mesai • Organizatör @ruby_turkiye
3. 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.
4. HOTWIRE Turbo 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 WebSoket üzerinden de gerçekleştirebilirsiniz. Aynı zamanda Turbo iOS ve Android adaptörleri ile hibrit uygulama geliştirmenize olanak tanır.
5. HOTWIRE Stimulus 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. Bu bölümde mütevazi istekleri olan bir JavaScript çerçevesi olan Stimulus ile tanışacak ve bu araçın ne işe yaradığı hakkında sahibi olacaksınız. Stimulus kullanarak bir tutam JavaScript ile uygulamanıza nasıl daha fazla etkileşim kazandıracağınızı öğreneceksiniz. Ayrıca Stimulus'u Rails ile nasıl daha efektif bir şekilde kullanabileceğiz hakkında fikir sahibi olacaksınız.
6. HOTWIRE 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. Coming soon…
7. Turbo Herhangi bir JavaScript yazmak zorunda kalmadan tek sayfalık bir web uygulamasının hızını elde edersiniz.
8. Turbo Turbo, çoğu web uygulamasının yazması gereken özel JavaScript miktarını önemli ölçüde azaltmak için tamamlayıcı teknikler kullanır: • 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. https://turbo.hotwired.dev
9. Stimulus HTML için mütevazı bir JavaScript çerçevesi
10. Stimulus Stimulus, mütevazı hede fl eri olan bir JavaScript çerçevesidir. • Ö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. https://stimulus.hotwired.dev
11. 🎁 Bonus 🧑💻👩💻 Keşfetmeniz ve odaklanmanız gereken HOTWIRE ve Rails 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 • Ohttps://github.com/hotwired/turbo-rails • https://marcoroth.dev/posts/guide-to-custom- turbo-stream-actions
12. 🧐 Biraz da kod görelim…
13. Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - tayfun.ozis.erikan@lab2023.com - Kaynak: https://hotwired.dev Teşekkürler Soru-Cevap