I’m currently sitting in SeaTac airport SEA ✈ LAX LAX airport LAX ✈ SYD, preparing to fly back to Sydney after a whirlwind trip (I landed on Tuesday afternoon, it’s currently Friday afternoon and I’m flying back 😛) over to attend the MS Edge Web Summit.
I was invited due to my contributions as a Microsoft MVP, an award that I’ve been proud to hold for 7 years now.
When I arrived in Seattle I met up with fellow MVP’s, Chris Love, Jonathan Creamer, David Wesst, Ryan Hayes and Jared Faris, then we headed to the Seattle Web Performance meetup, which was their relaunch event. It was great to meet some other people in the web community, even if us out-of-towners did out number them and we couldn’t contribute much to how the meetup should be run 😛.
Day 1
The next day was where the fun started, we rolled on up to the summit location and got ready for a day of learning.
Keynote
The event kicked off with Charles Morris keynoting the event. There was a celebration of the 2nd birthday of MS Edge, and a bit of a look at how that has gone. They had two members of the “Shell team” (the UI of MS Edge) talk about how they gather feedback to prioritise what to work on next, which includes browser/OS telemetry, internal Microsoft feedback, external feedback through the Windows Insiders program and twitter itself (they showed off two specific UI issues that have seen a lot of twitter noise, editing favorites and the address bar moving on focus). I really enjoy these kinds of insights, as someone who is vocal about what I do/don’t like, being able to understand how my feedback is consumed by the team helps humanise the process, you’re not just shouting into a void, people are listening.
The second half of the keynote was then focused on EdgeHTML, the rendering engine of Edge. There was talk about the evolution of Edge 12 - 16 (with 16 coming out in the Fall Creators Update in October, or available now on Insiders if you’re running it like me) and I also learnt that the easiest way to see what’s new in a release is https://aka.ms/devguide_edgehtml_16 and you just change the number on the end to the version you want. Charles also covered off the other resources that there are for MS Edge, like the status site, dev resources, etc. There was also talk about what’s the focus of EdgeHTML going forward and that’s broken up in 4 categories, improving the fundamentals (performance, accessibility, reliability, etc.), Progressive Web Apps (PWAs), Dev Tools (aka F12) and interop/new standards. I’m super excited about PWAs, but I’ll talk about that a bit later on.
The final part of the keynote was touching on the interop story, Apple still holds a massive share in the web developer market and *nix environments is where a lot of tools are still born. So Windows Subsystem for Linux (WSL) was introduced and as was the new partnership that the Edge team is embarking on with BrowserStack. Through this partnership Microsoft is making Edge free for both Live and Automated testing on BrowserStack, while also working with them to have the versions of Stable, Stable - 2 and vNext. This combined with the VM’s available for free make it really hard to argue that if you’re not running Windows 10 it’s too hard to test on Edge.
Building a safer browser
The second session for the day was on what the Edge team is doing to make the browser more secure, by Nathan Starr and was a dive into the low-level Windows “stuff” that is done to help secure the web. As a web developer this is not something that I ever really think about, when I think about web security I think about things like HTTPS, not putting credentials in cookies, appropriately storing passwords in a database, etc. and I’ve never really thought about things like how the browser blocks malicious actors from injecting code, rewriting memory, spawning new processes and things like that. If you want to get an appreciation for what sounds like a really hard thing to do (honestly, I didn’t understand much of what was talked about!) check it out.
PWAs and ServiceWorkers
After a break and some hallway tracks it was the topic that I think most people where there to see, Progressive Web Apps and Service Workers. This is one of the most exciting features coming to the web in recent years (I talked about it in my NDC Sydney recap) and Edge 16 ships with a fairly complete implementation behind a flag (they want feedback from users on it before considering it stable) and with WebKit recently starting development all four major browsers are now invested.
The Service Workers talk was a bit of a ‘hello world’ talk, which I’ve seen before, but what I did learn from it was that F12 already has support for Service Workers, this I didn’t know, I was relying on the Chrome dev tools! Ali also talked a bit about IndexedDB and the change in the storage limits to be pretty much unlimited, which excites me as someone who’s a know IndexedDB fan. After the session I managed to get a hallway conversation going with Ali about the missing pieces of IndexedDB in Edge. Basically it’s down to a capacity issue, his team run both Service Workers and IndexedDB, and Service Workers are the higher priority, which I guess we can live with, let’s get that shipped!
JavaScript and TypeScript
Then it was time for Brian Terlson to talk about ChakraCore and TypeScript, which was a bit about the journey of ChakraCore into being an Open Source project and why they went about doing it (mostly they couldn’t find a reason not to). He then talked about some of the performance optimisations with ChakraCore, such as the work they’ve done around minified code which, contrary to popular belief, is generally byte-for-byte slower than un-minified code. This probably comes as a shock to most web developers, but part of it is logically, minified code has more code per byte so it’ll be slower, but moreover some of the tricks to compress code as small as possible don’t result in high performance operations, such as exploiting type coercion for false with !!0 or the comma operator. Through telemetry and analysing websites they can detect these patterns and optimise for them. But there’s other optimisations that Brian talks about like deferring code parsing and others.
The TypeScript portion of the talk was encouraging people who either hadn’t looked at TypeScript, or had dismissed it in the past, to give it another look. He started with a simple JavaScript file that he added // @ts-check to the top of, which the TypeScript compiler (via VS Code as an editor) knows to try and do some level of type validation of the file. This picked upa couple of simple errors and used the JSDoc comments to do some basic type support. He then renamed it to a .ts file, removed the comment and showed how that improved detection for a few other edge cases that you might’ve missed. He also showed off the extract function feature that’s coming in the next compiler release, which is really cool and I can’t wait for!
Sonar, the web’s linter
[sonar]](https://sonarwhal.com) is something that Microsoft released earlier this year as an Open Source project under the JS Foundation (formerly the jQuery foundation) which I remember seeing announced earlier this year but I didn’t get what it was so I filed it under ‘future reading’ (which we all totally get to right 😉).
Well Antón Molleda was here to tell us all about sonar and it’s kind of the next evolution of the web compatibility tool that Microsoft released around the IE10 days that you could paste in a URL and it’d tell you a bunch of things wrong with your site.
The way it works is that it’s a node tool that you install globally or locally, and then run it against pages within your website (it doesn’t seem to do crawling at this point in time) and then it “lints” your page using defined rules against your browser set. The linting covers a number of different rules from whether you return too small an error page response (which has issues in IE and old Chrome), do you have the right Apple icons, what’s your accessibility like or do you use any libraries with JavaScript vulnerabilities. Like a standard linter you can enable/disable rules as you need but the team has taken it a step further and made it easier to disable sets of rules based on the types of browsers you’re targeting. Say you’re building a purely mobile website, well it doesn’t make sense you want to support any version of IE, as there’s no mobile device that runs that (and is supported), so you would add a browserList property to your sonar config file and say "browserList": "not ie", then bam, all rules that are specific to only IE are excluded!
Antón also showed the online version they are working on and had only got working the night before! The online one aims to help you track your linting over time.
I’m going to look at how to get it integrated into my website, but there’s a slight issue in how my 404’s work that crashed sonar (but they fixed it already for me!) and well, I got around 84 issues the that rule disabled 😟.
CSS Grids
My CSS skills are decent but are starting to become a bit dated, I know all about box model hacks from IE 6 but the newer stuff that’s come in I simply haven’t got around to learning. CSS Grids is one such thing that I see a lot of excitement on twitter but have never looked at myself. Melanie Richards, who I saw as an awesome person for the Edge team to have got, gave us an overview of CSS Grids in Edge 16. If you’re doing any sort of UI work but haven’t looked at CSS Grids yet, do yourself a favour and watch this talk. All of us MVP’s came away from that session going “wow, CSS Grids are so cool!” and that was partly how cool they are but also just how simply and elegantly Melanie explained them.
She also talked about the differences from the -ms-grid CSS properties that Edge has, which is actually the precursor to CSS Grids and how to do feature detection using @supports.
Making ecom better
If you’ve been following Edge development one of the big features they’ve been toting that they included in Edge 15 was the Web Payments API. Molly Dalton delivered a session on Web Payments that took a look back at how we do ecom and that that basically hasn’t changed since it was first done in the ‘90’s. She then showed how it works, some of the features around complex check outs and then had a representative from Shopify come up to demo how they are integrating it into their platform.
Anyone who’s working at a company that does ecom needs to be looking at Web Payments, it’s a great step forward in how we do payments online that exists in Edge, Chrome 61+, Chrome for Android 53+ and flagged in Firefox. Apple has their own thing in ApplePay but they are involved with the standards body who’s working on Web Payments so hopefully we’ll see a convergence in the future.
F12
Ahhh F12, the tools you love to hate. Jacob Rossi gave a bit of a history lesson on F12 in his session about the future of F12 in which he talked about how they really haven’t been touched since Edge first came to be.
That’s about to change. I’m a big fan of Jacob’s work, I’ve been following him as he has moved around the Web Platform team and I’m really excited to see him at the helm of F12. With Edge 16 we’ll see a few new features, like a new console that supports things like console.table, collapsing repeated messages together and styling output, some tweaks in the DOM inspector and how DOM breakpoints work, and also some really cool accessibility tools.
But the real meat of this talk is what’s coming next. Over the next while the team is going to be rebuilding the tools. One of the things that Jacob talks about is introducing a JSON based API that the tools can use to talk to the browser, rather than being baked in like they are. This is somewhat similar to how Chrome’s dev tools work, but they want to take some of the learnings from Chrome and improve on it. Why not just implement the same as Chrome? Well you’ve got to remember that the internals of Edge are quite different to Chrome (and Firefox, and WebKit), so having a one-size-fits-all approach would mean that you’d have to compromise a lot. I really like this API approach to dev tools as it means that it in theory will be easier for 3rd parties to build their own tools as well, kind of like the Chrome debugger in VS Code. Naturally all of this will take quite some time to achieve so we’ll just have to wait and see how it all plays out, and of course give feedback along the way.
Oh and they are finally added an IndexedDB explorer to F12, one feature I’ve been bugging them about since the IE10 days 😛.
How do they prioritise features?
My personal favorite talk of the day was Greg Whitworth’s talk on how they plan Edge. Greg talked through some of the stuff in the keynote, but in a lot more depth. I think that we as web developers really don’t take into consideration just how complex building a browser is, I know I don’t really appreciate how complex it is. There’s so many different sources of data to consume that feed into decisions, so many moving parts to align, etc.. One thing that I found quite interesting was how he talked about UserVoice feedback. In Edge 16 many of the top voted UserVoice features are being shipped, but there’s a bunch of other really top features that aren’t being shipped, take Shadow DOM for example. What Greg talks about is how they look at votes-over-time as well as the raw vote count. A feature (and I’m not saying that Shadow DOM is an example of this) might have a massive spike in votes, go up really high, but then drop off in people pushing for it. Where another feature might not be the #1 voted feature but it constantly gets votes. This can indicate that one feature has a wide reaching consistent pain point, where as the other might’ve been a tweetstorm driven upvote.
If you’ve only got time to watch a single session from Edge Summit I’d say watch this one.
VR, AR, MR
We had two people from the WebVR team on Edge, Nell Waliczek and Lewis Weaver talk about the new Windows Mixed Reality devices that are coming and to use them in WebVR. As a web developer WebVR is something that I’m struggling to get excited about. Don’t get me wrong, I think that VR (AR and MR) are really amazing pieces of technology, they’ll really change the way we interact with computers, but it’s just not my thing.
Don’t get me wrong, the session wasn’t a bad session, it did a good job of covering off how to get started with WebVR, talked about some of the popular libraries that you can use to get started and I got to play with one of the headsets during the mixer, but I’ll leave the development of WebVR to others and just be a consumer 😉.
Hallway track
I’ll admit that I didn’t catch the last few sessions of the day on performance and accessibility, instead I went to have some conversations with some of the Edge team who were around in the breakout area. Anyone who’s been to a conference will be aware that these kinds of conversations are just as useful and insightful as any session you might get to. I got to chat to Jacob a bit more about the planned changes around F12, chat to the people behind sonar and play with the MR headsets with some WebVR demos.
Day 2
The second day (yeah I didn’t fly to the states for just a single day, I did spent 2 days there!) myself, the other MVPs and the other invited experts were bused over to Microsoft’s campus to spend a day with the team. Unfortunately I can’t divulge what went down in much detail, it was an NDA event, but there’s a few things I can share.
WSL
We had Rich Turner from the Windows Console team talk about WSL, what their goals are and some of the inner workings of it. The way WSL works is really quite fascinating, the Windows team had to implement the Linux syscalls from scratch by observing how Linux works, they couldn’t just copy Linux’s source, or even look at it, that would result in a violation of the license. That’s crazy!
I then proceeded to grill Rich and some of his colleagues from the Windows Container/Docker for Windows team who were there around Docker, its relationship to WSL, or at least how to use it effectively from WSL. I’ve got a few things I want to experiment with that would make for a good blog post on their own.
Rich’s a really interesting guy with a great set of stories about working on the kernel and he was really happy to tell me that I’m mad when I was telling my stories about how I would prefer something to be in a Docker container than actually installed. I call nerd credit when one of the top people on the Console team tells you you’re mad!
Edge, OSS and the future
A lot of the day was more spent hanging out with groups from the team in round table discussions. While I can’t go into any specifics of what was discussed some of the key takeaways are that accessibility is a really high priority of the Edge team, performance and stability will keep a lot of people busy and if we thought the shift towards being more open (communication, releasing tools as OSS, etc.) had peaked, well it’s only getting started. If you want to help shape how the web platform works there’s no better time than the present to active.
Conclusion
I want to say a big thanks to Kyle Pflug who was one of the key organisers, and responsible for getting myself and the other MVPs there. Also a big thanks to all the Edge team who were around, I got to meet a number of people who I respect in the community and have chatted to on Twitter such as Sean Larkin, Rachel Nabors, Chris Heilmann, Antón Molleda, Patrick Kettner and many others. And on that, the number of the Edge team you can now find on Twitter is really a sign of the times with them engaging with the community.
The work in F12 really blew me away. I always figured they’d be doing something around it in the upcoming releases, I’d noticed a few things popping up recently, but never did I expect anything as big as what they are going with.
I didn’t expect to be as blown away by CSS Grid as I was, I’m ready to have a crack at it myself and see what I can do with it.
But most of all I love this new Microsoft, whether it’s the .NET team publishing everything as Open Source projects, the OS team moving to a 6 monthly release cycle or the Edge team using twitter as a primary input source to their planning.
Do yourself a favour, check out some of the talks (full agenda here), and join in the ride to make a better web for all of us.