This reviewer has been a Dreamweaver user since its early appearance as a Macromedia program over 15 years ago. Dreamweaver was the first IDE for HTML+CSS+Javascript with a unique Visual + Code view of a developing web page file. It also held out the promise for a tight integration with PHP+MySQL client server development with a live server side view of your web page in the style of Adobe’s live webpage editor, Contribute.Dreamweaver would go beyond Contribute with dynamic CSS styling coupled with close DOM integration. Finally, Dreamweaver development promised to take advantage of Ajax and JavaScript.
In sum, Dreamweaver was slated in the early 2000’s to become the visual web development tool that bested Microsoft’s Visual Studio by offering Microsoft’s proprietary ASP but also supporting open tools like PHP, MySQL, Ajax and the fast emerging JavaScript frameworks. In 2004, Dreamweaver won the prestigious Software Development Jolt Hall of Fame Award. But by 2010 after Adobe bought Macromedia and Dreamweaver became a part Adobe’s Creative Suite, Dreamweaver had fallen far short of the early promise.
Instead of extending the Contribute live client server model, Dreamweaver stayed local through its equivalent of XAMPP or MAMP local host development. Its CSS tools were slow to adopt a true WYSIWYG IDE approach plus the latest versions of CSS3. These shortcomings have been addressed to a great extent in the latest versions of Dreamweaver but at a high complexity of use cost. In addition, Adobe’s own Spry JavaScript framework took precedence over such popular frameworks as Prototype, Scriptaculo.us, mootools, Dojo and especially jQuery. Php CMS libraries like WordPress, Drupal, Joomla, Symfony, Zend were made available but primarily through Dreamweaver extra cost extensions.
The most distressing trend was that Dreamweaver changed from a complex to an enormous IDE:
For example, Dreamweaver’s menus run to 3 and even 4 levels deep. The IDE is surrounded by 3 tab bars, two icon bars, and 2 large tabbed property displays.
To say the learning curve for Dreamweaver is huge is an understatement. Dreamweaver easily rivals Visual Studio and Eclipse for complexity and time to master.
And large portions of Dreamweaver no longer had an advantage over simple and free editors like Notepad++ or Bluefish or Textmate. These editors provide syntax highlighting, code rolling, bracket/tag matching for a wide variety of languages like HTML, CSS, JavaScript, SQL,Ruby, Java, ASP, PHP, C, C++, and many others. Then the free Java IDEs like Eclipse and Netbeans provided Web editions which added database connections, code completion, ftp support, local host servers, database links, and add on plugins similar to Dreamweaver’s extensions. So Dreamweaver was not the best game in town in many areas of web development
But the final straw was Adobe’s move to the Creative Cloud and annual charges for using Dreamweaver and all its family of Creative Suite products. I had been on a 3-5 year update cycle for Dreamweaver. So the annual fee for Dreamweaver was a non-starter even when bundled with the Creative Suites. I have detailed elsewhere why Creative Cloud and Adobe updates were not acceptable. And so I started more than a year ago to do a concerted search to find good replacements for Dreamweaver – or more broadly, better web development tools. Here is an overview of what I found.
Replacements for Dreamweaver
There are many web developers that are anti-IDE and have long supported such stalwart editors such as Emacs or Vim in Linux, Mac or PC over IDEs like Dreamweaver or Visual Studio. However, new tools started to sprint ahead of the old stand -by’s by offering syntax highlighting, code completion, code collapsing and expanding, plus code commenting, Here is a list of the editors that match and often better Dreamweaver or even Visual Studio
Super Text Editors
Now on the basic text editing level there a several very good and often free editors all of which which provide Dreamweaver features like syntax highlighting, code collapsing/expanding, bracket/tag matching and support for multiple web development languages including the core set of HTML, CSS, JavaScript, SQL, PHP and Ruby. For novices, these are low/no cost entry point whose features Here are some of the best of these text editors:
which adds a number of additional features beyond the core set listed above. These additional features include user-configured syntax highlighting, macro recording plus playback, auto-completion of keywords, function names plus parameters for many of the supported languages. Notepad++ also supports an on-board plugin manager with over 3 dozen free plugins available including tidy, ftp support, file compare, spellchecker, color picker, calculator and even a tetris game.
Textmate adds to the core text editing such features as code completion, macro recording and playback, plugin scripting, configurable code formatting, regular expression search & replace plus support for project file systems such as Darcs, SVK, and Subversion One disadvantage to Textmate is that its menus are large and go 3 levels deep as it supports so many languages and features thus approaching the dread Dreamweaver learning curve problem.
Bluefish is different from the other text editors in that it has extra features for the core stack for Web development – HTML 4 & 5, CSS, JavaScript, PHP, MySQL. Within these languages Bluefish offers more popup code templates, Beautify and Minify functions plus optional code completion. But Bluefish supplies syntax highlighting, code collapse/expand plus bracket/tag matching for a broad range of language from Ada & C through Lua and Python to WordPress and XML among the over 30 languages it supports. Bluefish offers added features like regular expression find & replace, spell check, and handy code formatting features. Warning – Bluefish is most feature complete for Linux with Mac and Windows trailing on some new and advanced features.
PHP Web Server Savvy Tools
The next level up tools provide much of the language editing facilities of the above text editors while adding web server side functionality with ftp support, database explorer and query development, code generation features, built-in localhost server testing, and remote server debugging among other features. The primary languages supported are PHP Java, Ruby, Python, Perl plus a coterie of Windows-only languages like ASP, C#, and Visual Basic. We shall emphasize the Open Source programs & languages because most of the tools are free/low cost and not proprietary.
As you will see in the screenshots, there is the danger that these web server tools are becoming more complex in their IDEs and start to approach Dreamweaver or Visual Studio in their learning curves.
Codelobster delivers all of the text editing features of Notepad++ or Textmate while adding an array of additional features. These include FTP support, MySQL Manager, plus a localhost Apache engine for local client server debugging of PHP, JavaScript and SQL code. Also there is support for Code Validation, Version Control system links, Less and SASS to CSS conversions, Code Snippets. Most helpful are Code Completion + Formatting for a variety of PHP and JavaScript libraries including CakePHP, CodeIgniter, Smarty, Symfony, Facebook, jQuery, Node.js, Twig, Drupal, Joomla, WordPress, and Yii libraries.
Phpstorm provides core web stack editing for PHP, JavaScript, CSS, HTML and SQL editing on Linux, Mac and Windows platforms. The editors provide auto completion, code formating, plus extensive active code verification for PHP. Version Control System links plus built-in debugger, PHP Unit tester and Zend debugging speed overall development tasks.
Like PhpStorm, PhpED is primarily a full web stack developer supporting PHP, HTML, CSS, JavaScript text editing with syntax highlights and code completion. PhpED supports remote operations with FTP or WebDAV plus either local or remote debugging of PHP code and an advanced PHP profiling capability for code optimization. PhpED also has multiple control system support including CVS, GIT and SVN plus advanced SQL DB Wizard and and SOAP Web Services support.
Also there are other tools which support ASP, ColdFusion, Java Server Pages and Ruby on Rails with a wide range of database servers. There are number of Eclipse and Java based engines like Aptana, Eclipse itself and Netbeans that also provide these Web Savvy services. However, of necessity, these tools become more complex with larger learning curves that are inherent in web development Some like Eclipse and Netbeans allow users to download truncated Web versions reducing the complexity and learning curves.. However, in reaction to this complexity , there has appeared a series of code generation tools primarily for PHP that aim to provide “no coding required” web development.
Code Generators
Code Generation Tools aim to make the process of generating database driven web apps much easier and therefore approachable by novice users. By far the most common generators are for PHP or PHP-based CMS like Drupal, Joomla and WordPress. But there is a wide range of tools for web code beyond PHP. But following the 80-20 rule , our emphasis will be on PHP-based tools.
PHPrunner for $499 generate PHP CRUD database forms or grids plus charts and reports.
PHPRunner supports a variety of databases including MySQL, SQLite, Microsoft SQL Server, Oracle, DB2 among the most popular. With its SQL Editor users can can create tables and views for use in tables, grids, reports and/or charts[see above screenshot]. The Visual Editor allows drag and drop modification of web page [table, grid, report, charts, menus, content regions]designs while the Style and Template editors allow for customizing the format and content of PHPRunner objects. There user authorization grouping and control along with heft Captcha and other security checks. Finally, XLinesoft offers ASPRunner and ASPRunner.Net for Microsoft shops plus a variety of add on templates for all the Runner programs.
Scriptcase delivers a powerful Web application generator for $399.
Scriptcase runs as a localhost online app with the ability generate database grids, forms, master detail updates for MySQL, SQLite, Firebird, PostgreSQL and Access databases. The Enterprise Edition adds DB2, Sybase, Informix, Oracle and MS SQLserver support plus options for running added developer seats. Scriptcase adds the ability to generate reports, charts, and menu driven page layouts with extensive formatting and styling. Scriptcase also allows customizing for international use and mobile devices.
PHPMaker generates code in a variety themes for database table viewing as well as CRUD [record CReate, Update, and/or Delete] operations. These operations ca be done for Master-Detail related tables. PHPMaker provides forms or inline grid editing plus multiple search options. There is extensive formatting of grids and forms available with custom CSS plus export to Printer, CSV, Excel, and PDF files. These same capabilities are available for separate ASP or JSP tools. There is also a separate PHPReportmaker tool.
SQLMaestro runs as a wizard, taking users through the steps necessary to generate inline grid code for CRUD operations and then data display in a table or grid. The free version generates paging code with a choice of formatting as well basic export options. The full version adds inline grid and modal dialog editing, better filtering of grid, beefed up security and authorizations, broader data exporting and printing options, visual form and report editor, plus many other added features.
There are a number of smart themes for WordPress that allow for Visual Design of pages, posts, widgets and other WP blocks. Headway, Ithemes, Ultimatum and Pagelines DMS are among the leaders. I will display the Pagelines DMS2 here while users can see more info on other tools here, here and here.
WordPress already has an increasingly drag and drop interface for designing website fixtures like menus, sidebar widgets, and Web pages and posts. If you go to WordPress.com and create a free blog there you will see these capabilities in action:
The screenshot above shows drag and drop menu editing operations.
Drag and drop Visual Design has certainly come to WordPress in a big way. The new theme tools allow developers to do the same type of drag and drop building of not just WordPress Home pages but any any page or post for which a custom design and layout is required. Couple this capability with overall database and the WordPress content management API [written in PHP] and suddenly WordPress becomes a powerful and easy to use Web development tool.
Visual UI Designers
Why No Visual Studio
Visual Studio has been avoided for 4 reasons. 1)The complexity and learning curve of VS is formidable; 2)Microsoft development tools are layered with proprietary Windows-only code and requirements both on the client and server side; 3)Microsoft has had a tendency to try and then quickly abandon major Web solutions: think Silver Light, Expression series and various media file offerings; 4)Microsoft has been the worst offender on supporting Web Standards as they try to force developers onto their proprietary Web tools and solutions. Why reward social deviance?
Visual Designers for RAD development have a chequered history in the Web arena. Visual Studio with its ASP and .NET approaches has offered attractive UI development time tools but at a price, First, there is a stark learning curve to master all the nuances of Visual Studio. Second, many Visual Studio deployments have various Microsoft proprietary requirements which simply run aground of a Web server environ that is predominately Linux-based. See the sidebar for more details.
In a similar fashion, the Java UI tools like JavaFX, JSP, Swing, GoogleWebToolkit and various Faces versions spread an already thin Java Web Developer base even thinner. Despite these drawbacks we have included a Java IDE below because it serves the HTML, CSS, JavaScript and PHP communities very well while supporting Java tools. But our primary emphasis is on JavaScript frameworks that provide visual designers for their excellent GUI widgets.
Like many of the code generation tools, Sencha Architect uses templates drawn from its extensive framework for mobile, touch and desktop apps. Users then add widgets and customizing configuration & styling code like in Visual Studio or Eclipse. Sencha Architect provide a range of test environs depending on the framework being used. The downside to Sencha Architect is that it is oriented towards Sencha-only solutions and has only just recently opened up Sencha Architect to 3rd party custom tools and extensions.
DHTMLX is a Javascript framework supports 19 of 20 GUI widgets for free. The Pro version for $500 add features to 4 of the widgets including a powerful tree grid. In addition DHTMLX has a handy Visual Designer which speeds up development with its JavaScript components.
[iframe src=’http://dhtmlx.com/docs/products/visualDesigner/live/#9d2b95′ width=’100%’ height=’700px’] The advantage of DHTMLX widgets is that they are stable, well tested and fairly simple to use. Just try the live Web Designer above and add a grid and iframe or image gallery to your layout. The soon to arrive version 8 will concentrate on speed improvements.
Netbeans is very robust and offers syntax highlighting and code completion for the following Web languages: HTML4 & 5, PHP, jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc, and ScriptDoc.. In addition, the live browser shows CSS2 & 3 plus SASS and LESS stylings in the display browser. Netbeans also supports a sophisticated SQL Editor & Code generator. The Apache Cordova/Phone Gap tools allows mobile savvy deployment. Finally with its plugins, Netbeans offers an array of added features including many of the Java GUI Designer tools.
Summary
There is a broad array of Dreamweaver replacement tools. The first group of text editors are low cost, easy to learn and probably meet the 80-20 rule – that is accomplish 80% of what you use Dreamweaver for at 20% of the cost. The next group, the Web IDEs are more expensive while adding more features for local testing and debugging plus direct SQL support. Here the learning curve goes up but most of the tools have managed to avoid Dreamweaver 4 levels of menus and a bewildering array of toolbars and icons. Also the Web IDE’s support of a broad range of SQL and other databases plus PHP development frameworks has stimulated broader support for the same in Dreamweaver and other Web Tools.
However, it is the PHP code generation tools that have gone well beyond the modest Dreamweaver extensions.Thus, with the code generators templates plus increasingly capable editors and styling tools, these tools are pushing the state of the Web development art. Likewise, drag and drop visual design which stalled with the Dreamweaver visual+code screens, is picking up speed again. This trend can be seen either with WordPress super themes or the JavaScript GUI designers. Expect Visual Designer to have a big impact on future Web development because designers/developers need to be more agile and productive than ever before. So replacing Dreamweaver is a natural market mechanism when a once leading product no longer covers/meets users needs.
Watch for more coverage of some of the tools seen here in the next few weeks.