En İyi Ön Uç Çerçevesi Nasıl Seçilir

JavaScript dünyası, düzinelerce araç, kitaplık ve çerçeve içeren zengin bir ortamdır. Ancak, birçok seçenek ile çok fazla kafa karışıklığı gelir. Bu gerçekten iki ucu keskin bir kılıç.

Yaratıcılık ve deneme için çok fazla alana sahip olsanız da, bazen hangi kütüphaneyi veya çerçeveyi seçeceğinizden emin değilsiniz.

Seçtiğiniz ön uç çerçeve, projenizi uzun vadede yapabilir veya bozabilir.

Bu yazıda, en popüler JavaScript çerçevelerinden bazılarına ve bunların birbirlerine karşı nasıl performans gösterdiğine bakacağız. Bir sonraki JavaScript çerçeveniz hakkında karar verme sürecini genellikle kolaylaştıran bu çerçevelerin beş farklı perspektifini inceleyeceğiz.

Bu popüler JavaScript çerçevelerinden birini veya daha ezoterik bir şeyi seçiyor olsanız da, bu yönlerin her birini dikkate almalısınız.

Öğrenme Kaynaklarının Kullanılabilirliği

Bu açıktır ama çoğu zaman gözden kaçar. Bazı çerçevelerin süslü ana sayfası gözünüze çarpabilirken, başlamanıza yardımcı olacak sıkıcı ve kuru belgelerin yanı sıra bazı ek kurslara, kitaplara, öğreticilere ve makalelere ihtiyacınız var.

Harika bir çerçeve oluşturmak bir şeydir ve arkasındaki temel fikirleri iletmek farklıdır. Aslında, koçluk konusunda uzmanlaşmış birçok profesyonel geliştirici var. İyi hazırlanmış bir öğrenme kaynağı, öğrenme eğrinizi önemli ölçüde kısaltacaktır.

Daha önce deneyim sahibi olduğunuz güvenilir yazarların kaynaklarını arayın; sonunda ayırdığınız zamana değecektir. Yararlı bir şey bulmakta zorlanıyorsanız dikkatli olun: Öğrenmeye çalıştığınız çerçeve yeni olabilir veya topluluk tarafından henüz tam olarak benimsenmemiş olabilir.

Belgelemenin tek başına yeterli olmadığını belirtsem de bunun istisnaları da var. Örneğin EmberJS, harika belgelere sahiptir. Temel özellikler ve kullanım durumları, burada ve orada genel örneklerle güzel bir şekilde açıklanmıştır. Ne yazık ki, belgelerin yanı sıra elimizde çok az kaynak kitap, video kursu veya diğer materyal kaldı.

Öte yandan, Angular ve React için bol miktarda kaynak var. Hemen hemen her ön uç odaklı eğitim web sitesinde onlar hakkında bir veya iki makale, hatta belki tam bir video kursu veya kitabı olacaktır.

Vue türü orta noktayı vuruyor: İyi belgelere sahip ve aralarından seçim yapabileceğiniz birkaç güzel kurs var.

Örneğin Aurelia'nın neredeyse sıfır kaynağı var; senin için tek umut belgeler ve şans.

Seçeneklere sahip olmayı tercih ederim.

Harika bir kitap veya kurs okusanız bile, kendinizi farklı kaynaklara maruz bırakarak yeni bir şeyler öğrenme şansınız var. Konuya aşina iseniz, çoğu zaman gözden geçirebilir ve henüz tam olarak net olmayan olası alanları arayabilirsiniz.

Ne yazık ki, seçeneklerinizle sınırlıysanız bu strateji işe yaramaz ve bu da bizi bir sonraki noktaya götürür.

Popülerlik

Egzotik bir şey öğrenmekten gurur duyabilirsiniz, ancak buna iş açısından bakarsanız, aynı şey değildir. Şirketiniz veya müşteriniz muhtemelen savaşta test edilmiş bir araç setini kullanmayı tercih ediyor.

Bunun birkaç nedeni var. Bir çerçeve o kadar popüler değilse, bu konuda uzmanlaşmış birkaç geliştirici olduğu anlamına gelir. Projeyi bırakırsanız veya yeni bir iş bulursanız ne olur? İşvereniniz, kullandığınız çerçeveyi bilen bir geliştirici arayışında sıkışıp kalıyor.

Bu süreç bir şirket için gerçek bir yük haline gelebilir. Aynı şey, projeye bağlı kalsanız ve büyüse bile geçerlidir. Artık işverenin gelişmeyi hızlandırmak için daha fazla geliştiriciye ihtiyacı var.

Popüler, yaygın olarak kullanılan bir çerçeveyi tercih etmenizin başka kişisel nedenleri de vardır. Kendinizi bir soruna saplanmış bulursanız ve gerçekten yardım isteyebileceğiniz bir topluluk yoksa ne olur? Belgelerle kendi başınıza olduğunuz için, çok fazla zaman kaybetme ihtimaliniz var.

Bunun yanı sıra, kariyerinizde gelecek, daha çekici fırsatlar hakkında düşünmek istiyorsunuz. Popüler bir şeyde uzmanlaşırsanız ve o işte gerçekten iyi olursanız, orada sizin için birçok proje olacaktır.

Buradaki bariz liderler Angular ve React'tir.

Dışarıdaki ön uçla ilgili iş listelerinin çoğu, birini veya diğerini gerektirir. Sırasıyla Google ve Facebook tarafından destekleniyorlar ve bu nedenle işverenler seçimleri konusunda “güvende” hissediyorlar.

Bazen şirketiniz veya müşteriniz için çerçeve seçimi size bağlı değildir; belki önceki bir çalışan veya ekipteki başka bir kişi tarafından yapılmıştır. Angular veya React olma ihtimali yüksek. Artık Ember ve Vue gibi başka seçenekler de var. Ancak, bunları kullanan şirketleri bilinçli olarak aramalısınız.

Projenin GitHub ve diğer yerlerde ne kadar iyi gittiğine hızlıca bakarak bir çerçevenin popülerliğini belirleyebilirsiniz. Bu makaleyi yazarken toplanan bazı istatistikler:

Bu kütüphaneler popüler seçenekler olduklarını kanıtlayacak kadar uzun süredir var olmalarına rağmen, gerçekten yeni bir şey deniyorsanız, onlar için benzer istatistikler seçim yapmanıza yardımcı olabilir.

Yalnızca Angular veya React'i öğrenmek, sizi kariyerinizde ancak bir yere kadar götürür. Tabii ki, birçok fırsatınız olacak, ancak orada başka çerçevelerin olmasının bir nedeni var. Boş zamanlarınızda onlar hakkında bilgi edinmeye çalışın ve ara sıra bazı deneyler yapın. Bunları gerçek projelerde hiç kullanmasanız bile, günlük geliştirme çalışmalarınızda size yardımcı olacak değerli bilgiler edineceksiniz.

Çekirdek özellikleri

Şimdi biraz teknik konuşalım.

Başlangıçta, kodlamaya başlayacağınız zaman yeterli bir beklentiye sahip olmak için çerçevenin temel özelliklerini kısaca gözden geçirmek istersiniz. Bu amaçla belgeleri tarayın. Bu çerçevenin genel olarak ne hakkında olduğu hakkında bir fikir edinmeniz gerekir. Yalnızca bir görünüm katmanı mı, tam teşekküllü mü yoksa arada bir şey mi var?

Diğer çerçevelerle zengin bir deneyime sahipseniz, bu işlem kolay ve hızlıdır. Belgelerde şu konuları arayın: şablon oluşturma, durum yönetimi, HTTP iletişimi, form işleme ve doğrulama ve yönlendirme. Bunlar bir geliştirici olarak yaptığınız günlük şeylerdir. Bunların hepsi çekirdek çerçevede sunulmayabilir veya belirli bir soruna farklı bir yaklaşım olabilir.

Popüler seçeneklere kısaca değinelim.

React ve Vue ile başlayacağız. Onlar gerçekten çerçeve değiller; yalnızca uygulamanızın görünüm katmanını temsil ederler. Bu, diğer tüm bölümlerin—HTTP iletişimi, form doğrulama vb.—size bağlı olduğu anlamına gelir.

Daha önce de belirttiğim gibi, iki ucu keskin bir kılıç olabilir. Sonunda, kendi özel çerçevenizi oluşturmaya başlayacaksınız. Her ikisinin de en yaygın sorunlara çözümler sağlamak için kütüphane ekosistemi vardır, ancak genel yapı projeden projeye değişecektir.

React'in JSX'i beni her zaman ürkütürdü. Buna alışmak zorundaydım. Ancak Vue'nin şablonlaması gerçekten güzel, özellikle de Angular'dan geliyorsanız.

Öte yandan, Ember hemen hemen her şeye sahiptir. Şaşırtıcı bir şekilde, Ember'in çekirdeği gelişmiş form işleme sağlamaz. Sadece bazı girdi yardımcıları var ve hepsi bu. Çok düşünceli ve hatta kendi veri katmanına sahip. Her şey “Köz yolu” ile yapılmalıdır.

Diğer çerçevelerde veya genel olarak JavaScript'te bir arka planınız varsa, Ember kendi nesne modelini kullandığı için hayal kırıklığına uğrayabilirsiniz. Standart ES2015 sınıfları, belgelerinde belirtildiği gibi yaygın olarak kullanılmamaktadır. Değeri doğrudan bir mülke atadığınızı ve Ember'in bundan şikayet ettiğini görebilirsiniz.

Diğer çerçevelerden önemli ölçüde farklı olan bir başka şey de Ember Data'dır. Ember uygulamaları için bir veri katmanıdır. Bunu ön uç için bir tür ORM gibi düşünebilirsiniz. Modeller yaratır ve aralarındaki ilişkilerin haritasını çıkarırsınız.

Şimdi, sunucunuz JSON API kullanıyorsa (JSON API'lerini uygulamak için bir belirtimdir), Ember ile iyi bir yerdesiniz, ancak ne yazık ki çoğu sunucu kullanmıyor. Yani özel adaptörler ve serileştiriciler yazmanız gerekiyor. Ancak, işleri Ember yöntemiyle yaparsanız, gerçekten verimli olabilir. Sadece dik bir öğrenme eğrisi var.

Angular 2, zengin özelliklere sahip bir çerçevedir. Ember gibi birçok modülle birlikte gelir, bu nedenle kutudan çıkar çıkmaz emrinizde bir sürü araç var. Ancak Angular, büyük uygulamalar için tasarlandığından, siz denemeden önce bir miktar direnci tetikleyebilecek TypeScript'i destekler.

Dikkate değer başka bir şey de, gerçekten güzel olan Rx kitaplığındaki gözlemlenebilirlerin yoğun kullanımıdır. Hemen hemen her şeyi gözlemlenebilir olarak temsil edebilir ve harita, filtre vb. gibi üst düzey işlemleri uygulayabilirsiniz. Lodash veya Underscore kullandıysanız, Rx aynıdır ancak steroidler üzerindedir.

İşte bu makalede tartıştığımız dört çerçevenin temel özelliklerinin bir özeti:

Mumu etkili bir şekilde kullanmak için her iki ucunda da yakmanız gerekiyorsa, kısaca gözden geçirdiğimiz tüm bu özellikler değersizdir - bir sonraki nokta budur.

kullanılabilirlik

Bu noktada, seçtiğiniz çerçeve için hala hevesiniz varsa, bir sonraki adım ellerinizi kirletmektir.

Belki de arka planınız nedeniyle çerçeve sizin için uygundur. Belki biraz farklıdır ve sizi bazı yönlerden zorlar. Henüz bilmiyorsunuz ve kendiniz denemeden öğreticileri okumanın veya izlemenin hiçbir miktarı yardımcı olmaz.

Bir çerçeve hakkında fikir edinmenin en iyi yolu, onu küçük bir projede kullanmaktır. Bu size yukarıda bahsedilen günlük sorunları belirli bir çerçeve ile çözme fırsatı verir.

Bir proje üzerinde çalışırken zaman ayırın ve üretken olup olmadığınızı düşünün. İstenilen sonuca ulaşmak ne kadar kolay? Dış kütüphaneleri aramak zorunda mısınız? Belki topluluktan bazı eklentilere ihtiyacınız vardır. Çerçeve bağlamında herhangi bir geleneksel yapı veya yönerge var mı? Belki geliştirme sürecini hızlandırmak için bir CLI vardır. Bu adımda, bu çerçeveyi gelecek projeler için kullanırsanız veya hatta mevcut projeleri değiştirirseniz nasıl olacağını düşünebilirsiniz, böylece temel deneyim topluyorsunuz.

Ember, en azından çekirdek kullanıcıları için çok verimli bir çerçeve olarak kabul edilir. Gerçekten yardımcı olan bir CLI ile birlikte gelir. Kendi test takımlarıyla rotalar, kontrolörler, bileşenler ve modeller oluşturabilirsiniz. Bunların hepsini manuel olarak yapmak sıkıcı bir iştir. Yeni bir proje oluşturmak da mümkündür. Temel klasör yapısını oluşturacak, gerekli paketleri kuracak, araçları inşa edecek, test ortamı vb. Ancak, daha önce de belirttiğim gibi, Ember çok inatçıdır; tüm bu iyiliğe rağmen, ortak görevleri yerine getirmeye çalışırken kendinizi hüsrana uğratmış bulabilirsiniz.

Şimdi React ve Vue için bir çeşit CLI, create-react-app ve vue-cli var. Ancak bazı seçeneklerle bir başlangıç ​​projesi oluşturmanın yanı sıra, Ember veya Angular ile karşılaştırıldığında çok fazla bir şey sunmuyorlar. Her ikisi de bir görünüm katmanını temsil ettiği için anlaşılabilir. Proje bazında özelleştirilmiş iş akışları, deneyler veya farklı yapıları seviyorsanız, iyi bir yerdesiniz. Bazı geliştiriciler için esneklik, React veya Vue kullanmanın doğası gereği gelen anahtardır.

Angular 4, Ember'in yaptığı gibi bir CLI ile birlikte gelir. Bileşenler, direktifler, hizmetler vb. oluşturabilirsiniz. Ayrıca bir uygulama için ilk yapıyı oluşturur, bu nedenle yalnızca ürün hakkında endişelenmeniz yeterlidir. Test ortamı, oluşturulan her uygulama parçasıyla birlikte, test paketinin (tam anlamıyla) yakınında yaşadığı için gerçekten güzel. Bunun yanı sıra TypeScript gerçek bir üretkenlik artışı sağlayabilir. İşte nedeni:

Kaç kez böyle satırlarla kodla karşılaştınız…

 function doSomething(someData) { // do something }

…ve someData ne olduğunu, hangi özelliklere sahip olması gerektiğini, hangi işlevleri sağlaması gerektiğini ve davranışlarının ne olduğunu merak ettim. TypeScript ile türü tanımlar ve uygun verileri beklersiniz. TypeScript destekli bazı IDE kullanıyorsanız daha da ileri gidebilir. Uygulamanın farklı bölümlerini bir esinti içinde keşfedebilirsiniz.

IDE'lere değinmedik, ancak popüler çerçevelerin çoğu için geliştirmeyi gerçekten kolaylaştıran bazı eklentiler var. Örneğin WebStorm, Angular, React ve Vue için yerleşik destekle birlikte gelir.

Entegrasyon Kolaylığı (Diğer Kütüphanelerle)

Son olarak, bu, kullanılabilirliğin bir parçası olarak düşünülebilir, ancak kendi bölümünü hak etmesi çok önemlidir.

Seçtiğiniz çerçeve ne kadar zengin özelliklere sahip olursa olsun, ek araçların gerekli olduğu sorunlarla karşılaşma ihtimaliniz yüksektir. DOM manipülasyonu, veri işleme, zaman biçimlendirme, zengin metin düzenleme vb. gibi tek bir soruna odaklanan harika kütüphaneler var. Bunlardan birini entegre etmeye çalışırsanız ve her seferinde saatler harcarsanız, belki de bu en uygun seçim değildir. .

Bunu test etmek çok kolay. Belirli bir kütüphaneye ihtiyaç duyduğunuz bazı hayali senaryoları hızlıca ortaya çıkarabilirsiniz. Geçmiş projelerinize bakın; hangi araçları kullanıyorsunuz ve hangi senaryolarda? Muhtemelen aynı durumlarla tekrar karşılaşırsınız ve buna hazırlıklı olmak istersiniz veya en azından bir beklentiniz vardır.

Dışarıdaki tüm kütüphaneler TypeScript'i desteklemez. Angular onu yoğun olarak kullandığından, böyle bir kitaplık kullanılırken TypeScript iyiliğinin bir kısmı kaybolabilir. Tabii ki, bir geçici çözüm bulabilirsiniz, ancak bu biraz daha zahmetlidir. Açısal popülerlik nedeniyle, talimatları kitaplığın kendi sayfasına entegre edebilirsiniz.

Vue ve React için neredeyse her şeyden siz sorumlusunuz ve diğer kütüphaneleri kullanmak bir istisna değil. Webpack veya benzer bir oluşturma aracı kullanıyorsanız, doğrudan NPM kullanılarak kurulan kitaplıklara başvurabilirsiniz. Vue'nun topluluk eklentilerini kullanmasını biraz zor buldum, özellikle de kullanıcı arayüzü mantığı içerdiklerinde.

Ember, topluluk eklentilerinin bir web sitesi olan EmberObserver'a sahiptir. Her birinin sıfırdan ona kadar bir ölçekte bir puanı vardır. İhtiyacınız olan bir şeyi aramak için gerçekten harika bir yer. Lodash, Rx veya Ramda gibi favori kitaplıklarınızın adını yazarsanız, yeniden yazma işlemlerini tamamlamak için basit paketleyicilerden ilgili eklentileri bulacaksınız. Tabii ki, kütüphaneler de dahil olmak üzere ilgili kaynakları toplayan Awesome React ve Awesome Vue depoları var, ancak EmberObserver'ı özellikle yararlı buldum.

Bir JavaScript Çerçevesine Bağlılık

Doğru JavaScript çerçevesini seçmek, web projenizi başarıya ulaştırmanın en önemli adımlarından biridir. İster küçük ister büyük bir proje üzerinde çalışıyor olun, ister tek başınıza ister ekip halinde çalışıyor olun, bu ayrıntıların her biri projeniz için hangi çerçevenin en iyi olduğunu (ve hangi çerçeveyi daha az tercih edebileceğinizi) belirlemede çok önemli bir rol oynar. ).

Temel özelliklere ve kullanılabilirliğe gelince, geliştiricilerin üretkenliğini çeşitli derecelerde etkileyecek noktaları sıraladım. Kullanılabilirlik özellikle yanıltıcıdır çünkü büyük ölçüde deneyiminize ve geçmişinize ve ayrıca çalıştığınız şirkete veya kuruluşa bağlıdır.

Zamanla, bu makalede tartıştığımız çerçeveler gelişebilir, popülerlikleri değişebilir ve uygun oldukları projeler değişebilir, ancak bu makale size bu çerçevelerin her birinin en iyi nerede çalışabileceğine dair genel bir fikir vermelidir.