JavaScript Yeniden Yeniden Düzenleme: Eski Kod ile Çalışırken Teknik Borç Nasıl Kaçınılır
Yeniden düzenlemekten kaçındığınız eski bir JavaScript kodu tabanınız var mı? Aynı şekilde WordPress. Son zamanlarda WordPress’in çekirdeğine dikkat ederseniz, yeni özellikler eklerken JavaScript ve uzun vadeli bir JavaScript’in nasıl yeniden uygulanacağı hakkında tartışmada bir artış olduğunu fark edebilirsiniz. #Core Slack kanalında birkaç JavaScript toplantısı yapıldı. Bunlar ilk günlerdir, ancak WordPress JavaScript departmanında büyük bir değişiklik almaya hazırdır. REST API ile desteklenen Gutenberg, özelleştirici yenilenmesi ve WP-Admin adlı yeni editör projesi, gelecekteki sürüm için planlanan üç ana odak alanıdır.
Bu odak alanı, özellikle Gutenberg Projesi ve API REST’nin uygulanması hakkında tartışmalar, büyük JavaScript kodu tabanının yeniden tasarlanmasında daha büyük bir sorunu hatırlattı. WordPress gibi büyük JavaScript kodu tabanlarına yeni özellikler ve çerçeveler eklemeye bile başlıyorsunuz? Bu makalede, bu tür bir yeniden düzenleyiciyi yönetme, JavaScript’i yeniden aktarırken bazı belirli seçenekleri tartışmak ve mevcut kod tabanınız için yapılabilecek bazı güncellemeleri çalıştırmak için çeşitli yaklaşımlar hakkında konuşacağız. Massive Main.js dosyasını modernize etmeye hazır mısınız? Haydi Yapalım şunu!
Teknik borç (ya da bazı kodlarınız 1997’den neden görünüyor) Çoğu geliştirici gibiyseniz, birkaç yıl önce yazılmış eski kod tabanı üzerinde çalışmanız gerekebilir. Birkaç yıl JavaScript dünyasında birkaç yüzyıl gibi, bu yüzden çoğu zaman bu eski koda dokunmaktan ve kaosu rahatsız etmeden yeni özellikler eklemekten kaçınmaya çalışacaksınız. Bu yaklaşımdan kaynaklanabilecek sorunları anlamak için aşağıdakileri hayal edelim. Patronunuz size gidiyor ve “Özellik-X dumanı eklememiz gerekiyor!” Diyor. Bu yeni özelliğe başlayıp kalbinizde “Gerçekten Angular 4 ve TypeScript’i denemek istiyorum, belki de bu yeni özellik için kullanacağım” diye düşünüyorsunuz. Böylece 100 yıllık jQuery çorbasını olduğu gibi bırakırsınız (eski hata ile birlikte) ve açısal 4 ve webpack ile yeni bir modül oluşturmaya başlarsınız. Gelecek dalgalar! Çok hızlı değil. Şimdi teknik borç denen bir şeyi geliştirdiniz. Bu, yazılımın geliştirilmesinde çok yaygın olan bir şeydir – temel olarak her kod satırının gelecekte korunması ve gözden geçirilmesi gerektiğini anlar ve yeni özellikler veya işlevlerle ileriye doğru ilerlerken sorunları veya hataları daha sonra bırakır. Eski kod ve hata, kod tabanında daha fazla değişiklik yapılması gerektiğinde gelecekte ödenmesi gereken bir borç haline gelir. Patronunuz bundan bir ay sonra geri döndüğünde ve eski bileşenleri güncellemenizi istediğini söylediğinde, ne yapıyorsunuz? Angular 4’e eski bileşenleri yeniden düşünmek ve vermek mi yoksa ekliyor mu?
Tabii ki, orijinal çerçevenize veya sürecinize bağlı kalarak bile teknik borç verebilirsiniz, ancak yeni bir çerçeveye veya yeni bir sürece döndüğünüzde katlanarak artabilirsiniz. Bu, yeniden düzenleme ve genel kod kalite standartlarıyla yakından ilişkilidir. Teknik borçlardan kaçınmanın tek yolu herhangi bir kod yazmamaktır! WordPress Core’un mevcut gelişimi bu zorlukların çoğuyla karşı karşıyadır. Karar, gelecekteki UI etkileşimleri için hangi çerçevenin seçileceği ve eski kodlar ve yeni kodlar için hangi yaklaşımların alınması gerektiği konusunda veriliyor. WordPress vakası belki de internette kullanılan daha büyük JavaScript kodu tabanlarından biri olan WordPress, planlama özelliklerinde zorluklarla karşı karşıya kalır ve gelecekte yayınlar. Yeni bir sürüm programı ile, özellik her ana sürümün merkezidir ve ana yeni özellikleri eklerken hızlı bir şekilde serbest bırakma baskısı vardır. WordPress Core tarafından kullanılan mevcut JavaScript stokunu almaya cesaret ederseniz, biraz bunalmış olabilirsiniz. Adam Silverstein tarafından yapılan son ankette 38.191 satır, 95 toplam JS dosyası, 16’sı kütüphane omurgası.js kullanıyor. WordPress, teknik borcu dengelemeye ve yeni özelliklerin uygulanmasıyla yeniden düzenlenmeye karşı bağışık değildir. Çok fazla JavaScript hatası kaydedilmediğinden, teknik borcun WordPress için bir sorun olmadığı veya en azından düzgün bir şekilde ele alındığı söylenebilir. Ancak, eski mantığı yeni modele uyacak şekilde yeniden düzenlemezken, borç yeni bir çerçeve ve yeni bir kütüphane eklenmesinden kaynaklanmaktadır.
Parçalanma çerçevesinin son örneği Gutenberg projesidir. Bu, “yeni bir sayfa oluşturmak ve bir bina deneyimi yayınlamak” için WordPress düzenleyicisini güncellemek için bir projedir. Amaç, kısa kodları ve özel HTML’leri “bloklar” ve daha esnek editörler arayüzleri ile değiştirmektir. Gutenberg ekibi, React çerçevesine dayanan bir prototip yaptı. Şu anda tepki vermek çekirdeğe kullanılmaz, bu da ek bir çerçeve eklemek anlamına gelir. Ayrıca, React, omurgadan veya jQuery’den temel olarak farklı bir çerçevedir – şu anda çekirdek WordPress’te kullanılan iki çerçeve. Bu yeni O’Reilly Kitap Pic.twitter.com/PNHQUG3257 – WES BOS (@WESBOS) Mayıs Mayıs 12, 2015 React kullanma kararı, ek bir çerçeveden tutarlılık ve ek ağırlık yerine özelliklere öncelik vermede gerçek sorunu vurgular. Hacker öğle saatlerinde ilginç bir yazı, ‘ince’ kalmak ve hızlı hareket etme yeteneğini korumak için önemli bir bileşen olarak bağımlılığı en aza indirmeyi vurgular. Kütüphaneyi projenize eklediğinizde, tüm kütüphaneleri ve kullanımlarını kiralarsınız. Bu nedenle, her kütüphane, her eklenti için iyi bir durum yapmanız gerekir. Küçük olanlar bile. Çabuk eklediler. Ve çok hafif ve disiplinli bir yaklaşım benimserseniz, ne kadar hızlı hareket edebileceğinize şaşıracaksınız.
WordPress’in çekirdeğine başka bir çerçeve ekleyerek, önemli bir yeniden düzenleyici olmadan, karmaşıklığın ve ek borcun yeni özellik değerinden daha yüksek olduğunu iddia ediyorum.Ana yeniden düzenleyicinin yerine geçerek, en azından farklı JavaScript bileşenlerini birbirine bağlamak için standart ateşi tanımlamak mantıklıdır.Ayrıca, bunun WordPress’in özünde JavaScript’in geleceğini tartışmak açısından hala erken olduğunu belirtmeliyim, ancak bazı görüşler ve yönler oluşmaya başladı.Gutenberg’in hala React’i kullanıp kullanmadığını ve çekirdeğe birleştirilip kullanılmadığını söyleyecektir, ancak eski JavaScript projesini yeniden düşündüğü kanıtlanmış birkaç yöntem var.Bakalım kendi JavaScript’imizle neler yapılabileceğini görelim.
JavaScript yeniden faktorasyon seçenekleri, böylece WordPress’in çekirdeğinin bile JavaScript kodu tabanının çoğunu yeniden düzenleyen teknik borç ve felaketten muzdarip olduğunu gördük.Ancak kütüphanelerden ve modern JavaScript çerçevelerinden yararlanmak için ne yapılabilir?Bu bir dizi standart ve katı kodlama testleri ile başlar.Bazı seçeneklere bakalım.JavaScript Kodlama Standartları Teknik borcu en aza indirmek ve refactor maliyetlerini azaltmaya başlamak için ilk adım bir kodlama standardına sahip olmaktır.JavaScript için, görüşle temerrüde sahip birçok proje var, ancak ekibiniz ve projeniz için başarılı olanı gerçekten boşalıyor.ESLINT araçları bu standardı korumaya yardımcı olabilir ve kodun tutarlı bir biçimlendirme seviyesini korumasını sağlamak için belirleyici GIT kancalarına ayarlanabilir.Kodun biçimi ve tutarlılığı, tüm kodların aynı stile bağlı kaldığı için geliştirme hızına yardımcı olur, böylece okunması ve gözden geçirilmesi daha kolaydır.
Bir kod incelemesi yapıyorsun, değil mi? Bir dizi katı kodlama standartına sahip olmanın bir diğer avantajı, eski kodların yeniden faktörleri de dahil olmak üzere her kod güncellemesinin kodlama standartlarına uyması gerektiğidir. Bu, eski kodu yavaşça modernleştirmeye ve yeni kodların kalitesini ve tutarlılığını artırmaya yardımcı olur. React ile birim testi Bu makalede React hakkında konuştuğumuz için, birim testinin React-Facto Jest Test Kütüphanesi ile nasıl düzenleneceğini tartışacağız. Jest, yönetimi oldukça kolay olan ve hızlı bir şekilde başlamak ve çalıştırmak istiyorsanız, bir React uygulaması oluşturulmuş bir araçtır. Bu, daha önce Create React uygulamasıyla yapılandırılmış basit bir testtir. ‘React’ den ithalat reaksiyonu; ‘React-Dom’dan reaksiyonun içe aktarılması; ‘./App’ den uygulamayı içe aktarın; ‘Enzim’den {sığ} içe aktarın; ‘./Header’ den başlığı içe aktarın; (‘çökmeden oluşturur’, () => {const div = document.createElement (‘div’); reactdom.render (, div);}); It (‘sahne ile başlığı oluşturur’, () => {const header = sığ (
Açıkçası, gerçekleştirilebilecek daha karmaşık bir test var, ancak bu, üniteyi test ederek hazırlamak için kaç tane ek çabaya ihtiyaç duyulduğunu gösteriyor. Çok değil! Jest kütüphanesini kullanmanın yararı, JavaScript vanilya için de testler yazmanıza izin vermesidir. Yeni ve eski kodlar için testler yazarak yeniden düzenleme riski azalır. Test kapsamının amacı, yol boyunca her bir regresyon veya hasarla başa çıkmaktır. Kısmi yeniden faktörler kısmi yeniden faktördür veya “yürürken temizlik”, birçok proje tarafından yeniden faktörler (Lezzetli Brains Inc. dahil!) İçin seçilmiş gibi görünen bir seçenektir. Bu, yeni özellikler ve kod eklediğinizde eski bir kod güncellemesini içerir. Örneğin, WordPress gibi, görünüm katmanınızı tepki verecek şekilde değiştirmek istediğinizi söyleyin. Diyelim ki birçok eski jQuery ve Ajax çağrılarınız var: $ (function () {$ (“.my-form”) .on (‘gönder’, (e) {var repo = $ (‘.repo’). Val (); var endpoint = ‘https://api.github.com/repos/’ + repo + ‘/serialler’; $ .get (uç nokta, fonksiyon (data) {if (! Data.length) {$ ($ (data.length) ‘.message’) .html (‘:’ + repo); return;} $ (‘. Serial-wrap’) .Empty (); $ (‘.message’) .Empty (); $ (‘ .repo-name ‘) .html (repo); var detaylar = veri; (var i = 0; i <detays.length; i ++) {var formatted_body = detaylar [i] .body.split ('
') .Jin ('
'); console.log (formatted_body); $ ('. Sayı-wrap'). Append ('
' + 'Raporlanan – {detays.user.login}
Bu odak alanı, özellikle Gutenberg Projesi ve API REST’nin uygulanması hakkında tartışmalar, büyük JavaScript kodu tabanının yeniden tasarlanmasında daha büyük bir sorunu hatırlattı. WordPress gibi büyük JavaScript kodu tabanlarına yeni özellikler ve çerçeveler eklemeye bile başlıyorsunuz? Bu makalede, bu tür bir yeniden düzenleyiciyi yönetme, JavaScript’i yeniden aktarırken bazı belirli seçenekleri tartışmak ve mevcut kod tabanınız için yapılabilecek bazı güncellemeleri çalıştırmak için çeşitli yaklaşımlar hakkında konuşacağız. Massive Main.js dosyasını modernize etmeye hazır mısınız? Haydi Yapalım şunu!
Teknik borç (ya da bazı kodlarınız 1997’den neden görünüyor) Çoğu geliştirici gibiyseniz, birkaç yıl önce yazılmış eski kod tabanı üzerinde çalışmanız gerekebilir. Birkaç yıl JavaScript dünyasında birkaç yüzyıl gibi, bu yüzden çoğu zaman bu eski koda dokunmaktan ve kaosu rahatsız etmeden yeni özellikler eklemekten kaçınmaya çalışacaksınız. Bu yaklaşımdan kaynaklanabilecek sorunları anlamak için aşağıdakileri hayal edelim. Patronunuz size gidiyor ve “Özellik-X dumanı eklememiz gerekiyor!” Diyor. Bu yeni özelliğe başlayıp kalbinizde “Gerçekten Angular 4 ve TypeScript’i denemek istiyorum, belki de bu yeni özellik için kullanacağım” diye düşünüyorsunuz. Böylece 100 yıllık jQuery çorbasını olduğu gibi bırakırsınız (eski hata ile birlikte) ve açısal 4 ve webpack ile yeni bir modül oluşturmaya başlarsınız. Gelecek dalgalar! Çok hızlı değil. Şimdi teknik borç denen bir şeyi geliştirdiniz. Bu, yazılımın geliştirilmesinde çok yaygın olan bir şeydir – temel olarak her kod satırının gelecekte korunması ve gözden geçirilmesi gerektiğini anlar ve yeni özellikler veya işlevlerle ileriye doğru ilerlerken sorunları veya hataları daha sonra bırakır. Eski kod ve hata, kod tabanında daha fazla değişiklik yapılması gerektiğinde gelecekte ödenmesi gereken bir borç haline gelir. Patronunuz bundan bir ay sonra geri döndüğünde ve eski bileşenleri güncellemenizi istediğini söylediğinde, ne yapıyorsunuz? Angular 4’e eski bileşenleri yeniden düşünmek ve vermek mi yoksa ekliyor mu?
Tabii ki, orijinal çerçevenize veya sürecinize bağlı kalarak bile teknik borç verebilirsiniz, ancak yeni bir çerçeveye veya yeni bir sürece döndüğünüzde katlanarak artabilirsiniz. Bu, yeniden düzenleme ve genel kod kalite standartlarıyla yakından ilişkilidir. Teknik borçlardan kaçınmanın tek yolu herhangi bir kod yazmamaktır! WordPress Core’un mevcut gelişimi bu zorlukların çoğuyla karşı karşıyadır. Karar, gelecekteki UI etkileşimleri için hangi çerçevenin seçileceği ve eski kodlar ve yeni kodlar için hangi yaklaşımların alınması gerektiği konusunda veriliyor. WordPress vakası belki de internette kullanılan daha büyük JavaScript kodu tabanlarından biri olan WordPress, planlama özelliklerinde zorluklarla karşı karşıya kalır ve gelecekte yayınlar. Yeni bir sürüm programı ile, özellik her ana sürümün merkezidir ve ana yeni özellikleri eklerken hızlı bir şekilde serbest bırakma baskısı vardır. WordPress Core tarafından kullanılan mevcut JavaScript stokunu almaya cesaret ederseniz, biraz bunalmış olabilirsiniz. Adam Silverstein tarafından yapılan son ankette 38.191 satır, 95 toplam JS dosyası, 16’sı kütüphane omurgası.js kullanıyor. WordPress, teknik borcu dengelemeye ve yeni özelliklerin uygulanmasıyla yeniden düzenlenmeye karşı bağışık değildir. Çok fazla JavaScript hatası kaydedilmediğinden, teknik borcun WordPress için bir sorun olmadığı veya en azından düzgün bir şekilde ele alındığı söylenebilir. Ancak, eski mantığı yeni modele uyacak şekilde yeniden düzenlemezken, borç yeni bir çerçeve ve yeni bir kütüphane eklenmesinden kaynaklanmaktadır.
Parçalanma çerçevesinin son örneği Gutenberg projesidir. Bu, “yeni bir sayfa oluşturmak ve bir bina deneyimi yayınlamak” için WordPress düzenleyicisini güncellemek için bir projedir. Amaç, kısa kodları ve özel HTML’leri “bloklar” ve daha esnek editörler arayüzleri ile değiştirmektir. Gutenberg ekibi, React çerçevesine dayanan bir prototip yaptı. Şu anda tepki vermek çekirdeğe kullanılmaz, bu da ek bir çerçeve eklemek anlamına gelir. Ayrıca, React, omurgadan veya jQuery’den temel olarak farklı bir çerçevedir – şu anda çekirdek WordPress’te kullanılan iki çerçeve. Bu yeni O’Reilly Kitap Pic.twitter.com/PNHQUG3257 – WES BOS (@WESBOS) Mayıs Mayıs 12, 2015 React kullanma kararı, ek bir çerçeveden tutarlılık ve ek ağırlık yerine özelliklere öncelik vermede gerçek sorunu vurgular. Hacker öğle saatlerinde ilginç bir yazı, ‘ince’ kalmak ve hızlı hareket etme yeteneğini korumak için önemli bir bileşen olarak bağımlılığı en aza indirmeyi vurgular. Kütüphaneyi projenize eklediğinizde, tüm kütüphaneleri ve kullanımlarını kiralarsınız. Bu nedenle, her kütüphane, her eklenti için iyi bir durum yapmanız gerekir. Küçük olanlar bile. Çabuk eklediler. Ve çok hafif ve disiplinli bir yaklaşım benimserseniz, ne kadar hızlı hareket edebileceğinize şaşıracaksınız.
WordPress’in çekirdeğine başka bir çerçeve ekleyerek, önemli bir yeniden düzenleyici olmadan, karmaşıklığın ve ek borcun yeni özellik değerinden daha yüksek olduğunu iddia ediyorum.Ana yeniden düzenleyicinin yerine geçerek, en azından farklı JavaScript bileşenlerini birbirine bağlamak için standart ateşi tanımlamak mantıklıdır.Ayrıca, bunun WordPress’in özünde JavaScript’in geleceğini tartışmak açısından hala erken olduğunu belirtmeliyim, ancak bazı görüşler ve yönler oluşmaya başladı.Gutenberg’in hala React’i kullanıp kullanmadığını ve çekirdeğe birleştirilip kullanılmadığını söyleyecektir, ancak eski JavaScript projesini yeniden düşündüğü kanıtlanmış birkaç yöntem var.Bakalım kendi JavaScript’imizle neler yapılabileceğini görelim.
JavaScript yeniden faktorasyon seçenekleri, böylece WordPress’in çekirdeğinin bile JavaScript kodu tabanının çoğunu yeniden düzenleyen teknik borç ve felaketten muzdarip olduğunu gördük.Ancak kütüphanelerden ve modern JavaScript çerçevelerinden yararlanmak için ne yapılabilir?Bu bir dizi standart ve katı kodlama testleri ile başlar.Bazı seçeneklere bakalım.JavaScript Kodlama Standartları Teknik borcu en aza indirmek ve refactor maliyetlerini azaltmaya başlamak için ilk adım bir kodlama standardına sahip olmaktır.JavaScript için, görüşle temerrüde sahip birçok proje var, ancak ekibiniz ve projeniz için başarılı olanı gerçekten boşalıyor.ESLINT araçları bu standardı korumaya yardımcı olabilir ve kodun tutarlı bir biçimlendirme seviyesini korumasını sağlamak için belirleyici GIT kancalarına ayarlanabilir.Kodun biçimi ve tutarlılığı, tüm kodların aynı stile bağlı kaldığı için geliştirme hızına yardımcı olur, böylece okunması ve gözden geçirilmesi daha kolaydır.
Bir kod incelemesi yapıyorsun, değil mi? Bir dizi katı kodlama standartına sahip olmanın bir diğer avantajı, eski kodların yeniden faktörleri de dahil olmak üzere her kod güncellemesinin kodlama standartlarına uyması gerektiğidir. Bu, eski kodu yavaşça modernleştirmeye ve yeni kodların kalitesini ve tutarlılığını artırmaya yardımcı olur. React ile birim testi Bu makalede React hakkında konuştuğumuz için, birim testinin React-Facto Jest Test Kütüphanesi ile nasıl düzenleneceğini tartışacağız. Jest, yönetimi oldukça kolay olan ve hızlı bir şekilde başlamak ve çalıştırmak istiyorsanız, bir React uygulaması oluşturulmuş bir araçtır. Bu, daha önce Create React uygulamasıyla yapılandırılmış basit bir testtir. ‘React’ den ithalat reaksiyonu; ‘React-Dom’dan reaksiyonun içe aktarılması; ‘./App’ den uygulamayı içe aktarın; ‘Enzim’den {sığ} içe aktarın; ‘./Header’ den başlığı içe aktarın; (‘çökmeden oluşturur’, () => {const div = document.createElement (‘div’); reactdom.render (, div);}); It (‘sahne ile başlığı oluşturur’, () => {const header = sığ (
Açıkçası, gerçekleştirilebilecek daha karmaşık bir test var, ancak bu, üniteyi test ederek hazırlamak için kaç tane ek çabaya ihtiyaç duyulduğunu gösteriyor. Çok değil! Jest kütüphanesini kullanmanın yararı, JavaScript vanilya için de testler yazmanıza izin vermesidir. Yeni ve eski kodlar için testler yazarak yeniden düzenleme riski azalır. Test kapsamının amacı, yol boyunca her bir regresyon veya hasarla başa çıkmaktır. Kısmi yeniden faktörler kısmi yeniden faktördür veya “yürürken temizlik”, birçok proje tarafından yeniden faktörler (Lezzetli Brains Inc. dahil!) İçin seçilmiş gibi görünen bir seçenektir. Bu, yeni özellikler ve kod eklediğinizde eski bir kod güncellemesini içerir. Örneğin, WordPress gibi, görünüm katmanınızı tepki verecek şekilde değiştirmek istediğinizi söyleyin. Diyelim ki birçok eski jQuery ve Ajax çağrılarınız var: $ (function () {$ (“.my-form”) .on (‘gönder’, (e) {var repo = $ (‘.repo’). Val (); var endpoint = ‘https://api.github.com/repos/’ + repo + ‘/serialler’; $ .get (uç nokta, fonksiyon (data) {if (! Data.length) {$ ($ (data.length) ‘.message’) .html (‘:’ + repo); return;} $ (‘. Serial-wrap’) .Empty (); $ (‘.message’) .Empty (); $ (‘ .repo-name ‘) .html (repo); var detaylar = veri; (var i = 0; i <detays.length; i ++) {var formatted_body = detaylar [i] .body.split ('
') .Jin ('
'); console.log (formatted_body); $ ('. Sayı-wrap'). Append ('
' + '
<a href =' + detaylar [i] .html_url + 'hedef = "_ boş "
> ‘ +Ayrıntılar [i] .Title +’
‘ +’
– ‘ + Ayrıntılar [i] .user.login +’
‘ + formatted_body +’ ‘)}). jqxhr, textstatus, hatalı ) {Console.log (errorthrown, jqxhr.status, textStatus); $ (‘.message’) .html (errorown + “” + jqxhr.status + “” + textStatatus)); }); }); Codepen’deki Peter (@Tasker82) tarafından Pen JQuery Github Sorunları Listesine bakın. Tanıdık görünmek? Benim için de. Ekran katmanımızı reaksiyona dönüştürerek artımlı bir yaklaşım benimsemek istiyorsak, işaretleme dizesinin bazı bölümlerini React bileşenine taşımaya başlayabiliriz. Sınıf SayısInfo React.Component {render () {const Details = this.props.Details; Return (
