• Home
  • Contact
  • Careers
  • Socialize With Us:
  • Send us Mail
  • Follow us on Twitter
  • Join our Facebook Group
  • /
  • Linkedin
  • /
  • Vimeo Videos
  • /
  • Youtube
  • Subscribe to our RSS Feed
  • Search Site

  • About UsAwards & Bio
  • PortfolioOur Latest Work
  • TrainingTips & Tutorials
  • BlogGreat Articles

You are here: Home / News / Industry News / HTML5 App Frameworks

HTML5 App Frameworks

Category: Industry News     |     Tags: HTML5

HTML5 allows for great in-browser app development. Recently, I wrote a few Great HTML5 games and on the Pros and Cons of HTML5 for gaming. Overall, the potential is high, but issues with browser compatibility, immature tools, and lack of elegant OOP and architecture will slow the progress of HTML5 for gaming.

For HTML5, I’ve found many frameworks to support application development in the browser. Many also have IDEs to help development and other (non-browser) publishing paths such as iOS/Android.

Fundamentals of HTML5

We probably all forget that HTML5 means “Hyper Text Markup Language”. Its a formatting language that allows for linking (hyper). Version 5 is here, but will not be finalized for a few years (2014?). So what is version 5 and why are people so excited?

Well, ‘HTML5′ technology is really a combination of 3 key technologies. All are free to use, standardized, and far more powerful than previous versions. So people are excited. Also many people are using mobile to access the web. And mobile web usage is increasing really fast. *AND* because mobile browser was created more recently (and thus not limited by historic limitations in computers and the related bureaucracy, *much* mobile web browsing TODAY is compatible with HTML5. All good things.

  • HTML5
  • JavaScript (Often via JQuery)
  • CSS3

The Challenges of the New Platform

Software Developer Jesse Warden points out the following; The issue, however, is that it’s not that straightforward. There are 5 main issues that the HTML/JS/CSS stack (which I’ll here after refer to as the HTML stack), have when coming from the Flex platform in a consulting context (there are more, but these are the ones that matter with regards to the context of this post). They are:

  1. DOM as a dynamic display technology
  2. JavaScript lacking mature language constructs (Most frameworks have built-in workarounds)
  3. There are larger problems for multiple Browser Vendors to solve
  4. the industry’s libraries & frameworks are young from an Enterprise context (yet not!?)
  5. The Video Codec Issues
  6. Tooling

HTML5 ‘Frameworks’

Above HTML5+JS+CSS, a framework adds a consistent library of actions, events, and UI. We generally hope that a framework can be powerful to meet our needs, fast to meet our development deadlines, and flexible to allow us to customize and extend the framework to meet our particular needs and fringe cases.
Types of frameworks (sometimes they overlap

  • HTML5 Framework- Low-level, flexible, but not specific for app, game, or mobile development. Runs in an HTML5-enabled browser
  • HTML5 Game Framework- High-level and game specific. This is ONLY good for game development. Runs in an HTML5-enabled browser. See this awesome post Flyer Game for HTMl5.
  • HTML5 App Framework- High-level and app specific. This is ONLY good for game development. Runs in an HTML5-enabled browser
  • HTML5 Mobile Framework- This is generally an ‘app’ framework PLUS it may allow you to publish to ‘native’ device languages and handle finger ‘touch’ events, accelerometer and other mobiles-specific features.

Table of ‘HTML5 App Frameworks’

Framework IDE? Video Site API Docs
SproutCore No Site Video API Docs
PhoneGap XCode Site Video API Docs
KendoUI No Site Video N/A Docs
Axure Yes Site Video N/A Docs
JoApp No Site Video API Docs
Sencha Yes Site Video API Docs
M Project Yes Site N/A N/A Docs

Resources

  • HTML5 Resource Guide of links to simple starter templates.
  • Non-framework HTML5 Boilerplate template
  • Short list of Best HTML5 Frameworks

Deep Dive Into Each Framework



Hello World for Sencha’s Ext JS 4 HTML5 Framework
– Full Source Code and HD Video Screencast

Next Steps

  • I wanted to test out a few frameworks for HTML5 to learn more. Check back soon for a review of the best frameworks.
  • Please add any comments or suggestions below…

5 Responses to HTML5 App Frameworks

  1. Roy Smith says:
    February 15, 2012 at 6:48 pm

    Please consider jqMobi for inclusion into this chart. It is a new framework that was written specifically to address issues of slow performance and large size in frameworks that were developed for desktop use. It’s open source. jqmobi.com 

    Reply
  2. Mark Slooff says:
    February 20, 2012 at 2:54 pm

    You may consider OutSystems, it is a full ALM solution with a model driven IDE for high productivity benchmarks on build and maintenance of the application. A very special feature is One-click deployment, for very fast deployment process. We are able to create applications for pc / tablet and 4 leading smartphones via one application.

    It is suitable for medium and large enterprise environments. Want to see what OutSystems as a PaaS-solution does for the US Army? Please see this link: http://www.outsystems.com/company/news/2012/outsystems-us-army/

    If you have any question, don’t hesitate to contact me.

    Best regards,

    Mark Slooff

    OutSystems

    Reply
  3. Shardul Singh says:
    February 23, 2012 at 6:42 pm

    Nice article,you are rocking well on HTML 5 too.

    Reply
  4. Paul says:
    April 11, 2012 at 3:02 pm

    You may also consider adding DHTMLX Touch, a JavaScript HTML5 mobile framework, to the chart:
    http://www.dhtmlx.com/touch/

    It comes with the visual designer tool. Here is the demo video:
    http://www.dhtmlx.com/touch/designer.shtml

    Docs: http://docs.dhtmlx.com/touch/doku.php

    Reply
  5. Herbert Dedrickson says:
    May 28, 2012 at 10:18 am

    Outstanding advise as always

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Member Login

You are not currently logged in.






» Register
» Lost your Password?

Support Our Sponsors

Category

  • Industry News
  • Standards & Best Practices
  • Full Tutorials
  • RMC News
  • Events

Tag

3D AIR API AS3 AS3.5 Business Debugging Experimental Flash Flex Games HTML5 Java Loom Mobile Optimization Project Planning PushButtonEngine Robotlegs Smash WordPress WordPress Plugin

Brazilean Developers

  • Abendita.com
  • dclick.com.br
  • dm9.com.br
  • Fellyph Cintra
  • IgorCosta.org
  • MonadaSolucoes.com.br
  • PossibleWorldwide.com.br
  • Unit9.com

Developers

  • Adobe Blogs
  • Ben Forta
  • Colin Moock
  • Enrique Duvos
  • Flash Mobile Blog
  • Jess Freeman
  • Kevin Hoyt
  • Lee Brimelow
  • Paul Trani
  • Quasimondo
  • Renaun Erickson
  • Ryan Stewart

Free Assets

  • Free Sounds
  • HasGrafics

HTML5 Games

  • Closure JS Library
  • Eloquent JS Manual
  • Game Framework – CraftyJS
  • Game Framework – EaselJS

Italian Developers

  • alchimedia.com
  • corlan.org/
  • creativesource.it
  • dimix.it
  • fabiobiondi.com
  • gnstudio.com
  • Interpreting-tech.com/bemobile/
  • leonardorisuleo.info
  • lucamascaro.info
  • mart3.org
  • mxml.it
  • nxn.it
  • pirosoft.it
  • Preload.it
  • sonnati.wordpress.com/
  • webgriffe.com

Products

  • Adobe.com
  • Amazon Kindle E-Reader
  • ElectroServer
  • F*CSS
  • Flash Development Toolkit (FDT)
  • O'Reilly PureMVC Book
  • Samsung Galaxy Tablet
  • Unity3D

RMC

  • RMC Consulting

Spanish Developers

  • Flash Adictos
  • HTML Cinqo
  • Tutoriales Flash

Tutorial

  • Active Tuts
  • AS3-to-Unity3D Training Videos
  • Doing 2D in Unity3D
  • Learning C#
  • Unity3D Tutorials

Unity3D Games

  • AS3-to-Unity3D Training Videos
  • Doing 2D in Unity3D
  • Learning C#
  • Matt Eley's Blog
  • Unity3D
  • Unity3D Tools
  • Unity3D Tutorials

I Am Great!

   

Latest Portfolio

  • Museum Kiosk Touch ScreenNovember 15, 2012, 9:00 pm
  • Happy Birthday Mobile AppMarch 14, 2012, 5:55 pm
  • Official Robotlegs MVCS DiagramFebruary 24, 2012, 1:36 am
  • Health Education Application For WebJanuary 28, 2012, 2:46 am

Latest News

  • Cross Platform Mobile: Free TalkDecember 21, 2012, 7:14 am
  • Cross Platform Mobile: Premium TrainingDecember 20, 2012, 7:41 am
  • Must-Have Non-Functional RequirementsDecember 14, 2012, 4:05 am
  • Adobe Max 2013: Best Gaming SessionsDecember 14, 2012, 2:21 am

Latest Tweets (@srivello)

  • @melissatsang @kevinsuttle Version 5.0.7 (400993) and before, consistently. Open a note with an image, right click the image & copy. Crash!
  • @leebrimelow @adobecampbrasil @tomkrcha @vincent_hardy "Pela segunda vez", Só?
  • Great post "Work/Life Balance @ Microsoft" http://t.co/r1RJJLdytT
  • @kevinSuttle copy paste images in Evernote crashes on Mac regularly

© Copyright 2006 - 2013 - Rivello Multimedia Consulting - Flash / Flex / HTML5 Game And App Development With Tutorials