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

Transcript

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)
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"
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