Backbone.js Geliştiricilerinin Yaptığı En Yaygın 8 Hata

Backbone.js, yapılandırılmış bir web uygulamasının ön ucunu oluşturmak için kullanabileceğiniz basit bir veri yapıları ve özellikler kümesi sağlamayı amaçlayan minimalist bir çerçevedir. Kutunun dışında, Backbone.js bileşenleri, arka uçta modeller ve görünümlerle çalışırken aşina olabileceğiniz sezgisel bir ortam sağlar. Backbone.js'deki modeller ve koleksiyonlar basittir, ancak bunları REST JSON API'leriyle kolayca entegre etme seçeneği gibi bazı çok kullanışlı özelliklerle birlikte gelirler. Ama aynı zamanda hemen hemen her türlü pratik kullanıma adapte edilebilecek kadar esnektirler.

Bu Backbone.js eğitiminde, Backbone.js öğrenirken ilk denemelerini yapan serbest geliştiriciler tarafından sıklıkla yapılan bazı yaygın hatalara ve bunlardan kaçınmanın yollarına göz atacağız.

Hata 1: Backbone.js İşlevselliklerinin Cephaneliğini Yok Saymak

Backbone.js minimalist bir çerçeve olabilir, ancak (Underscore.js ile birlikte), modern bir web uygulaması geliştirirken ortaya çıkan en temel ve bazı kritik ihtiyaçları kolayca karşılayabilecek çok sayıda özellik ve işlevsellik sağlar. Acemi geliştiricilerin sıklıkla yaptığı yaygın bir hata, Backbone.js'yi web için başka bir MVC benzeri istemci çerçevesi olarak almalarıdır. Bu bölüm çok bariz bir şeyden bahsetmesine rağmen, konu Backbone.js olduğunda çerçeveyi tam olarak araştırmamak gerçekten kritik bir hatadır. Çerçevenin boyutu küçük olabilir, ancak bu, onu bu kapsamlı keşif için harika bir aday yapan şeydir. Özellikle küçük ve güzel açıklamalı kaynak kodu.

Backbone.js, web uygulamanıza yararlanabileceği yapıyı vermek için gereken minimum değeri sağlar. Genişletilebilirliği ve çok sayıda eklentisi ile Backbone.js'yi öğrenmek, bazı harika web uygulamaları oluşturmak için kullanılabilir. Backbone.js'nin en belirgin özelliklerinden bazıları modeller, koleksiyonlar ve görünümler aracılığıyla ortaya çıkar. Yönlendirici ve geçmiş bileşenleri, istemci tarafı yönlendirmesini desteklemek için basit ama zarif bir mekanizma sağlar. Underscore.js, Backbone.js'nin bir bağımlılığı olsa da, hem modeller hem de koleksiyonlar JavaScript için bu harika yardımcı kemerden çok yararlandığından ve aynı zamanda emrinizde olduğundan, çerçeveye oldukça iyi entegre edilmiştir.

Çerçevenin kaynak kodu o kadar iyi yazılmış ve açıklamalı ki, muhtemelen bir fincan kahve içerken hepsini okuyabilir. Yeni başlayanlar, çerçevenin dahili olarak nasıl çalıştığı hakkında çok şey öğrenebildikleri ve JavaScript söz konusu olduğunda düzgün bir dizi en iyi uygulamayı benimseyebildikleri için kaynak açıklamaları okumaktan çok yararlanabilirler.

Hata #2: Keyfi Olaylara Doğrudan Tepkide DOM'yi Değiştirme

Backbone.js'yi ilk öğrenmeye başladığımızda yapmaya meyilli olduğumuz bir şey, Backbone.js tarafından önerilen şeyleri yapmamaktır. Örneğin, basit web sitelerinde jQuery ile yaptığımız gibi olayları ele alma ve güncellemeleri görüntüleme eğilimindeyiz. Backbone.js, endişelerin uygun şekilde ayrılması yoluyla web uygulamanıza katı bir yapı kazandırmayı amaçlamaktadır. Backbone.js ile genellikle yapmaya meyilli olduğumuz şey, keyfi DOM olaylarına yanıt olarak bir görünümü güncellemektir:

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function(event) { $(event.target).toggleClass('btn-play btn-pause') } }, // ... })

Bu, ne pahasına olursa olsun kaçınılması gereken bir şeydir. Bunun mantıklı olabileceği belirsiz örnekler bulmak mümkün olabilir; ancak çoğu durumda, bunu yapmanın çok daha iyi yolları vardır. Aslında, burada örnekleyebileceğim bir yol, modeli müzik çaların durumunu izlemek için kullanmak ve bu durum bilgisini düğmeyi (veya daha özel olarak sınıf adlarını) oluşturmak için kullanmaktır:

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function(event) { this.model.set('playing', !this.model.get('playing')) } }, initialize: function() { this.listenTo(this.model, 'change', this.render) this.render() }, // ... })

 <button class=”btn btn-<%- playing ? 'pause' : 'play' %>”></button>

Olay işleyicilerinden doğrudan DOM manipülasyonunun mantıklı olacağı nadir durumlar olabilir, ancak olay işleyicilerden gelen karmaşık DOM manipülasyonlarını yönetmenin maliyeti neredeyse hiçbir zaman buna değmez. Bu, Backbone.js'nin çözmeyi amaçladığı bir şeydir. Backbone.js'yi böyle bir şey yapmak için kullanmak bir hatadır.

Hata #3: Oluşturma Maliyetini Küçümseme

Backbone.js, isteğe bağlı olarak veya olaylara yanıt olarak DOM'yi oluşturmayı ve yeniden oluşturmayı çok kolaylaştırdığından, bunun web uygulamasının genel performansı üzerinde ne kadar etki yarattığını genellikle gözden kaçırırız. Görüşlerimize göre render yöntemini bozmanın birçok yolu var. Modern web tarayıcıları yüksek performanslı yazılım parçaları haline geldiğinden, bu genellikle çok fazla görünmeyebilir. Ancak web uygulaması büyüdükçe ve uğraştığı veri miktarı arttıkça, performanstaki düşüş giderek daha belirgin hale geliyor.

Bunu, küçük bir model koleksiyonuyla başladığımız ve bunu bir liste görünümüne dönüştürdüğümüz, yapmacık bir örnek aracılığıyla eylem halinde görebiliriz:

 var AudioPlayerPlaylist = Backbone.View.extend({ template: _.template('<ul> <% _.each(musics, function(m) { %> <li><%- m.title %></li> <% }) %> </ul>'), initialize: function() { this.listenTo(this.collection, 'add', this.render) }, // ... })

Bu Backbone.js örneğinde, koleksiyona bir model eklendiğinde yeniden render alıyoruz. Bu iyi çalışacak. Ancak, listeye her model eklendiğinde “add” olayı tetiklendiğinden, sunucudan büyük bir model listesi getirdiğinizi hayal edin. Oluşturma yöntemi, sunucudan gelen yanıttaki her model için bir kez olmak üzere art arda birden çok kez çağrılır. Yeterince büyük bir model, uygulamanızın kekelemesi ve kullanıcı deneyimini mahvetmesi için yeterli olacaktır. Bazen, oluşturulan görünümün karmaşıklığına bağlı olarak küçük bir yanıt yeterlidir.

Bunun çok hızlı bir çözümü, eklenen her bir model için render yöntemini çağırmamaktır. Bu gibi durumlarda, modeller toplu olarak eklenecektir ve render yönteminin yalnızca çağrıldığında ancak belirli bir süre içinde yeniden çağrılmadığı zaman ateşlenmesi için bir şeyler yapabilirsiniz. Backbone.js'nin bağımlılığı Underscore.js bunun için kullanışlı bir yardımcı program işleviyle birlikte gelir: “_.debounce”. Bundan yararlanmanız için gereken tek şey, olay bağlama JavaScript satırını şununla değiştirmek:

 this.listenTo(this.collection, 'add', _.debounce(_.bind(this.render), 128))

Bu, "add" olayı her gerçekleştiğinde olay geri çağrısının başlatılmasına neden olur, ancak render yöntemini gerçekten çağırmadan önce son olaydan itibaren 128 milisaniye bekler.

Çoğu durumda, bu, hızlı düzeltme benzeri bir çözüm olarak kabul edilecektir. Aslında, render thrashing'den kaçınmanın daha uygun yolları vardır. Trello'nun arkasındaki geliştiriciler, bir keresinde Backbone.js'yi kullanırken oluşturma performansını iyileştirme konusundaki deneyimlerini ve yaklaşımlarını tartışan bir blog yazısı yazmıştı.

Hata #4: Olay Dinleyicilerini Kullanımlarının Ötesinde Bırakmak

Kullanılmayan olay dinleyicilerini bağlı bırakmak, muhtemelen hangi JavaScript çerçevesini kullanırsanız kullanın veya herhangi bir tane kullanırsanız gerçekleşebilecek bir şeydir. Backbone.js bu sorunu önlemeyi kolaylaştırsa da, web uygulamanızda kolay bellek sızıntıları için potansiyel boşluklar bırakmak kesinlikle bir hatadır. Backbone.js'nin "Etkinlik" bileşeni kesinlikle oldukça düzgün bir uygulamadır. JavaScript nesnelerinin olaya dayalı özellikleri kolayca uygulamasını sağlar. Görünümler, olay tüketimimizin çoğunun gerçekleştiği yer olduğundan, bu hatayı orada yapmak kolaydır:

 var AudioPlayerControl = Backbone.View.extend({ initialize: function() { this.model.on('change', _.bind(this.render, this)) // ... }, // ... })

Bu kod parçacığındaki olay bağlama satırı, ilk örnektekinden çok farklı değil. Burada yaptığımız tek şey, “this.listenTo(this.model, …)” öğesini “this.model.on(…)” olarak değiştirmek. Diğer bazı JavaScript çerçeveleri ve kitaplıklarıyla olan deneyimlerimizden yola çıkarak olay bağlama için ".on()" çağrısına çok alıştığımız için, Backbone.js'yi kullanmaya başladığımızda genellikle bağlamak için ".on()" çağrılarını kullanma eğilimindeyiz. Etkinlikler. Bu, yalnızca artık gerekli olmadıklarında olay işleyicilerin bağlantısını kaldırmak için “.off()” çağırma zahmetinde bulunmasaydık iyi olurdu. Ancak bunu nadiren yaparız ve sonuçta bir bellek sızıntısı kaynağı olur.

Backbone.js, bu sorunu çözmenin basit bir yolunu sunar. “object.listenTo()” yönteminin kullanılmasıyla olur. Bu, “listenTo()” olarak adlandırdığınız nesnenin hangi olayları dinlediğini takip etmesini sağlar ve aynı zamanda tüm bu olayları bir kerede çözmeyi kolaylaştırır. Örneğin, görünümler, üzerinde "remove()" öğesini çağırdığınız anda tüm bağlı olayları dinlemeyi otomatik olarak durdurur.

Hata #5: Monolitik Görünümler Oluşturma

Bunu düşünürseniz, Backbone.js'nin minimalizmi, web uygulamanızın ön ucunu nasıl tasarlamak istediğiniz konusunda muazzam miktarda esneklik sağlar. Modeller, koleksiyonlar ve görünümler bileşenlerinizin yapı taşları olduğundan, bunları olabildiğince hafif ve spesifik tutmanız çok önemlidir. Çoğu zaman, kod açısından web uygulamanızın en ağır yönü haline gelen görünümlerdir. Ancak, uygulamanızın sunduğu her şeyi yapmaya çalışan devasa monolitik görünümler oluşturmamanız gerçekten önemlidir. Tüm mantığın içine tıkıştırıldığı dev bir "AudioPlayer" görünümü yapmak yerine, oynatma listesi görünümü, kontroller görünümü, görselleştirici görünümü vb. gibi bir dizi mantıksal görünüme bölün. Ne tür bir ayrıntı düzeyi sağlamak istediğiniz, muhtemelen oluşturmaya çalıştığınız uygulamaya bağlıdır.

Bunun nedeni, her görünümün belirli bir şey yaptığı ve doğru yaptığı ayrıntılı görünümlerde, Backbone.js ile bir web uygulaması geliştirmenin çok kolay olmasıdır. Kodunuz gelecekte daha sürdürülebilir ve genişletilmesi veya değiştirilmesi kolay olmalıdır. Sonra, aşırıya kaçtığınız diğer uç nokta var. Backbone.js görünümleri, bir model veya koleksiyonla çalışmanızı kolaylaştırmak için tasarlanmıştır ve bu muhtemelen uygulamanızı nasıl yapılandırmanız gerektiğine dair bir ipucu olarak çalışabilir. Ian Storm Taylor, blogunda, görüşleri uygularken muhtemelen aklınızda bulundurmanız gereken bazı değerli fikirler paylaştı.

Hata #6: Backbone.js'nin RESTful Olmayan API'lere Uyarlanabileceğini Fark Etmemek

Backbone.js, kutudan çıktığı haliyle JSON tabanlı RESTful API'lerle çalışır. Bunun için ihtiyacınız olan tek şey jQuery (ya da Zepto gibi onun yerine geçebilecek bir şey). Ancak Backbone.js son derece genişletilebilir. Aslında, Backbone.js, diğer API türlerini ve diğer tür kodlama formatlarını bile kullanacak şekilde uyarlanabilir.

Backbone.js'nin front-end ile back-end hizmetleri arasındaki etkileşimi ele alan bileşeni “Sync”tir. Bu bileşen, Backbone.js'nin API uç noktalarıyla etkileşim biçimini özelleştirmek için kolayca geçersiz kılabileceğiniz bir dizi öznitelik sunar. Aslında, varsayılan eşitleme mekanizmasını, arka uç hizmetleri yerine verileri kalıcı kılmak için localStorage kullanmak gibi en azından geleneksel olmayan bir şeyle değiştirmek de mümkündür.

Backbone.js'nin senkronizasyon davranışını özelleştirmeyi kolaylaştıran çok sayıda eklenti mevcuttur. Örneğin, Backbone.dualStorage adlı bir eklenti, verileri kalıcı kılmak için hem arka uç hizmetlerini hem de localStorage'ı kullanmanıza olanak tanır. Uygulamanız çevrimdışı olduğunda, eklenti, önbelleğe alınmış verilerden gelen istekleri sunmaya devam etmek ve daha sonra çevrimiçi olduğunuzda sunucuyla senkronize edebileceğiniz değişiklikleri izlemek için localStorage'ı kullanır.

Backbone.js'yi RESTful olacak ve onunla uyumlu olacak şekilde tasarlanmış bir arka uç ile kullanmak, kullanımı daha kolay olsa da, bu, Backbone.js'nin hepsinin çalışabileceği anlamına gelmez. Varsayılan Backbone.js eşitleme mekanizmasında yapılan bazı değişikliklerle, onu çok çeşitli arka uç hizmet API'lerine ve kodlama biçimlerine uyarlayabilirsiniz.

Backbone.js'nin diğer bölümlerinin de esnek ve kısmen isteğe bağlı olduğunu belirtmekte fayda var. Örneğin, Underscore.js ile birlikte gelen varsayılan şablonlama motorunu kullanmak zorunda değilsiniz. Backbone.js'nin görünüm bileşenini kullanmak zorunda bile değilsiniz ve isterseniz onu tamamen başka bir şeyle değiştirebilirsiniz.

Hata #7: Verileri Modeller Yerine Görünümlerde Depolamak

Backbone.js öğrenmeye yeni başlayan biri olarak sıklıkla yapabileceğimiz bir hata, verileri doğrudan nitelikler olarak görünümlerde depolamaktır. Bu veriler, bazı durumları veya bazı kullanıcı seçimlerini izlemek için orada olabilir. Bu kaçınılması gereken bir şeydir.

 var AudioPlayerVisualizer = Backbone.View.extend({ events: { 'click .btn-color': function(event) { this.colorHex = $(event.target).data('color-hex') this.render() } }, // ... })

Her zaman uç noktalar olmadan bazı ek modeller ve koleksiyonlar oluşturabilirsiniz. Bunlar, arka uçta kalıcı olması gerekmeyen veya doğası gereği geçici olabilecek verileri depolamanıza yardımcı olabilir. Bunları modellerde saklamak, size değişiklikleri dinleyebilme avantajı sağlar. İlgili görünüm, hatta çoklu görünümler bu modelleri gözlemleyebilir ve gerektiğinde kendilerini yeniden oluşturabilir.

Durum izleme değişkenlerini görünümlerde gerçekten depoladığınızı ve bunları her değiştirdiğinizde oluşturma yöntemini çağırmanız gerektiğini hayal edin. Bu işleme yöntemine yapılan tek bir çağrının eksik olması, kullanıcının ekranda yaşadıklarına bağlı olarak uygulamanızı bozuk bir durumda bırakabilir. Ayrıca, küçük görünümlerle, bu durum değişkenlerini birden çok görünüm nesnesi üzerinde senkronize etmeniz ve ardından bunlar üzerinde de oluşturma yöntemini çağırmanız gerekebilir.

Hata #8: Temsil Edilen Olaylar Yerine jQuery “.on()” Kullanımı

Backbone.js, bence, DOM olaylarını ele almanın muhteşem bir yoluna sahip. Kullanmamak bir takım dezavantajlara neden olur. jQuery'nin “.on()” olay bağlama işlevi kullanışlı gelebilir, ancak genellikle uzun vadede güçlük yaratır. Örneğin, öğeler DOM'dan ayrıldığında, jQuery, ".on()" kullanarak öğelere bağlı tüm olay işleyicilerini otomatik olarak bırakır. Bu, bir görünüm içinden bağlamaya çalıştığınız herhangi bir DOM olayının, kök öğeyi DOM'den ayırıp yeniden takarsanız geri tepmesi gerekeceği anlamına gelir.

 var AudioPlayerControls = Backbone.View.extend({ events: { 'click .btn-play, .btn-pause': function() { /* ... */ }, 'click .btn-prev': function() { /* ... */ }, 'click .btn-next': function() { /* ... */ }, 'click .btn-shuffle': function() { /* ... */ }, 'click .btn-repeat': function() { /* ... */ } }, // ... })

Bu görünüme karşılık gelen öğe DOM'a yeniden eklendiğinde, tüm bu olayları bağlamak için tüm yapmanız gereken görünüm üzerinde “delegateEvents()” öğesini çağırmak.

Bu olayların nasıl bağlı olduğunu anlamanın önemli olduğunu unutmayın. Olayı seçici tarafından belirtilen öğelere bağlamak yerine Backbone.js, olay işleyicisini görünümün kök öğesine bağlar. Bu, hemen hemen her durumda işe yarar ve aslında ihtiyaçlarımızın çoğu için daha iyi çalışır. Görünümün DOM alt ağacındaki alt öğeleri değiştirmek veya değiştirmek, Backbone.js'nin her olayı yeni öğelere yeniden bağlamasını gerektirmez. Mevcut dinleyiciler çalışmaya devam ediyor.

Ancak bu, bazı olayların dinlenmesini engeller. Bir örnek, "pencerede" veya alt kaydırılabilir bir öğede kaydırma olaylarını dinlemek isteyebileceğiniz yerdir. Alt öğeler olması durumunda, o öğe için bir alt görünüm oluşturabilir ve oradaki olayları işleyebilirsiniz.

Çözüm

Çok kompakt ancak genişletilebilir bir çerçeve olan Backbone.js, sahne arkasında çok fazla esneklik gerektiren web uygulamaları için mükemmel bir seçimdir. Angular.js ve Ember.js gibi yapmak istediğinizi nasıl yapacağınızı söylemek için her zaman orada olan çerçevelerin aksine, Backbone.js bir adım geri gider, size güçlü bir araç seti sunar ve nasıl kullanılacağına karar vermenizi sağlar. onlara. Yeni başlayanlara yönelik bu Backbone.js öğreticisinin, bazı yaygın geliştirme hatalarından kaçınmanıza ve onunla harika bir şey oluşturmanıza yardımcı olacağını umuyorum.