İçerik
- 01. Açısal
- 02. Tepki
- 03. Vue
- Çerçevelerin sözdizimi nasıl karşılaştırılır?
- Popülerlik ve pazar
- Mobil uygulama geliştirme
- 2020'de dikkat edilecek diğer çerçeveler
- Sonuç
2020'de, web geliştirmede bize yardımcı olacak bir dizi çerçeve ve kitaplık ile kutsanmış durumdayız. Ama her zaman çok fazla çeşitlilik yoktu. 2005 yılında, Mocha adında yeni bir betik dili, Brendan Eich adında bir adam tarafından oluşturuldu. LiveScript olarak yeniden adlandırıldıktan aylar sonra, ad tekrar JavaScript olarak değiştirildi. O zamandan beri JavaScript uzun bir yol kat etti.
2010 yılında, Backbone ve Angular'ın ilk JavaScript çerçeveleri olarak tanıtıldığını gördük ve 2016 yılına kadar tüm web sitelerinin yüzde 92'si JavaScript kullandı. Bu makalede, üç ana JavaScript çerçevesine (Angular, React ve Vue) ve önümüzdeki on yıldaki durumlarına bir göz atacağız. Kendi sitenizi mi yapmak istiyorsunuz? Bu web sitesi kurucuları listesini deneyin.
Bazı mükemmel kaynaklar için, en iyi web tasarım araçları listemize, web barındırma hizmetlerimizi ve bu mükemmel kullanıcı test yazılımı listesine göz atın.
01. Açısal
AngularJS, 2010'da piyasaya sürüldü, ancak 2016'da tamamen yeniden yazıldı ve Angular 2 olarak piyasaya sürüldü. Angular, Google tarafından geliştirilen ve Wix, Upwork, The Guardian, HBO ve daha fazlası tarafından kullanılan tam gelişmiş bir web çerçevesidir.
Artıları:
- TypeScript için olağanüstü destek
- MVVM, geliştiricilerin aynı veri kümesini kullanarak aynı uygulama bölümündeki çalışmaları ayırmasına olanak tanır
- Mükemmel dokümantasyon
Eksileri:
- Biraz öğrenme eğrisi var
- Eski bir sürümden geçiş yapmak zor olabilir.
- Güncellemeler oldukça düzenli olarak sunulur, bu da geliştiricilerin bunlara adapte olması gerektiği anlamına gelir
Sıradaki ne?
Angular 9'da Ivy varsayılan derleyicidir. Performans ve dosya boyutu ile ilgili birçok sorunu çözmek için uygulamaya konulmuştur. Uygulamaları daha küçük, daha hızlı ve daha basit hale getirmelidir.
Angular to React ve Vue'nun önceki sürümlerini karşılaştırdığınızda,
Angular kullanılırken son paket boyutları çok daha büyüktü. Ivy ayrıca, Angular ekibinin I / O 2019'da gösterdiği bir şey olan Progressive Hydration'ı da mümkün kılıyor. Progressive Hydration, sunucuya ve istemciye aşamalı olarak yükleme yapmak için Ivy'yi kullanıyor. Örneğin, bir kullanıcı bir sayfayla etkileşime girdiğinde, bileşenlerin kodu herhangi bir çalışma zamanıyla birlikte parça parça getirilir.
Ivy, Angular için ileriye dönük büyük odak gibi görünüyor ve umut, onu tüm uygulamalar için kullanılabilir hale getirmektir. Sürüm 9'da Angular 10'a kadar bir vazgeçme seçeneği olacak.
02. Tepki
React, ilk olarak 2013 yılında Facebook tarafından piyasaya sürüldü ve etkileşimli web arayüzleri oluşturmak için kullanılıyor. Birkaç isim vermek için Netflix, Dropbox, PayPal ve Uber tarafından kullanılır.
Artıları:
- React, performans üzerinde olumlu bir etkisi olan sanal DOM'u kullanır
- JSX yazmak kolaydır
- Güncellemeler kararlılıktan ödün vermez
Eksileri:
- Başlıca aksiliklerden biri, daha karmaşık uygulamalar oluşturmak için üçüncü taraf kitaplıklara ihtiyaç duymaktır.
- Geliştiriciler, geliştirmenin en iyi yolu konusunda karanlıkta kalırlar
Sıradaki ne?
React Conf 2019'da React ekibi, üzerinde çalıştıkları birkaç şeye değindi. Birincisi, React'in kullanıcının etkileşimde bulunduğu bileşenlere öncelik vermek için üzerinde çalıştığı her şeyi duraklattığı Seçici Hidrasyondur. Kullanıcı belirli bir bölümle etkileşime girdikçe, o alan nemlendirilecektir. Ekip ayrıca React’in kod, veri ve görüntülerin yüklenmesini düzenleme sistemi olan Suspense üzerinde çalışıyor. Bu, bileşenlerin işlemeden önce bir şey beklemesini sağlar.
Hem Seçmeli Hidrasyon hem de Süspansiyon, React'e kullanıcı girdisine yanıt vermek gibi daha yüksek önceliğe sahip bir şeye odaklanmak için daha düşük öncelikli büyük bloklara girme yeteneği vererek uygulamaların daha hızlı yanıt vermesini sağlayan Eşzamanlı Mod ile mümkün kılınmıştır. Ekip ayrıca, iki özel konuya odaklanarak, erişilebilirliğin başka bir alan olarak ele aldığından bahsetti - odak ve giriş arayüzlerini yönetmek.
03. Vue
Vue, 2014 yılında eski bir Google çalışanı olan Evan You tarafından geliştirildi. Xiaomi, Alibaba ve GitLab tarafından kullanılmaktadır. Vue, kısa sürede ve büyük bir markanın desteği olmadan geliştiricilerden popülerlik ve destek kazanmayı başardı.
Artıları:
- Boyut olarak çok hafif
- Başlangıç dostu - öğrenmesi kolay
- Harika topluluk
Eksileri:
- React with Facebook ve Angular with Google gibi büyük bir şirket tarafından desteklenmiyor
- Gerçek bir yapı yok
Sıradaki ne?
Vue, daha hızlı, daha küçük, daha sürdürülebilir olma ve geliştiricilerin yerel hedeflemeyi kolaylaştırma hedefini belirledi (bakım konusunda sorun yaşıyorsanız, bir web barındırma hizmeti düşünün). Bir sonraki sürüm (3.0), geliştirilmiş TypeScript Desteği ile birlikte daha iyi performans için sanal bir DOM yeniden yazımı içeren Q1 2020'de çıkacak. Ayrıca, geliştiricilere bileşenleri oluşturmak ve işlem yerine özelliğe göre düzenlemek için yeni bir yol sağlayan Kompozisyon API'sinin eklenmesi de var.
Vue geliştirenler, bileşen oluşturmanızı askıya alan ve bir koşul karşılanana kadar bir geri dönüş bileşeni oluşturan Suspense üzerinde çalışmakla da meşguller.
Vue'nun güncellemelerinin harika yanlarından biri, geriye dönük uyumluluğu sürdürmeleridir. Eski Vue projelerinizi kırmanızı istemiyorlar. Bunu, API'nin yüzde 90'ının aynı olduğu 1.0'dan 2.0'a geçişte gördük.
Çerçevelerin sözdizimi nasıl karşılaştırılır?
Her üç çerçeve de yayınlandıklarından beri değişikliklere uğramıştır, ancak anlaşılması kritik olan bir şey sözdizimi ve nasıl farklı olduğudur. Basit olay bağlamaya gelince söz diziminin nasıl karşılaştırıldığına bir göz atalım:
Vue: v-on direktifi, Vue örneklerinde yöntemleri çağıran olay dinleyicilerini eklemek için kullanılır. Direktiflerin başında v- Vue tarafından sağlanan özel nitelikler olduklarını belirtmek ve işlenen DOM'a özel reaktif davranış uygulamak için. Olay işleyicileri satır içi olarak veya yöntemin adı olarak sağlanabilir.
şablon> düğme v-on: click = ”clickHandler”> Beni tıklayın / düğme> / template> komut dosyası> varsayılanı dışa aktar {name: "HelloWorld", yöntemler: {clickHandler: function () {console.log ("Tıklandım! ”); }}}; / script>
Tepki: React, JavaScript'in bir sözdizimi uzantısı olan JS ve JSX'e işaretleme ve mantık koyar. JSX ile işlev, olay işleyicisi olarak iletilir. React öğeleriyle olayları işlemek, DOM öğelerindeki olayları işlemeye çok benzer. Ancak bazı sözdizimsel farklılıklar vardır; örneğin, React olayları küçük harf yerine camelCase kullanılarak adlandırılır.
function Button () {function clickHandler (e) {console.log ("Tıklandım"); } dönüş düğmesi onClick = {clickHandler}> Beni tıklayın! / düğme>; }
Açısal: Olay bağlama sözdizimi, bir eşittir işaretinin solundaki parantezler içinde bir hedef olay adından ve sağda tırnaklı bir şablon ifadesinden oluşur. Alternatif olarak, on- standart biçim olarak bilinen önek.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Beni tıkla! / Button>`}) dışa aktarma sınıfı ClickMeComponent {onClickMe () {console.log (“ Beni tıkladınız! ”); }}
Popülerlik ve pazar
W3Tech'lerin istatistiklerini inceleyerek web'in geri kalanıyla ilgili üç çerçevenin genel bir resmine bakarak başlayalım. Angular, şu anda tüm web sitelerinin yüzde 0,4'ü tarafından kullanılıyor ve yüzde 0,5'lik bir JavaScript kitaplığı pazar payı ile. React, tüm web sitelerinin yüzde 0,3'ü ve yüzde 0,4 JavaScript kitaplığı pazar payı tarafından kullanılıyor ve Vue, her ikisi için yüzde 0,3'e sahip. Bu oldukça eşit görünüyor ve rakamların artmasını beklersiniz.
Google trendleri: Son 12 ayda, React, arama terimlerinde en popüler olanıdır ve onu yakından takip eden Angular'dır. Vue.js oldukça geride; ancak hatırlanması gereken bir şey, Vue'nun diğer ikisine kıyasla hala genç olduğudur.
İş aramaları: Yazma sırasında, React ve Angular, Indeed ile Vue'daki iş listeleri açısından oldukça yakından eşleşti ve çok geride kaldı. Ancak LinkedIn'de, Vue geliştiricilerine daha fazla talep var gibi görünüyor.
Yığın Taşması: 2019 için Stack Overflow Geliştirici Anketi sonuçlarına bakarsanız, React ve Vue.js hem en sevilen hem de aranan web çerçeveleri. Angular, en çok sevilen ancak üçüncü en çok arananlar için dokuzuncu konumda oturur.
GitHub: Vue, 153k ile en fazla yıldıza sahip ancak en az katkıda bulunan (283) yıldıza sahip. React ise 140 bin yıldız ve 1.341 katılımcıya sahip. Angular yalnızca 59,6 bin yıldıza sahip, ancak 1,579 ile üçten en fazla katkıda bulunanlara sahip.
NPM Trendleri: Yukarıdaki görüntü, React'in Angular ve Vue'ye kıyasla ayda daha fazla indirme sayısına sahip olduğunu görebileceğiniz son 12 aya ait istatistikleri göstermektedir.
Mobil uygulama geliştirme
Üç büyük için ana odak noktalarından biri mobil dağıtımdır. React, yalnızca React kullanıcıları için değil, aynı zamanda daha geniş uygulama geliştirme topluluğu için iOS ve Android uygulamaları oluşturmak için popüler bir seçenek haline gelen React Native'e sahiptir. Angular geliştiriciler yerel uygulamalar için NativeScript'i veya hibrit mobil uygulamalar için Ionic'i kullanabilirken, Vue geliştiricilerinin NativeScript veya Vue Native seçenekleri vardır. Mobil uygulamaların popülaritesi nedeniyle, bu önemli bir yatırım alanı olmaya devam ediyor.
2020'de dikkat edilecek diğer çerçeveler
2020'de yeni bir şey denemek istiyorsanız, bu JavaScript çerçevelerine göz atın.
Kor: MVVM modeline göre çalışan web uygulamaları oluşturmak için açık kaynaklı bir çerçeve. Microsoft, Netflix ve LinkedIn gibi birkaç büyük şirket tarafından kullanılmaktadır.
Meteor: Modern web ve mobil uygulamalar geliştirmek için tam yığın JavaScript platformu. Öğrenmesi kolaydır ve çok destekleyici bir topluluğa sahiptir.
Sonuç
Üç çerçeve de sürekli olarak gelişiyor ve bu da cesaret verici bir işaret. Herkesin kendi bakış açısı ve hangisini kullanması gerektiği konusunda tercih ettiği bir çözüm var ama bu gerçekten projenin büyüklüğüne bağlı ve bu da sizi daha rahat hissettiriyor.
En önemli yönü, topluluklarının sürekli desteğidir, bu nedenle yeni bir projeye başlamayı planlıyorsanız ve üçünü daha önce hiç kullanmadıysanız, o zaman hepsiyle emin ellerde olduğunuza inanıyorum. Henüz üç çerçeveden herhangi birini öğrenme şansınız olmadıysa, öğrenmeye başlamak için bunu Yeni Yıl kararınız olarak belirlemenizi öneririm. Gelecek bu üçü etrafında dönecek.
Bu içerik ilk olarak net dergisinde yayınlandı.
