JSON verilerinden ziyade HTML döndüren bir uç nokta ile ilgili yanlış olan nedir?

PHP'yi ilk öğrenmeye başladığımda (yaklaşık 5 ya da 6 yıl önce) , Ajax'ı öğrendim ve "aşamalardan" geçtim:

1. Sunucu HTML verileri döndürür ve bir içine koymak DOM innerHTML
2. XML gibi veri aktarma biçimleri hakkında bilgi edinirsiniz (ve "ne demek için kullanılırsa oooh" deyin ve ardından JSON.
3. JSON'a geri dönersiniz ve kullanıcı arayüzünüzü vanilya JavaScript kodunu kullanarak oluşturursunuz
4. JQuery'ye geçiyorsun
5. API'ler, başlıklar, HTTP durum kodları, REST , CORS ve Bootstrap hakkında bilgi edinin.
6. Öğrenecek SPA ve önyüzü çerçeveler ( Tepki , Vue.js ve angularjs ) ve JSON API standardı.
7. Bazı kurumsal eski kodlar alırsınız ve denetledikten sonra, 1. adımda açıklananları yaptıklarını bulun.

Bu eski kod tabanında çalıştığım için, HTML döndüreceğini bile düşünmedim (yani, şu anda profesyoneliz, değil mi?), Bu yüzden verileri döndüren JSON bitiş noktasını ararken zorlandım. Ajax popülasyon çağırır. Bana "programcıya" HTML’yi döndürdüğünü ve doğrudan DOM’ya innerHTML ile eklendiğini söyleyene kadar değildi.

Elbette, bunu kabul etmek zordu. Bunu JSON uç noktalarına yeniden yansıtmanın yollarını düşünmeye, uç noktaları test etmeyi ve bunun gibi birimler hakkında düşünmeye başladım. Bununla birlikte, bu kod tabanında test yoktur. Tek bir tane değil. Ve 200 bin çizgiden fazla. Tabii ki görevlerimden biri, her şeyi test etmek için yaklaşımlar önermeyi içeriyor, ancak şu anda henüz bununla başa çıkmıyoruz.

Yani hiçbir yerde, bir köşede, merak ediyorum: hiç bir testimiz yoksa, bu JSON bitiş noktasını oluşturmak için özel bir nedenimiz yok (çünkü "yeniden kullanılamaz" olmadığından: kelimenin tam anlamıyla yalnızca bu kısmına uyan verileri döndürüyor. uygulama, ancak sanırım bu zaten HTML ... veriyi döndürdüğü için ima edildi.

Bunu yapmanın tam olarak nesi yanlış?

JSON verilerinden ziyade HTML döndüren bir uç nokta ile ilgili yanlış olan nedir?

Gerçekten hiçbir şey. Her uygulamanın farklı gereksinimleri vardır ve uygulamanızın bir SPA olarak tasarlanmamış olması olabilir.

Alıntı yaptığınız bu güzel çerçevelerin (Açısal, Vue, React, vb ...) geliştirme zamanında kullanılamaması ya da kuruluşunuzda kullanılmak üzere "onaylanmış" girişimci şeylerin bulunmaması olabilir.

Size şunu söyleyeceğim: HTML döndüren bir son nokta, JavaScript kitaplıklarına olan bağımlılığınızı azaltır ve kullanıcının tarayıcısındaki yükü azaltır, çünkü DOM nesnelerini oluşturmak için JS kodunu yorumlamak / yürütmek zorunda kalmayacak - HTML zaten orada, bu sadece unsurları ayrıştırma ve oluşturma meselesi. Tabii ki bu, makul miktarda veriden bahsettiğimiz anlamına gelir. 10 megabayt HTML verisi makul değildir.

Ancak, HTML’yi döndürmede yanlış bir şey olmadığından JSON / XML kullanmayarak kaybettiğiniz şey, temel olarak uç noktanızı bir API olarak kullanma olasılığıdır. Ve burada en büyük soru yatıyor: gerçekten bir API olması gerekiyor mu?

İlgili: HTML'i bir JSON API'sinden döndürmek uygun mudur?

JSON ve HTML iki farklı anlamsal amaç yerine getirmektedir.

Verileri olan bir web sayfasını dolduruyorsanız, JSON kullanın. Web sayfalarının bölümlerinden bir web sayfası oluşturuyorsanız, HTML kullanın.

Aynı şeymiş gibi ses çıkarabilirler, ama değiller. Birincisi, sunucu tarafından döndürülen HTML'yi kullanarak bir web sayfasının bir kısmını oluştururken, sunucu tarafında çalışıyorsunuzdur . Bir web sayfasına veri bağlarken, müşteri tarafında çalışıyorsunuz .

Ayrıca, belirli bir sayfaya sıkıca bağlanmamak için HTML konusunda dikkatli olmalısınız. Kısmi sayfaları bu şekilde oluşturmanın amacı, kısmi parçaların yeniden kullanılabilir olmalarıdır ve kısmi kısmı çok belirgin yaparsanız, diğer sayfalardan oluşmaz. JSON bu soruna sahip değil, çünkü bu sadece web sayfası yapısı değil veri.

Asıl sorun, sunucuyu, HTML yapısını bilmesi gereken istemciye sıkıca bağlamasıdır. Ayrıca, son noktaların yeni yöntemlerde veya yeni uygulamalarda yeniden kullanılmasını zorlaştırır.

Düz verileri döndürmek ve müşterinin bunu yapmasına izin vermek, kuplajı azaltır ve esnekliği ve test edilebilirliği artırır; sahte veriler için istemcide birim testleri yapabilir ve istenen verileri test etmek için sunucuda birim testleri çalıştırabilirsiniz.

Bence biraz geriye aldın. Diyorsun:

Ne olursa olsun herhangi bir testimiz yok, bu yüzden bu JSON uç noktasını oluşturmak için özel bir nedenimiz yok.

Uygun bir son nokta kullanmanın bir nedeni, onu test edebilmeniz için olacaktır. Test yaptırmamak bazılarını yazmaya başlamak için çok iyi bir neden olduğunu söyleyebilirim. Yani, test etmeye uygun herhangi bir mantık varsa.

200k kod satırı refactor için çok fazla ve muhtemelen bakımı zordur. Bazı uç noktaları kesmek ve onları test etmek, başlamak için iyi bir yer olabilir.

Başka bir neden, sunucuyu istemciden ayırmak olabilir. Uzak bir gelecekte, uygulama tasarımı veya düzeni değişirse, HTML çıktısından daha uygun bir veri biçimiyle çalışmak daha kolaydır. İdeal bir dünyada, sadece istemciyi değiştirmeniz ve sunucuya dokunmamanız gerekir.

Bir web sayfası oluşturmanın 3 yolu vardır (en azından?):

• Sayfa sunucusu tarafının tamamını oluşturun.
• Sunucu artı kodundan (JavaScript) çıplak kemikler sayfası döndürün ve sayfanın verilerini alıp HTML istemci tarafına getirmesini sağlayın.
• Kısmi bir sayfa artı kodu döndürün ve kodun, önceden işlenmiş HTML bloklarını sayfaya bırakmasını sağlayın.

İlki iyi. İkincisi de iyi. Sorun sonuncusu.

Nedeni basit: Artık var bölünmüş tamamen bağlantısız bölüme HTML sayfası yapımını. Sorun bakımlardan biri. Şimdi , kullanıcı arayüzünün ayrıntılarını yönetmekle görevli iki ayrı biriminiz var . Bu yüzden CSS ve diğer benzer detayları iki ayrı parça arasında senkronize tutmak zorundasınız. Yan çubuğun genişliğini değiştirdiniz mi? Harika. Şimdi geri gelen HTML parçası yatay kaydırmaya neden oluyor, çünkü kenar çubuğu genişliği hakkındaki varsayımları artık geçerli değil. Bu blok için arka plan rengini değiştirdiniz mi? Harika, şimdi HTML parçanızın font rengi çakışıyor çünkü farklı bir arka plan rengini üstlendi ve birisi bu bitiş noktasını test etmeyi unuttu.

Mesele şu ki, tek bir yerde merkezileştirilmesi gereken bilgiyi (yani sunum mantığı) bölüştürdünüz ve bu, tüm parçaların doğru bir şekilde uymasını sağlamak için zorlaşıyor. Bir JSON API kullanarak, bunun yerine tüm mantığı yalnızca ön uçta tutabilir veya verilerinizi başlangıçta HTML olarak işlediğinizde tüm bunları sunucu tarafı şablonlarınızda tutabilirsiniz. Sunum bilgisini / mantığı tek bir yerde tutmakla ilgilidir, böylece tutarlı ve tek bir sürecin parçası olarak yönetilebilir. HTML / CSS / JS, çok küçük parçalara ayrılmadan düz tutulacak kadar zordur.

JSON API'leri ayrıca verileri sunum mantığından tamamen bağımsız olarak elde etmenin yararına da sahiptir. Bu, hem mobil uygulama hem de web sayfası gibi birden çok farklı sunucunun aynı verileri kullanmasını sağlar. Özellikle, verileri bir tarayıcı olmadan tüketmeyi sağlar (örneğin mobil uygulamalar veya gece cron işleri); Bu tüketiciler bile HTML'yi ayrıştıramayabilirler. (Bu, elbette, verilerin farklı tüketiciler arasında aynı olduğu veya birinin diğerinin alt kümesini kullanabileceği bir duruma sahip olmaya dayanır.) Bu yeteneğe ihtiyaç duyup duymadığın, sunumunuzu yönetirken, uygulamanızın gereksinimlerine bağlıdır. mantık ne olursa olsun gereklidir. Yine de uygularsanız, gelecekteki büyüme için daha iyi hazırlanacağınızı söyleyeceğim.

Sunucunun bir HTML parçasını döndürmesi ve UI'nin bazı öğelerin .innerHTML dosyasına atanmasında yanlış bir şey olmadığını söyleyebilirim. Bu, benim görüşüme göre, zaman uyumsuz JavaScript kodu geliştirmek için en kolay yoldur. Bunun yararı, JavaScript kullanarak mümkün olduğunca az işlem yapılmasının ve mümkün olduğu kadar kontrollü bir arka uç ortamında gerçekleştirilmesidir. Tarayıcılardaki JavaScript desteğinin farklı olduğunu ancak arka ucunuzun her zaman arka uç bileşenlerinin aynı sürümüne sahip olduğunu unutmayın; bu, arka uçta mümkün olduğunca fazla işlem yapmanın mümkün olan en az sürüm uyumsuzluğu anlamına geleceği anlamına gelir.

Şimdi, bazen bir HTML parçasından daha fazlasını istersiniz. Örneğin, bir durum kodu ve bir HTML parçası. Daha sonra iki üyeli bir JSON nesnesi kullanabilirsiniz: statusCode ve statusCode'u kontrol ettikten sonra bazı öğelerin .innerHTML öğelerine ikincil atanabilir HTML. Dolayısıyla, JSON kullanmak ve innerHTML kullanmak, hiçbir şekilde alternatif özel yaklaşımlar değildir; birlikte kullanılabilirler.

JSON'u kullanarak, aynı yanıtta birden fazla öğenin .innerHTML dosyasına atanan birden fazla HTML parçasına sahip olabilirsiniz.

Özetle: .innerHTML kullanın. Kodunuzu olabildiğince çok tarayıcı sürümüyle uyumlu hale getirir. Daha fazlasına ihtiyacınız varsa, JSON ve .innerHTML'yi birlikte kullanın. XML'den kaçının.

Prensipte yanlış bir şey yok . Soru şudur: Ne elde etmek istiyorsunuz?

JSON veri iletimi için mükemmeldir. Bunun yerine HTML gönderir ve istemciden verileri HTML'den ayıklamasını beklerseniz, bu çöplük olur.

Öte yandan, HTML olarak işlenecek olan HMTL'yi iletmek istiyorsanız , HTML olarak bir dizeye paketlemek yerine, dizeyi JSON'a çevirmek, JSON iletmek, diğer tarafa kodlamak yerine göndermek , bir dize almak ve dizeden HTML'yi çıkarmak.

Ve sadece dün iki öğeyi diziye koyan, diziyi JSON'a çeviren, JSON'yi dizeye koyan, diziyi diziye yerleştiren, tüm diziyi JSON'a çeviren, kod çözen müşteriye gönderen koda girdim JSON, bir dize içeren bir diziye sahipti, dize aldı, JSON'u dizeden çıkardı, JSON'un kodunu çözdü ve iki öğeli bir dizi aldı. Yapma bunu.

Tüm bunlar API'nin amacına bağlıdır, ancak genel olarak tanımladığınız şey endişelerin ayrılmasının oldukça güçlü bir ihlalidir :

Modern bir uygulamada, verilerden API kodu ve sunumdan müşteri kodu sorumlu olmalıdır.

API'nız HTML'yi döndürdüğünde, verilerinizi ve sunumunuzu sıkıca birleştiriyorsunuzdur. API HTML döndürdüğünde, bu HTML ile yapabileceğiniz (kolayca) tek şey onu daha büyük bir sayfanın bir parçası olarak gösterir. Farklı bir açıdan, API'nin iyi olduğu tek şey sayfanıza HTML sağlamaktır. Ayrıca, HTML’nizi hem istemci hem de sunucu koduna dağıttınız. Bu bakım baş ağrısı yapabilir.

API'niz JSON veya başka bir saf veri biçimi döndürürse, çok daha kullanışlı olur. Mevcut uygulama hala bu verileri tüketebilir ve uygun şekilde sunabilir. Şimdi ise, başka şeyler aynı verilere erişmek için API'yi kullanabilir. Yine, bakım da daha kolaydır - tüm HTML'ler tek bir yerde bulunur, bu nedenle tüm siteyi yeniden stillendirmek istiyorsanız API'nizi değiştirmeniz gerekmez.

HTML, belirli bir tasarıma ve kullanıma bağlıdır.

HTML ile, sayfa düzenini değiştirmek istiyorsanız, html'nin sunucu çağrısı tarafından nasıl oluşturulduğunu değiştirmeniz gerekir. Genellikle, bu bir arka uç programlayıcı gerektirir. Artık tanımı gereği, en iyi html yazarlarınız olmayan ve bu güncellemeleri ele alan arka uç programcılar var.

JSON ile, sayfa düzeni değişirse, mevcut JSON sunucu çağrısının mutlaka değişmesi gerekmez. Bunun yerine, ön uç geliştiriciniz ve hatta tasarımcı, aynı temel verilerden istediğiniz farklı HTML'yi üretmek için şablonu günceller.

Ek olarak, JSON diğer hizmetler için temel olabilir. Aynı temel verileri farklı şekillerde görmeniz gereken farklı rollere sahip olabilirsiniz. Örneğin, bir sipariş sayfasındaki bir ürünle ilgili verileri gösteren bir müşteri web sitesine ve aynı verileri çok farklı bir düzende gösteren, belki de genel müşteriler için bulunmayan diğer bazı bilgilerle birlikte gösterilen satış temsilcileri için bir iç satış sayfasına sahip olabilirsiniz. JSON ile, aynı sunucu çağrısı her iki görünümde de kullanılabilir.

Son olarak, JSON daha iyi ölçeklenebilir. Son yıllarda, müşteri tarafında javascript çerçeveleriyle bir tür aşırıya düştük. Sanırım gerçekte bir adım geriye atıp, hangi javascript'i kullandığımızı ve tarayıcı performansını nasıl etkilediğini düşünmeye başlamanın zamanı geldi ... özellikle de mobil cihazlarda. Bununla birlikte, tek bir sunucu yerine bir sunucu grubu veya küme gerektirecek kadar büyük bir site kullanıyorsanız, JSON daha iyi ölçeklenebilir. Kullanıcılar size tarayıcılarında ücretsiz olarak işlem süresi vereceklerdir ve bundan faydalanırsanız, sunucu yükünü büyük bir dağıtımda azaltabilirsiniz. JSON ayrıca daha az bant genişliği kullanır, bu yüzden yeterince büyükseniz tekrarve uygun şekilde kullanın, JSON ölçülebilir bir şekilde daha ucuzdur. Elbette, 2KB veriyi 7KB html'ye ayrıştırmak için 40KB kütüphaneleri beslemeyi bitirirseniz, daha da kötüleşebilir, yani: Ne yaptığınızın farkında olmak öder. Ancak potansiyel , JSON'un performansı ve maliyetleri iyileştirmesi için var.

Gereksinimlerini yerine getirirse, böyle bir son noktada yanlış bir şey yoktur. Bilinen bir tüketicinin etkili bir şekilde ayrıştırabileceği html'i tükürmek gerekirse, neden olmasın?

Sorun şu ki, genel durum için, son noktalarınızın standart bir çözümleyici tarafından iyi biçimlendirilmiş ve etkin bir şekilde ayrıştırılabilir bir yükü tükürmesini istiyorsunuz. Ve etkili bir şekilde çözümlenebilir olarak, yani bildirimsel olarak çözümlenebilir.

Müşteriniz yükü okumak ve açık bilgi bitlerini döngüler ve if ifadeleriyle açıklamak zorunda kalırsa, etkin bir şekilde ayrıştırılamaz. Ve HTML, olduğu gibi, iyi biçimlenmesi gerekmemek için çok affedilir.

Şimdi, html'nizin xml uyumlu olduğundan emin olursanız, o zaman altınsınız.

Bununla birlikte, bu konuda önemli bir sorunum var:

Size şunu söyleyeceğim: HTML döndüren bir uç nokta, JavaScript kitaplıklarına olan bağımlılığınızı azaltır ve DOM tarayıcısı oluşturmak için JS kodunu yorumlamak / yürütmek zorunda kalmayacağından, kullanıcı tarayıcısındaki yükü azaltır - HTML zaten var, bu sadece unsurları ayrıştırma ve oluşturma meselesi. Tabii ki bu, makul miktarda veriden bahsettiğimiz anlamına gelir. 10 megabayt HTML verisi makul değildir.

Bu nasıl kestiğinin önemi yok. On yıllarca süren toplu sanayi deneyimi bize genel olarak verileri (veya modeli) ekrandan (veya görünümünden) ayırmanın iyi bir fikir olduğunu göstermiştir.

Burada, hızlı JS kodunu yürütme amacıyla ikisini birleştiriyorsunuz. Ve bu bir mikro optimizasyon.

Bunu çok önemsiz sistemler dışında iyi bir fikir olarak görmedim.

Tavsiyem? Yapma HC SVNT DRACONES , YMMV, vb.

JSON, yapılandırılmış verilerin sadece metinsel bir sunumudur. Bir müşterinin verileri işlemek için doğal olarak bir çözümleyici olması gerekir, ancak hemen hemen tüm dillerin JSON çözümleyici işlevleri vardır. JSON ayrıştırıcısını kullanmak, HTML ayrıştırıcısını kullanmaktan çok daha etkilidir. Az yer kaplar. Bir HTML çözümleyici ile öyle değil.

PHP'de sadece json_encode($data)onu kullanırsınız ve bunu diğer taraftaki istemciye göre ayrıştırır. JSON verilerini bir web servisinden alırken, sadece kullanırsınız $data=json_decode($response)ve değişkenlerle yapacağınız gibi verilerin nasıl kullanılacağına karar verebilirsiniz.

Bir mobil cihaz için bir uygulama geliştirdiğinizi varsayalım; mobil uygulamalar veriyi ayrıştırmak için nadiren web tarayıcısını kullandığında neden HTML formatına ihtiyacınız vardır? Birçok mobil uygulama veri alışverişinde JSON'u (en yaygın format) kullanır.

Cep telefonlarının genellikle ölçülü planlarda olduğunu göz önünde bulundurarak, neden JSON'dan daha fazla bant genişliğine sahip HTML kullanmak istiyorsunuz?

HTML, kelime hazinesiyle sınırlı olduğunda ve JSON veri tanımlayabildiğinde neden HMTL kullanıyorsunuz? {"person_name":"Jeff Doe"}Verileri tanımlamak için HTML'den daha fazla bilgi vericidir, çünkü verileri tanımlamak yerine yalnızca HTML ayrıştırıcıları için yapı tanımlar.

JSON'un HTTP ile ilgisi yok. JSON'u bir dosyaya koyabilirsiniz. Yapılandırmalar için kullanabilirsiniz. Besteci JSON kullanır. Basit değişkenleri dosyalara kaydetmek için de kullanabilirsiniz.

Bir hak ya da yanlışı kategorize etmek zordur. IMO, soracağım sorular: " yapmalı mı ", veya " daha azıyla yapabilir mi? "

Her son nokta, mümkün olduğunca az içerikle iletişim kurmak için çaba göstermelidir. Sinyal-gürültü oranı tipik olarak <JSON <XHTML HTTP kodlarıdır. Çoğu durumda, en az gürültülü protokolü seçmek iyidir.

Modern tarayıcılarda olduğu gibi, sorun olmadığı için müşteri tarayıcısı yükü ile ilgili olarak machado tarafından farklılık gösteriyorum. Çoğu, HTTP kodlarıyla ve JSON yanıtlarıyla oldukça iyi bir şekilde ilgileniyor. Şu anda testler yapmasanız da, daha az gürültülü bir protokolün uzun vadeli bakımı, yukarıdaki olandan daha ucuz olacaktır.