Slide 1

Slide 1 text

Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - [email protected] - Kaynak: https://hotwired.dev HOTWIRE Modern Web / Mobil Uygulamaları Geliştirme

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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…

Slide 7

Slide 7 text

Turbo Herhangi bir JavaScript yazmak zorunda kalmadan tek sayfalık bir web uygulamasının hızını elde edersiniz.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Stimulus HTML için mütevazı bir JavaScript çerçevesi

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

🎁 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

Slide 12

Slide 12 text

🧐 Biraz da kod görelim…

Slide 13

Slide 13 text

Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - [email protected] - Kaynak: https://hotwired.dev Teşekkürler Soru-Cevap