Fork me on GitHub

Minify HTML with the DSL in AngularAgility Form Extensions 3

by

tl;dr: Live Demo SourceAPI Docs

Whats a DSL?

No I’m not talking about that internet that made you put all those “line filters” on your land-line phones. The DSL I’m thinking of stands for Domain Specific Language. What does that mean?

Very simply it is a programming language that anyone can easily invent that is very specifically designed to efficient at describing and coding for your particular domain or problem you are trying to solve. This is in contrast different from a more general purpose language like HTML, JavaScript or C# which may not be as efficient at solving any problem.

The benefits of using a DSL can be quite simply way less code has to be written to solve a particular coding problem. The ancillary benefits of this can include better quality, productivity, reusability etc.

Angular directives let you DSL your HTML!

One of the coolest features about Angular is it allows you to specify custom HTML elements for you domain/problem set which can then interact with the DOM/JavaScript. Here is a great example of why you don’t google for slideshows on the internet (because of course you invariable get cats every time, oh internet…)

For this markup:

You could generate something like this:

cat-slideshow

In this case the Angular directives <slideshow> and <slide> are used to generate a verbose amount of HTML required for display and wire it up to the JavaScript that makes it interactive.

Sweet! Here are some pretty awesome benefits I can derive from doing something like this:

  • You can have designers/non developers with no programming experience build some pretty complex functionality and implement it frequently across an entire website.
  • Isolation from change: if the business decides the cat slideshow style isn’t cutting it anymore everything about the underlying HTML markup can change with no impact on the DSL

 

Minification?

You know that thing that people do to JavaScript that makes it horribly ugly, impossible to debug and all errors occur on one line right? Here is a preview of good old Angular in minified form:

Screen Shot 2014-03-20 at 9.38.09 PM

The benefits of minification of JavaScript (beyond the quite obvious obfuscation and removal of comments) is a slight reduction on file size after gzipping. In other words why not?

 

An Example Form

Now your probably wondering why the heck I would advocate for taking some perfectly tearse <slideshow> <slide> markup and turn it into <ss> <sl>. Don’t worry we aren’t going there. However…

Twitter Bootstrap has some verbose (yet flexible) markup

If you’ve ever tried making a form intensive application with Twitter Bootstrap you know what I’m talking about. Lets say you want something like this, a simple form with a few fields on it:

Screen Shot 2014-03-20 at 10.59.49 PM

Looks easy enough right? Well take a look at the HTML required to pull it off:

Thats pretty verbose. This is just a static form with no degree of interactivity even and it’s that much HTML. Lets take it to the next level…

The same “verbose” form in Angular.js with validation

You thought the first one was long… Take a look at this. Now we have applied some sensical validation rules to the form, made most of the fields required and display a message if any of the rules are broken:

Some problems

  • The markup above is very verbose and without careful study I would say it obfuscates what you are doing. This is just a form with validation folks!
  • The DRY principle has completely died, almost everything looks “the same but a little different” and very boilerplate like
  • Validation messages are tedious
  • If you ever want to change from Twitter Bootstrap to something else (or heck even upgrade to a new version) you might be in for a serious brainless copy, paste, repeat nightmare
  • We are wasting our bandwidth, the client’s bandwidth and possibly a slower UX as a result with this junk!

 

A better solution – AngularAgility Form Extensions

Now if you looked above remember this is just a simple form still with some validation and Angular bindings. Crazy how much HTML and directive markup is required to pull that off. Imagine having an entire application filled with those forms… ick.

Here is the same form from above implemented with AngularAgility Form Extensions:

 

Wow, 159 lines down to 31 (and it’s totally flexible)

Already convinced? Here is a live demo, the source and the API Docs

The goal of Form Extensions is the distill  HTML, Angular and Bootstrap (or whatever you want it’s completely customizable with a provider model) to the bare minimum possible. Here are some of the goals of the project that are depicted above:

  • Offer a  drastic reduction in the amount of boring, boilerplate, repetitive, error-prone HTML required to produce forms, labels and validation messages.
  • Automatically generate Angular.js fields for use in form validation, their error messages AND labels (overridably of course)
  • On blur and on invalid submit attempt showing of validation messages.
  • Form extensions programatically extends forms at myForm.$aaFormExtensions = {…}
  • Code is cleaner and easier to read. Form Extensions is DSL that distills your HTML down to only what is required.
  • Feel free to use full blown markup whenever you want complete control.
  • Mix and match the directive components of Form Extensions to get exactly what you’d like for each situation.
  • It does exactly what you want: Everything is overridable on a global and per-instance basis through a rich provider model.

HTML size reduction comparison

Before Form Extensions

Normal: 7,138 bytes
Gzipped: 929 bytes

After Form Extensions

Normal: 1,204 bytes (83% smaller)
Gzipped: 454 bytes (51% smaller)

Conclusion

Save some typing, make your code cleaner, save bandwidth, have more fun! Whatever the thought give the library a shot and let me know what you think. Myself and others have been using it on various projects and have seen huge increases in productivity. Perhaps my favorite part about it is I get to focus on the fun aspects of coding not the mundane repetitive stuff that Form Extensions eliminates!

3 thoughts on “Minify HTML with the DSL in AngularAgility Form Extensions

  1. Reply Diego Sep 19, 2014 4:32 pm

    Hi, Is there some way to do a global config, by example. aa-col, aa-lbl-col, and translate messages? Great Job! Thanks!

  2. Reply Mike Aug 27, 2014 8:32 pm

    Pretty cool set of directives!!! Thanks!
    However we try to use it and have some issues with validation of hidden fields.
    Say one needs to conditionally validate one field based on value of another.
    In our case that field is also hidden. It looks like AA still validates that hidden field.
    Any suggestions how one may work around?

    Also is there any way to get called back before valid form submitted? We sort of need server side validation involving multiple fields.

    Thanks

  3. Reply Sendy Aug 4, 2014 12:38 am

    Great article! I’ve been searching for easier way to make validation less-painful in angular, was going to make directives for it, then found AngularAgility, I’ll try this

Leave a Reply