Abstraction Of Web Development Languages

Abstraction Of Web Development Languages

Making web development faster

We are all into making our job easier right? We love writing less but doing more. jQuery is an abstraction of Javascript, it takes less of it to do the same stuff. What if though, you could use something else to write the jQuery, only it took even less to write that. Is there a point where the abstraction level is just plain ridiculous? There are a ton of different languages and code out there to make what we write everyday take less and less time, but today I started wondering if there was a line of stupidity that we can cross by using all of these. My answer is at the end of the article, but let’s go through some of the ones I know of that, in theory, are supposed to make our normal process of building a website faster by abstracting the code you write. If you are asking me though (in your head of course) what abstraction in this case means, it is basically like writing the code in a very short hand method to the point that while it bears a resemblance to the original, it is not.

Sass

I know, I know. I talk about this all the time. That is because I am a full fledged fanatic. I must convert one of you to using this or I will be very upset. Anyway, once I got the used to the syntax, I was able to write my CSS much faster. Not only that, it made me pay attention more to what I was writing. If you use the original syntax of Sass, then you eliminate the curly brackets and semi-colons. On top of that you are using variables to make site wide changes even easier than they are in CSS. Personally, I use the SCSS syntax of Sass which is more like CSS, but there is still a lot of abstraction going on. If I had to guess I now write about 40% less to get the same amount of CSS as before. I can probably increase that percentage over time as I get better. I’m not sure how you can disagree with that being a good thing?

I can write the following in Sass (SCSS):

@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}

And anytime I want to use that png, I just do this:

#myDiv {
@include sprite(210px, 13px);
}

In normal CSS, I would have to write it out every time I needed to use it:

#myDiv {
backgroudn: url(../images/iconSprite.pnp) no-repeat 210px 13px;
}

If you have an argument against Sass, let’s here it. You better have tried it out though, cause otherwise your opinion won’t count.

Haml

What the hell is Haml? Haml is to HTML, what Sass is to CSS. Here is the example they have on the home page:

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

And the HTML that you get:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Just looking at that makes me want to jump in and use it right freakin now. So compact and simple. If you need a definition of what abstraction is, Haml would be it. Look at the above example and tell me you would rather type out all the extra syntax? I know I don’t.

And then there is Coffeescript

A while back someone tweeted something about this thing called Coffeescript. I was curious, so I went and checked it out. My first thought was “Holy crap. The mother of all code abstractions!” Honestly, I am not even sure what to think about this one. It is so stripped down that I think if I started using it, I would forget how to write the regular stuff. If you didn’t check out the link, Coffeescript is an abstraction of Javascript. Even more so than jQuery. Why? Because you can even use Coffeescript to write jQuery! No braces, no semi-colons.

Here is a quick example just to show you. The jQuery first:

$('#myDiv').animate({
  top: 20,
  left: 20
});

And the Coffeescript that you would actually write:

$('#myDiv').animate top: 20, left: 20

Obviously this is just a silly little nothing, but now think about if you wrote something a lot more complex, and what it would look like. Then think about if you got really good at writing Javascript this way. Just go look through their examples and you will see how much less you would write.

My thoughts on abstraction

I’ve shown you some examples of things that abstract the original coding into something more simple and less time consuming. So? I know that was what you were mentally saying to me. Now say you were good at all of them, and built a website using them all together. Could save you a lot of time, right? I have seen plenty of people saying this kind of thing is stupid. I don’t remember what they said exactly but the point is, the examples above are not widely adopted by front-end web developers. I would think that this would be the main driving point though in a web developers career: Do what you do faster while keeping the quality the same or improving it.

One argument against code abstraction I remember reading was that they didn’t have time to learn another language. That is the kicker though. You aren’t learning a new language. You can’t use any of these without knowing the original. If you don’t know CSS, you sure as hell are NOT going to be able to write Sass. If you don’t know HTML, Haml is useless. Don’t know javascript (or at least one of its many libraries), Coffeescript will look like nonsense to you. I can’t stress this enough: You are not learning a new language, just a new way to write the one you already know.

With all that said though, I wonder if there is a line you can cross whereby abstracting everything actually becomes a hindrance? Does one use something like this so much that you never write it the original way and soon forget how to do so? Doesn’t seem possible, but who knows? I would think if you are writing Sass, you are keeping up with everything new in CSS anyway so you can add it. Same with Haml or Coffeescript. My opinion? I love this crap. Game on, because I want to build it quicker than you while keeping the quality level the same or raising the bar because of how it makes me think.

I am surprised by the amount of people that are either against code abstraction, or don’t want to learn to use tools like this. If you are taking a car ride and have 2 options, one that takes 4 hours and one that takes 8, and both get to the same place (AND THERE IS NO SCENERY TO LOOK AT – JUST CORN – so don’t pull that crap on me!), which one are you taking?

Coupon Code: webmachine

Tags:

2 Responses to “Abstraction Of Web Development Languages”

  1. While I agree with most of your points, I differ on one thing:

    “One argument against code abstraction I remember reading was that they didn’t have time to learn another language”

    Ask the average jQuery user if they know anything about JavaScript objects or prototypal inheritance. Or if they could even do the things jQuery does without jQuery. I don’t think so.

    • jcDesigns says:

      True. But while jQuery is an abstraction of javascript, it is different than the ones I have listed above. You can learn to code in jQuery without knowing base javascript. I now some basics and could probably get by with a lot of help from Google, but you can learn jQuery without learning core js.

      With Sass, if you do not know CSS, you simply can’t use it. If you don’t know HTML, you won’t be able to write Haml. Coffeescript is completely worthless without even knowing at least jQuery. You must know the original language that is being abstracted or you just are not going to be able to use them. With jQuery you can skip the base and dive right in.

      Your last comment is dead on though concerning jQuery, but with the ones I mention it is the exact opposite. If you can do it in Sass/Haml/Coffeescript, you 100% know how to do it in CSS/HTML/Javascript (or some js library).

Leave a Reply