What can webkit do? - javascript

Since there are more and more apps going the web way (like Phonegap, Appcelerator over the mobile and desktop apps development and the ones that I don't know yet), I am wondering what kind of role the web engine (seems the famous engine is webkit) is playing now and in the future?
A web engine is capable of rendering HTML and CSS(for interface), interpreting Javascript(for programming logic), and combining hardware features (like the geo-location, Accelerometer in iPhone web). It seems the web engine has become an extremely powerful "language" and also makes the "coding" much more easier(just writing "web code"). Will it be "ubiquitous all around the apps"?
It's just my point of view and correct me if I am wrong.
My question is:
Where can I find some good examples using webkit engine? I am really new to this and hope the examples are fair easy to learn and use. Thank you~

WebKit has implemented a lot of cool standards-based features:
HTML5 web sockets
HTML5 video and audio
HTML5 web workers
HTML5 geolocation
Client-side database storage
Application cache
CSS 3 animations
CSS 3 Gradients
CSS 3 3d Transforms

Chrome OS is Google's project to basically make a browser engine into a whole OS
http://www.youtube.com/watch?v=0QRO3gKj3qw
Sounds like your train of thought tho not quite sure what your question is sorry

Related

LOB Desktop applications using HTML5, CSS, Node.js, Chromium Embedded Browser

With the tremendous progress going on with web technologies, does it make sense to bring these to desktop and client-server applications.
We typically build our applications using winforms and wpf and the code base is like 100k+ lines of code.
Is it worth exploring the option of HTML5 UI and Node.js backend and use a framework like the chromium embedded framework or node-webkit.
The reason I am asking this is that the support from Microsoft for the desktop technologies is questionable (wpf, metro apps ...).
At least with the technologies I listed, it is easy to port to make the application work across all platforms and companies like microsoft and google are pushing for html5 and javascript.
A number of companies are using CEF and similar web-based technologies for desktop applications.
Steam from Valve is CEF based (https://developer.valvesoftware.com/wiki/Chromium_Embedded_Framework), as is
Spotify https://community.spotify.com/t5/Help-Desktop-Linux-Mac-Windows/Chromium-Embedded-Framework/td-p/912377 and
Adobe Creative Cloud (I believe using Adobe Brackets Shell over CEF and incorporating Node.js) https://github.com/adobe/brackets-shell
Advantages for them are that server side content can be delivered to the application, as can UI updates, and the client machine is fully accessible.
We are using it for product authorization and delivery, the advantages of CEF for us are dynamic update from the server of both UI and business logic in Javascript, and because CEF allows calls from Javascript to C++, we can access files on disk and Registry entries that pure Web code cannot.
So I would recommend looking into this.
For ordinary Line Of Business applications, I would suggest no, don't go half-way.
I used to do advanced UI development in WPF, and it was amazing for its time (a decade ago), but nowadays it is really amazing what can be done all within a modern web browser. And yes, Microsoft's support of full-powered desktop technologies is like a ghost town (I suspect they just want to get their 30% commission on apps in their store, so they've shifted focus to UWP).
Why do you need to create a hybrid desktop/web application? Unless you have a specific (and important) need to break out of the browser's sandbox, why not go all the way and create a web application? Modern browsers have a lot more capabilities now, and they keep getting better.
There are also many technologies and frameworks that really help to make large-scale web application development a lot easier than it used to be.

Cross-platform Mobile App with HTML5

I was asked to provide a tablet application with HTML5/JS/CSS which does not have dependency on any platform. Requirements:
Cross-platform mobile/tablet application
Offline capability and Storage (it should work in lack of internet connectivity and be able to synch after get connected)
Real-time data (it should be able to show any small changes from sensor values)
I should be able to connect to a CAN interface and get sensor values and ECU data. Because I have not come up with any solution for this part, I am thinking about Bluetooth. However, HTML5 doesn't support Bluetooth.
I'd appreciate to give me some vision if HTML5/JS/CSS can deal with this requirements (especially with Bluetooth)
Another question is that is it possible not to use any frameworks such as PhoneGap, RHoMobile, .... and just develop cross-platform app with raw HTML5/CSS/JS and have all requirements?
Have you looked in to PhoneGap / Cordova yet?
You can easily create cross-platform mobile applications using HTML5, JS and CSS.
http://phonegap.com
The built-in API provides access to most of the device's native features and functions. You can manage offline storage using localStorage or SQLite databases, and can detect network connectivity statuses to determine if you are offline / online and what level of connection you have (Edge, 3G, 4G, WiFi). With a combination of those, you could manage your data synchronisation.
As for bluetooth, the PhoneGap API doesn't support it out of the box, but it is highly extensible so developers can create their own plugins for missing or required functionality.
The community is awesome and many of the plugins have been compiled into a central repository on GitHub: https://github.com/phonegap/phonegap-plugins
I know that there is a Bluetooth plugin for Android available on that repository.
You can also write your own plugins quite easily to add any extra features that you need:
http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-android.html
http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-ios.html
** EDIT **
You posted an amendment to the question afterI'd written this answer mentioning PhoneGap. The honest answer is no, without a framework that interacts with the native device functionality, raw HTML5, CSS and JS would not be able to deal with bluetooth etc.
No, you cannot. A pure web application is not able, and will likely never be able, to use bluetooth.
HTML5 Bluetooth and Audio
Having developed a Web App before, I can tell you that anything involving offline has to be simple, and using device hardware is out.
Check out the frameworks, you may be able to get something to work. But it may just be a better/more realistic bet to develop a Native Application from the get go.
After a lot of searching I came up with MoSync which is a cross-platform SDK and is intended for developing different mobile applications. I believe MoSync can be the best answer for this question since it is really a rich SDK (C, C++, HTML, JavaScript) and has great tools and community that try their best to help you.
For further information I encourage developers to check here or visit their websites.
Most of the future mobile apps will be developed using HTML5. HTML5 standards are getting adopted very rapidly and those standards are supporting phone features like GPS, Accelerometer, Camera, Storage etc.
I will recommend you to use PhoneGap if you want to use any device features.

Switch from Flash to HTML5 for a new version of a large project?

We have a large web product with 11 million users (widgets that are embedded into third party web sites, and now adding iOS/Android apps). Most of our core interface is written in ActionScript 2.0. We are planning to release a revamped version. We are now facing a choice of porting it to ActionScript 3.0 or rewriting it in HTML5. We already have about 30% of our code written in AS 3.0. Can you help us make this decision?
HTML5
Pros
Future proof
Works in browser in iOS
No plugin required, presumably faster loading
Native browser rich text rendering, including spell check and copy/paste
Appealing to webmasters (contemporary technology)
Cons
Product relies on WebSocket - no standard yet, not available in IE
Highly custom UI, not consistent across all browsers
No video/audio hardware interaction for stream capture
Harder to convert into iOS apps (e.g. need hybrid apps, UIWebView cannot easily call functions in the native wrapper)
JavaScript is like AS 1.0, less sophisticated than AS 3.0
More work for us given our existing codebase and skills
Harder to embed JS widgets into third party sites than Flash widgets
Flash
Pros
Already have some code base, experience
Video/audio stream capture, socket connection
Good for widgets on third party websites
Consistent UI across browsers and platforms
Easier to use the same codebase for AIR apps on iOS/Android
Cons
Adobe's commitment to Flash is unclear
Adobe feels free to force developers to change technologies often, unreliable : AS1.0, AS2.0 have been phased out, Text Layout Framework is not supported on mobile and is being phased out, not clear if our AS3.0 codebase will still be relevant in 3 years)
Shoddy support of Flash on Android (e.g. text input is broken in 25% of devices)
Does not work in browser on iOS and Metro, so need a lite HTML5 version anyway
Slower in browser on Android
Public perception of Flash as obsolete?
We are in an identical situation and I truly wish that Adobe would take the lead in answering this very question; Flash or move on?
We have an AS2 Flash RIA (RIA, a phrase from the past?) that allows our clients to edit their sites from their browser, similar to Wix. Although the sites are viewable on iOS devices via ColdFusion (example: dolcedesignsonline.com - try in IE then in an iOS borwser), we are wondering what to do next. We are in the middle of an AS3 version of our RIA and although nothing in HTML5 will ever come close to the functinality we now enjoy at our fingertips in AS3, is AS3 going to there down the road?!
I do not think that Adobe would just let flash die. A more logical next step would be make the Flash IDE open source and free to the public. I am not endorsing that idea and I do not see that happening but I believe that would happen long before Adobe would just close the doors on Flash altogether.
Tick tock... at some point we are just going to have to flip a coin.
John Glynn
My thoughts on your points:
HTML5
Pros
Future proof - this is also true of Flash (you can still run an AS1 movie in FP11)
Works in browser in iOS - but webGL requires iAds, and canvas knackers the battery, in that sense support for actual HTML5 features is pretty limited
No plugin required, presumably faster loading - depends what's loading!
Native browser rich text rendering, including spell check and copy/paste - good points, not sure what/if any support these have in AIR
Appealing to webmasters (contemporary technology) - depends on the webmaster, beside Canvas/webGL it's just plain old HTML/JS
Cons
Product relies on WebSocket - not sure how you could get around this
Highly custom UI, not consistent across all browsers - this will always be the bane of web developers - look into jQuery UI if you haven't already
No video/audio hardware interaction for stream capture - correct AFAIK
Harder to convert into iOS apps (e.g. need hybrid apps, UIWebView cannot easily call functions in the native wrapper) - correct, but it is possible to do
Javascript is like AS 1.0, less sophisticated than AS 3.0
More work for us given our existing codebase and skills
Harder to embed JS widgets into third party sites than Flash widgets - JS is a very cool language but it's not really suited to building large applications which will need to be maintained by many people, debugging it can be an absolute bitch.
Flash
Pros
Already have some code base, experience - code can be organised into classes, easier to maintain and debug, AS3 also has most of the standout JS features (closures, objects, 1st-class functions) as it is derived from it.
Video/audio stream capture, socket connection - true
Good for widgets on third party websites - not sure what relevance this has to you, as not entirely sure what kind of application you're making
Consistent UI across browsers and platforms - to me, this wins by itself!
Easier to use the same codebase for AIR apps on iOS/Android - true, related to above
Cons
Adobe's commitment to Flash is unclear - this is true, but Flash player will be around for years, if not decades, yet, Stage3D has breathed a new lease of life into the platform
Adobe feels free to force developers to change technologies often, unreliable : AS1.0, AS2.0 have been phased out, Text Layout Framework is not supported on mobile and is being phased out, not clear if our AS3.0 codebase will still be relevant in 3 years) - This isn't really true as the Flash Player provides legacy support for everything ever built in Flash, it might make no sense to code in AS1 now but if you do, you can still export and run on any machine with Flash Player.
Shoddy support of Flash on Android (e.g. text input is broken in 25% of devices) - this is the major drawback, I'm not sure how well AIR addresses these problems but in my experiments with it, the only issue I've found with AIR on android is performance for intensive graphics.
Does not work in browser on iOS and Metro, so need a lite HTML5 version anyway - This may be insurmountable unless you can persuade your clients to use an app (shouldn't be too hard whilst the buzz remains around the word), then you can use AIR - and your existing codebase!
Slower in browser on Android - again, you may need to go with the AIR option, even as a Web/Flash developer I've never been over-keen on the idea of it running in mobile browser, at least with current technology
Public perception of Flash as obsolete? - This has been a real pain, but now Steve Jobs is no longer with us I think a lot of the hysteria has died down, people are looking more objectively and realise that his 'thoughts on Flash' were motivated by a desire to protect App-store revenues rather than facts, and that in terms of development speed, maintenance and cross-browser support, Flash is still miles ahead of HTML/5. Provided you can cross the mobile bridge - and that is a pain, there's really no choice but to go with AIR apps - I'd go for Flash.

Flash vs HTML5 game development for web & mobile [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am an experienced AS3 programmer, and I've done Flash apps and games on the browser and on mobile (via Adobe AIR, e.g., on Android).
I am about to start developing a game (basic 2D platformer with pixelart graphics. Think about Super Mario World) targeted to both web and mobile platforms. Thus I'm searching for easy deployment to these two kinds of platforms, having basically the same source code.
I'm divided between choosing ActionScript 3.0 (Flash) or HTML5/JavaScript for developing this game.
My main question is, for those who've experienced the same situation before:
What is the safest way to go?
In other words, are there serious disadvantages with one of these frameworks that disallows me to develop multiplatform 2D games?
Or am I just dreaming and practical multiplatform (web and mobile) game development is not so possible? (does someone know how Rovio did it with Angry Birds?)
Here are some pros and cons that I already know:
Pros for AS3/Flash:
The state-of-art for web games.
I'm experienced with it.
(Almost) concealed source code.
On the web, it's browser-independent.
Can run as a "native" app on iOS and Android through Adobe AIR. It's not the best performance experience ever, but I know that you can get playable performances with it.
Cons for AS3/ Flash:
Performance on AIR for mobile is not optimal, so I might end up having to abandon a really cool but expensive feature (or even several features).
People are saying HTML5/Javascript will substitute it.
Pros for HTML5/Javascript:
It's possible to do Flash-quality games using, e.g., engines like ImpactJS or Akihabara.
Seems to be more stable and well supported on mobile in the future.
Deployment as native app is possible through PhoneGap, appMobi, etc.
Cons for HTML5/Javascript:
I have some basic knowledge of this technology.
Source code is wide open exposed.
Performance/behaviour is browser-dependent.
Lacks a solid framework or engine which is free of co$t$.
I've decided to forget about HTML5 for cross-platform game development, and specially for deployment to mobile.
The cons I've pointed out for Flash are much lighter than the cons for HTML5. Basically, for the pixelart kind of games, Flash on mobile performs really well, specially if using some nice engine like Flixel.
For example, the Flixel game Robo Run has great performance both on Android and Flash Player in a browser. I don't have an iOS example for the same game, but I believe it would perform as good as on Android.
Plus, Flash performance on mobile shouldn't be an increasing problem since the hardware on these devices just gets better and better.
After thinking about this HTML5 vs Flash issue for several months, I think there's no point adventuring in HTML5 cross-browser compatibility since Flash has proven to be a sort of Java for 2D games.
I think you have outlined the pros and cons pretty effectively. If cross platform and mobile web development is your top priority, Flash is a good choice. You will have all of the drawbacks you have identified.
If you use javascript/HTML such as the impact engine, you will have a different set of problems, and far less compatibilty on the web side.
However, if having the game be the best it can be, you will need to look elsewhere, because as of the present, there is no code once publish anywhere solution.
Unity 3D has good 3D and 2d mobile capabilities.
Appcellerator may also be your cup of tea.
http://www.appcelerator.com/
But in the final analysis, nothing will beat making different versions for different platforms. in terms of performance, and being best suited to the device. Be sure to evaluate how well your chosen solution allows you to monetize your app as well. You'll likely be building multiple versions just to accomodate differences in revenue models and ad serving capabilities.
=== Update ===
In March of 2012 Adobe updated flash for iOS and Android to include support for OpenGL graphics, 3D and 2D graphics are now possible using flash as a single code base for iOS and Android. The speed is good, and you also can deply the same game to web. Its a great tool. The one drawback is that flash relies on "extensions" to connect to native OS capabilites such as Intents on android or Game Center on iOS. If you plan on using native capabilities extensively, look out for this as an obstacle to development.
As ScanPlayGames said, html5 sound is a big issue. There are some neat WebGL ports though. Dominic at Impact has been doing some amazing stuff. He's got the best framework out there.
Rovio did a port using Google Web Toolkit for the chrome store.
I work for AppMobi. We've got a tool called DirectCanvas for iOS (Android will be coming soon) that increases the performance of games in the webview. One of our partners is developing a game that has the concept of Angry Birds (object A is propelled to destroy other objects). So Box2d support is there (the main thing holding us up from releasing). The performance is awesome, and the average joe doesn't know it's a webview game.
And trust me, you wont' be wasting your time doing development on mobile first for desktop then. We've got some stuff up our sleeves.
I'm a Flash games developer too and did some research on how to migrate to HTML5. There are a lot of obstacles if you come from the Flash/ActionScript3 world. One of those things is JavaScript itself - i know many people like JavaScript, but if you are used to AS3 it is hard. Another thing is the problem with sounds (as mentioned above). The most important thing is that i don't want to start from scratch and i want to use my skills or even migrate code from the past.
To make a long story short i ended up with Googles new programming language called Dart. This language compiles to JavaScript in therefore runs on all modern browsers. The most important thing is that Dart is very similar to ActiontScript3! Then i did an open source library which provides all the Flash API you need for games (The Display List, Bitmaps, Sounds, ...) - i tried to make the library as compatible as possible with the Flash API to simplify the process of porting the source of a game. In the end it was pretty easy because you only need to change a few things.
The game i have migrated:
An ActionScript to Dart comparison:
Some other samples and the link to the source:
I think a big disadvantage of Javascript is that it cannot detect picture's transparent regions so that it can stop reacting while mice hover or click on it.
Since HTML5 was released, any new solution has been created?
I have worked with some people who did a very graphics intensive HTML5 application and the worst thing was doing the sound I remember...every browser had to be done differently. Go look for some open source html 5 game frameworks where people have already done the grunt work of testing across browsers...there are some pretty good ones I think. You dont want to have to be the one QA-ing across environments.

How far is HTML (and SVG and CSS and WebGL and JavaScript) to reproducing what Flash/Flex can do today?

As a Flash and Flex developer it is a little disheartening to see the strides in HTML5. Don't get me wrong I have nothing against progress, for me it is just that currently it is easier to write an app in Flash vs AJAX. I love writing in Flash and Flex and think ActionScript is a really great language. But, it appears the strides made in ActionScript or making their way to JavaScript and that video in HTML 5 may make Flash/Flex a thing of the past.
So when do you think (if ever) that HTML will or is a competitor to Flash/Flex for RIA or will browser incompatibility stop this from ever happening?
The reason I am asking is because I don't know if continuing in Flash/Flex is a good idea career wise if HTML 5 can do more. Just looking for some answers from other developers using the technologies.
There are four things that hold the "modern browser" back from where flash is today.
1) Tools. Animating et al with Flash is obviously much easier to do. Plus JS/SVG don't have the "direct" animation support that Flash does right now. It can be done, but it's manual.
2) Performance. JS/SVG/Canvas can not perform as fast, and certainly not as consistently across browsers, as Flash can. Not every application needs the performance, and JS et al are catching up. But at the moment, they still lag behind in total overall performance.
3) Browser adoption. Ye Olde browser wars. Different implementations, different speeds, legacy browers, etc. All the issues the afflict the portable web are in place for the modern browser technologies. So, it's more work to make a portable artifact, and even then it simply may not work, especially on older browsers.
4) Content protection. Flash is hardly the bastion of content safety in terms of IP control etc, but it's night and day over JS, HTML, SVG, etc. where it's all pretty much free for the taking. This will especially confound things like video which right now is mostly bastioned behind Flash players vs simply streaming mp4s to the client.
We've already seen some of the more clever "Javascript ads" (those annoying, floating animated panels for example). I'm waiting for more of those, just as simply animated mini ad apps vs flash. The primary reason most users who disable Flash do so, is to disable applications. JS mini ads won't have that problem.
However, the primary creator of those ads are the creative folks specifically targeted by Flash. It's easy to use for them without being "real technical". Until you can do that with Javascript and the rest, Flash will have a large market for it.
I think the original poster is asking where do cutting edge open web technologies (draft standards) stand versus Flash/Flex. Ignoring questions of browser support and developer tools, look just at features (as you'll see, I know the web side much better):
Vector Graphics
Flash: Yep.
Web: SVG.
Raster Graphics
Flash: Yep.
Web: Canvas.
Audio
Flash: Yep, with ADPCM, MP3, HE-AAC (MPEG-4 Part 3).
Web: HTML5 audio tag with MP3, Ogg Theora, Ogg Vorbis, WAV.
Video
Flash: Yep, with On2 VP6, Sorenson Spark, Screen video, Screen video 2, H.264. The Windows version of Flash 10.1 has hardware-accelerated H.264 decoding.
Web: HTML video tag with Ogg Theora, H.264.
Animation
Flash: Yep.
Web: Yep, via some Javascript DOM commands and via CSS3 properties for animations, 2D transforms, 3D transforms. Some browsers (e.g. Mobile Safari) hardware accelerate some of properties.
I think the big differences currently (given the caveats mentioned above) are performance and implementing all these features. While Javascript is very good in many ways, the programming experience isn't nearly as integrated as in Flash/Flex's ActionScript (note that many of the animation features that are done in CSS). If you want to learn more about where open web standards are going, check out HTML5 Doctor.
HTML/CSS/Javascript together solve a different problem than Flash does.
HTML and CSS are about the appearance of your page, and are the 'universal' language of the internet. Really it's the only language the browser natively understands. Javascript is natively supported in most browsers, but was a glue language never intended to allow the flexibility of Flash.
Flash/Flex are about creating a portable (albeit proprietary) application framework. However, without HTML, Flash and Flex don't exist.
A developer can never stop learning. If it's not HTML5, it'll be something else. I would continue programming what you love, but start playing with HTML5 and see what it can do. It will expand your horizons and help you to think about things in a new way. But you don't have to give up what you're doing now, especially as HTML5 still isn't ready for the mass market yet.

Categories

Resources