Web Development Myths On Microsoft Edge

Microsoft Edge is definitely a Modern Browser which renders HTML5 Web Standards, technically similar to IE11, Chrome, Firefox, Opera and Safari browsers. However, Microsoft Edge is very different with other browsers since there is no such as BHO (Browser Helper Object) or can run ActiveX components and Plugins. It may have extensions soon but that is not what I’m going to share on this article.

By the time I wrote this article, we can see that Microsoft Edge browser support ES6 (ECMA Script 6), in fact its already support up to 90%. We also knows that the Edge JavaScript engine so called ‘Chakra‘ has now become Open Sourced. This means developers can use this engine outside of browsers environment.

Hence, with this great news, there are some web developers that I observe from social media or forums showing off codes that is not technically correct for Microsoft Edge, although they think it works. Maybe some developers are assuming that Microsoft Edge is IE11, and let me tell you this, Microsoft Edge IS NOT IE11. I’m not going to share regarding how Microsoft build the Edge browser since Microsoft already has lots of tutorials, videos on Edge browsers history lessons since six months ago. What I’m going to share to you is the myths what web developers thinks on Microsoft Edge browser. My objective writing this is because I saw lots of web developers still not comply with HTML5 Web Standards when developing web application that target Microsoft Edge. I was thinking, is it because of what they think about Edge browser is similar to the old browsers? Maybe, maybe not, anyway I just want to help and sharing this. So, let’s list this as Web Development Myths On Microsoft Edge.


MYTH #1

Microsoft Edge is using Trident rendering engine.

FACT CHECK: FALSE!

The truth is Microsoft Edge has a new Rendering Engine called ‘EdgeHTML‘ and the JavaScript engine called ‘Chakra‘.

HOW-TO KNOW THIS

To see which Microsoft Edge and EdgeHTML version, just go to Settings (the dot-dot-dot icon on the top right) and scroll down to the bottom.

Checking EdgeHTML Version


MYTH #2

HTML Document Declaration. Some developers think that Microsoft Edge does not/cannot use this line;

FACT CHECK: FALSE!

The truth is Microsoft Edge Browser is better off using the HTML5 document type and telling the browser EdgeHTML to render as HTML5 document.

HOW-TO USE IT?

Use at the top or the first line in the HTML document before <head /> element. Example:

HTML5 Doctype in First Line


MYTH #3

In Microsoft Edge HTML document, we need to add meta information which is the User Agent (UA) compatibility as ‘Edge‘. That is;

FACT CHECK: FALSE!

The truth is ‘NO‘. You do not need to add this line, even if you targeted IE11 browser, no need to add this meta information. It does not require or even has any function in Microsoft Edge browser.

HOW-TO RESOLVE

Remove any http-equiv=”X-UA-Compatible” meta tag on the HTML document. What if you need the site to be compatible with old browsers such as IE8, IE9 or IE10? See the this on Myth #4 and #5 below.


MYTH #4

To be compatible using Edge browser, I must detect or sniff the browser User Agent string (UA String) before requesting content from the web server, so when the server respond, I can return the correct HTML version accordingly.

FACT CHECK: FALSE!

The truth is, you must avoid any sniffing or detecting browsers User Agent string for conditioning request to the web server. You should just return any request as HTML5 Web Standards contents. In some cases, you may need to sniff the browser UA string, but make sure only for checking purpose and not for conditioning of web server responses. Why? Because HTML layout/rendering engine is a fault tolerant declarative language. It wouldn’t block HTML document even if you throw any non HTML syntax. However, don’t abuse the HTML document with junks or some trash text.

HOW-TO RESOLVE THIS?

There are several ways to resolve this, first, you must remove any client or web server side code that has UA sniffing for conditioning web server responses based on that UA string. Try to avoid this and this is not recommended in HTML5 Web Standards. Make sure you have a clean HTML document. Remove any non HTML web standards syntax.

Some say; What if I need to know whether the browsers support certain features?

Yes, no issue for that. My suggestion (recommended) is to use Modernizer.js. Modernizer.js is an industrial standard JavaScript to check browsers compatibility. Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. The other way is you can just use a normal HTML which has smart fallback mechanism. For example, the code below will render normally in modern browsers and non-modern browsers, even though is using HTML5 code.

HTML5 Smart Fallback

Here is the output on Microsoft Edge:

HTML5 Renders On Edge

And here is on Microsoft IE6. Wait! What… IE6? Yes, I also try it on IE6 for testing. It does not mean you should use IE6 instead. Is just to proof that the HTML5 code works because browsers HTML layout/rendering engine are fault tolerant. It renders what it understand.

HTML5 Renders On IE6


MYTH #5

Microsoft Edge JavaScript is Slow! Like its predecessor, IE.

FACT CHECK: FALSE!

Don’t always blame the browser, where in fact lots of web developers did not optimized their codes. Here is the latest benchmark.

Chakra Performance

My opinion to this benchmark is not for you to use as an excuse to create non-proper HTML5 code. When we say HTML5, that includes the CSS3 and JavaScript. By means, all modern browsers are great. Each has its own strength and weakness. Sometimes web developers also comparing the browser specific features with one another. I tell you, it won’t have the same standards. Here is an example, let’s say iOS Safari, Apple will have its own specific CSS prefix for matching its device features such as iPhone 6S to suit their specific app. But that is not necessary for other browsers. Therefore, my suggestion is just use the proper HTML5 Web Standards that works on all browsers. Just code one HTML5, test in all browsers. If you need to use certain features, you can use Modernizr.

HOW-TO OPTIMIZE IT?

You can do benchmark by your self to test your web app by opening in Edge browser. Optimize the web by using proper HTML5 Web Standards. Scan your site using the Site Scan Tools and see which part can be optimize other than JavaScript codes. This may gain performance. You can also use Vorlon.JS if you need to debug the HTML5 on multiple browsers (including mobile browsers) to match designs, layout and compatibility.

If you need to optimize the JavaScript, you can always go use vanilla JavaScript. Don’t use too much of JavaScript libraries/frameworks. Use wisely. Microsoft Edge currently support JavaScript ES6 (Kangax ES6 Compatibility Table).

Chakra - Kangax
Taken from: https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/

MYTH #6

My web app is for LoB and is for internal use only (Intranet). We don’t need to migrate to support Microsoft Edge now, since HTML5 will not be ready before year 2022.

FACT CHECK: SUPER FALSE!

HTML5 is here. Your intranet app should have been migrated to HTML5 now or start migrating plan to HTML5 at least on the year 2013. There is nothing about Microsoft Edge only when talk about web technology. This is about better security, performance and reach as well. If you haven’t migrate the intranet app to HTML5, than you should start planning this now. HTML5 is here to stay and all web developers should migrate to HTML5 Web Standards. There is no reason for web developers cannot use HTML5. Just imagine if your colleague wants to use latest mobile phones for accessing the intranet from outside of the office building. They cannot do that since mobile browsers did not support legacy web. There is no ActiveX, no Silverlight and no custom plugins can be use. It’s is the time to use HTML5 now.

HOW-TO MIGRATE?

Here is some small myths that I observe and what should you do.

  • Most enterprises still use Windows 7, we cannot migrate: Well, you can install IE11 or latest Chrome or Firefox if you want to make it work in HTML5. You can start migrating slowly to target IE11, BUT, please use HTML5 as your plan for migration. So, not just browser migration plan. Do HTML migration plan as well.
  • My intranet requires ActiveX for our LoB app: No problem, you can use IE11 or latest Chrome or Firefox while you are planning for migration. Use it as temporary migration process. Slowly remove any BHO (browser helper object) such as ActiveX Plugins and replace with new web app development with HTML5 Web Standards. It’s more secure and more performance.
  • You don’t understand, we have hundreds of intranet web app: Personally I do understand, that is why you need a plan to migrate. Put it like this, the migration to HTML5 is your priority and you need to do it starting now.
  • I use 3rd party products for the intranet web app: Contact the vendors and ask for the updated HTML5 one. If they don’t have it, don’t use it. Use the one that has up-to-date one. My suggestion, if the vendors is using ActiveX, than replace it with proper HTML5 Web Standards only.

CONCLUSION: USE HTML5 WEB STANDARDS

Use HTML5 Web Standards if you want to target all modern web browsers. Microsoft Edge and IE11 are modern web browsers. You don’t need to worry about compatibility as long as you use proper HTML5. Proper HTML5 means this;

  1. Ensure HTML5 Rendering Mode on first line. Yes this one line <!DOCTYPE html>.
  2. Avoid Browser Sniffing and Detection for conditioning request based on browsers User Agent string.
  3. Avoid vendor specific CSS Prefixes. You cannot have the same browser features in all browsers. Therefore use the standards HTML5 one which has been ratify and supported in all modern browsers.
  4. Update your JavaScript Libraries, Please! E.g. don’t use outdated jQuery or any other JavaScript libraries. Don’t use libraries which has not being updated by the creator since. Always update to the latest version since the creator will also follow the web standards specification. In this case HTML5.
  5. Stop using Plugins! No more Silverlight, avoid Flash, no more custom ActiveX. This is not HTML5 Web Standards, that is browser legacy option and not HTML. E.g. You can now create animation using CSS3 and JavaScript. Even for 3D and vector graphics (SVG).

OTHER RESOURCES

5 ways to make your website rock on Microsoft Edge

Tune, modernise and optimise your website

Woah, I Can Test Edge & IE on a Mac & Linux!

 

One Reply to “Web Development Myths On Microsoft Edge”

  1. Nice write up. To be fair, regarding myth #1 is that EdgeHTML is a fork of Trident where they stripped it of a lot of legacy stuff and optimized it heavily.

Leave a Reply

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