Moving Towards a Web without Plug-Ins

The Web began as markup only, and then some script and styling. For many developers, especially us veterans, it's hard to imagine a Web without plug-ins. Since the earliest days, browser plug-ins like Flash and ActiveX have been the main way to create rich online experiences for more sophisticated Web experiences. And yet through the efforts of the industry and community, we have returned to a plug-in free Web once again. Much Web browsing today occurs on smart phones and tablets which have limited or no support for plug-ins. Modern browsers like Chrome, Firefox, and Internet Explorer 10/9 have embraced and implemented Web standards like HTML5, CSS3, and JavaScript which, in most cases, now reach feature parity with plug-ins (more on those differences later) and are more interoperable across browsers. With more than 75% of all browsers in North America now compatible with HTML5, market researcher Forrester recently said it's time to say "so long" to plug-in. "The tide," pronounced Forrester analyst Peter Sheldon, "is turning." Photo by Alejandro Escamilla on Unsplash How the heck did we get here? And, more importantly, where are -- where should -- we be going? In this six-part series, we'll take a hands-on look at the evolution of the Web to what many (including me) see as a shift toward plug-in free. I'll focus on common Web experiences that have already been written with a plug-in and show you how to convert, and enhance them with HTML5.

(To make sure we're all on the same page: Here "plug-ins" refers broadly to browser extensions that run native, i.e. not Web, client code using low-level browser interfaces. For example, hereis a basic description of Webkit's approach; the IE equivalents are ActiveX controls and Browser Helper Objects. Web sites use a wide variety of plug-in; Adobe Flash is one of the most common.)

But before we get to the "how", let's talk briefly about the "why."

What's Driving the Shift?

In many minds Apple, rightly or wrongly, famously or infamously, got the "no plug-in" ball rolling. The company, citing security and power concerns, never supported plug-in from iPhones and iPads. Since then, there's been public, sometimes personal, sometimes confusing push-pull between the tech giants: Apple, Google, and Microsoft. Much of the m.<domain> web emerged from the lack of plug-in support and the lack of web standards like device size/orientation, network directives, etc. initially, which have now evolved for use across devices and browsers. Support for plug-ins, sometimes enthusiastic, sometimes required by law, sometimes grudging, remains. But the long-term trends favoring diminishing importance of plug-in are clear:

Mobility.

We've all seen the spectacular numbers, so no need to dutifully rehash here. A couple of data point reminders will suffice. Mobile data traffic doubled each year between 2008 and 2011, according to research by Cisco. I picked this study because it looks at mobile traffic rather than the sheer number of mobile devices sold. That's a better measure, because people often stop using a device after buying a new one, and leave the old one sitting around. Then, in 2012, tablets really took off. Researcher IDC reported 52.5 million units sold in 4Q12. A full 40% were Apple devices running iOS-and no plug-in. Samsung saw stunning 263% growth quarter over quarter growth from the previous year, selling 8 million units of Android and Windows 8 mobile devices. True, those devices can run plug-in, but not so fast…

Touch.

The other big half of the mobile story is, of course, touch. Most plug-ins are not designed for touch. And these days, not touching touch is, well, a bit touched. And because they are separate applications from the browser, plug-in don't benefit from a lot of the changes in touch-optimized browsers like Internet Explorer 10 that make Websites work smoothly with touch. Photo by Alejandro Escamilla on Unsplash

HTML5.

Sure, it's far from fully baked. But standards-based technologies specified by the World Wide Web Consortium (W3C), like those ones comprising HTML5, can increasingly do much of what plug-in can do. (We'll dig into this.) These technologies have strong support across modern Web browsers. That makes it possible for developers to write the same markup and script that works across all modern browsers (in theory at least). No need to write or maintain additional code that has third-party framework and runtime dependencies. Nice. No wonder, according to Forrester's Sheldon, that "leading online brands, including Apple (!)(emphasis mine), Best Buy, Four Seasons Hotels, and Rue La La are now removing plug-in entirely and putting the features of HTML5 to use on their desktop-, mobile-, and tablet- optimized sites. He concludes: "We are at an inflection point: With consumer adoption of HTML5 capable desktop browsers widespread and Web developer understanding of the technology rapidly maturing, HTML5 is no longer an emerging toolset for mobile and tablet development. Instead, it is fast becoming the de facto standard for Web experience innovation across touch points." It's time to be mindful collectively and move the Web away from plug-in. Instead of creating yet another Web as was done with mobile, let us build one, and "bring mobile home".

Plug-Ins vs. Plug-In-Free

So those are some of the big market drivers. But as long as we're poking at proprietary plug-ins, let's very briefly point out their technical shortcomings. (Steve Jobs wasn't all wrong.) With varying degrees of arguability, it's fair to generalize about plugs-ins and their alternatives:

Resource Hogs.

Because they're essentially applications that run alongside the browser, plug-ins consume additional system resources and drain batteries. And browser vendors have a limited ability to control the actual plug-in experience to this regard. Users, typically mobile users, hate that. Plug-in free promises longer battery life.

Security Dangers. 

Historically, plug-ins have been one of the most common areas of vulnerability on the browser. More recently, browser vendors have been shipping more sandboxed versions of plug-ins to reduce the problem (example: Internet Explorer 10). But if you do include them, be sure to test independently and then within the webpage it's embedded in…across each browser.

Finicky across Browsers and OS's.

Plug-ins are based on proprietary technologies. That makes it difficult to predict or control their support across different browsers and operating systems - a real drawback in today's multi-device world. Many users don't distinguish between a plug-in and a Web browser. In their mind, it's all one user experience. So asking them to upgrade their plug-in introduces unnecessary friction (and sometime confusion), inhibiting what you really want them to do In contrast, HTML5 offers Web developers interoperability across browsers and devices, better forward compatibility, and easier overall site maintenance. Best of all, users get what they want - nothing prevents them from having a great experience on your site. And with the possibility of lowers costs of development, you can definitely see a path to being more open, more accessible, that allows you to reuse your code across multiple devices and platforms (example: Window Store apps written in HTML5). Photo by Aleks Dorohovich on Unsplash

Plug-ins will evolve

All this is not to suggest that plug-ins will have no place in the HTML5 world period. Certainly this is an evolutionary process and developers should be prepared to consider supporting both HTML5- and plug-in based experiences. Mozilla recently introduced a built-in PDF viewer component based on JavaScript and HTML5 to the beta version of Firefox 19. The foundation says the standards-based version will be more secure and safer than Adobe, Foxit or proprietary readers. Experts say safer, perhaps, but not immune. Indeed, the Web site Theme Squirrel recently highlighted the Top 15 HTML5 Plug-Ins of 2013. The list shows a rich variety of standards-based plug-in advocates say offer superior quality, security, and consistency over proprietary browser plug-ins.

Imagining a Plug-In Free World

Where does that leave us? Over the past couple of years, I've spoken to a lot of plug-in developers who always insisted you cannot do great work without plug-ins. The fact is that today with HTML5, you can successfully do most of the things you previously needed plug-ins for. Case and point, look at these sites:

• arcade.atari.com
• contrejour.ie
• pulse.me
• thehungergamesexplorer.com

Is it perfect? No. Some key HTML5 features are not as good as their plugged-in counterparts (example: HTTP LiveStreaming, DRM). Sure, there's been a lot of hype around HTML5, and, 2014, the expected finish date, still has to prove to actually be the final date. And let's be honest: Development tools for HTML5, though evolving, have ways to go. But with the new features of HTML5, combined with JavaScript, you can indeed build impressive plug-in-free sites that do the same things and as well as their "plugged-in" counterparts. So despite shortcomings, it's pretty clear we're at a tipping point. Put it all together and it means you can build your Websites and Web apps using the latest HTML5 technology without getting bogged down with plug-ins. And your app will function not only on desktops and notebooks, but mobile devices as well. Using third-party tools you can package a site into a single app to sell on a store as a mobile app. Your apps will also work very well on the new Windows 8 interface, and you can sell them in the Windows Store. This is all sounding like a good deal, is it not?

My Own Unplugging Story

Photo by Alejandro Escamilla on Unsplash A few months ago, I upgraded the hard drive on my computer. I took the opportunity to move up to Windows 8 full time. With the help of a program called VirtualBox, I installed the latest version of Ubuntu. I also downloaded the free VMs of Windows for my test matrix. In both OSs', I actively refused to install any browser plug-in. No plug-in, no Silverlight, no Java, none. For PDF files, I switch between browsers, and let IE open them outside the browser. Chrome has a native PDF viewer built in. So no plug-in there, either. Chrome does include its own version of plug-ins, but I disabled that too. My reasons were two-fold: First, I wanted to experience the Web without plug-ins and see just how usable it is. That would give me, a developer, a true feel for life without plug-ins, and whether we are really there yet. And second, as a teacher and writer, it lets me experience shortcomings firsthand so I can contribute any learning that might help to the next guy, embrace standards early and make further advances towards a plug-in-free world. The result? I'm absolutely fine. All the sites I use have shifted to plug-in-free. Yes, I occasionally run across a site that needs plug-ins. But one of two things happens: Either the plug-ins is just some kind of graphic image at the top that I can ignore, or I end up not using the site. Think about that last point. I don't use the site. I'm not the only person who has stopped using plug-ins. My prediction is that plug-ins-based sites will see a drop in visitors because so many devices (such as iOS) don't have plug-ins. Plug-ins on Android devices can be a slow, not great experience. Plus, the sheer number of iOS devices out there should make you think hard about using plug-ins, since doing so instantly excludes a big chunk of the market. And so I conclude: Now is the time to take a serious look at creating plug-in-free sites. Not as a magic, flip the switch moment, but as a quickening of a journey toward a Web with many fewer, and perhaps none, of the plug-in workarounds required today.

Our Approach: Show and Tell Using Real Sites

So that brings me back to this series. Instead of just telling you things, I will show you how to modernize actual, existing sites that use plug-ins, without using plug-ins. We won't reverse engineer or duplicate them exactly. Rather, we'll talk about the general idea of what the plug-ins apps do, then show how you can do something similar with a plug-in-free browser. Of course, for this approach to work, the browser needs to support HTML5. And which browsers are those? All of the latest major browsers. Today, in 2013, all the latest versions of the major browsers support HTML5, including IE9, IE10, and the browsers on iOS and Android devices. Stay tuned for part 2 in our series...

About the Author Jeff Cogswell has nearly 25 years of experience as both a software engineer and a professional writer. He has worked on development teams, doing everything from low-level C programming on Unix up to high-level web development. In the past decade he has focused his work primarily on web development, including mastering such technologies as server-side programming with C#, and client-side programming such as HTML, XML, JavaScript, and Adobe tools, and now HTML5. He has authored numerous books, including C++ All-in-One for Dummies. He writes regular columns for SourceForge and SlashDot, including columns on parallel programming and development.

(dpe)