Natalia Tepluhina ile Çarpıcı Podcast Bölüm 26: Vue 3.0'daki Yenilikler?

Bu podcast bölümünde, tamamen VueJS hakkında konuşuyoruz. 3.0 sürümündeki yenilikler ve geçiş yapmak ne kadar zor olacak? Drew McLellan, öğrenmek için çekirdek ekip üyesi Natalia Tepluhina ile konuşuyor.

Notları göster

• VueJS
• Vue 3 Taşıma Kılavuzu
• Twitter'da Natalia
• Natalia'nın kişisel web sitesi

Haftalık güncelleme

• Dijital Ürün Sayfaları Tasarlamanın Farklı Yolları
  Suzanne Scacca'nın yazdığı
• React Native Uygulamalarında Birim Testi
  Fortune Ikechi tarafından yazıldı
• Google Analytics'in UI/UX Tasarımında Web Geliştiricilerine Yardımcı Olmasının 5 Yolu
  Clara Buenconsejo tarafından yazıldı.
• TypeScript Jeneriklerini Anlama
  Jamie Corkhill'in yazdığı
• Tipografi ile Etkileşim İçin Yüz Hareketi Nasıl Kullanılır?
  Edoardo Cavazza'nın yazdığı

Transcript

Drew McLellan: Tutkulu bir web geliştiricisi, bir Google Developer uzmanı ve bir konferans konuşmacısı ve yazarıdır. Şu anda GitLab'da Personel Ön Mühendisidir, ancak onu en iyi Vue JS Çekirdek Ekibi üyesi olarak tanıyor olabilirsiniz. O kadar net ki, Vue'yu neredeyse herkesten daha iyi biliyor. Ama bir zamanlar bir kanguruya şarkı söylemeyi öğrettiğini biliyor muydunuz? Smashing arkadaşlarım, lütfen Natalia Tepluhina'ya hoş geldiniz.

Drew: Merhaba Natalia, nasılsın?

Natalia Tepluhina: Merhaba Drew, bu benim soyadım için gerçekten güzel bir girişimdi. Sana kredi vermem gerekiyor. Soyadımı telaffuz etmeye çalıştıklarında İngilizce konuşanlardan duyduğum en iyi şeylerden biriydi. Rusça konuşmuyorsan bu mümkün değil sanırım. Telaffuz doğru Tepluhina, ama sanki bu yüzden genellikle insanlardan bana Natalia demelerini istiyorum ve bunda duralım.

Drew: Tamam, peki, çaba sarf ettim. Ama önemli soru şu ki, Smashing misin?

Natalya: Tabii ki öyleyim.

Duru: Bu iyi. Bu yüzden bugün sizinle Eylül ayında Vue 3.0'ın piyasaya sürülmesiyle birlikte gerçekten heyecan verici bazı haberler hakkında konuşmak istedim. Sürüm numarası açısından büyük bir sürüm oldu ama gerçekten Vue için büyük bir sürüm ve uzun süredir üzerinde çalışıyor, değil mi?

Natalya: Öyle. Sanırım ilk olarak 2018'de üçüncü versiyonu duyurmuştuk. Sanırım ilkbaharda duyurulmuştu ve asıl çalışma başladı, yani fikirler ilkbahardaydı, asıl çalışma 2018 Sonbahar'da başladı. Ve sanırım Ekim 2018'de gerçekleşen Londra Konferansı'nda resmen duyuruldu. Aktif çalışma iki yıl sürdü. Ve düşünürseniz çok fazla, önceki sürüm 2016'da yayınlandı. Yani bu dört yılın yarısı aynı zamanda Vue 3 çalışmasına adandı.

Drew: Yeni bir ana versiyonun istenmesine karar vermede ne tür bir motivasyon faktörü vardı? Büyük bir sürüm üzerinde çalışacağız, Vue 3 üzerinde çalışacağız gibi bilinçli bir karar mıydı, yoksa sadece bir sürüm yükseltmesi gerektiren bir çeşit değişiklik birikimi miydi?

Natalia: Hayır, birkaç önemli şey nedeniyle yeni bir sürüm oluşturmanın bir fikir olduğunu düşünüyorum. Yani her şeyden önce, tepkiselliği değiştirmek için bir motivasyon vardı. Bir önceki Object.defineProperty üzerine inşa edilmişti. Ve birkaç uyarısı vardı, hepsi belgelendi ama yine de. Bilirsiniz, insanların yapmaması gereken bir şeyi belgeleseniz bile, yine de yapacaklardır. Ve onları belgelere yönlendirmeniz gerekir. Bu arada kimse belgeleri okumuyor. Nedense öyle oluyor. İnsanları işaret edene kadar, belgelerde mevcut değil. Ama tamam. Yine de sana öğreteceğiz. Yani reaktivite şeylerden biriydi.

Natalia: Sırada performans vardı. Vue 2 hala en kötü performansa sahipti ve olmadı, ancak Vue'yu nasıl daha hızlı hale getireceğimiz konusunda birkaç fikrimiz vardı. Ayrıca Vue kullanan kişilerin, diyelim ki hedef kitlemizin belirli bir kısmı için bir acı noktası vardı. TypeScript'ti. Vue 2 dahili olarak Flow'da yazılmıştır, bu hala güçlü bir şekilde yazılmıştır, ancak TypeScript ile yazmak özellikle durum yönetimimiz Vuex ile çalışıyorsanız gerçek bir kabustu. Bu yine büyük bir bölümdü. Ve sonuncusu, bileşenler değil, birleştirilebilir mantık parçaları açısından soyut mantığın işlevselliğini bir şekilde kaçırdık. İşlev yardımcıları vb. gibi, ancak izleyici etkinliğini de içerebilmelidirler. Burada güzel bir örnek React Hooks olabilir, tam olarak işlevselliğin parçalarını soyutlamanıza izin veriyorlar ve bu Vue'da açıkça eksikti. Ve şu anda kulağa "React'ten özelliği çaldın" gibi geldiğini biliyorum. Aslında değil. Fikirler arası tozlaşmanın ekosistemimizin büyük ve güzel bir parçası olduğuna ve geliştiricilerin favoriler arasında geçiş yapmasına yardımcı olduğuna inanıyorum, değil mi?

Natalia: Vue 3'ü ana sürüm olarak oluşturmak için bu ana özellikler üzerinde çalışıyorduk.

Drew: Şimdi, bence açık kaynak ekosisteminde var olmanın en güzel yanlarından biri, her türden farklı projeden elde edilen çok sayıda fikir ve deneyimin olması ve bu fikirleri ödünç alma ve deneyimi başkalarından ödünç alma yeteneğidir. projeler gerçekten faydalıdır ve her şeyi güçlendirir, değil mi?

Natalya: Öyle. Bence GitLab'da yineleme değeri dediğimiz şekilde çalışıyor. Bir fikir bulduğunuzda, asla mükemmel değildir. Çoğunlukla çok ham, çok zor kodlanmış bir şey gibi. Belki bir şeyleri değiştirebilirsin, ama kesinlikle mükemmel değil. Ve bu fikri gerçekten iyi, hatta mükemmel değil, sadece iyi yapmak için birkaç tekrara ihtiyacınız var. Ve ekosistemdeki fikirlerle olur. Birisi iyi bir fikir bulur ve sen onu alırsın ve onu gitgide daha iyi hale getirirsin. Ve bahse girerim, Vue'dan bazı fikirler alacak bir şey olacak, belki de zaten bazı fikirleri Vue'dan almışlar ve daha iyi hale getiriyorlar ve burada kötü bir şey yok.

Natalia: "Fikirleri çalıyorsun" gibi şeylere şiddetle karşıyım. Bu çalmak değil, bu sadece çapraz tozlaşma.

Drew: Aynen öyle. TypeScript'e geçişin, yani Vue 3'ün artık TypeScript kullanılarak yazıldığından bahsettiniz, bu doğru mu?

Natalia: Evet, evet öyle. Ve güven bana Drew, Vue'nun TypeScript ile nasıl kullanılacağına dair küçük belge olan belgeleri yazıyordum. Ve ben, tamam, muhtemelen bir şekilde Vue 2 gibiydim. Ve belgeyi o kadar fazla karmaşık hale getirdim ki, her şeyi açıkça yazıyor gibiydim. İyi görünüyor, her şey yazılıyor. Tipleri görebiliyorum, bu yüzden ts-link'im mutlu, şimdiye kadar çok iyi. Sonra TypeScript ile çalışan geliştiricilerimizden biri "Bunu yapmanıza gerek yok" dedi. Nasıl, nasıl? “Verilere açık tipler yapmanıza gerek yok. Sadece ona bir başlangıç ​​değeri verirsiniz ve ts-link numarasını bilir. Zaten yazılmış." Nasıl olur? “Belgedeki açık türlerin %90'ını kaldırdım. Gerçekten yazmanız gereken sadece iki şey var, bileşenin proxy'si ve hesaplanan özellikler olacaktır. Hala iade türleri gerektiriyorlar. Ama gerisi, otomatik olarak yazılan gibidir, sadece tanımlı bileşen dediğimiz yöntemle bir bileşen yazın. Ve bu kadar. Yazılı."

Natalia: Sanki, işe yarıyor gibiydi. Ve benim için ve geçmiş deneyimimde Angular ile çok çalışıyordum, TypeScript için Stockholm Sendromu'na sahibim. Her şey açıkça yazılmalıdır. Yani eğer karmaşık tipleriniz varsa elbette interface yazmanız gerekecek ama TypeScript böyle işliyor. Yine de, TypeScript ile çalışmak Vue 3 ile şu anda çok daha kolay.

Drew: Bu harika, yani hem Vue Çekirdek Projesi için hem de Vue kullanarak uygulamalar oluşturan geliştiriciler için bir avantaj çünkü artık TypeScript'i uygulamalarında Vue ile güzel bir şekilde kullanabiliyorlar, burada 2.0, yani herhangi bir sürümle yapamıyorlar 2.0 çok kolay. Vue topluluğuna aşina olanlar, Vue'nin yaratıcısı Evan You'nun hala projeyi çok aktif bir şekilde yönettiğinin farkında olacaklardır. Çekirdek Ekip nasıl çalışır? Geliştirme süreci söz konusu olduğunda nasıl yapılandırılır? Hepsi Evan değil, değil mi?

Natalia: Bu harika bir soru Drew, çünkü yıllardır, kelimenin tam anlamıyla insanlar Vue hakkında konuşuyorlardı, bunu alıntılıyorum ve kulağa sert gelebilirim ama üzgünüm, "Çinli bir kişinin çerçevesi, hatta Çin çerçevesi gibi" gibi. . Vue 1.X ile bile, zaten bir ekip vardı ve Vue 2'nin arkasında büyük bir ekip ve Vue 3'ün arkasında daha da büyük bir ekip vardı. Vue hakkında konuştuğumuzda hepimizin farklı sorumlulukları var.

Natalia: Core üzerinde çalışan insanlar var ve bu sadece Evan'ın kendisi değil, işin çoğunu kesinlikle Vue Core üzerinde yapıyor ve aynı zamanda projeye de liderlik ediyor. Ama Vue Core'da çalışan insanlar var ve onların katkıları kesinlikle paha biçilemez. Ve Core'da çalışan Vue ekibine katılan birkaç yeni insan var. Ayrıca ekosistem üzerinde çalışan daha küçük ekipler var, Pure Router üzerinde çalışan insanlar var, Eduardo gibi, Vue CLI üzerinde, Vuex üzerinde, dokümantasyon üzerinde de çalışan insanlar var.

Natalia: Dokümantasyonun önemli olduğuna inandığımız için dokümantasyon üzerinde çalışan koca bir ekip var. Ve şu anda web sitemizde Çekirdek ekibe ait 21, 20 veya 21 kişi olduğunu düşünüyorum, her zaman sayımı özlüyorum, ancak bu statik bir liste değil. Çünkü biz açıkçası işe almıyoruz, açık kaynak ekibiyiz, bu ücretli bir iş değil. Ancak, birileri Vue ekosisteminin herhangi bir bölümüne çok katkıda bulunuyorsa, insanlar zaten Çekirdek ekip üyesinin işini yapıyorsa, bunun sadece, depolara ve resmi unvana yalnızca erişimle tanınmalarını sağladığına inanıyoruz.

Drew: Bu harika çünkü açık kaynaklı bir projeye katkıda bulunmanın bir kişiye gerçekten geri ödeme yapabileceği bir durum. Biraz tanınırlar ve bu, profesyonel kariyerinizde ve sizde ne varsa bir etkisi olabilir.

Drew: Vue'ya alışkın olmayan ama belki de React, Angular ve benzeri bildiğiniz gibi diğer reaktif çerçevelere aşina olan dinleyiciler için. Vue 3'teki büyük, tür manşet değişiklikleri nelerdir ve özellikle hangi sorunları çözmeye çalışıyorlar? Kompozisyondan daha önce bahsettiniz, bu şeylerden biri, büyük değişikliklerden biri mi?

Natalia: Evet, bu en büyük değişikliklerden biri ve aslında her şeyden önce, burada net bir açıklama yapmama izin verin gibi şeylerden biri. Kompozisyon API'si tamamen katkıdır. Bileşenlerinizi yeniden yazmanız gerekmiyor, onlara TypeScript ekleyebilirsiniz. Veya tüm sözdizimini kullanmayı tercih edebilirsiniz, şimdi buna Seçenekler API'si diyoruz ve bu koşullarda sizin için hiçbir şey değişmeyecek. Yeni API'den bahsettiğimizde, bu bir kırılma değişikliği değil. Bunu gerçekten vurgulamak istiyorum, söylemek gerçekten önemli çünkü Kompozisyon API'sini ilk duyurduğunda korkunç bir andı.

Natalia: Sanırım değişiklikleri gerçekten güzel bir şekilde tanımlayamadık ve standart yapının Kompozisyon API'si olacakmış gibi görünmesini sağladık. Tamamen bizim hatamız ve seçenekler gibiydi, belki Vue 3'te değil, gelecekteki yapılarda kullanımdan kaldıracağız. Ve insanların yanlış söylediklerini okuma ihtimalleri varsa, yanlış okuyacaklardır.

Natalia: Bu açıklamadan hemen sonra, değişikliği önerdiğimiz yer RFC'ydi, Reddit patladı. Reddit, “Aman tanrım. Her şeyi yazmam gerekecek. Aman Tanrım. Vue yeni Angular'dır. Her şeyi bozacaklar." Ve dev.to'da Vue's Darkest Day adlı bir makale hazırlayan bir adam vardı. Dürüst olmak gerekirse, en karanlık bir gündü. Öyle hissettik ama kendi Twitter'ımda bununla bir nevi mücadele etmeye çalışıyordum, “Biz aslında değiliz… RFC'yi değiştirmeye başladığımızı söylüyorlardı, bence Evan değişiklikleri duyurmadan RFC'yi değiştirmeye başladı. Bu yüzden, “Bunu çabucak yeniden yazacağım. Hadi ustaya doğru itelim”. İnsanlar bu duruma çıldırdı. Belirli noktalar hakkında tartıştıkları için, bir sayfayı yenilersiniz ve bu noktalar artık yoktur. Aptal mıyım, yoksa sadece... Ne var? Demek tam oradaydı. Bunu hatırlıyorum. Ve iletişim stratejimizin daha iyi olabileceğine inanıyorum ve bu biz değiliz.

Natalia: Şu anda, ne zaman kompozisyon hakkında konuşsam, bu tamamen katkıdır millet. Bu sadece güzel bir özellik. Kullanabilirsin, kullanamazsın, mecbur değilsin. Sadece… O var.

Drew: Composition API'nin bu sorundan kurtulmalarına yardımcı olan yeni bir şey olduğu yerde, birinin kendilerini bu soruna sokabileceği türden bir sorun nedir? Hangi sorunu çözüyor?

Natalia: İçinde birkaç özelliği olan bileşeni hayal edin. Diyelim ki arama ve sıralama. Diyelim ki belirli bir listeyi arıyoruz ve sıralamaya çalışıyoruz. Bu zaten iki farklı özelliktir ve Vue bileşenlerinde olan şey, mantığa göre değil seçeneklere göre ayrıldıklarıdır. Aramanızın muhtemelen bir sorgusu olduğunu hayal edin, çünkü arama yapmak ve sonuç dizisini yapmak için bir sorgu yapmanız gerekiyor. Ve bunlar iki reaktif özelliktir. Bileşeniniz açısından, onları veri adı verilen seçeneğe koyarsınız. Ve açıkçası, sıralamayı gerçekleştirmek için bir yönteme ihtiyacınız var. Belki bir düğme tıklaması, belki başka bir şey, aramayı çalıştıran bir şey. Yöntemi siz yaratırsınız. Ve sıralama için, başka bir reaktif özellik olan sıralama seçenekleri üzerine bir şeyler inşa etmeniz gerekir. Sonra sonuçları sıralamak için bazı hesaplamalar yaparsınız.

Natalia: Vue'da bunun için başka bir seçenek olan hesaplanmış özelliklere de sahipsiniz. Sonunda, bileşeniniz gerçekten parçalandı. Ve bir geliştirici olduğumu ve yalnızca arama kısmında çalışmak üzere bir görevim olduğunu hayal edin. Bileşeni şu anda bölemem, çünkü bu iki özellik kendi aralarında bir tür kesişme noktasıdır. Bazı sonuçları arar ve sıralarım. Ve verilerden yönteme, yöntemden hesaplamaya atlamam gerekiyor ve sonunda bağlamı değiştirmek gerçekten zor. Özellikle bileşen gerçekten büyürse.

Natalia: Vue 2.0'da hangi seçeneklerimiz vardı? İlk seçenek mixins olarak adlandırıldı ve mixin sadece bileşenin sahip olabileceği aynı özellikleri içerebilen bir nesnedir ve biz bunları bir bileşenle karıştırıyoruz. Kulağa hoş geliyor, tüm aramamı oraya taşıyabilirim ve sorun nedir? Birkaç tane var. İlk olarak, bu tamamen esnek değildir. Belirli bir bitiş noktası aramak istersem ve bunu mixin'e taşırsam, arayabileceğim tek bitiş noktası bu olacaktır. Mixin'ler parametreleri kabul etmez. Bir mixin oluşturdum, tamamen statik. İkinci sorun, mixin'in karıştırılmasıdır, bu da belirli özellikler için bir birleştirme gibi gerçekleştiği anlamına gelir. Örneğin, kancalar oluşturduysanız, bunlar birleştirilecektir. Karıştırma bileşeninden yaşam döngüsü kancasındaki tüm mantık birleştirilir. Ancak bir data özelliğiniz varsa, mixin'de soğuk bir sorgu varsa ve muhtemelen bileşende aynısına sahipseniz, bileşenin bir önceliği vardır. Geçersiz kılınacak. Hiçbir uyarınız olmayacak. Kesinlikle. Bu sadece olacak ve bunun olduğu hakkında hiçbir fikriniz olmayacak.

Drew: Tüm kapsam tamamen karıştı mı?

Natalia: Evet, tamamen. Görme şansınız yok ve ayrıca karışımlar çok belirsiz bir kaynak. Sadece adı olan karışımı içe aktarın ve bileşen özelliği karışımını görüntülemek için koyun, bu kadar. Bu çok örtük ve bundan kendi deneyimlerime göre konuşuyorum. GitLab'da bir bileşenin iki karışım içerdiği ve bu iki karışımın her birinin başka bir karışım içerdiği bir mantığımız var. Ve işte burada, işte kontrol etmeniz gereken ve bileşende olmayan bir özellik. Daha derine inelim, birinci seviye miksaj. Bu onu içermiyor ve bu da onu içermiyor. Nerede? Sadece bu özelliği bulmak için derinlere, tavşan deliğinin daha da derinlerine dalıyorsunuz ve testler de bir kabusa dönüşüyor.

Natalia: Mixin'ler, mantık çıkarmanın çok aptalca yolları. Sadedir, nettir, elde edilmesi çok kolaydır. Bununla ileri düzeyde çalışmak istiyorsanız size çok fazla sorun getiriyor. Vue 2.0'da mantığı soyutlamanın bir sonraki yolu, renderless bileşenleriydi. Vue'da bileşen bir yuva içerebilir. Temel olarak, ana bileşenden herhangi bir şey koyabileceğiniz bir parça. Küçük bir pencere, aslında bir yuva. Ve kapsamlı yuvalar fikri var. Kendi kapsamını üst öğeye geri gösterebilen alt bileşenin ve yuva içeriğinin buna erişimi olacağını hayal edin. Yuvalı bir bileşenim olduğunu ve bileşenin arama ile ilgili tüm mantığı gerçekleştirdiğini, diyelim ki geçmiş parametrelerle bir bitiş noktası olan aramayı gerçekleştirdiğini hayal edin. Alt bileşenimiz, aramayı sever ve ardından kapsamının bu bölümünü üst öğeye geri sunar. Bunlar arama sonuçları. Eğlence. Kulağa iyi geliyor. Mixin'lerden kesinlikle daha iyi geliyor. Parametreleri test edebiliriz. Buradaki mantık açık, bir şey döndürüyoruz. Konular? Birkaç tane var.

Natalia: Her şeyden önce, bileşen örneğinizi oluşturdunuz. Bu dünyadaki en ucuz operasyon değil. İkinci kısım, çalışma zamanı. Bileşen yalnızca çalışma zamanında çalışır ve bu, bu bileşenin açıkta kalan özelliğinin yalnızca onu bir yuva kapsamı olarak gösterdiğiniz yuvada mümkün olacağı anlamına gelir, bu nedenle arama sonuçlarınız şablonunuzun yalnızca küçük bir bölümünde kullanılabilir. Bileşenin ayrık kısmıyla oynamak istiyorsanız, oraya erişiminiz yoktur. Çalışma zamanı. Başka bir yerde reaktif bir duruma ihtiyacınız varsa bu mantığı harekete geçirmek yoktu. Tabii ki, salt bir işlev gibi bir yardımcı oluşturabilir ve sonuçları döndürebilir, ancak, ya reaktif özellikler için çalışmam gerekirse? Composition API böyle oluşturuldu. Composition API ile bağımsız reaktif duruma sahip olabilirsiniz. Reaktif durum artık sadece bileşenin bir parçası değil. Herhangi bir nesneyi veya ilkel, reaktif yapabilirsiniz. Ve onu tekrar ebeveyne gösterebilirsin, bu çok açık.

Natalia: Ebeveynine iade etmek istediğin her mülk açığa çıkıyor. Açıktır, buna tıklayabilirsiniz, nerede olduğunu, ne olduğunu vb. görebilirsiniz. Ve en iyi yanı, Composition API'nin bir kısmını veri yöntemleri, bilgisayar özellikleri, her neyse, eski iyi bileşene eklerseniz, işe yarar. Sadece mükemmel çalışıyor, bileşeninize sadece birkaç reaktif özellik ve yöntem ekliyorsunuz ve bunları eski seçenekler API'si ile de kullanabilirsiniz.

Drew: Bu, çok karmaşık bileşenler veya hatta biraz karmaşık bileşen kombinasyonları söz konusu olduğunda geliştiricilerin kod tabanlarını temizlemelerine gerçekten yardımcı olacak gibi görünüyor. Ve karışımların ve diğer şeylerin test edilebilirliğinden bahsettiniz, Kompozisyon API'si daha iyi test edilebilirliğe izin veriyor mu?

Natalia: Evet, kesinlikle çünkü Composition API, yaşam döngüsü kancalarını bundan hariç tutarsak, çünkü birleştirilebilirde başka bir yaşam döngüsü kancası da çalıştırabilirsiniz. Aslında saf fonksiyon. S parametreleriniz var, bir şeyler yapıyorsunuz ve yaşam döngüsü kancalarının dışında hala yan etkiler var. Ve bildiğiniz gibi, saf işlevleri test etmek muhtemelen en kolay şeydir. Bu sadece bir kara kutu, S-parametreleriniz var, geri verecek bir şeyiniz var.

Drew: Bu, Vue ile daha karmaşık uygulamalar oluşturan birçok insanın takdir edeceği bir soruna çok kapsamlı bir çözüm gibi geliyor. Ve kesinlikle, bahsettiğiniz gibi, kapsamın birleştirilmesi ve tüm bu tür şeylerle hataları tanıtmanın çok kolay olduğu, mixins ile sürünebileceğini bildiğim türden böcekleri ortadan kaldırmak için gerçekten harika bir yol gibi geliyor.

Drew: Bir çerçevenin üzerine inşa etmeyi seçerken her zaman büyük bir düşüncenin, zaman içindeki API kararlılığı olduğunu düşünüyorum. Belki istikrar doğru kelime değil, ama bence çoğumuz bir çerçevenin üzerine inşa ederek canımızı sıktı, sonra büyük bir elden geçirmeden geçti ve bizi ya geçiş için büyük bir yatırım gerektiren ya da sadece bağımlı hale gelen uygulamalarla baş başa bıraktı. artık desteklenmeyen bir çerçevenin eski bir sürümüne. İçinde olmak korkunç bir durum. Büyük bir projeyi Vue 2'den Vue 3'e taşırken ne kadar uyku kaybederim?

Natalia: Her şeyden önce, API yüzeyi eskisiyle %90 aynı. Kullanımdan kaldırılmış olay hub'ları ile değiştirilebilen çok fazla kullanımdan kaldırılmış öğeye veya kullanımdan kaldırılmış filtreye sahip değildik. Bir EventEmitter kullanmak istiyorsanız, görünümü temel alan bir dış kitaplığı da değiştirmeniz gerekir. Bunlar büyük değişiklikler, ancak geçişten bahsetmişken… Şunu açıklığa kavuşturayım, şu anda gerçekten içim parçalandı, çünkü bir yandan Vue JS Core Team üyesiyim. Öte yandan, Vue.js kullanan büyük projede Personel Mühendisiyim. Şu anda geçişe başlamak üzereyseniz, bunu yapmanızı tavsiye etmem. Her şeyden önce, ekosistem serbest bırakılmadı, yani Pure Router, PUX, Vue CLI gibi çekirdek kütüphanelerden bahsedecek olursak, bunlar iyi durumda ama yine de sürüm değil, sürüm adayı. Ve belki çekirdek kütüphaneler değil, UI bileşen kütüphaneleri, belki bazı doğrulama kütüphaneleri gibi diğer ekosistemlerden bahsedersek, çoğunlukla Vue 3 için hazır değiller. Ve eğer büyük bir projeniz varsa, yapmanız gereken çok fazla bağımlılığınız var. bakım. Yani bu karmaşık bir şey olabilir.

Natalya: Seçenekler nelerdir? Büyük bir projeniz var, tüm bu Composition API iyiliğini kullanmak istiyorsunuz. Buna nasıl ulaşılır? Her şeyden önce, Vue 2.0, Vue 2.7'nin bir LTS yapısını yayınlamayı planlıyoruz. Bu, birçok kullanımdan kaldırma uyarısı içerecektir, böylece nelerin kullanımdan kaldırılacağını, Vue 3 ile bozmamak için nasıl yeniden düzenleneceğini görebileceksiniz. her neyse, çünkü tüm uyarılara sahipsiniz.

Natalia: İkincisi, sadece onu çalıştırabilecek ve bir kod modu olarak çalışacak ve Vue 2 ile ilgili şeyleri Vue 3 alternatifleriyle değiştirecek bir geçiş aracı kullanacağız. Tabii ki, hiçbir kod modu mükemmel değildir. Her şeyden önce, mümkün olduğunda değiştirmeler yapmayı ama aynı zamanda kullanımdan kaldırmanın kolayca ele alınmadığı durumlarda uyarılar göstermeyi amaçlıyoruz. Codemod bir şeyi tanıyabilir ve uyarı verebilir ancak kendi başına değiştiremez. Bu büyük bir plan gibi ve Vue 2.7 yayınlandığında ve şu anda tahmini varış zamanlarının Aralık olduğunu düşünüyorum, eğer doğru hatırlıyorsam, yol haritasını kontrol etmem gerekecek, ama sanırım Aralık.

Natalia: Ekosistem de aşağı yukarı hazır olacak. Vue 2.0 ile büyük bir projeniz varsa, Core stabilize olana kadar biraz daha bekleyin çünkü mükemmel bir kitaplık oluştursanız bile stabilize etmek için biraz zamana ihtiyacı var çünkü insanlar bunu kullanmaya başlıyor, insanlar hataları bildirmeye başlıyor. Evcil hayvan projesi için kullanmak ve hataları bildirmek üzereyseniz, lütfen, bunu yapmaktan memnuniyet duyarız. Ve bundan sonra Vue 3'e geçmenin iyi ve sorunsuz bir yolu olacak.

Drew: Yani bahsettiğin geçiş aracı kulağa oldukça ilginç geliyor. Bu temelde kodunuza bakan statik bir analiz aracı mı ve…

Natalia: Evet, evet, evet, bu bir kod veya bir araçtır. Şu anda çok sınırlı bir şekilde mevcut. Vue CLI'nin bir eklentisi olarak mevcuttur. Vue CLI tabanlı projeniz varsa, Vue yükseltmesini çalıştırabilir ve aracın nasıl çalıştığını görebilirsiniz. Şu ana kadar olmasını istediğimiz formda değil. Ne yazık ki, Vue CLI üzerine kurulu bir proje üzerinde çalışmıyorum. Bekleyip neler olup bittiğini kontrol etmem gerekecek, ancak örneğin GitHub, hazırlanmak için geçiş aracı olmadan bile birkaç adım attık, çünkü neyin kullanımdan kaldırıldığını biliyoruz. Aslında Vue 3 belgelerinde belirtilmiştir.

Natalia: Göç rehberi var. Tüm son değişiklikleri ve kullanımdan kaldırılan şeyleri görebilir ve Vue 2.0 kod bazında bile bunların bir kısmı üzerinde çalışabilirsiniz. Örneğin, Vue 2.6'da yuvaların sözdizimini değiştirdik. Kapsam yuvaları için sözdizimi kullanımdan kaldırıldı ancak reddedilmedi, hala var. Bir uyarı veriyor ama çalıştırabilirsiniz. Ve elbette, yedi yıllık bir kod tabanıyla, çalışırsa, kullanımdan kaldırılmış tüm sözdizimlerini değiştirmeyi kimse umursamaz. Üretimde herhangi bir uyarı yok. Slotlar çalışır. Geliştirme aşamasında, "Ah, konsolda bazı uyarılar görüyorum. Belki 20 tane, tamam. kırmızı değil sarıdır. umurumda değil”.

Natalia: Bunun herkesin başına geldiğini biliyorsun. Bunun üzerinde çalışmak için büyük bir destan yarattık. Mevcut tüm eski sözdizimi kümelerini bulun. Yine yedi yıllık projemizi EventEmitters'ın yerine koymaya çalışıyoruz, bizi yargılamayın. EventEmitters var. GitLab, EventHubs üzerinde çalışıyordu. Vue tabanlı eğlenceyi harici kütüphanelerle değiştirdik. Ben de aynısını yapmanı tavsiye ederim. Halihazırda nelerin değiştirilebileceğini ve bu konuda hazırlanmak ve üzerinde çalışmaya başlamak için hangi değişiklikleri yapabileceğinizi kontrol ederek geçiş kılavuzunu gözden geçirin.

Drew: Geçiş aracının mevcut durumuyla, suları kod tabanınızla test etmenin iyi bir yolu olabilir. Sadece çalıştırıp neyi işaretlediğini görmek, iyi görünüp görünmediğini veya bazı büyük şeyler olup olmadığını görmek için bir göz atmak mı yoksa bunun için hala olgunlaşmamış mı? Bir şeyleri gerçekten düzeltebileceği Aralık ayına kadar beklemek daha mı iyi?

Natalia: Büyük bir projem olsaydı, bunu tavsiye etmem. Küçük, kötü bir projeniz veya belki de kişisel bir projeniz varsa, ancak o kadar büyük değilse, onu çalıştırmanızı ve sahip olduğunuz her şey gibi sorunları kontrol etmenizi öneririm çünkü iki orta ölçekli proje için onu yürütüyorum. Sanırım bir veya iki konu. Olgunlaşmadığını söyleyemem. Zaten iyi durumda. Ama yine büyük projeler için, bu bir miras, bazı egzotik şeyler. Bunu üretimde yapmayın, millet.

Natalia: Ayrıca projenizin iskelesi ile oynamak isterseniz, şu anda Vue CLI iki modu desteklemektedir. Vue 2 projesi oluşturabilirsiniz, Vue 3 projesi oluşturabilirsiniz. Ve kesinlikle en azından bir deneyin. Bu bizim için de iyi bir yol çünkü oynadıkça hataları keşfediyorsunuz, hataları rapor ediyorsunuz, biz onları düzeltmeye çalışıyoruz vb.

Drew: Belgelerde ve geliştirme yol haritasında bir göç yapısından söz edildiğini görüyorum. Bu konuştuğumuzdan farklı bir şey mi yoksa bahsettiğimiz şey bu mu?

Natalia: Hayır, hayır, aynı. Aynısı ve hazır olmalı ama şimdilik, eğer geçiş planlıyorsanız, ana yol sadece belgeleri okumak ve orada söylenenleri takip etmek çünkü geçiş aracımız olmadığında kesinlikle çaba harcıyoruz, dokümantasyon ekibi öne geçti. ve burada değişikliğin ne olduğu, neden yapıldığı ve aslında neyin değiştirildiği konusunda ayrıntılı bir kılavuz oluşturdu.

Drew: Evet, belgelerde Vue 3 belgelerinin bir parçası olarak oldukça kapsamlı bir geçiş kılavuzu var ve taşınması gereken çok sayıda değişiklikten bahsediyor. Sanırım bunlardan bazıları her projeyi etkilemeyecek. Birçoğu, birçok insan için esasen uç vakalardı. Adil mi?

Natalia: Evet, örneğin filtrelerin iyi bir kısmı kesinlikle son durum çünkü GitLab'da üçüncü kez yedi yıllık kod tabanı ve büyük bir kod ile bile. Bir veya iki filtre oluşumumuz oldu ve artık kullanılmıyorlardı. Onları aramamız ve tamamen kaldırmamız iyi bir şeydi çünkü “Ah, kullanılmayan kod” gibi ve yine kimin umurunda ki var.

Natalia: Tamamen kırılma değişikliklerinin model değişiklikleri olduğunu söyleyebilirim. Şuna bir bakın çünkü bildiğim her proje kesinlikle en az bir Vue modeli içeriyor. Bu kontrol edilmelidir ve belki nitelik değişiklikleri de olabilir çünkü şu anda sınıf ve stil, borular ve eterleri dahil ediyoruz. Ve Vue ile daha önce çalıştıysanız, daha önce dahil edilmedi. Şu anda, bir alt bileşene sınıf ve stil geçirme şekliniz biraz farklı ve kesinlikle dikkate değer.

Drew: Bunu öğrendiğim iyi oldu. Vue ile birlikte gelen 3.0 sürümleri, yani ekosistemden ve etrafındaki her şeyden, Vuex'ten ve ekosistemin o seviyeye ilerlemesi gereken tüm diğer bölümlerinden bahsettiniz. Bu yüzden mi şu anda web sitesi, büyük “Başlarken” düğmesi hala Vue 2'ye gidiyor? Vue 3 piyasaya sürüldüğü gibi geliyor, ancak tam bir güvenle değil. Ama hala böyle olması ekosistem sorunu yüzünden mi?

Natalia: Hayır, sanırım bir hata buldun, hemen kontrol edeyim. Hayır, başlamak Vue 3'ü işaret ediyor, sorun değil. Yani vuejs.org'a giderseniz, ikinci sürüme işaret ediyor. Bu kasıtlıdır, çünkü onu Vue 2 gibi bir alt alanla değiştirmeyi planladık, ki bu da devam ediyor, ama şu ana kadar vuejs.org'u olduğu yerde bırakıp Vue 3'ü oluşturmaya karar verdik ve bu yüzden vuejs'de bir afiş var. org. Herhangi bir doktora giderseniz-

Drew: En üstte çok küçük bir afiş var, evet.

Natalia: Evet, küçük gibi.

Duru: Evet.

Natalia: Sanırım daha büyük yapmalıyız. Daha büyük ve daha iyi bir renk kontrastıyla. Erişilebilirlik hislerim, “Ah, orada zıtlık yok” gibi kalıyor.

Drew: Bu iyi haber. Birisi başlıyorsa, belki büyük bir proje değil, ama biri kişisel bir projeye başlıyorsa veya Vue öğrenmek istiyorsa, kesinlikle Vue 3 başlamalı mı?

Natalya: Ben de öyle derdim. Bu arada, öğrenme eğrisi o kadar farklı değil. Eski sözdizimi seçeneklerine sahip olmak dokümantasyon ekibinin bir niyeti olduğundan, eski dememeliyim, aslında mevcut sözdizimi. Varsayılan sözdizimi olarak tanıdık sözdizimi. Çünkü Vue 3 belgelerini incelerseniz, Composition API ile yalnızca ileri düzey konularda göreceksiniz ve Vue 3 ile sahip olduğunuz öğrenme yolunuz Vue 2'dekine benziyor. Daha yenisiyle başlamak için önemli bir şey yok. Vue'yu yeni öğreniyor ve denemeye çalışıyorsanız ve kariyer hakkında konuşursak daha iyi bir yatırım olacağına inanıyorum. Tüm projeleri geçeceği için yeni sürümü öğrenmeye başlayın. Eninde sonunda belki yarım yılda, hatta yılda büyük projelerde bile göç olur.

Drew: Görünüşe göre kişisel kariyerimde, büyük bir göç sürecindeyken platformlara gelme konusunda gerçek bir yetenek var. Demek istediğim, hatırlıyor musunuz, Macromedia Director, o kadar geriye gitmek ve Shockwave, Flash ve benzeri şeyler. Nokta sözdizimine geçiş yaparken buna geldim ve ikisini de öğrenmek zorunda kaldım. Ve işte buradayım, geçen ay kendimi Vue'da ilk kez bir Vue 2 projesi üzerinde çalışırken buluyorum ve ilerledikçe öğreniyorum ve Vue 3'te gelecek olan her şeyi dört gözle bekliyorum. göç ederken bir şeyler öğrenmek için kesinlikle ilginç bir zaman ama Vue ile çok zor değil gibi görünüyor ve ekosistem Çekirdeğe yetiştiğinde iyi bir yerde olmalıyız.

Natalia: Oh, Drew, büyük proje göçü hakkında söylediklerinize değinmek istiyorum. Beni 2018 gibi hayal edebilirsiniz ve GitLab'a katılıyorum. Çekirdek Ekip üyesi değildim, şu anda sadece katkıda bulunuyorum.

Natalia: Hemen aynı anda Evan, "Oh, Vue 3 yapacağız" der. Herkes "Evet, harika" der. 2019 Baharı, Çekirdek Ekip sizsiniz. Demek istediğim, GitLab'ın tamamı "Oh, bu çok şirin. Hepimiz göç ediyoruz ve bundan kimin sorumlu olduğunu biliyor musunuz?” Ve bunun nasıl olduğunu ancak Vue 3 için belgeler yazdığınızda hayal edebilirsiniz, herkes okuyor olacak ve kendi şirketiniz "Ah, Vue 3 hakkında bir şeyler öğrenmek istiyorum, belgelerinizi anlayamıyorum" gibi. Yani, “Ah, kahretsin bu çok acı verici” diyorsunuz çünkü orada bir geliştiricisiniz ve bir tür teknoloji yazarısınız.

Natalia: Bunun tam ortasındasın ama çerçeve için de gerçekten faydalı olduğunu söylemeliyim çünkü bir çerçeve ile oluşturulan herhangi bir büyük ürün, hataları bulmak ve onları kütüphaneye geri getirmek için harika, kesinlikle harika bir savaş alanıdır. ekosistem. Testler diyebilirim ve GitLab açık kaynaklı, Vue için bir test aracı olan Vue Test Utils. Bir ekip, testlere dayalı test kodumuzu kullanıyordu, bu çok mantıklı, değil mi? Çünkü bazı Edge vakaları vb. bulabilirsiniz. Ama yine de GitLab'ı Vue 3'e taşımayı düşündüğümde, bunun için kişisel bir sorumluluk hissediyorum. Ben sadece göçün ortasında değilim, bulacağımız her bir hatadan kişisel olarak sorumluyum.

Drew: Önceki nesil JavaScript çerçevelerine dönüp baktığımda, bunların en başarılılarından birinin o zamanlar jQuery olduğunu düşünüyorum ve son derece iyi tasarlanmış bir API'ye sahip olduğu için çekiş kazandığını düşünüyorum. Just this concept of taking a CSS selector and using it to query the DOM in your JavaScript was something that jQuery popularized. And I think that really resonated with hardworking developers who didn't need to learn a new way to work with JavaScript. I see Vue almost being I that same sort of camp. I mentioned I was previously working with React and moved to Vue in the last few weeks, and I found that almost everything to be more intuitive in the most genuine sense, as in I can look at something unfamiliar and pretty much understand what it's doing. And if I need to do something I've not done before I can sort of guess at how it would be implemented and usually I'm right or close to it.

Drew: Is the API of Vue something that the Core Team think about very closely or has it just turned out well almost as a happy accident because of the personalities involved?

Natalia: I think, at the times of Vue 2 we had a concept. It's changed slightly but we had a concept that was called Documentation Driven Design. And it's a really great concept because if something is really hard to explain, really hard to get and really hard to write down, maybe the API is wrong there. Maybe something is not developed as it should be because non-intuitive solutions, something that is like very cryptic, and you need to put a lot of work to explain, usually is not right. The API was shaped the way that is the easiest to explain and that's why it's intuitive. If it's easy to explain, people probably will get it on themselves. That's why the older directives like v-if and v-for look very familiar for any JavaScript developer. You don't need to explain what v-if is doing because it's clear, right.

Duru: Gerçekten öyle.

Natalia: It's kind of insulting and same with v-else. V-if, v-else-if, v-else and that's it. And we intuitively built v-for with syntax that looks like for loop in JavaScript and same for the biggest part of the API. I think the main intention since Vue 1.x and I think Evan also stated this in his docs was to create something that you have pleasure to work with as a tool. It's all about developer experience as well and I think this is what attracted me in Vue back in time as well. I started with Vue when it was already in beta for version 2. I didn't work that much with Vue .1. I think were not that many people familiar with Vue from the first version but I was like, “It's so nice to use”. I'm just building the same stuff and it's just been a pleasure. I don't need to think about the tool, I'm thinking about what I'm going to build. And tool is not preventing me from doing this.

Natalia: And again, I need to state this next one will be totally personal opinion, not as a Vue Core Team member. I've been working with Angular from version two to version six on a commercial project and it's a great framework. There are many different terms, it has lots of abstractions, the dependency injection is amazing, TypeScript support is absolutely incredible but I constantly had the feel I am building a wall with huge heavy bricks. And I need to just make an effort to move every single brick. I mean, the wall is amazing. Bricks are still heavy and it's just hard being a developer. And after this, working with Vue is like, “Oh, it's just like a walk in the park”.

Drew: There can be a danger with software that when it's so well designed, it makes everything feel really easy, that it sort of gets branded as a toy, as not being as powerful as the things that are really complex. Do you think that's a risk with Vue, do you think it might be regarded as less serious as some of the other reactive frameworks simply because it's better designed?

Natalia: Oh, it was. It was for this reason and for a few more reasons as well. And honestly, for a good amount of time, I think I had this question, every single conference I'd been speaking at, “Would you recommend Vue for big sized project, for enterprise project, for like serious project.” And every single time I was like, “Yes, you can use it for small project, it's easy to scaffold something, you can use it for the big size project and honestly if we speak about enterprise size project, framework is the least of the issues you need to solve.

Natalia: You can take any framework on the market, be it old one, be it Amber, be it whatever else, be it Angular One and create a good and stable architecture. You can take any of the newest framework, like latest release Vue 3, Svelte, latest React and build absolutely, incredibly awful stuff. It depends on how build it and how your team is working on this, whatever you have there, how you planned all the architectural decisions because I think, none of the framework, maybe Angular a bit, is dictating an architecture. Angular kind of does this thing rest of them are like, “You're free. Build it.” And yes, also I think the issue with Vue, not an issue, but issue in minds of people and especially in minds of company management was it's not backed by a big company.

Natalia: You have an Angular and there is Google standing behind Angular. There is React and there is Facebook supporting React. There is Vue and who is the small Chinese guy, again this is like a stigma, there is a framework of one guy, what if Evan You is hit by a bus? There was an article, “What if Evan You is hit by a bus”, I swear on dev.to. I'm like, “What are they so scared” and big companies are probably like, “What if they drop support, what if they decide, maybe even he decides, if we speak about Evan, what if he decides he does not want to work on this.” And as we can see over years it's good and stable and it's developing and it's not an issue and honestly, I think when framework is completely open sourced and built with a team of people that are not engaged, that are not subjective, that are not under one big company it's actually better for the framework.

Natalia: Last year we introduced the RFC process. It's actually just a request for comments. We have an idea, we drop it, people come there and people argue there and if we create an RFC for anything, this means that it's not decided, it's not set in stone. We just have an idea and we want to hear what community thinks. I believe it's great because Vue is shaped by developers community. This is not just loud words. No, this is not a production slogan, by the community for the community, I remember we used this but it's true. It's actually shaped by community. It's not shaped for the needs of a certain company. Even for big companies, even for companies that are sponsoring Vue. They're not shaping the framework and I believe this is great.

Drew: It's quite telling when you mentioned the list of active Core Team members is 20ish people and they're all listed on the site and next to everyone it says what thy work on in the project and also where they work professionally. And just looking down the list of where people work professionally, I mean you're at GitLab and there are other people who are just independent consultants and it's not like 18 of the 20 people work at Big Corp. Everybody is just contributing from all over the place which, as you say, is a real point of strength.

Natalia: Yeah.

Drew: That there is no one big body controlling it that could, for their own business purposes, just say, “We're changing direction, we're not going to do this anymore” and pull away all that support and leave the project in a mess. It is just lots of individuals contributing and doing their best to make something good, which I think is a really strong foundation for something as important as a framework that people are building on top of.

Drew: You know I've spent the first half of this year learning React and then changing jobs and now learning Vue. Personally it feels to me like a breath of fresh air. And I really want to commend the work that you and your colleagues are doing on that. For those who are wanting to find out more about Vue, the 3.0 release or just generally about Vue, you can go to vuejs.org currently the version three specific version as we mentioned is linked to the little banner at the top. Maybe by the time you're listening to this, the site will have changed and will just be Vue, but that's also where you find the docs and in the docs is that really good migration guide that we mentioned. I've been learning all about Vue 3.0, what have you been learning about lately, Natalia?

Natalia: I've been learning about Apollo Client version three. It's funny, because if you look at versions and I've been watching both of them, they are going completely the same way. Apollo Client was 2.6 and Vue was 2.6. And Apollo promised a release for a year and they were delaying and delaying it. It was for a long time in beta then release candidate. Same was for Vue, we announced a release and then we were delaying it again and again and moved to beta a bit late and then moved to release candidate. And they released not the same time but not with a big time difference. Apollo I think was released in Summer, beginning of Summer.

Natalia: And we use Apollo as well. I use it professionally and now I kind of try to build something with Vue 3 and Apollo 3, which is not an easy task because Apollo did a good number of changes. Again, we're adjusting them at work but, for example, removing local resolvers, is like, “What do I do now? What do I do with my local queries?” If you're curious about Apollo Client version three definitely give it a try. It's interesting to see how it's evolving.

Drew: I'm definitely going to give that a try. I've used Apollo on a couple of projects and it's really great to see that pushing ahead as well. If you as a listener would like to hear more from Natalia, you can follow her on Twitter where she is N_Tepluhina and you can find collections of her articles and videos of her public speaking events, much of which is about Vue on her website, nataliatepluhina.com

Drew: Thanks for joining us today, Natalia. Do you have any parting words for us?

Natalia: Not really, but thank you for having me, it was a lot of fun to speak there.