Neue Funktionen für die Webentwicklung in Visual Studio 2012

Erinnern Sie sich noch an die erste von Ihnen erstellte Website? Ich schon. Das war vielleicht ein Chaos. Glücklicherweise hat sich seitdem viel geändert. Und die Entwicklung schreitet mit großen Schritten voran. Man kann sich kaum noch daran erinnern, wie sich die Webentwicklung im letzten Jahr gestaltete, geschweige denn, wie es war, als die erste Version von .NET Framework auf den Markt kam.

Auch Visual Studio hat wesentliche Fortschritte gemacht. Wissen Sie noch, wie es war, als Webentwickler einen kompletten Server als Entwickler-Rig einrichten mussten, damit IIS und SQL Server die Websites ausführen konnten? Glücklicherweise wurde unsere Arbeit kurze Zeit später durch Cassini und IIS Express erleichtert. Mittlerweile steht uns eine starke Kombination aus HTML5 und Visual Studio zur Verfügung.

In diesem Artikel zeige ich auf, wie Visual Studio diese neue Welt der Webentwicklung unterstützt. Dabei werde ich auf aufregende, neue Features wie die Projektfreigabe, die Seitenprüfung und den DOM Explorer eingehen und ein paar Informationen zur Entwicklung der grundlegenden Bearbeitungsfunktionen bereitstellen.

Projektfreigabe

Sie werden die neuen Visual Studio-Features bereits beim ersten Mausklick entdecken. Direkt beim Öffnen einer Projektdatei. In der Vergangenheit hingen die Projektdateien vom verwendeten Editor ab. Hatten Sie also eine Projektdatei mit Visual Studio 2010 erstellt und versuchten, diese in Visual Studio 2012 zu öffnen, wurden Sie zum Aktualisieren der Datei aufgefordert. Nach der Aktualisierung war es allerdings nicht mehr möglich, das Projekt mit der älteren Version zu öffnen. Das hat sich geändert.

Mit Visual Studio 2012 Release Candidate (RC) wurde die Projektfreigabe eingeführt. Von nun an kann ein Projekt abwechselnd mit Visual Studio 2010 SP1 auf Basis derselben Quelle verwendet werden. Dadurch, dass nicht mehr jeder Benutzer dasselbe Setup nutzen muss, werden ganz neue Erfahrungen möglich. Dies gilt insbesondere für verteilte Teams und Open Source-Projekte, aber auch während Softwareupgrades in Ihrer Entwicklungsumgebung ausgeführt werden.

Ein paar Einschränkungen gibt es allerdings. Nutzen Sie für Ihr Projekt beispielsweise eine lokale Datenbank (Ordner „App_Data“), müssen Sie auch dieselbe Version des Datenbankmoduls einsetzen. Darüber hinaus gibt es ein paar ältere Projekttypen wie ASP.NET MVC 2, bei dem dies nicht möglich ist.

Wie bei allem, was neu ist, möchten Sie sicherlich zunächst erst einmal eine Verzweigung erstellen und die Machbarkeit prüfen. Ganz sicher möchten Sie nicht derjenige sein, der den Buildprozess zum Absturz bringt.

HTML5-Support

Das vermutlich wichtigste Feature, das in Visual Studio zum HTML-Editor hinzugefügt wird, ist der Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)-Support. WAI-ARIA (w3.org/WAI/intro/aria) ist ein Webstandard, durch den Websites und Webanwendungen für Menschen mit Behinderungen besser zugänglich gemacht werden. In der Spezifikation werden zwei Attributtypen für das Markup definiert. Bei dem einen Attributtyp werden Rollen auf HTML-Elemente angewendet, um den Typ des verwendeten Widgets oder die Struktur der Webseite zu beschreiben. Wie Sie der Abbildung 1 entnehmen können, enthält der Visual Studio-Support für ARIA-Rollen IntelliSense.

Abbildung 1: ARIA-Rollen

Bei dem anderen Attributtyp wird das Präfix „aria“ vorangestellt, beispielsweise aria-busy oder aria-valuemin. Dies wird auch in Abbildung 2 gezeigt. Die Attribute vom Typ „aria-*“ werden zur Beschreibung des Elements für einen Benutzer eingesetzt.

Abbildung 2: ARIA-*-Eigenschaften

Mit HTML5 wurden mehr als 25 neue semantische Tags eingeführt. In Visual Studio war bereits ein IntelliSense-Support für diese Tags enthalten. Mit Visual Studio 2012 jedoch geht das Schreiben eines Markups einfacher und schneller, indem entsprechende Ausschnitte, beispielsweise für Audio- und Videotags, hinzugefügt werden. Abbildung 3 zeigt einen Ausschnitt für ein Videotag. Diese Tags sind zwar nicht übermäßig kompliziert, weisen jedoch einige Feinheiten auf, beispielsweise das Hinzufügen der korrekten Codec-Fallbacks.

Abbildung 3: Ausschnitt für das Videoelement

Bei den letzten von mir entwickelten Websites habe ich die Vorteile der neuen HTML5-Tags genutzt. Bei jeder Website musste ich mein Markup am Schluss ein wenig umgestalten, auch wenn es sich dabei oftmals nur um einfache semantische Änderungen gehandelt hat, beispielsweise der Änderung von „div“ in „section“. Wenn Sie in Visual Studio 2012 ein Element ändern, ändert der Editor das entsprechende Start- oder Endeelement ebenfalls. Durch diese automatische Umbenennung hilft Ihnen der Editor, die typischen Fehler zu vermeiden, die oftmals nach einem langen Arbeitstag auftreten.

Wenn es darum geht, Tabulatoren oder Leerstellen für die Formatierung zu verwenden, sind sich Entwickler oft nicht einig. Unabhängig davon, was Sie bevorzugen, mit der Funktion für den intelligenten Einzug bleiben Sie auf alle Fälle konsistent. Egal, wofür Sie sich entscheiden, nach dem Eingeben eines Elements und Drücken der EINGABETASTE wechseln Sie automatisch zur nächsten Zeile, die so eingerückt wird, wie Sie es möchten. IntelliSense filtert nicht nur während der Eingabe, sondern auch basierend auf den großen Anfangsbuchstaben der Wörter in Ihrer Suche, sodass Elemente noch einfacher und schneller eingefügt werden können. In Kombination mit dem intelligenten Einzug wird das neue Markup unabhängig von der Cursorposition automatisch korrekt im Dokument positioniert, wenn Sie die TAB-TASTE drücken. Dies wird auch in Abbildung 4 gezeigt.

Abbildung 4: Intelligente Filterung, intelligenter Einzug

Darüber hinaus verfügt der HTML-Editor von Visual Studio 2012 über eine Reihe nützlicher Ergänzungen, die ASP.NET unterstützen, beispielsweise Smarttasks, extrahierte Benutzersteuerelemente und eine automatische Ereignisbindung. Weitere Informationen zu diesen Features erhalten Sie auf der Seite „Neuerungen in ASP.NET 4.5 und Visual Studio 2012“ unter bit.ly/MXcIbG.

JavaScript-Unterstützung

Der JavaScript-Editor in Visual Studio 2012 ist komplett neu und unterstützt ECMAScript 5. Er enthält einige hilfreiche Features. Dazu zählen das Reduzieren der Funktionsansicht und die Klammerzuordnung. Scrollen Sie immer noch nach einer Funktion? Viel zu umständlich. Drücken Sie einfach F12, und Sie gelangen direkt zur Definition der Funktion oder Variablen (siehe Abbildung 5).

Abbildung 5: Der JavaScript-Editor

Der Editor ergänzt außerdem IntelliSense für die JavaScript-Entwicklung und bietet in diesem Zusammenhang eine bessere Unterstützung des Dokumentobjektmodells (Document Object Model, DOM). HTML5 wird zunehmend zur meist genutzten Anwendung. Deshalb ist dieser erweiterte Support nicht nur für die neuen DOM-APIs nützlich, sondern auch für deren Erweiterung (siehe Abbildung 6).

Abbildung 6: IntelliSense für JavaScript

Dokumentation ist immer eine gute Sache, dies gilt insbesondere dann, wenn es sich um eine solche Dokumentation handelt, wie sie im IntelliSense-Fenster angezeigt wird. Der VSDoc-Support in Visual Studio ist zwar nicht neu, enthält jetzt aber ein neues Signaturelement zum Deklarieren von Überladungen von JavaScript-Funktionen, mit denen Sie detaillierte IntelliSense-Kommentare erstellen können. Gehen wir mal kurz weg von der Codequalität, und lassen Sie uns mal einen Blick auf Abbildung 7 werfen. Diese zeigt eine Funktion, die entweder zwei oder drei Argumente aufnimmt. Wie Sie sehen, enthält der Code eine Reihe von <signatures> für jede Überladung. Das Ergebnis zeigt Abbildung 8.

function myAwesomeFunction(a, b, c) {
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <returns type="String" />
    /// </signature>
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <param name="c" type="String">Clearly you should pass C in here.</param>
    ///   <returns type="String" />
    /// </signature>
    return "yea pretty awesome";
  }

Abbildung 8: Zu IntelliSense hinzugefügte Kommentare

Anhand dieser einfachen Dokumentation können Sie in Abbildung 8 sehen, wie diese von IntelliSense für den angezeigten Inhalt verwendet wurde.

CSS3-Support

Für mich bleibt CSS ein wenig mystisch, sodass ich immer für Hilfe dankbar bin. Glücklicherweise wurde der CSS-Support in Visual Studio 2012 verbessert. Bereiche, IntelliSense und Ausschnitte sind nur einige wenige neue Features, mit denen Sie Ihren Stil verbessern können. Schauen wir uns zunächst einmal die Bereiche an. Wir benötigen lediglich einen besonderen Kommentar, um einen Bereich zu erstellen. Abbildung 9 zeigt einen einfachen Bereich zum Gestalten einer Tabelle sowohl erweitert als auch reduziert.

Abbildung 9: Bereiche

Wie Sie wissen, müssen Sie in der Welt des Webs mehrere Browser unterstützen können. Im Hinblick auf CSS bedeutet dies, dass alle unterschiedlichen Anbieterpräfixe zu berücksichtigen sind. Der CSS-Editor in Visual Studio 2012 enthält nun Anbieterpräfixe sowohl in der Standardeigenschaftenliste als auch in den integrierten Ausschnitten, siehe Abbildung 10.

Abbildung 10: Eigenschaften für das Anbieterpräfix -moz

Natürlich stehen Ihnen viele CSS-Eigenschaften zur Verfügung, sodass eine Filterung wichtig ist. Genau wie bei IntelliSense für C# und Visual Basic können Sie diese lange Liste der CSS-Eigenschaften ganz einfach während der Eingabe filtern. Abbildung 11: Filterung bei der Suche nach „borr“ (border-radius).

Abbildung 11: CSS IntelliSense

Das ist zwar sehr nützlich, aber im Falle von border-radius sollten doch alle Anbieterpräfixe unterstützt werden. Wenn Sie sich das Symbol für border-radius ansehen, sehen Sie, dass es sich tatsächlich um einen Ausschnitt handelt. Drücken Sie zweimal die TAB-TASTE. Einmal, um die Eigenschaft automatisch abzuschließen und einmal, um den Ausschnitt einzufügen (siehe Abbildung 12).

Abbildung 12: CSS-Ausschnitt

Sie sehen, dass alle Anbieterpräfixe hinzugefügt wurden. Der Wert ist nun markiert und kann geändert werden. Wenn Sie den gewünschten Wert für den Radius eingeben, ändern sich alle anbieterspezifischen Werte entsprechend. Aber wie sieht das bei etwas aus, das schwieriger ist? Beispielsweise einer Medienabfrage? Geben Sie @ ein, und Sie erhalten eine Liste erweiterter Ausschnitte wie @media. Wählen Sie @media, und drücken Sie dann die TAB-TASTE. Der Ausschnitt der Medienabfrage wird eingefügt. Sie können nun die neue Breite eingeben, die TAB-TASTE drücken und die Höhe anpassen (siehe Abbildung 13).

Abbildung 13: Der @media-Ausschnitt

Ausschnitte sind ein gutes Mittel, um Tastatureingaben zu sparen. Genau wie in C# oder Visual Basic können Sie neue Ausschnitte erstellen oder vorhandene ändern. Verwenden Sie dazu den Codeausschnitt-Manager von Visual Studio. Sie finden diesen unter Extras | Codeausschnitt-Manager.

Visual Studio verfügt auch über einen neuen Farbwähler für die Eigenschaften, die Farbe benötigen. Dieser ersetzt die benannten Farben in vorherigen Versionen. Wie Sie in Abbildung 14 sehen, habe ich mich für eine leicht transparente Farbe entschieden, sodass sich der Farbwähler von einer hexadezimalen Farbe in eine RGBA-Farbe geändert hat.

Abbildung 14: Der neue Farbwähler

Abschließend möchte ich Sie noch an die Unterstützung des hierarischen Einzugs und an den Support im Falle von CSS-Hackerangriffen erinnern. Informationen hierzu erhalten Sie unter bit.ly/MXcIbG.

Debuggen mit der Seitenprüfung

„Super, es läuft!“. Ich wette, Sie haben diesen Satz mehr als einmal in Ihrer Laufbahn gehört oder selbst von sich gegeben. Bei der Webentwicklung hören Sie diesen Satz mit nahezu hundertprozentiger Wahrscheinlichkeit früher oder später. Und warum? Teilweise, weil das, was wir bereitstellen, und das, was wir zur Entwicklung nutzen, nicht identisch sind.

Abgesehen von so offensichtlichen Dingen wie Sicherheit und Serverfarmen hängt es im Wesentlichen davon ab, was der Browser ausführt und rendert. Im Laufe der Zeit haben sich Technologien wie HTML5, CSS3 oder JavaScript verbessert. Zudem benutzen wir eine Reihe von Frameworks, von denen einige scheinbar immer im Browser laufen, beispielsweise knockout.js und backbon.js. Webentwickler sind mit zwei unterschiedlichen Welten konfrontiert: der eigentlichen App-Entwicklung und der Ausführbarkeit der App in unterschiedlichen, zu unterstützenden Browsern.

Glücklicherweise haben sich die Browsertools entsprechend weiterentwickelt. Das hilft schon sehr, allerdings müssen Sie oftmals doch noch ziemlich tief graben, um die ursprüngliche Quelldatei zu finden. Auch bei einer einfachen JavaScript-Minimierung oder bei simplen Skriptladeprogrammen kann sich das, was letztendlich zum Server gesendet wird, stark von dem unterscheiden, was Sie entwickelt haben. Dankenswerterweise gibt es die Seitenprüfung, eine meiner Lieblingserweiterungen in Visual Studio 2012. Durch die Seitenprüfung stehen Browserdiagnosetools direkt in Visual Studio zur Verfügung. Dies erlaubt eine integrierte Verwendung, ausgehend vom Browser über ASP.NET bis hin zum Quellcode. Und all dies erfordert nur ein kleines Setup.

Anschließend ist die Seitenprüfung sofort mit eingeschränkter Funktionalität ausführbar. Klicken Sie einfach auf die gewünschte Seite, und wählen Sie die Option zum Anzeigen in der Seitenprüfung. Ich weiß, was Sie jetzt denken: „Auf keinen Fall wird das bei meinem MVC-Projekt oder bei meinen benutzerdefinierten Routen funktionieren.“ Haben Sie etwas Vertrauen.

Die Seitenprüfung wird alles versuchen, um die Datei der verwendeten URL-Konvention zuzuordnen. Im Falle eines Fehlschlags können Sie die Zuordnung manuell vornehmen. Um die Seitenprüfung und die damit verbundenen Features vollständig zu aktivieren, fügen Sie lediglich einen neuen Schlüssel zum appSettings-Abschnitt der web.config-Datei hinzu:

<add key="VisualStudioDesignTime:Enabled" value="true" />

Die Seitenprüfung versucht die Lücke zu stopfen, die zwischen dem, was entwickelt wurde und dem, was gerendert wurde, klafft. Wäre es nicht schön, wenn Sie einfach etwas in der gerenderten Ausgabe markieren könnten und so herausfinden würden, von welcher Datei dies stammt? Oder besser noch, wenn Sie nicht nur finden, sondern auch ändern könnten? Ich weiß, dass dies bereits mit den Browsertools möglich ist, aber ich meine, was wäre, wenn dies gleich in der Quelldatei möglich wäre? Mit der Seitenprüfung ist das der Fall, da hier die Zuordnung zwischen der gerenderten Ausgabe und den ursprünglichen Quelldateien erfolgt. Wenn Sie die Seitenprüfung starten, öffnet sich ein Browserfenster in Visual Studio, siehe Abbildung 15.

Abbildung 15: Seitenprüfung

Hier ist ganz schön was los. Aber eines nach dem anderen:

• Die Umrandung des Fensters ist ein Browserrahmen. Oben sehen Sie die Adressleiste.
• Die obere Hälfte der Seite zeigt die tatsächliche Webseite, so wie sie vom Browser gerendert wurde.
• Unten links sehen Sie das HTML-Markup für die gerenderte Seite. Weil HTML auf der Registerkarte direkt darüber ausgewählt wurde.
• Unten rechts sehen Sie den Stil der gerenderten Seite.

Ähnlich wie bei den Tools im Browser gibt es auch hier ein Feature zum Überprüfen. Wählen Sie dieses aus, wenn Sie sich auf der Seite bewegen, sehen Sie, dass die unterschiedlichen DOM-Elemente markiert und beschriftet wurden. Abbildung 15 zeigt das Element „hgroup“, der Name der Klasse lautet „Title“. Im HTML-Fenster sehen Sie dann, dass das entsprechende Markup markiert ist. Das passiert in Echtzeit während der Navigation im Dokument. Und das ist noch nicht alles. Sehen Sie sich Abbildung 16 an. Ich habe in der Seitenprüfung ein Element ausgewählt bzw. habe den Mauszeiger über ein Element bewegt. Dahinter sehen Sie, dass es in der Quelldatei markiert wird, aus der der Text stammt. Dies geschieht nicht nur auf Elementebene, sondern auch auf Zeichenebene. Hier erfolgt die Zuordnung von einem Zeichen in der Quelle zum entsprechenden Zeichen in der gerenderten Ausgabe und umgekehrt. Die Markierung erfolgt unabhängig davon, ob Sie in der Quelle oder in der gerenderten Ausgabe auswählen.

Abbildung 16: Zuordnung zwischen Quelldatei und gerenderter Ausgabe

Ich habe die Funktionen der Seitenprüfung nur oberflächlich angeschnitten. Die Vorteile der Seitenprüfung werden Ihnen am ehesten bewusst, wenn Sie mit dieser arbeiten. Sie werden begeistert sein. Wenn Sie das nächste Mal an Ihrem Webprojekt arbeiten, klicken Sie einfach mit der rechten Maustaste, und wählen Sie die Funktionen zur Anzeige in der Seitenprüfung.

Veröffentlichen

Was nützt die schönste Website, wenn Sie diese nicht bereitstellen können? Visual Studio unterstützt seit langem die Bereitstellung von Websites u. a. durch das Feature „Profil veröffentlichen“. Früher war ein Profil nach der Erstellung lediglich ein lokales „Anlagevermögen“. In Visual Studio 2012 ist dieses Profil nun Teil des gesamten Projektvermögens. Wir sprechen hier von einer einfachen MSBuild-Datei, die in Ihre MSBuild-Kette implementiert wird. So könnte ein einfaches FTP-Profil aussehen:

<Project ToolsVersion="4.0"
  xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FTP</WebPublishMethod>
    <SiteUrlToLaunchAfterPublish>http://thatconference.com
      </SiteUrlToLaunchAfterPublish>
    <publishUrl>ftp://thatConference.com</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <FtpPassiveMode>True</FtpPassiveMode>
    <UserName>foooooo</UserName>
    <_SavePWD>True</_SavePWD>
  </PropertyGroup>
</Project>

Diese Profile sind in den Ordnern der Projekteigenschaften gespeichert:

• C#—Properties\PublishProfiles
• Visual Basic—MyProject\PublishProfiles

Das es sich um eine MSBuild-Projektdatei handelt, können Sie diese auch wie folgt über die Befehlszeile aufrufen:

msbuild.exe myProject.csproj /t:WebPublish /p:PublishProfile=ProfileName

HTML5 unter Windows 8

Auf der BUILD-Konferenz im letzten Jahr hat Microsoft ein neues Programmiermodell zum Erstellen von systemeigenen Apps unter Windows 8 bekanntgegeben. Wie sich herausstellte, ist dieses Programmiermodell keineswegs neu. Teilweise wurde lediglich eine neue Kombination mit HTML5, CSS3 und JavaScript zum Erstellen von Anwendungen verwirklicht. Jeder mit Erfahrungen im Bereich Webentwicklung kann auch systemeigene Apps für Windows 8 schreiben und sich dabei natürlich von Visual Studio helfen lassen.

Viele der hier vorgestellten Verbesserungen bei der Bearbeitung eignen sich auch zum Entwickeln von Windows Store-Apps, mit Ausnahme der Seitenprüfung, da Windows Store-Apps nicht in einem Browser ausgeführt werden. Wie also debuggen Sie dann in HTML5 verfasste Windows Store-Anwendungen? Ganz einfach mit dem DOM Explorer und der JavaScript-Konsole, siehe Abbildung 17.

Abbildung 17: DOM Explorer

Genau wie bei der Seitenprüfung können Sie Elemente der ausgeführten Anwendung auswählen und direkt zu diesen in der Quelle wechseln. Während die Anwendung ausgeführt wird, sehen Sie die angezeigten Stile und können Werte ändern. Sie möchten in JavaScript einen Haltepunkt setzen? Dann legen Sie los, und debuggen Sie anschließend live. Sie können sogar die JavaScript-Konsole anheizen und etwas „herumhacken“. Egal, ob Sie nun eine Website erstellen oder eine Anwendung für Windows 8. Das Verfahren ist dasselbe. Dieselben Features auf beiden Plattformen und ein großer Editor.

Wenn Sie sich bisher für diesen Artikel interessiert haben, stehen die Chancen ziemlich gut, dass Sie Visual Studio verwenden. Ich selbst nutze es seit vielen Jahren und habe bei jeder neuen Version festgestellt, dass man sich selbst einen großen Gefallen tut, wenn man sich mit allen neuen Features beschäftigt. Natürlich ist es bequem, einfach nur mit dem weiterzumachen, was man schon kennt. Empfehlen kann ich dieses jedoch nicht. Mir gefällt es gut, dass Visual Studio aktuelle Technologien wie HTML5, CSS3 und ECMAScript5 umfasst und gleichzeitig Möglichkeiten zum Aktualisieren zur Verfügung stellt, da sich Standards auch mal ändern.