Tuesday, March 16th, 2010

Microsoft <3 jQuery

Category: jQuery, Microsoft

>Update: Here is a full set of release notes on the platform preview (called that as it is more of a shell than a browser.

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn’t see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:

  1. <script type="text/javascript">
  2.  
  3.     var product = { name: "Laptop", price: 788.67 };
  4.  
  5.     $(showProduct);
  6.  
  7.     function showProduct() {
  8.         $("#results").html( tmpl("productTemplate", product) );
  9.     }
  10.  
  11.     function formatPrice(price) {
  12.         return "$" + price;
  13.     }
  14.    
  15. </script>
  16.  
  17. <script type="text/html" id="productTemplate">
  18.     Product Name: < %= name %>
  19.     <br />
  20.     Product Price: < %= formatPrice(price) %>
  21. </script>
  22.  
  23. <div id="results"></div>

updated with info from Microsoft press release:

As part of Microsoft’s broad engagement with open source communities, Corporate Vice President Scott Guthrie today announced that Microsoft is investing resources to contribute to the development of the jQuery JavaScript Library to help improve the development process of standards-based Web applications. Microsoft will also work to provide better interoperability between ASP.NET and the jQuery JavaScript Library by enhancing ASP.NET so .NET developers can better incorporate jQuery capabilities. In addition, Microsoft will actively promote and distribute versions of the jQuery JavaScript Library by packaging it with popular products such as Microsoft Visual Studio 2010 and ASP.NET MVC 2. As a first step, Microsoft will contribute a templating engine to the jQuery JavaScript Library Team to simplify Web applications.

It is early days (preview release) but great to see a solid go at it here. I *really* want the IE9 team to help us put the Silverlight team out of business :)

Related Content:

Posted by Dion Almaer at 12:03 pm
27 Comments

+++--
3.3 rating from 65 votes

27 Comments »

Comments feed TrackBack URI

If they really want to put Silverlight out of business they better put canvas on the table for the final release.

Comment by dgavey — March 16, 2010

No XP support is really going to hurt adoption rates. :(

Comment by blepore — March 16, 2010

That seals the deal, jQuery wins. I should probably be porting stuff over right now. Microsoft wanting to invest resources in open source is a nice change, not sure how I feel about that yet, hopefully it doesn’t hurt the library in the end. Personally, jQuery is getting a bit old for me, I think resources are better spend on something fresh. Looking back we can do better these days. I’m looking forward to the day we can all get hyped over a new generation of javascript frameworks.

Comment by Jadet — March 16, 2010

Jadet,

What do you want from new libraries? Maybe if the current frameworks aren’t meeting the needs of developers, articulating those needs would help drive development. I don’t mean this glibly, it’s a genuine question.

As for me, I’m less interested in “freshness” and more interested in productivity and stability. For custom DOM development, jQuery does a great job on that front, and provides good hooks for extending its capabilities.

Comment by eyelidlessness — March 16, 2010

dgavey
They have SVG support – that’s the hard bit – they’d be crazy not to go the whole hog and add canvas. But even if they don’t – Raphael.js will work like a dream in IE now. And thats all that matters :-)

blepore
Who said no XP support?

Comment by AngusC — March 16, 2010

I think the major issue with the DOM is that it’s pretty low-level and does not provide good isolation and abstraction models. As you scale up the app complexity, direct DOM stops being feasible, and the library has to transition into an abstraction layer. That’s why I use ExtJS and a JSON-RPC services framework. I can think in terms of classes and components all the way down.
.
IE9 is looking like an outstanding browser. I still want to know about canvas, web workers and local databases, but what is already on their roadmap is “good enough”. It’s going to bring IE into line with the other browsers sufficiently to allow web apps to leap forward in richness.

Comment by Joeri — March 16, 2010

Here’s to the first browser from MS in 9 years that doesnt downright suck. Cheers!
.
MicroTemplating is a really great pattern. I’ve been using it to great extend lately in apps – wouldn’t want to be without it. I would love for it to be standardized between js libraries and backends. No reason for this to be jQuery/.NET exclusive.
.
I do hope MS leaves a gap for other libraries to wiggle their way into their MVC pattern… I still can’t see myself using jQuery for complex applications.

Comment by rasmusfl0e — March 16, 2010

This is outrageous! I predict an anti-trust case brewing.
First M$ bundle IE with Windows, now they’re bundling jQuery with Visual Studio? WTF – when will they learn to curb this anti-competitive behaviour?
.
WHAT ABOUT MOOTOOLS? They need to let the developer choose which framework to install by presenting a dialog when VS starts up. Of course, they need to present the frameworks in a random order so not to give preference to any single framework.
.
I’m disappointed Resig and Django have sold out to M$.
Guess I’ll be putting my jquery tshirt on ebay. with no reserve.

Comment by Hans888 — March 16, 2010

re: microsoft $.fn.render
has anyone even thought about what a bad idea it is to increase the jquery core k weight with a str replace style expression based templating engine? If i need it i will include it in my app as an extension.

also see http://wiki.github.com/nje/jquery/jquery-templates-proposal#discussion
“Templates should be Real DOM Elements”
the example contains a template with an img tag. The against is that templating with real dom elements would cause the img tag to request an invalid url. this is all well and good but they forgot to notice the id attribute of the main template container which will be rendered N times breaking id related selectors related to the template anyway. Using the need to protect someone from an img tag is a bad argument against the dom based method when they ignore simple rules like id’s should only appear once per document.

Templating with strings is also slow compared to dom base approaches because you cannot clone and modify only the dom elements you need.
With a string based approach inner html will have to be used to expand each populated template into dom elements before it can be appended to a document or document fragment.
Rendered callbacks are a good idea because you can use the dom manipulation approach but on a str based foundation you wouldnt have any sort of optimization from this.

It would be very interesting however if they would expand/compile the template+template psuedo code into javascript where str replace templating could become competitive performance wise. But then again do we really need more psuedo code when js can handle this sort of thing really well and one of the main reasons why jQuery is so popular?

Comment by ryanday — March 16, 2010

So we are in the Embrace stage?

Comment by amehaye — March 16, 2010

I REALLY don’t want to see Microsoft sneaking any of their poorly-architected mess into an otherwise fantastic library. I have yet to see any Microsoft code library show up without a bunch of proprietary strings attached. Sure it all works ok if you use their browser, their integrated security, yada yada.

As soon as you want to do anything like grown-up, however, things get a lot more convoluted, and that’s when Microsoft code fails.

Every time.

Comment by NerdInACan — March 16, 2010

Hm, I wonder whether the template syntax is particularly good choice. Happy escaping in JSP/GSP/ERBs…

Comment by Delarue — March 16, 2010

Ref; “Rey Bango (Ajaxian and now Microsoft employee)”
.
Wow…!
I wouldn’t expect that one coming … ;)

Comment by ThomasHansen — March 16, 2010

Canvas, WebSockets??

And “with new features from HTML5+” just sound like: “uhm, we will implement this one, and this one, and maybe this one… oh, and this one we will say we did, but we wont… maybe in a patch in 2011… and the rest we won’t do but we will blame potential security flaws…”

Yes, I “love” IE…

Comment by cope — March 16, 2010

IE9 to be faster than FF 3.7 who would have expected that…

Comment by V1 — March 16, 2010

This type of templating where markup and code are mixed is really a bad design, IMHO. This is no different from JSP, which makes it easy to “contaminate” code and markup. The template, its rendering and the data must be completely isolated to encourage reusability. From that perspective, I liked PURE templating engine (http://beebole.com/pure/) a lot since it separates all the 3 concerns in a very clean way.

PS: I don’t work for Beebole; I just use this engine in my work, which is the best templating engine, IMO.

Comment by ragjunk — March 16, 2010

@ragjunk: Seems there’s always a price to be paid… Pure polutes the markup with classnames needed for rendering data into said markup. :(

Comment by rasmusfl0e — March 16, 2010

Enhancement request: it should actually be:

$(“#results”).tmpl(“productTemplate”, product);

Shouldn’t it? The setting html part of it is understood.

Comment by functionform — March 16, 2010

That seals the deal. jQuery loses. Lie down with dogs, wake up with fleas.

More importantly, why do we care about any announcement regarding IE9? Because we want IE to support SVG, Canvas, HTML5, etc? IE9 will not make older versions of IE support these things and it will not make older versions of IE go away. IE8 is killing IE6 only because it ships with Windows7 and no matter how bad Windows7 is, most XP users have held out as long as they can so they’ve accepted that “better than Vista” == “good enough”. IE7 didn’t make a dent because it shipped with Vista. The fact is that the vast majority of IE users don’t know what a browser is or why they should upgrade or how to do so. IE9′s adoption will be tied directly Windows8′s adoption, it will further erode IE6 and IE7 but it will hardly touch IE8′s numbers. We can count on Mozilla and Webkit users to be pretty much up to date but we must always expect a significant number of IE users to be at least 2 generations behind. So expect to be able to make use of any fancy new IE9 features in about 6 years but also expect that you’ll still be dealing with whatever bugs and limitations IE9 suffers from for much longer. Or, you know, learn from the past.

Comment by okonomiyaki3000 — March 16, 2010

@V1

“IE9 to be faster than FF 3.7 who would have expected that…”

Nobody, since Firefox 3.6 is currently faster than IE 9. See the IE blog for charts on this.

Also note that Firefox 3.7 alpha 3 will also have hardware acceleration (Direct2D) support.

Comment by Jeria — March 17, 2010

@V1 Thanks for telling a word about PURE.

@ragjunk PURE has a mode that totally separates HTML and JS, as described here: http://beebole.com/pure/documentation/unobtrusive-really/

Comment by Tchvil — March 17, 2010

@Jeria

Not true, according to the chart and associated figures, the platform preview MS just released is faster than Firefox 3.7 Alpha 2.

However, talking about which browser is “faster” now isn’t very valuable. All browsers have implemented JIT and have converged on a similar level of performance. The differences between the latest versions of each isn’t significant enough to make much difference at all, which is a good thing for developers.

@okonomiakyi3000

Rant much? Unfortunately your spiel isn’t backed up by the actual market share statistics. They show IE7 certainly did “make a dent”, as it was the most popular web browser in the world this time last year. Furthermore, its market share began sharply declining as soon as IE8 was released, way before Windows 7 was available, proving that significant numbers of users are upgrading their browsers independently of upgrading the OS.

Comment by Amtiskaw — March 17, 2010

>>> All browsers have implemented JIT and have converged on a similar level of performance.

Similar performance? Chrome 5 and Opera 10.5 look to be 2x faster than IE9

Comment by Les — March 17, 2010

@tchvil: Ah – I see. But while the .render model keeps everything fairly open it also results in templates leaving very few hints of what the final html is going to look like; no placeholders for where data is merged into the markup.
.
I’d have to try it out in a production-like environment to really see the advantages/drawbacks though.

Comment by rasmusfl0e — March 17, 2010

@rasmusfl0e As there is a total separation of concern, you look at things differently. The HTML/CSS is the visual, and can be handled by a designer. The JS directives are the logic(what you see today with the ). And then the JSON data.

About an example of usage, we are releasing soon the beta of our product. Everything (except the google apps obviously) are generated through PURE: http://beebole.com/en/blog/beebole/google-chart-tools-timesheet-report/

Notice the speed. There is a as well a mobile version that has impressive rendering speed too. We’ll release a vid too.

If you use it, feel free to drop a message on the forum: http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine

Comment by Tchvil — March 17, 2010

@Amptiskaw Yeah, since “Netmarketshare” drew a graph, it must be true. Assuming their numbers are correct, what does it really show? It shows that 2 years after IE7 was released, it had barely crept above IE6 so that instead of replacing an awful browser with a slightly less awful browser, now we have two awful browsers with significant market share. Now, a year after IE8′s release, neither of them are dead but add one more piece of junk to the list of stuff we need to support.

By the way, the graph on that page would have looked much better if they drew it with SVG. Can you think of three reasons why didn’t?

Comment by okonomiyaki3000 — March 17, 2010

@okonomiyaki3000

Well, I hardly think they’d be pulling numbers out of the air, and their figures tally pretty well with a number of other sources. Do you have some alternative source of data to back up your claims? Presumably you’re basing your opinion that IE6 and IE7 are still popular on something? As for, “what does it really show?”, it shows exactly what I said in my previous post, which you ignored. It shows that, contrary to your original claim, significant numbers of IE7 users switched to IE8 even before they were required to do so by an OS upgrade. It shows that, when you said, “IE9’s adoption will be tied directly Windows8’s adoption”, you were wrong. It shows that IE7′s market share has 20% in the last year alone, and will likely be gone within a year, way before IE9 is released. Will we have to keep supporting older browsers? Yes, that’s just part of being a web developer. If you don’t like it, stop whining and go program desktop apps. But these figures show there is reason to be optimistic that within a year or so the browser landscape will look a lot different.

Comment by Amtiskaw — March 18, 2010

Leave a comment

You must be logged in to post a comment.