This year’s Microsoft Web Summit was held in Seattle’s Belltown neighborhood and was chock-full of 30-minute sessions exploring Microsoft and partner web technologies. This conference was aimed at web developers and highlighted new technologies, projects, and updates out of Microsoft and other partnered web companies. Here are some of the most exciting projects and ideas that came out of this conference and some insight into how they can be applied to business-oriented projects.
Much of the conference was dedicated to giving updates and insight into Microsoft Edge. The event kicked off with a series of keynote speakers that detailed some of the updates to the browser and how Microsoft handles feedback. The main message of the keynote was clear: the Edge team is listening to feedback and with 330 million active monthly users they are slowly making headway changing the perception of Edge as IE rebranded. A noticeable update is that they now allow extensions, though these are hand-selected and pre-approved, making them quite different from what Chrome users are used to. Many of these updates are only available to Microsoft Insider members, however, and are rolled out on a weekly basis.
After the keynote, we learned about the security practices employed behind the scenes to make Edge secure. Nathan Starr, a Security Program Manager on the Edge team, explained the Edge team’s approach to building a safe browser and introduced us to their “Four Guards” to protect their users and make it difficult and costly for hackers to find, exploit, and leverage software vulnerabilities. The “Four Guards” consist of a Code Integrity Guard, Arbitrary Code Guard, Control Flow Guard, and the Fourth Guard. The Code Integrity Guard checks to ensure that any Tab Process that sends code down to the Kernel Memory Manager is properly signed. The Arbitrary Code Guard prevents hackers from generating or modifying code pages. The Control Flow Guard and the Fourth Guard stop hackers from hijacking browser code. In order to make these guards work, Microsoft had to leverage their influence on other tech companies to get image driver companies to change their drivers and require developers to jump through some hoops when deploying web code. As Edge matures we’ll see how these processes work in the ever-changing development landscape. I don’t doubt the implementation of the “Four Guards” will make Edge secure, but something to consider is whether or not these added layers of security will make it too difficult for developers to create dynamic applications on Edge.
With all the updates being rolled out, it’s clear Edge isn’t just a rebranded Internet Explorer, and I’m excited to see how it matures in the coming years. Even though I believe Edge will have a difficult time getting Chrome users to make the switch, Microsoft is certainly putting effort into making it an attractive choice for new browser users. Thus, gone are the days that developers everywhere can joke that IE and Edge are only being used by Microsoft employees; instead, Microsoft is slowly building a competitive browser with all the bells and whistles.
Progressive Web Applications
Progressive Web Applications (PWAs) have garnered increasing interest across the web development community. PWAs take the best aspects of web apps and mobile apps and combine them into one singular app that functions from the start, no installation required. During the web summit, we received an in-depth look at the capabilities of PWAs and how Service Workers are helping close the gap in functionality between web applications and native mobile applications.
The intent of creating PWAs is to shift from having to develop three separate application builds (one for web, one for iOS, and one for Android) to one streamlined process with all the capabilities of a mobile application. A few of the features promised with PWAs are a quick loading time, push notification capabilities, mobile home-screen icons, and a full-screen mobile experience. In an effort to change a traditional web application experience into one that mimics a native mobile application, a lot of innovation has been introduced into the web application space. An example of this is the creation of Service Workers. Service Workers work in the background of a web application and give it the ability to run background syncs, push notifications, and other capabilities that are traditionally associated with mobile applications. Service Workers make it possible to pull-up information from a user’s previous visit to the application and then update that information once their connectivity improves – no sad dinosaurs telling us we can’t connect to the internet involved. Though Service Workers give web developers a lot of new capabilities they also have quirks that need to be ironed out. Examples include: they are HTTPS only, they don’t have DOM access, the service worker script can’t be on a CDN, and they only allow async requests. Service Workers also aren’t currently available on all browsers, making it very difficult for developers to justify learning and using them at this time.
The web summit sessions on these subjects gave some insight into how web apps are changing and a possible future of apps altogether. I’m not convinced that web apps in their current form will be replacing native mobile apps anytime soon, but I do see a lot of innovation in this area and believe that PWAs will eventually be able to replace some mobile apps.
Writing Clean, Scalable Code
Microsoft has been working on many open-source and partner projects to help developers write clean, scalable code. This is done through their work on ChakraCore, TypeScript, and their partner SonarSource’s tool sonarlint. Chakracore is Microsoft’s open source JS engine that powers Microsoft Edge, gives developers just-in-time JS compilation capabilities and garbage collection, and supports the JS Runtime APIs. Microsoft’s open source project TypeScript helps scale developer’s JS by allowing them to define interfaces between software components and organize their code into dynamically-loadable modules. sonarlint is a project out of sonarsource, a company aimed at continuous quality. sonarlint is similar to many other linting services and gives you code quality and bug notifications.
Though none of these tools and services are necessarily ground-breaking I think it’s great to see Microsoft giving back to the web development community and allowing everyone to use some of their internal tools to streamline the web development process.
CSS Grid Layout
CSS Grid Layout is a cross-company collaboration to help solve some of the pitfalls faced when creating a two-dimensional web-page using a largely one-dimensional layout tool like Flexbox. CSS Grid started at Microsoft but was then taken over by MDN to make it a standard web layout. It takes away the need for multiple wrappers to give specific padding and spacing to nested elements, very exciting news for anyone who has had to wrap two of their wrappers in order to get them to sit side-by-side with some outside padding – an ordeal I’ve had to work through many times myself. It also makes it easy to divide a page into major regions and define element relationships in terms of size and position, as well as position child elements to overlap and layer – something extremely difficult to do with Flexbox.
I found this session especially compelling because I believe that with the capabilities CSS Grid brings to the table and the fact that it is being rolled out on MDN, we’ll see CSS Grid become a standard front-end library in the coming years. Though it might take some time to learn this library, I believe it will be worthwhile to ensure a page’s layout is correctly displayed and ultimately will save front-end developers time designing, developing, and testing their websites.
Payment Request API
Another cross-company collaboration that Microsoft was a part of was the development of the W3C Payment Request API, a new standard for web payment processes. The web payment check-out process is largely ubiquitous across e-commerce sites and all face similar design flaws that cause users to abandon their shopping carts. In fact, it was found that almost 70% of online shopping carts are abandoned during the checkout process. With this Payment Request API, the user avoids many of the inefficiencies that lead to an abandoned cart. Instead of a user entering in their information, a pop-up interface allows them to choose a shipping/billing address and payment method. Once the user selects the correct information they are asked to enter a previously defined secure pin to add a layer of validation and protection to the checkout process. For browsers that don’t yet support this API, the user will see a traditional checkout process, but W3C is hoping that browsers will universally adopt this soon. Currently, the Payment Request API is only supported on Chrome and Firefox, but Edge and Safari are working on adopting it with roll-out to older platforms in the coming years.
Though not all browsers currently support it, with W3C backing the adoption of this API, I believe all modern browsers will have it integrated by the end of the year.
Microsoft Web Summit 2017 showed some of the great work Microsoft has been doing not only within its own organization but across the web. As exemplified by their work on PWAs, CSS Grid Layout, and the Payment Request API, Microsoft has begun partnering with other tech companies to create better tools and libraries for every web developer. I’m excited to see what other special projects Microsoft has up its sleeves and look forward to more cross-company collaboration.