Webstorm | Bayram Üçüncü

Webstorm smartest javascript IDE

1 Eki

Jetbrains ürünleri bir geliştiricinin alet çantasında olması gereken başlıca araçlardandır. Bu yazıda frontend geliştirme aracı olan Webstorm ürününden bahsedeceğiz.

Webstorm sloganı “smartest javascript IDE” yani “akıllı javascript IDE” şeklindedir. Bu sloganın hakkını verdiği kanısındayım. Javascript dili özelliklerini tanıması ve birçok javascript framework için intellisense özelliği barındırması, kodlarken bize büyük bir kolaylık sağlamaktadır.

Webstorm ile client-side tarafında Javascript, CSS ve HTML gibi diller desteklenirken, server-side tarafında Node.js dili ile geliştirme yapabilirsiniz.

Neden Kullanmalıyız?

Akıllı Geliştirme Ortamı Sunar: Kodlama yaparken projenizi tanır, anlar ve bize daha rahat bir geliştirme ortamı oluşturur. Örneğin JQuery, Angularjs veya bootstap kullanıyorsak IDE bu framework’leri otomatik olarak tanıyarak bize yardımcı olur. Çalışma esnasında hata algılama, refactoring ihtiyacı olan kod bölümlerini gösterme ve gelişmiş navigasyon özellikleri sayesinde kaliteli kod üretmemizi sağlar.
En Son Teknolojileri Destekler:En popüler teknolojileri destekler. JQuery, Angularjs, ECMAscript 6 gibi teknolojilere destek verir.
Bütünleştirici ve Tamamlayıcı Destekler: Proje geliştirirken ihtiyaç duyulan Debugger, VCS(versiyon kontrol sistemleri), Terminal, Deployment gibi özellikleri ve geniş eklenti deposu sayesinde başka bir ürüne ihtiyaç duymadan iş akışlarını düzgün bir şekilde tamamlayabilirsiniz.
Platform Genişliği: Windows, Linux ve Mac OS gibi işletim sistemlerinde tek bir lisans ile çalışma imkanı sunar.

Webstorm Özellikleri Nelerdir?

Code Completion: Projenizi analiz ederek fonksiyonlar, metodlar, modüller, değişkenler ve sınıflar için en iyi şekilde bütünleşik bir tecrübe sunar.

Navigation: Projeniz ne kadar büyü olursa olsun bir değişkenin nerede tanımlandığını, ToDo listelerinizi ve dosyalarınızı kolayca bulabilirsiniz. Değişkenleri, sınıfları ve fonksiyonları arayabilir tanımlandıkları yerlere ulaşabilirsiniz.

Code Quality: Kod kalitesini arttırmaya yönelik kod iyileştirici uyarılar verir. Kodun yeniden yapılandırması gereken noktalarda uyarılar verir.

Code Style: Kullandığınız programlama diline göre kod biçimlendirmesi yapar.

code_style_preferences@2x

Multiple Selection: Birden fazla seçim özelliği ile düzenleme işlemlerinin kolayca yapılmasını sağlar.

Debugging Javascript and Node.js: Javascript ve Node.js geliştirmeleri sırasında Google Chrome için debugging imkanı sunar.
Unit Testing: Javascript ve Node.js birim testlerini yazmayı destekler. Karma test çalıştırma aracı ile Javascript testlerinizi ve Mocha ile Node.js testlerinizi çalıştırabilirsiniz.

Grunt and Gulp: Aynı arayüzde konsola ihtiyaç duymadan Grunt ve Gulp görevlerini çalıştırma imkanı sunar.

npm: node modüllerini kolayca yönetebilirsiniz.
Code Quality Tools: Webstorm kendi kod kontrolleri dışında JSHint, ESLint gibi ekstra araçları da kullanarak kod kalitesini kontrol edebilirsiniz.
vcs: Git, SVN, Mercurial ve Perforce gibi birçok versiyon kontrol sistemi ile Webstorm arayüzünden çalışabilirsiniz.

Built in terminal: Kendi terminal penceresi sayesinde işletim sisteminin terminal penceresine ihtiyaç duymadan çalışabilirsiniz.

Fiyat performans açısından oldukça üstün bir IDE deneyimi sunan bu üründür. Öğrenciler için ücretsiz olarak sunulmaktadır.

YUIcompressor kullanarak Webstorm üzerinde javascript minification

25 Oca

Bu yazımızda kullanıcı arayüzü geliştirme(frontend development) sürecinde uygulanan ve performans arttırma yöntemi olan dosya içeriklerinin azaltılması işlemi üzerinde duracağız. Bu işlem yabancı kaynaklarda minification olarak geçer. Javascript minification ya da css minification olarak karşılaşabiliriz.

Kodun okunabilirliğini arttırabilmek içi geliştiriciler olarak Javascript kodlarını düzgün biçimlendirerek ve anlamlı isimlendirmeler kullanarak yazarız. Değişken isimleri anlaşılır ve mümkün olduğunca uzun olur. Her satıra ayrı tanımlamalar yapılır. Kodda karmaşa oluşmaması için ne gerekiyorsa yapılır. Bu durumda dosyada boşluk karakterlerin sayısı ve değişken isimlendirmelerinden dolayı gereksiz karakter sayısı artar. Tabi gereksiz karakter kavramı kodu yorumlayan mekanizmaya göredir bize göre değil. Hal böyle iken dosya boyutu da doğal olarak büyür. Hele ki modüler yapıda bir uygulama geliştiriyorsak modüller arttıkça kodlar da artacaktır. Nihayetinde uygulamamızın yüklenmesi uzun sürecektir. Bu gibi durumlarda dosyadaki gereksiz boşluklar ve uzun isimlendirmelerin küçültülerek dosya boyutunun azaltılması gerekmektedir.

Örneğin aşağıdaki javascript kodu açık ve anlaşılır şekilde yazılmıştır.

var getProduct = function(productCode){

    var productList = GetProductFromService(productCode);

    return productList;

}

Bu kodun küçültülmüş hali şu şekilde olacaktır:

var getProduct=function(e){var t=GetProductFromService(e);return t}

Bu şekilde yüzlerce satırlık kodlar tek satır haline getirilir. Ağ üzerinden indirilen dosyaların boyutu küçüleceği için kullanıcı tarafına kolayca yüklenebilir.

Javascript dosyalarının küçültülmüş halleri gelenek olarak dosyaadi.min.js şeklinde adlandırılır. Yani dosya adında min ifadesini görünce dosyanın minimize edilmiş hali olduğunu anlayabiliriz.

Javascript dosya boyutlarının küçültülmesi işlemini manuel olarak yapmak çok zor bir işlemdir. Bu işlemin otomatik olarak yapılması gerekmektedir. Geliştirme yaptığımız IDE özelliklerinde minification özelliğinin olması bize avantaj sağlar. Ancak piyasada bu işlemi yapan araçlar da mevcuttur. Bu yazı da YUIcompressor aracı ile dosya küçültme işlemini gerçekleştirmeye çalışacağız. Geliştirme ortamı olarak ise Webstorm kullanılmıştır.

YUIcompressor yüklemek için nodejs komutunu kullanıyoruz. Yükleme komutu şu şekildedir:

npm install -g yuicompressor

Webstorm eklentilerinden File Watcher yüklü olması gerekmektedir. Bu eklenti javascript dosyalarımızın takibini yaparak otomatik olarak *.min dosyalarını oluşturacaktır.

Daha önce yüklediğimiz YUIcompressor aracını Webstorm tarafına tanıtmak işlemi aşağıdaki ekran çıktısında gösterilmiştir. Program kısmında

C:\Users\{user}\AppData\Roaming\npm\yuicompressor.cmd şeklinde dosya seçilmelidir.

Bu işlemden sonra javascript dosyalarımız YUIcompressor tarafından takibe alınmıştır. Herhangi bir javascript dosyasında işlem yapıp kaydettiğimizde aşağıdaki gibi bir görüntü oluşacaktır.

Görüldüğü üzere otomatik olarak min dosyalarımın oluşturulmaktadır. Artık HTML dosyalarımızda kullanabiliriz.