Alles Web!

Web Development mit Visual Studio und Web Essentials
Kommentare

Bis vor Kurzem hatte Visual Studio nicht unbedingt den Ruf, das ideale Tool zur Entwicklung von Webanwendungen abseits von ASP.NET zu sein. Zu stiefmütterlich war dafür die eingebaute Unterstützung für Standardwebtechnologien wie CSS oder JavaScript implementiert. Support für aktuelle Dokumentformate oder Frameworks wie JSON, Bootstrap oder Markdown war größtenteils gar nicht vorgesehen.

Mit Visual Studio 2012 kehrte jedoch frischer Wind in die Webunterstützung des Produkts ein, und die Editoren für HTML und CSS erfuhren eine Frischzellenkur. Zeitgleich wurde mit den Web Essentials ein Add-in geschaffen, das es Visual Studio ermöglichte, mit der schnelllebigen und agilen Welt der Webtechnologien Schritt zu halten.

Wurde in den letzten Wochen und Monaten von Webentwicklung im Umfeld von Visual Studio und .NET gesprochen, so war zumeist die Rede von ASP.NET vNext und den revolutionären Neuerungen, die hier auf uns warten. Unter anderem macht ASP.NET in der neuen Version einen großen Schritt in Richtung Plattformunabhängigkeit, es erlaubt die Webentwicklung auf anderen Plattformen und somit auch mit anderen Entwicklungsumgebungen und Editoren. Folglich wäre man nun auch als Windows-User nicht mehr so stark an Visual Studio zur Entwicklung von ASP.NET-Applikationen gebunden und alternative Editoren wie z. B. Sublime Text stünden zur Verfügung. Die entscheidende Frage ist jedoch, ob für Nutzer von Windows und Visual Studio überhaupt Anlass besteht, auf alternative Produkte zurückzugreifen, wenn es um die Webentwicklung geht. Wenn man sich vor Augen führt, mit welchen Riesenschritten die Unterstützung verschiedenster Webstandards, -frameworks und -technologien in den letzten Versionen von Visual Studio vorangetrieben wurde, kann die Antwort hierauf nur „nein“ lauten. Im Unterschied zu früheren Versionen bietet Visual Studio heute Projektvorlagen, Syntax Highlighting, IntelliSense und ausgereifte Werkzeugunterstützung für brandaktuelle Webframeworks und -technologien an. Einen Riesenanteil an dieser Entwicklung hat das hauseigene Add-in Visual Studio Web Essentials, das Microsoft als Vehikel zur zeitnahen Unterstützung aktueller Technologien im Webumfeld dient und unabhängig vom regulären Visual-Studio-Releasezyklus aktualisiert und weiterentwickelt werden kann.

Visual Studio Web Essentials

Das Web und seine Hypes in Bezug auf Frameworks, Programmiersprachen und Technologien sind bekanntermaßen äußert schnelllebig. Gefühlt täglich taucht ein neues JavaScript-Framework auf, das den einen oder anderen Aspekt der Applikationsentwicklung im Web vereinfachen und verbessern soll. Aber auch bereits etablierte Technologien wie jQuery oder Bootstrap werden kontinuierlich weiterentwickelt und sind somit einem ständigen Wandel unterworfen. Entwicklungswerkzeuge, die solche Technologien auf breiter Ebene unterstützen möchten, stehen hier häufig vor dem Problem, mit solch kurzfristigen Releasezyklen nicht Schritt halten zu können. Microsoft trägt dieser Entwicklung mittlerweile sehr gut Rechnung und ist mit Visual Studio zu einem agilen Releasemodell mit vierteljährlichen Service Packs übergegangen. Zusätzlich wurde mit den Visual Studio Web Essentials ein Instrument geschaffen, das kurzfristig auf neue Technologietrends reagieren kann. Darüber hinaus hat sich das Web-Essentials-Add-in zu einem „Testgelände“ für Visual Studio selbst entwickelt, auf dem der Support für neue Webtechnologien und -frameworks zuerst ausprobiert und den Benutzern vorgestellt werden kann. Werden diese neuen Ideen und Features angenommen und ist deren Entwicklungsstand weit genug fortgeschritten, wandern sie häufig in das Hauptprodukt und werden fixer Bestandteil von Visual Studio. Aus diesem Grund verwischen auch die Grenzen zwischen Visual Studio und dem Web-Essentials-Add-in zunehmend, da Funktionalität, die „eben noch“ Teil der Web Essentials war, im nächsten Service Pack schon in Visual Studio selbst integriert sein kann. Betreibt man also Webentwicklung mit Visual Studio, führt mittlerweile praktisch kein Weg mehr an den Web Essentials vorbei. Erfreulicherweise sieht man das bei Microsoft genauso und erlaubt die Installation und Verwendung der Web Essentials auch in der freien „Express“-Version von Visual Studio, die ansonsten keine Add-ins zulässt.

Besonders Mutige können die Visual Studio Web Essentials auch als „Nightly-Build“-Variante abonnieren, um auf diesem Weg wirklich den aktuellsten Entwicklungsstand in den Händen zu halten. Natürlich ist die Verwendung dieses taufrischen Entwicklungsstands mit einem etwas größeren Risiko verbunden, allerdings kann auch jederzeit auf den offiziellen Stand zurückgewechselt werden und umgekehrt. Wie dieser spezielle „Nightly Build“ Add-in Feed in Visual Studio eingerichtet werden kann, beschreibt Web-Essentials-Schöpfer Mads Kristensen in einem seiner Blog-Posts. Der nun folgende Überblick über Features und Funktionalitäten von Visual Studio und den Web Essentials erhebt keinen Anspruch auf Vollständigkeit und ist lediglich ein Auszug dessen, was aus Sicht des Autors besonders hilfreich und nützlich bei der Entwicklung von Webanwendungen ist. Auf die Frage, ob ein Feature Teil der Web Essentials oder von Visual Studio selbst ist, wird nicht eingegangen, da – wie schon erwähnt – die Grenze zwischen diesen Werkzeugen zusehends verwischt und zum Zeitpunkt des Erscheinens dieses Artikels völlig anders als bei dessen Verfassen sein kann.

Zen Coding

Bei Zen Coding handelt es sich grundsätzlich um die Idee, strukturierte Dokumente wie HTML oder XML möglichst effizient bearbeiten und erstellen zu können. HTML-Dokumente weisen eine aufwändige und redundante Syntax auf und das Erstellen komplexerer Strukturen wie Tabellen oder Aufzählungen ist oft mühsame Tipparbeit. Zen Coding bietet daher Konstrukte an, um diese unnötige Tipparbeit zu eliminieren und durch kurze und prägnante Ausdrücke zu ersetzen. So wird zum Beispiel der Ausdruck div#main>h1+ul>li*10>lorem4 in einer HTML-Seite nach Drücken der Tabulatortaste in das HTML-Fragment aus Listing 1 überführt. Auf den ersten Blick mag der Zen-Coding-Ausdruck komplex anmuten, doch analysiert man ihn Schritt für Schritt, offenbart sich seine Einfachheit zusehends.

Als erster Schritt soll ein div-Element mit der ID main erstellt werden. Dafür sorgt der Teilausdruck div#main. Anschließend folgt das Größer-als-Zeichen (>), das eine Hierarchiebeziehung beschreibt. Alle nachfolgenden Elemente werden nun Kinder des gerade spezifizierten div-Elements. Der nächste Audruck h1 beschreibt eben dieses HTML-Element gefolgt von einem ul-Element auf derselben Ebene, was durch das Plus-Zeichen (+) symbolisiert wird. Nun folgt wieder das Größer-als-Zeichen, und eine neue Hierarchieebene für die Elemente der Liste (li) wird angelegt. Hier bewirkt das Multiplikator-Zeichen (*) gefolgt von der Zahl 10, dass ebenso viele li-Elemente erzeugt werden. Abschließend sorgt der Teilausdruck lorem4 noch dafür, dass ein entsprechender „Lorem-ipsum“-Blindtext innerhalb der Listeneinträge generiert wird. Der Zusatz 4 bewirkt in diesem Fall, dass jeweils nur vier Wörter pro Eintrag aus dem Blindtext verwendet werden. Ohne diesen Zusatz enthielte jeder Listeneintrag jeweils den vollständigen Blindtext.

  • Amet, consectetur adipiscing elit.
  • Fusce vel sapien elit.
  • In malesuada semper mi.
  • Id sollicitudin urna fermentum.
  • Ut fusce varius nisl.
  • Ac ipsum gravida vel.
  • Pretium tellus tincidunt integer.
  • Eu augue augue nunc.
  • Elit dolor, luctus placerat.
  • Scelerisque euismod, iaculis eu.

Man sieht also bereits an diesem einfachen Beispiel, dass Zen Coding ein eleganter und effizienter Weg ist, ein Grundgerüst bzw. einen ersten Entwurf einer Webseite zu erstellen. Die wichtigsten Syntaxregeln sind intuitiv und leicht erlernbar und selbstverständlich stehen hierfür auch umfangreiche „Spickzettel“ wie beispielsweise hier zur Verfügung.

IntelliSense 2.0

Im Bereich von IntelliSense und der Dokumentvalidierung für CSS-Dateien konnte Visual Studio in letzter Zeit dramatische Verbesserungen für sich verbuchen. Beim Bearbeiten von CSS wird es einem als Entwickler nun nahezu unmöglich gemacht, Fehler einzuschleusen bzw. nicht standardkonformes CSS zu erzeugen. Beginnend mit Visualisierungen von color-Eigenschaften über SmartTags zur interaktiven Auswahl eben jener Farben (Abb. 1) bis hin zu Tooltips, die für spezifische CSS-Attribute die Versionen der unterstützten Browser anzeigen (Abb. 2), wurde an alles gedacht.

Abb. 1: IntelliSense und SmartTags unterstützen bei der Farbauswahl in CSS-Dateien

Abb. 2: „Rich Tooltips“ informieren über Browserunterstützung von CSS-Attributen

Verwendet man webbrowserspezifische CSS-Erweiterungen (-webkit, -moz, …), wird man ebenfalls daran erinnert, auch die Standardeigenschaft (sofern vorhanden) zu spezifizieren und umgekehrt. Auf diese Weise passiert es weniger schnell, dass die eigene Webseite in manchen Webbrowsern „funktioniert“ und in andern nicht. Selbstverständlich ist es wichtig, die oben angeführten Basisanwendungsfälle abgedeckt zu haben. Richtig interessant wird es jedoch erst, wenn komplexe Applikationsframeworks wie AngularJS oder Bootstrap im Spiel sind und IntelliSense immer noch nützliche und zeitsparende Hilfestellungen bieten kann. Genau diese Szenarien werden nun durch die Visual Studio Web Essentials ermöglicht. Kombiniert man beispielsweise unverträgliche CSS-Klassen aus dem Bootstrap-Framework, erhält man unmittelbar eine Warnung wie in Abbildung 3. Auf diese Weise spart man wertvolle Zeit, die bisher mit dem Durchforsten von CSS-Eigenschaften in den Webbrowser-Entwicklungswerkzeugen zugebracht wurde.

Abb. 3: IntelliSense informiert über frameworkspezifische Fehler (hier Bootstrap)

Ein weiteres interessantes Feature ist die eingebaute Unterstützung der Sprache Markdown. Diese einfach strukturierte Auszeichnungssprache erfreut sich speziell bei Bloggern in letzter Zeit großer Beliebtheit und bietet eine willkommene Alternative zu reinem HTML. Die Syntax ist wesentlich präziser und für Menschen einfacher lesbar als HTML, sie erlaubt aber dennoch einfache Auszeichnungselemente. Markdown wird im Regelfall in HTML übersetzt, und Visual Studio bietet hierfür eine zweigeteilte Ansicht, in der links der Markdown-Text editiert werden kann und rechts das fertig gerenderte HTML-Dokument angezeigt wird (Abb. 4).

Abb. 4: Markdown-Unterstützung in Visual Studio

Weitere IntelliSense-Unterstützung bieten die Visual Studio Web Essentials unter anderem für Sprachen und Dokumentformate wie JSON, TypeScript, CoffeScript, LESS oder Sass. Es würde jedoch den Rahmen dieses Artikels deutlich sprengen, auch auf diese Features noch einzeln einzugehen und es sei hiermit auf die Web-Essentials-Dokumentation verwiesen.

Aufmacherbild: Magnifying optical glass with Gears icon and Web Development word on digital background, 3d render von Shutterstock / Urheberrecht: Maksim Kabakou

[ header = Seite 2: Outputoptimierung ]

Outputoptimierung

Zur Optimierung der Lade- und Darstellungszeiten einer Website gilt die goldene Regel: „Je kleiner die Anzahl der Anfragen, die zum Server geschickt werden und je geringer die Menge der Daten, die übertragen werden müssen, desto besser“. Möchte man diese Regel für die eigene Website einhalten, ergeben sich daraus grob zwei Kategorien von Optimierungsmöglichkeiten Minification: Diese Art von Optimierung basiert auf der Idee, zum Client geschickte Dateien auf das notwendigste Minimum zu reduzieren. Typischerweise werden hierfür Leerzeichen aller Art entfernt, da diese für die Darstellung und Ausführung einer Website irrelevant sind. HTML-, CSS- und JavaScript-Dateien lassen sich durch einen Minification-Schritt oft drastisch in ihrer Größe reduzieren. In JavaScript-Dateien lassen sich zusätzlich Variablennamen durch kurze, oft nur aus einem Buchstaben bestehenden Namen ersetzen, wodurch eine weitere Reduktion der Dateigröße erreicht wird. In den Visual Studio Web Essentials kann diese Optimierung über das Kontextmenü der entsprechenden HTML-, CSS- oder JavaScript-Dateien aktiviert werden (Abb. 5). Bundling: Hier zielt man darauf ab, die Anzahl der Anfragen zum Webserver möglichst gering zu halten. Oft inkludiert eine einzelne Webseite eine Vielzahl von verschiedenen CSS- oder JavaScript-Dateien. Jede einzelne dieser Dateien verursacht eine separate Anfrage zum Webserver, was sich insgesamt negativ auf das Ladezeitverhalten der Webseite auswirkt. Die Idee hinter der Bundling-Optimierung ist nun, diese separaten CSS- und JavaScript-Dateien zu jeweils einer einzigen Ressource zu bündeln. Auf diesem Weg ist es möglich, mit nur einer Anfrage sämtliches CSS bzw. JavaScript für eine Webseite zu laden. Die Visual Studio Web Essentials bieten ausgezeichnete Unterstützung zur Erstellung solcher Bundles. Dazu müssen lediglich die gewünschten Dateien selektiert, und im Web-Essentials-Kontextmenü muss der Punkt CREATE CSS BUNDLE FILE ausgewählt werden. Daraufhin wird eine neue Datei mit der Endung bundle angelegt, die die Metadaten dieses Bundles enthält. Listing 2 zeigt ein Beispiel einer solchen Datei, in der ausgewählte CSS-Dateien aus dem jQueryUI-Framework zusammengefasst werden. Praktischerweise lässt sich in dieser Datei auch gleich einstellen (Setting minify), ob auf das Ergebnis des Bundle-Vorgangs zusätzlich noch die vorher besprochene Minification-Optimierung angewendet werden soll. Auf diese Art und Weise lassen sich beide Optimierungsschritte hervorragend kombinieren und die Verwendung von Bundling und Minification sollte somit ein Muss für jede Webanwendung sein.

Abb. 5: Das Web-Essentials-Kontextmenü bietet zahlreiche Optionen zur Outputoptimierung


http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd">
  
    
    true
    
    false
    
    true
    
    
  
  
  
    /Content/themes/base/jquery.ui.accordion.css
    /Content/themes/base/jquery.ui.autocomplete.css
    /Content/themes/base/jquery.ui.button.css
    /Content/themes/base/jquery.ui.datepicker.css
    /Content/themes/base/jquery-ui.css
  

Zusätzlich zu Bundling und Minification unterstützten die Visual Studio Web Essentials noch weitere Optimierungsverfahren. Vor allem Bilder sind häufig der Grund für lange Ladezeiten und eine negative User Experience bei Webseiten. Als einfachste Gegenmaßnahme bietet das Web-Essentials-Kontextmenü hierfür den Eintrag OPTIMIZE IMAGE, der dafür sorgt, dass Bilder optimal komprimiert und von unnötigen Metadaten befreit werden. Auch hier ist die Größenreduktion oft überraschend. Ein weiterer Trick im Zusammenhang mit CSS-Dateien und Bildern sind Data-URIs. Hierbei handelt es sich um die Möglichkeit, in CSS-Dateien referenzierte Bilder durch deren Repräsentation als Base64-enkodierte Zeichenketten zu ersetzen. Dies ist allerdings nur bis zu einem gewissen Ausmaß sinnvoll, da die Base64-Kodierung eines Bilds ineffizienter ist als ihr binäres Pendant. Referenziert eine CSS-Datei jedoch viele kleine Bilder, macht sich diese Optimierung durchaus bezahlt, da damit erneut die Gesamtanzahl der Serveranfragen drastisch reduziert werden kann. Praktischerweise weisen die Visual Studio Web Essentials aktiv auf diese Möglichkeit hin und nehmen dem Entwickler somit die Entscheidung ab (Abb. 6).

Abb. 6: Web Essentials verweisen auf die Möglichkeit zur Verwendung von Data-URIs

Eine andere Möglichkeit, die Anzahl von Serveranfragen für Bilddateien zu reduzieren, ist die Verwendung von Sprites. Dabei werden mehrere Einzelbilder zu einer Grafik zusammengefasst, in der diese Bilder untereinander oder nebeneinander aufgereiht sind. Mit der CSS-Eigenschaft background-position wird anschließend der sichtbare Ausschnitt in der Sprite-Grafik verschoben, um nur ein einzelnes Bild dieser Liste anzuzeigen (Abbildung 7 veranschaulicht dieses Prinzip). Grundsätzlich handelt es sich bei Sprite-Grafiken um eine bereits etablierte und sehr effiziente Möglichkeit, die Serveranfragen einer Seite zu reduzieren und die Ladezeit somit zu verkürzen. Der große Nachteil, den Sprite-Grafiken bisher mit sich brachten, ist jedoch ihr hoher Wartungsaufwand. Werden die Einzelbilder geändert oder ersetzt, hat das zwangsweise auch eine Neugenerierung der Sprite-Grafik zur Folge. Diese Tatsache sowie die Notwendigkeit, die background-position-Attribute händisch zu berechnen und gegebenenfalls aktualisieren zu müssen, hat schon manchen Webentwickler vor der Verwendung von Sprites zurückschrecken lassen. Dankenswerterweise bieten Visual Studio Web Essentials auch hier Abhilfe und stellen einen ähnlichen Mechanismus wie beim vorher besprochenen Bundling zur Verfügung. Um eine Sprite-Grafik zu erstellen, reicht es, die gewünschten Einzelbilder zu selektieren und im Web-Essentials-Kontextmenü den Punkt CREATE IMAGE SPRITE… auszuwählen. Daraufhin wird eine Datei mit der Endung sprite erzeugt, die wiederum alle nötigen Metadaten zum Generieren der Sprite-Grafik enthält. Listing 3 zeigt ein Beispiel, wie eine Sprite-Grafik für die Social-Media-Icons aus Abbildung 7 aussehen könnte. Zusätzlich zu den verwendeten Einzelbildern können hier auch Eigenschaften wie die Optimierung oder das gewünschte Bildformat der Sprite-Grafik eingestellt werden. Außerdem wird auch gleich eine passende CSS-Datei erzeugt, die die notwendigen CSS-Klassen zur Verwendung der Einzelbilder bereitstellt (Listing 4). Ändern sich nun die Einzelbilder dieser Sprite-Grafik, wird diese automatisch aktualisiert und neu erstellt, und auch die Positionsangaben in der CSS-Datei werden angepasst. Somit ist die Verwendung von Sprite-Grafiken mithilfe der Visual Studio Web Essentials um nichts komplexer als die Verwendung einzelner Bilder.

Abb. 7: In Sprite-Grafiken wird der sichtbare Bildausschnitt mit CSS-Eigenschaften verschoben


http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd">
  
    
    true
    
    vertical
    
    png
    
    false
    
    true
    
    false
    
    
    
    
    
    
    
    
  
  
  
    /Images/social/Facebook.png
    /Images/social/Flickr.png
    /Images/social/LinkedIn.png
    /Images/social/Twitter Bird.png
    /Images/social/Vimeo.png
    /Images/social/Yelp.png
  
/*
This is an example of how to use the image sprite in your own CSS files
*/
.Images-social-Facebook {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 0;
}
.Images-social-Flickr {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 -48px;
}
.Images-social-LinkedIn {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 -96px;
}
.Images-social-Twitter Bird {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 -144px;
}
.Images-social-Vimeo {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 -192px;
}
.Images-social-Yelp {
  /* You may have to set 'display: block' */
  width: 48px;
  height: 48px;
  background: url('social.png') 0 -240px;
}

[ header = Seite 3: Browser Link ]

Browser Link

Die Browser-Link-Technologie wurde mit Visual Studio 2013 vorgestellt. Sie ist somit noch relativ neu und daher noch nicht im kollektiven Bewusstsein der Webentwicklergemeinde verankert. Dennoch sollte uns das verwundern, da Browser Link eine Lösung für das Problem des fundamentalen Workflowbruchs in der Webentwicklung bietet. Damit ist folgender Ablauf gemeint, den sicherlich jeder Webentwickler schon einmal vollzogen hat:

  1. Das Layout bzw. die Darstellung einer Website wird in Visual Studio (oder einem beliebigen anderen Editor) anhand von CSS-Style-Informationen angepasst.
  2. Anschließend verlässt man die Entwicklungsumgebung, um das Ergebnis im Webbrowser zu begutachten. Hier findet bereits der erste Kontextwechsel statt.
  3. Im Regelfall identifiziert man jetzt den einen oder anderen Darstellungs- oder Schönheitsfehler in der Applikation und begibt sich daran, diesen zu beheben. Am einfachsten lässt sich das oft mit den integrierten Entwicklungswerkzeugen der Webbrowser wie den Internet-Explorer-F12-Tools (Abb. 8) bewerkstelligen.
  4. Hat man im Webbrowser die Darstellung zur vollständigen Zufriedenheit angepasst, müssen die CSS-Einstellungen manuell (zumindest aber mittels Copy and Paste) zurück in die Entwicklungsumgebung und in die entsprechenden CSS-Dateien übertragen werden. Somit ergibt sich der nächste Kontextwechsel, der zudem fehleranfällig ist, da hierbei Informationen vom Webbrowser zurück in die Entwicklungsumgebung transportiert werden müssen.
  5. Wurden schließlich alle Änderungen in die CSS-Dateien übertragen, beginnt der Ablauf von Neuem, da die getätigten Änderungen ja im Webbrowser überprüft und getestet werden müssen…

Abb. 8: Internet-Explorer-F12-Tools

Diese einfachen Schritte verdeutlichen das Problem, das dem „fundamentalen Workflowbruch“ zugrunde liegt: Entwicklungsumgebung und Webbrowser existieren quasi in parallelen Universen und haben jeweils ihre eigene Sicht auf jene Artefakte (HTML-, CSS- und JavaScript-Dateien), an denen wir Entwickler arbeiten. Solange in Visual Studio an HTML- und CSS-Informationen gearbeitet wird, nimmt der Webbrowser keinerlei Notiz davon (selbst wenn die entsprechenden Dateien dort bereits geladen wurden). Erst ein aktives (d. h. vom Benutzer initiiertes) Laden oder Aktualisieren der Seite macht diese Informationen im Webbrowser sichtbar. Umgekehrt ist es für Editoren wie Visual Studio völlig transparent, wenn Benutzer die eingebauten Entwicklungswerkzeuge der Webbrowser verwenden, um Eingriffe im HTML-DOM oder den CSS-Eigenschaften durchzuführen. Sämtliche dieser Änderungen müssen wieder in den eigentlichen Quellcode der Webanwendung eingepflegt werden. Was den Workflowbruch also verursacht, bzw. was hier fehlt, um diese Paralleluniversen zu vereinen, ist ein bidirektionaler Kommunikationskanal zwischen Entwicklungsumgebung und Webbrowser. Eben dieser Kommunikationskanal wurde in Visual Studio 2013 mit der Browser-Link-Technologie verwirklicht. Dabei handelt es sich aber weder um eine proprietäre Microsoft-Internet-Explorer-Technologie noch um eine Lösung mittels wartungsintensiver und oft fehleranfälliger Browser-Plug-ins, sondern um eine offene und zudem leichtgewichtige Lösung mit Standardwebtechnologien. Das bedeutet wiederum, dass man zur Verwendung von Browser Link an keinen bestimmten Webbrowser gebunden ist und diese Technologie auch mit Opera, Firefox und mobilen Geräten (oder einer Kombination daraus, wie wir gleich sehen werden) verwenden kann. Wie kann aber Browser Link nun verwendet werden bzw. wie macht sich dieses neue Feature in Visual Studio 2013 bemerkbar? Zunächst äußert sich das Vorhandensein von Browser Link nur durch eine unscheinbare neue Schaltfläche in der Visual Studio Toolbar, die an das Aktualisieren-Symbol in Webbrowsern erinnert (Abb. 9). Genau dafür lässt sich Browser Link in seiner einfachsten Form ja auch verwenden. Alle Webbrowser nämlich, die mit unserer Visual-Studio-Webanwendung verbunden sind, können hier auf Knopfdruck zum Aktualisieren veranlasst werden, um letzte Änderungen in der Anwendung anzuzeigen. Dabei spielt es keine Rolle, ob die Webbrowser von Visual Studio selbst mit dem Browse-With-Feature gestartet wurden (Abb. 10: Ein relativ unbekanntes Feature, das es erlaubt, mehrere Webbrowser gleichzeitig zu starten), oder ob ein Browser händisch mit der Applikation verbunden wurde: Das Aktualisieren der angezeigten Seite kann nun zentral durch Visual Studio erfolgen, und der erste Kontextwechsel zwischen Entwicklungsumgebung und Webbrowser wurde damit eliminiert.

Abb. 9: Aktualisieren der verbundenen Webbrowser mittels Browser Link

Abb. 10: Mehrere Webbrowser gleichzeitig aus Visual Studio starten

Damit wäre die direkt in Visual Studio eingebaute Funktionalität von Browser Link auch schon erschöpft. In erster Linie handelt es sich bei Browser Link jedoch um ein Framework, das es Entwicklern und Herstellern von Add-ins erlaubt, eigene Funktionalitäten in Visual Studio zu integrieren. Wie das geht, zeigt Microsoft selbst anhand der bereits erwähnten Visual Studio Web Essentials und liefert mit diesen zusätzliche Werkzeuge, um den Kommunikationskanal zwischen Visual Studio und den verbundenen Webbrowsern möglichst effizient zu nutzen.

Hat man das Web-Essentials-Add-in installiert, äußert sich das in einer zusätzlichen Toolbar, die dynamisch dem HTML der Anwendung „beigemischt“ wird (Abb. 11) und die gleich eine ganze Reihe zusätzlicher Funktionalitäten freischaltet:

  • Inspect: Aktiviert man diesen Menüpunkt und platziert man anschließend den Mauszeiger über einem beliebigen DOM-Element auf der Webseite, wird in Visual Studio die entsprechende Datei und die Codezeile geöffnet, die für das Generieren von eben diesem Element verantwortlich war. Speziell bei umfangreichen und komplexen Webanwendungen ist dieses Feature oft äußerst hilfreich.
  • Design: Dieses Feature funktioniert ähnlich wie Inspect, allerdings wird hier der Aspekt der bidirektionalen Kommunikation zwischen Webbrowser und Visual Studio noch effizienter genutzt und verdeutlicht. Dieser Modus erlaubt es nämlich, textuelle Änderungen innerhalb der Webseite vorzunehmen, die dann automatisch und unmittelbar von Visual Studio und der entsprechenden Codedatei reflektiert werden. Eine Visual-Studio-HTML-Datei kann somit direkt im Browser editiert werden.
  • Save F12 changes: Den endgültigen Brückenschluss zwischen Visual Studio und dem Webbrowser bringt dieses Feature mit sich. Mit seiner Hilfe können sämtliche Änderungen im CSS-Modell des Browsers per Knopfdruck an Visual Studio zurückkommuniziert werden. Dieser Kontextwechsel, der ansonsten den eigentlichen fundamentalen Workflowbruch bewirkt, wurde somit erfolgreich eliminiert. Wer Änderungen im CSS-Modell des Webbrowsers kontinuierlich an Visual Studio zurücksenden möchte, kann dies über die Option F12 auto-sync tun.

Weitere Browser-Link-Features, die mit den Visual Studio Web Essentials umgesetzt wurden, sowie zukünftige Features können hier nachgelesen werden. Wer nun auf den Geschmack gekommen ist bzw. einen eigenen Anwendungsfall für Browser Link und dessen bidirektionalen Kommunikationskanal zwischen Visual Studio und Webbrowsern gefunden hat, findet eine einfache Anleitung dazu, wie sich eigene Erweiterungen für diese Technologie entwickeln lassen.

Abb. 11: Visual-Studio-Web-Essentials-Toolbar im Webbrowser

Fazit

Das war ein Schnelldurchlauf durch ausgewählte Features, die Visual Studio und das Web-Essentials-Add-in für Webentwickler zu bieten haben. Wer Visual Studio als Entwicklungsumgebung für Webanwendungen bisher nicht auf der Rechnung hatte, sollte das schleunigst überdenken und einen gründlichen Blick auf die Features und Neuerungen in der aktuellen Version werfen. Speziell die Web Essentials werden aktuell mit einem enormen Tempo weiterentwickelt und vorangetrieben. Technologien verschwinden, werden aktualisiert, neue tauchen auf. Es bleibt spannend!

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -