• Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim
KodEdu
  • Anasayfa
  • Eğitimler
    • JavaScript Eğitimi
    • Angular 2 Eğitimi
    • React.js Eğitimi
    • Java 8 Eğitimi
    • Java EE 7 Eğitimi
    • Spring Framework Eğitimi
    • Git Eğitimi
  • Online Eğitimler
    • Online React.js Eğitimi
    • Online Angular 2 Eğitimi
    • Online Spring Boot Eğitimi
  • Referanslar
  • Hakkında
  • İletişim

Bower Nedir ? Nasıl Kullanılır ?

  • Posted by Kodedu
  • Categories backend, Genel, HTML & CSS, Uncategorized, Yazılar, Yazılım
  • Date 10 Mayıs 2014

Bower Twitter tarafından geliştirilen, Front-end dünyasına hitap eden bir paket yöneticisidir. Web uygulamaları geliştirirken hepimiz Javascript ve CSS kütüphanelerine, framework’lerine yani kısacası bağımlılıklara ihtiyaç duymaktayız.

Örneğin projemizde Jquery kütüphanesine ihtiyaç duyuyoruz diyelim. Geleneksel yöntemlerde yapılan adımlar genel olarak şöyle işlemektedir.

  • Jquery sayfasına gidilir.
  • Download tuşuna basılır.
  • İndirilen zip ayıklanır.
  • Web sayfasının uygun dizinine kopyalanır.
  • <script> tagi içerisinde sayfanıza tanımlanır.

Ne kadar yıpratıcı değil mi? Tek bir Javascript bağımlılığı için 5 adım gerçekleştirdik. 5 bağımlılığa ihtiyaç duysadık eğer 5×5 adım işletiyor olacaktır. İşte bu süreç yazılım geliştiriciler için tam bir israf noktasıdır.

Peki Bower kullanırsak, sürecimiz nasıl olur?

  • İstediğin lokasyona git.
  • “bower install jquery” işlet.
  • <script> tagi içerisinde sayfana tanımla.

Bower ile yukarıda işletilen 5 adım, 3 adıma indirgenmiş olur. 1. ve 3. adım olmazsa olmaz adımlar olduğu için aslında tek bir adımda istenilen bağımlılık edinilmiş olur.

Diğer bir senaryo ise örneğin bir backbone uygulaması geliştiriyorsunuz diyelim. Backbone kütüphanesi Jquery ve Underscore kütüphanelerine bağımlıdır, bu sebeple Jquery ve Underscore bağımlılıklarını tek tek yüklemenize gerek yoktur. Çünkü Bower ile yüklediğiniz bağımlılığın varsa bağımlılıkları da otomatik olarak yüklenmiş olur.

Bower komutları

bower install <paket>

Örnek: bower install bootstrap

Bower ile yüklenen bağımlılıklar varsayılan olarak o anda bulunulan dizinde bower_components adında bir dizin oluşturur. Yüklenen tüm bağımlılıklar bu dizin içerisinde alt dizinler olarak tutulur. Bu haliyle istenilen bağımlılığın en son versiyonu yüklenmiş olmaktadır.

<paket> ifadesi yerine paketin adı yazılabileceği gibi versiyon kontrol sistemlerine ait URL adresi de yazılabilmektedir.

Örnek: bower install https://github.com/twbs/bootstrap.git

bower uninstall <paket>

Tanımlanan paketi sistemden siler.

bower search [<ifade>]

Tanımlanan ifadeye göre Bower sunucularından paket araması yapar ve en önceliklisine göre sıralı olarak listeler. Paket aramaları istenirse http://bower.io/search/ adresinden de yapılabilmektedir.

bower install <paket>#<versiyon>

Örnek: bower install jquery#1.9.1

Tanımlanan paket adı ve versiyonuna göre bağımlılık yüklemek için kullanılır.

Projenizi paketleyin

Her web projesinin kullandığı bağımlılıklar farklı olabilir veya Github üzerinde barındırdığınız kütüphaneyi Bower ekosistemine dahil etmek isteyebilirsiniz. İşte bu işlemler için projenizin paket tanımlayıcısı olması gerekmektedir. Bir bower paketinin kimliğini bower.json adındaki JSON dosyası oluşturur. Bu dosya içerisinde, projenin yazarı, versiyon bilgisi, hangi adreste versiyonladığı, lisans bilgileri ve bağımlılıklar gibi tanımlamalar yer almaktadır.

Örnek bir bower.json dosyası

bower.json front-end bağımlılıklarınızın yüklendiği dizinde bulunmalıdır.


{
  "name": "backbone-app",
  "version": "1.2.3",
  "authors": ["Rahman Usta"],
  "description": "Backbone App",
  "license": "MIT",
  "homepage": "https://kodedu.com/bakcone-app.git",
  "dependencies": {
    "jquery": "*",
    "foundation": "~5.0.0",
	"backbone":">=1.0.0 <1.1.2",
	"es5-shim":"=3.0.1"
  }
}

Yukarıda örnek bir Bower paket dosyası görüyorsunuz. Şimdi bu dosyayı herhangi bir dosya sistemi dizinine ekleyin ve bower install komutunu işletin. “dependencies” elemanı içerisinde tanımlı bağımlılıkların bower_components dizinine kümelendiğini göreceksiniz.

Bower paket yöneticisi bağımlılık yönetiminde SEMVER (Semantic Versioning) yapısını kullanmaktadır. Burada sizlerle ”dependencies” elemanında tanımlı bağımlılıklara dair SEMVER versiyonlarının neye karşılık geldiğini açıklama ihtiyacı duyuyorum

*

Herhangi bir versiyon, eğer diğer bağımlılıklarla çakışmıyorsa en güncel versiyonu yükler.

~5.0.0

5.0.0 ve yukarısı ile başlayan herhangi bir bağımlılık Bower tarafından yüklenir. 6.0.0’a kadar.

>=1.0.0 <1.1.2

1.0.0 ve yukarısı ve 1.1.2’e kadar olan bir versiyon Bower ile yüklenir.

=3.0.1

3.0.1 versiyonlu bağımlılığı Bower yükler. Diğer versiyonlara bulaşmaz.

Bower ile SEMVER kullanımında, aralıklı tanımlamalar, herhangi bir versiyon gibi ayyukta tanımlamalar, o anki bağımlılığın diğer bir bağımlılık tarafından ihtiyaç duyulduğunda önem kazanır.

Örneğin Backbone kütüphanesi Jquery 1.9.1 ve 2.0.0 arası versiyonlarından herhangi biriyle uyumlu çalışıyor farzedelim. Bu gibi durumlarda aralıklı versiyon tanımlamak önem arzetmektedir. Herhangi bir versiyon çakışmasında Bower komut aracı sizi uyarmaktadır.

bower.json Nasıl oluşturulur.

bower.json dosyası manuel olarak elle oluşturulabilir veya biryerden kopyalama usulü ile edinilebilir fakat, Bower komut aracı ile bower.json dosyası süreçvari şekilde kolaylıkla oluşturulabilir. Örneğin çalışma dizininizde “bower init” komutunu işletirseniz adım adım ilerleyerek bower.json dosyanızı oluşturabilirsiniz.

Bower kullanmaya nasıl başlarım?

  • Bower git versiyon sistemini kullanır bu yüzden sisteminizde Git bulunmalıdır.
  • Node.js yüklü olmalıdır, çünkü Bower aracı Node.js ortamını kullanan bir uygulamadır.
  • Son adım olarak “npm install –g bower” komutu ile, sisteminize global olarak Bower yüklenmiş olur, rahatlıkla kullanabilirsiniz.

Farklı teknolojilere karşı gösterilen Direnç

“Şimdi sistemime Node.js mi yükleyeceğim yaa” bu sözü duyar gibiyim =)

Farklı dil ekosistemleriyle çalışan arkadaşlar, diğer dil ekosistemlerine dair araçları yüklemeye ve kullanmaya karşı direnç gösterebilir. Bu aslında insani bir tepkidir. Fakat, zaman zaman gerekli gereksiz uygulamaları sistemimize kurabiliyoruz, buna bir direnç olmayabiliyor ama karşımıza başka bir “dil” girince direnç gösterebiliyoruz. Fakat, Bower benzeri araçlar uygulama geliştirme sürecimize inanılmaz faydalar sağlıyor, bu sebeple bu direnci kırmakta fayda var. Hatta Node.js ile birlikte, Ruby, Python gibi dillerine dair geliştirme araçlarını sistemimize kurmak zaman zaman ihtiyaç olabiliyor.

Bower aracı tüm dil ekosistemlerine hitap eder, Javacısı, Phpcisi, .Netcisi rahatlıkla kullanabilir ve bence kullanmalıdır da.

Referanslar

[1] http://bower.io/

[2] http://semver.org/

[3] https://github.com/isaacs/node-semver/

[4] Bower Spec

 

Tekrar görüşmek dileğiyle.

Tag:Bower, frontend, git, node.js, twitter

  • Share:
author avatar
Kodedu

Previous post

JPA 2.1 Type Converter
10 Mayıs 2014

Next post

Naïve Bayes Sınıflandırma Algoritması
28 Mayıs 2014

You may also like

api-logo
Swagger Nedir? Neden kullanılır?
10 Ekim, 2018
spring-cli-logo
Spring CLI ile Spring Boot Projeleri Hazırlamak
21 Ağustos, 2017
eureka_architecture
Spring Cloud Netflix ve Eureka Service Discovery
3 Temmuz, 2017

    2 Comments

  1. Yunus
    11 Temmuz 2015
    Cevapla

    Yazı için teşekkürler. Çok açıklayıcı ve kafamdaki soru işaretlerini giderici oldu. Fakat anlamakta zorlandığım bir konu var.https://www.npmjs.com/#explicit buradaki listede bower da var gulp da var ve npm de var. Yani sormak istediğim https://www.npmjs.com/#explicit bu listede bulunan her -araç diyeyim- bower ile aynı işi mi görüyor ? Eğer aynı işi görüyorsa bower benzeri bir araç söyleyebilir misiniz ?

    • Rahman Usta
      12 Temmuz 2015
      Cevapla

      Bunlar farklı farklı node modülleri/paketleri. Bower ile aynı işi görmezler.

Leave A Reply Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta listesine kayıt olun!






Gözde yazılar

Hafif bir Kod Editörü – Brackets
30Haz2012
Java’da Record’lar
27Oca2020
Reflection ile Dependency Injection nasıl gerçekleştirilir?
04Eyl2012
Integration of Spring MVC and Mustache
02Ağu2013

Son Yazılar

  • Java’da Record’lar 27 Ocak 2020
  • Swagger Nedir? Neden kullanılır? 10 Ekim 2018
  • Spring CLI ile Spring Boot Projeleri Hazırlamak 21 Ağustos 2017
  • Spring Cloud Netflix ve Eureka Service Discovery 3 Temmuz 2017
  • Online React.js Eğitimi ardından (15-25 Mayıs 2017) 31 Mayıs 2017

Son Yorumlar

  • Coupling ve Cohesion Kavramları Nedir? için Hilal
  • Naïve Bayes Sınıflandırma Algoritması için Rahman Usta
  • Naïve Bayes Sınıflandırma Algoritması için Mete
  • YAML Nedir? Neden YAML Kullanmalıyız? için kara
  • JWT (JSON Web Tokens) Nedir? Ne işe yarar? için Furkan

Get Java Software

Arşivler

Bizi takip edin

React.js Eğitimi Başlıyor
11-22 Eylül, 2017
Eğitmen
Rahman Usta
İletişim

merhaba@kodedu.com

  • Hakkında
  • Gizlilik Politikası
  • İletişim
  • Referanslar
Kodedu Bilişim Danışmanlık
Cemil Meriç mah. Çelebi sok.
No:16/3 Ümraniye/İSTANBUL
Tel: 0850 885 38 65
Alemdağ V.D.: 8960484815

KODEDU © Tüm hakları saklıdır.