Bower Nedir ? Nasıl Kullanılır ?
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/
[3] https://github.com/isaacs/node-semver/
[4] Bower Spec
Tekrar görüşmek dileğiyle.
2 Comments
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 ?
Bunlar farklı farklı node modülleri/paketleri. Bower ile aynı işi görmezler.