Bu yazı, Qubole’deki UI Mühendislik ekibinin bir parçası olan Aswin Anand ve Lalit Indoria tarafından ortak yazarlanmıştır.

Qubole’daki ön uç ekibi, mümkün olan en iyi web deneyimini sağlamaya çalışıyor. Bunu gerçekleştirme çabalarımızda Ember.js tarafından desteklenen gelişmiş ve etkileşimli bir uygulama olan küme yönetimi sayfasının yeni bir sürümünü çıkardık.

Mevcut küme yönetim sayfamızı yenilemeye karar verdiğimizde güvenilir, hızlı ve ilgi çekici olmasını istedik. Bununla birlikte, kaynak kodunu yazarak ve tekerleği yeniden yaratmaktan da kurtulmak istedik. Mimari kararlara varılması için harcanan süreyi azaltmamıza yardımcı olabilecek bir çerçeveye ihtiyaç duyduk. Yeni uygulamamızı oluşturmak için Angular JS, React JS ve BackBone’u araştırırken, Ember JS’nin sunucuda çalışan RoR ile mevcut sistemimize uyma biçiminden son derece etkilendik. Ember JS, Ember’ı interaktif modern uygulamalar oluşturmak için en iyi yol haline getirmeye kararlı güçlü bir topluluğa sahiptir. Ember JS, ön uç ekibimizde hiç kimsenin aşina olmadığı bir teknolojidir ancak topluluk, etkileşimli bir uygulama oluşturmak için çerçevenin özelliklerini nasıl kullanabileceğimiz konusunda bizi yönlendirmekte çok yardımcı olmuştur.

Bu blog yazısı, Ember’in ön uç yığmızı ölçeklememize nasıl yardımcı olduğumuzu ve Qubole’de en etkileşimli tek sayfa uygulamasını oluşturan deneyimlerimizin özetini vermektedir.

Ember Verileri ile Azalan Bisiklet Dağılımı

Bir çerçevenin olmadığı bir uygulama oluşturmak, teknolojik kararlar alırken geliştiricilerin yükünü arttırır ve genellikle bisiklet dökülmesine yol açar . Neyse ki Ember Data, JSON API biçimini kullanarak sunucuya gönderilen ve sunucudan alınan verileri seri hale getiren Serializer’leri kullanarak sorunu çözen bir hizmettir . Verileri JSON API formatında gönderme çabalarımızı en aza indirgemek için, bu seri düzenleyicileri kolayca özelleştirebilir veya Ember uygulamanızın herhangi bir arka uç çerçevesi ile uyumlu olduğundan emin olmak için kendi serileştiricilerini kullanabiliriz. Ember Data, HTTP üzerinden JSON API’leri ile ve akışlı Web Yuvaları ile iyi çalışır.

Ember Inspector ile hata ayıklama

Bir uygulamadaki sorunları ayıklamak, herhangi bir geliştiricinin işinin ayrılmaz bir parçasıdır ve Ember Müfettişi bunu mümkün olan en iyi şekilde yapmanıza yardımcı olur. Ember Inspector, ember uygulamanızın hata bulmasına yardımcı olan ve Ember Data ile çok iyi entegre olan bir tarayıcı addonu. Ember denetçisindeki Veri sekmesi, uygulamada tanımlanan model türleri listesini ve her model türü için yüklenen kayıtların sayısını gösterir.

Ember müfettişi

Qubole’deki kümeler listeleme sayfasındaki her küme tek bir kaydı temsil eder. Ember denetçisindeki veri sekmesi, yüklenen kayıt sayısını ve hesabınızda bulunan kümelerin sayısını gösterir. Ember Data sekmesi bu kayıtları listeler ve modelde yüklü olan her kümenin verilerini incelememizi sağlar. Kullanıcıların bu değişikliğe nasıl tepki vereceğini görmek için denetleyicide bu bilgileri de değiştirebiliriz. Örneğin, Ember Inspector içindeki bir kümenin durumunu “AŞAĞI” olarak değiştirebiliriz ve küme, daha sonra kümeler listeleme sayfasında görünecektir. Bu, API yanıtını değiştirmeye veya bu değerlerin herhangi birini uygulamaya sabitlemenize gerek kalmadan farklı veri setleriyle uygulamayı test etmek istediğinizde özellikle yararlıdır.

İki yönlü veri bağlama

Ember’deki veri bağlama, iki nesne arasında yapılan herhangi bir değişikliğin diğerini otomatik olarak güncelleştirmesi için bir nesneye bağ oluşturur ve tersi de geçerlidir. Bu, bir küme oluşturduğunuzda / düzenlediğinizde ve küme yapılandırma alanlarından herhangi birinde değişiklik yaparak Özet Bölmesinde güncelleştirilen değerleri görürseniz gösterilebilir .

Kubaşık küme oluşturmak

Bu, kullanıcılarımızın küme yapılandırmasındaki bir alanın değiştirilmesinin diğer alanları nasıl etkilediğini anlayabilmelerini sağlayan etkileşimli bir web deneyimi oluşturmamıza yardımcı oluyor. Qubole’da kümelerin oluşturulma biçimini basitleştirdik, ancak kullanıcıların herhangi bir zamanda tüm küme yapılandırma verilerini tutan özet bölmesini kullanarak küme yapılandırma sihirbazındaki farklı adımları atlamayı gerçekten kolaylaştırdık.

Ember ayrıca tek yönlü bir veri bağlama kurmanıza yardımcı olur; bu, tek bir nesnedeki değişikliklerin yalnızca bir yönde yayılması anlamına gelir. Bunun güzel bir örneği, kümeler listeleme sayfasında gördüğünüz arama ve filtredir. Kümeler listesini filtrelediğinizde Uygula düğmesine basarsanız, sayfanın URL’si değişir ve sorgu parametrelerinde filtreleri vardır. Bu sorgu params bileşenlerin derinine yayılır ve kullanıcı girdisine bağlıdır. Kullanıcılarımızın bir arama sorgusu yazarken sorgu parametrelerinin anında değişmesini istemediğimizden, bu verileri yalnızca tek bir yönde yayar ve yalnızca kullanıcı Uygula düğmesine tıkladığında sorgu parametrelerini değiştiririz.

Ember’ın Denetleyicilerden Bileşenlere geçiş

Ember 2.0, herşeyi bir bileşen haline getirme yönünde büyük ilerlemeler kaydetti. Ember’ın bileşenleri DOM’un bir bölümünü tamamen kontrol etmemize izin veriyor. Bu, aynı JavaScript ve HTML kodunu uygulama içinde birden çok kez tekrar kullanmamıza yardımcı oluyor. Küme listeleri sayfasında görülen eylem düğmeleri bir bileşene katkıda bulunur. Bu bileşen daha sonra küme ayrıntıları sayfasıyla (burada düğüm bilgileri, küme kullanımı raporu ve düğüm zamanı grafiği) yeniden kullanılabilir. Küme eylemleri içinde görülen kaynakların açılır menüsü, küme ayrıntıları sayfasında da, ancak tablo biçiminde yeniden kullanılan iç içe geçmiş bir bileşentir. Küme statüsünü ve türünü göstermek aynı zamanda gidon şablonuna tek bir çizgi ekleyerek basittir.

Ember, kodun tekrar kullanılmasının yanı sıra bileşenler içeren yaşam döngüsü kancaları da sağlar. Bu kancalar, bir bileşen WillRender, didInsertElement, willDestroyElement vb. Olduğunda çalıştırılması gereken mantığı tanımlamamızı sağlar. Yaygın olarak kullandığımız çengellerden biri, bileşenin HTML’si DOM’a yerleştirildiğinde üçüncü taraf kitaplıklarını başlatmamıza yardımcı olan didInsertElement’dir. Bu, jQuery eklentilerini basit etiketler olarak DOM’ya eklenebilen yeniden kullanılabilir bileşenler olarak sarmamıza yardımcı oluyor. Bunun örnekleri, ana ve köle düğüm türlerini arayan açılır kutular ve küme yapılandırma sayfasındaki yardım simgeleri olacaktır.

Geçici Durumların Hizmetlerle Depolanması

Kubbe bildirimleri

Ember’teki hizmetler, uygulama süresine kadar geçici olarak verileri saklayabilen nesnelerdir. Küme yönetimi sayfasında görüntülenen bildirimler, Ember.Service nesnesinin mükemmel örnekleridir. Bu bildirimler geçicidir ve birkaç saniye sonra boşaltılır, bunları hizmetlere kaydetmek daha iyidir. Bu bildirimler rota değişikliklerine bakılmaksızın devam eder ve kullanıcıların eylemlerine yanıt olarak görüntülenen şeyleri kaçırmamalarını sağlamak için küme yönetimi uygulamasının farklı bölümleri arasında dolaşsalar bile gösterilir.

Küme düğümleri bilgileri

Ayrıca, küme ayrıntıları sayfasında görülen düğüm bilgilerini saklamak için de hizmetler kullanıyoruz. Bunun nedeni, bir kullanıcı her eriştiklerinde düğümlerin yenilenmesini istemediğimiz tablolar. Bunları, yalnızca düğüm sayısında bir değişiklik olduğunda veya kümenin durumu değiştiğinde yeniliyoruz. Bu, veri getirmek için API çağrılarının sayısını azaltmakla birlikte, küme yukarı veya aşağı ölçeklenmediğinde daha iyi bir kullanıcı deneyimi yaratır.

Farklı bulutlarda ölçeklendirmek için Mixins’i kullanmak

Ölçeklenebilirlik, uygulamanızı oluşturmak için bir çerçeve seçerken dikkate alınması gereken önemli bir faktördür ve Ember, bunu Mixins’i kullanarak elde etmenize yardımcı olur. Bir mixin içinde tanımlanan herhangi bir özellik veya işlev, mixin’i genişleten tüm sınıflar arasında paylaştırılır. Küme yönetimi uygulamamızda hemen hemen her şey, mixin kullanımını desteklemektedir. Küme kullanım verilerini göstermek gibi en küçük bileşene giden yollardan başlayarak, tüm sınıfları mixins kullanarak genişlettik. Bu, AWS dışında başka bulutlar için destek eklediğimizde çok yararlı oldu. Bu bulutlar arasındaki paylaşılan herhangi bir işlev şimdi mixin içinde bulunur. Bu, yeni bir bulut için destek eklenmesinin artık bir pastanın bir parçası olmasını sağlayacak şekilde ölçeklenmemize yardımcı oldu.

Ember JS’de birim testi

Ember’ı şu anki JavaScript kod tabanımıza entegre ederken en büyük endişelerden biri de birimi test etmekti. JavaScript modüllerine karşı testler yapmak için mocha kullanıyorduk ve Ember ile de kullanmaya devam etmek istedik. Bunu başarmak için, biz kullandı kor-mocha kor-test yardımcıları içerdiği yardımcıları etrafında Mocha özgü ambalajları sağlar. Ember mocha, her bir sınıfa ayrı ayrı test etmemize yardımcı oldu. Güzergahların, denetleyicilerin, bileşenlerin, mixin’lerin, modellerin ve yardımcıların tümü, yaklaşık% 90 kod kapsamı ile birim test edilmiştir. Bu ünite testleri yerine getirildiğinde, uygulamaya yeni işlevler eklenmesinden oldukça eminsiniz.

Bir ay sonra yansımalar

Ember’in konfigürasyon paradigması üzerindeki sözleşmesi, bilişsel yükümüzü azaltmamıza yardımcı oldu. Bunun bir sonucu olarak, kısa bir süre önce yayımladığımız küme yönetimi sayfasında, düz JavaScript ile oluşturduğumuz diğer sayfalara kıyasla en az sayıda böcek vardı. Ember JS geliştiricileri düşünülerek inşa edildi ve küme yönetimi sayfasına yeni özellikler eklemek için harcadığımız zaman şimdi 10 kat azaltıldı. Ember JS tanıtımı, kariyerinde herhangi bir MVC çerçevesinde çalışmış olabilecek yeni mühendislerin konuşlandırılmasında bize yardımcı olur.

Web çok hızlı bir şekilde gelişiyor ve Ember yeni araçlarla yetinmek imkansız olsa da bugün modern tarayıcılarda bulunan en son teknolojileri kullanmamıza yardımcı olmuştur.

Leave a Reply

Your email address will not be published. Required fields are marked *