HTML5 mint univerzális platform: van-e alternatívája?

Ezt kell minden fejlesztőnek és fejlesztő műhelynek vizsgálnia a HTML5 lehetőségek kezdeti megértése után, amennyiben élni akar 2012 és az ezt követő új időszak, új lehetőségeivel.

A kérdésre adandó válaszhoz a lakmusz tesztem az, hogy az intelligens web/felhő kliensek területén jelentkező univerzális fejlesztési platform igényeket mennyire lehet mondjuk legkésőbb 2012 elejéig kielégíteni HTML5 és technológiai társai alapján kialakított megoldással, szemben a hagyományosakkal. Az utóbbi vonatkozásában én itt most csak a .NET-et veszem alapul, ami egyéb technológiai vonatkozásban talán a legsikerültebb megoldás, a hagyományos kliens (ide értve a RIA-at is) platform tekintetben pedig messze a legnagyobb lefedettséget biztosítja a fejlesztőknek.

Az alábbiak csak ennek a lakmusz tesztnek az eredményét mutatják. Az ebből hosszabb távra szólóan adandó végső választ mindenkinek saját magának kell megfogalmaznia annak alapján, hogy az itt szereplő, embrionális HTML5 kihasználtságból mennyi idő alatt és milyen ütemezésben lehet majd eljutni ahhoz az állapothoz (univerzális platform tekintetben), amit a W3C HTML5 ütemterve (végső dátum: 2014) és az ennél szélesebb Open Web Platform tervezete (aminek még ütemterve sincs)  majd lehetővé tesz. Az utóbbi becslésére jelenleg egyedüli, részletes és hiteles áttekintésként a Standards for Web Applications on Mobile — February 2011 current state and roadmap-ot (Dominique Hazaël-Massieux, W3C — PDF) ajánlanám.

HTML5

• Még alacsony elterjedtség a webhelyeken is:

• Ugyanakkor óriási, látens HTML5 igény alakult ki az intelligens web/felhő kliensek univerzális platformjaként való használatra. Egyedül az okostelefonok piacán óriási fejlesztési platform különbségek alakultak ki 2010 és 2011 időszakára, és az ehhez vezető trendek a PC és a Media Tablet piacok előrejelzéseiben is hasonló megosztottságot prognosztizálnak :

• Egy legkésőbb 2012 elején várható, nagy jelentőségű 1.0-ás megjelenés jól példázza a most még csak embrionális formában kielégíthető HTML5 univerzális platform lehetőségeket (a pirossal való alábbi kiemelések tőlem származnak, egyúttal a HTML5 / CSS3 lehetőségek még viszonylag minimális, de lényegi használatát mutatják):
  

  jQuery Mobile (az univerzalitást a jobboldali ábra mutatja)

http://jquerymobile.com/

Touch-Optimized Web Framework for Smartphones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. jQuery Mobile 1.0 Alpha 4.1 Release Note [“As of A4, we are feature-complete for 1.0 and are focusing on perfomance, compatibility, bug fixes, API improvements, and documentation”] [jQuery Mobile team update – Week of May 16th: “…we’re getting close to our first beta release … we’re hoping to release at the end of May or early June.”]

Seriously cross-platform & cross-device

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support grid [a jobboldalt fenn látható ábrát magában foglaló weboldal]

Touch-optimized layouts & UI widgets

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos

Themable designs: Bigger and better

To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties like text-shadow, box-shadow, and gradients.

Key features:

• Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve
• Compatible with all major mobile platforms – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile [Windows Phone], bada, MeeGo with baseline support for all devices that understand HTML
• Lightweight size (12k compressed for all mobile functionality) and minimal image dependencies for speed.
• HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
• Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
• Automatic initialization by using HTML5 data-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.
• Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
• New events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
• New plugins enhance native controls with touch-optimized, themable controls.
• Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.

Theming overview

Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:

• It takes advantage of CSS3 properties to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.
• Themes include multiple color “swatches” — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible
• Open-ended theming allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs
• All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests
• A simplified icon set including those most commonly used for mobile, in a sprite to reduce image weight

More standard HTML5 input types

In jQuery Mobile, you can use new HTML5 input types such as email, tel, number, and more. We actively degrade certain types to type=text (currently, range and search) in certain cases when we provide a replacement for that type’s native control. You can configure which types are degraded to text through the page plugin’s options.

Mobile page structure

A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features. (Older devices with browsers that don’t understand HTML5 will safely ignore the ‘doctype’ and various custom attributes.)

New list markup conventions [in Alpha 4]

In the new list markup conventions, we wrap the anchor around all the content in the list item (split buttons have two sibling anchors within a list item). … Now, thanks to HTML5, we can just wrap all the list content in an anchor which makes all the default link behaviors and features work as expected, no scripting needed. Simple lists that only contain a text node or link will not be affected, but any list item that contains advanced formatting like thumbnails, text hierarchy, split buttons, etc. will need to be updated.

Sliders

To add a slider widget to your page, start with an input with a new HTML5 type="range" attribute. Specify the value (current value), min and max attribute values to configure the slider. The framework will parse these attributes to configure the slider.

• Egyedül ez a HTML5 / CSS3 alapú keretrendszer hihetetlen mértékben beindíthatja a HTML5, mint univerzális platform használatba vételét. Ugyanis a jQuery, mint a jQuery Mobile egyik alapja nagyobb elterjedtséggel bír, mint a PHP, vagy az ASP.NET:

• A jQuery Mobile másik alapját képező jQuery UI elterjedtsége pedig nagyobb, mint bármelyik más JavaScript UI framework-é:

	felső 10 ezer webhely	felső 100 ezer webhely	felső egymillió webhely
jQuery UI	7,79 %	5,2 %	2,93 %
YUI	4,41 %	3,11 %	1,71 %
Prototype	4,08 %	3,79 %	3,00 %
script.aculo.us	3,41 %	3,15 %	2,63 %
MooTools	2,40 %	2,96 %	3,37 %
Dojo	0,41%	0,17 %	0,08 %
Ext JS	0,10 %	0,12 %	0,08 %

(Ajánlott kiegészítő információ: JavaScript keretrendszerek összevetése)

.NET

• Igen magas elterjedtség a webhelyeken (ASP.NET): még a PHP-hoz képest is (felső 100 ezer: 26,72 % kontra 37,14 %, felső egymillió: 24 % kontra 35,48 %, felső 10 ezer: 21,43 % kontra 31,23 %)

• RIA tekintetben pedig páratlan funkcionalitást kínál:

Silverlight Features Matrix

The Features Matrix below provides an overview of the new capabilities in Silverlight 4. Silverlight 4 is able to run Silverlight 3, Silverlight 2 and Silverlight 1.0 applications without change.

	Silverlight Versions
Features	1.0	2	3	4
Cross-Browser Support for Firefox, IE, Safari
Cross-Platform Support for Windows and Mac (and Linux through the Moonlight Project)
2D Vector Animation/Graphics
AJAX Support
HTML DOM Integration
HTTP Networking
Canvas Layout Support
JavaScript Support
XAML Parser
Media – 720P High Definition (HD) Video
Media – Audio/Video Support (VC-1, WMV, WMA, MP3)
Media – Image Support (JPG, PNG)
Media – H.264 video and AAC audio Support
Media Markers
Windows Media Server Support
Support for Visual Basic.NET and C#; Common Language Runtime (CLR) based languages
Support for IronPython, IronRuby, Managed JScript, and other Dynamic Language Runtime (DLR) based languages
Rich Core Framework (e.g. Generics, collections)
Multi-Threading
Layout controls including StackPanel and Grid
Full suite of Controls (TextBox, RadioButton, Slider, Calendar, DatePicker, DataGrid, ListBox, TabControl, and others)
Managed Control Framework
Templating Model
Visual State Manager
Isolated Storage
Deep Zoom Technology
Media – DRM Powered by PlayReady
Media – Windows Media Audio 10 Professional support
Media – MediaStreamSource for managed code media file parser and protocol extensibility
High quality resizing
Media – Basic SSPL Support
Cross Domain Network Access
Easy access to server-side data via Web Services
Direct access to TCP sockets
Interoperability with SOAP and REST services, including support for XML, JSON, RSS and Atom data formats
LINQ (including LINQ to XML, LINQ to JSON, and LINQ to Entities)
Duplex communications (“push” from Server to Silverlight client)
Data Binding
WCF Data Services
Managed HTML Bridge
Managed Exception Handling
.NET Framework Security Enforcement
Type Safety Verification
XMLReader/Writer
Enhanced Keyboard Input Support
File Upload Support (via WebClient API)
WPF Compatibility
Accessibility
Localization
Remote Debugging (PC and Mac)
Out of Browser
Network Status (Offline)
Pixel Shader Effects
Bitmap API
Theming at runtime
Enhanced Control Skinning
Accessibility – System Colors
Bitmap caching
Perspective 3D
GPU Hardware Acceleration (for video and bitmaps)
Text Animation
Raw A/V Support
File Save Dialog
DockPanel, WrapPanel, Viewbox
Element to Element Binding
Local Connection
Binary XML
Component Caching (share resources across apps)
Scene caches (to Bitmap)
Local Fonts
Printing
WCF RIA Services
Managed Extensibility Framework (MEF)
Webcam
Microphone
Official Support for Google Chrome
Output Protection for audio/video
Multicast networking
Offline DRM
Trusted Applications (extended sandbox)
IDispatch COM Interop
Group policy object support
Full keyboard in out-of-browser for trusted applications
Cross-domain network access for trusted applications
Custom window chrome
Out of browser window settings (position, size etc.)
Web Browser Control and Web Browser Brush
Notification Toast
Right-to-Left / BiDi Text

• Ugyanakkor a Silverlight webhelyeken való elterjedtsége — sok éves piaci jelenléte ellenére — még mindig meglehetősen alacsony (vegyük figyelembe, hogy a Javascript nélküli Flash webhely elterjedtség sem annyi, mint a böngésző plugin-ként való elterjedtség):

• Ez persze csak a webhelyekre vonatkozik. Ettől úgy a desktop/notebook böngészőkön már jelenleg, mint a Silverlight fejlesztési platformra támaszkodó Windows Phone eszközökön a jövőre nézve, lényegesen nagyobb az elterjedtsége. Az utóbbi különösen a Nokia-Microsoft platformösszefogás (ld. Nokia-Microsoft általában és fejlesztői szempontból)  következtében fog már 2012 elejére komoly mértékben megugrani.
• A böngésző plugin telepítések tekintetében ugyanis kiváló a Silverlight elterjedtsége, más alternatívákhoz képest a legközelebb kerülve az Adobe Flash-hez (a HTML5 Canvas és Video támogatással egyenlő a mérték):

• A felhő technológiákkal való integráltsága is kiváló. Lásd: Windows Azure: mi itt a lényeg? (2008. november 10.), ami már megjelenése idején úttörő megoldás volt. Hasonlóan úttörő megoldás volt: Azure jelentőség és mibenlét: front-end újdonságok egy előremutató műsorszóró rendszer példáján bemutatva (2008. november 3.). És hosszasan folytathatnánk ezt a sort
• Ebben a sorban a legújabb példa a Windows Phone 7 szintjén megvalósult integráltság: Windows Azure Toolkit for Windows Phone 7 (v1.0: 2011. március 23, v1.1: április 12, v1.2: május 16):

The Windows Azure Toolkit for Windows Phone 7 is designed to make it easier for you to build mobile applications that leverage cloud services running in Windows Azure.  The toolkit includes Visual Studio project templates for Windows Phone 7 and Windows Azure, class libraries optimized for use on the phone, sample applications, and documentation.  All this content is designed to be easily reused, simplifying your experience and optimizing your time when building your own phone applications leveraging cloud services.

Requirements

You must have the following items to run the project template and the sample solution included in this toolkit:

• Microsoft Visual Studio 2010 Professional (or higher) or both Microsoft Visual Web Developer 2010 Express and Microsoft Visual Studio
• Microsoft ASP.NET MVC2
• Windows Phone Developer Tools (January 2011 Update)
  • Windows Phone Developer Tools January 2011 Update (WindowsPhoneDeveloperResources_[language]_patch1.msp)
  • Windows Phone Developer Tools Fix (VS10-KB2486994-x86.exe)
• Silverlight for Windows Phone Toolkit – Feb 2011
• Internet Information Services 7 (IIS7)
• Windows Azure SDK 1.4 (March 2011)
• Windows Azure Tools for Microsoft Visual Studio 2010 (March 2011)
• Windows Identity Foundation Runtime
• Windows Identity Foundation SDK 4.0

• MonoTouch és Mono for Android (MonoDroid) a Novelltől: az Attachmate alá kerülés és a fejlesztő csapatok komplett elbocsátása kétségessé tette a jövőjét
• Új, a MonoTouch-al és a Mono for Android-dal forrás kompatibilis verziók az elbocsátottak által alapított Xamarin-tól: a jelenlegi MonoTouch és Mono for Android változatokkal való paritás elérését 3-4 hónap múlvára igérik, közben ehhez még további pénzügyi támogatásra lehet szükségük. További információk: Interview with Miguel de Icaza: Xamarin, Attachmate Layoffs, Future of Mono, More (May 20, 2011), amiből a következőket idézném

De Icaza is, of course, the originator of the Mono Project, an open-source implementation of the .NET Framework based on C# and the Common Language Runtime (CLR). In 1999 he and Nat Friedman founded a company called Ximian, originally to provide Linux and Unix desktop apps based on the GNOME platform. That company became a driving force behind Mono, and it was acquired by Novell in 2003.

But Mono never truly flowered under Novell, de Icaza said, especially in the mobile space. In fact, one of the reasons he is sanguine about the layoffs is that he and his Mono mates have been trying to spinoff the technology from Novell for more than a year.

“We all thought that Mono could really shine on its own,” de Icaza said. “For years we’ve been wrapped in this bubble of Novell, and our mobile efforts didn’t align with the strategies of an infrastructure company. We pursued them because a lot of people asked us to do it, and we’re passionate about it. I guess you could say that I welcome being laid off, because it gave us a reason to get together and do what we all wanted to do.”

Under Novell, the Mono team did create MonoTouch, which allows developers to create C# and .NET apps for iPhone, iPad, and iPod Touch devices, and Mono for Android for developers creating apps for devices running that OS. Novell owns both of those technologies, which means that Xamarin will be building some of its initial products from scratch, including a new commercial .NET offering for Apple’s iOS, and a new commercial .NET offering for Android. Xamarin will continue to contribute to the Mono project and the open source implementation of Silverlight known as Moonlight, de Icaza said, and he plans to explore “Moonlight opportunities” in the mobile space and the Mac appstore.

On the speculation of the funding behind Xamarin, de Icaza says his fledgling company currently has two committed angels, neither of which is Microsoft, and he’s providing some of the initial funding himself. “I’m not going to rule out that I’d like to have Microsoft as an angel investor,” de Icaza told me. “We have talked to a lot of people at the company, and they do like us. But for that matter, I wouldn’t mind having Google and eBay and RedHat and eTrade and Novell. We’re pitching to everybody who will listen right now.”

Továbbá:

– Válasz Clemens Vasters (Microsoft) üzenetére:@migueldeicaza Good luck with the new venture.

@clemensv Thanks Clemens! I will keep my fingers crossed to get WCF + AppFabric open sourced 🙂