I am working on a javascript/html5 gif editor and i am wondering how can i test in a slower environment. It works great on my pc but since its using heavy javascript and algorithms i need to see if it works smoothly with a less powerful processor.
I recommend setting up a virtual machine using VMware Player or VirtualBox. You can adjust attributes like processor speed, number of processor cores, and memory. This will help you test your code out in a slower environments.
What an odd request! Usually people want things faster and faster.
Using a Virtual Machine is a good solve here. It allows you to allocate exactly how powerful the computer is, and might make a very suitable testing environment for you.
If you want inefficiency, look no further than Internet Explorer. You just need to make sure it supports your HTML5 and your JS.
Using older versions of some of the more capable browsers might be a good idea too.
Also, and this is a bit of a hack, opening your program several times in the same browser might be something to look into. It will hog up the RAM, and your processor will be under more stress and will not perform as well as it would in a normal situation.
Just thought I'd throw out every suggestion I could think of :)
Related
Is there a way to check the resource usage with a javascript code?
Can i check RAM usage and cpu usage of the script?
Since there are various ways to do something, i might write the code using different methods, and save it in as 2 different files, and check which method is more optimized. Esp when i'm calling a function recursively.
This way, i'll get to learn which methods are better and what to use.
Anything like maybe an addon, or maybe a script to be added that does this. It would be much better if it shows function wise. I'm not sure if something like this exists.
On a note, with chrome inspector, i tried CPU profiling, but it seems to show me values according to time, and does not show the RAM/CPU usage.
There's no uniform cross-browser way to do this. You can get an overall sense of your javascript performance by using Chrome's Timeline tool. Switch between the Timelines and Memory tabs on the left and hit the record button at the bottom. I believe Safari has a similar tool.
Internet Explorer has the excellent DynaTrace tool, although I don't know it well enough to provide detailed instruction on how to use it.
Note that javascript interpreters vary wildly in implementation, so they may have very different performance characteristics. Rather than get caught up in the details of implementation (premature optimization is evil and all that), write your code with good coding practices in mind. That means that if you do have performance bottlenecks (which the profiling tools available will help you locate), you can refactor more readily.
I don't know any specific way to test the Ram and CPU stats of javascript. But I often user http://jsperf.com/ to see how two different functions perform.
Have you tried with Crome Tools > Task Manager in Chome Tools menu options? It shows the CPU and Memory Usage for each process running in the borwser (comprise chrome-extensions).
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.
Is it possible to run JavaScript code in parallel in the browser? I'm willing to sacrifice some browser support (IE, Opera, anything else) to gain some edge here.
If you don't have to manipulate the dom, you could use webworkers ... there's a few other restrictions but check it out # http://ejohn.org/blog/web-workers/
Parallel.js of parallel.js.org (see also github source) is a single file JS library that has a nice API for multithreaded processing in JavaScript. It runs both in web browsers and in Node.js.
Perhaps it would be better to recode your JavaScript in something that generally runs faster, rather than trying to speed up the Javascript by going parallel. (I expect you'll find the cost of forking parallel JavaScript activities is pretty high, too, and that may well wipe out any possible parallel gain; this is common problem with parallel programming).
Javascript is interpreted in most browsers IIRC, and it is dynamic on top of it which means it, well, runs slowly.
I'm under the impression you can write Java code and run it under browser plugins. Java is type safe and JIT compiles to machine code. I'd expect that any big computation done in Javascript would run a lot faster in Java. I'm not specifically suggesting Java; any compiled language for which you can get a plug in would do.
As an alternative, Google provides Closure, a JavaScript compiler. It is claimed to be a compiler, but looks like an optimizer to me and I don't know much it "optimizes". But, perhaps you can use that. I'd expect the Closure compiler to be built into Chrome (but I don't know for a fact) and maybe just running Chrome would get your JavaScript compiler "for free".
EDIT: After reading about what about Closure does, as compiler guy I'm not much impressed. It looks like much of the emphasis is on reducing code size which minimizes download time but not necessarily performance. The one good thing they do in function inlining. I doubt that will help as much as switching to a truly compiled langauge.
EDIT2: Apparantly the "Closure" compiler is different than the engine than runs JavaScript in Chrome. I'm told, but don't know this for a fact, that the Chrome engine has a real compiler.
Intel is coming up with an open-source project codenamed River Trail check out http://www.theregister.co.uk/2011/09/17/intel_parallel_javascript/
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.
I'm developing large application using ExtJS framework. Because it grows too fast, I realized that this might be the time to start doing tests.
I want to go for BDD technique, I found several BDD frameworks for JavaScript around (Screw.Unit, JSpec, JSSpec), but I'm still not sure which one to choose. There are some articles about this topic, but I'm more interested in your own experiences/suggestions.
So my questions are:
Which one do you use and why?
Any other hints/tips are welcome.
Do you use Selenium alongside a BDD testing?
Do you use any other technique?
We use Selenium, yes.
I wrote a Unit Test framework (well, most of one, functional, not entirely pluggable) that I have used a few times. These sorts of topics keep coming up so maybe I should finish it... the url is http://code.google.com/p/jasproject/
I use buster.js because I develop in node.js as well as client-side javascript. It copes with both scenarios using a single API. The documentation is still lacking, but I really like the support for asynchronous testing.
Buster can also be used in a similar way to Selenium's WebDriver - you can slave various browsers to a buster "server" and run your tests in all those browsers at the same time.
Functional web testing has several challenges. Tests tend to be...
Slow to run (http requests are slow, dom traversal can be slow too)
Slow to write (write a test, start the app, run the test, realise you made a mistake, start again)
Hard to read (xpaths, css selectors etc)
Brittle (when tightly coupled to your HTML)
Expensive to maintain (if you don't use an abstraction layer such as the page object pattern)
Unrealistic (when run in a fake browser)
For these reason my preferred stack is
JavaScript - development time is fast since there's no compilation time
CasperJS or Zombie JS - very fast, webkit based (Safari & Chrome [for now])
Yadda for true BDD - Makes the test easy to read and provides an abstraction layer, mitigating the brittleness and maintenance
Downsides of this stack is that you're only testing in webkit, not firefox, IE or Chrome (when Google move to Blink)