Settings

Theme

Sprint – A high-performance, DOM library for modern browsers

github.com

138 points by sebgeelen 11 years ago · 71 comments

Reader

tshadwell 11 years ago

Or, you know, use the Javascript DOM APIs? They're really not at all that bad.

  var d = document.createElement("div");
  d.className = "new";
  d.innerHTML = "<p>Hi Sprint</p>";
Skimming through the code I'm not sure the authors really grok Javascript anyway, which might explain why they need a (pretty thin) custom API for the standard APIs. toArray should be simply this:

function toArray(o) { return Array.prototype.slice.call(o) }

Instead it's:

  var toArray = function(obj) {
    var arr = []
    var i = obj.length
    while (i--) {
      arr[i] = obj[i]
    }
    return arr
  }
This is just silly:

    prepend: function() {
      insertHTML.call(this, "afterbegin", arguments)
      return this
    },

  var insertHTML = function(position, args) {
    var argsLen = args.length
    var contents = args
[...]

  var domMethods = {
    afterbegin: function(el) {
      this.insertBefore(el, this.firstChild)
    },
Perhaps this isn't so constructive and I should fork the library and annotate every method with its vanilla Javascript equivalent. I'm sure this post is non-constructive in some respects but I like Javascript, I just wish people would learn how to work with the language it instead of replacing the API wholesale.
  • jackmoore 11 years ago

    DOM inconsistencies aside, a big advantage jQuery has over native API is that it is just as easy to work with multiple elements as it is single elements.

    Modifying your example:

        var d = document.querySelectorAll('div');
        d = Array.prototype.slice.call(d);
        d.forEach(function(el){ el.classList.add('new') });
    
    Vesus:

        $('div').addClass('new');
    • rcgs 11 years ago

      It is possible to do that without the variable assignment in JS...

          [].forEach.call(document.querySelectorAll('div'), function(el) {
              el.classList.add('new');
          });
      
      But I don't disagree that the jQuery example is easier to write/read/remember.

      Though with frameworks like Angular or React I'm beginning to question whether we should ever be writing code like this at all.

      • jackmoore 11 years ago

        Agreed. I mainly use React these days, and directly modifying the DOM is starting to feel dirty.

  • BinaryIdiot 11 years ago

    There is a lot of uses of innerHTML in this code which causes browser reflow; might get better performance creating all of the HTML components via document.createElement() and using document.createTextNode() for all text within a tag itself.

    But yeah cherry-picking may not be the most constructive thing however you do have good points. The DOM API is kinda funky (I wish it did some things like chaining) but it's very simple. Half the times I write a very thin wrapper around it JUST to provide some chaining.

    • sanderjd 11 years ago

      See, that's why I end up using these libraries. If I found myself doing the three statements for creating a div in your parent's comment, I'd pull that out into a function that does it, then I'd start finding other things to pull out as well, then I'd think "surely somebody has made a library that has these things pulled out nicely", and I'd find one of these libraries. Since I know that would happen, I just start with a library from the beginning.

      But I suppose I'd love one that is thinner, like your "very thin wrapper", if anybody has pointers.

  • rwaldron 11 years ago

    You're conflating "JavaScript the programming language" with "DOM, the awful sack of shit".

    Don't do that.

  • benjamindc 11 years ago

    I find it interesting that, because some design decisions seem odd to you at first sight, you immediately conclude that the reason is a poor understanding of JavaScript. The `toArray` function, for example, is just performance optimization: http://jsperf.com/toarray-slice-call-vs-loop

  • nicksardo 11 years ago

    Regarding toArray, the creator probably went that route to be more performant. http://jsperf.com/array-prototype-slice-call-vs-slice-call/1...

  • jackmoore 11 years ago

    > I should fork the library and annotate every method with its vanilla Javascript equivalent

    To save you some work: http://youmightnotneedjquery.com/

kmfrk 11 years ago

    A tiny, lightning fast jQuery-like library for modern browsers.
Respectfully, this entire description is an oxymoron. Every time someone mentions a jQuery-like microlibrary, they just mean a jQuery without wide browser(-quirk) support.

Browser support is a big part of what makes jQuery jQuery, and without it, you definitely get a much smaller library, but it is also very un-jQuery-like. :)

Now for some praise! It makes me really happy to see a comparison - benchmark! - with competitors, which is something everyone should be required to do, when they create software with 40,000 similar offerings. Looking at you, Markdown editors!

  • ZeroGravitas 11 years ago

    JQuery themselves have two versions, one with less browser support which is apparently smaller/faster. So it's weird to say that it's not-JQuery-like.

    Though JQuery still recommends the bigger library for most users (unless you're embedding in a mobile app or stuff like that).

    • DominikD 11 years ago

      jQuery 1.x is recommended over 2.x due to lack of IE8 support in the latter. If you don't have IE8 traffic on your site, you can safely go with 2.x (which isn't that much smaller to begin with).

      • ZeroGravitas 11 years ago

        I thought that was true, but checked a few months back and the advice seemed a bit more equivocal than that:

        > So, here’s the TL;DR for version 3.0 of the jQuery API:

        > * If you need support for the widest variety of browsers including IE8, Opera 12, Safari 5, and the like, use the jQuery-Compat 3.0.0 package. We recommend this version for most web sites, since it provides the best compatibility for all website visitors.

        > * If your web site is built only for evergreen leading-edge browsers, or is an HTML-based app contained in a webview (for example PhoneGap or Cordova) where you know which browser engines are in use, go for the jQuery 3.0.0 package.

        from http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-genera...

        I personally currently need to support IE9 which I wouldn't class as an "evergreen leading-edge browser". I was hoping for a more in depth compatibility chart that named specific versions.

    • sjwright 11 years ago

      I'd love to have a streamlined but otherwise version of JQuery which I can serve to known modern web browsers. And serve the 'full' version to non-modern browsers.

  • dheera 11 years ago

    In a horrendously framgented mobile internet, one of the few blessings we do have is that the vast majority of mobile web browsers are WebKit variants so this kind of makes a lot of sense if, say, you're only targeting iOS and Android default browsers.

    I'm curious if it will take jQuery plugins though. Will try later.

    • robin_reala 11 years ago

      iOS and default Android. If you want to ignore Firefox and Opera then that’s your choice I guess.

      • creshal 11 years ago

        The default Android browser is no longer supported, and the embedded Chrome is blink-based and less and less webkit-ish.

        (And even the different Webkit ports can't be thrown into the same bag.

        Compare e.g. Safari on OSX, Safari on Windows, Midori on Windows and Midori on Linux. Two webkit browsers, crass rendering and behavioural differences between them and on each platform.)

      • untog 11 years ago

        It would be better to say that mobile benefits from modern browsers, not just WebKit ones. I've gone without jQuery on a bunch of mobile only projects and run into zero issues.

      • ams6110 11 years ago

        GP did say "vast majority"

        If you want to devote dev time to specialize for the relative handful of folks who run Firefox on their mobile device, that's your call.

apendleton 11 years ago

Not supporting the selector for .on() and .off() is a pretty serious limitation; catching bubbled events on child DOM elements is a super-common jQuery pattern, and makes event-handling over a DOM that's having stuff added to it much more pleasant to write. It's also pretty fundamental to some third-party libraries that run on top of jQuery, like Backbone (at least if you use its View event handling).

timdaub 11 years ago

Yeah, its great that there are libraries like this that try to do better than the status quo.

But, with every new library there's always the question about support. And so since there is no involvement perceptible on its Github page (no PRs, no issues and 3months without a commit), I wouldn't want to use this in production.

  • JustSomeNobody 11 years ago

    That's the problem with all these JS libraries and frameworks. They are being written just to be written; only a handful have been vetted in production.

arnauddri 11 years ago

The readme presents it as a production-ready jquery alternative but there isn't a single test written and it looks like there's no support at all

rwaldron 11 years ago

There isn't a single test for this project. How can its claims of jQuery-alike-ness be supported?

Tests, or it doesn't exist.

  • LocalPCGuy 11 years ago

    Better yet, the author should just implement the jQuery test suite, and give a rundown of what passes and what fails.

    • rwaldron 11 years ago

      I absolutely agree with this. Several years ago I did the same exercise with Zepto, which definitively disproved its compatibility claim.

hackerboos 11 years ago

This only supports IE10+. Why shouldn't I just use Javascript directly?

  • Jgrubb 11 years ago

    Not the author, but the API still sucks to write using vanilla JS. There are also still plenty of inconsistencies in modern browsers (per an article floating around here in the last day or two).

    • smt88 11 years ago

      > the API still sucks

      If you want syntactic sugar, a better alternative to a client-side library (which has overhead) is to use something like TypeScript (or one of the other compile-to-JavaScript options).

      • anentropic 11 years ago

        they solve different problems though... syntactic sugar from TypeScript et al solve problems with Javascript the language

        jQuery solve problems with the various builtin APIs like DOM etc that are part of either Javascript or the web browser host

        • smt88 11 years ago

          I just assumed the person I was replying to was complaining about document.getElementById('whatever') (etc.) vs $('#whatever').

          In response to your comment, polyfills are more future-proof solutions to browser compatibility, which is the only remaining problem that I see jQuery as solving well.

          • Jgrubb 11 years ago

            > I just assumed the person I was replying to was complaining about document.getElementById('whatever') (etc.) vs $('#whatever')

            Actually that is what I was referring to. I must not have given TypeScript enough of a shake. I couldn't find the section in the early tutorial that showed me that sugar, and I also couldn't figure out how the typing stuff would help me working with a bunch of network-y type apps. Obviously this is my own failing. Inspired now to give it another shot, so thanks.

            • smt88 11 years ago

              It's entirely my own fault, but this has been a really muddled conversation.

              When I mentioned TypeScript, I only meant that it (and other languages that compile to JavaScript, like Go) is a better syntax overall. I didn't actually mean that it helps with DOM selection/manipulation.

              So if you want short DOM syntax, I'd suggest using vanilla ES6[1] with polyfills, and then figure out what's really wasting your time. Then, you can write your own sugar for it.

              In my opinion, document.getElementById is something that you end up writing a lot and is really long, but with autocomplete in a good IDE, it's not a big deal. Plus, any JS developer who sees it will know exactly what it does and what it returns.

              1. https://babeljs.io

  • masklinn 11 years ago

    The DOM API remains complete garbage unless you're operating readonly on a single node (then it's merely bad).

    • zodiakzz 11 years ago

      Do you have any examples? In my opinion the DOM API only sucked pre-IE9 because of all the inconsistencies and incompatibilities.

      I have dropped jQuery completely except for when I need some of its plugins because I end up having to access the internal DOM objects too often and using $el.get(0) all over the place is ugly and a PITA.

      • vbezhenar 11 years ago

            $('.something').toggleClass('collapsed')
                           .click(somethingClicked);
        
        This simple and readable statement will turn into a lot of lines with DOM API.
vbezhenar 11 years ago

I like this approach. I generally tend not to use jQuery, because native DOM API is often good enough for my needs, but it's not fun to write and read code using that API. jQuery for me is shortcuts and wrappers for this code.

tonypace 11 years ago

I am tired of terribly slow mobile sites. A demo of the difference would help.

  • creshal 11 years ago

    I ran the first benchmark linked in the readme on my mobile phone (2013 Moto G, i.e. old mid-end phone) and on my laptop (Thinkpad X230 i5-3320M), both on Firefox:

        Sprint (phone):    33.1 kops
        jquery (phone):     8.8 kops
        zepto  (phone):    10.1 kops
    
        Sprint (laptop): 1435.2 kops
        jquery (laptop):   49.2 kops
        zepto  (laptop):   65.9 kops
    
    Not bad, if that translates to real world performance.
ShahoA 11 years ago

It doesn´t seem to support the jQuery .ajax() method, I hope its added soon

latch 11 years ago

I've used [the very badly named] minified.js in the past, and I was quite happy. Has optional support for IE6.

http://minifiedjs.com

malandrew 11 years ago

virtual-dom is all you need: https://github.com/Matt-Esch/virtual-dom

There is a reason why both elm and mercury uses virtual-dom under the hood to generate and manipulate the DOM.

Plus you can render server-side: https://github.com/nthtran/vdom-to-html

If you still want to work with existing html like templates, there is this project: https://github.com/TimBeyer/html-to-vdom

camilo_u 11 years ago

How this compares to zepto? As far as i know, this is basically the same promise zepto does "A kind-of-jquery but faster (and only modern boys)"

  • hellweaver666 11 years ago

    If you read the actual page you will see there are comparisons between Zepto, Sprint and JQuery for a bunch of it's core functions.

    • rwaldron 11 years ago

      Yes, performance comparisons, but those could've been measurements of no-op versions of functions by the same name.

igvadaimon 11 years ago

I didn't find any information on browser support.

SimeVidas 11 years ago

Finally I can run .css() over 700,000 times per second. Also, the 30 KB saved over the wire means a lot because the average page size is over 1 MB.

jackmoore 11 years ago

I think this needs some text outlining it's differentiation from Zepto. Why would I use this instead of Zepto?

curiously 11 years ago

Hey guys found this neat little library

http://vanilla-js.com/

I get 12+ million operation (a true master race class) vs advertised 800,000 and peasantry of jQuery's 300,000.

Not sure if I want to sacrifice performance for aesthetically better looking (debatable ofc) syntax and bother investing time learning how to do something slower.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection