Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

İç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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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"

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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"

Slide 11

Slide 11 text

Rails 3.2.x View Katmanı yield http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Rails 3.2.x Asset Pipeline ● Zincirleme olarak derleyicileri ekler ○ application.js.coffee ○ layout.css.saas ● ERB desteği ○ cart.js.erb

Slide 17

Slide 17 text

Rails 3.2.x Asset Pipeline

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Rails 3.2.x Asset Pipeline DEVELOPMENT

Slide 20

Slide 20 text

Rails 3.2.x Asset Pipeline PRODUCTION

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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ış)

Slide 23

Slide 23 text

HAML Nedir ?

Slide 24

Slide 24 text

HAML Nedir ? $ gem install haml $ haml input.haml output.html

Slide 25

Slide 25 text

HAML Nedir ?

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Sass Nedir ?

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

Sass Nedir ?

Slide 30

Slide 30 text

Sass Nedir ?

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

Compass Nedir ? $ gem install compass $ compass create

Slide 33

Slide 33 text

Compass Nedir ? $ compass watch

Slide 34

Slide 34 text

Compass Nedir ? CSS SPRITE Tekniği

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

CoffeeScript Nedir ?

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Teşekkürler Tayfun Öziş ERİKAN, CTO Lab2023 Bilişim Teknolojileri AŞ [email protected] www.lab2023.com - www.tayfunoziserikan.com