DreamWeaver feels like something from yesteryear, and maybe most web application development is done without it these days. Flipping between a text editor like TextMate and a running browser like Firefox with Firebug and other plugins running is normal.

That said, Dreamweaver has always claimed to be a WYSIWYG editor for HTML source, that is aware of a number of markup regimes, with every intention of leaving stuff it does not recognize alone. Stuff in this instance being elements and attributes principally, but also macros that it might see in between tags. There were many years thought where DreamWeaver would be an admirable tool for round-trip editing for ASP, but would desecrate a JSP page if it had the chance. I’m not sure if that’s fixed in version 11.5, as who uses JSP anymore?

Here’s the the excellent SpreeCommerce demo from monday’s blog entry cart again, this time in Dreamweaver. Specifically the version of the original saved source, but after I used Dreamweaver to reformat the HTML source:

Actually, the version before the reformat looks identical in DreamWeaver.

Viewing Angular source with DreamWeaver.

Here is what the same thing looks after I did the initial conversion to Angular:

The Mustache style expressions into the JSON model are visible where they are inlined into text. They are somewhere between unobtrusive and useful in this form. Dreamweaver recognizes that I’ve made changes outside the editor, and reloads. If I’m using either of Intellij IDEA or WebStorm they save on loss of focus automatically, so I’m less likely to be in a state where I’ve got unsaved changes in both, and no ability to merge them.

Making a change in DreamWeaver

I changed some plain text and a mustache expression, and moved a column that I know to have an invisible Angular attribute in:

And here’s how the source looked as DreamWeaver saved it. Diff format for the file obviously, to show how utterly clean this was:

diff --git a/index.html b/index.html
index e239f09..5d33561 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
     <nav><a href="http://demo.spreecommerce.com/products">products</a> <a href="http://demo.spreecommerce.com/login" class="cart">Log In</a> </nav>
   </header>
   <div id="main" role="main">
-    <h1>Shopping Cart</h1>
+    <h1>CHANGED</h1>
       <h3>You have {‌{cart.items.length}} items in your cart</h3>
       <div>
         <table id="cart-detail">
@@ -60,25 +60,25 @@
               <th colspan="2">Item</th>
               <th>Price</th>
               <th> </th>
+              <th> </th>
               <th>Qty</th>
               <th> </th>
               <th>Total</th>
-              <th> </th>
             </tr>
           </thead>
           <tbody id="line_items">
             <tr ng:repeat="item in cart.items" class="">
               <td><img alt="{‌{item.name}}" ng:src="{‌{item.imgSrc}}" /></td>
-              <td class="description"><h4><a href="http://demo.spreecommerce.com/products/{‌{item.link}}">{‌{item.name}}</a></h4></td>
+              <td class="description"><h4><a href="http://demo.spreecommerce.com/products/{‌{item.link}}">{‌{item.CHANGED}}</a></h4></td>
               <td class="unit-price"> {‌{item.price | currency}} </td>
               <td class="operator"> X </td>
+              <td class="total"><a ng:click="cart.items.$remove(item)" class="delete button">Remove</a></td>
               <td class="quantity"><input style="width: 32px;" name="item.qty" ng:validate="integer:1:5" /></td>
               <td class="operator"> = </td>
               <td class="total"> {‌{item.price*item.qty | currency}} </td>
-              <td class="total"><a ng:click="cart.items.$remove(item)" class="delete button">Remove</a></td>
             </tr>
           <tr class="totals">
-            <td colspan="6"> </td>
+            <td colspan="7"> </td>
             <td colspan="2" class="totals"> Subtotal: {‌{cart.items.$sum('price*qty') | currency}} </td>
           </tr>
             </tbody>

There is one mistake concerning the column in moved leftwards: there is a total-row cell that spans 7 columns now instead of 6. It’s a shame that DreamWeaver does not have a “move column” refactoring. When I said “cut/paste”, the reality was “cut-column”, “insert blank column” & select it, paste the clipboard into the blank column, then remove the now-blank rightmost column. Removal was done in the source view as “Delete Column” does not actually delete the column, it just wipes out the content. That was the only operation not performed in WYSIWYG mode.

The hard part for DreamWeaver to do right here was the preservation of the ng:click=”cart.items.$remove(item)” attribute. It worked a treat, but this is not surprising as DreamWeaver has been preserving the extra attributes and elements for Coldfusion Markup syntax from the mid-90’s onwards.

It seems to me that best practice with Angular if you’re using DreamWeaver, is to re-format as needed in DreamWeaver, and not so in your preferred JetBrains IDE. Then ping between the two tools at your leisure and feel smug at how clean the diffs are.