Tuesday, February 10, 2015

Updating my web editor - or the great dreamweaver debate....

I have been using Dreamweaver CS4 since... a while now.  As I was only doing a bit of simple web gui work mostly with tricky clientside javascript but fairly basic hand coded interfaces... CS4 was fine.

I have recently landed with a whole pile of projects that are very GUI dependant. Active websites and quite complex web apps.  Trying to hand code all this stuff is just painful. 

So, this got me looking at my tooling. What I wanted was a fairly high level way to compose the GUI and then good support for the inevitable coding under the bonnet.  Dreamweaver is a nice editor but the CS4 designer is just broken on modern coding styles.

Thus began the quest to get something better.

The starting point is just to upgrade to the latest version of Dreamweaver... but Adobe have continued their mission to make their software both ridiculosly expensive and even more entangled in their ecosystem. 

Firstly, I don't have a problem with paying for software.  I recognise that Adobe make a simply exceptional product line and the amount of working code that you get for your money is gobsmacking.  That being said, their pricing model is just mean unless you are a fulltime production user.  (I also recognise that they are the most pirated software ...ever.  Which I think might explain a bit of the "meanness" in their attitude.)  Anyway.... the pricing was a bit of a shock to the system. 

The level of entanglement in their online ecosystem and the frailty of that system is a bit worrying.  Honestly, its not very worrying... just a bit new and took a bit of time to think about. (Again, there was a hint of mean-ness in the attitude from Adobe customer service about their handling of service outages... but that could be just me projecting into what I have read) 

However, in summary, I suspect that the monopoly position that Adobe has occupied for some years is getting ingrained as arrogance throughout the organisation.  This should be a cause for concern among its managment.

Anyway, back to the problem.

After some thrashing around and getting my head back in the game of current generation web design I started looking at the contenders.

My first realisation was that working at the HTML/CSS level is a mugs game.  Its just not feasible to hand write current generation web app.  (It is, but you are not going to get much done and it will consume your life) There is no way to avoid frameworks now.  Its just not even a question.  The only question now is which framework(s) you choose to use for the projects.

The put me onto a side detour to play "pick a framework".... talk about down the freak'n rabbit hole!

As I have dabbled in a couple of back and front end frameworks before, I had some starting places.  After a really messy period of reading and test playing,.... I settled with:

PHP (4-5 frameworks still to be refined down) for the server side
Angular.js + bootstrap for the client side

Why did I pick these?  In the end it was mostly cause those were the ones I liked best and the tutorials were pleasant.  (Honestly that was about it.  I stopped looking for compelling reasons as it was all bullshit.... the tradeoffs are just to many and varied for me to make an informed choice yet... so I just stopped trying to "be right". I will build a couple of projects and then re-evaluate as I get more literate.)

In the time since I made those choices... even more choices have come to light... its just a mad mess out there.  (Which supports the main theme of this train-wreck of a post)


To recap, I wanted an editor that would allow me to do high level assembly of pages and support the inevitable coding with all the bells and whistles of coding editors like Visual Studio ( big ask I know)

Drag and drop, wysiwyg designer, syntax highlighting, project managment, debugger... etc.

Coffeecup HTMLEditor (and other tools)

This is an interesting little suite of tools... but they are almost novelty tools.  The editor is pretty but has no support for backend coding.  Just look at its javascript handling.  This is dead technology from a decade ago.

Ignore these tools. There is nothing here anymore.  No.


Just don't bother. It's an academic toybox.



Yet another web editor from the past. WYSIWYG....bullshit.  This is a very competent editor for about 10 years ago.


Webstorm and PHPStorm

Code editors without any GUI designer. Very nice code editors which should be rolled together... but I want a GUI designer.

High quality code tools... no help for the design stuff.  Could be a contender if they ever get the graphical nature of the web.


Microsoft Webmatrix

Yet another in Microsofts long line of half-assed attempts to almost commit to having a web development toolbox. Frontpage, ASP, Expression, Metro, Silverlight blah blah blah.  I just cannot understand why they always manage to totally stuff it up so completely. Get the politics out of the tools you idiots!  I have a lot of trust issues with MS and this is not giving me any warm feelings.  It looks like yet another abandonware project that has no commitment behind it.

So, this is a No from me until the whole company grows the fuck up.

Microsoft Visual Web Developer (Express, Pro... whatever)

Already dead by the time I got there.


Microsoft Visual Studio with plugins 

Only if you want to use MS backend tech.  And you are happy with really shit rendering of the page you are working on....


Microsoft Expression Web

Go the fuck away MS.

NO you fucktards.  Commit to something and stop fucking around or just die and get out of the road.  Do you have any idea just how much effort has been wasted on your endless inability to commit?

Google Webdesigner

 Almost a mirror image of Microsofts poor effort.  Inhouse tool that is not getting much love. Beta feature set. 

No. No. NO.

There are more...

 BlueFish, Open Bexi, Namo, Aptana, Text Mate, Blue Griffon, Top Styler.. etc.  Many are good code editor.  None that I spent the time looking at are good GUI designers. It all became a bit of a blur honestly... I may have missed stuff but the fatigue of trying to honstely evaluate this many similar bits of software and seeing the same repeated patterns of failure; same decade old model got a bit depressing. 

However, it did bring the problem into sharp focus.

I also think that the buffet of half-assed editors should sound a real warning to the industry.  The tools are lagging well behind the needs of the people building this generation of web-apps. 

The editors are not keeping pace with the frameworks. Very few of them are what I would describe as "framework aware".  There are some that have "plugins" to handle the framework classes and make their syntax checkers work with your framework of choice.  This is a BIG PLUS in their favour... but its a trick that has been around for years.

In my survey, I did not find many editors that were able to do "high level" manipulation of common stuff like bootstrap.  The fact that bootstrap is fragmenting and evolving as soon as you look hard at it is similar to all the frameworks.  It must be a nightmare for the groups working on these editors.

Support for big ticket middleware frameworks like jquery or angular was also a bit underwhelming.  What I did find was still very "low level"... essentially ... "here's a nice code editor" ... hand code it yourself.

The other trend I noticed was the reliance on external browsers to render a "preview" of the page. This is good. Any serious web editor needs this... but its not a high level design tool.  There is no drag... no resizing of grids... no direct editing of properties or adding of directives.  This is just a better preview system.

This is bullshit. 

So back to Dreamweaver. 

Get a trial of Dreamweaver CC.  Start testing.  Jaw hang open in shock.  Fuck me!  All the problems I have found in "the other packages" are in dreamweaver too.  (Excep the design surface is a bit better)

There is still really crappy awareness about frameworks and middleware.  You still have to crack open the code editor to get much done. The GUI designer still plows the code into its own way of thinking.  Honestly its hard to say that this is any sort of step upward from CS4.  (Lots of stuff if better.. but the high level productivity is not really there. )

This is so broken. 

Where to go from here?  

 Time to change the way I'm thinking about the problem. Certainly time to review my expectations. 

My (new) expectations....

Productive IDE for code and project managment.  Needs to be FTP/Server aware for rapid round trip testing.  Should have easy round trip local browser preview for different screen/device configs. 

Ability to plug in frameworks and packages.  I have seen a bunch of package management systems and none are pretty.  But the idea is solid.  

The browser based debuggers are really where the state of the art is at.  Get used to them. 

Generic GUI design surfaces/toolboxes are dead.  I struggle to imagine how they can become relevant again unless they pair with a specific set of frameworks and widgets and work at being very aware of their conventions, models and idiosynchracies.  (Almost back to the Microsoft model... *vomit*rage*rant*blame*cry*acceptance*)

A CSS designer is a different beast.  I think this is now essential in a modern web editor. This atleast dreamweaver has... but I am still working on being happy with it.  There has to be a better way.  LESS and SaSS are now essential to making CSS managable.  These need to be supported and compiled/minified at runtime.

Database managment, SQL code generation, PHP etc... templates?

Templates were great back in the day.  But unless I start building static sites like its 1995 again, I think that tech is gone.  Generating a page using javascript on the client side is much more valuable to what I need to do now.

The more I google, the more I find that other people have traveled the same road ahead of me.  The more I find that their outcomes are .. variable. 


The way I read it, there are two camps. Those who are looking for a "better" dreamweaver. That is, a better graphical editor for making static pages.  This is the Graphic Designers mindset.  They need visual tools with high level control.

The second camp are people who need to build current generation sites and for that dreamweaver is irrelevant (and has been for some time).  This is the programmers mindset.  They need a web focused IDE.

At the moment I cannot honestly say there is any replacement for Dreamweaver for the designers.  There are a couple of interesting things emerging... but nothing compelling. 
The intersting thing with this is how Adobe themselves have changed course.  Their "Edge" suite has already lost its code editor package in favour of Brackets with some glue code to allow export from PSD files.  This looks very like a tool path for "Designers" and basically replaces the "visual" design tools in Dreamweaver (which have not really progressed in the past decade).


For people who are coding websites.... there are a slew of contenders.  Most are solid IDE's, but the better ones are tuned for web dev and integrated with browsers and remote debuggers etc.  

The best of the crop are going to be the ones that make it easy to work with the frameworks, CSS, LESS, HTML5 Canvas and the sound api's while still being able to hack on a database and remote debug javascript.  This stuff is beyond a standard single language IDE.  Even IDE's can handle the syntax of multiple languages.  A web app is a ball of multiple languages all mushed together.  The fact that there is a buffet of options just makes it a really ugly problem.


This is the first editor that I have seen that seems to get the idea that CSS and HTML are no longer seperate.  (I don't mean inline styles)  Being able to directly step between the HTML and the CSS file is a big deal... being able to step to the LESS file is even more of a deal. 

No comments:

Post a Comment