İlerici Geliştirme - Tek Sayfa Uygulamaları

Boston'daki An Event Apart adlı bir konferanstan yeni döndüm .

Konuşmacılar arasında gerçekten popüler bir tema, aşamalı geliştirme fikriydi - bir sitenin içeriği HTML'ye girmeli ve JavaScript yalnızca davranışı geliştirmek için kullanılmalıdır.

Konuşmacıların ilerici gelişme için verdiği argümanlar çok ilgi çekici idi. Yalnızca eski tarayıcıları ve düşük bant genişliğine sahip bir ağdaki aygıtları desteklemek için sağlam bir kalıp değildir, ancak HTML JavaScript'ten daha zarif bir şekilde başarısız olur (ör. Desteklenmeyen biçimlendirme yalnızca göz ardı edilirken; komut dosyası - sen hortumun).

Jeremy Keith bu konuda özellikle anlayışlı bir konuşma yaptı.

Ama Omurga ve Açısal gibi tek sayfa web uygulamaları hakkında ne? Bu çerçevelerin ardındaki tasarım, geliştiriciyi HTML'den içerik taşımak ve bir JSON API'si gibi bir şeye taşımak gibi görünüyor.

Bu iki tasarım desenini jelleştiremiyorum: aşamalı geliştirme ve tek sayfa web uygulamaları. Birinin diğerinden daha iyi olduğu durumlar var mı? Yoksa bunlar rakip teknolojiler bile değiller ve burada zihinsel modelimle bir şeyleri özlüyorum?

Bana öyle geliyor ki, tek sayfalık uygulamalar ilerici gelişme kumunda bir çizgi çekiyor. Uygulamaların ve özelliklerin onlarca yıldan beri devam eden tarayıcılar arasında farklılık gösterdiği gerçeği üzerinde çalışmaya başlayabilmemizden önce, SPA'lar belirli bir sitenin ziyaretçilerinin bir araya geleceği konusunda makul bir şekilde hemfikir olabileceğimize dair kesin bir temel olduğunu varsayar. İkisinin de tuhaf olduğunu sanmıyorum. SPA başladıktan sonra, bir <video>etiketle başlamak gibi , sonra da kendi zengin özellikli oynatıcınızı üzerine koymak gibi, aşamalı olarak gelişmeye devam edebilirsiniz .

O zaman komut dosyası devre dışı bırakılmış ziyaretçiler var, ancak nelere girdiklerini biliyorlar. Geliştiricilerin, bu ziyaretçiler için neden "Bu site için komut dosyası kullanmanız gerekiyor" notu dışında geriye doğru eğilmeleri gerektiğini anlamıyorum. Buna izin verirsek, neden CSS'yi devre dışı bırakan ziyaretçilere hitap etmiyorsunuz? Resimler nasıl devre dışı bırakılır? Bunlar çekirdek web teknolojileridir. Parça seçip seçerken tamamen işlevsel bir web deneyimine sahip olmayı beklememeliler.

Bir araba benzetmesi olmadan kaçmamamı sağlamak için, bazı özellikleri sevmediğime karar verirsem arabamın çalışmasını beklememeliydim. İnşaat mühendislerine şunu söyleyebilirim: "Farlarımı devre dışı bıraktım, lütfen ziyaret edebileceğim her yere her 125 fitte sokak lambaları taktığınızdan emin olun." Farlar olmadan arabam çok fazla çalışırdı, ama bazı yerleri ziyaret edemeyeceğim.

Klasik istek / yanıt sayfaları modeline uymayan bir uygulama oluşturuyorsanız, SPA en faydalı olanıdır. Düzenli web sitelerinin web'in istek / cevap döngüsüne tam olarak uysalar bile bir SPA olarak yazıldığı son bir eğilim var, IMHO yaptıkları aptalca çabalar. Bu web sitelerinin beğendiği şey bir web tarayıcısını çok daha fazla hata ve daha az özellik içeren bir web tarayıcısına yeniden yerleştirmektir.

Progresif geliştirme ve SPA fikri, bu aptal tek sayfalık uygulama web siteleri için karşılıklı olarak dışlanamaz. Bazı içerik görüşmeleri yapmak için javascript'e ihtiyacınız var (örneğin, üstbilgiyi kabul et), böylece SPA’daki Javascript’in önceden oluşturulmuş HTML sayfaları yerine kendilerini oluşturabilecekleri JSON kaynaklarını alıyorlar. Bu tür web sitesi SPA'larıyla ilgili sorunlar açıktır, web sitesinin hem sunucuda hem de istemcideki oluşturma işleminin yinelenen uygulamasına sahip olmanız gerekir.

Gerçek web uygulamaları için, yani standart istek / cevap modeline uymadıkları için gerçekten bir SPA olması gereken; ilerici geliştirme gerçek uygulamalar için çok daha zordur, çünkü gerçekten taşınabilir bir uygulama yazmak için bir teknoloji platformu olarak bir tarayıcı kullanıyorlar. Komut dosyası dili, yalnızca geliştirmeler için isteğe bağlı olarak cıvatalanabilen bir dil değil, gerçek bir web uygulamasının önemli bir parçasıdır. Bazı ilerici geliştirme teknikleri yine de çalışabilir (örneğin flash video / audio <video>/ <audio>tag ile değiştirilir ) ancak gerçek web uygulamaları temel olarak javascript gerektirecektir.

Tek sayfalık web uygulamalarının ve aşamalı geliştirmenin neredeyse rakip olduklarına inanıyorum. Eğer html müşteride bir json api'den elde edilen verilerden hesaplanırsa, incelikle zorlukla bozulabilir. Ancak daha zengin ve daha hoş bir kullanıcı arayüzü sunabilir.

Uygulamanızı tarayacak ve statik bir sürüm kaydedecek bir bot oluşturabilirsiniz. Bu teknik, javascript olmadan tarayıcılara HTML sunmak için kullanılabilir (kör kişiler veya arama motoru botları tarafından kullanılır). Bu bir yatırım, bu yüzden gerçekten sizin isteklerinize göre geliyor.

Belirli bir şirket için İK yönetimi web uygulaması yapıyor musunuz? Zarif bir bozulmaya ihtiyacınız yoktur ve bir SPA'nın oluşturulması daha kolay olabilir. Şirket belirli bir tarayıcı kullanımını zorlayabilir, bu nedenle daha az test yapmanız gerekebilir.

Erişilebilirlik gereklilikleri ve arama motoru görünürlüğü gereksinimleri olan bir dernek için halka açık bir web sitesi mi yapıyorsunuz? Ardından HTML'yi sunucunuzda oluşturmayı düşünün. Veya bütçenize bağlı olarak, statik bir sürümü olan bir SPA yapmak.

Bence Progressive Enhancement ile ne kadar ileri gitmek istediğine bağlı - zor ve hızlı bir kurallar dizisinden ziyade bir tasarım paradigması.

Bir SPA çerçevesi kullanıyorsanız, Javascript'e izin vermenin bir verildiğini düşünüyorum. Ancak, sayfanızı geliştirmek için yazdığınız Javascript, çerçevenin oluşturabileceği her türlü HTML ile başa çıkmak için yeterince akıllı olmalıdır.

Ayrıca, yeni bir tarayıcı sürümü için en son CSS özelliklerinden yararlanmak veya HTML5'ten HTML4'e düşürmek gibi diğer PE tekniklerinden de yararlanabilirsiniz.

Aşamalı geliştirme ve bir Tek Sayfa Uygulaması birlikte bulunabilir. Bu şekilde uygulama oluşturmak için duyduğum en çekici iki argüman:

• Hata toleransıHTML dosyasının tamamen indirildiği, ancak başvurulan komut dosyalarının indirilemediği ve indiği ağ bağlantısı sayesinde tamamen indirilemeyen durumlarda (mobil ağlarda mümkün)
• İlk sayfa yüklenmesinde algılanan performansı artırma potansiyeli (Render Başlat zamanlarını azaltarak)

Sunucu tarafı oluşturma (yalnızca SEO nedenleriyle değil kullanıcılar için) ve hardalı kesme, modern istemci tarafı JS çerçevelerine sahip, aşamalı olarak geliştirilmiş Tek Sayfa Uygulamaları oluşturmanıza yardımcı olabilecek iki tekniktir.

Bazı istemci tarafı JS çerçeveleri, sunucu tarafı oluşturma ile çalışmaktan daha kolaydır ( bazı sunucu tarafı oluşturma çözümlerine dikkat edin ve çerçeve kombinasyonları, sunucu tarafından oluşturulan sayfa yalnızca arama motoru tüketimi için tasarlandığından, çalışan SPA'lar üretmez. -kullanıcılar )

Yazma zamanında, React.js ve Ember (yaklaşan FastBoot ile birlikte) bunun farkında olduğum ya da sunucu tarafında işlemeyi birinci sınıf bir vatandaş haline getirmeye çalıştığı ikisi; Sunucu tarafında oluşturulan sayfa, istemci tarayıcısında ayrıştırıldığında hala çalışan bir SPA'dır.

Düşen sayfa yükünün muhtemelen sunucular ve ağ için oldukça iyi olduğu görüşündeyim. Daha fazla SPA’ların doğru kullanıldığını görmek isterim.

Görünüşe göre bu iki şey gerektirir:

1) tüm bağlantılarınızı ilk yükte standart istek / yanıt bağlantısı olarak ayarlayarak, tarayıcı yüklendiğinde ve JS motoru SPA desteğinin kullanılabilir olduğunu belirlediğinde SPA çerçevenizin / kütüphanenizin bunları güncellenmiş (etkileşimli) bir sürümle değiştirmesine izin verin. Bu gerçekten ilerleyici bir gelişmedir; JS, mevcut html web sitesinin üstüne yüklenmiştir ve bu, arama motorları, yardımcı teknolojiler ve daha eski tarayıcılar için daha iyidir.

ve

2) Sunucunun doğru formatı kullanarak / foo / bar / json ve foo / bar gibi rotalara duyarlı olması gerekir; gerçekçi olarak, ilk sayfayı almak için her şeyi mizanpajlara ve kısmalara sardıysanız, 2. ve sonraki sayfalar için de her şeyi mizanpaj ve kısayollar aracılığıyla elde edebilmeniz gerekir.

Burada oldukça fazla iş var; kuşkusuz, ancak yığının tamamı üzerinde kontrolünüz varsa, iki teknolojiyi dengeler.