The future of Mapael

[Indigo744]

At the suggestion of @neveldo, I would like to discuss the future of Mapael.

There are two major evolution:

1. Get rid of jQuery dependency by switching to VanillaJS
2. Switch from Raphael to another SVG library

No more jQuery dependency

jQuery is useful for:

1. abstracting browser discrepancies (especially old IE)
2. providing simple custom events support
3. providing a powerful selector engine
4. providing utility functions such as each, extend

But jQuery has the following issues:

1. Force a dependency some user don't need / don't want
2. Impact performance (albeit in a lesser extent, since Raphael is the one doing most of the heavy lifting)

Useful resource: http://youmightnotneedjquery.com And especially this document which list what jQuery handles for us.

Switch from Raphael to another SVG library

Raphael is useful for:

1. Offering old browsers support (Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+)
2. Widely used across the web (for now)

But Raphael has the following issues:

1. Suffers from poor performance
2. Documentation not up to date (see getBBox)
3. Development seems to stall (303 open issues and 40 PR waiting...)
4. Big dependency (91k minified)

Contenders for Raphael replacements are:

• SnapSVG (by the creator of Raphael)
• BonsaiJS
• SVGJS

And why not canvas-oriented library, such as:

• FabricJS
• PaperJS

I also found this useful table listing all canvas-oriented libs

All these libraries are under MIT license except SnapSVG which use Apache 2. They are usually compatible with IE9+, Firefox, Chrome, Safari, etc... However, regarding canvas, fabricjs can be made compatible with IE 8 and below using ExplorerCanvas, with the following limitation.

This article is also really interesting: it discuss the difference between SVG libraries and canvas libraries.

Some useful insights: Google Trend: the rise and fall of Raphael Google Trend: SnapSVG vs SVGjs vs BonsaiJS vs PaperJS vs FabricJS StackOverflow Trend: Raphael vs SnapSVG vs SVGjs vs BonsaiJS vs PaperJS vs FabricJS

[neveldo]

Hello @Indigo744 ,

As usual, you wrote a great post, as usual, with plenty of informations and usefull links about the future of Mapael, thanks a lot ! For my point of view, I think that one day, Mapael will need to get rid from supporting older browsers (IE9 is 6,5 years old now !). For those who want/need to support these older browsers, the older versions of Mapael will still be available !

Regarding jQuery you are right : on the hand hand, it's a lot of code (I think 95% of our usage includes selectors, extends, events handling and basic CSS/DOM manipulations that could be handled in vanilla JS I think). On the other hand, as you mentioned through a link, it's still very usefull in order to easily deal with some bugs or different behaviours among the browsers, and of course support older browser).

Regarding the SVG libary, I think that Raphael now suffer from another drawback that you didn't mention : it's doesn't support several very useful features that are available in the contenders libs. For now, I mostly think about SVG groups that we have discussed some days ago. It's a good idea to provide a Google trend link, it's very interesting to see the decline of Raphael.js vs snap.svg (which doesn't grow as fast as I thought however). In term of popularity, it seems that Raphael.js, Snap.svg and svg.js are almost equals, but BonsaiJS seems to be far behind.

For my part, I'm not familiar with canvas libraries, but you are right, it's an interesting approach to dive into. Maybe this approach should allow to get greater performances than with SVG when dealing with a large amount of area/plots ?

[neveldo]

What is your point of view about the canvas libraries ? What would be the advantages over SVG libraries ?