Ist es eine gute Idee, die Benutzeroberfläche zu 100% in Javascript zu erstellen und Daten über eine API bereitzustellen?

Meine Hauptaufgabe besteht darin, HTML-Anwendungen zu erstellen. Damit meine ich intern verwendete CRUD-artige Anwendungen mit vielen bearbeitbaren Rasteransichten, Textfeldern, Dropdowns usw. Derzeit verwenden wir ASP.NET-Webformulare, mit denen die Arbeit erledigt wird, die Leistung ist jedoch meistens schlecht, und häufig auch Sie müssen durch Reifen springen, um zu bekommen, was Sie brauchen. Reifen, die an der Decke hängen und in Flammen aufgehen.

Ich frage mich also, ob es vielleicht eine gute Idee wäre, die gesamte Benutzeroberfläche auf die JavaScript-Seite zu verschieben. Entwickeln Sie eine Reihe von wiederverwendbaren Steuerelementen, die speziell auf unsere Bedürfnisse zugeschnitten sind, und tauschen Sie nur Daten mit dem Server aus. Ja, ich mag das "Kontroll" -Paradigma (auch "Widget" genannt), das für solche Anwendungen recht gut geeignet ist. Auf der Serverseite hätten wir also immer noch ein grundlegendes Layout, das unserem aktuellen ASPX-Markup ähnelt, das dann aber nur einmal an den Client gesendet wird, und der JavaScript-Teil würde sich um alle nachfolgenden Benutzeroberflächenaktualisierungen kümmern.

Das Problem ist, dass ich das noch nie zuvor gemacht habe und auch noch nie jemanden gesehen habe, also weiß ich nicht, was die Probleme sein würden. Insbesondere mache ich mir Sorgen um:

• Leistung noch. Das Benchmarking zeigt, dass die Hauptverzögerung derzeit auf der Clientseite liegt, wenn der Browser nach einem AJAX-Update versucht, den größten Teil der Seite neu zu rendern. Durch ASP.NET-Webformulare generiertes Markup verleiht dem Wort "Web" eine neue Bedeutung, und die umfangreichen Devexpress-Steuerelemente fügen darüber hinaus eine eigene Schicht von Javascript-Komplexität hinzu. Aber wäre es schneller, alle notwendigen Änderungen auf der Javascript-Seite neu zu berechnen und dann nur das zu aktualisieren, was aktualisiert werden muss? Beachten Sie, dass ich von Formularen spreche, die mehrere bearbeitbare Rasteransichten, viele Textfelder, viele Dropdown-Listen mit jeweils einer halben Million filterbarer Elemente usw. enthalten.
• Einfache Entwicklung . Es würde jetzt viel mehr Javascript geben und es würde sich wahrscheinlich mit dem HTML-Markup der Seite mischen. Das oder eine Art neue View-Engine müsste produziert werden. Intellisense für Javascript ist auch viel schlechter als für C # -Code, und aufgrund der dynamischen Natur von Javascript ist nicht zu erwarten, dass es viel besser wird. Coding-Praktiken können es ein wenig verbessern, aber nicht viel. Die meisten unserer Entwickler sind in erster Linie C # -Entwickler, daher kann es zu Lernschwierigkeiten und anfänglichen Fehlern kommen.
• Sicherheit . Viele Sicherheitsüberprüfungen müssen zweimal durchgeführt werden (serverseitig und auf der Benutzeroberfläche), und die Datenverarbeitungsserverseite muss viel mehr davon enthalten. Wenn Sie ein Textfeld derzeit auf der Serverseite als schreibgeschützt festlegen, können Sie davon ausgehen, dass sich der Wert während des Client-Roundtrips nicht ändert. Das Framework verfügt bereits über genügend Code, um dies sicherzustellen (durch ViewState-Verschlüsselung). Mit dem Nur-Daten-Ansatz wird es schwieriger, da Sie alles manuell überprüfen müssen. Andererseits sind Sicherheitslücken möglicherweise leichter zu erkennen, da Sie nur Daten haben, über die Sie sich Sorgen machen müssen.

Wird dies unsere Probleme lösen oder verschlimmern? Hat dies jemals jemand versucht und was waren die Ergebnisse? Gibt es da draußen irgendwelche Rahmenbedingungen, die bei dieser Art von Bestrebungen helfen (jQuery und moralische Äquivalente beiseite)?

LinkedIn tun dies für ihre mobile Website (siehe http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile Teil 4), und es war anscheinend sehr vorteilhaft für sie von einem Leistungsstandpunkt.

Ich würde jedoch empfehlen, aus verschiedenen Gründen nicht dasselbe zu tun.

Das erste ist die Wartbarkeit: C # / ASP.net ist, da es ein serverseitiges Framework ist, clientunabhängig, während Javascript dies nicht ist (selbst mit einem Framework wie jQuery erhalten Sie keine 100% Cross-Browser-Kompatibilität) , nicht zukunftssicher). Ich würde sagen, es ist auch einfacher, die Funktionalität einer statisch typisierten Anwendung zu überprüfen, als eine dynamische. Dies sollten Sie unbedingt berücksichtigen, wenn Sie große Websites erstellen.

Die zweite ist, dass es schwierig sein wird, andere Personen zu finden, die in der Lage (und bereit sind), eine reine Javascript-Anwendung mit der Komplexität zu erstellen, die für den Betrieb Ihrer gesamten Website erforderlich ist (im Vergleich zur relativ einfachen Suche). NET-Programmierer). Dies ist vielleicht nicht direkt ein Anliegen von Ihnen, aber es ist sicherlich etwas, über das Sie aus einer langfristigen Perspektive nachdenken sollten.

Das dritte Problem ist die Clientkompatibilität. Wenn Sie öffentlich zugängliche Websites erstellen, denken Sie daran, dass für einen angemessenen Teil des Netzes JS (aus verschiedenen Gründen) immer noch nicht aktiviert ist. Sie müssen also absolut sicher sein, dass Sie einen großen Teil nicht ausschließen Ihrer Nutzerbasis, indem Sie zu einer JS-gesteuerten Website wechseln.

Was Ihre mit Aufzählungszeichen versehenen Bedenken betrifft:

• Ich würde mich nicht zu sehr um den Sicherheitsaspekt kümmern. Es gibt keinen Grund, warum Sie Paradigmen nicht mischen und eine serverseitige Verarbeitung durchführen könnten, wenn Sie Sicherheit benötigen (irgendwo wird kein Code zum Rendern von Ansichten angezeigt, der HTML zurückgibt) Es gibt keinen Grund, warum Sie dies nicht einfach veranlassen können, stattdessen einen AJAX-Anruf auszulösen (falls erforderlich).

• Einfache Entwicklung ist auch kein Problem. Meiner Meinung nach gibt es sehr gute Tools für die JS-Entwicklung. Packen Sie sich nicht einfach in VisualStudio ein, weil Sie daran gewöhnt sind! (Versuchen Sie es beispielsweise mit JetBrains WebStorm.)

• Die Leistung von JS-View-Engines ist in den meisten Fällen (meiner Erfahrung nach) absolut in Ordnung. Ich verwende sie täglich in großem Umfang. Ich würde vorschlagen, die schwereren Frameworks wie knockout.js usw. zu meiden und stattdessen etwas wie Jon Resigs Mikrovorlagen-Engine zu suchen. Auf diese Weise können Sie den unterstützenden Code so einfügen, dass Sie sicher sind, dass er schnell und zuverlässig ist.

Wenn ich Sie wäre, würde ich wirklich die Gründe für diesen Wechsel untersuchen. Es kann durchaus sein, dass Sie .NET nicht effektiv einsetzen und Ihr Spiel verbessern müssen. WebForms ist kein besonders langsames Framework, das sofort einsatzbereit ist. Vielleicht verwenden Sie also einige Bibliotheken von Drittanbietern verlangsamen Ihr Rendering.

Versuchen Sie, ein Leistungsprofil der Anwendung mit einem Auslastungstest- und Profilerstellungstool zu erstellen, und stellen Sie fest, wo Ihre Engpässe liegen, bevor Sie viel Zeit und Mühe in eine radikalere Lösung stecken. Sie werden wahrscheinlich überrascht sein, was Sie als das finden Schuld an deiner Langsamkeit!

Verwenden Sie ExtJS, wenn Sie diesen Weg einschlagen möchten, und erfinden Sie das Rad nicht neu. Aber seien Sie vorbereitet, das bedeutet einen vollständigen Paradigmenwechsel. Ihre HTML-Kenntnisse sind nahezu veraltet. AJAX Überall bietet der Server meist eine AJAX-API an. Sie werden viel mehr Javascript schreiben als jemals zuvor, stellen Sie also besser sicher, dass Sie wirklich mit Javascript fit sind.

Das Team, dem ich angehöre, entschloss sich, Ende 2008 auf ExtJS umzustellen. Zu diesem Zeitpunkt hatten wir eine PHP-App mit 200.000 Zeilen, die unter Front-End-Problemen litt. Unsere Situation war viel schlimmer als Ihre, da wir ein schlechtes handgesteuertes Framework für Formularsteuerelemente hatten und häufig Iframes zum Laden von Seitenabschnitten verwendeten (die visuelle Architektur stammt aus dem Jahr 2005, und das Team war sich dessen nicht bewusst) von Ajax so früh). Wir mussten den Code ohnehin umgestalten, was es einfacher machte, die Codebasis stark umzugestalten, um hauptsächlich clientseitig zu sein.

Heute umfasst die App 300.000 Zeilen, von denen 60.000 Zeilen ExtJS-Code sind, und ungefähr ein Drittel der Funktionalität wurde auf ExtJS migriert. Der extjs-Code ist allesamt eine einseitige App, bettet jedoch noch einige ältere Formulare in iframes ein. Wir haben zuerst über den Navigationscontainer portiert und dann die verschiedenen Feature-Bereiche stückweise migriert. Mit diesem Ansatz ist es uns gelungen, die Migration von extjs in den regulären Feature-Entwicklungsprozess einzugliedern, ohne uns zu sehr zu verlangsamen.

• Performance

  Der ExtJS-Code erwies sich als viel schneller als der Legacy-Code. Der alte Code war natürlich in Bezug auf die Leistung sehr schlecht, aber trotzdem sind wir mit den Ergebnissen zufrieden. Der UI-Code ist alles statisches Javascript, so dass es wirklich gut zwischengespeichert ist (wir sind in der Planungsphase, es auf eine CDN zu werfen). Der Server ist nicht am Front-End-Rendering beteiligt, wodurch sich die Arbeitslast dort verringert. Es hilft auch dabei, dass ExtJS eine große Kontrolle über den Lebenszyklus der Benutzeroberfläche bietet (verzögertes Rendern, einfaches Entladen unsichtbarer Benutzeroberflächenelemente). In der Regel wird nach dem Booten des Codes (On-Demand-Ladearchitektur) der größte Teil der Ladezeit eines Bildschirms für den Aufruf des Webdienstes zum Abrufen der Daten aufgewendet. Das ExtJS-Raster ist sehr schnell, insbesondere wenn gepufferte Ansichten zum Rendern der sichtbaren Zeilen beim Scrollen verwendet werden.

• Einfache Entwicklung

  Um ehrlich zu sein, ist dies eine gemischte Tasche. ExtJS ist ein DSL, es ist nicht wirklich Webentwicklung im herkömmlichen Sinne. Unsere Entwickler haben lange gebraucht, um die API des Frameworks wirklich zu erlernen, und ich sehe, dass diese Kurve bei anderen clientseitigen Frameworks nicht weniger steil ist. Jeder im Team muss ein "erfahrener" Javascript-Entwickler sein (in der Regel Crockfords Buch keine Geheimnisse bergen ). Wir haben mit neuen Entwicklern Probleme mit dem Bootstrapping, weil das Know-how auf Kundenseite nicht so weit verbreitet ist, wie Sie denken, und das von extjs (in Belgien, wo wir ansässig sind) so gut wie gar nicht.

  Wenn Sie jedoch erst einmal auf dem neuesten Stand sind, ist die Entwicklererfahrung sehr gut. ExtJS ist sehr leistungsfähig. Wenn Sie sich also im Groove befinden, können Sie erstaunliche Bildschirme sehr schnell erstellen. IDE-weise verwenden wir PHPStorm, das ich als kompetent genug mit ExtJS-Code befunden habe.

• Sicherheit

  Sicherheit ist einer der Hauptgründe für die clientseitige Benutzeroberfläche. Der Grund ist einfach: Reduzierung der Angriffsfläche. Die von unserem ExtJS-Code verwendeten Webdienst-APIs weisen eine viel kleinere Angriffsfläche auf als eine serverseitige UI-Schicht. Das ASVS von OWASP gibt an, dass Sie alle Eingaben auf dem Server auf Richtigkeit überprüfen sollten, bevor Sie ihn verwenden. In einer Webservicearchitektur ist es offensichtlich und einfach, wann und wie die Eingabevalidierung durchgeführt wird. Ich finde es auch einfacher, über Sicherheit in einer clientseitigen UI-Architektur nachzudenken. Wir haben immer noch Probleme mit XSS, weil Sie nicht von der Codierung in HTML befreit sind, aber insgesamt sind wir in Bezug auf die Sicherheit viel besser als auf der alten Codebasis. ExtJS erleichtert die serverseitige Validierung von Formularfeldern, sodass wir nicht viel darunter leiden, Code zweimal schreiben zu müssen.

Wenn Sie es sich leisten können, skriptlose Benutzer nicht zu unterstützen, und Suchmaschinen Sie nicht betreffen, dann ist dies ein durchaus praktikabler Ansatz. Hier ist ein kurzer Überblick über die Vor- und Nachteile:

Vorteile:

• alles an einem Ort (Javascript)
• Sie können Daten vom Server laden, nicht von Markup, was viel Bandbreite spart, wenn Sie es richtig machen
• Einfacheres Erhalten einer reaktionsfähigen Anwendung (die Netzwerklatenz ist noch vorhanden, aber die erste Reaktion auf Benutzereingaben erfolgt schneller)
• Der Webserver muss kein HTML rendern oder Vorlagen erweitern (dh der Verarbeitungsaufwand wird vom Server auf den Client verlagert).

Nachteile:

• alles muss in Javascript sein (kann oder kann kein Problem sein)
• Die kritische Logik muss auf dem Server dupliziert werden
• Der Status muss auf Client und Server beibehalten und zwischen beiden synchronisiert werden
• Sicherheit kann schwieriger zu erreichen sein (wenn man bedenkt, wie etwas im clientseitigen Code von böswilligen Benutzern manipuliert werden kann)
• Sie legen einen großen Teil Ihrer Codebasis offen (Code, der auf dem Server ausgeführt wird, ist von außen nicht sichtbar)

Persönlich denke ich, wenn Sie diesen Weg gehen, sind ASP.NET UpdatePanels nicht der richtige Weg. Sie eignen sich hervorragend, um vorhandene Webanwendungen teilweise zu ajaxisieren, aber sie senden weiterhin HTML über AJAX, und das Verwalten des Status auf diese Weise kann ziemlich haarig sein. Sie sollten den ganzen Weg gehen und nur ein statisches HTML-Dokument bereitstellen und dann eine JavaScript-Vorlagenbibliothek verwenden, um das HTML-Rendering durchzuführen. Der Server stellt überhaupt kein dynamisches HTML bereit. Stattdessen ruft der Client den Server auf Geschäftslogikebene auf und empfängt Rohdaten.

Ja das kannst du aber ..

Sie müssen sicherstellen, dass Sie eine ordnungsgemäße "Verschlechterung" aufweisen, damit wichtige Teile Ihrer Anwendung auch ohne Javascript funktionieren.

So baue ich die meisten Apps im "HIJAX" -Stil.

Meine Seite steckt noch in den Kinderschuhen, aber 100% js ui hat mir bisher gut getan. Die einzige Serverlogik, die im Front-End vorhanden ist, sind Modellzuordnungen und Ajax-URLs. Der Server hat überhaupt keine Kenntnisse über die Benutzeroberfläche, was für mich sehr einfach zu pflegen ist. Wenn Sie interessiert sind, können Sie meine Website überprüfen, die in ExtJS http://coffeedig.com/coffee/ geschrieben ist . Meine Site hat keine wirklichen Sicherheitsprobleme, aber der Client hilft dem normalen Benutzer durch einfache Validierung. Ich weiß, dass ein böswilliger Benutzer wirklich Ajax an den Server senden kann, sodass die gesamte "Sicherheitslogik" auf dem Server ausgeführt wird.

Ich denke, das größte Problem für Sie ist, dass Sie das, was Ihr Team gewohnt ist, komplett umkehren werden. Es wird eine steile Lernkurve geben. Ich denke, der beste Ansatz wäre, mit einigen js-Frameworks zu experimentieren und zu versuchen, das Gefühl dafür zu bekommen, indem man einige einfache Bildschirme schreibt.