What Dropping IE<11 Means To Us

8

9

10

11

Edge

Michael K Snead

2009

2011

2012

2013

2015

11

Edge

2013

2015

This means that everything <11 has already been dropped, all at once.

Today, I want to show you how that enables us as both developers and designers.

Browser Market Share

  • IE11 at 25.5%
  • IE8 at 7.94%
  • IE9 at 5.96%
  • IE10 at 3.40%

netmarketshare.com

40,000+ websites

As of 2/11/2016

Browser Market Share

statcounter.com

  • IE11 at 10.19%
  • IE8 at 1.63%
  • IE9 at 1.29%
  • IE10 at 1.29%

In September of 2015 alone measured 16.3 billion page views

As of 2/11/2016

Browser Market Share

w3counter

  • IE11 at 6.8%
  • IE9 at 1.9%
  • IE8 at 0.9%
  • IE10 at 0.8%

37,833 websites

As of 2/11/2016

Browser Market Share

Paylocity (via Google Analytics)

  • IE11 at 31.77%
  • IE10 7.5%
  • IE9 2.81%
  • IE7 1.19%
  • IE8 0.27%

As of 2/11/2016

14,251,735 total sessions

6,208,728 in Internet Explorer

Highlights

  • ES5, some ES6, use strict
  • WebGL and Canvas
  • CSS3 (calc(), vw, media...)
  • HTML5 Audio and Video
  • SVG
  • Offline web applications
  • Spellcheck attribute
  • Iframe Sandboxing
  • New Input types
  • Webworkers (multithread!)
  • Blob/File API
  • XHR Advanced / Level 2
  • Web Sockets (live updates!)
  • Channel Messaging
  • TTF/OTF Support
  • Strict Transport
  • SPDY, HTTP2
  • Web Crypto
  • async/defer script loading
  • Performance

... a lot has happened in the last 5 years

jQuery 2+

jQuery 2+ drops support for IE8, removing lots of code that slows jQuery down.

 

If your library or framework depends on legacy jQuery features, you may be able to use jquery-migrate to keep the old API, but get the speed gains.

Angular 2, Aurelia, Ember 2

These frameworks (and more) don't support IE8, so dropping IE8 enables us to consider them as options.

React will be dropping IE8 in the next version.

New Shims / Old Shims

IE11 has full support for ES5, so you could remove any ES5 shims. It can benefit from ES6-shim, however.

 

Also, you can remove html5shiv (or modernizr if you use it purely for HTML5 shivving).

 

respond.js is no longer necessary for media queries. Selectivizr no longer needed for CSS3.
placeholder.js no longer needed for placeholder.

 

Stop using ZeroClipboard, start using clipboard.js (no flash!)

 

We should be evaluating our shims, shivs and put our CSS on a diet!

ECMAScript 5 Highlights

Arrays

var numbers = [5,10,10,15,20];

numbers.indexOf(10); //outputs 1
numbers.lastIndexOf(10); //outputs 2
//Are all values more than zero?
numbers.every(function(value, index) { return value > 0; }); //returns true
//Is at least one value equal to 5?
numbers.some(function(value, index) { return value === 5; }); //returns true
//Get values < 15
numbers.filter(function(value) { return value < 15; }); //returns [5,10,10]
//Get the total count
numbers.reduce(function(prev, current) { return prev + current; }); //returns 60

//Below outputs "5 0", "10 1", "10 2", and so on...
numbers.forEach(function(value, index) { console.log(value, index); });

console.log(Array.isArray(numbers)); //true

var people = [
 { FirstName: "Mike", LastName: "Snead" },
 { FirstName: "Aaron", LastName: "Carlo" }
];

//Below outputs an array of objects with combined FullName only
people.map(function(value, index) {
  return { FullName: value.FirstName + " " + value.LastName };
});

ECMAScript 5 Highlights

Objects

  • Object.create
    Enables classical inheritance
  • Object.defineProperty
    Allows creating true properties, as well as read or write-only properties
  • Object.keys
    Get an objects fields/properties without crawling the prototype chain
  • Object.seal, Object.freeze

ECMAScript 5 Highlights

Additional

  • String.trim is finally standard kit!
  • Can't overwrite undefined
  • parseInt() doesn't need radix
  • Reserved words as property names
    (ie: RESTful API)
  • Function.bind also standard
    (don't lose 'this', currying)
  • Date.toISOString(), Date.now(),
    new Date().toJSON()

ECMAScript 6 Highlights

  • Block-level variables with "let"*
  • Constants with "const"*
  • (some) Typed Arrays
    Real integers, floats, etc.
  • (mostly) Map, Set, WeakMap, WeakSet
  • Object.setPrototypeOf

*You should be using "use strict" and Chrome 48 requires it for let/const.

When to use a Map:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Set stores "unique" values of any type, whether primitives or object references.
With "Weak" Map/Set, objects can be garbage collected.

WebGL and Canvas

CSS3

  • writing-mode
  • letter-spacing
  • ::first-letter
  • Window.devicePixelRatio
  • page-break
  • currentColor value
  • background-attachment
  • text-align-last
  • media queries
  • background-position
  • ::placeholder
  • Cursors (new ones)
  • ::selection
  • user-select: none
  • outline
  • counters (counter-reset, counter-increment
  • better @font-face
  • :: CSS3 syntax for psuedo elements
  • CSS3 colors (ie: hsl, rgba, hsla)
  • multiple images as background
  • border images
  • CSS3 multiple column layout

(just what IE11 + Chrome + Firefox support that IE<11 didn't)

  • Viewport units (vw, vh, vmin, vmax)
  • getComputedStyle
  • Repeating Gradients
  • TTF/OTF support
  • rem (root em) units
  • more background-image options
  • font-feature-settings
  • gradients
  • calc()
  • flexbox (but with bugs :( )
  • 2D and 3D transforms
  • border-radius
  • CSS animation
  • CSS transitions
  • text-shadow
  • SVG
  • root, nth-last-child, nth-of-type, nth-of-last-type, last-child, first-of-type, last-of-type, only-child, only-of-type, empty, target, enabled, disabled, checked, not and more...
  • box-shadow

HTML5 Audio/Video

Everybody supports MPEG-4/H.264 videos.

 

Everybody supports MP3 audio.

SVG

This allows scalable graphics with animations.

 

http://snapsvg.io/demos/#coffee

Offline Applications

  • Service Workers > application cache
    AppCache is supported by everyone, but has some gotchas.
    ServiceWorkers are the future, are only supported by Chrome, Firefox and Opera.
  • localStorage and sessionStorage
    At least 5MB of data (far larger than cookies). Information never transferred to server. We've had this in IE8, though.
  • IndexedDB
    Can store files/blobs, high performance searches using indexes
  • online/offline events

Spellcheck

Not much to say here.

 

Browsers keep their own dictionaries which the user can add/edit entries of.

iframe sandbox

Do you use iframes? Use this. You can...

  • Disable plugins
  • Disable forms
  • Disable scripts
  • Disable links to other browsing contexts
  • Prevent traversing DOM or reading cookies

From MSDN:

Embedding content with an IFRAME is like announcing a party publically on Facebook. You think you know who you invited, but really you have no idea who passed it on and who'll show up.

Disable any functionality your iframe content doesn't need.

New Input Types and Features

  • Form validation
  • Datalist element
  • Range input type
  • Date and time input types
  • Number input type
  • input placeholder attribute
  • Multiple file selection
  • Email, telephone & URL input types
  • Form attribute
  • meter element
  • progress element
  • Search input type

While we will likely stick to 3rd party or citrus for much of this functionality, this may still be really useful in certain areas, such as mobile.

 

Features like "multiple file selection" provide benefits beyond citrus.

WebWorkers

Did you ever want to run CPU intensive JavaScript on the browser without blocking the main/UI thread?

Now, you can do this.

"Threading" in the browser is event driven, so you don't need to worry about things like locks.

 

Your UI thread (where most JavaScript is run today) will block only when the worker notifies that it has new data.

Blob / File API

Now you can create binary files in JavaScript, and even create links or download them to the client without touching the server.

With the FileReader API, you can actually read a file's contents (ie: files stored on the user's PC) right inside your JavaScript, without touching the server.

Advanced XHR / XHR2

We can read files and create/download them in JavaScript ... and we can also upload them asynchronously / via AJAX. No more iframes!

Similarly, you can download files (no longer just text/JSON) and access them via JavaScript.

The XHR response can now (also) be DOMString, ArrayBuffer, Blob or Document.

There are a few other features with these new, native APIs:

WebSockets

WebSockets allow us to open fast, reliable TCP connections, without the overhead of stuff like HTTP headers, cookies, etc. Also, it's a full-duplex connection, meaning that the server can send messages to the browser.

WebSockets provide for less bandwidth and less latency.

WebSockets can be huge for scalability and also for real-time applications.

Google's Ian Hickson:
"Reducing kilobytes of data to 2 bytes...and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make Web Sockets seriously interesting to Google."

Configuration to reach 600k persistent connections

WebSockets work with today's firewalls, routers and policies, too!

TTF/OTF Support

Now, finally, we can use one font format for all browsers.

TTF fonts do need to be marked (a bit set in the file) as "installable" for IE. You can patch TTF fonts with projects like this one:

https://github.com/rmuch/ttfpatch

HSTS / Strict Transport

HTTP Strict Transport Security (HSTS) is an opt-in security enhancement that is specified by a web application through the use of a special response header.

HSTS addresses the following threats:

  • Threat: User bookmarks or manually types http://example.com and is subject to a man-in-the-middle attacker
  • HSTS: automatically redirects HTTP requests to HTTPS for the target domain
  • Threat: Web application that is intended to be purely HTTPS inadvertently contains HTTP links or serves content over HTTP
  • HSTS: automatically redirects HTTP requests to HTTPS for the target domain
  • Threat: A man-in-the-middle attacker attempts to intercept traffic from a victim user using an invalid certificate and hopes the user will accept the bad certificate
  • HSTS: does not allow a user to override the invalid certificate message

HTTP2/SPDY

HTTP/2 is the future and is supported in IE11 + Windows 10.

 

SPDY is supported in IE11 everywhere else.

 

Both HTTP/2 and SPDY are focused on improving performance.

  • Multiplexing concurrency
    Several requests can be sent over the same TCP connection
  • Stream dependencies
    Client can indicate to server which resources are more important than others
  • Header compression (smaller HTTP headers)
  • Server push
    Server can send resources the client has not requested

IIS in Windows <10 will need a proxy. ASP.NET 4.6 has explicit support for HTTP/2.

Web Crypto

This provides native APIs in JavaScript to do things like generate keys, or encrypt/decrypt using algorithms like SHA-*, RSA, AES, HMAC, etc.

 

Potential use cases include multi-factor authentication, protected document exchange, document signing, protecting data integrity, secure messaging, etc.

https://www.w3.org/TR/WebCryptoAPI/#use-cases

async/defer script loading

When JavaScript is encountered on a page, the browser stops parsing HTML and will request the script and evaluate it before continuing.

 

The boolean async attribute on script elements allows the external JavaScript file to run when it's available, without delaying page load first.

 

The boolean defer attribute on script elements allows the external JavaScript file to run when the DOM is loaded, without delaying page load first.
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes

Performance

Although this may be obvious, IE11 is magnitudes faster than its predecessors ... at everything. This means we can build richer applications with fewer limitations.

One last note...

Keep looking ahead!

Microsoft is getting proactive about killing off older versions of Windows. Edge brings much more along with it.

"...[for Windows 7 or Windows 8.1] Microsoft announced today that after July 17, 2017, only the "most critical" security fixes will be released for those platforms..."

Text

Any questions?

Thanks for your time.

 

Now go build something amazing!

Made with Slides.com