Gingerbread is Google’s XP. RT @toddogasawara: iOS 7 adoption: 87%. Kitkat adoption: 5.3%. Gingerbread 2.3 shrinking but still 17.8%
— Ross Rubin (@rossrubin) April 8, 2014Even worst, there are server side based browsers like Opera Mini still floating around 4% of global Mobile market share ... do the Math: Android KitKat is 5.3%, Opera Mini is 4%
A Common Denominator
You might wonder what have Webkit on Android 2.X or 3.X, Opera Mini, and Internet Explorer 8 or lower in common, and the answer is pretty simple: none of them properly supports ECMAScript 5 standard!This means that most of the code you find around the internet these days looks or behave broken on these browsers.
A culture that I don't approve much these days is also: "but who uses these browsers?" ... which is highly subjective accordingly with the country you live.
Of course if you have your little online shop for your little community in your little town this is not a concern for you, but if you want to be reached by the rest of the world too and without creating problems, instead of showing what you have to offer, you might want to keep reading and pay attention to details on how you can simply make everything usable for these browsers too.
Modern Patterns Down To IE6
Since my latest project, the only one fully compatible with all browsers and servers side JavaScript engines that went at least close to ES5 specifications, included Opera Mini, received only 3 stars, I've realized developers didn't like the ES6 like approach, full of already reasolved, tested, and robust patterns, I've proposed ... so I've used theprototypal namespace to bring to every browser prototypal inheritance in a way similar to what modern JavaScript does.
Meet prototypal
The namespace has two utilities so far, fully tested across all browsers and server side JavaScript engines, able to do few things, but in a cross platform working way:
var create = prototypal.create;
// yes, the null object
// available even in IE6
// and Opera Mini
var obj = create(null);
// inheritance
var a = {
prop: 123,
method: function () {
return this.prop;
}
},
b = create(a, {
prop: 456
});
b.method(); // 456
If you think es5-shim solved that for you via Object.create you are wrong since es5-sham is marked as not reliable so here prototypal.create will offer tested portability and reliability across all platforms I could try, down to IE6, Opera Mini, Android 2.X and I bet it should work even on Android 1.X too!The
create interface is very similar to the one used in lo-dash except right now lo-dash copies all properties instead of upgrading the instance where possible so, at least for this case, prototypal should be way faster than lo-dash, assuming properties won't be reused anytime anywhere more than once, which I believe is the most common daily pattern.
Classical OOP Too
I've spent quite a while behind the originalClass implementation for modern engine and it did not take much effort to support a less pattern filled version for legacy engines ... so I've put it there too without compromising much the final size, the performance, or the quality:
var Class = prototypal.Class;
var Rectangle = Class({
constructor: function (width, height) {
this.width = width;
this.height = height;
},
toString: function () {
return '[object Rectangle]';
},
area: function () {
return this.width * this.height;
}
});
var Square = Class(Rectangle, {
constructor: function (size) {
Rectangle.call(this, size, size);
},
toString: function () {
return '[object Square]';
}
});
No Strings Attached
Getters and setters, for compatibility sake we can forget about it. These are very nice patterns, but not the most necessary and to preserve compatibility and performance, we ain't gonna need them ... right?Is
null available too? Well, Class works exactly as create except it extends functions prototypes, if function is the first argument, otherwise it creates inheritance with objects, or null, too:
var Null = Class(null, {
// some optional method
// that we might want to inherit
});
var n = new Null;
n instanceof Object; // false
Once again, all of this has been tested basically everywhere and you will rarely find similar compatibility out there.
Not Only ES5: Mobile Internet Explorer
I really have enough bullshit around not supporting IE10 Mobile ... this is not the right place to tell you I have fixed even IE9 Mobile panning simulating touch events but IE10 ... for gosh sake, is a way more decent browser than any Android 2.X!Why on earth some spoiled developer decided that some library or canvas based game should not work on IE because of his/her lack of understanding of pointer events or inheritance, due silly usage of
__proto__ even when not strictly necessary, as I've just demonstrated I can have inheritance in IE6 too in an ES5 similar way, I have no idea!Remember the 2048 game? It was basically one file to add in order to support IE10 too ... and guess what happened when it finally supported IE mobile?
Good news: #2048game should now work on Windows Phone. Test it over at http://t.co/zaPLfvCSwK. Please report results!
— Gabriele Cirulli (@gabrielecirulli) March 19, 201426 retweets and 16 likes ... I've honestly no memories of last time a tweet of mine has been appreciated that much ... seriously!
Polyfill for Touch Events IE Mobile
I don't honestly know when exactly the modern internet became such a douchebag place where supporting everyone is not anymore the mandatory number 1 priority and people keep telling now and then "who uses it?", all I know is that if you really don't support IE Mobile because of your simplified touch events, you can put this polyfill upfront and deal with it!Seriously, is that simple! You add the script and magic happens, IE 10 supports Touch events and you know why? Because the proposed PointerEvents Interface is actually superior so it's pretty easy to simulate touches in there, while it's impossible to bring same interface on old Touch API.
Bear in mind, the fact we use Touch API on the mobile web ... is because we are not updated on the current leading specification about touches ... it's not that MS did something wrong, for once at least ...
The Web To The Web!
It's a tendency I keep noticing since a couple of years ... I don't know if it's because people are tired about failing and slow standard bodies, but we should never give up about the meaning of the internet: progress yes, but when it's deadly easy to support an older browser, ask yourself and your business why on earth you are not doing it ... it's your money you are eventually loosing, those users? 4% of 4 billions surfing? Who cares, right?Thanks for keeping the web reasonably accessible when you can ... I am not saying WebGL should not be used, I am saying except for WebGL that cannot be replaced, think twice before you chose any library or framework that supposes to make your life easier.
IE8 is still a thing, so are Opera Mini, old Androids, Nokia Express on Asha platform, and Symbian ... it would be our fault if these people cannot gracefully upgrade their devices and rather feel left outside the rest of the modern world that cannot wait, even if there was actually nothing to wait for.
No comments:
Post a Comment