Wijmo And Headjs Reviews

Wijmo And Headjs Reviews

Undiscovered frontier

I love seeing new things being created to make web developers’ lives easier. Some suck, and some rock. Of course I am not the final judge. Usually I find these either from receiving a tweet or a list that shows all the stuff we, in theory, should be aware of. Two that I was intrigued by recently are Wijmo, a jQuery UI Widgets kit, and Head JS, which claims that it will be the only script you need in your head tag. Let’s get started, shall we?

Apparently Wijmo is from outer space

Aside from an attempt at humor, Wijmo makes a really bold claim:

There’s is a new highly volatile element for creating websites and web apps on earth. We call the new element “Wijmo”. Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.


Wijmo - jQuery UI Widgets kitThat last line is pretty good, because it grabbed my attention and made me think, “Ok, I’m willing to see if you can back that claim up.” I then started looking at their demo page and I’ll be damned if some of it wasn’t cool. I like their calendar and graphs, which would be something I would use. There are a ton of other widget thingies included, too, like a drop-down menu, accordion, form styling, a grid, and some other things that I didn’t really care about. What impressed me was how many things they were showing you can use.

I then downloaded it, and checked to see the size of the js file because I couldn’t find that anywhere. Usually things like this like to boast how light/small they are in the weight department. It was fairly easy to guess why they didn’t…it weighs in at a huge by large 215k! And that is the minified version! “Ok, let’s see what else is going on before you start judging,” I thought to myself.

I then check the docs page for starting your first Wijmo project, and opened up the sample index page. It doesn’t say what is specifically required, so I will assume it needs all of these scripts:

<script type="text/javascript" src="../jQuery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.blind.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.slide.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.scale.js"></script>
<script type="text/javascript" src="../jQuery/glob/jquery.glob.js"></script>
<script type="text/javascript" src="../jQuery/glob/globinfo/jquery.glob.all.js"></script>
<script type="text/javascript" src="../../jquery.wijmo.wijpopup.js"></script>
<script type="text/javascript" src="../../jquery.wijmo.wijcalendar.js"></script>

HOLY CRAP! That is 12 scripts! On the sample page included with the download there are 8! I did a swift calculation and we are looking at around 560k just for the one with 8. That seems too extreme, right? Well, I had to see what the test page was doing and ran it Firefox. Well, it is running all of the open widgets (you only get half the widgets in the open version, and all of them in the licensed one – couldn’t find price). I then started eliminating scripts to see what would happen.

Two things popped out at me. If you want to use the graphs, you need at least 6 of those scripts: jQuery, jQueryUI, jQuery.glob (whatever the ‘f’ that is), rapheal.js, the open wijmo, and the complete wijmo scripts. On top of that, raphael.js is a separate library. Which seems totally odd to require two different libraries to get a widget to work. Then it looks like there are some required stylesheets. All in all, that is a ton of http requests.

It does look like you can use only the widget script that you need, but you will still have to have a few others included to get them to work. Just after browsing though all that, I can’t say that this is a good option at all. If I were going to use a widget like what Wijmo offers, I would use jQuery Tools instead. Smaller and by the looks way easier to use.

Thoughts?

UPDATE: Wijmo has officially been released. Wijmo Complete has an introductory price of $499.

It’s all in your head!

Head JS - The only script in your headI’ve seen Head JS mentioned a few times, and my supervisor was the one that actually sent me a link to see what I thought. While it is not ready to be used in production, it is close and very cool. Basically, it loads all of your scripts in parallel so there is no page blocking. They claim that this will make your page load 100-400% times faster, and if you look at their test page, it does seem to do that. It does a lot more than that, and only weighs 2.3k. One thing I don’t like is that it says “the only script in your head,” which to me, is not true unless they want you to write all of your extra js into the head.js file itself. Which may be the case. Anyway, calling your other js files in head is easy:

head.ready("jquery", function() {
	$('#container').hide().fadeIn(3000);							  
});
 
head.js(
	{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.1"},
	{ui: "https://github.com/headjs/www/raw/master/content/test/jquery-ui.js"}
);

You will see two things going on above. The first part is just a stupid function using jQuery, and the second part is where you call the files. You’ll notice that the word jquery is in front of the first call. They allow you to give labels to the files so that instead of putting a url to the file itself, people in production will be able to just call ‘jquery’ and it will use it. Obviously the labels can be anything, but it really makes it a lot easier to know which script to use. I am going to assume because of what they show on their website, that you can use multiple libraries without any worry about conflicts.

On top of that, Head JS comes with a bunch of other stuff to make your life easier, such as: a CSS Modernizer, HTML5 enabler, a Screen Size detector, Dynamic CSS, a CSS Router (so you can target specific pages), a Browser detector, and Javascript Feature detection. That is a lot of stuff crammed into 2.3k. I can see Head JS becoming widely used once they get everything finalized.

UPDATE: DOCTYPE just did a video explaining this better than I ever could. I recommend watching it to learn more!

Ending thoughts

I think I have wrote enough about Wijmo, but Head JS looks extremely promising. Once they have a stable release I will be curious to see if the HTML5 Boilerplate will incorporate it. I read that the creator has looked into it, but said it isn’t ready yet to be included. Curious to see what the final outcome of that will be.

Some things you find out there are cool, while others suck. Either way, it is fun to find out. Let me know your thoughts on either of these, because I am very curious to read other points of view.

Coupon Code: webmachine

Tags: ,

3 Responses to “Wijmo And Headjs Reviews”

  1. Jebro says:

    You are right that Wijmo requires a lot of JS files. That’s why we have a combined and minified version in the download and in the CDN. The external files are quite a pain right now and we are working on ways to cut down on the hassle with those.

    You can see the CDN links here:
    http://wijmo.com/wijmo-0-8-2-released/

    Thanks for the feedback

    • jcDesigns says:

      Thank you very much for the comment! Slightly confused because that link shows version 0.8.2, but if you use the download button at the top, which is what I did, I got version 0.9.0.

      The Wijmo widgets are good. Like I said above, I really like the graphs. There are a few others I would use too. I am just worried about the number of dependencies to actually use them. Your Docs section is very well done, which is good because there are less questions to ask to use this.

      jQuery definitely needs this type of product, so I am glad to see there are people developing things like this. I look forward to see what you guys do for the release version, so keep up the good work sir!

      Do you guys have a set price yet for the complete version?

  2. James Dennis says:

    Be Careful of Wijmo.

    Our team built a site that used wijmo extensively. A year later, we found that ComponentOne released a newer version and replaced all of their documentation. Now, we have a website application that runs javascript code that cannot be referenced. I called ComponentOne to explain my dilemma. They stated that they would not be offering documentation for previous versions….ever. For us, this is a deal breaker. We are now looking to add to our site and will be moving away from wijmo.

Leave a Reply to James Dennis