Working with angularjs it's very easy to run through LOTS of data on the client.
Is there a rule of thumb as to how much data I want to work with at once? I'm transferring files with a few mb of text data and don't seem to be running into too much trouble. (Barring I'm not displaying all my records at once).
Is there a point where you think you should still be working off the server? How much is too much? Is it browser/os/device dependent?
I think this strongly depends on which browsers you are targeting. If you are targeting IE8 you will have no were near the same performance as if a user was using the latest chrome release.
As a rule of thumb I tend to want the experience (speed, smoothness, user ability etc) when you visit sites I develop to be the same across all browsers and versions. To do this I do most of the heavy lifting on the server and send down mostly pre-packages, pre-parsed data sets for the client to display.
You should be testing your application across the full spectrum of browsers you support and you will find areas each browser excels and is not as good as it's rivals. You can then tweak accordingly.
However, some would argue if you are targeting the latest browsers that to reduce cpu cycles on the server you should be push processing to the client. I would agree here if you can ensure your using are using the latest browsers on fairly decent machines with good internet connections.
Related
As a web developer I also have to take the Android and iOS web browsers into account. The rendering engines of these browsers and the lack of power and memory brings a lot of complications.
So I was wondering, is there a comprehensive guide on performance tuning (HTML/CSS/Javascript) for these browsers?
I haven't found an actual guide focusing on mobile development yet. However, my coding practice is to do everything you'd do for a desktop browser and try to put extra effort in:
maximize use of cache, by using CDN, ETags, proper expiry dates etc.
minimize reflows/repaints, they are CPU intensive
optimize images aggressively to minimize download size.
minimze amount of server round-trips and included JS/CSS, since most mobiles are used on 3G/4G and other wireless networks. They tend to have higher latencies than wired broadband (cable/dsl).
do not use animated gif, 3d transforms, etc.
Here is some reading material: https://developers.google.com/speed/docs/best-practices/rules_intro
I'm creating a web-based online game and am trying to find the best fit in terms of a framework for the front end of the game. The back end of the game is currently using asp.net mvc 2. Given that I could take the controller actions and turn them into WCF service actions the choice in the back end should not affect my options of a front end.
One thing that is certain, it does need to play in a browser. I have done some research on an HTML 5-only front end as part of this process and am probably leaning in this direction but I have a few concerns:
Assuming this game is completed this time next year, what kinds of difficulties will I have with current HTML 5 adoption levels? Specifically I'm worried about Firefox 3.6 and IE 7/8 still having a large install base. I have looked at Chrome Frame to solve the IE problem but am not sure if there are drawbacks to that I am unaware of either (other than the installation requirement).
I'm used to doing C# with a nice IDE complete with realtime information about whether the code compiles and intellisense reminding me of symbol names. Am I going to run into a problem with Javascript where my code becomes big and difficult to manage? The accessibility problem that a Javascript only engine solves for my users is more important than convenience for me but it of course can't be unmanageable either.
Are the HTML 5 engines on the market right now mature enough to trust with my time investment? Am I at high risk of adopting a framework that will fall into disrepair in a year from now? Of the engines I have looked at, none seem to have really great community support, am I wrong? Are there others out there that do?
here are those I have found thus far:
CraftyJS (http://craftyjs.com/api/Sprite.html)
ImpactJS (http://impactjs.com/)
PropulsionJS (http://www.propulsionjs.com/)
The Render Engine (http://www.renderengine.com/demos.php)
RPG JS (http://rpgjs.com/)
EaselJS (http://easeljs.com/)
Does anyone know anything of the community with these or have any reason to trust that any of these will be well maintained or available for at least the next several years? Does anyone know of another framework that's out there? ImpatJS has the most impressive demo of them all and it's also the only one that isn't free.
Thanks for any help / advice. I'm just worried I'll choose a front-end that I regret and I don't want to have to start from scratch 4 or 5 months down the road.
This is a 2D browser-game. It's not targeting mobile now, but it will be moving to mobile immediately after first launch. One hope is that it will work on mobile fine if I do HTML 5. I may have to tweak it for display size but if I don't have to port it to mobile that would be a definite plus.
This is my two cents having just been through the same decision making process for my company.
Our goal was to create as broad a game as possible that means it needs to run on as many browsers as possible. I ruled out html5 right away because the adoption is not there and seems to be at least a couple years until it reaches more than 60% penetration.
This left me with Flash vs. Silverlight. Flash's installed base is huge and there are many game engines available for it. Flash is a safe bet unless you have specific requirements for video or 3d.
I choose Silverlight because I wanted a good installed base (60%) and I wanted to leverage my companies’ in-house .Net expertise. I also wanted to use WCF for the backend and did not want to mix environments.
Keep in mind that SL5 is going to support most of XNA which is a big deal. There are a ton of XNA engines and source code that you can use to start with.
Here's a great site for looking at html5 browser support:
http://caniuse.com/
I can't speak with expertise on the particulars of HTML5 and Canvas, but...
As far as support goes, you'll still have probably a large bunch of IE7-8 users. IE is a little different than other browsers because you have to DO something to install updates. (i.e, go to the Install Updates in Control Panel or visit ie.microsoft.com). Other browsers (like firefox) just tell you and make the update easy. So your FF 3.6 users should be gone, but IE will still probably be a problem. Keep in mind, though, that much of the old IE browser share is due to IT depts. keeping their users on older versions - something you won't need to worry about.
This could be a problem. However, developing JS in Visual Studio or a similar IDE isn't so bad - there's still IntelliSense and other helpful things, as well as realtime debugging. It's definitely going to be a bit more difficult than C#, especially as many of the new JS api's haven't been implemented into the Autocomplete's of many IDE's.
I don't think you need be afraid of this. At this point, HTML5 and Canvas have gotten far enough that they won't be revoked, only improved. There may be a few modifications of the APIS and such, but not enough to keep you from using it.
Is HTML5 going to replace Flash? No, because games and RIA that require more out of javascript cannot be done until enough of the world is using IE 15 (which is about 5 10 years). Safari, Chrome, FF (maybe), will be up to par here soon but their js engines are going to require good hardware and that's not always going to be there.
Silverlight is a good option but it's not as well supported as Flash. This is why flash will still be around. The next version will support video controllers. It' called Project Mole hill and you can check out my SO question here.
If you want to make super simple games without good graphics try out one of those services you suggested. impact.js is $100, the others look free. In the future we will be able to use node.js to handle request with servers, but in the meantime Flash is certaily the way to go!.
I would much much much rather use javascript but after you start coding and realize the limitations compared flash will make your application standout.
Then for mobile devise, iPad, iPhone, Android, etc.. If you really think your audience is there build the game in the their language. It's more epensive and and harder, but Objective C, Java, they are much faster than HTML, JS, CSS etc...
I did some trial runs with YUI3, Burst engine & Raphael for SVG animation - everything seemed to run well; YUI's dragdrop module even detects the same drag operations on Mobile without adding a single line of code.
I can only imagine that if I had the time, a YUI3 instance available on a Node.js server with Raphael SVG animation would be my choice. You could drop the SVG aspect and use more standard graphic techniques, or perhaps serve up alternate quality graphics for those User Agents with fewer testes. Maybe it could be that your alternate quality version is just another implementation of your game engine - and you might choose to develop games using non-SVG anyway.
Just thoughts mostly, that doesn't help with your real-time IDE debugging...
impact.js has a great community and documentation. It is well worth checking out. I believe iosimpact.js is part of the package (although beta???) allowing for the development of native games for the iphone/ipad.
Yes, indeed you will lose a large user base. But how relevant that user base will be to you will depend on what your target is. Every-day-RPG players are much more likely to have the latest browser than Sunday-Morning-Sudoku users.
Give Eclipse + Web Tools + Aptana a try. It worked really nice for me.
No experience there.
There are certainly people out there who think that HTML5 is going to replace flash in online games. Here is an HTML/Javascript based engine that I heard about few days ago
http://www.youtube.com/watch?v=_RRnyChxijA
I haven't actually used it but it looks really promising and It's designed for similar set of requirements that you've put. It lets you design 2D / 2.5D ( isometric projections ) games. And it does look promising.
I am developing a web application that is supposed to display land traffic in real time in any part of the world. For a couple months I've been developing it using JavaScript and OpenLayers (http://www.openlayers.org) framework.
Unfortunately, this solution appears to be inefficient. There are hundreds (200-300) of objects on the map that are updated every couple minutes. The sheer operation of refreshing and rendering them takes significant amount of time that makes the
application less usable (slow responsivity to user actions).
At the moment I am considering changing the technology. Adobe Flex seems to be the most reasonable solution. There is at least one application written in it that does similar things to mine (http://casper.frontier.nl/).
However, I have a couple of concerns regarding Flex:
can it be easily integrated with the
HTML/CSS/JavaScript based part of the
application (for example, the
graphical interface should be
coherent when it comes to styles and
colors)?
I get an impression that
with latest browsers (mainly Chrome
9.0) JavaScript and CSS becoming more efficient. What are the chances that
in a couple of months JavaScript+CSS
will make it possible to implement
efficient, flash-like rich internet
application? (A note is needed here:
famous Canvas tag is not a solution
for my problem, at least not for now.
Rendering objects on map with canvas
proved to be less efficient than with
traditional SVG because the size of
the canvas is really big - a whole
browser window)
What are the chances
that Flash technology will be
abandoned (Apple policy, HTML5
growing support etc.) in
not-so-near-future (a couple of
years)?
There is a possibility that my client would like to view this application on mobile devices, including iPhone.
Any other solution for web-based interactive maps?
Can anybody address these issues?
Lazy comment repost:
I've used Google Maps JavaScript API + a custom canvas tile layer (see here and here) to draw maps with 10k+ markers, really quickly. Perhaps you just need to rethink your particular approach rather than totally rewriting your maps.
JavaScript running on a modern browser (say, IE7 or later) should easily be able to handle 200 or 300 object updates every few minutes. Granted, if you want to do all 300 updates at the same time, things might get a little slow. But if those updates occur spread out over that period, then you shouldn't have any trouble.
There are Asteroids games and 3D shooters written in JavaScript and that are very playable. They do dozens of updates per second.
I would suspect your framework (I know nothing about OpenLayers) or the way in which you're doing the updates before I suspected the platform.
My experience with Flash has been less that positive. Although it will interoperate with JavaScript, there are some strange edge cases that will trip you up. And my experience is that it's almost impossible not to trip over those edge cases unless what you're doing is truly trivial. And, of course, the lack of Flash support on the iPad and iPhone will make supporting those platforms impossible.
I think it's unlikely that Flash will be abandoned any time soon, as there are too many customers who continue to believe the silly notion that Flash is the way to build interactive Web apps. Although that was almost certainly true four years ago, browsers, computers, and JavaScript techniques have advanced to the point that the only use I currently have for Flash is to play video. And that use will go away in the next few years when HTML5 video becomes more prevalent. With Google's WebM video format and the expected high-quality tools to build WebM, Flash becomes almost irrelevant as a movie player, except for older content.
My advice would be to take a long hard look at your current implementation, study some other JavaScript applications that do frequent updates, and determine if it's really the platform rather than the way you're using it that is causing your performance problem.
No idea how many objects you can manage and update in js, but in my company (flashmaps.com) we have built flash-based maps handling many thousands of objects. The key issue in many cases in fact is that the map is completely overlapped by the markers. We use to recommend filtering the markers in those cases. We have a huge experience in building flash/flex-based maps, so on't hesitate to ask me any question on that.
By the way, I don't think Flash will get out of use soon. Apple's strategy on controlling iPhone/iPad apps (the real reason behind Flash banning) is causing a lot of trouble to web developers, that need to create specific versions of their websites for these devices, it's crazy. But I'm sure Apple will permit Flash, someday... Probably when many other tablets hit the streets supporting Flash. We'll see.
The awesome thing about MVC architecture is as long as you keep your domain logic separate from your business logic and UI, then it's relatively easy to create platform specific apps that access the same data. For example, you could build the same UI to run in the web browser (via html/javascript or flash player), on the desktop (via Air), and on an iPhone/iPad (via iOS) that all connect to the same server-side scripts. It's all a matter of personal choice which platform you choose. If a platform happens to fall out of fashion in the future, then you simply create a new UI on another platform.
Take a look at http://www.chromeexperiments.com/
I think JavaScript is very close to have everything that RIAs can offer.
What's missing from or for JavaScript to make it a viable RIA development alternative?
At the moment the only thing you really can't do in javascript/html is sound and video. This is changing with the HTML5 standards which includes sound and video as first class html elements.
The other thing Flash has going for it is a (slightly) more level ground between browsers. All browsers implement things slightly differently but a flash page renders pretty much the same across all.
Eventually (even now maybe) you will be able to do everything flash can in the browsers, the only question will be if and when all browsers support what you need.
While chromeexperiments.com has many neat technology demos, and I especially like some of the games there, it's still very much far off compared to what's being done with Adobe Flash/Air and Microsoft Silverlight.
I'm a long time web developer and I experienced the pain with browser in the early days, where none of the browsers cared much about standards. Today, it's very different. Not only do we have a lot more browsers, there are small incompatabilities in all of them which in some cases can be problematic. Normally applies when you're doing a pixel-perfect design, which you shouldn't do anyway ;-)
One of Silverlight (and WPFs) promisses are separation of concerns when it comes to delegating work between the developers and designers. While the tooling is not yet optimal, it's improving in every release of Visual Studio and Expression Blend. Being able to actually see what you're doing in a designer is helpful for a designer.
I have traditionally been a pro-web, it's more compatible, works everywhere, standards based and just the decent way to do things. It's only when you have benefits towards alternatives you should pick them, but normally they should be additions to an existing implementation built on web, this applies particulary to information systems, line of business, etc.
You don't want to get tied down to a specific version of a runtime or viewer, that will get us back to the problems we have today with far too many web-systems only compatible with Internet Explorer 6.0. It's a nightmare in many organizations today, their IT-systems doesn't work with anything other than IE6 so they are stuck, without any means of upgrading expect when they can afford replacing the existing systems.
If you develop a solution today, will your users be able to use it 3 years from now? What about 5 years? 10 years? Will they require a special-purpose-PC-setup that sits in the corner, running an old version of the OS and RIA/Viewer runtime? Sort of like how the IT-systems of the police runs all around the globe.
One project I'm currently working on (hobby-project) I initially started out with a desktop application, using Windows Forms and SQL Server Compact Edition for local storage. Then I figured I wanted to be more available to users, so I changed my plans to be an ASP.NET MVC project. Later on, I realized that it was about time to get more experience with Silverlight, so I ended up doing the whole thing with Silverlight 4 and Windows Azure. I'm amazed how productive you can be with Silverlight, though there is a pretty steep learning curve for someone who's traditionally built Windows Forms and Web Forms solutions.
What is missing from the HTML+JS technologies? Tools & Frameworks! One of the most important things for any developers is familiarities between projects. There shouldn't be a difference in the tools and frameworks you use if you want to develop a 3D game, Line-Of-Business Application or an interactive web banner. Reduced development time is another critical point, today's AJAX frameworks is way better than what we had to write ourselves back when XmlHttp first arrived with IE, so we're slowly getting to some place where we can do really cool RIA-solutions with nothing but web-technologies. I think HTML 5 is the beginning of something good, though it's still pretty far off compared to what we have today with Flash and Silverlight.
There is an adage that "anything that can be done in javascript, will eventually be done in javascript". Certainly, lack of a good designer for this sort of interactive app is one problem. It's important to note that javascript is just a scripting language, where silverlight and flash are frameworks that each include their own programming language. In fact, Silverlight 1.0 used javascript as it's language. So the real question is whether HTML+javascript will get to a point that Silverlight and Flash are not needed. I could see that happening in the post-HTML-5 timeframe, but that will be a while.
I don't think we are close to knowing the answer to this yet.
Personally I could argue either side pretty equally.
Javascript:
Pro - Almost universal. Newer phones even support it.
Con - Can be hard to manage. Still varies from browser to browser to some extent.
RIA:
Pro - Typically richer tools/better management.
Con - Not as close to universal. Flash is very widely deployed and Silverlight is gaining ground. More control for developer (I'm thinking of games, etc.)
Bottom line: either approach can be made to work. Each has strengths. Each has weaknesses. I don't expect a clear winner for a long time, since both sides will have proponents who won't want to switch camps.
Yes, of course.
jQuery+HTML5 makes it easy. jQ has animations, AJAX, keyboard and other stuff. HTML5 has canvas, audio and video. What else you need?
I think that there needs to be greater uniformity of the performance of JS engines across browsers. The cool things on chrome experiments are made possible by the super-fast performance of V8, the JS engine in Chrome. These things are not so exciting in many other browsers.
The advantage that is held by Flash/Silverlight is that they are browser extensions that do their work closer to the actual computer and are thus less constrained by the characteristics of the browser.
JS applications will be limited until all browsers have performance approximately the same as Chrome's.
I'm currently writing my first real application in Flash (Flex, actually) but it's only because i needed to have complex imagery from PDF, and PDF2SWF works much better than PDF2SVG.
so, in this particular case, it wasn't about the platform capabilities (neither of them could handle PDF), but about an accessory tool (transforming PDF to a usable vector format)
The benefit of Silverlight is that, with Silverlight 4, the same code base can be used to create a web hosted application and a full trust desktop application*. This is of great benefit to designers of Enterprise applications where the user must be constrained (to a certain extent) in what they can do and how they interact with the application.
So what you might see is that consumer websites go down the Javascript route, while Enterprise applications stick with Silverlight and Flash.
* I don't know about Flash and Adobe Air, but I would suspect that Adobe are working on this too.
im standing and trying to decide which client web GUI to chose flex or js/dhtml ( one of the frameworks or combination )
i need to build front end to system that user can edit some kind of book format that involved images and texts
and i really don't know what is better . for user experience and easy development
Simply put: Flex will be a much easier framework to work with to provide a good user experience.
Flex is really great (actually the best) to process images and do video and sounds effects in the browser. Manipulating text and images layout just cannot be simpler with any other framework.
When working with Flex, try to target Flash player v9 (not v10) since it's already installed on ~98% of PCs connected to the internet.
On the other hand, js/dhtml might be harder to work with (depends on your experience) but will be able to provide a better user experience IMO. Users will be working with a web page after all which will feel more natural to them.
Performance: The flash player is the fastest VM you can target to run code on the browser as far as I know. It is way much faster than IE6 for example (no doubt about that, a huge gap). But with FF 3.5, and latest versions of IE and Safari, I think the gap is much smaller if there is any. Actually FF 3.5 uses the same technology to run js the Flash player used to run ActionScript. Tamarin
That said, there are other aspects of performance than code execution speed. The flash player will require more memory (special on Mac and Linux). And depending on your application, might be less responsive overall. (this depends on rendering, animation, and how will you implement things).
I really don't consider requiring a browser plugin is one of the cons of Flex since that plugin is there for almost all users, and users are very likely to be running it on another page before visiting your web app.
The only pro for js/dhtml is that it will feel more natural to users and IMO will provide a better experience if done correctly.
Pro Flex:
Better Performance
Stuff like images and sound are easier to handle
Pro JavaScript:
Works in every browser if you chose a well-programmed framework
No browser-plugin required
I made my self the same questions some weeks ago. I have choosen flex because it's easy to use and you can get good looking effects without effort.
I think the issue of need the flash plugin installed in the browser is no problem at all beacause most of users have it already installed and if not it's very easy to install.
Since my relatively large client-server project made the transition from a heavy DHTML front-end into a heavy Flex front end, I'll explain our reasons. We were using dojo 1.1 for our JavaScript library.
We already had flash components because there were parts of the application that were custom-designed animated diagrams (e.g, org-chart type stuff). ExternalInterface was good, but it was nice to move into a single architecture for the front-end. There ended up being some duplication because of the mixed metaphors.
Because of heavy use of dojo widgets (dijit library), upgrading to new versions was difficult, and we ran into some problems when Firefox 3 came out. And likely when IE8 came out. The problem was that dojo had fixed the problems, but would have required a major rewrite if pieces of our application in order for us to upgrade (they had rewritten some of their container widgets in 1.2 or 1.3 (IIRC).
Was tired of fighting with CSS differences in browsers. At least flex is mostly compatible between supported browsers.
I prefer JavaScript to ActionScript 3, but the flex transition made sense for us.