September 25, 2013

HTML UI Tools and Development Help

Hey guys, I been working on a site for a friend. The biggest thing killing me is how slow of a rapid application development that HTML is. I thought I would come up with some ideas and see what you guys think.

It’s been a while since I have wrote an article, but it has not been because of no topics. I think there are a few tools to help HTML development but I want to know what else is out there.

Templating

A thing that I do use that helps is templating. Whether you are using EJS, Jade, Handlebars, Razor, or any other templating system, they are saving you time. How? you can create templates for models, almost like reusable controls. They speed up lists by using for loops and even show and hide tags based on properties. This works out great because of also having templates for read-only vs read/write fields. The only problem with this is that you still have to write out all the controls, even if it is in a loop, there is a lot of typing for HTML. The other issue is that logic is not shared necessarily. Although, you should be writing your client side code generically, it is not inherent like application controls (i.e. WPF or Windows Forms have control templates that allow you to capture that logic for RAD). I’ll think more on this in later section.

Code snippets

There is something to help templating out more, code snippets. Code snippets can help templating by writing the tedious parts of HTML for you automatically. Code snippets is in lots of our favorite IDE’s like Visual Studio and Eclipse, but also are in editors like Submlime Text. This and templating can speed up development to quickly get a poc going, but also can apply to javascript. This helps templating by adding in the code part, to a certain extent. It will not develop and encapsulate your control, but it is a big help.

MVC Frameworks

I think this is where I can see the use of angular.js, backbone.js and other MVC frameworks possibility. They provide the glue for a framework to help encapsulate functionality with the UI elements. These frameworks also enforce you to create single page applications, using templating, to quickly create a functioning system. The only criticism I have with this solution is the learning curve of these frameworks. They have their own concepts of “Models”, “Views” and “Controllers”, so it is hard to translate from one framework to another. Lastly, is there a way to create controls? This is an honest question, because after this website I am making, I think I will be spending some time with angular and need an idea of whether or not it can “package” a control I can use.

JQuery UI and other control templates

While there is no control reuse that I am accustom to from WPF or WinForms, there is JQuery UI plugins and other control templating systems. This might be the closest thing I can come across for marring UI tags with Business Functionality.

In conclusion, the web has a few things to work out. There are much considerations that are needed for developing for the web. I think there are benefits for developing for the web, vs writing apps, like interoperability and single deployment. The downside is the work upfront, like UI design. The design can be easily countered with Twitter bootstrap, but isn’t there something like ASP.net Web Forms, but without the crappy application lifecycle? Maybe not, but I will have to play more with the tools I mention above. If you have any suggestions, please write them in the comments section.