Neden AngularJS'den React'e Geçtim?

2011'de kodum jQuery seçicileri ve geri aramalarla karışmaya başladığında, AngularJS daha iyi yönetim, hızlı geliştirme ve kullanıma hazır çok daha fazla işlevselliğe yardımcı olan bir hayat kurtarıcı olarak geldi. AngularJS'nin iki yönlü bağlaması ve “tek-gerçeğin kaynağı olarak model” felsefesi beni şaşırttı ve uygulamam boyunca veri fazlalığını azalttı.

Ancak zamanla, AngularJS'nin kendine ait bazı acı noktaları olduğunu keşfettim. Sonunda bunlar beni yeterince hayal kırıklığına uğrattı ve alternatif çözümler aramaya başladım.

AngularJS 1.x'te ağrı noktaları

• yürütme için DOM

  Angular, yürütme akışı için DOM'a büyük ölçüde güvenir. Uygulamaların varsayılan önyüklemesinde, DOM'yi tarar ve onu hata ayıklamayı ve yürütme sırasını test etmeyi zorlaştıran yönergelerin öncelikleriyle derler.

• Kendi bağımlılık enjeksiyonu

  JavaScript'in kendine ait bir paket yöneticisi ve bağımlılık çözümleyicisi yoktur. Ancak son zamanlarda AMD, UMD ve CommonJS gibi uygulamalar bu sorunu çok iyi çözüyor. Ne yazık ki, AngularJS bunların hiçbirinde işe yaramaz. Bunun yerine, kendi başına bir bağımlılık enjeksiyonu (DI) sunar; RequireJS kullanan resmi olmayan AngularJS DI uygulamaları olsa da.

• İki yönlü ciltleme, iki ucu keskin bir kılıçtır

  İki yönlü bağlama kullanmak cazip gelebilir, ancak bileşeninizin karmaşıklığı arttıkça performans felaketine yol açabilir.

  İki yönlü ciltleme performansı nasıl etkiler? JavaScript ES5'in değişkenlerinde veya nesnelerinde herhangi bir değişiklik olduğunu bildirecek herhangi bir uygulaması yoktur, bu nedenle Angular, veri değişikliklerini izlemek ve kullanıcı arayüzü ile senkronize etmek için "kirli kontrol" adı verilen bir şey kullanır. Kirli kontrol, Angular'ın kapsamında ($ özet döngüsü) gerçekleştirilen herhangi bir işlemden sonra gerçekleştirilir ve bu, bağlama sayısı arttıkça performansın düşmesine neden olur.

  İki yönlü ciltlemeyle ilgili diğer bir sorun, sayfadaki birçok farklı bileşenin verileri değiştirebilmesi ve böylece birden çok veri girişi kaynağına yol açabilmesidir. İyi yönetilmezse, belirsiz bir duruma yol açabilir. Ancak adil olmak gerekirse, bu tamamen bir uygulama sorunudur.

• Angular'ın kendi dünyası var

  Angular'daki her işlem kendi özet döngüsünden geçmelidir, aksi takdirde bileşenleriniz veri modellerinizle senkronize olmaz. Bu nedenle, herhangi bir üçüncü taraf mevcut JavaScript kitaplığını kullanıyorsanız, veri değişikliklerini içeriyorsa onu Angular'ın $apply işleviyle sarmanız veya bir yardımcı program kitaplığıysa onu bir hizmete dönüştürmeniz gerekir. Angular için mevcut her JavaScript modülünü yeniden icat etmek gibi.

• Çok fazla kavram ve dik öğrenme eğrisi

  Angular'ı öğrenmek, modüller, denetleyiciler, yönergeler, kapsamlar, şablonlar, bağlantı işlevleri, filtreler ve bağımlılık ekleme dahil olmak üzere bir sürü kavramın öğrenilmesini gerektirir.

React ile tanışın

Facebook ve Instagram'ın yeni açık kaynaklı JS kitaplığı olan React, JavaScript uygulamaları yazmanın farklı bir yoludur. Mayıs 2013'te JSConf EU'da tanıtıldığında, “tek yönlü veri akışı” ve “Sanal DOM” gibi bazı tasarım ilkeleri izleyicileri şok etti.

Resmi React web sitesi, "React, kullanıcı arayüzleri oluşturmak için bir JavaScript kitaplığıdır" diyor ve evet, sadece arayüzler ve başka bir şey değil. AngularJS gibi bir çerçeve değil. Ancak, aşağı yukarı Angular yönergeleriyle karşılaştırılan bağımsız bileşenler yazabilirsiniz. Hızlı Genel Bakış

React, web geliştirmedeki en iyi uygulamaları yeniden düşünür. Reach, tek yönlü veri akışını teşvik eder ve bileşenlerin veriler tarafından yönlendirilen durum makineleri olduğu felsefesine inanır. Diğer çerçevelerin çoğu DOM ile çalışmak ve onu doğrudan manipüle etmek gibi olsa da, React DOM'den nefret eder ve geliştiriciyi ondan korumaya çalışır. React, yalnızca herhangi bir UI bileşenini tanımlamak için gereken temel API'yi sağlar, başka bir şey sağlamaz. Erişim, UNIX felsefesini takip eder: Küçük güzeldir. Bir şey yap ve en iyisini yap.

Bu, Pete Hunt tarafından ikisi arasında çok güzel bir karşılaştırma (Instagram ekibinden)

Bu sadece bir kütüphane. React ile bir çerçeveye ihtiyacımız var mı?

Kısa cevap: Seçiminiz.

React'i kullanarak kullanıcı arayüzleri oluşturabilirsiniz, ancak yine de bağımlılıkları yönetmemiz, AJAX çağrıları yapmamız, veri filtreleri uygulamamız gerekiyor. Bir çerçeveye ihtiyacımız varsa, neden AngularJS'den vazgeçelim?

Çerçeveler bir dizi paket ve bir dizi kuraldır. Ya bazı paketlere ihtiyacım yoksa veya başka bir paketle değiştirmek istersem. Nasıl yaparım? Bir paket yöneticisine ihtiyacımız var. AngularJS'de paketleri nasıl yönetiriz? Bu sizin seçiminiz, ancak Angular'ın kendi dünyası var. Her dış paketi Angular'ın dünyasına sarmanız ve sonra kullanmanız gerekecek. Ancak React yalnızca JavaScript'tir ve JavaScript ile yazılmış herhangi bir paketin React'te herhangi bir sarmaya ihtiyacı yoktur.

Bu nedenle, npm gibi bir paket deposundan kendi paketlerimizi seçip istediğimiz gibi düzenlememiz daha iyi olur. İyi haber şu ki, React birçok kullanıma hazır pakete sahip olan npm kullanımını teşvik ediyor. React'i kullanmaya başlamak için bu Full-Stack Başlangıç ​​Kitlerinden birini kullanmak isteyebilirsiniz.

React'in Avantajları

Peki neden gerçekten React'e geçtim?

Tepki hızlı!

React, diğer çerçevelerden farklı bir yaklaşım benimser. Doğrudan DOM ile çalışmanıza izin vermez. Bunun yerine, JavaScript mantığınızla gerçek DOM arasında bir Sanal DOM katmanı sunar. Bu, hızı önemli ölçüde artırmaya yardımcı olur. Ardışık oluşturmalarda, React Sanal DOM üzerinde bir fark gerçekleştirir ve yalnızca gerçek DOM'nin güncellenmesi gereken kısmını günceller.

Sanal DOM, Internet Explorer 8'de bile çalışan birleşik bir çapraz tarayıcı API'si sağladığından, tarayıcılar arası sorunların çözülmesine de yardımcı olur. (Vay canına!)

Her şey bir bileşendir (UI widget'ı)

Bağımsız UI bileşenleri yazmak, uygulamanızı modülerleştirir ve her biri için endişeleri ayırır. Her bileşen, ayrı ayrı geliştirilebilir ve test edilebilir ve sırayla, sürdürülebilirliği artıran diğer bileşenleri kullanabilir.

Kazanmak için tek yönlü veri akışı!

Flux, JavaScript uygulamalarında tek yönlü veri katmanları oluşturmaya yönelik bir mimaridir. Facebook'ta React view kitaplığı ile birlikte tasarlanmıştır. Geliştirmeyi kolaylaştırır ve hataları izlemeyi ve düzeltmeyi kolaylaştırır. Flux, bir uygulamadan çok bir kavramdır. Diğer çerçevelerde de uygulanabilir. Alex Rattray, React'te Backbone Collection ve Model kullanarak Flux'un çok güzel bir uygulamasına sahip.

JavaScript ve başka hiçbir şey

Modern web uygulamaları, geleneksel web'den farklı bir şekilde çalışır. Görünüm katmanının, sunucuya çarpmadan kullanıcı etkileşimleriyle güncellenmesi gerekir. Bu nedenle View ve Controller'ın birbirlerine çok fazla güvenmeleri gerekir. Diğer pek çok çerçeve, Görünüm katmanları için Gidon ve Bıyık gibi şablonlama motorlarını kullanır, ancak React, iki parçanın birbirine o kadar bağımlı olduğuna ve herhangi bir üçüncü taraf şablonlama motoru kullanılmadan ve kapsamı terk etmeden tek bir yerde bulunmaları gerektiğine inanır. JavaScript.

izomorfik JavaScript

Tek sayfa JavaScript web uygulamalarının en büyük dezavantajı, arama motorları tarafından tarandığında sınırlamaları olmasıdır. React'in bunun için bir çözümü var. React, sunucudaki uygulamaları tarayıcıya göndermeden önce önceden işleyebilir ve ayrıca sunucudan önceden oluşturulmuş statik içerikten canlı uygulamaya aynı durumu geri yükleyebilir. Arama Motoru Tarayıcıları, JavaScript yürütmesinden ziyade Sunucu Yanıtına büyük ölçüde güvendiğinden, bu tür uygulamaların önceden oluşturulması, Arama Motoru Optimizasyonunda yardımcı olur.

React, RequireJS, Browserify ve Webpack ile iyi çalışır

Büyük bir uygulama oluştururken yükleyicilere ve paketleyicilere çok ihtiyaç vardır. Ne yazık ki, JavaScript'in mevcut sürümü, bir modül paketleyici veya yükleyici sağlamaz, ancak bu, EcmaScript 6'nın (System.import) gelecek sürümünde önerilmiştir. Neyse ki RequireJS ve Webpack gibi oldukça iyi alternatiflerimiz var.

React, Browserify ile oluşturulmuştur, ancak görüntü varlıklarını enjekte etmek ve LESS veya CoffeeScript derlemek istiyorsanız, muhtemelen Webpack daha iyi bir seçenek olarak duruyor.

Biraz acıyla React'e geçtim.

• AngularJS bir çerçeve olduğundan, $http hizmetinde bir AJAX sarmalayıcı, söz verme hizmeti olarak $q, kontrol ifadeleri olarak ng-show, ng-hide, ng-class ve ng-if gibi birçok güzellikle birlikte gelir. şablon için.

• React bir çerçeve değil, kullanıcı arayüzünü oluşturmak için bir kütüphanedir, bu nedenle diğer tüm parçaları kendi başınıza düşünmeniz gerekir. Geliştirmenizi kolaylaştırmak için React ile kullanılabilecek açık kaynaklı bir proje üzerinde çalışıyorum ve topluluk da benzer yeniden kullanılabilir bileşenlere aktif olarak katkıda bulunuyor.

  React-components.com, bu tür açık kaynaklı bileşenleri bulabileceğiniz resmi olmayan bir dizin sitesidir.

• React'in felsefesi, form öğeleri ve düzenlenebilir veri ızgaraları ile uğraşırken size çok fazla acı veren iki yönlü bağlama kullanmaya teşvik etmez. Ancak Flux veri akışını ve Depoları anlamaya başladığınızda işler daha net, daha basit ve daha kolay hale gelir.

React yeni ve bu nedenle topluluğun büyümesi biraz zaman alacak.

Angular, son zamanlarda büyük bir popülerlik kazandı ve AngularUI ve Restangular gibi nispeten çok sayıda uzantıya sahip. React'in açık kaynak topluluğu yenidir, ancak React Bootstrap gibi uzantılarla hızla büyüyor. Daha fazla bileşene sahip olmamız an meselesi ve React, hızlı web uygulaması geliştirme için kolayca kullanılabilir.

Çözüm

Daha önce AngularJS kullandıysanız, başta tek yönlü veri akışı ve diğer birçok şeyi kendiniz halletmeniz gereken “çerçeve” eksikliği nedeniyle React'ten ilk başta nefret edebilirsiniz. Ancak Flux tasarım deseni ve React'in felsefesiyle kendinizi rahat hissettiğinizde, bunun güzelliğini anlayacaksınız.

Facebook ve Instagram, React'i kullanır. Github'ın yeni Atom Düzenleyicisi, React kullanılarak oluşturulmuştur. Yaklaşan Yahoo Mail, React'te yeniden inşa ediliyor. Başka hangi örneklere ihtiyacınız var? React'i bugün deneyin.