Tips for AngularJS in obsolete IE versions

In my last project for AngularJS one mandatory requirement was the backwards compatibility with Internet Explorer (IE). I’ve never worked with this combination. I supposed that it would be hard, as always when you need to be compatible with old IE versions. However, it was WAY much harder that i thought in the first place.

So here is my first advice if you are working with old IE versions: Don’t use AngularJS. Seriously, don’t. You are going to suffer a lot of performance and UI problems. You are going to spend much more time fixing stupid things than enjoying the good things of using AngularJS. In fact, you have to sacrifice some of the most interesting AngularJS functions, losing in many cases the sense of using that technology.

If you are reading at this point, probably is because is too late for you using another technology. In that case, I will try to help you.

  1. Check the AngularJS version. Only the version 1.2.x includes support for IE8. This is another good reason for not using AngularJS. The latest fixes and security patches won’t be in production in your system.
  2. A great performance is mandatory. This point should be common for all the projects in AngularJS and not only for those with backwards compatibility. I’m not going to talk here about general performance tips, but I would recommend to read this article.
  3. Paging via AJAX. IE is awfully bad dealing with DOM transformations. If you have to create a table with a lot of elements it’s usually a good idea to include some paging system. You have two options to do that: client or server. The client way could be hard because you have to send let’s say thousands of elements to the browser and render, hide and sort them there. This is fine for modern browsers but IE8 can explode if you try to do this. The best way is to do all this operations in the server, which is usually faster. If you are using Node.js and MySQL you may want to take a look to this article.
  4. Remove media queries. Creating a responsive website should be mandatory for most of the projects today. Bootstrap includes by default a couple of JS libraries to deal with this kind of situations. HTML5 Shiv and Respond.js try to do their work flawlessly. And the problem it’s not them, it’s IE. When you try to load a page with a lot of media queries in IE8 and you are using Respond.js, you are going to suffer some initial lag. Unacceptable lag if most of your users are going to use IE8. It’s better to remove all the media queries rather than having most of your users waiting for something they don’t even need.
  5. Get rid of the CORS operations. CORS stands for Cross-Origin Resource Sharing, and it’s awesome. It allows you to make AJAX requests from one server to another one. This is specially useful when you are dealing with APIs or internal servers in the company. Surprisingly old IE versions block the CORS requests due to “security reasons”. There is no many ways to deal with this so I had to made something by myself. I was using Node.JS so I made a small proxy to redirect all my CORS requests. This way, in the final HTML it appears a URL pointing to my own server where Node.JS is listening ready to redirect the request to the remote server and return the result. Check out this post for more information.
  6. (Optional) Use UI libraries. If you are building a professional project or you have money to spare, I’d recommend you to use an existing UI library to help you. In my case I used Kendo UI which has a great documentation, good technical support and allows you to use Angular 1.x or 2.x. When you have to deal with tables, paging, sorting, searching… that’s a lot of development time. However libraries like Kendo gives you all that tools out of the box.

That’s all. I hope to be helpful and don’t hesitate to contact me if you have any suggestion.

Good coding!

Leave a Reply

Your email address will not be published. Required fields are marked *