Javascript'te% 100 kullanıcı arayüzü yapmak ve bir API aracılığıyla veri sağlamak iyi bir fikir mi?

İlk günüm HTML uygulamaları yapmak. Bununla birlikte, birçok düzenlenebilir ızgara görünümü, metin kutusu, açılır menü vb. İçeren CRUD tipi uygulamaları dahili olarak kullandım. Şu anda işi yapan ASP.NET web formlarını kullanıyoruz, ancak performans çoğunlukla kasvetli ve oldukça sık İhtiyacınız olanı almak için çemberlerden atlamak zorundasınız. Tavandan asılan ve alev alan çemberler.

Bu yüzden, tüm kullanıcı arayüzünü JavaScript tarafına taşımanın iyi bir fikir olup olmayacağını merak ediyorum. Özellikle ihtiyaçlarımıza göre uyarlanmış güçlü bir yeniden kullanılabilir kontrol seti geliştirin ve yalnızca sunucu ile veri alışverişi yapın. Evet, "kontrol" (aka "widget") paradigmasını seviyorum, bu tür uygulamalar için oldukça uygun. Yani sunucu tarafında hala mevcut ASPX işaretlememize temel bir düzenimiz olacaktı, ancak bu daha sonra istemciye yalnızca bir kez gönderilecekti ve Javascript kısmı sonraki tüm UI güncellemelerini halledecekti.

Sorun şu ki, bunu daha önce hiç yapmadım ve hiç kimsenin de bunu yaptığını görmedim, bu yüzden problemlerin ne olacağını bilmiyorum. Özellikle, endişeliyim:

• Hala performans . Karşılaştırma, tarayıcı bir AJAX güncellemesinden sonra sayfanın çoğunu yeniden oluşturmaya çalıştığında şu anda ana gecikmenin istemci tarafında olduğunu gösterir. ASP.NET web formları oluşturulan işaretleme "web" kelimesine yeni bir anlam kazandırır ve zengin Devexpress denetimleri bunun üzerine kendi Javascript karmaşıklığı katmanını ekler. Ancak, Javascript tarafında gerekli tüm değişiklikleri yeniden hesaplamak ve sadece güncellenmesi gerekenleri güncellemek daha hızlı olur mu? Birkaç düzenlenebilir ızgara görünümü, çok sayıda metin kutusu, her birinde yarım milyonlarca filtrelenebilir öğe bulunan birçok açılır menü içeren formlardan bahsettiğimi unutmayın.
• Geliştirme kolaylığı . Şimdi çok daha fazla Javascript olurdu ve muhtemelen sayfanın HTML işaretlemesi ile karışacaktı. Bu ya da bir tür yeni görüntü motorunun üretilmesi gerekecekti. Javascript için Intellisense de C # kodundan çok daha kötüdür ve Javascript'in dinamik yapısı nedeniyle çok daha iyi olması beklenemez. Kodlama uygulamaları onu biraz geliştirebilir, ancak çok fazla değil. Ayrıca, geliştiricilerimizin çoğu öncelikle C # geliştiricileri olduğundan, bazı öğrenme eğrileri ve ilk hatalar olacaktır.
• Güvenlik . Bir çok güvenlik kontrolünün iki kez (sunucu tarafı ve UI tarafı) yapılması ve veri işleme sunucusu tarafının bunlardan çok daha fazlasını içermesi gerekecektir. Şu anda, bir metin kutusunu sunucu tarafında salt okunur olarak ayarladıysanız, istemci gidiş dönüşünde değişmeyen değerine güvenebilirsiniz. Çerçeve zaten bunu sağlamak için yeterli koda sahiptir (viewtate şifreleme yoluyla). Yalnızca veri yaklaşımı ile daha da zorlaşır, çünkü her şeyi manuel olarak kontrol etmeniz gerekir. Öte yandan, sadece güvenlik açıklarının fark edilmesi daha kolay olacaktır, çünkü sadece endişelenecek verileriniz olacaktır.

Sonuçta, bu sorunlarımızı çözecek mi yoksa daha da kötüleştirecek mi? Hiç kimse bunu denedi ve sonuçları ne oldu? Bu tür çabalara yardımcı olan herhangi bir çerçeve var mı (jQuery ve ahlaki eşdeğerler bir yana)?

Linkedin bunu mobil siteleri için yapıyor (bkz. Http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile bölüm 4) ve görünüşe göre onlar için çok yararlı oldu. performans açısından.

Ancak, çeşitli nedenlerle aynı şeyi yapmaktan kaçınmanızı öneririm.

Birincisi, sürdürülebilirliktir: C # / ASP.net, sunucu tarafı, istemci bağımsız olması nedeniyle Javascript değildir (jQuery gibi bir çerçevede bile% 100 çapraz tarayıcı uyumluluğu elde edemezsiniz) , geleceğe hazır değil). Statik olarak yazılmış bir uygulamanın işlevselliğini doğrulamaktan dinamik bir uygulamadan daha kolay olduğunu söyleyebilirim, bu da büyük ölçekli siteler oluşturuyorsanız kesinlikle düşünmeniz gereken bir şeydir.

İkincisi, tüm web sitenizi çalıştırmak için gerekli olan karmaşıklığın türünü (bulmanın göreli kolaylığına kıyasla) saf bir javascript uygulaması oluşturma yeteneğine sahip (ve istekli) diğer kişileri bulmakta zorlanacaksınız. NET programcıları). Bu doğrudan bir endişeniz olmayabilir, ancak kesinlikle uzun vadeli bir bakış açısıyla düşünülmesi gereken bir şeydir.

Üçüncü sorun istemci uyumluluğudır; halka açık web siteleri oluşturuyorsanız, netin makul bir bölümünün hala JS etkin olmadığını unutmayın (çeşitli nedenlerle), bu nedenle büyük bir bölümü hariç tutmayacağınızdan kesinlikle emin olmanız gerekir. JS tabanlı bir web sitesine geçerek kullanıcı tabanınızın

Madde işaretli endişelerinize gelince:

• Güvenlik yönü hakkında çok fazla endişe etmem, paradigmaları karıştırmamanız ve güvenliğe ihtiyaç duyduğunuzda bazı sunucu tarafı işlemleri yapamamanızın bir nedeni yok (HTML döndüren bir yerde bazı görüntüleme oluşturma koduna sahip olacaksınız , bunun yerine gerektiğinde bunun yerine bir AJAX çağrısını tetiklememesinin bir nedeni yoktur).

• Geliştirme kolaylığı da gerçekten bir endişe değil, bence JS gelişimi için çok iyi araçlar var, sadece VisualStudio'ya kendinizi koymayın, çünkü alıştınız! (örneğin JetBrains WebStorm'u deneyin).

• JS view motorlarının performansı çoğu durumda kesinlikle iyidir (yine, benim deneyimime göre), bunları günlük olarak yoğun bir şekilde kullanıyorum. Ne öneririm knockout.js gibi daha ağır çerçevelerden kaçınmak ve bunun yerine Jon Resig'in mikro şablon motoru gibi bir şeye yönelmek. Bu şekilde, destek kodunu hızlı ve güvenilir olduğundan emin olarak takabilirsiniz.

Eğer ben olsaydım, yapacağım şey gerçekten bu değişimin arkasındaki nedenleri incelemek. .NET'i etkili bir şekilde kullanmıyor olabilirsiniz ve oyununuzu yükseltmeniz gerekiyor olabilir, WebForms kutudan çıkar çıkmaz özellikle yavaş bir çerçeve değildir, bu nedenle belki de kullandığınız 3. taraf kitaplıklardan bazıları render işleminizi yavaşlatıyor.

Bir yük testi ve profil oluşturma aracı kullanarak uygulamanın performans profilini yapmayı deneyin ve daha radikal bir çözüme çok fazla zaman ve çaba harcamadan önce darboğazlarınızın nerede olduğunu görün, muhtemelen yavaşlığınız için suçlu!

Bu şekilde gitmek istiyorsanız ExtJS kullanın , tekerleği yeniden icat etmeyin. Ancak hazırlıklı olun, bu tam bir paradigma değişikliği anlamına gelir. HTML becerileriniz neredeyse kullanılmıyor. AJAX her yerde, sunucu çoğunlukla bir AJAX API sağlar. Her zamankinden daha fazla javascript yazacaksınız, bu yüzden javascript'e gerçekten uyduğunuzdan emin olun.

Bulunduğum ekip 2008'in sonlarında ExtJS'ye geçmeye karar verdi. Bu noktada ön uç sorunlarından muzdarip 200.000 satırlık bir PHP uygulamamız vardı. Durumumuz sizinkinden çok daha kötüydü, çünkü gerçekten kötü olan elle tutulmuş bir form kontrolleri çerçevemiz vardı ve sayfanın bölümlerini yüklemek için iframe'leri yoğun bir şekilde kullandık (görsel mimari 2005 yılına dayanıyordu ve ekip farkında değildi ajax bu erken). Yine de kodu yeniden düzenlemek zorunda kaldık, bu da kod tabanını öncelikli olarak istemci tarafı olacak şekilde yeniden aramaya karar vermeyi kolaylaştırdı.

Bugün uygulama 300.000 satır, hangi 60.000 satır extjs kodu ve kabaca 3/4 işlevselliği ExtJS taşınmıştır. Extjs kodu tamamen tek sayfalık bir uygulamadır, ancak yine de bazı eski formları iframe'lerin içine gömer. Önce navigasyon konteynerini ele geçirdik ve sonra parça parça farklı özellik alanlarını taşıdık. Bu yaklaşımla, dış kaynak geçişini, bizi çok yavaşlatmadan, düzenli özellik geliştirme sürecine aktarmayı başardık.

• Verim

  ExtJS kodu eski koddan çok daha hızlı oldu. Eski kod elbette performans açısından gerçekten kötüydü, ama yine de sonuçlardan memnunuz. UI kodu tamamen statik javascripttir, bu yüzden gerçekten iyi önbelleğe alır (bir CDN'ye atma planlaması aşamasındayız). Sunucu, buradaki iş yükünü azaltan ön uç oluşturma işlemine dahil değildir. Ayrıca ExtJS'nin UI'nin yaşam döngüsü üzerinde çok fazla kontrol sağlamasına yardımcı olur (tembel oluşturma, görünmez UI öğelerinin kolayca boşaltılması). Tipik olarak, kod önyüklendiğinde (isteğe bağlı yükleme mimarisi) bir ekranın yükleme süresinin çoğu, verileri almak için web hizmeti çağrısında harcanır. ExtJS ızgarası, özellikle kaydırma sırasında görünür satırları oluşturmak için arabelleğe alınmış görünümleri kullanırken gerçekten hızlıdır.

• Geliştirme kolaylığı

  Dürüst olmak gerekirse, bu karışık bir çanta. ExtJS bir DSL, geleneksel anlamda web geliştirme değil. Geliştiricilerimizin çerçevenin API'sini gerçekten öğrenmesi uzun zaman aldı ve bu eğrinin diğer istemci tarafı çerçevelerinde daha az dik olduğunu görmüyorum. Takımdaki herkes "kıdemli" bir javascript geliştiricisi olmalıdır (genel bir kural olarak, crockford'un kitabının sırları olmamalıdır). Yeni geliştiricilerle önyükleme sorunları yaşıyoruz, çünkü müşteri tarafı uzmanlığı düşündüğünüz kadar yaygın değil ve extjs uzmanlığı neredeyse sıfır (bulunduğumuz Belçika'da).

  Öte yandan, bir kez hızlandığınızda, dev deneyimi çok güzel. ExtJS çok güçlüdür, bu nedenle olukdaysanız inanılmaz ekranları çok hızlı bir şekilde kırbaçlayabilirsiniz. IDE-bilge olarak, ExtJS kodu ile yeteri kadar yetkin bulduğum PHPStorm'u kullanıyoruz.

• Güvenlik

  Güvenlik, istemci tarafı kullanıcı arayüzü yapmanın ana nedenlerinden biridir. Nedeni basit: saldırı yüzeyinin azaltılması. ExtJS kodumuz tarafından kullanılan web hizmeti API'leri, sunucu tarafı UI katmanından çok daha küçük bir saldırı yüzeyidir. OWASP'nin ASVS'sini kullanmadan önce sunucudaki tüm girdileri doğruluk için doğrulamanız gerektiğini belirtir. Bir web hizmetleri mimarisinde, girdi doğrulamanın ne zaman ve nasıl yapılacağı açık ve kolaydır. Ayrıca, istemci tarafı UI mimarisinde güvenlik hakkında mantık yürütmeyi daha kolay buluyorum. XSS sorunlarıyla hala mücadele ediyoruz, çünkü HTML'ye kodlamaktan mutsuz değilsiniz, ancak genel olarak güvenlik konusunda eski kod tabanından daha iyiyiz. ExtJS, form alanlarının sunucu tarafı doğrulamasını kolaylaştırır, bu nedenle iki kez kod yazmak zorunda kalmazız.

Komut dosyası olmayan kullanıcıları desteklemeyi göze alamazsanız ve arama motorları sizi ilgilendirmiyorsa, evet, mükemmel bir şekilde uygulanabilir bir yaklaşımdır. İşte artıları ve eksileri kısa bir özet:

Artıları:

• her şey tek bir yerde (javascript)
• biçimlendirme yerine sunucudan veri yükleyebilirsiniz, bu doğru yapılırsa çok fazla bant genişliği tasarrufu sağlayabilir
• duyarlı bir uygulama almak daha kolay (ağ gecikmesi hala orada, ancak bir kullanıcının girdisine ilk yanıt daha hızlı geliyor)
• web sunucusunun herhangi bir HTML oluşturması veya herhangi bir şablonu genişletmesi gerekmez (yani, işleme çabası sunucudan istemciye taşınır)

Eksileri:

• her şeyin javascript içinde olması gerekir (sorun olabilir veya olmayabilir)
• kritik mantık sunucuda çoğaltılmalıdır
• durumun istemci ve sunucuda korunması ve her ikisi arasında senkronize edilmesi gerekir
• güvenliği doğru yapmak daha zor olabilir (istemci tarafı kodundaki herhangi bir şeyin kötü niyetli kullanıcılar tarafından nasıl değiştirilebileceğini göz önünde bulundurarak)
• kod tabanınızın büyük bir bölümünü açığa çıkarırsınız (sunucuda çalışan kod dışarıdan görülemez)

Şahsen, bu rotaya giderseniz, ASP.NET UpdatePanels'ın doğru yol olmadığını düşünüyorum. Mevcut web uygulamalarını kısmen özendirmek için harikalar, ancak yine de AJAX üzerinden HTML gönderiyorlar ve bu şekilde yönetme durumu oldukça kıllı olabilir. Sadece statik bir HTML belgesi sunarak, HTML oluşturmayı yapmak için bir javascript şablon kitaplığı kullanın; sunucu hiç dinamik HTML sunmaz, bunun yerine istemci sunucuya iş mantığı düzeyinde çağrılar yapar ve ham veri alır.

Evet yapabilirsin ama ..

Uygulamanızın kritik bölümlerinin Javascript olmadan da çalışabilmesi için zarif bir "bozulmaya" sahip olduğunuzdan emin olmanız gerekir.

Çoğu uygulama "HIJAX" tarzı bu şekilde inşa ediyorum.

Sitem hala bebeklik döneminde ama% 100 js ui benim için şimdiye kadar iyi oldu. Ön uçta var olan tek sunucu mantığı model eşlemeleri ve ajax url'leri. Sunucunun bana göre bakımı çok kolay olan kullanıcı arayüzü hakkında hiçbir bilgisi yok. Eğer ilgileniyorsanız ExtJS http://coffeedig.com/coffee/ yazılmış sitemi kontrol edebilirsiniz . Sitemde herhangi bir güvenlik sorunu yok, ancak istemci normal kullanıcıya basit doğrulama ile yardımcı oluyor. Kötü niyetli bir kullanıcının gerçekten sunucuya herhangi bir ajax gönderebileceğini biliyorum, böylece tüm "güvenlik" mantığı sunucuda yapılır.

Sanırım sizin için en büyük sorun, ekibinizin alışkın olduğu şeyleri tamamen tersine çevirmek olacaksınız, dik bir öğrenme eğrisi olacak. En iyi yaklaşımın bazı js çerçeveleri ile denemek ve bazı basit ekranlar yazarak bunu hissetmeye çalışmak olacağını düşünüyorum.