Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HOTWIRE ile Modern Web/Mobil Uygulamaları Geliş...

HOTWIRE ile Modern Web/Mobil Uygulamaları Geliştirme

Tayfun (Öziş) Erikan

December 13, 2023
Tweet

More Decks by Tayfun (Öziş) Erikan

Other Decks in Programming

Transcript

  1. Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - [email protected] -

    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 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
  10. 🎁 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
  11. Tayfun (Öziş) Erikan - @lab2023 - @toziserikan - [email protected] -

    Kaynak: https://hotwired.dev Teşekkürler Soru-Cevap