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

Ruby-Rails ile Önyüz Teknolojilerin Kullanımı

Ruby-Rails ile Önyüz Teknolojilerin Kullanımı

Tayfun (Öziş) Erikan

November 23, 2013
Tweet

More Decks by Tayfun (Öziş) Erikan

Other Decks in Programming

Transcript

  1. Neden ? Niçin ? Nasıl ? • Hızlı sonuç üretirler.

    • DRY (Don't Repeat Yourself) - Kendinizi tekrarlamayın!!! • Affetmezler! Hata yapmanıza izin vermezler. Hatalarınızı ört bas etmezler. • Üretim hızınızı artırırlar. Performansınız: x2 x3 artar. • Kodunuza bakım yapmanız ve taşımanız kolaylaşır.
  2. İçindekiler • Rails 3.2.x View Katmanı • Rails 3.2.x Asset

    Pipeline • HAML nedir ? • Sass nedir ? • Compass nedir ? • CoffeeScript nedir ? • Twitter Bootstrap Framework tanıtımı • İlgili Ruby GEM' ler
  3. Rails 3.2.x View Katmanı • View katmanı ve varsayılan render

    yöntemleri • Layout (şablon) yapısı ve içerikleri bölümlere ayırmak • head :created • Asset tag helpers (javascript_include_tag, stylesheet_link_tag, image_tag, video_tag, audio_tag, ...) • :yield ve content_for • Partial: Kendinizi tekrarlamaktan kurtulun (DRY)
  4. Rails 3.2.x View Katmanı Layout Projelerinizde bulunan view katmanını parçalara

    bölüp, farklı şablon ve görünümlerde göstermenizi sağlar • layout ismi controller' ile aynı ise otomatik seçilir ◦ views/layouts/admins/application.html.haml ◦ views/layouts/admins.html.haml • layout' ları controller' lardan kendiniz de seçebilirsiniz ◦ layout "main" ◦ layout :blog, :only => [:index, :blog] • layout' ları render yöntemi ile seçebilirsiniz ◦ render :layout => "old"
  5. Rails 3.2.x View Katmanı View katmanı ve varsayılan render yöntemleri

    Controller action' lardan view katmanına geçişi sağlar. Bir şablon, bir html yada hiç bir şeyi render' leyebilirsiniz. JSON, XML çıktıları üretebilir ve durum kodlarını belirleyebilirsiniz. http://guides.rubyonrails.org/layouts_and_rendering.html#using-render
  6. Rails 3.2.x View Katmanı Asset Tag Helpers (Birkaç tane) •

    redirect_to ◦ redirect_to photos_url ◦ redirect_to :back --> javascript history back ◦ redirect_to photos_path, :status => 301 • javascript_include_tag ◦ javascript_include_tag "main", "columns" ◦ javascript_include_tag :all, :recursive => true ◦ javascript_include_tag "http://example.com/main.js" • stylesheet_link_tag ◦ stylesheet_link_tag "main_print", :media => "print" • image_tag ◦ image_tag "btn.gif", :width => 30, :class => "btn"
  7. Rails 3.2.x View Katmanı Partials (Kısmi şablonlar) Şablonlarınızı veya view

    dosyalarınızı daha yönetilebilir küçük parçacıklara ayırmanızı sağlar. İstediğiniz parçacıgı istediğiniz yerde ve zamanda kullana bilirsiniz ! http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials
  8. Rails 3.2.x Asset Pipeline • Nedir ? Ne işe yarar

    ? • Varlıklarınızı (assets) dinamik olarak işler ve yönetir ◦ Tüm varlıkları birleştirir ve organize eder ◦ MD5 parmak izi ile önbellek yönetimi yapar ◦ Boşlukları alır, yorum satırlarını siler ve sıkıştırır ◦ Ön-derleyicileri destekler: js için CoffeeScript, css için scss ve sass. Varsayılan olarak ERB içerir. • Sprockets (disliler) ve varlıkların organize edilmesi ◦ app/assets: uygulamanızdaki varlıklar ◦ lib/assets: tekrar kullanılabilir kütüphaneleriniz ◦ vendor/assets: 3.parti varlıklar, örn: jQuery
  9. Rails 3.2.x Asset Pipeline Nedir ? Ne işe yarar ?

    Asset pipeline (varlık boru hattı) JavaScript ve CSS varlıklarını birleştirmeyi ve sıkıştırmayı sağlar. Ayrıca ön derleyici diller olan CoffeeScript, Sass' ı destekler. Varlıklarınıza ERB yazma yeteneği kazandırır.
  10. Rails 3.2.x Asset Pipeline • Zincirleme olarak derleyicileri ekler ◦

    application.js.coffee ◦ layout.css.saas • ERB desteği ◦ cart.js.erb
  11. HAML Nedir ? HTML Abstraction Markup Language HTML kodlarınızı kısaltan

    ve daha az kod yazmanızı sağlayan bir teknolojidir. HAML ile HTML'deki tag'ları açıp kapatmanız gerekmez. Yeni satıra atlayarak veya bir tab içeri-dışarı giderek HTML sayfanızı şekillendirirsiniz. • 2006 dan buyana geliştiriliyor • Ruby on Rails ile çalışıyor (Gem) • Ruby dışındaki diller için de port'ları mevcut • Indent (Girinti) odaklı • Üretebileceği çıktı özelleştirilebilir (Sıkşıtırılmış)
  12. Sass Nedir ? Sass, Ruby dilini ve yalınlığını sevenler için

    benzer bir yaklaşımla CSS ve CSS3 stil kodları yazmanızı ve bunları dinamik olarak derlemenizi sağlayan bir ruby gem’ idir. Adresi ise http://sass-lang.com/ ’dır. Genel hatlarıyla özetlemek gerekirse; CSS’ de bulunmayan değişken (variables) tanımlama, iç içe (nesting) olarak hazırlanmış seçiciler oluşturmak, css kodlarınızı yeniden kullanılabilir ve parametrik olarak çalışabilen parçalara bölmek (mixin), bir css tanımlamasının başka bir css tanımlamasından miras almasını sağlayan seçici kalıtımı (selector inheritance) yapmak gibi işlevleri sayılabilir.
  13. Sass Nedir ? Neler var ? • Değişkenler • Mixins

    (??) • Partials (Kısım, parça) • Operator ve fonksiyonlar (colorize, darken) • Kullanıcı tanımlı fonksiyonlar • Scss veya sass Daha ne istiyoruz ki :) Alternatif • LESS - http://lesscss.org/
  14. Compass Nedir ? Compass ise sass’ı kapsayan ve bünyesinde onlarca

    yeni özellik barındıran bir çeşit sass temelli CSS – CSS3 uygulama çatısıdır diyebiliriz. http://compass-style.org/ adresinden erişebilirsiniz. Compass sayesinde Sass’ı daha kapsamlı bir şekilde kullanabiliyorsunuz. Ayrıca compass bünyesinde Blueprint Css Framework‘u de barındırdığından sadece basit css dosyalarının derlemesinden öte uygulamanızın tamamına hükmetmenize olanak sağlıyor. Bunların yanında, compass kullanırsanız web projenizi stil katmanı daha da yönetilebilir ve sürdürülebilir olacak, CSS3 işlevselliklerinden faydalanmanız daha da kolaylaşacaktır.
  15. CoffeeScript Nedir ? CoffieScript sizi js de bulunan noktalı virgül

    ";", süslü parantez "{}" gibi operatörlerden kurtarır ve tablar kullanarak daha hızlı bir şekilde, hatasız javascript kodları üretmenizi sağlar. CoffeeScript bi js ön-derleyicisidir. • Bir Javascript kütüphanesi değildir • Birçok javascript kütüphanesi ile kullanabilirsiniz • Kodunuzu JSLint (The JavaScript Code Quality Tool) servisi ile uyumlu bir şekild derler • Rails 3.1 ile birlikte varsayılan olarak kullanılmaya başlanmıştır.
  16. Twitter Bootstrap Nedir ? Twitter bootstrap, twitter firması tarafından geliştirilen,

    açık kaynaklı bir front-end (ön-yüz) "best-practices" lerin bütünüdür. http://twitter. github.com/bootstrap • Global Stiller • Grid Sistem (&Fluid) • Responsive Design • Sass & Less • Özelleştirilebilir
  17. Bazı GEM 'ler sass-rails https://github.com/rails/sass-rails coffee-rails https://github.com/rails/coffee-rails haml-rails https://github.com/indirect/haml-rails compass-rails

    https://github. com/Compass/compass-rails bootstrap-saas https://github.com/thomas- mcdonald/bootstrap-sass www.rubygems.org https://www.ruby-toolbox.com/
  18. Soru - Cevap Diğer sorularınız için ulaşım bilgileri • @toziserikan

    • mailto: [email protected] Bloglar • http://www.tayfunoziserikan.com • http://tayfunoziserikan.dudupress.com • http://www.gelistiricigunlugu.com