HTML5 http://rickgaribay.net/category/46.aspx HTML5 en-US Rick G. Garibay rickgaribay@hotmail.com Subtext Version 1.9.5.176 Azure Conf Session is Up http://rickgaribay.net/archive/2012/11/16/azure-conf-session-is-up.aspx <p>I had a total blast delivering my session on WebSockets on Windows Azure at <a href="http://channel9.msdn.com/Events/WindowsAzureConf/2012" target="_blank">AzureConf</a> on Wednesday and am pleased to share that the recording of my session is now up.</p> <p>You can view it by clicking below or <a href="http://channel9.msdn.com/Events/WindowsAzureConf/2012/A01" target="_blank">follow this link to view on Channel 9</a> along with a number of other fantastic sessions that highlight how MVPs are using Windows Azure today.</p> <p><a href="http://channel9.msdn.com/Events/WindowsAzureConf/2012/A01" target="_blank"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://rickgaribay.net/images/rickgaribay_net/Windows-Live-Writer/4af85884bd01_EAC3/image_3.png" width="553" height="484" /></a></p> <p>Thanks again to Brady, Cory and team for an amazing event!</p><img src="http://rickgaribay.net/aggbug/351.aspx" width="1" height="1" /> Rick G. Garibay http://rickgaribay.net/archive/2012/11/16/azure-conf-session-is-up.aspx Fri, 16 Nov 2012 23:45:55 GMT http://rickgaribay.net/archive/2012/11/16/azure-conf-session-is-up.aspx#feedback 1 http://rickgaribay.net/comments/commentRss/351.aspx http://rickgaribay.net/services/trackbacks/351.aspx Building Speedy Azure Applications with HTML5 and Web Sockets Today http://rickgaribay.net/archive/2012/03/29/building-speedy-azure-applications-with-html5-and-web-sockets-today.aspx <p>I had the pleasure of presenting at Spring DevConnections today in Las Vegas and as promised, below are the samples for each of my demos.</p> <p>To recap. WebSocket brings full-duplex, bi-directional TCP sockets to web, desktop and mobile applications, introducing an alternative to XHR and long-polling, particularly when latency is a primary focus. What makes WebSocket so significant to developers in addition to providing a direct, socket-based connection is that it is standardized by both the IETF Hybi working group and W3C which has brought wide industry support across both browser vendors implementing the client support and platform vendors providing support for building WebSocket servers. </p> <p><a href="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image.png"><img style="background-image: none; border-right-width: 0px; margin: 2px 8px 2px 2px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" align="left" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_thumb.png" width="244" height="133" /></a>Microsoft has been an early champion of the WebSocket protocol, sharing some early investments via HTML5 <a href="http://html5labs.interoperabilitybridges.com/" target="_blank">Interoperability Labs</a> website and maintaining that investment with support for the WebSocket protocol announced at //Build 11 which introduced WebSocket support to Windows 8, Windows Server 8. .NET 4.5 and IE 10 Developer Preview based on the hybi-10 specification.</p> <p><a href="https://www.windowsazure.com/nodejs" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" align="right" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_3.png" width="244" height="110" /></a>With the release of .NET 4.5 Beta 1, all of the above have been updated to RFC 6455, which is the latest specification and expected to be final. </p> <p>Along with broad native support for WebSockets in modern browsers like Chrome, IE 10, Safari and FireFox, the standardization dust has settled making this the right time to jump in.</p> <p>In my talk, we took a lap around the WebSocket support in .NET 4.5, highlighting the APIs that Microsoft has made available in the Microsoft.WebSocket namespace that ships <a href="http://nuget.org/packages/Microsoft.WebSockets" target="_blank">as a package on NuGet</a>. While you can go as deep as you want in the new System.Net.WebSockets namespace that forms the core of Microsoft’s investment in the protocol, the Microsoft.WebSocket package provides higher level abstractions for developing WebSocket solutions today with WCF using WebSocketService and ASP.NET using WebSocketHandler.</p> <p>Since .NET 4.5 and Window 8/Server 8 have not yet been released, it is currently not possible to deploy your .NET 4.5 applications to Windows Azure. That said, while Windows Azure will certainly be updated to support these key technologies following RTM, Azure supports a variety of non-Microsoft programming languages and platforms including Node.js. </p> <p>Demonstrating the latest <a href="https://www.windowsazure.com/nodejs" target="_blank">Azure SDK for Node.js</a>, we got a fully RFC 6455 complain WebSocket service up and running on Windows Azure in a worker role running Node.js and using the WebSocket.IO module to integrate with Twitter’s Streaming API which provides a one-way firehose for tapping into Twitter’s event stream which proved to be a great example of using these capabilities together while having a little fun with HTML 5 JQuery and CSS 3.</p> <div align="center"> <table border="1" cellspacing="0" cellpadding="2" width="1366"><tbody> <tr> <td valign="top" width="81"> <p align="center"><strong>Demo</strong></p> </td> <td valign="top" width="562"> <p align="center"><strong>Summary</strong></p> </td> <td valign="top" width="472"> <p align="center"><strong>Artifacts</strong></p> </td> <td valign="top" width="249"> </td> </tr> <tr> <td valign="top" width="81">Demo 1</td> <td valign="top" width="562"> <p align="left">Live chat sample of Silverlight-based client and WCF Service running on Windows Azure. <br /> <br />Please note that this implementation is deprecated and will not be carried forward. <br /> <br />Instead, please use .NET 4.5 WebSocket support in WCF and ASP.NET. <br /></p> </td> <td valign="top" width="472"> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"><a title="http://html5labs.cloudapp.net/WebSockets/ChatDemo/wsdemo.html" href="http://html5labs.cloudapp.net/WebSockets/ChatDemo/wsdemo.html">http://html5labs.cloudapp.net/WebSockets/ChatDemo/wsdemo.html</a></p> </td> <td valign="top" width="249"> <p align="left"><a href="http://html5labs.cloudapp.net/WebSockets/ChatDemo/wsdemo.html"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_4.png" width="244" height="203" /></a></p> </td> </tr> <tr> <td valign="top" width="81"> <p align="left">Demo 2</p> </td> <td valign="top" width="562"> <p align="left">Simple “Hello World” example of ASP.NET ASHX handler using WebSocketHandler and HTML 5 client demonstrating a trivial “echo” service that displays the date/time each second. <br /> <br />Also included in the Demo 2 folder is a WCF version of the same implementation (which I did not demo during my talk). <br /></p> </td> <td valign="top" width="472"> <p align="center"> </p> <p align="center"><a title="http://sdrv.ms/HofK53" href="http://sdrv.ms/HofK53">http://sdrv.ms/HofK53</a> </p> <p align="center"> <br />Projects: <br />SimpleEventingSample <br />SimpleEventingService <br /> <br />Requires Visual Studio 11 Beta 1 &amp; Windows 8/Windows 8 Server</p> </td> <td valign="top" width="249"> <p align="left"><a href="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_5.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_thumb_3.png" width="244" height="190" /></a></p> </td> </tr> <tr> <td valign="top" width="81"> <p align="left">Demo 3</p> </td> <td valign="top" width="562"> <p align="left">Example of using the Twitter Search API as an event stream with WCF using  WebSocketService, Linq to Twitter and HTML 5 with some nice JQuery and CSS animation. <br /></p> </td> <td valign="top" width="472"> <p align="center"><a title="http://sdrv.ms/HofK53" href="http://sdrv.ms/HofK53">http://sdrv.ms/HofK53</a> <br /> <br />Projects: <br />StatusStreamClient <br />StatusStreamService <br />StatusStreamServiceTests <br /> <br /></p> <p align="center">Requires Visual Studio 11 Beta 1 &amp; Windows 8/Windows 8 Server</p> </td> <td valign="top" width="249"> <p align="left"><a href="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_6.png"><img style="border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_thumb_4.png" width="244" height="113" /></a></p> </td> </tr> <tr> <td valign="top" width="81"> <p align="left">Demo 4</p> </td> <td valign="top" width="562"> <p align="left">Another event streaming example, this time using the Twitter Streaming API, Node.js and WebSocket.IO in Windows Azure and HTML 5 animations with CSS 3 box shadow and rotate. <br /> <br />As opposed to the Twitter Search API used in Demo 3, you can see that events are immediately captured and the Streaming API is much more reliable than the Search API. <br /></p> </td> <td valign="top" width="472"> <p align="center"> </p> <p align="center"> </p> <p align="center"><a title="http://sdrv.ms/H1DVru" href="http://sdrv.ms/H1DVru">http://sdrv.ms/H1DVru</a></p> <p align="center"> <br />Use any text editor or your favorite JavaScript IDE. <br /></p> </td> <td valign="top" width="249"> <p align="left"><a href="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_thumb_5.png" width="244" height="183" /></a></p> </td> </tr> <tr> <td valign="top" width="81"> <p align="left">Deck</p> </td> <td valign="top" width="562"> <p align="left"></p> </td> <td valign="top" width="472"><a title="http://sdrv.ms/Hf5oZB" href="http://sdrv.ms/Hf5oZB"> <br /> <br /> <br />http://sdrv.ms/Hf5oZB</a></td> <td valign="top" width="249"><iframe style="padding-bottom: 0px; background-color: #fcfcfc; padding-left: 0px; width: 204px; padding-right: 0px; height: 118px; padding-top: 0px" title="Preview" height="120" marginheight="0" src="https://skydrive.live.com/embed?cid=DF930EE6F91132FD&amp;resid=DF930EE6F91132FD%21751&amp;authkey=ALQ9gS4_Yvb89c0" frameborder="0" width="98" marginwidth="0" scrolling="no"></iframe></td> </tr> </tbody></table> </div> <div align="center"> </div> <p>Please feel free to play with any of the samples, extend them and make them your own.</p> <p>Please remember that demos 2 and 3 require .NET 4.5 Consumer Preview and either Windows 8 or <a href="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_8.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" align="right" src="http://rickgaribay.net/Images/customcontent/c1f79a9417a5_B3EF/image_thumb_6.png" width="644" height="356" /></a>Windows 8 server.</p> <p>Since the Microsoft.WebSockets NuGet package is the easiest way to get started with WebSocketHandler and WebSocketService, I’d recommend starting with Demo 2 and Demo 3. </p> <p>For demo 4, you will need an Azure account which you can sign up for free (really, free) at <a href="http://azure.com">http://azure.com</a> </p> <p>As we discussed during my talk, even though .NET 4.5 and Windows 8 are not yet RTM:</p> <p>•Now is the time to dive into WebSockets in .NET 4.5!</p> <p>•Consider how WebSockets can improve existing near real-time messaging scenarios.</p> <p>•Start building WebSocket apps on Windows 8 and Windows Server 8 today.</p> <p>•.NET 4.5 support in Windows Azure is coming soon. In the meantime, consider alternate frameworks like Node.js which is supported today!</p> <p>Last but not least, here are the resources I provided on my last slide for easy access:</p> <p>•Microsoft.Web.WebSockets NuGet Package: <a href="http://nuget.org/packages/Microsoft.WebSockets">http://nuget.org/packages/Microsoft.WebSockets</a></p> <p>•Paul Batum’s blog: <a href="http://www.paulbatum.com/2011/09/getting-started-with-websockets-in.html">http://www.paulbatum.com/2011/09/getting-started-with-websockets-in.html</a></p> <p>•Damir Dobric’s blog on WCF WebSockets: <a href="http://developers.de/blogs/damir_dobric/archive/2011/11/26/wcf-duplex-via-websocket.aspx">http://developers.de/blogs/damir_dobric/archive/2011/11/26/wcf-duplex-via-websocket.aspx</a></p> <p>•ASP.NET Documentation: </p> <p>●<a href="http://msdn.microsoft.com/en-us/library/system.web.websockets(v=vs.110).aspx">http://msdn.microsoft.com/en-us/library/system.web.websockets%28v=vs.110%29.aspx</a></p> <p>●<a href="http://msdn.microsoft.com/en-us/library/system.net.websockets(v=vs.110).aspx">http://msdn.microsoft.com/en-us/library/system.net.websockets%28v=vs.110%29.aspx</a></p> <p>•WebSocket.IO: <a href="https://github.com/learnboost/websocket.io">https://github.com/learnboost/websocket.io</a></p> <p>•Nice CSS &amp; JQuery scripts/samples: <a href="http://marcofolio.net">http://marcofolio.net</a></p> <p>Last but not least, I’d like to thank <a href="http://twitter.com/paulbatum" target="_blank">@paulbatum</a>, PM at Microsoft working on the WCF and ASP.NET  WebSocket features for helping me grok WebSockets in .NET 4.5. His guidance and thought leadership around WebSocket are invaluable to the community, so if you run into Paul, thank him or better yet, buy him a beer.</p> <p>Happy Messaging!</p><img src="http://rickgaribay.net/aggbug/337.aspx" width="1" height="1" /> Rick G. Garibay http://rickgaribay.net/archive/2012/03/29/building-speedy-azure-applications-with-html5-and-web-sockets-today.aspx Thu, 29 Mar 2012 07:15:00 GMT http://rickgaribay.net/archive/2012/03/29/building-speedy-azure-applications-with-html5-and-web-sockets-today.aspx#feedback http://rickgaribay.net/comments/commentRss/337.aspx http://rickgaribay.net/services/trackbacks/337.aspx HMTL5 Web Camp Phoenix&ndash;The Goods http://rickgaribay.net/archive/2011/09/30/hmtl5-web-camp-phoenixndashthe-goods.aspx <table> <tbody> <tr> <td valign="top" width="1237"> <p><font color="#ff0000"><strong>UPDATE:</strong></font> <a target="_blank" href="http://twitter.com/palermo4">Michael Palermo</a> has <a target="_blank" href="http://www.palermo4.com/page/HTML5-Web-Camp-Videos.aspx">posted the video recordings of each session on his blog</a>, including <a target="_blank" href="http://www.palermo4.com/page/Video-Practical-HTML5.aspx">my session</a> which I have also included below to the right. Enjoy!</p> <p>I had the pleasure of presenting at <a target="_blank" href="https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032494096&amp;Culture=en-US">HTML5 Web Camp Phoenix</a> this morning.</p> <p>The event was very well attended with over 165 developers and designers from the valley in attendance.</p> <p><a href="http://rickgaribay.net/images/rickgaribay_net/Windows-Live-Writer/HMTL5-Web-Camp-Phoenix_D715/411410003_2.jpg"><img style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 0px; MARGIN: 4px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px" title="411410003" border="0" alt="411410003" align="left" width="240" height="180" src="http://rickgaribay.net/images/rickgaribay_net/Windows-Live-Writer/HMTL5-Web-Camp-Phoenix_D715/411410003_thumb.jpg" /></a>We had quite a line up with <a target="_blank" href="http://twitter.com/stefsull">@stefsull</a> delivering a fantastic keynote, followed by my talk on pragmatically adoption HTMl5. <a target="_blank" href="http://twitter.com/jguadagno">@jguadagno</a> and <a href="http://twitter.com/palermo4">@palermo4</a> discussed new CSS3 support and lastly, <a target="_blank" href="http://twitter.com/danwahlin">@danwahlin</a> and <a target="_blank" href="http://twitter.com/palermo4">@palermo4</a> closing us out with The New UX (audio, video, canvas…).</p> <p>I shared my thoughts on the magnitude of HTML5 in my recent <a target="_blank" href="http://rickgaribay.net/archive/2011/08/22/a-middle-tier-guyrsquos-take-on-html-5.aspx">blog post</a> and was fortunate to have the opportunity to share my insights with the community at large. To quickly recap my talk on Pragmatic HTML5, I shared the various techniques and best practices for determining new HTMl5 feature support, including techniques for checking for GeoLocation, Canvas, Video and Input types. I also showed how to enable Semantic Element support in non-modern browsers with HTML5Shiv. </p> <p>I wrapped up with a discussion on Polyfills/shims, showcasing the new<a href="http://rickgaribay.net/images/rickgaribay_net/Windows-Live-Writer/HMTL5-Web-Camp-Phoenix_D715/Photo_A014DF01-820A-8A46-02AE-E6FB01B6FA80_2.jpg"><img style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 0px; MARGIN: 2px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: right; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px" title="Photo_A014DF01-820A-8A46-02AE-E6FB01B6FA80" border="0" alt="Photo_A014DF01-820A-8A46-02AE-E6FB01B6FA80" align="right" width="240" height="180" src="http://rickgaribay.net/images/rickgaribay_net/Windows-Live-Writer/HMTL5-Web-Camp-Phoenix_D715/Photo_A014DF01-820A-8A46-02AE-E6FB01B6FA80_thumb.jpg" /></a> WCF WebSockets client library and server by running a local WebSocket server that hosted a bi-directional chat service and a couple HTML5 clients exchanging messages back and forth. The same WebSockets demo is available at <a target="_blank" href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/download">HTML5 Labs</a> with a sample showing the WCF WebSocket server hosted in Windows Azure and you can also grab the demo I showed by clicking the download link below. </p> <p>Lastly, here are some essential resources I used in my presentation and demos:</p> <ul> <li><a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Enabling Semantic Element Support</a> </li> <li><a href="http://ejohn.org/blog/html5-shiv/">HTML5Shiv</a> </li> <li><a target="_blank" href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">Good list of Polyfills</a> </li> <li><a href="http://html5test.com/">HTML5 Test</a> </li> <li><a href="http://fmbip.com/">http://fmbip.com/</a> </li> <li><a href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/download">HTML5 Labs</a> </li> <li><a href="http://www.findmebyip.com/litmus">http://</a><a href="http://www.findmebyip.com/litmus">www.findmebyip.com/litmus</a> </li> <li><a target="_blank" href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027/ref=sr_1_1?ie=UTF8&amp;qid=1317423772&amp;sr=8-1">HTML5 Up &amp; Running by Mark Pilgrim</a> </li> </ul> <p>It was a pleasure sharing in this great community event and I’d like to thank @palermo4 and Microsoft for inviting me to be a part of it.</p> <p><img style="MARGIN: 2px auto; DISPLAY: block; FLOAT: none" width="136" height="92" alt="" src="http://netdna.webdesignerdepot.com/uploads/html5_resource_guide/html5logo.jpg" /></p> </td> <td width="543"> <table border="1" cellspacing="0" cellpadding="2" width="775"> <tbody> <tr> <td valign="top" width="369"><font size="3">Practical HTML5 Deck</font></td> <td valign="top" width="404"><iframe height="327" src="http://r.office.microsoft.com/r/rlidPowerPointEmbed?p1=1&amp;p2=1&amp;p3=SDDF930EE6F91132FD!367&amp;p4=&amp;kip=1" frameborder="0" width="402" scrolling="no"></iframe></td> </tr> <tr> <td valign="top" width="369"><font size="3">Semantic Element and Modernizr Demos</font></td> <td valign="top" width="404" align="center"><iframe style="PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fcfcfc; PADDING-LEFT: 0px; WIDTH: 98px; PADDING-RIGHT: 0px; HEIGHT: 115px; PADDING-TOP: 0px" title="Preview" marginheight="0" src="https://skydrive.live.com/embedicon.aspx/Public/Talks/HTML5Demos1and2.zip?cid=df930ee6f91132fd&amp;sc=documents" frameborder="0" marginwidth="0" scrolling="no"></iframe></td> </tr> <tr> <td valign="top" width="369"><font size="3">WCF Web Socket Demo</font></td> <td valign="top" width="404" align="center"><iframe style="PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fcfcfc; PADDING-LEFT: 0px; WIDTH: 98px; PADDING-RIGHT: 0px; HEIGHT: 115px; PADDING-TOP: 0px" title="Preview" marginheight="0" src="https://skydrive.live.com/embedicon.aspx/Public/Talks/websocketssamples.zip?cid=df930ee6f91132fd&amp;sc=documents" frameborder="0" marginwidth="0" scrolling="no"></iframe></td> </tr> <tr> <td valign="top" width="369"><font size="3"><font color="#ff0000"><strong>NEW! </strong></font>Video Recording</font></td> <td valign="top" width="404"><iframe style="WIDTH: 403px; HEIGHT: 301px" height="274" marginheight="0" src="http://www.nextslide.com/MicrosoftSouthwestDPE/rick-garaby-on-html5-and-css3/embedded?layout=FullLeft" frameborder="0" width="682" marginwidth="0" scrolling="no"></iframe></td> </tr> </tbody> </table> </td> </tr> </tbody> </table><img src="http://rickgaribay.net/aggbug/316.aspx" width="1" height="1" /> Rick G. Garibay http://rickgaribay.net/archive/2011/09/30/hmtl5-web-camp-phoenixndashthe-goods.aspx Fri, 30 Sep 2011 23:25:38 GMT http://rickgaribay.net/archive/2011/09/30/hmtl5-web-camp-phoenixndashthe-goods.aspx#feedback 2 http://rickgaribay.net/comments/commentRss/316.aspx http://rickgaribay.net/services/trackbacks/316.aspx A Middle-Tier Guy&rsquo;s Take on HTML 5 http://rickgaribay.net/archive/2011/08/22/a-middle-tier-guyrsquos-take-on-html-5.aspx <p><strong></strong></p> <p><strong>(My) Early Beginnings</strong></p> <p>I started my career in software development as a very junior web developer in 1999. I taught myself HTML, VBScript and JavaScript. The browser wars between Microsoft and Netscape were raging. I still remember how exciting my first Classic ASP page was. The fact that I was able to connect to an Access or SQL Server 7 database with just a few lines of code inside my markup was incredible at the time. I consumed new recipes from “4 Guys from Rolla” with relish and kept Scott Mitchell’s titles like “Teach Yourself Classic ASP 3.0 in 21 Days” on my desk at all times (it’s still on my bookshelf which itself has become a sort of Smithsonian for software development over the last decade). Even more exciting was that fact that it seemed like the beginning of a new era in which I could relegate JavaScript as a necessary evil for handling tricks like focus and validation on the UI. </p> <p>At the time, I was doing some really fun and interesting work as a young Padawan for the credit card division inside the #1 Visa issuer in the country (we didn’t have a fancy name for it other than “reports” back then but we were doing very early work on what would become “BI”). By rendering data-driven operational reports dynamically on the browser, we had revolutionized how metrics like Occupancy, Average Handle Time, and Multiple-Call-Rate were disseminated within the bank ushering in a new era of productivity, transparency and accountability for everyone from agent to VP. Through this experience, we built a center of excellence which served as a benchmark for other call centers to follow (in fact, we had the likes of Amex come in and review how we did it). Sure, we had displaced an army of Excel Macro and Access developers, but such was the price of progress.  As this little rogue IT shop basking in our success, I remember a number of “true programmer” personas in the “Real IT” group that tended to undermine what was happening. These were programmers who came from C++ or Java (and whose managers felt threatened by what we were able to do with such few resources) and mostly thumbed their nose at things like lack of strong typing, OO, etc. They looked at JavaScript as just a tool for dirty hippie web masters (remember that term) and VBScript as as something OK for administrators to use to walk AD hives, but being inferior for lacking OO and being handicapped by things like variants. Despite our incredibly visible success (at the CEO level and above) by applying these scripting technologies, I was hungry to see the forest for the trees and experimented a bit with COM and COM+, learning how to encapsulate business logic in components and delighting in being able to wire up my COM libraries with Classic ASP even though with the exception of my manager and mentor at the time, no one else even had the tools to debug my components. </p> <p><strong>The Server Era</strong></p> <p>Then, this thing called Windows DNA came along which promised to marry Windows, ActiveX and Internet into one big cluster… well you know. Fortunately, it’s fate was short-lived, but I remember attending a couple MSDN events where it seemed like concurrency and single threaded apartments would become mainstream topics on the web. Maybe us script kiddies would earn some respect after all? Then, just like that, this new, new thing called .NET happened. All of a sudden, just like that, I had a ton to learn. All my Classic ASP and JavaScript skills were superseded by Web Forms. I still remember stepping through every line of code in the I Buy Spy reference app and being completely blow away. ASP.NET offered something that was OO, strongly typed, and would even render JavaScript for you. Cumbersome JavaScript validation was replaced by server-side templates and controls. Form fields magically remembered their values across post backs. And, as I learned, WebForms offered a better separation of concerns with a nice, clean code-behind model that I would later leverage to introduce patterns like MVP, MVC Page Controller and Front Controller. I built a nice CMS portal for a multi-national bank (which according to Forbes Magazine is the largest public trading company in the world today) with these new skills and I hear it is still running today. Life was good. This was the age of the web server, and the only major argument within the Microsoft web community at that time was “C# or VB.NET”? </p> <p>At this point in my career, I’d grown a bit bored with web development. I felt like I’d accomplished everything I wanted to with ASP.NET, and the roles I found myself in started dealing with problems at a more holistic, program level which would involve a handful of web apps and coordination between them and new and existing enterprise resources. I discovered Web Services, and the problems I was now trying to solve led to the gradual gravitation to enterprise architecture and middleware and before I knew it, I was hooked. Admittedly, it was a great time to make the shift. SOA was king. COM+ had grown up with support for Enterprise Services in .NET and in parallel, this amazing new messaging framework codenamed “Indigo” was in development that would provide a black belt for hungry ninjas like me who wanted to take over the world with SOA. When it came to Indigo, there were two types of members in the community: Those on this inside, and the rest of the world. I was very much part of the rest of the world, but I consumed every bit of content I could get my hands on from folks like Don Box, Juval Lowy, Wenlong Dong, Michele Bustamante and Dr. Nick. </p> <p>Around the same time, a major re-engineering of a product called BizTalk Server was nearing release which took full advantage of the .NET Framework. My employer then, a mid-sized auto retail and finance company was one of the first BizTalk Server 2004 customers in Phoenix. For a fledging enterprise integration architect, this was an awesome opportunity. I learned a ton from my friend Todd Sussman, Brian Loesgen and Adam Smith, the latter of the two I wouldn’t meet in person for a few years, but I had read “BizTalk Server 2004 Unleashed” and “The Blogger’s Guide to BizTalk” from cover to cover more than once. Even better was that I was leading the development of our first SOA and 802.11 enterprise mobility project. We had decided to build the mobile apps- which were a superset of a desktop control center- with ASP.NET. Users would hit the same URL whether they were on the desktop or in the field with their device, and the right screen would render. All of our business logic was wrapped in an ASMX façade which then communicated with our BizTalk orchestrations. With my first real enterprise program under my belt, and WCF nearing GA, I decided that this was what I wanted to do when I grew up, or at least for the next 5 years. </p> <p>Along with WCF, WPF was nearing release. WPF offered a completely different paradigm on which to build traditional Windows apps. Support for rich media like video and sound, flat controls, new gradients all with an incredibly “webby” DHTML-looking design aesthetic. At the time, I remember introspecting that if presentation technologies like this were successful at winning over users, then one day, users won’t care if they are using a browser or an OS to interact with software. What I didn’t realize was to what extent <em><strong>everyone’s</strong></em> cheese was about to be moved. Here we had two tremendously powerful additions to the .NET Framework, poised to revolutionize how we write software from a presentation and back-end perspective, and yet, something subtle was happening that was bigger than Microsoft, bigger than the marvel that is .NET.</p> <p><strong>The Web Reborn</strong></p> <p>Content building SOA solutions in the walled gardens of my employers and clients, almost overnight, I remember when web developers started insisting on me starting to expose JSON endpoints on my services. Apparently, while I was in messaging la la land, users had grown tired of refreshing their browsers and posting back to the server every time they submitted a form. Turns out, I too was one of them! Users were demanding not just a dynamic web experience, but one that was interactive, and felt more like a rich client (a great example at this time was Outlook Web Access). But if you wanted a rich experience, isn’t that why you stuck to the desktop and used WPF? Following the promulgation of XML as the second coming, wasn’t JSON nothing more than an esoteric relic of JavaScript? AJAX had arrived. What followed was a complete disruption of the seeming balance between intended purpose that would shift the pendulum once again to the web. </p> <p>This was about the same time that Microsoft had shared its vision for Software + Services, first unveiled at Mix 07. On the outside, the Mix conference was all about the web, but the reality was that this was also part of a pretty massive campaign to court and win over designers from Adobe/Macromedia to a new technology: WPF/Everywhere, aka Silverlight. While many had been signaling WPF as the return of the smart client, users were accepting an alternate, even degraded user experience in exchange for interop. Silverlight offered a superset of WPF capabilities, delivering a somewhat equally productive design time and development experience as .NET and thus began penetrating Apple and Linux via the ubiquity of the browser. This was the first time I saw Microsoft really understanding that it wasn’t only about .NET and Windows anymore. This was evidenced by prominent PMs on stage demonstrating Silverlight apps on Macs, and running Linux distros on VMs to show that you could write the app once, and run it (almost) everywhere. A number of incredible apps were released on Silverlight including examples like Netflix and Hard Rock Café Memorabilia which were each both a sign of the times and a hint at what was to come.</p> <p>To be sure, this had indeed become a software + services world, and for a while Silverlight looked promising despite the tremendous market footprint that Flash had and continues to have. I remember <a href="http://rickgaribay.net/archive/2007/04/30/Let-There-Be-Silverlight.aspx" target="_blank">writing</a> about how remarkable Silverlight was and what a game changer it could be. But then, an interesting thing happened. JavaScript and REST started appearing more and more in web apps, particularly in the consumer space. At first, despite the popularity of Fielding’s paper, REST seemed like a fringe thing, and in many ways a step backward. Here we had a tremendously powerful consortium of standards built around SOAP representing the intersection of the very few things big players like Microsoft, IBM, Sun and Oracle agreed on. What’s more, it seemed that Microsoft had timed this SOAP bubble (no pun intended) perfectly, with its shiny, new, equally efficacious messaging stack called WCF which was, and still today remains unrivaled by other platform vendors. In addition to HTTP, WCF brought TCP, MSMQ and IPC to the enterprise, offering (proprietary) binary encoding and MTOM for optimizing message exchanges. The programming model had (and continues to have) a learning curve over ASMX, but once you got over the hump, you were on a high summit and could see the world for miles around from this new vantage point. So, why in the world would anyone want to go back to using HTTP POST and POX? How could it be that the world was settling for REST and JavaScript? </p> <p>Simple. The world (and the internet) was changing. A gradual, yet viral shift was taking place fueled by the success of Ruby on Rails and PHP which built the foundation for what is today known as Web 2.0. All of a sudden, anyone with a laptop and an internet connection could download a few packages and get an app up and running in no time. The barrier to entry was financially negligible and because these languages fully embraced HTTP, a tremendous community was born that was as smart as they were entrepreneurial. Interop and reuse were mere side-effects that led to tremendous adoption by everyone with a browser. Fully embracing JavaScript with their productivity boosting libraries that took the sting out of writing JavaScript, similar approaches to packaging robust functionality into libraries such as JQuery followed. In addition, while at first, Ruby on Rails embraced SOAP, it was later replaced with REST. Ask your mother or grandmother what <a href="http://twitter.com/rickggaribay" target="_blank">Twitter</a> or Groupon is and you’ll have the answer as to why REST and JavaScript have persevered. </p> <p>In response to all of this, WCF added support for JSON first, followed by REST, and by the release of .NET 4, both were in the box. In addition, WCF RIA Services was introduced, adding an easy button for integrating with Silverlight clients with the stack, and WCF Data Services provided a REST-friendly approach to managing CRUD operations using ATOM as the message contract. The success of the ASP.NET MVC framework, which has all but subsumed its older, less cool ASP.NET Web Forms sibling, is further evidence of the developer and user community embracing the browser as a conduit for interoperability on the client.</p> <p><strong>The Mobility Wars</strong></p> <p>Even amidst the mobile revolution, which has been largely built on the ubiquity of broadband connections and increasingly capable handheld devices, proprietary platforms have emerged which in many ways are more restrictive, and costly than any other platform. Want to build apps for iOs? Learn Objective C. Android? Got Java? Windows Phone? .NET. Even though they all sit on similar devices and depend on the same infrastructure for messaging (the internet), apps are hardly interoperable with one another. I am sure you know at least two people that carry multiple headsets with them for this very reason, and tablets, sure to be the next wave of mobile innovation suffer from the same dilemma (if you ask me why HP abandoned WebOS, I think it has more to do with the writing on the wall regarding HTML5 than anything else, but more on that shortly). At first, this dilemma seems somewhat benign, perhaps only affecting developers. The truth is it affects everyone. Talk to any iOS developer (that’s not a complete Apple zealot) and they’ll tell you that Objective C isn’t the most productive language to write apps with. Aside from Java not being too sexy these days, I don’t hear many Android (or WP7) users raving about the selection of apps in Android Market. Same goes for WP7 and Windows Marketplace- I remember how long I had to wait to get Angry Birds on my Windows Phone 7! But the most salient example I can think of is the fact that after a decade of browser wars, tremendous innovation on the client and the server, I still can’t play Flash videos on my iPad or WP7. My iPad refuses to run Silverlight apps, even though its browser on the desktop is fully capable of doing so. This is a situation that is just plain broken, and it isn’t just me that feels this way… </p> <p><strong>The World Wants Native Interoperability on the Client, and Today, the Answer is HTML 5.</strong></p> <p>Like it or not, HTTP has become the ubiquitous interface for both the client and its conduit to the backend. This incredibly simple protocol has had more influence on software over the last decade than any other technology, completely reshaping the strategies of the biggest players. I don’t have to tell you that without HTTP, you don’t have cloud computing. For example, who would have thought that Amazon, after pioneering e-commerce would get into the PaaS business by being the first to truly innovate in commercial cloud computing at scale? Who would think that Microsoft would completely reinvent itself on Windows Azure and invest as deeply in REST as it has, not only with standards and technologies like OData and WCF Data Services, but also in exposing their incredibly rich and powerful Azure APIs as REST heads? Again, the answer is simple. HTTP has become the lingua franca of the interconnected world and the disruption started with the first packet in the early 60s. </p> <p>Just as SOAP was developed to aid in interop between vendor platforms, banks and partners, REST has increased the native interoperability of applications on the web. Hold your rotten tomatoes, but I am afraid that so too is the fate of iOS, Android, WP7, WPF, ASP.NET and Silverlight. Are they going away tomorrow, next year or 5 years from now? Nope. SOAP still has a very important place in back-end systems and I don’t mean just for legacy applications. When you you want to work with contracts and interfaces (very important when designing critical message exchanges for business processes), need support for heavy lifting such as distributed transactions, reliable messaging, multiple transports and the like, SOAP is your tool. Case in point as I mentioned briefly above is Windows Azure. While the investment in REST has been significant, these REST endpoints are merely designed for optimizing interop allowing any client or platform to take advantage of the services offered by Microsoft’s cloud. Want to start or stop a compute instance? Need to write a file to blob storage, retrieve an entity from table storage or publish a message for hundreds of subscribers to consume over the AppFabric Service Bus? There’s a REST API for that. While adoption is key to the success of any product or platform, the API, and thus REST is not the end itself but merely a means to the end, and as such is only the tip of the iceberg. Below the water’s surface, there is, and will continue to be a ton of SOAP and .NET.</p> <p>The same is happening on the client with HTML5. While Silverlight and ASP.NET MVC were a step in the right direction and aren’t going to just vanish tomorrow, HTML5 offers true interop at the native (browser) level, and since native interop is what the world wants, it will win, at least for now. I say at least for now because as tempting as it is to chock this up to just another trend, unlike the crusty programmer personas I mentioned when I started this stream of consciousness that has become a rather long post (thanks for staying with me this far, btw), I’ve been doing this long enough to have seen software reinvent itself a few times now. I’ve learned that rather than cry over spilled milk, it is important to embrace change and this means you have to expect and be prepared for anything. HTML 5 could fail, and companies that have already invested significantly in ASP.NET, Silverlight, Flash and one (or several) mobile platforms aren’t going to just jump in right away, but they are going to watch very, very carefully. If I am building a web app or a rich client app today from scratch though, I’m going to think very, very hard before I decide to do so in anything but HTML 5.</p> <p><strong>Who Moved my Cheese?</strong></p> <p>Who would have thought that Microsoft, with an incredibly lucrative productivity, OS, server and tools business would bet the farm on Windows Azure? As innovative as I think Microsoft’s (PaaS) cloud story is, in many ways, it is the software giant’s response to its cheese being moved by the web. And make no mistake, it is a massive bet. Initial buzz around Windows 8 has so far been met with both positive and quite negative feedback after the revelation that Windows 8 will make HTML 5 a first class citizen on the desktop and the tablet. Viewed simplistically, the seams between client and server/backend are exposed with Windows 8 and Microsoft Azure respectively. At first, this seems quite alarming (<a href="http://www.joelonsoftware.com/articles/APIWar.html" target="_blank">Joel Spolsky saw this coming</a> over 8 years ago), but if you think about it, it makes perfect sense. If the client is moving to the browser, the value proposition of a beefy desktop or a rack of servers in an opaque data center is diminished significantly. However, all that data, records, images, videos, files still have to be stored and served up some where, and that somewhere needs to be natively interoperable with the the client at the iceberg and get the heavy lifting done below the water’s surface. The need for middleware- integration between the client, that somewhere and its data, applications and systems has never been greater. </p> <p>Even though I’ve joked to friends that stayed on the front end that I didn’t miss anything by skipping WPF and Silverlight because we’re back to where I first began with HTML and JavaScript, the reality is that the last decade has been incredibly important in reinforcing that innovation is bigger than any platform vendor or standards body because unlike them, it is you and me that determine the fate of technology, and for that we should all be proud.</p> <p><strong>So, What Now?</strong></p> <p>I provide no value without designing distributed solutions that can be consumed by the client applications and automate the business processes they serve. So just as before, its time to buckle down once again and learn the client technologies that one of my primary customers- the UI developer- will soon be using. First in line is Mango. Next is HTML 5. And who knows, after specializing in integration for the last 5 years, I just might start generalizing a bit and get back into web development again.</p> <p>See you at the other end of the wire.</p><img src="http://rickgaribay.net/aggbug/314.aspx" width="1" height="1" /> Rick G. Garibay http://rickgaribay.net/archive/2011/08/22/a-middle-tier-guyrsquos-take-on-html-5.aspx Mon, 22 Aug 2011 22:50:58 GMT http://rickgaribay.net/archive/2011/08/22/a-middle-tier-guyrsquos-take-on-html-5.aspx#feedback 6 http://rickgaribay.net/comments/commentRss/314.aspx http://rickgaribay.net/services/trackbacks/314.aspx