Welche technischen Details sollte ein Programmierer einer Webanwendung berücksichtigen, bevor er die Site veröffentlicht?

2187

Was sollte ein Programmierer beachten, der die technischen Details einer Webanwendung implementiert, bevor er die Site veröffentlicht? Wenn Jeff Atwood kann über vergessen Httponly - Cookies , Sitemaps , und Cross-Site Request Fälschungen alle in der gleichen Stelle , was wichtige Sache könnte ich genauso gut sein zu vergessen?

Ich denke darüber aus der Perspektive eines Webentwicklers nach, sodass jemand anderes das eigentliche Design und den eigentlichen Inhalt für die Site erstellt. Während Benutzerfreundlichkeit und Inhalt wichtiger sind als die Plattform, haben Sie als Programmierer wenig Mitspracherecht. Worüber Sie sich Sorgen machen müssen, ist, dass Ihre Implementierung der Plattform stabil ist, eine gute Leistung erbringt, sicher ist und alle anderen Geschäftsziele erfüllt (z. B. nicht zu viel kosten, zu lange für den Aufbau in Anspruch nehmen und bei Google ebenso gut ranken wie bei Google) Inhalt unterstützt).

Stellen Sie sich dies aus der Perspektive eines Entwicklers vor, der in einer vertrauenswürdigen Umgebung einige Arbeiten für Intranetanwendungen ausgeführt hat und kurz davor steht, seine erste Aufnahme zu machen und eine potenziell beliebte Website für das gesamte große, schlechte World Wide Web zu veröffentlichen.

Außerdem suche ich etwas Spezifischeres als nur eine vage Antwort auf "Webstandards". Ich meine, HTML, JavaScript und CSS über HTTP sind eine Selbstverständlichkeit, besonders wenn ich bereits angegeben habe, dass Sie ein professioneller Webentwickler sind. Also darüber hinaus, welche Standards? Unter welchen Umständen und warum? Stellen Sie einen Link zur Spezifikation des Standards bereit.

Joel Coehoorn
quelle

Antworten:

2645

Die Idee dabei ist , dass die meisten von uns sollte schon wissen , die meisten von dem, was in dieser Liste. Aber es könnte ein oder zwei Dinge geben, die Sie vorher noch nicht wirklich untersucht haben, die Sie nicht vollständig verstehen oder von denen Sie vielleicht noch nie gehört haben.

Benutzeroberfläche und Benutzererfahrung

  • Beachten Sie, dass Browser Standards inkonsistent implementieren, und stellen Sie sicher, dass Ihre Site in allen wichtigen Browsern einigermaßen gut funktioniert. Zumindest ein Test mit einer aktuellen Gecko- Engine ( Firefox ), einer WebKit-Engine ( Safari und einige mobile Browser), Chrome , Ihren unterstützten IE-Browsern (nutzen Sie die Anwendungskompatibilität von VPC-Images ) und Opera . Überlegen Sie auch, wie Browser Ihre Website in verschiedenen Betriebssystemen rendern .
  • Überlegen Sie, wie andere Benutzer die Website möglicherweise nicht in den gängigen Browsern verwenden: z. B. Mobiltelefone, Bildschirmleseprogramme und Suchmaschinen. - Einige Informationen zur Barrierefreiheit: WAI und Section508 , Mobile-Entwicklung: MobiForge .
  • Staging: So stellen Sie Updates bereit, ohne die Benutzer zu beeinträchtigen. Stellen Sie eine oder mehrere Test- oder Staging-Umgebungen zur Verfügung, um Änderungen an Architektur, Code oder umfassenden Inhalten zu implementieren, und stellen Sie sicher, dass sie auf kontrollierte Weise bereitgestellt werden können, ohne dass etwas beschädigt wird. Automatische Bereitstellung genehmigter Änderungen an der Live-Site. Dies wird am effektivsten in Verbindung mit der Verwendung eines Versionskontrollsystems (git, Subversion usw.) und eines automatisierten Erstellungsmechanismus (Ant, NAnt usw.) implementiert.
  • Zeigen Sie dem Benutzer keine unfreundlichen Fehler direkt an.
  • Geben Sie die E-Mail-Adressen der Benutzer nicht in Klartext an, da sie sonst zu Tode gespammt werden.
  • Fügen Sie das Attribut rel="nofollow"zu benutzergenerierten Links hinzu , um Spam zu vermeiden .
  • Bauen Sie wohlüberlegte Grenzen in Ihre Site ein - Dies gehört auch unter Sicherheit.
  • Erfahren Sie, wie Sie progressive Verbesserungen vornehmen .
  • Leiten Sie nach einem POST um, wenn dieser POST erfolgreich war, um zu verhindern, dass eine Aktualisierung erneut gesendet wird.
  • Vergessen Sie nicht, die Zugänglichkeit zu berücksichtigen. Es ist immer eine gute Idee und unter bestimmten Umständen gesetzlich vorgeschrieben . WAI-ARIA und WCAG 2 sind gute Ressourcen in diesem Bereich.
  • Lies Lass mich nicht nachdenken .

Sicherheit

Performance

  • Implementieren Sie gegebenenfalls das Caching, verstehen und verwenden Sie das HTTP-Caching sowie das HTML5-Manifest ordnungsgemäß .
  • Bilder optimieren - Verwenden Sie kein 20-KB-Bild für einen sich wiederholenden Hintergrund.
  • Inhalt komprimieren, um die Geschwindigkeit zu erhöhen, siehe brotli , gzip / deflate ( deflate ist besser ).
  • Kombinieren / verketten Sie mehrere Stylesheets oder mehrere Skriptdateien, um die Anzahl der Browserverbindungen zu verringern und die gzip-Funktion zum Komprimieren von Duplikaten zwischen Dateien zu verbessern.
  • Werfen Sie einen Blick auf die Yahoo Exceptional Performance- Website, auf der Sie viele nützliche Richtlinien finden, darunter die Verbesserung der Front-End-Leistung und des YSlow- Tools (erfordert Firefox, Safari, Chrome oder Opera). Die Google-Seitengeschwindigkeit (mit Browsererweiterung ) ist ein weiteres Tool für die Leistungsprofilerstellung und optimiert auch Ihre Bilder.
  • Verwenden Sie CSS-Image-Sprites für kleine verwandte Bilder wie Symbolleisten (siehe den Punkt "HTTP-Anforderungen minimieren").
  • Verwenden Sie SVG-Bild-Sprites für kleine verwandte Bilder wie Symbolleisten. SVG-Färbung ist etwas schwierig. Sie können darüber lesen Sie hier .
  • Bei stark frequentierten Websites sollte eine Aufteilung der Komponenten auf mehrere Domänen in Betracht gezogen werden . Speziell...
  • Statischer Inhalt (dh Bilder, CSS, JavaScript und allgemein Inhalte, die keinen Zugriff auf Cookies benötigen) sollte in eine separate Domain gestellt werden , die keine Cookies verwendet , da alle Cookies für eine Domain und ihre Unterdomänen bei jeder Anfrage an gesendet werden Domain und deren Subdomains. Eine gute Möglichkeit besteht darin, ein Content Delivery Network (CDN) zu verwenden. Berücksichtigen Sie jedoch den Fall, dass dieses CDN fehlschlägt, indem Sie alternative CDNs oder lokale Kopien einbeziehen, die stattdessen bereitgestellt werden können.
  • Minimieren Sie die Gesamtzahl der HTTP-Anforderungen, die ein Browser zum Rendern der Seite benötigt.
  • Wählen Sie eine Template-Engine und rendern / kompilieren Sie sie mit Task-Läufern wie gulp oder grunt
  • Stellen Sie sicher, dass sich favicon.icoim Stammverzeichnis der Site eine Datei befindet, z /favicon.ico. Browser fordern dies automatisch an , auch wenn das Symbol im HTML-Code überhaupt nicht erwähnt wird. Wenn Sie keine haben /favicon.ico, führt dies zu einer Menge von 404s, was die Bandbreite Ihres Servers belastet.

SEO (Suchmaschinenoptimierung)

  • Verwenden Sie "suchmaschinenfreundliche" URLs, dh verwenden Sie example.com/pages/45-article-titlestattexample.com/index.php?page=45
  • Wenn Sie #für dynamischen Inhalt verwenden, ändern Sie das #zu #!und dann auf dem Server, $_REQUEST["_escaped_fragment_"]was Googlebot anstelle von verwendet #!. Mit anderen Worten ./#!page=1wird ./?_escaped_fragments_=page=1. Auch für Benutzer, die FF.b4 oder Chromium verwenden, history.pushState({"foo":"bar"}, "About", "./?page=1");ist dies ein großartiger Befehl. Obwohl sich die Adressleiste geändert hat, wird die Seite nicht neu geladen. Auf diese Weise können Sie verwenden ?anstelle von #!dynamischen Inhalten zu halten und auch den Server sagen , wenn Sie den Link per E - Mail , die wir nach dieser Seite sind, und die AJAX benötigen keine weitere zusätzliche Anforderung zu machen.
  • Verwenden Sie keine Links, die "hier klicken" sagen . Sie verschwenden eine SEO-Chance und es erschwert die Arbeit für Leute mit Bildschirmleseprogrammen.
  • Verfügen Sie über eine XML-Sitemap , vorzugsweise am Standardspeicherort /sitemap.xml.
  • Verwenden <link rel="canonical" ... />Sie diese Option, wenn Sie mehrere URLs haben, die auf denselben Inhalt verweisen. Dieses Problem kann auch über die Google Webmaster-Tools behoben werden .
  • Verwenden Sie die Google Webmaster-Tools und Bing Webmaster-Tools .
  • Installieren Sie Google Analytics gleich zu Beginn (oder ein Open-Source-Analysetool wie Piwik ).
  • Wissen, wie robots.txt und Suchmaschinen funktionieren.
  • Leiten Sie Anfragen (mit 301 Moved Permanently) um, indem Sie nach www.example.comdem example.com(oder umgekehrt ) fragen , um zu verhindern, dass das Google-Ranking zwischen beiden Websites aufgeteilt wird.
  • Wisse, dass es da draußen schlecht erzogene Spinnen geben kann.
  • Wenn Sie keinen Textinhalt haben, schauen Sie in die Sitemap-Erweiterungen von Google nach Videos usw. In der Antwort von Tim Farley finden Sie einige gute Informationen dazu .

Technologie

  • Verstehen Sie HTTP und Dinge wie GET, POST, Sitzungen, Cookies und was es bedeutet, "zustandslos" zu sein.
  • Schreiben Sie Ihr XHTML / HTML und CSS gemäß den W3C-Spezifikationen und stellen Sie sicher, dass sie validiert sind . Ziel ist es, Browser-Macken zu vermeiden und als Bonus die Arbeit mit nicht-traditionellen Browsern wie Bildschirmleseprogrammen und Mobilgeräten zu vereinfachen.
  • Verstehen Sie, wie JavaScript im Browser verarbeitet wird.
  • Verstehen Sie, wie JavaScript, Stylesheets und andere von Ihrer Seite verwendete Ressourcen geladen werden, und berücksichtigen Sie deren Auswirkungen auf die wahrgenommene Leistung. Es wird mittlerweile allgemein als angemessen erachtet , Skripte an den unteren Rand Ihrer Seiten zu verschieben, mit Ausnahme von typischen Ausnahmen wie Analytics-Apps oder HTML5-Shims.
  • Verstehen Sie, wie die JavaScript-Sandbox funktioniert, insbesondere, wenn Sie Iframes verwenden möchten.
  • Beachten Sie, dass JavaScript deaktiviert werden kann und wird, und dass AJAX daher eine Erweiterung und keine Basis ist. Beachten Sie, dass NoScript immer beliebter wird, mobile Geräte möglicherweise nicht wie erwartet funktionieren und Google beim Indizieren der Website nicht den größten Teil Ihres JavaScript ausführt.
  • Erfahren Sie den Unterschied zwischen 301 und 302 Weiterleitungen (dies ist auch ein SEO-Problem).
  • Erfahren Sie so viel wie möglich über Ihre Bereitstellungsplattform.
  • Verwenden Sie ein Reset Style Sheet oder normalize.css .
  • Berücksichtigen Sie JavaScript-Frameworks (z. B. jQuery , MooTools , Prototype , Dojo oder YUI 3 ), durch die sich bei der Verwendung von JavaScript für die DOM-Manipulation viele Browserunterschiede verbergen.
  • Wenn Sie die wahrgenommene Leistung und die JS-Frameworks zusammenfassen, können Sie mithilfe eines Dienstes wie der Google Libraries-API Frameworks laden, damit ein Browser eine Kopie des bereits zwischengespeicherten Frameworks verwenden kann, anstatt eine Kopie von Ihrer Website herunterzuladen.
  • Das Rad nicht neu erfinden. Bevor Sie etwas tun, suchen Sie nach einer Komponente oder einem Beispiel dafür. Es besteht eine 99% ige Wahrscheinlichkeit, dass jemand dies getan und eine OSS-Version des Codes veröffentlicht hat.
  • Beginnen Sie jedoch nicht mit 20 Bibliotheken, bevor Sie sich überhaupt für Ihre Bedürfnisse entschieden haben. Besonders im clientseitigen Web, wo es letztendlich fast immer wichtiger ist, die Dinge leicht, schnell und flexibel zu halten.

Bugfixing

  • Verstehen Sie, dass Sie 20% Ihrer Zeit mit dem Programmieren und 80% mit der Wartung verbringen werden, also programmieren Sie entsprechend.
  • Richten Sie eine gute Fehlerberichtslösung ein.
  • Haben Sie ein System für Leute, um Sie mit Vorschlägen und Kritik zu kontaktieren.
  • Dokumentieren Sie, wie die Anwendung für zukünftige Supportmitarbeiter und Wartungsmitarbeiter funktioniert.
  • Machen Sie häufige Backups! (Und stellen Sie sicher, dass diese Sicherungen funktionsfähig sind.) Verfolgen Sie eine Wiederherstellungsstrategie, nicht nur eine Sicherungsstrategie.
  • Verwenden Sie ein Versionskontrollsystem, um Ihre Dateien wie Subversion , Mercurial oder Git zu speichern .
  • Vergessen Sie nicht, Ihren Abnahmetest durchzuführen. Frameworks wie Selen können helfen. Insbesondere, wenn Sie Ihre Tests vollständig automatisieren, z. B. mit einem Continuous Integration-Tool wie Jenkins .
  • Stellen Sie sicher, dass Sie ausreichend angemeldet sind, indem Sie Frameworks wie log4j , log4net oder log4r verwenden . Wenn auf Ihrer Live-Site etwas schief geht, müssen Sie herausfinden, was passiert.
  • Stellen Sie bei der Protokollierung sicher, dass Sie sowohl behandelte als auch nicht behandelte Ausnahmen erfassen. Berichten / analysieren Sie die Protokollausgabe, da Sie sehen, wo sich die wichtigsten Probleme auf Ihrer Site befinden.

Andere

  • Implementieren Sie sowohl serverseitige als auch clientseitige Überwachung und Analyse (man sollte proaktiv und nicht reaktiv sein).
  • Verwenden Sie Dienste wie UserVoice und Intercom (oder ähnliche Tools), um ständig mit Ihren Benutzern in Kontakt zu bleiben.
  • Folgen Sie Vincent Driessen ‚s Git Verzweigung Modell

Viele Dinge wurden nicht unbedingt weggelassen, weil sie keine nützlichen Antworten sind, sondern weil sie entweder zu detailliert sind, nicht in den Geltungsbereich passen oder zu weit gehen, als dass jemand einen Überblick über die Dinge bekommen könnte, die er wissen sollte. Bitte zögern Sie nicht, dies zu bearbeiten. Ich habe wahrscheinlich ein paar Dinge verpasst oder einige Fehler gemacht.

naeblis
quelle
7
Einige Ihrer SEO-Vorschläge sind schlecht. Es spielt keine Rolle, ob Sie Tabellen oder Divs verwenden (Google hat dies selbst bestätigt). Diese SEF-URL-Sache ... Ich hasse diese "gefälschten URLs", bei denen die ID das einzige ist, was die Seite tatsächlich bestimmt. "45-blah" wäre die gleiche Seite. Es ist auch nicht benutzerfreundlich.
DisgruntledGoat
152
Dann bearbeite es. Das meiste habe ich nicht geschrieben: Ich behalte es nur bei - ein Job, den ich geerbt habe, weil ich die Frage gestellt habe, diese größere Antwort speziell angefordert habe, und ich bin wirklich daran interessiert zu sehen, was wir uns einfallen lassen können . Je mehr Beiträge desto besser.
Joel Coehoorn
327
Noch eine Anmerkung: Wenn Sie zurückkommen und dies bearbeiten, versuchen Sie, respektvoll mit dem, was geschrieben wurde, umzugehen. Entfernen Sie nicht nur die Teile, mit denen Sie nicht einverstanden sind, sondern nehmen Sie sich tatsächlich die Zeit, um die Mängel zu beheben und etwas Besseres bereitzustellen.
Joel Coehoorn
16
Ich schlage vor, dass Sie Ihren Sicherheitsbereich erweitern, indem Sie alle Dateien, die Sie bereitstellen, mit einer Whitelist zulässiger Ordner vergleichen oder den Webserver "einsperren". Dies verhindert, dass jemand verwendet http://server/download.php?file=../../etc/password. Stellen Sie dem Benutzer niemals Dateipfade zur Verfügung.
Philluminati
10
Zum Beispiel springt man nicht einfach in ein Auto und fährt los. Stattdessen nehmen Sie an Kursen über den ordnungsgemäßen Betrieb dieses Autos teil und müssen schließlich einen Test bestehen, der Ihre Fahrtüchtigkeit beweist. Für manche dauert das viele, viele, viele Stunden . Und ja, ich würde das Lernen, wie man eine Webanwendung richtig erstellt, mit dem Erlernen des Autofahrens gleichsetzen, da das Versagen, eine Anwendung richtig zu erstellen, mit Sicherheit zu einer größeren Beeinträchtigung des Lebens der Menschen führen kann als ein einfacher Kotflügelschaden, einschließlich eines viel größeren finanzieller Verlust. Tod? Nun, hängt davon ab, welche Art von App der Entwickler vermasselt hat.
NotMe