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

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

9c55af85fdee9df09c5fa7dd3d1945b0?s=128

Tayfun (Öziş) Erikan

November 23, 2013
Tweet

Transcript

  1. None
  2. Derleyiciler (Compilers) asla kötü kod üretmezler. GELİŞTİRİCİLER KÖTÜ VEYA YANLIŞ

    KODLAR ÜRETİRLER.
  3. 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.
  4. İç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
  5. 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)
  6. None
  7. 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"
  8. None
  9. 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
  10. 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"
  11. Rails 3.2.x View Katmanı yield http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield

  12. Rails 3.2.x View Katmanı content_for http://guides.rubyonrails.org/layouts_and_rendering.html#using-the- content_for-method

  13. 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
  14. 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
  15. 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.
  16. Rails 3.2.x Asset Pipeline • Zincirleme olarak derleyicileri ekler ◦

    application.js.coffee ◦ layout.css.saas • ERB desteği ◦ cart.js.erb
  17. Rails 3.2.x Asset Pipeline

  18. Rails 3.2.x Asset Pipeline https://github.com/lab2023/dudupress/blob/develop/app/assets/javascripts/application.js

  19. Rails 3.2.x Asset Pipeline DEVELOPMENT

  20. Rails 3.2.x Asset Pipeline PRODUCTION

  21. Rails 3.2.x Asset Pipeline https://github.com/lab2023/dudupress/blob/develop/app/assets/stylesheets/application.css.sass

  22. 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ış)
  23. HAML Nedir ?

  24. HAML Nedir ? $ gem install haml $ haml input.haml

    output.html
  25. HAML Nedir ?

  26. 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.
  27. Sass Nedir ?

  28. 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/
  29. Sass Nedir ?

  30. Sass Nedir ?

  31. 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.
  32. Compass Nedir ? $ gem install compass $ compass create

    <myproject>
  33. Compass Nedir ? $ compass watch

  34. Compass Nedir ? CSS SPRITE Tekniği

  35. 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.
  36. CoffeeScript Nedir ?

  37. 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
  38. 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/
  39. Soru - Cevap Diğer sorularınız için ulaşım bilgileri • @toziserikan

    • mailto: tayfun.ozis.erikan@lab2023.com Bloglar • http://www.tayfunoziserikan.com • http://tayfunoziserikan.dudupress.com • http://www.gelistiricigunlugu.com
  40. Teşekkürler Tayfun Öziş ERİKAN, CTO Lab2023 Bilişim Teknolojileri AŞ tayfun.ozis.erikan@lab2023.com

    www.lab2023.com - www.tayfunoziserikan.com