I’ve been working as a flex dev for many years, building really complex apps. With all the recent hype, I’m interested in learning HTML5.
What I like about the Flex framework is it’s a consistent, coherent, complete stack for building RIA’s. I like that it has a broad set of components out-of-the-box, and a framework for extending and building really complex, heavily customized & skinned components.
Are there similar frameworks out in the HTML5 space?
From the searching I’ve done, I see there’s tonnes of useful .js scripts out there which provide nifty components, effects, etc. However, I haven’t been able to find a solid js framework with a mature and architected component library.
This worries me that in building a complex application, I may end up writing lots of plumbing code to wire together disparate components.
I know that HTML5 is still in it’s infancy, so if there are promising frameworks that I should be keeping an eye on, I’d like to know about ’em.
My shopping list of ideal framework requirements would be as follows:
- Solid component architecture (including lifecycle events)
- Extensible
- Layout managers
- Browser agnostic
- Support for data binding
- Support for complex Skinning
- Abstraction of services layers & protocols (ie., SOAP / JSON / XML services are all a type of
IRemoteService)
Along with the UI framework itself, what frameworks exist in the Javascript space for
- MVC architectures. (Similar to
Parsley, orMatéin the Flex world) - Dependency Injection
- Unit testing
If you’re a Flex dev, then might be be interested in checking out both the desktop and mobile versions of the Sencha Frameworks (my company): Ext JS for desktop apps and Sencha Touch for mobile/tablet apps.
Ext JS is focused on desktop web apps that can work all the way back to IE6, so there’s not much room to be “HTML5″y although where we can we are (our new charting stuff uses Canvas, SVG or VML depending on the browser it finds itself on).
Sencha Touch is focused on Android, iOS, Blackberry and IE9(?) mobile browsers, so we get to use all the CSS3, localStorage, etc. etc. that you can shake a stick at. If you’re looking for a test case of what you can do when you start with an assumption of a modern browser then this is it.
Ext JS & Sencha Touch is components all the way down. The best overview of both components and layouts is this article that was written for Ext JS 2, although the component and layout model hasn’t changed much for Ext JS 3. Layouts are getting a rewrite for Ext JS 4 – which will have its first beta this month – to make them more like the CSS3 flexbox layout system.
Extensibility is the outgrowth of having a proper component model. Ext JS has a bunch of user extension components that can be mixed and matched. A good example of a professional after market component is Ext Scheduler. There’s also a good tutorial on how to create components.
Data binding: UI components are bound to stores, so multiple UI elements are updated with new data as it changes. You can read the store API reference to get a sense of how it works.
Complex skinning – Sencha Touch has an excellent theming system which is being ported to Ext JS 4 – but Ext JS 3 and 2 are a little more involved to theme due to IE6 compatibility requirements (you have to generate images)
Services layers are abstracted with data proxy, which is extended for JSON, Http, XML etc.
Sencha Touch and Ext JS 4 have a (simple) MVC architecture. Ext JS 3 and below does not.
Here’s a good write-up on dependency injection in Ext JS (but it should generalize to Touch)
For unit testing, we recommend Jasmine – which came out of Pivotal Labs.
Ext JS and Sencha Touch are pretty widely used – Ext JS mostly for corporate apps, but there are lots of big companies using it like Salesforce, Marketo and more for externally focused users. Sencha Touch has a nice gallery of apps from our latest dev contest, you should check it out.
If you care about tooling, we also have a GUI drag and drop Designer and a CSS3 animation tool (the latter in developer preview)