Web-Projekte in Visual Studio 2013 Preview

VS 2013 Preview

In meinem vorhergehenden Artikel bin ich erstmal grob über die Preview-Installation von Visual Studio 2013 Preview gegangen. Nach einigen interenen Studien und einem zweiten Blick auf die neuen Features sind mir vor allem Änderungen im Bereich der Web-Programmierung aufgefallen. Datum gehts nun in diesem Beitrag. Ich werde darüber hinaus auch auf einige kleine Erweiterungen eingehen, die mir am VS selsbt aufgefallen sind.

Dieser Artikel ist die Fortsetzung des Artikels Visual Studio 2013 Ultimate Preview.

Vorbemerkungen

Gerade im Bereich Web ist scheinbar so vieles am Kommen, dass man gleichzeitig begeistert und ernüchtert sein kann. Begeistert, weil das Schreiben von Webseiten immer besser durchdacht und immer komfortabler wird und weil endlich auch die nachgelagerten Prozessen, wie Deployment und Testing immer mehr in den Fokus rücken. Ernüchtert, weil man nicht genau sagen kann, was das für andere Technologien, wie WPF, WCF usw. eigentlich bedeutet. Gerade WCF wird immer stiefmütterlicher behandelt und scheint an Land zu verlieren.

Trotzdem muss man das Ganze im Auge behalten und zumindest versuchen, am Ball zu sein. Man muss nicht alles einsetzen, aber sehen sollte man es schon mal. Hier nun also weitere Neuerungen aus Visual Studio und Web Essentials aus meiner Sicht.

Webcast

Allgemeines

Für Schmunzeln dürfte die Ankündigung sorgen, dass FPSE (Front Page Server Extensions) und der Cassini-Webserver (das Ding, das bei F5 startet, wenn man nicht auf IIS Express umstellt) ab VS 2013 nicht mehr unterstützt werden. Da kann man eigentlich nur Amen sagen!

Richtig cooles findet man ja oft erst beim zweiten Blick. In Ergänzung zu meinem ersten Artikel daher hier mal 2 nette Features (sorry für die Bild-Indizes mit 0., aber ich hätte sonst alle folgenden umbenennen müssen ;-):

Super-Scrollbar

Abb. 0.1: Scroll-Bar-Options
Abb. 0.1: Scroll-Bar-Options

Klickt man auf diese Option, erscheint der Options-Dialog mit einem neuen Feature:

Abb. 0.2: Neue Option
Abb. 0.2: Neue Option

Klickt man „Use map mode…“ an, verwandelt sich die schnöde vertikale Scrollbar in etwas Unerwartetes:

Abb. 0.3: Scrollbar Map-Mode
Abb. 0.3: Scrollbar Map-Mode

Ziemlich cool.

Eigentlich noch viel besser, aber schwerer zu zeigen und daher im Screencast gezeigt, sind die neuen Shortcuts zur Navigation im Code. Mein neuer Liebling: Alt + Pfeil runter bzw. Alt + Pfeil hoch. Dieser Shortcut bewegt die jeweils aktuelle Zeile oder auch einen selektierten Block zeilenweise durch den Quelltext. Cool. Im HTML-Editor finde ich Alt + 1 und Alt + 2 sehr cool. Hiermit kann man die aktuelle Selektion tag-weise erweitern bzw. verkleinern. Kann man hier nur schwer zeigen, daher bitte im Cast ansehen!

Bei Auswahl von Strg + , kommt ja bekanntlich ein Suchfeld, das nun noch umfänglicher sucht. Hat man einen beliebigen Text im HTML-Editor ausgewählt und wählt dann Strg + Shift + w, dann wird automatisch ein <p>-Tag drumrumgelegt und ich kann dann das Tag durch etwas anderes ersetzen.

Web Essentials hat jetzt eine Art Schnell-Schreib-Sprache. Gibt man z.B. „div>p*5>lorem16“ gefolgt von Tab ein, erscheint:

Abb. 0.4: Code-Scripting in Web Essentials
Abb. 0.4: Code-Scripting in Web Essentials

Ich nenne es einfach mal „Code Scripting“, ohne zu wissen, wie es wirklich heißt.

Edit: Dank „srasch“ weiß ich nun, dass es Zen Coding heißt! Danke!

HTML-Editoren

Viele der Aussagen, die ich treffen werde, gelten rückwirkend auch für VS 2012, weil z.B. die WebEssentials (die jetzt OpenSource auf github sind) auch in der 2012-er Version Updates bekommen.

Den Aussagen von MS zufolge wurde der HTML-Editor in Visual Studio komplett neu geschrieben. Es soll wohl so gewesen sein, dass mit der bisherigen Codebase einige gewünschte Erweiterungen nicht mehr eingebaut werden konnten. Warum auch immer, jedenfalls knallt uns VS 2013 Preview in Verbindung mit Web Essentials 2013 Preview so einige Neuerungen rein. Ich gehe im Folgenden also davon aus, dass man die Essentials von der Gallery nach-installiert (Nuget). Außerdem betrachte ich nicht nur den HTML-Editor, sondern auch den für JavaScript und CSS in einem Rutsch.

JavaScript

Ab sofort analyisert der JS-Editor die jeweils geladene Datei und bietet die altbekannten Member-Dropdowns oben:

Abb. 1: Member-Dropdowns
Abb. 1: Member-Dropdowns

Eine kleine Einschränkung hat das ganze allerdings: Es funktioniert nur in reinen *.JS-Dateien. In gemischten Dateien, wie z.B. *.cshtml wo Razor, HTML und JS gemeinsam vorkommen, gehts nicht.

Da VS2013 bereits gegen den IE 11 validiert, ist nun auch ECMA-Script Version 6 mit an Bord, was vor allem bei IntelliSense zu mehr Erkenntnis beiträgt. Überhaupt ist IntelliSense um einiges mehr Intelli, als vorher.

CSS

Das sieht man sehr schön an einem Beispiel, dass gerade CSS-Neulinge oder Leute, die zwischen WPF und HTML wechseln müssen, oft nervt: Das Box-Model und seine gekürzte Schreibweise. Nehmen wir z.B. die Definition eines padding:

Abb. 2: IntelliSense in CSS
Abb. 2: IntelliSense in CSS

Wie man erkennen kann, werden nun auch die möglichen Überladungen der shortcut-Schreibweisen mit angezeigt.

Eine bereits überfällige Änderung ist die, dass man nun Bilder endlich wirklich überall hin Draggen kann. Mach man dies im CSS-Bereich entsteht nun nicht mehr ein sinnloser Text mit dem absolten Pfad der Datei, sondern:

Abb. 3: Drag&Drop und Vorschau
Abb. 3: Drag&Drop und Vorschau

Es entsteht also sofort ein background-image-Element und man hat endlich auch direkt im Code eine Preview. Richtig cool sind Web-Essential-Erweiterungen an dieser Stelle. Ab sofort stehen in den Web-Editoren Smarttags bereit, um uns das Leben einfacher zu machen. Auf einem Bild erscheint z.B.:

Abb. 4: Smarttag auf Bild
Abb. 4: Smarttag auf Bild

Wählt man es aus, wird das Bild tatsächlich als eine Folge von Base64 kodierten Elementen dargestellt, sodass es physisch nicht mehr vorgehalten werden muss. Das geht sogar auf URL-referenzierten Elementen von anderen Webseiten, weil die Medien im Hintergrund geladen und dann überarbeitet werden.

VS2013 kann nun von Haus aus mit *.less-Dateien umgehen und man kann sich in den Essentials nun sehr sicher darüber informieren, ob eine CSS-Eigenschaft vielleicht sogar von noch gar keinem Browser unterstützt wird.

HTML

Nun aber zum Kern der Editoren, dem für HTML. Ein erste coole Neuerung ist Code Completion für &-Zeichen. Hier mal ein Beispiel:

Abb. 5: Code Completion
Abb. 5: Code Completion

IntelliSense zeigt neben dem HTML-Code auch das Ergebnis (in Klammern) und Zusatzhinweise zum Zeichen an.

IntelliSense wurde überhaupt komplett überarbeitet. Anstatt eine riesen Liste aller möglichen Elemente zu zeigen, werden diese nun gruppiert. Hier ein Beispiel:

Abb. 6: Gruppiertes IntelliSense
Abb. 6: Gruppiertes IntelliSense

Die beiden Elemente „aria-“ und „data-“ sind quasi eingeklappt und werden erst aktiv, wenn man z.B. „aria-“ inkl. des Minuszeichens schreibt:

Abb. 7: Aufgeklappte Gruppe
Abb. 7: Aufgeklappte Gruppe

Das ist natürlich ziemlich clever und räumt das IntelliSense-Menu kräftig auf. Sehr gut!

Bei Einsatz der data-Attribute von HTML5 geht IntelliSense nun ein wenig mehr Intelli vor. Hat man auf einem Element bereits ein data-x mit dem Wert „hello“ definiert und gibt man nun auf einem weiteren Element „data-“ ein, schlägt IntelliSense nun aus einer Liste von bereits verwendeten data-Elementen vor:

Abb. 8: Vorschlag bereits verwendeter Elemente
Abb. 8: Vorschlag bereits verwendeter Elemente

Noch besser ist der automatische Vorschlag der bereits verwendeten Werte, was die data-Attribute nun enumerations-artig macht:

Abb. 9: Wertevorschlag
Abb. 9: Wertevorschlag

Die bereits im CSS-Bereich erwähnten Smarttags sind im HTML-Bereich nun auch an allen Stellen zu finden. Hier mal ein Beispiel für das img-Tag:

Abb. 10: Smarttag auf img
Abb. 10: Smarttag auf img

Wichitg hier zunächst: das src-Attribut hat selbst immer noch ein Smarttag (Base64). Auf dem img-Smarttag kann man sich nun sehr einfach Breite und Höhe ausgeben lassen, um schneller zu validem HTML zu kommen. Die 2. Option macht aus dem einfachen img sowas:

<figure>
    <img src="~/img/backgroundDefault.jpg" width="2644" height="1653" />
    <figcaption>Description</figcaption>
</figure>

Richtig cool finde ich die vielen Neuerungen im Bereich Navigation und Shortcuts für die ich allerdings auf den Webcast verweisen möchte. Es gibt noch Dutzende Neuerungen z.B. im Bereich Integration von sozialen Netzwerken mit Hilfe von IntelliSense, IntelliSense im Bereich der rewrite-Section in der web.config, CSS-regions („//#region“) uvm.

Hier noch einmal der Hinweis, dass das meiste dieser Neuerungen auch in VS2012 zu haben ist.

Browser Link

Browser-Link zu beschreiben, ist nicht ganz so einfach, so mächtig ist es. Vielleicht beginnt man einfach damit, zu beschreiben, welche Lücke es füllt. Startet man bis VS 2012 eine Web-Applikation auf einer Developer-Maschine, so passieren 3 Dinge. Zunächst wird der Host-Prozess gestartet (z.B. IIS Express), dann verbindet sich der Debugger mit diesem und schiebt den Code zu und letztlich wird auch noch der eingestellte Browser mit der entsprechenden Startpage gestartet.

Ab diesem Moment laufen die Ebenen Visual Studio und Browser allerdings komplett autark. Mit anderen Worten: Sie wissen nicht voneinander. Das ist per se erstmal nicht so schlimm, kann aber insofern lästig werden, weil Änderungen am Quellcode z.B. viele Einzelsteps erfordern oder auch, weil bestimmte Dinge einfach nicht funktionieren.

Basierend auf SignalR und WebSockets hatte nun des WebTools-Team die eingentlich naheliegende Idee, einfach ein wenig JavaScript-Code in die Seiten einzubetten und Visual Studio als WebSocket-Empfänger und Relay zu nutzen. Damit kommt nun eine ganze Reihe von Möglichkeiten ins Spiel.

Mads Kristensen, der Macher hinter den Web Essentials, hat in seiner Präsentation auf der build sehr schön gezeigt, was mit der neuen Technik möglich ist. VS 2013 erlaubt es nun z.B., alle in einer Debug-Session geöffneten Browser mit einem Klick zu aktualiseren. Gerade auf Multimonitor-Systemen wird somit der Page-Inspector unnötig (schade, hatte mich gerade an ihn gewöhnt).

Mads ist in seinem Beitrag sehr euphorisch betreffend die neuen Möglichkeiten und ich glaube auch, dass sich hier sehr coole Features verbergen können. Auf der anderen Seite bin ich eher skeptisch, da ich weiß, wie schwierig es bereits ist, eine einigermaßen stabile Konfiguration zwischen seinem Arbeitsplatzrechner und dem eigenen Notebook aufrecht zu erhalten. Wenn man jetzt auch noch Browser-Plugins usw. auf dem neuesten Stand halten müsste, wirds extrem schwierig (zumindest für Leute, die auch mal an anderen Arbeitsplätzen sitzen müssen). Trotzdem extrem cool!

ASP.NET, MVC 5 und WebAPI „wachsen“ zusammen

Eins meiner Lieblingsthema ist und bleibt die Web-Entwicklung mit MVC. Scott Hanselman wurde nicht müde, zu betonen, dass WebForms und MVC beide gleich valide sind und dass das WebTools-Team beide gleichrangig behandelt. Das macht sich vor allem bei File-New-Projekt extrem bemerkbar:

Abb. 11: FileNewProject
Abb. 11: FileNewProject

Wie Sie sehen, sehen Sie nichts!, könnte man sagen. Natürlich stimmt das nicht ganz, aber im Vergleich zur 2012er-Version ist die Auswahl auf ein Element geschrumpft. Die Lösung dieses Geheimnisses ist recht einfach. Der MVC-Projekt-Dialog hat jetzt die gesamten Einstellungen erhalten:

Abb. 12: ASP.NET-Projekt-Dialog
Abb. 12: ASP.NET-Projekt-Dialog

Letztlich kann diese Entscheidung nicht überraschen, denn viele Web-Entwickler haben schon geraume Zeit über die immer weiter wachsenden Möglichkeiten in diesem Bereich gemurrt. Nicht wegen des Anstiegs der Möglichkeiten, sondern wegen a) der strikten Trennung der verschiedenen Ansätze und b) der verwirrenden Benamungen und Darstellungen der Technologien. Das WebTools-Team möchte damit Schluss machen und bringt den neuen Dialog.

Interessant ist die Option, nun wirklich ein Projekt mit allen 3 Checkboxen für „Web Forms“, „MVC“ und „Web-API“ angehakt zu erstellen. Je nach Auswahl im oberen Bereich ist immer eine der Boxen grau hinterlegt und nicht abwählbar. MS möchte damit klarstellen, dass man neue Web-Projekte mit einem Standard-Pattern erstellt, später aber alles darin hinzufügen kann, was man braucht. Das funktioniert tatsächlich ziemlich gut (später mehr). Das führt aber auch gleich zu heftiger Kritik meinerseits. Was hier vor allem forciert wird, ist m.E. das Vergessen der Schichten-Trennung. Ich fand es eigentlich ganz gut, dass man die Technologien erstmal verstehen musste, bevor man sie einsetzte. Dass Microsoft hier Rücksicht auf die Leute nimmt, die verwirrt waren, ist nicht gerade Hilfe zur Selbsthilfe. Der Herr des SOA möge uns schützen vor den Website-Mutanten, die da am Horizont auftauchen!

Das Thema Authentication war so schlecht verständlich (und umgesetzt!), dass es einen eigenen Button erhalten hat und das komplette System dahinter einen Refresh bekam.

Die Änderungen im Projekt sind dann fast erschlagend und daher werde ich erst einmal eine Weile damit arbeiten, bevor ich dazu poste. Ein paar Highlights bereits hier.

Sehr nett ist das neue Kontext-Menu, wenn man mit der rechten Maustaste auf einen Ordner im Projekt klickt:

Abb. 13: Konextmenu auf Ordner
Abb. 13: Konextmenu auf Ordner

Endlich muss ich nicht mehr „Java“ schreiben, wenn ich eine JS-Datei hinzufügen möchte.

Leider hat es Zurb Foundation nicht zu MS geschafft, wozu ich den Jungs von zurb mein Beileid aussprechen möchte. Dafür wurde Bootstrap von Twitter gewählt, das nun bereits als Standard mitkommt:

Abb. 14: Bootstrap-Integration
Abb. 14: Bootstrap-Integration

Es greift die gleichen Ideen auf und erleichtert das Einbinden von Reponsive-Designs. Damit geht eigentlich zwangsläufig auch ein neues Standard-Layout einher:

Abb. 15: Neues MVC-Standard-Layout
Abb. 15: Neues MVC-Standard-Layout

Scott hat in seinem Beitrag gezeigt (00:23:56), wie man Bootstrap und Bootswatch gemeinsam nutzen kann, um schnell zwischen Themes zu wechseln.

Das neue Scaffolding (ohne Console) erlaubt nun das Einbinden von neuen Scaffold-Strategien und zahlt ebenfalls auf die Vermischung von MVC, WebForms und WebAPI in Projekten ein. Hat man nur eine Ziel-Strategie beim Anlegen des Projektes gewählt, ist der Scaffold-Dialog sehr übersichtlich. Mit weiteren Templates kommen auch mehr Scaffold-Möglichkeiten (z.B. das automatische Erzeugen von API-Controllern).

EF 6

Das Entity Framework hat einige Überarbeitungen erfahren. Der größte Teil scheint in die Verbesserung von code first geflossen zu sein, weshalb ich es kategorisch ablehne, hier mehr zu schreiben, als den Versuch, über die nun verfügbare automatische Generierung von stored procedures für CRUD Legitimität für diese in meinen Augen degenrierten Vorgehensweise zu schaffen.

Was aber erfreulich ist, ist die Unterstützung asynchroner Methoden durch die Bank weg. In System.Data.Entity ab Version 6 sind sie alle drin:

Abb. 16: Async
Abb. 16: Async

Fazit

Microsoft legt die Latte für Entwicklungsumgebungen definitiv wieder ein Stück höher. Ich möchte den neuen Kram möglichst bald einsetzen und da vieles in Web Essentials enthalten ist, kann ich das auch vor dem Release-Termin. Immer mehr OpenSource ist auch nicht gerade schlecht zu nennen. Trotzdem bleibt ein fader Beigeschmack, weil mir die klassischen Entwicklerthemen zu kurz kommen. „WCF“ schafft es nicht mal mehr in die Tag-List der kompletten build 2013! Ich bin abwartend und gespannt zugleich. Jedenfalls kommt eine Menge Lernaufwand auf uns alle zu!

3 Antworten auf „Web-Projekte in Visual Studio 2013 Preview“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.