Cross Browser JavaScript Serialization

Discussion in 'JavaScript' started by blueparukia, Jun 5, 2013.

  1. #1
    Hi,

    I was wondering the best way to serialize data in Javascript that works in older versions of IE. Need something lightweight - I do have a function for JSON.stringify() which comes in at 12kB and I feel that's a bit heavy, but it might be necessary and I only serve it to IE. Ideally I'd like to have something lightweight enough that I can serve to all browsers.

    Of course, ideals mean nothing with IE, but I'd still like to see if there's something.
     
    Solved! View solution.
    blueparukia, Jun 5, 2013 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Well jQuery lower then version 2 supports this, you want lightweight so maybe not for you.
     
    HuggyStudios, Jun 8, 2013 IP
  3. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #3
    Nah I want under 10k lol. Just going to serve a separate file to IE, using json2.js.
     
    blueparukia, Jun 8, 2013 IP
  4. #4
    My advice -- use non-standard characters you'd not use in your data sets, and then explode/split them into arrays by them. Far faster than any of that json garbage.

    I've really soured on JSON of late -- the big problem being it doesn't allow for CR/LF in the data, but in general it being far too complex for it's own damned good; admittedly I feel the same way about XML. It's sad when these formats make CSV look good.
     
    deathshadow, Jun 9, 2013 IP
  5. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #5
    Yea thought of that today, makes good sense. I'll give it a try throughout the week.

    I've never used JSON before - never really written any serious JavaScript before, it's usually just an Ajax request and a fade in, fade out for me. And I had a CMS which had an admin panel based on your accordions.

    JSON seems like an acceptable format for nested arrays, just can't believe The lack of IE support - IE8 is the new IE6 by the looks of it, which is annoying because SVGs feature prominently in this project.
     
    blueparukia, Jun 9, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    The real laugh of that? We've had SVG support in IE dating back to IE 5.0 from an Adobe plugin -- which they promptly buried the DAY they bought out Macromedia.

    To me SVG is best left in the '90's -- it was a bad idea THEN, it's even worse now since it's bloated, slow, and for all it's alleged 'scaleability' it doesn't do very well at smaller sizes. There's a reason CANVAS came into being, and that's because SVG sucks... bad...
     
    deathshadow, Jun 9, 2013 IP
  7. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #7
    Yea, really I'm surprised it's not bundled into Flash Player.

    Doesn't it have the same IE compatibility though?
     
    blueparukia, Jun 9, 2013 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Correct, but that's not why it sucks -- or perhaps I should say it's an indicator of how badly it sucks... It had a two decade head-start over Canvas, and isn't even as useful, efficient or well performing.

    It's damned near impossible to use directly, effectively useless without some sort of composition tool, at which case why the devil is it a plaintext XML format? The result of even the simplest of vectors ends up twice any 'real' vector format -- just take a look at SVG fonts for an example of that compared to the vastly superior OTF or WOFF.
     
    deathshadow, Jun 10, 2013 IP
  9. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #9
    So interactive images in browsers? Image maps, canvas, SVG or VML? :p
     
    blueparukia, Jun 10, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    You mean all the crap I'd NEVER put on a website in the first place given their total lack of graceful degradation?!?

    IF (and this is a big IF) I were to do something like that, I'd have a simple list of choices in the markup, then hide it when/if CANVAS or SVG was available. This is easier with canvas since unlike SVG it's JS reliant, and you can in the script detect it's presence. IF Canvas initializes properly, replace the list with a canvas on the DOM. That way it gracefully degrades for pre-canvas browsers to something at least usable... or for people who intentionally block scripting or fancy crap since they find the false simplicity of crap like image maps more hindrance than help.

    But I'm one of those 'creeps' who when I come across images for links often ends up screaming at the display "OH FOR **** SAKE JUST SHOW ME A LIST" -- kind of the same thing as what I do with SELECT when it's for something like a date or location, "OH FOR CRYING OUT LOUD JUST LET ME TYPE THE **** THING IN!"

    Don't piss on accessibility just for some artsy fartsy crap.
     
    deathshadow, Jun 12, 2013 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Just as an example, if I had a UL#choices with the scripting off / canvas unavailable list of values, this is the JS I'd use with Canvas

    (function() {
    
    	var
    		d = document,
    		cCanvas = d.createElement('canvas');
    		
    	if (cCanvas.getContext) {
    		p.parentNode.replaceChild(eCanvas,d.getElementById('choices'));
    		var cContext = cCanvas.getContext('2d');
    		
    		/* do whatever it is you are planning to do with canvas here */
    		
    	}
    	
    })();
    Code (markup):
    No context for the generated canvas element, list is left alone. Canvas initializes, replace the list with it. Before you delete it you could even make a copy of it and use the values stored in it to build your canvas elements destinations and things like hover text if desired. Just have an array or indexed object to associate with each element.
     
    Last edited: Jun 12, 2013
    deathshadow, Jun 12, 2013 IP
  12. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #12
    Interesting approach, I'll try and convert a few images, see how it goes.

    I haven't checked in great detail, but I'm assuming you are opposed to something like Raphael?


    EDIT: At 90kb it makes me opposed to it, and serving a list to older browsers makes more sense. I just don't like thinking of IE8 as an older browser. I'm happy to cut support for 7 and 6, but 8 is still widely used enough for me to want to workaround for it.
     
    Last edited: Jun 12, 2013
    blueparukia, Jun 12, 2013 IP