I know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.
Related
There are a lot of web based IDE's like Cloud9, Codebox, AppBuilder(Icenium). And I'm really interested in how the front end / UI for these environments works.
I have a hard time believing that it's just plain HTML5/CSS/Javascript that are providing the rich features. Is there some similar framework/library that they are using?
You can look at the source for Cloud 9 yourself:
http://github.com/ajaxhub/cloud9
They use a number of JavaScript libraries but yes, the front-end is all HTML5, CSS and Javascript when it comes down to it.
In the field of RIAs, I've read tons of comments stated that the discussion about Silverlight vs JavaFX vs Flash vs HTML5 is outdated and the winner is HTML5.
Since I am a programmer (not a designer) but never used any of the technologies above and I have no time to learn all of them to compare, I want to ask the following:
1) With HTML5 we continue to only have interpreted JavaScript, or we can use more powerful languages that generates compiled code (some kind of MSIL or bytecode inside <object> ... </object> tags)?
2) Does HTML5 hide portions of our code from unwanted viewers (like Java applets and ActiveX did in the past) or the option "View - Source Code" continues to show all of our work?
3) HTML5 need some kind of runtime or all the work is done by the browser?
There is a bit of a fundamental problem with your question in that HTML5 is not really a thing. It's hard to compare it to Java or Flash, which are programming languages. It is possible to create interactive applications using HTML and JavaScript without using any of the features of HTML5. This seems to happen a lot, but for simplicity these are often referred to as HTML5 applications -- especially by non-technical people.
1) I would say that JavaScript can be as powerful as the other compiled languages you talk about even on a webpage -- especially with the power of <canvas>. You have found that HTML5 has won for a reason. In my opinion, it can do what the others can do and is simpler to implement.
There is nothing that forbids you from including Flash objects of Applets alongside JavaScript, though, and they can even interact.
2) There is nothing that prevents all of your HTML/JavaScript from being downloaded in the browser and viewed in plain text, although it can be obfuscated with tools such as Uglify.
It's also possible to download and decompile swfs and jars from a web interface, so compiling does not necessarily offer you a lot of protection anyway. Your code would be protected by Copyright (at least in the US) and you could use a license the MIT license too.
3) All the work is done by the browser. The client will only need a browser to run your code, but some browsers do not support some features you may want to use. This especially applies to older browsers.
There are a ton of frameworks and libraries out there for creating rich HTML/JavaScript applications, but these are just are mostly just JavaScript files.
HTML5 is a brand and trend. In silverlight/flash/html battle HTML must be the winner. Because browsers can't progress fragmentary. Is it true then some part of features developing in browser plugins, some part in browsers. For strong and fast progress always, at the start, needs the vector. In redefining web in our life such vector is HTML5. HTML5 is not a language, it is the set of capabilities, such video, music, webgl, geolocation, semantic essences and more and more only from browser. And we can't speek here about HTML5 like a language.
All your questions are about javascript.
Want bytecode inside <object> ... </object>? Use Chrome Native Client.
Want to hide your code? Use any obfuscator.
Modern javascript engines has just-in-time compilation. And there is the "subset" of javascript like asm.js which is just 2x slower then C++.
Recently i heard about gamemaker being able to export in html5. I never used game maker and prefer having the ability to write code but i hate writing javascript. What tools with a statically compiled language may i use to create HTML5 games?
Tom here from Scirra, we are a 2 man team making an HTML5 game engine called Construct 2. It might be of interest to you as it exports games to HTML5/Javascript and an option for WebGL. It's a popular alternative with people who don't like Game Maker.
You can see how fast results can be obtained and how powerful Construct 2 is with this 2 minute video:
http://www.youtube.com/watch?v=5RlSmkSbleI
Also Construct 2 allows plugins to be written in Javascript to extend the functionality of Construct 2. I know you say you hate writing Javascript, but it's good to have that option there for the future incase you change your mind or if you want to tweak something yourself.
You can use Google Web Toolkit to write your game in Java and then compile to HTML5 and JavaScript.
There is also the upcoming Dart programming language that has static typing and compiles to JavaScript unless the browser has native support for Dart.
Not statically typed, but CoffeScript may be the best JavaScript alternative for HTML5 games at the moment. It's a nice languages that compiles to readable JavaScript.
It seems that what you are looking for then is NaCl (http://code.google.com/chrome/nativeclient/), and for more intro info to it you can look at this:
http://code.google.com/games/technology-nacl.html
Basically, you can write your game in C, it gets compiled in the browser and runs as native code.
I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?
To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.
I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.
https://zebkit.org/
For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.
What we need is something like Silverlight but without the plugin. Stable components and a great framework.
Canvas apps could be made just as accessible as html web apps. Probably more so even.
Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.
Thunderhead was a mozilla experiment built along with bespin (now skywriter).
From the project description:
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based
GUI toolkit that works with DOM elements and canvas to render
components.
The problem is accessibility, canvas just isn't.
I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.
Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.
In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.
Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.
Or do you know of anyone working on one? I've been checking all the stuff you can do with HTML 5 here and some other sites and is amazing. I think such a big library should have some IDE with intellisense and easy documentation (like when you press F1 on Visual Studio while a symbol is highlighted) and all that stuff. And if there is not then I should probably start working on one :).
Most of known IDEs and their latest version, like Netbeans, Eclipse, Dreamweaver, support natively HTML5. You can find more info and pick one according to your preferences.
There are numerous HTML 5 IDEs, it's important to not necessarily separate current web technologies with HTML5 as they are really are very close to being one and the same. For example, the latest version of Adobe's tool offer support for HTML5, as well as other IDEs such as Aptana. Unfortunately, the HTML5 spec is not done yet so there will be discrepancies between browsers, which a builder could work around, but will put a lot of onus on you.
Alternatively, there are numerous client and server-side frameworks that abstract HTML5 and some of its features, each of these have varying levels of support, a builder, and intellisense. For example, I'm a co-founder of the NOLOH development platform (http://www.noloh.com), which abstracts away browser differences and supports HTML5 transparently to you the developer, allowing you to concentrate on your application and functionality without worrying about the plumbing. We also have what's known as "code stubs" that you can add to any IDE most IDEs and get intellisense/auto-complete functionality. We also have a visual builder in the works that should be out relatively soon.
Whatever you pick, just make sure you're comfortable with it, but you definitely don't want to re-invent the wheel here.
You should definitely try HTML5 Builder.
Try this, HTML5 Boilerplate
if you are looking for something that builds mobile sites or ads html5 builder, maybe you could try http://mobdis.com.