How Adobe Is Moving on From Flash to Embrace HTML5
- 01 May, 2014 01:37
Steve Jobs' famous Thoughts on Flash article from April 2010 marked the beginning of the end for Adobe Flash's future on mobile. Jobs listed several reasons why iOS wouldn't support Flash. At the time, Mobile Flash was seen as a pretty hot technology and a great way to create cross-platform apps - if only Apple would just get with the times and approve it for the iPhone.
Not supporting Flash was a bold and controversial move. In short order, however, Apple's position pushed Web developers to start learning about HTML5. It also got Adobe to move beyond Flash and reinvent some of its core product offerings.
After Apple Rejected Flash, Adobe Had to Embrace Open Source
Adobe has a long history with open source - primarily in creating expensive commercial products that spur others to develop open-source alternatives. Photoshop inspired GIMP, Dreamweaver beget a passel of open-source WYSIWYG HTML editors, and Adobe's large commercial font library prompted many low-cost, free and open-source alternatives.
For years, though, Adobe and Flash seemed to compete with the Open Web. Until recently, Adobe was clearly winning, too. The free (but not open source) Flash plugin is installed in nearly every desktop browser and was the de facto standard for Web video and multimedia. Adobe's goal was to make Flash just as ubiquitous on mobile devices. When Apple rejected Flash, quashing that dream, Adobe embraced HTML5 and the Open Web wholeheartedly.
[ Commentary: What Adobe's Decision to Kill Mobile Flash Means to You ]
Adobe's problem, however, was the lack of a good alternative to Flash. HTML5 was still in its infancy, and key features still weren't well-supported in any browser, especially mobile versions. Apple's creation and open sourcing of the WebKit browser engine moved the Open Web and HTML5 a giant leap forward - but there was (and still is) a long way to go before Web standards could compete with Flash in terms of functionality, ease of development and ubiquity.
- Lack of good development tools
- Unfinished HTML5 and CSS3 standards not fully implemented anywhere
- Inability of HTML5 and CSS3 to access device functionality directly
- No way to distribute HTML5 apps in app stores
While the focus was on the death of mobile Flash, Adobe got busy pivoting to address the shortcomings of HTML5 and Web browsers in a mad dash to stay relevant in a mobile world. Adobe's efforts fall into three main categories: Web platform, open-source projects and Web tools. Let's take a closer look at each of these efforts.
Adobe's Web Platform Work
HTML5 and CSS3 promise plugin-free animation, video and typography. Many key standards remain incomplete, though, and none is widely implemented. Furthermore, good how-to documentation is hard to come by.
The Adobe-led Test the Web Forward aims to hurry HTML5 standardization by holding worldwide hackathons to recruit and train Web developers to create tests for HTML5 features. Through these events, hundreds of bugs have been found in the Web platform specifications and in browser implementations. Thanks to those efforts, we're a step closer to HTML5 actually and verifiably working the same way in every browser.
[ Feature: 8 Reasons to Gear Up For HTML5 Now ]
Adobe has been busy with proposing new specifications to fill holes in HTML5's layout and graphics capabilities as well. One such spec is Regions, now implemented in several browsers. Regions lets Web developers do something that seems basic to anyone who has used a desktop publishing tool, but that has never been possible in a browser: Link containers and flowing text between them.
Compositing and Blending Level 1, created by Adobe and recently made a W3C candidate recommendation, specifies how the colors of multiple stacked objects should be blended in browsers. Again, this is basic functionality of graphics tools but very advanced stuff in a browser.
Finally, Adobe is heavily involved not only in testing the Web but also in documenting it. The Web Platform Docs project aims to be the authoritative source for documentation of the Open Web. Along with Adobe, contributors include Apple, Facebook, Google, HP, Intel, Microsoft, Mozilla, Nokia and Opera.
Adobe's Open Source HTML5 Projects
The survival and growth of the Open Web and HTML5 on mobile devices depends not just on the creation of better standards but on their implementation as well. This is where the open source community comes into play. Adobe has a presence in several of the most important open source HTML5 mobile projects today.
WebKit, the browser engine created and open sourced by Apple from the KHTML browser engine, sparked the HTML5 mobile revolution. Prior to WebKit, mobile Web browsers were severely limited in their capabilities to display standard Web pages. With WebKit, HTML5 support on mobile devices suddenly became first-class; today it even rivals desktop browsers.
Even with a first-class browser, HTML5 apps still suffer several disadvantages when compared to native ones - namely, the application programming interfaces (APIs) for interacting with the underlying hardware aren't fully implemented yet, and app stores still dominate app distribution. To address issues, Adobe bought Nitobi in 2011 and gave its product, Phonegap, to the Apache Foundation, where it became Apache Cordova.
Cordova bundles HTML5 code as a native app on multiple mobile platforms. Unlike apps created with Flash, hybrid apps created with Phonegap are routinely accepted into the Apple App Store as well as Google Play. Besides compatibility with the app stores, the biggest benefit of Cordova is that it allows developers to write standard HTML5 code and use it to access native device features previously off-limits to Web apps.
[ More: 6 Things You Need to Know About jQuery ]
There's also jQuery Mobile, a jQuery plugin for creating mobile Web apps that simulate native app user interfaces and that function well across most modern mobile platforms. In addition contributing to this open source project, Adobe has also built tools to work with jQuery Mobile in Dreamweaver.
Adobe's HTML5 Tools and Services
Flash Professional, a powerful and polished multimedia and application development environment, has been around for many years. Adobe continues to develop and improve Flash tools, recently adding HTML5 Canvas support.
While not quite a Flash replacement, Edge Animate provides a WYSIWYG interface for creating HTML5 multimedia content. Edge also supports audio, video, responsive design, keyframe animation and more - all without plugins.
Death of Adobe Flash May Be Best Thing to Happen to HTML5
While the Flash Player browser plugin is still installed in 99 percent of desktop browsers, it's effectively dead for mobile devices (and browsers). Adobe has been watching which way the wind is blowing and is betting its future on HTML5. In doing so, it's become one of the most active contributors to the Open Web.
Apple's rejection of Flash was the end of mobile Flash, but it's probably the best thing that could have happened for the future of HTML5. After the last splash screen and plugin update notification go away, moving the Open Web forward may be Adobe Flash's most lasting legacy.
Chris Minnick runs a Web design and development company and regularly teaches HTML5 classes for Ed2Go. Ed Tittel is a full-time freelance writer and consultant who specializes in Web markup languages, information security and Windows OSes. Together, Minnick and Tittel are the authors of the forthcoming book Beginning Programming with HTML5 and CSS3 For Dummiesas well as numerous other books.
Read more about internet in CIO's Internet Drilldown.