it-swarm.asia

Facebook'un Artıları ve Eksileri React ve Web Bileşenleri (Polimer))

Facebook'un Tepki yaklaşan Web Bileşenleri spesifikasyonları ve tersi (veya belki de daha fazla elma) elma karşılaştırması Google'ın Polimer kütüphanesi) olur mu?

bu JSConf AB konuşmasına ve React ana sayfasına) göre React) ana faydaları:

  • Bileşen modeli kullanarak ayırma ve artan uyum
  • Soyutlama, Kompozisyon ve Anlatım
  • Sanal DOM ve Sentetik etkinlikler (temel olarak DOM ve etkinlik sistemini tamamen yeniden uyguladıkları anlamına gelir)
    • IE 8 üzerinde modern HTML5 etkinlik öğelerini etkinleştirir
    • Sunucu tarafı oluşturma
    • Testedilebilirlik
    • SVG, VML ve <canvas>

Bahsedilen hemen hemen her şey, bu sanal DOM konsepti (tabii ki) dışında Web Bileşenleri aracılığıyla yerel olarak tarayıcılara entegre edilmektedir. Sanal DOM ve sentetik olayların eski tarayıcıları desteklemek için bugün nasıl faydalı olabileceğini görebiliyorum, ancak uzun vadede kendinizi ayağa vurmak gibi büyük bir yerel tarayıcı kodu atmak değil mi? Modern tarayıcılar söz konusu olduğunda, bu tekerleğin gereksiz ek yükü/yeniden icadı değil mi?

İşte düşündüğüm bazı şeyler React Web Bileşenleri'nin sizin için ilgileneceğinden yoksun. yanılıyorum.

  • Yerel tarayıcı desteği ("daha hızlı olması garanti edilir" bölümünü okuyun)
  • Komut dosyası komut dosyası dilinde yazma, stil dillerinde stil yazma, biçimlendirme dilinde işaretleme yazma.
  • Shadow DOM kullanarak stil kapsülleme
    • React bunun yerine buna sahiptir, bu da JavaScript'te CSS yazmayı gerektirir. Güzel değil.
  • İki yönlü ciltleme
528
CletusW

React adamların React ve Web Bileşenleri arasındaki karşılaştırmalarda oldukça iyi bir açıklama var:

React ile WebComponents arasındaki karşılaştırmayı denemek kaçınılmaz olarak çok büyük sonuçlara yol açar, çünkü iki kütüphane farklı sorunları çözmek için inşa edilmiştir. Web Bileşenleri, yeniden kullanılabilir bileşenler için güçlü bir kapsülleme sağlarken, React, DOM'yi verilerinizle senkronize tutan bir bildirici kitaplık sağlar. İki hedef birbirini tamamlar; mühendisler teknolojileri karıştırabilir ve eşleştirebilir. Bir geliştirici olarak, Web Bileşenlerinizde React kullanma veya React'te Web Bileşenleri veya her ikisini birden kullanabilirsiniz.

17
Erik Kaplun

Polimer harika. React harika. Aynı şey değiller.

Polimer, geriye dönük uyumlu web bileşenleri oluşturmak için bir kütüphanedir .

Reaksiyon, MVC'deki V'dir. Görünüm ve başka bir şey değil. En azından kendi başına değil.

Tepki bir çerçeve değil.

React + Flux + Node + (Gulp veya Grunt) bir çerçeve ile daha karşılaştırılabilir, ancak bunlardan 3 tanesi hiç tepki vermez.

Geliştiricilerin izlediği tepki veren birçok teknoloji, desen ve mimari stil vardır, ancak kendisine tepki veren bir çerçeve değildir.

Kimsenin mümkün olan en basit şeyi söylemek için zaman ayırmaması, karşılaştırılmaması üzücü. Biraz örtüşmeleri var, ama aynı şeylerden daha farklılar.

Her ikisi de web bileşenlerini tanımlamanıza izin verir, ancak farklı şekillerde. Bunun ötesinde çok farklı araçlar.

17
Robotsushi

Bir noktada başka bir cevap özellikle:

Vanilya JavaScript'te JavaScript, CSS'de CSS, HTML'de HTML yazın.

Hiçbir şey, JavaScript, örneğin, JavaScript, TypeScript, ClojureScript veya başka bir şeyle Javascript yazmanızı engellemez. Bu tamamen bir tercih meselesi.

HTML statik HTML belgeleri için en iyi DSL'dir. Ancak dinamik HTML için hiçbir şey sağlamaz. Ve tarayıcıda, HTML dinamik yapmak için en iyi dil Javascript'tir, geçici Javascript DOM manipülasyonlu saf HTML veya yarım dil bile olmayan gidonlar gibi şablon dilidir.

CSS için, CSS'niz statikse her zamanki gibi yazarsınız. Bazı çalışma zamanı değerlerine dayalı olarak dinamik olması gerekiyorsa, HTML ile aynı hikaye: Javascript, dinamik hale getirmenin en iyi yoludur.

15
DjebbZ

Web Bileşenlerini kullanmadım, ancak olay işleyicilerine manuel olarak kodlanmış mutasyon mantığı eklemenizi gerektiriyorlar.

snippet = Polymer örnek:

 <script>
   Polymer({
     counterChanged: function() {
       this.$.counterVal.classList.add('highlight');
     },
 ...

React) tüm mesele mutasyon mantığını ortadan kaldırarak karmaşıklığı azaltmaktır. Bunun yerine sanal bir DOM'yi saf bir şekilde yeniden oluşturuyor ve React'in diff algoritmasının gerçek DOM'da neyin değişmesi gerektiğini bulmasına izin veriyorsunuz.

6
limscoder

Bence React en büyük dezavantajı, bu web standartlarına dayanmıyor olmasıdır. React şu anda çok güçlü bir araçtır, ancak tarayıcının mümkün olan her şeyi sağladığından, şimdi mantıklı görünen kararlar tarayıcılar gibi birkaç yıl içinde anlamlı olmayacaktır. yerleşik tesisler gelişmeye devam ediyor. Bu yüzden ve bunun web uygulamalarının birkaç farklı yönünü nasıl etkilediğinden bahsetmek istiyorum.

Performansı

İnsanlar React'in avantajının tüm DOM ve etkinlik modelini tamamen yeniden icat ettiğini ve mevcut standart DOM'un ağır ve pahalı olduğunu ve ne olmadığını değil, ancak günün sonunda performansını bulamadığımı iddia ediyorlar. React iyi yazılmış bir Omurga veya Polymer uygulamadan elde edebileceğimden daha iyi olmak. Aslında, mesleki deneyimimin çoğunda, React performansı aslında biraz daha kötü oldu. Bu React yavaş demek değil ... Ellerimizi yakalamadan önce hepimizin düşündüğümüz kanayan Edge performans seçimi değil.

Rsp'nin cevabında, React'in bir div için DOM modelinin yerel DOM div'den çok daha hafif olduğunu ve bu kesinlikle doğru olduğuna dikkat çekiyor. Ancak, React'nin yararlı olması için, bu 'sanal' div bir noktada gerçek bir div olmak zorunda. Benim dünya görüşüme göre, bu bir React div ile yerli bir div meselesi değil. Bu bir React div + yerel bir div ile yalnızca yerel bir div. React'in DOM sürümünün ek yükü önemsizdir ve standartlar bu gereksiz özelliklerden bazılarını düşürürse ve yerel DOM düğümlerinin çok daha hafif olmasına izin verirse, aniden ek yük gerçekten pahalı görünecektir.

Daha önce çalıştığım yerlerden birinde Polimer'de bazı uygulamalar ve React'te bazı uygulamalar vardı. İlk Polymer uygulamalarından biri React içinde yeniden yazıldı, çünkü şirketin standardı buydu ve ölçümlere dayanarak Reactaldım Aynı uygulamanın _ sürümü Polymer sürümünden yaklaşık% 30 daha fazla bellek kullanarak sarıldı ve fark marjinal olsa da, Polymer sürümü de daha kısa sürede işlendi. Burada dikkate alınması gereken bir şey, insanlar tarafından yazılan uygulamalar hakkında konuştuğumuz ve insanların mükemmel olmadığıdır, bu nedenle bu uygulamanın React uygulamasının her şeyden faydalanmaması mümkün olabilir React yapabilir. Ama en azından bir kısmının React ek yükü ile ilgisi olduğunu düşünüyorum.

React, kendi modelini kullanarak tüm DOM'u yeniden davet eder ve daha sonra bunu büyük bir performans optimizasyonu için kullanır. Bir görünüm sanal bir DOM'a dönüştürülür ve bu gerçek DOM'a yansıtılır. Bir değişiklik olduğunda ve görünümün güncellenmesi gerektiğinde, görünüm tekrar sanal bir DOM'a yeniden işlenir ve bu değişikliği yansıtmak için gerçek DOM'da hangi düğümlerin değiştirilmesi gerektiğini belirlemek için bu ağaç önceki ağaca göre ayrılır. görünümde. Bu, etkili DOM güncellemeleri yapmak için çok akıllı bir yaklaşım olsa da, tüm bu sanal DOM ağaçlarının bakımında ve gerçek DOM'da neyin değişeceğini belirlemek için onları ayırmada genel bir kafa vardır. Şu anda, bu ek yük performans faydalarıyla büyük ölçüde dengelenmektedir, ancak yerel DOM zaman içinde iyileştikçe, ölçek diğer yönde kayacaktır. React uygulamalarının yaşlanmasından endişe ediyorum ve 3 yıl içinde DOM ile daha doğrudan ilgilenen şeylerden çok daha yavaş olacaklar. Bu sanal DOM yaklaşımı bir kızak çekiçidir ve Polymer gibi diğer kütüphaneler, DOM ile çok daha ince bir şekilde başa çıkmak için çok verimli yaklaşımlar uygulayabilmiştir.

Performans güncellemesi: Bir süredir karşılaştığım kütüphanelerden biri, DOM güncellemelerini yönetmenin daha iyi bir iş olduğunu düşündüğüm şeyi yapıyor. Bu, Google'ın Artımlı Dom kütüphanesi ve bence dom ile yerinde çalıştığı ve 'sanal kopya' oluşturmak zorunda olmadığı gerçeği, çok daha az bellek yükü ile çok daha temiz bir yaklaşım. Buradan daha fazlasını görün: http://google.github.io/incremental-dom/#about

Bildirici ve zorunlu bileşenler

Uygulamanızı bileşenlendirmeyle ilgili konuşurken her zaman duyduğunuz şeylerden biri, bileşenlerinizin bildirimsel olmasının tüm faydalarıdır. React dünya görüşünün içinde her şey güzel ve açıklayıcıdır. İşaretleme döndüren JavaScript yazarsınız ve React hepsini sizin için yapıştırır. Ve sadece React ve başka bir şey kullanan yepyeni bir uygulama ile uğraşıyorsanız bu harika. Bir bileşen yazabilirsiniz ve React sahip olunan DOM parçasının içinde olduğunuz sürece, bileşeninizi tüketmek için bu etiketi sayfaya koymak kadar basittir.

Ancak bu bileşenleri alıp React dışında kullandığınız anda işler daha da karmaşıklaşır. React bileşenlerinin etiketlere dönüştürülme şekli, web standartlarının sağladığının tamamen dışında olduğundan, React dışında hiçbir şey size bu bileşenleri nasıl tüketeceğinizi nasıl bildireceğinizi bilmez. React bileşenlerini Gidon şablonları kullanan mevcut bir Omurga görünümüne koymak istersem, şablonunuzda tanıtıcı olarak kullanabileceğiniz bir sınıf veya kimlikle kukla bir div oluşturmanız ve ardından o kukla div'ı bulun ve bileşeninizi ona monte edin. Sunucu tarafı şablonları kullanan bir Express.js uygulamanız mı var? Aynı şarkı ve dans. JSP sayfası mı? Gülüyorsunuz, ama onları hala kullanan bir sürü uygulama var. Mevcut bir kodu olmayan bir tür başlangıç ​​yapmadığınız sürece, React bileşenlerinizi birçok uygulamada yeniden kullanmak için bir miktar tesisat yazmanız gerekecektir. Bu arada, Polymer, Web Bileşenleri standardı aracılığıyla bileşenlere ulaşır ve Özel Öğe spec'i kullanarak Polymer, tarayıcının yerel olarak nasıl tüketeceğini bildiği bileşenleri yazar. Bir Polymer bileşenini bir JSP sayfasına, bir Express.js şablonuna, bir ASP.NET görünümüne, bir Omurga görünümüne ... bir React bileşeninin içine bile koyabilirim. Kelimenin tam anlamıyla HTML kullanabileceğiniz her yerde, bir Polymer bileşeni tüketebilirsiniz. Yeniden kullanım için mühendislik yapan insanlar web standartlarını arıyor, çünkü standartlar işleri birbiriyle uyumlu hale getirmeyi kolaylaştıran sözleşme. YouTube Polymer (kaynak: http://react-etc.net/entry/youtube-is-being-rebuilt-on-web-components-and- polimer ) ve bunun nedenini sadece Polymer 'in standartlara dayalı yönünü hayal edebiliyorum. YouTube sayfasının ortasındaki YouTube oynatıcının bir içerik kaynağını mülk olarak alan bir bileşene dönüştürülebileceği ve aniden YouTube oynatıcısını sayfalarına gömmek isteyen herkes, kelimenin tam anlamıyla YouTube'un kullandığı oynatıcı kodunun tamamını kullanabilir ve bunu bir etiketi sayfalarına yapıştırarak yapabilirler.

Özet

Ben kesinlikle şu anda React çekici bazı yönleri olduğunu görebilirsiniz. Kullandığınız tek şey React ise, bazı widget'lar ve bazı bileşenler oluşturabilir ve bunları beyan edici bir şekilde yeniden kullanabilirsiniz. Ama sanırım React, bir Web tarayıcısının standartlarını kullanarak tarayıcı ve karmaşık bir mekanizma oluşturmak yerine, ne yaptığını başarmak için çok daha iyi olurdu. her şeyi senkronize tutmak.

6
Dogs