Smashing Podcast Episode 26 Dengan Natalia Tepluhina: Apa yang Baru di Vue 3.0?

Dalam episode podcast ini, kita berbicara semua tentang VueJS. Apa yang baru dalam rilis 3.0, dan seberapa sulitkah untuk bermigrasi? Drew McLellan berbicara dengan anggota tim inti Natalia Tepluhina untuk mencari tahu.

Tampilkan Catatan

• VueJS
• Panduan Migrasi Vue 3
• Natalia di Twitter
• Situs web pribadi Natalia

Update mingguan

• Berbagai Cara Mendesain Halaman Produk Digital
  ditulis oleh Suzanne Scacca
• Pengujian Unit Dalam Aplikasi React Native
  ditulis oleh Fortune Ikechi
• 5 Cara Google Analytics Membantu Pengembang Web Dalam Desain UI/UX
  ditulis oleh Clara Buenconsejo
• Memahami Generik TypeScript
  ditulis oleh Jamie Corkhill
• Cara Menggunakan Gerakan Wajah Untuk Berinteraksi Dengan Tipografi
  ditulis oleh Edoardo Cavazza

Salinan

Drew McLellan: Dia adalah pengembang web yang bersemangat, pakar Pengembang Google, dan pembicara serta penulis konferensi. Saat ini dia adalah Staf Front Engineer di GitLab, tetapi Anda mungkin tahu yang terbaik sebagai anggota Tim Inti Vue JS. Jelas sekali dia tahu jalan di sekitar Vue lebih baik daripada hampir semua orang. Tapi tahukah Anda dia pernah mengajari seekor kanguru bernyanyi. Teman-teman Smashing saya, sambut Natalia Tepluhina.

Drew: Hai Natalia, apa kabar?

Natalia Tepluhina: Hai Drew, ini adalah upaya yang sangat bagus untuk nama belakang saya. Saya perlu memberi Anda kredit. Itu adalah salah satu hal terbaik yang pernah saya dengar dari penutur bahasa Inggris ketika mereka mencoba mengucapkan nama belakang saya. Saya kira itu tidak mungkin jika Anda tidak berbicara bahasa Rusia. Pengucapannya yang benar adalah Tepluhina, tapi itu seperti, itu sebabnya saya biasanya hanya meminta orang untuk memanggil saya Natalia dan berhenti di situ.

Drew: Oke, saya berusaha. Tapi pertanyaan pentingnya adalah, apakah Anda Smashing?

Natalia: Tentu saja.

Drew: Itu bagus. Jadi saya ingin berbicara dengan Anda hari ini tentang beberapa berita yang sangat menarik yang kami miliki di bulan September dengan dirilisnya Vue 3.0. Ini merupakan rilis besar dalam hal nomor versi tetapi ini benar-benar rilis besar untuk Vue, dan telah bekerja cukup lama, bukan?

Natalia: Itu. Saya pikir kami pertama kali mengumumkan versi tiga pada tahun 2018. Saya pikir itu diumumkan di Musim Semi, dan pekerjaan sebenarnya dimulai, maksud saya ide ada di Musim Semi, pekerjaan sebenarnya dimulai pada Musim Gugur 2018. Dan saya pikir itu diumumkan secara resmi pada Konferensi London, yang terjadi pada Oktober 2018. Pekerjaan aktif memakan waktu dua tahun. Dan itu banyak jika Anda memikirkannya, versi sebelumnya dirilis pada 2016. Jadi setengah dari empat tahun ini juga didedikasikan untuk pekerjaan Vue 3.

Drew: Apa jenis faktor motivasi dalam memutuskan bahwa versi utama baru dipanggil? Apakah ini semacam keputusan sadar bahwa, oke kita akan mengerjakan versi utama, kita akan bekerja di Vue 3, atau itu hanya semacam akumulasi perubahan yang hanya membutuhkan versi bump?

Natalia: Tidak, saya pikir itu adalah ide untuk membuat versi baru karena beberapa hal yang sangat penting. Jadi pertama-tama, ada motivasi untuk mengubah reaktivitas. Yang sebelumnya dibangun di atas Object.defineProperty. Dan itu memiliki beberapa peringatan, semuanya didokumentasikan tetapi tetap saja. Anda tahu, bahkan jika Anda mendokumentasikan sesuatu yang tidak boleh dilakukan orang, mereka akan tetap melakukannya. Dan Anda perlu mengarahkan mereka ke dokumentasi. Omong-omong, tidak ada yang membaca dokumentasi. Untuk beberapa alasan itu terjadi begitu saja. Sampai Anda menunjukkan kepada orang-orang, itu tidak ada di dokumen. Tapi oke. Kami akan tetap mengajarimu. Jadi reaktivitas adalah salah satunya.

Natalia: Pertunjukan adalah yang berikutnya. Vue 2 masih memiliki dan tidak memiliki kinerja terburuk, tetapi kami memiliki beberapa ide tentang cara membuat Vue lebih cepat. Dan juga ada satu masalah untuk bagian tertentu dari kami, katakanlah audiens, orang-orang yang menggunakan Vue. Itu TypeScript. Vue 2 secara internal ditulis dalam Flow, yang masih diketik dengan kuat, tetapi mengetik dengan TypeScript adalah mimpi buruk yang nyata terutama jika Anda bekerja dengan Vuex manajemen negara kami. Ini lagi-lagi merupakan bagian besar. Dan yang terakhir adalah, kami agak melewatkan fungsionalitas ke logika abstrak, dalam hal bukan komponen tetapi bagian logika yang dapat dikomposisi. Suka fungsi pembantu dan sebagainya, tetapi mereka harus dapat menyertakan aktivitas pemirsa juga. Contoh yang bagus di sini adalah React Hooks, benar mereka memungkinkan Anda mengabstraksi bagian-bagian dari fungsionalitas dan ini jelas hilang di Vue. Dan saya tahu bahwa saat ini kedengarannya seperti, "Anda mencuri fitur dari React." Sebenarnya tidak. Saya percaya bahwa ide penyerbukan silang adalah bagian besar dan bagus dalam ekosistem kami dan juga membantu pengembang untuk beralih di antara favorit, bukan?

Natalia: Jadi kami sedang mengerjakan fitur utama ini untuk membuat Vue 3 sebagai versi utama.

Drew: Sekarang saya pikir salah satu hal hebat tentang keberadaan dalam ekosistem open source adalah bahwa ada banyak ide dan pengalaman di luar sana dari semua jenis proyek yang berbeda, dan kemampuan untuk meminjam ide-ide itu dan meminjam pengalaman dari yang lain. proyek benar-benar bermanfaat dan membuat segalanya lebih kuat, bukan?

Natalia: Itu. Saya pikir itu berfungsi seperti yang kita sebut nilai iterasi di GitLab. Ketika Anda datang dengan sebuah ide, itu tidak pernah sempurna. Ini sebagian besar seperti beberapa hal yang sangat mentah, sangat sulit dikodekan. Mungkin mengubah sesuatu, tapi itu seperti pasti tidak sempurna. Dan Anda perlu beberapa iterasi atas ide ini untuk membuatnya benar-benar bagus, bahkan tidak sempurna, hanya bagus. Dan terjadi dengan ide-ide dalam ekosistem. Seseorang datang dengan ide bagus, dan Anda hanya mengambilnya dan membuatnya lebih baik dan lebih baik. Dan saya yakin, akan ada sesuatu yang akan mengambil beberapa ide dari Vue, mungkin mereka sudah mengambil beberapa ide dari Vue, dan membuatnya lebih baik, dan tidak ada yang buruk di sini.

Natalia: Saya sangat menentang, seperti, "Kamu mencuri ide". Ini bukan mencuri, ini hanya penyerbukan silang.

Drew: Tepat sekali, ya. Anda menyebutkan bahwa migrasi ke TypeScript, jadi Vue 3 sendiri ditulis menggunakan TypeScript sekarang, apakah itu benar?

Natalia: Ya, ya. Dan percayalah, Drew, saya sedang menulis dokumentasi, dokumen kecil tentang cara menggunakan Vue dengan TypeScript. Dan saya seperti, oke, mungkin entah bagaimana seperti Vue 2. Dan saya terlalu memperumit dokumen, saya seperti mengetik semuanya secara eksplisit. Terlihat bagus semuanya diketik. Saya bisa melihat tipe, jadi ts-link saya senang, sejauh ini bagus. Dan kemudian salah satu pengembang kami yang bekerja dengan TypeScript, "Anda tidak perlu melakukan ini". Seperti bagaimana, bagaimana? “Anda tidak perlu melakukan tipe eksplisit pada data. Anda hanya memberikan nilai awal dan ts-link tahu nomornya. Itu sudah diketik.” Seperti, bagaimana bisa? “Saya menghapus 90% tipe eksplisit dari dokumen. Hanya ada dua hal yang benar-benar perlu Anda ketikkan adalah proxy dari komponen, dan properti yang dihitung akan memilikinya. Mereka masih membutuhkan tipe pengembalian. Tapi sisanya seperti, diketik secara otomatis, hanya menulis komponen dengan metode yang kita sebut komponen definisi. Dan itu saja. Itu diketik.”

Natalia: Sepertinya, itu berhasil. Dan bagi saya, dan saya banyak bekerja dengan Angular dalam pengalaman masa lalu saya, saya memiliki Sindrom Stockholm untuk TypeScript. Semuanya harus diketik secara eksplisit. Maksud saya, jika Anda memiliki tipe yang kompleks, tentu saja Anda perlu menulis antarmuka, tetapi beginilah cara kerja TypeScript. Namun, jauh lebih mudah untuk bekerja dengan TypeScript sekarang dengan Vue 3.

Drew: Jadi itu bagus, jadi ini adalah manfaat baik untuk Proyek Inti Vue, dan untuk pengembang yang sedang membangun aplikasi menggunakan Vue karena mereka dapat menggunakan TypeScript dalam aplikasi mereka dengan baik dengan Vue sekarang, di mana mereka tidak bisa dengan 2.0, baik versi apa pun dari 2.0 dengan mudah. Mereka yang akrab dengan komunitas Vue akan menyadari bahwa pencipta Vue, Evan You, masih memimpin proyek dengan sangat aktif. Bagaimana fungsi Tim Inti? Bagaimana strukturnya dalam proses pengembangan? Tidak semuanya Evan kan?

Natalia: Itu pertanyaan yang bagus Drew, karena selama bertahun-tahun, secara harfiah, orang berbicara tentang Vue sebagai, saya mengutip ini dan saya akan terdengar kasar, tapi maaf, ini seperti, "Kerangka satu orang Tionghoa, seperti kerangka kerja Tionghoa" . Dan maksud saya bahkan dengan Vue 1.X, sudah ada tim dan ada tim besar di belakang Vue 2 dan bahkan tim yang lebih besar di belakang Vue 3. Masalahnya adalah kita semua memiliki tanggung jawab yang berbeda ketika kita berbicara tentang Vue.

Natalia: Ada orang-orang yang mengerjakan Core, dan ini bukan hanya Evan sendiri, dia pasti melakukan sebagian besar pekerjaan di Vue Core, dan dia juga memimpin proyek. Tetapi ada orang yang bekerja di Vue Core, dan kontribusi mereka sangat berharga. Dan ada beberapa orang baru, yang juga bergabung dengan tim Vue, yang bekerja di Core. Dan ada juga tim yang lebih kecil yang mengerjakan ekosistem, ada orang yang bekerja di Pure Router, seperti Eduardo, ada orang yang bekerja di Vue CLI, di Vuex, juga di dokumentasi.

Natalia: Ada seluruh tim yang mengerjakan dokumentasi karena kami percaya bahwa dokumentasi itu penting. Dan saat ini di situs web kami ada, saya pikir 21, 20 atau 21 orang, selalu ketinggalan hitungan, yang termasuk dalam tim Inti, tetapi ini bukan daftar statis. Karena kami, kami tidak merekrut jelas, kami adalah tim open source, ini bukan pekerjaan berbayar. Tetapi kami percaya bahwa jika seseorang berkontribusi banyak pada bagian mana pun dari ekosistem Vue, ketika orang tersebut sudah melakukan pekerjaan anggota tim Inti, itu hanya, memberi mereka pengakuan hanya dengan akses ke repositori dan gelar formal.

Drew: Itu bagus karena ini adalah kasus di mana berkontribusi pada proyek open source benar-benar dapat memberikan imbalan kepada seseorang. Mereka mendapatkan pengakuan dan itu dapat berdampak pada karir profesional Anda dan apa yang Anda miliki.

Drew: Untuk pendengar yang mungkin tidak terbiasa dengan Vue tetapi mungkin mereka sudah familiar dengan kerangka kerja reaktif lainnya, seperti Anda tahu React, Angular dan sebagainya. Apa perubahan judul besar, semacam, dengan Vue 3 dan khususnya masalah apa yang mereka coba selesaikan? Anda menyebutkan komposisi sebelumnya sebagai salah satu dari hal itu, apakah itu salah satu perubahan besar?

Natalia: Ya, ini adalah salah satu perubahan terbesar, dan itu sebenarnya salah satu hal yang, pertama-tama, seperti izinkan saya membuat pernyataan yang jelas di sini. Komposisi API murni aditif. Bukannya Anda perlu menulis ulang komponen Anda, Anda dapat menambahkan TypeScript ke dalamnya. Atau Anda mungkin lebih suka, untuk menggunakan semua sintaks, sekarang kami menyebutnya API Opsi, dan tidak ada yang akan berubah untuk Anda dalam istilah ini. Ini seperti, ketika kita berbicara tentang API baru, ini bukan perubahan besar. Saya hanya ingin menekankan ini, sangat penting untuk dikatakan karena ketika pertama kali mengumumkan Composition API, itu adalah momen yang mengerikan.

Natalia: Saya pikir kami tidak benar-benar menjelaskan perubahan dengan baik dan kami membuatnya tampak bahwa build standar akan menjadi Composition API. Ini benar-benar buruk dan opsi kami seperti, mungkin kami akan menghentikannya di build mendatang, bukan di Vue 3, jelas. Dan jika ada kemungkinan orang akan salah membaca apa yang Anda katakan, mereka akan salah membacanya.

Natalia: Segera setelah pernyataan ini, RFC di mana kami baru saja mengusulkan perubahan, Reddit meledak. Reddit dipenuhi dengan seperti, “Ya Tuhan. Saya perlu menulis semuanya. Ya Tuhan. Vue adalah Angular baru. Mereka akan menghancurkan semuanya.” Dan ada seorang pria yang membuat artikel di dev.to berjudul, Vue's Darkest Day. Itu adalah hari yang paling gelap, jujur. Kami merasa begitu, tetapi saya seperti mencoba untuk melawan ini di Twitter saya sendiri seperti, “Orang-orang kami tidak benar-benar… Mereka mengatakan bahwa kami mulai mengubah RFC, saya pikir Evan mulai mengubah RFC tanpa mengumumkan perubahan. Jadi dia seperti, “Saya akan segera menulis ulang ini. Mari kita seperti push ke master”. Orang-orang marah tentang ini. Karena mereka berdebat tentang poin-poin tertentu maka Anda hanya menyegarkan halaman dan poin-poin itu tidak ada lagi. Anda merasa seperti, apakah saya bodoh atau hanya ... Apa-apaan ini? Maksudku, itu ada di sana. Aku ingat ini. Dan saya percaya bahwa strategi komunikasi kita bisa lebih baik dan ini bukan kita.

Natalia: Saat ini, setiap kali saya berbicara tentang komposisi, ini murni aditif, teman-teman. Ini hanya fitur yang bagus. Anda dapat menggunakannya, Anda tidak dapat menggunakannya, Anda tidak wajib. Hanya… Itu ada.

Drew: Masalah apa yang mungkin dialami seseorang di mana Composition API adalah hal baru yang membantu mereka keluar dari masalah itu? Masalah apa yang dipecahkannya?

Natalia: Bayangkan komponen yang memiliki beberapa fitur di dalamnya. Katakanlah itu pencarian dan penyortiran. Katakanlah kita mencari daftar tertentu dan kita mencoba mengurutkannya. Ini sudah menjadi dua fitur yang berbeda dan masalahnya dengan komponen Vue adalah, mereka dibagi, berdasarkan opsi, bukan berdasarkan logika. Bayangkan pencarian Anda mungkin memiliki kueri, karena Anda perlu membuat kueri untuk mencari dan array hasil. Dan ini adalah dua sifat reaktif. Dalam hal komponen Anda, Anda menempatkannya ke opsi yang disebut data. Dan jelas Anda memerlukan beberapa metode untuk melakukan pengurutan. Mungkin klik tombol, mungkin sesuatu yang lain, sesuatu yang menjalankan pencarian. Anda membuat metode. Dan untuk menyortir, Anda perlu membangun sesuatu berdasarkan opsi penyortiran, properti reaktif lainnya. Kemudian Anda melakukan beberapa perhitungan untuk mengurutkan hasilnya.

Natalia: Di Vue, untuk ini, Anda juga memiliki properti yang dihitung, yang merupakan opsi lain. Pada akhirnya, komponen Anda menjadi sangat terfragmentasi. Dan bayangkan saya seorang pengembang dan saya memiliki tugas untuk bekerja hanya pada bagian pencarian. Saya tidak dapat membagi komponen sekarang, karena kedua fitur ini saling bersilangan. Saya mencari beberapa hasil dan menyortirnya. Dan saya perlu melompat dari data ke metode, dari metode ke komputasi dan pada akhirnya sangat sulit untuk hanya mengganti konteksnya. Apalagi jika komponennya tumbuh sangat besar.

Natalia: Opsi apa yang kami miliki di Vue 2.0? Opsi pertama disebut mixin dan mixin hanyalah sebuah objek yang dapat berisi properti yang sama yang dimiliki komponen dan kami mencampurnya dengan sebuah komponen. Kedengarannya bagus, saya bisa memindahkan semua pencarian saya di sana dan apa masalahnya? Ada beberapa. Pertama, ini sama sekali tidak fleksibel. Jika saya ingin mencari titik akhir tertentu dan saya memindahkannya ke mixin, ini akan menjadi satu-satunya titik akhir yang dapat saya cari. Mixin tidak menerima parameter. Saya membuat mixin, itu benar-benar statis. Masalah kedua adalah mixin dicampur, yang berarti untuk properti tertentu itu terjadi seperti penggabungan. Misalnya jika Anda telah membuat kait, itu akan digabungkan. Semua logika dalam kait siklus hidup dari komponen mixin digabungkan menjadi satu. Tetapi jika Anda memiliki properti data, kueri dingin di mixin dan kebetulan Anda memiliki properti yang sama di komponen, komponen memiliki prioritas. Ini akan ditimpa. Anda tidak akan mendapat peringatan. Sangat. Itu hanya akan terjadi dan Anda tidak akan tahu ini terjadi.

Drew: Semua ruang lingkup benar-benar tercampur?

Natalia: Ya, sepenuhnya. Tidak ada kemungkinan Anda akan melihat dan juga, mixin adalah sumber yang sangat tidak jelas. Anda cukup mengimpor mixin dengan nama dan meletakkannya untuk melihat properti komponen mixin, itu saja. Ini sangat implisit dan saya berbicara tentang ini dari sudut pengalaman saya sendiri. Kami memiliki logika di GitLab di mana komponen berisi dua mixin dan masing-masing dari dua mixin ini berisi mixin lain. Dan ini dia, ini adalah properti yang perlu Anda periksa dan tidak ada dalam komponen. Mari kita masuk lebih dalam, mixin tingkat pertama. Yang ini tidak mengandungnya dan yang ini juga tidak mengandungnya. Dimana? Anda menyelam lebih dalam, lebih dalam ke lubang kelinci, hanya untuk menemukan properti ini dan pengujian menjadi mimpi buruk juga.

Natalia: Mixin adalah cara yang sangat bodoh untuk mengekstrak logika. Itu polos, jelas, sangat mudah untuk mendapatkannya. Ini membawa Anda begitu banyak masalah jika Anda ingin bekerja dengan ini pada tingkat lanjutan. Cara selanjutnya untuk mengabstraksi logika di Vue 2.0 adalah komponen tanpa render. Di Vue, komponen dapat berisi slot. Pada dasarnya bagian di mana Anda dapat meletakkan apa pun dari komponen induk. Sebuah jendela kecil, sebuah slot sebenarnya. Dan ada ide tentang slot yang dicakup. Bayangkan komponen anak yang dapat mengekspos cakupannya sendiri kembali ke induk dan konten slot akan memiliki akses ke ini. Bayangkan saya memiliki komponen dengan slot dan komponen melakukan semua logika tentang pencarian, katakanlah pencarian yang memiliki titik akhir dengan parameter masa lalu. Komponen anak kami, seperti mencari dan kemudian memaparkan bagian cakupannya kembali ke induk. Ini adalah hasil pencarian. Menikmati. Kedengarannya bagus. Kedengarannya pasti lebih baik daripada mixin. Kita dapat menguji parameter. Logikanya eksplisit di sini, kami mengembalikan sesuatu. Masalah? Ada beberapa.

Natalia: Pertama-tama, Anda telah membuat instance komponen Anda. Ini bukan operasi termurah di dunia. Bagian kedua, runtime. Komponen hanya berfungsi saat runtime dan ini berarti bahwa properti yang diekspos dari komponen ini hanya akan dapat di slot yang Anda ekspos sebagai ruang lingkup slot, sehingga hasil pencarian Anda hanya tersedia di sebagian kecil template Anda. Jika Anda ingin bermain dengan bagian terpisah dari komponen, Anda tidak memiliki akses di sana. Ini waktu tayang. Tidak ada tindakan logika ini jika Anda membutuhkan keadaan reaktif di tempat lain. Tentu saja itu dapat membuat pembantu seperti fungsi murni dan mengembalikan hasil tetapi, bagaimana jika saya perlu beroperasi untuk sifat reaktif? Begitulah cara Composition API dibuat. Dengan Composition API, Anda dapat memiliki status reaktif mandiri. Keadaan reaktif bukan hanya bagian dari komponen lagi. Anda dapat membuat objek apa pun atau primitif, reaktif. Dan Anda dapat mengeksposnya kembali ke orang tua, itu sangat eksplisit.

Natalia: Setiap properti yang ingin Anda kembalikan ke orang tua terbuka. Ini eksplisit, Anda dapat mengklik ini, Anda dapat melihat di mana itu, apa itu, dan sebagainya. Dan bagian terbaiknya, jika Anda memasukkan bagian dari Composition API ke komponen lama yang baik yang memiliki metode data, properti komputer, apa pun, itu hanya berfungsi. Ini berfungsi dengan baik, Anda hanya menambahkan beberapa properti dan metode reaktif ke komponen Anda dan Anda juga dapat menggunakannya dengan API opsi lama.

Drew: Kedengarannya ini benar-benar akan membantu pengembang membersihkan basis kode mereka dalam hal komponen yang sangat kompleks atau bahkan kombinasi komponen yang agak rumit. Dan Anda menyebutkan testabilitas mixin dan lainnya, apakah Composition API memungkinkan testabilitas yang lebih baik?

Natalia: Ya, pasti karena Composition API, jika kami mengecualikan kait siklus hidup dari ini, karena Anda juga dapat menjalankan kait siklus hidup lain di file composeable. Ini sebenarnya fungsi murni. Anda memiliki S-parameter, Anda melakukan sesuatu dan di luar kait siklus hidup masih ada efek samping. Dan menguji fungsi murni, seperti yang Anda tahu, mungkin adalah hal yang paling mudah. Ini hanya kotak hitam, Anda memiliki parameter S, Anda memiliki sesuatu untuk dikembalikan.

Drew: Kedengarannya solusi yang sangat komprehensif untuk masalah yang saya yakin akan dihargai oleh banyak orang yang membangun aplikasi yang lebih kompleks dengan Vue. Dan itu jelas terdengar seperti cara yang sangat bagus untuk menghilangkan jenis bug yang saya tahu dapat menyusup dengan mixin, di mana sangat mudah untuk memperkenalkan bug, seperti yang Anda sebutkan, dengan cakupan yang digabungkan dan hal-hal semacam itu.

Drew: Saya selalu berpikir pertimbangan besar ketika memilih untuk membangun di atas kerangka kerja adalah stabilitas API-nya dari waktu ke waktu. Mungkin stabilitas bukanlah kata yang tepat, tetapi saya pikir banyak dari kita telah tersengat dengan membangun di atas kerangka kerja kemudian mengalami pengerjaan ulang besar-besaran dan meninggalkan kita dengan aplikasi yang membutuhkan investasi besar untuk bermigrasi atau mereka akhirnya terikat ke versi lama dari kerangka kerja yang kemudian tidak lagi didukung. Ini adalah situasi yang mengerikan. Berapa lama saya akan kehilangan waktu untuk memindahkan proyek besar dari Vue 2 ke Vue 3?

Natalia: Pertama-tama, permukaan API 90% sama seperti sebelumnya. Kami tidak memiliki banyak hal usang atau filter usang yang dapat diganti dengan hub acara usang. Jika Anda ingin menggunakan EventEmitter, Anda perlu mengganti yang berbasis tampilan dengan beberapa perpustakaan eksternal juga. Ini adalah perubahan besar, tetapi berbicara tentang migrasi… Biarkan saya jelaskan, saya benar-benar bingung sekarang, karena di satu sisi saya adalah anggota Tim Inti Vue JS. Di sisi lain, saya adalah Staff Engineer di proyek besar yang menggunakan Vue. Jika Anda akan memulai migrasi sekarang, saya tidak akan merekomendasikan melakukannya. Pertama-tama, ekosistem tidak dirilis, maksud saya jika kita berbicara tentang pustaka inti seperti Router Murni, PUX, Vue CLI, ini dalam kondisi yang baik tetapi mereka masih merupakan kandidat rilis, bukan rilis. Dan jika kita berbicara tentang ekosistem lain seperti mungkin bukan pustaka inti, pustaka komponen UI, mungkin beberapa pustaka validasi formulir, sebagian besar belum siap, untuk Vue 3. Dan jika Anda memiliki proyek besar, Anda memiliki begitu banyak dependensi yang Anda perlukan peduli. Jadi ini akan menjadi hal yang rumit.

Natalia: Apa itu pilihan? Anda memiliki proyek besar, Anda ingin menggunakan semua kebaikan API Komposisi ini. Bagaimana cara mencapai ini? Pertama-tama kami berencana untuk merilis build LTS dari Vue 2.0, Vue 2.7. Itu akan mencakup banyak peringatan penghentian, sehingga Anda akan dapat melihat apa yang akan ditinggalkan, bagaimana melakukan refactor agar tidak merusaknya dengan Vue 3. Jadi Anda secara teknis masih menggunakan Vue 2 tetapi Anda akan mempersiapkan Vue 3 lagi pula karena Anda memiliki semua peringatan.

Natalia: Kedua, kami akan menggunakan alat migrasi yang hanya dapat menjalankannya dan itu akan berfungsi sebagai codemod, menggantikan hal-hal yang berhubungan dengan Vue 2 dengan alternatif Vue 3. Tentu saja, tidak ada codemod yang sempurna. Kami bertujuan untuk, pertama-tama, melakukan penggantian bila memungkinkan, tetapi juga menunjukkan peringatan setiap kali penghentian tidak mudah ditangani. Codemod akan dapat mengenali sesuatu dan memberikan peringatan tetapi tidak menggantinya dengan sendirinya. Ini seperti rencana besar dan saat Vue 2.7 dirilis dan saya pikir sekarang perkiraan waktu kedatangan mereka adalah Desember jika saya ingat dengan benar, saya perlu memeriksa peta jalan, tapi saya pikir itu Desember.

Natalia: Ekosistemnya juga kurang lebih sudah siap. Jika Anda memiliki proyek besar dengan Vue 2.0, tunggu sebentar lagi hingga Core stabil karena meskipun Anda menghasilkan perpustakaan yang sempurna, masih perlu beberapa waktu untuk menstabilkan karena orang mulai menggunakan ini, orang mulai melaporkan bug. Jika Anda akan menggunakannya untuk proyek hewan peliharaan dan melaporkan bug, silakan, Anda dipersilakan untuk melakukannya. Dan setelah ini akan ada cara migrasi yang lancar ke Vue 3.

Drew: Jadi alat migrasi yang Anda sebutkan terdengar cukup menarik. Apakah itu pada dasarnya alat analisis statis yang melihat kode Anda dan…

Natalia: Ya, ya, ya, itu kode atau alat. Saat ini tersedia dengan cara yang sangat terbatas. Ini tersedia sebagai plug-in dari Vue CLI. Jika Anda memiliki proyek berbasis Vue CLI, Anda dapat menjalankan pemutakhiran Vue dan melihat cara kerja alat ini. Itu tidak dalam bentuk yang kita inginkan sejauh ini. Sayangnya, saya tidak mengerjakan proyek yang dibangun di atas Vue CLI. Saya perlu menunggu dan memeriksa apa yang sedang terjadi tetapi, misalnya GitHub, kami telah mengambil beberapa langkah bahkan tanpa alat migrasi untuk mempersiapkannya, karena kami tahu apa yang tidak digunakan lagi. Ini sebenarnya dinyatakan pada dokumentasi Vue 3.

Natalia: Ada panduan migrasi. Anda dapat melihat semua perubahan yang melanggar dan hal-hal yang tidak digunakan lagi dan Anda sudah dapat mengerjakan sebagian darinya bahkan pada basis kode Vue 2.0. Misalnya, di Vue 2.6 kami mengubah sintaks untuk slot. Sintaks untuk slot cakupan tidak digunakan lagi tetapi tidak ditolak, masih ada. Ini memberi peringatan tetapi Anda dapat menjalankannya. Dan tentu saja, dengan basis kode yang berusia tujuh tahun, tidak ada yang peduli untuk mengganti semua sintaks yang tidak digunakan lagi jika itu berfungsi. Tidak ada peringatan dalam produksi. Slot bekerja. Dalam pengembangan seperti, “Oh, saya melihat beberapa peringatan di konsol. Mungkin 20 dari mereka, baiklah. Itu kuning bukan merah. Saya tidak peduli”.

Natalia: Anda tahu itu terjadi pada semua orang. Kami membuat epik besar untuk mengerjakan ini. Temukan semua set sintaks lama saat ini. Kami berusaha untuk mengganti EventEmitters kami, sekali lagi, proyek berusia tujuh tahun, jangan menilai kami. Kami memiliki EventEmitter. GitLab sedang mengerjakan EventHubs. Kami mengganti kesenangan berbasis Vue dengan perpustakaan eksternal. Saya akan merekomendasikan melakukan hal yang sama. Baca panduan migrasi untuk memeriksa apa yang sudah dapat diganti dan perubahan apa yang sudah dapat Anda lakukan untuk mempersiapkan dan mulai mengerjakannya.

Drew: Dengan status alat migrasi saat ini, jadilah cara yang baik untuk menguji air dengan basis kode Anda. Hanya menjalankannya dan melihat untuk melihat apa yang sudah ditandai, untuk melihat apakah itu terlihat baik-baik saja atau apakah ada beberapa hal besar atau masih belum matang untuk itu? Apakah lebih baik menunggu sampai Desember ketika mungkin benar-benar dapat memperbaiki keadaan.

Natalia: Jika saya memiliki proyek besar, saya tidak akan merekomendasikan melakukannya. Jika Anda memiliki proyek kecil yang buruk atau mungkin beberapa proyek pribadi tetapi tidak terlalu besar, saya akan merekomendasikan untuk menjalankannya dan memeriksa masalah seperti apa pun yang Anda miliki karena untuk dua proyek menengah saya telah menjalankannya. Saya pikir satu atau dua masalah. Saya tidak bisa mengatakan itu tidak dewasa. Ini sudah dalam kondisi yang baik. Tapi untuk proyek besar lagi, itu warisan, itu beberapa hal yang eksotis. Jangan lakukan ini dalam produksi, orang-orang.

Natalia: Juga jika Anda ingin bermain dengan perancah proyek Anda, sekarang Vue CLI mendukung dua mode. Anda dapat membuat proyek Vue 2, Anda dapat membuat proyek Vue 3. Dan pasti mencobanya setidaknya. Ini adalah cara yang baik untuk kami juga karena saat Anda bermain, Anda menemukan bug, Anda melaporkan bug, kami mencoba memperbaikinya dan seterusnya.

Drew: Dalam dokumen dan peta jalan pengembangan, saya melihat penyebutan build migrasi. Apakah itu sesuatu yang berbeda dengan yang kita bicarakan atau itu yang sedang kita bicarakan?

Natalia: Tidak, tidak, sama saja. Itu sama dan harus siap tetapi untuk saat ini, jika Anda merencanakan migrasi, jalur utama hanya membaca dokumen dan mengikuti apa pun yang dikatakan di sana karena kami pasti berusaha setiap kali kami tidak memiliki alat migrasi, tim dokumentasi melanjutkan dan membuat panduan terperinci tentang apa saja perubahan itu, mengapa itu dibuat dan apa sebenarnya penggantinya di sini.

Drew: Ya, dalam dokumen adalah panduan migrasi yang cukup komprehensif sebagai bagian dari dokumen Vue 3 dan menyebutkan banyak sekali perubahan yang perlu dimigrasikan. Saya kira beberapa di antaranya tidak akan memengaruhi setiap proyek. Banyak dari mereka pada dasarnya adalah kasus tepi bagi banyak orang. Apakah itu adil?

Natalia: Ya, sebagian besar dari mereka misalnya, filter, jelas merupakan kasus tepi karena bahkan di GitLab dengan, untuk ketiga kalinya, basis kode berusia tujuh tahun dan yang besar. Kami memiliki satu atau dua kemunculan filter dan filter tersebut tidak digunakan lagi. Itu adalah hal yang baik bahwa kami mencari mereka dan menghapusnya sepenuhnya karena seperti, "Oh, kode yang tidak digunakan" dan lagi, siapa peduli itu hanya ada.

Natalia: Saya akan mengatakan bahwa perubahan total adalah perubahan model. Lihatlah ini karena setiap proyek yang saya tahu berisi setidaknya satu model Vue, pasti. Ini harus diperiksa dan mungkin atribut berubah juga karena saat ini kami menyertakan class dan style, tubular dan eter. Dan jika Anda pernah bekerja dengan Vue, sebelumnya itu tidak disertakan. Saat ini, cara Anda meneruskan kelas dan gaya ke komponen anak sedikit berbeda dan mereka pasti patut diperhatikan.

Drew: Itu bagus untuk diketahui. Rilis 3.0 yang dirilis dengan Vue, maksud saya Anda menyebutkan ekosistem dan segala sesuatu di sekitarnya, Vuex dan semua bagian lain dari ekosistem yang perlu maju ke tingkat itu. Apakah itu sebabnya, saat ini, situs web, tombol "Memulai" yang besar masih tetap menggunakan Vue 2? Rasanya seperti Vue 3 telah dirilis tetapi tidak dengan penuh percaya diri. Tapi apakah karena masalah ekosistem itu masih seperti itu?

Natalia: Tidak, saya pikir Anda baru saja menemukan bug, biarkan saya memeriksanya dengan cepat. Tidak, memulai menunjuk ke Vue 3, tidak apa-apa. Maksud saya jika Anda pergi ke vuejs.org itu menunjuk ke versi dua. Ini disengaja karena kami berencana untuk menggantinya dengan sub-domain seperti Vue 2, yang sedang dalam proses, tetapi sejauh ini kami memutuskan untuk meninggalkan vuejs.org dan membuat Vue 3 dan itulah mengapa ada spanduk di vuejs. organisasi Jika Anda pergi ke doc-

Drew: Ada spanduk yang sangat kecil di bagian atas, ya.

Natalia: Ya, seperti kecil.

Drew: Ya.

Natalia: Kita harus membuatnya lebih besar, kurasa. Lebih besar dan dengan kontras warna yang lebih baik. Perasaan aksesibilitas saya tetap seperti, "Oh, tidak ada yang kontras di sana".

Drew: Itu kabar baik. Jika seseorang memulai, mungkin bukan proyek besar, tetapi jika seseorang memulai proyek pribadi atau ingin belajar Vue, tentu saja, Vue 3 adalah tempat untuk memulai?

Natalia: Saya akan mengatakannya. Kurva belajarnya tidak jauh berbeda. Karena niat tim dokumentasi untuk memiliki opsi sintaks lama, saya tidak boleh mengatakan lama, itu sebenarnya sintaks saat ini. Sintaks yang familiar sebagai default. Karena jika Anda membaca dokumentasi Vue 3 Anda akan melihat dengan Composition API hanya dalam topik lanjutan dan jalur pembelajaran yang Anda miliki dengan Vue 3 agak mirip dengan apa yang Anda miliki di Vue 2. Tidak ada masalah besar untuk memulai dengan yang lebih baru. versi jika Anda baru belajar Vue dan mencoba bereksperimen dengannya dan saya yakin itu akan menjadi investasi yang lebih baik jika kita berbicara tentang karir. Mulailah mempelajari versi yang lebih baru karena akan menyalip semua proyek. Akhirnya, mungkin setengah tahun, setahun, bahkan untuk proyek berukuran besar akan ada migrasi.

Drew: Saya tampaknya memiliki dalam karir pribadi saya, bakat nyata untuk datang ke platform seperti mereka sedang dalam proses migrasi besar. Maksudku bahkan sejauh, apakah Anda ingat, Macromedia Director, akan kembali sejauh itu dan Shockwave, Flash dan semua hal semacam itu. Saya sampai pada hal itu ketika mereka beralih ke sintaks titik dan saya harus mempelajari keduanya. Dan inilah saya, saya menemukan diri saya pada bulan lalu, mengerjakan sebuah proyek di Vue untuk pertama kalinya, yang merupakan proyek Vue 2 dan belajar sambil berjalan dan menantikan semua hal yang akan datang di Vue 3. Ini tentu saja waktu yang menarik untuk mempelajari sesuatu saat ia bermigrasi tetapi kedengarannya itu tidak terlalu sulit dengan Vue dan begitu ekosistem telah mengikuti Core maka kita harus berada di tempat yang baik.

Natalia: Oh, Drew, saya hanya ingin menegaskan tentang apa pun yang Anda katakan tentang imigrasi proyek besar. Anda dapat membayangkan saya seperti, 2018 dan saya bergabung dengan GitLab. Saya bukan anggota Tim Inti, saya hanya kontributor saat ini.

Natalia: Pada saat yang sama Evan berkata, “Oh, kita akan membuat Vue 3”. Semua orang suka, "Ya, keren". Musim semi 2019 Anda adalah Tim Inti. Maksud saya, keseluruhan GitLab seperti, “Oh, ini lucu. Kita semua bermigrasi dan Anda tahu siapa yang bertanggung jawab untuk ini?” Dan Anda hanya dapat membayangkan bagaimana hal itu terjadi ketika Anda menulis dokumentasi untuk Vue 3, semua orang akan membaca dan perusahaan Anda sendiri seperti, "Oh, saya ingin mempelajari sesuatu tentang Vue 3, saya tidak dapat memahami dokumen Anda." Jadi Anda seperti, "Oh, sial, ini sangat menyakitkan" karena Anda seorang pengembang di sana dan penulis teknologi, di sini.

Natalia: Anda berada di tengah-tengah ini, tetapi, saya harus mengatakan itu benar-benar bermanfaat untuk kerangka kerja juga karena setiap produk besar yang dibuat dengan kerangka kerja adalah medan perang yang hebat, benar-benar hebat untuk menemukan bug dan membawanya kembali ke perpustakaan, untuk ekosistem. Saya dapat mengatakan bahwa tes, dan GitLab adalah open source, Vue Test Utils, yang merupakan alat pengujian untuk Vue. Sebuah tim menggunakan kode pengujian kami berdasarkan pengujian, yang sangat masuk akal, bukan. Karena Anda dapat menemukan beberapa kasus tepi dan sebagainya. Tapi tetap saja, ketika saya berpikir untuk memigrasikan GitLab ke Vue 3, saya merasa memiliki tanggung jawab pribadi untuk ini. Saya tidak hanya berada di tengah-tengah migrasi, saya secara pribadi bertanggung jawab atas setiap bug yang kami temukan.

Drew: Melihat kembali kerangka kerja JavaScript generasi sebelumnya, saya pikir salah satu yang paling sukses adalah jQuery, pada masa itu, dan saya pikir itu mendapatkan daya tarik karena memiliki API yang dirancang dengan sangat baik. Hanya konsep mengambil pemilih CSS dan menggunakannya untuk menanyakan DOM di JavaScript Anda adalah sesuatu yang dipopulerkan jQuery. 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.

Drew: Itu benar-benar.

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.