I'm in a process of selecting an API for building a GWT application. The answer to the following questions will help me choose among a set of libraries.
Does a third-party code rewritten in
GWT run faster than a code using a
wrapped JavaScript library?
Will code using a wrapped library
have the same performance as a pure
GWT code if the underlying
JavaScript framework is well written
and tuned?
While JavaScript libraries get a lot of programming eyeballs and attention, GWT has the advantage of being able to doing some hideously not-human-readable things to the generated JavaScript code per browser for the sake of performance.
In theory, anything the GWT compiler does, the JavaScript writers should be able to do. But in practice the JS library writers have to maintain their code. Look at the jQuery code. It's obviously not optimized per browser. With some effort, I could take jQuery and target it for Safari only, saving a lot of code and speeding up what remains.
It's an ongoing battle. The JavaScript libraries compete against each other, getting faster all the time. GWT gets better and better, and has the advantage of being able to write ugly unmaintainable JavaScript per browser.
For any given task, you'll have to test to see where the arms race currently places us, and it'll likely vary between browsers.
In some cases you don't have another option. You can not rewrite everything when moving to GWT.
In a first step you could just wrap your existing code in a wrapper and if it turns out to be a performance bottleneck you can still move the code to Java/GWT
The code optimisation in GWT will certainly be better than what the majority of JS developpers can write. And when the Browsers change, it is just a matter of modifying the GWT optimizer and your code will be better tuned for the latest advances in Js technology.
Depends on how well the code is
written.
I would think so.
Generally look at the community around a 3rd party library before using it unless it is open-source (so you can fix bugs) and specifically look for posts concerning bugs - how quick do the maintainers respond to items. How long is a release cycle, etc.
Related
I am on a new project and our job is to rewrite an e-commerce website that is having performance problems on mobile devices.
We are re-writing the javascript based on a more object-oriented/modular architecture which I think is great! However my team lead said that we should remove all the jQuery calls and replace with javascript like so domElem.querySelectorAll(query) , which has better performance. I understand jQuery does some kind of caching in the background which can create memory issues.
I am a little sceptical of this, firstly because it seems like a case of 'premature optimization', that is, we should find the bottle-necks first before we re-write anything. And secondly I haven't found anything on the internet that says that jQuery has significant performance problems.
The current website does have a lot of overlapping dom branch queries which I think creates a lot of redundancy. That is there is too much querying happening, and on our new architectual approach we are restricting our object/module to fewer dom queries and more targeted dom queries which is great. This does need to be re-written.
But whether or not we use domElem.querySelector(query) or $(domElem).find(query), I can't see there as being much of a difference. Is my thinking right?
Some tests are done here (check other revisions as well). Good detailed discussion is done here over pros and cons of using jquery over javascript.
Also want to point out that jquery doesn't do any caching of selectors.
The thing we often forget because of using Javascript frameworks all the time is that jQuery is not a framework.
Obviously, if you do the exact same one-operator action using the jQuery '$' object and using a direct DOM method like getElementById, the latter will be noticeably faster as jQuery itself is written in Javascript and does a lot of background stuff.
However, nothing (except code readability) prevents you, as a developer, from combining jQuery with plain Javascript: using plain Javascript wherever possible and only using jQuery functions that provide complex functionality and take some time to write and optimize from scratch. There are a lot of those in jQuery: providing browser-independent css, serializing object and doing lots of other cool stuff.
It depends on the application but usually performance troubles are related to badly-designed algorithms, not the use of jQuery.
In any case, if your application does a lot of DOM-manipulation, it may be worthwhile to re-write it using plain Javascript and test. Keep the library, just don't use it for simple operations you can easily write without it.
If your application is heavily-reliant on jQuery functions with complex functionality, removing it is out of the question.
I myself use this combined approach: everything simple written in Javascript with jQuery functions for stuff that is difficult to implement.
Also, a good place to dig around if the app has troubles with performance is the DOM-manipulation. Those operations are very heavy compared to almost everything else in Javascript. You may be able to cut down on time by rolling several operations into one, building finished objects with one constructor, instead of creating empty ones and assigning properties one-by-one, etc.
Sorry, if the answer is a bit vague but it's difficult to be precise in this case without seeing the code and running tests.
Let me quote Uncle Bob about this discussion "Architecture is about intent, we have made it about frameworks and details"
Premature optimizations needs to be considered carefully.
They often result architectural decisions that are not easily revertible.
They introduce code optimizations that are usually specific to the problems they solve, which makes the code less abstract thus hard to
maintain, and more complicated thus prone to more bugs.
They tend to be prejudice and not objective, sometimes without any real comparison to other alternatives.
The problems they are trying to solve tends to be overestimated, to the degree of non-existent.
I'm not a big expert on Web development but if possible, you should always push this kind of decisions to the end by separation of concerns, and good abstraction.
For example over the parts that generate the java-script code you can have an abstraction of JavaScriptWriter, and use different frameworks. This way you can use JQuery at the beginning, test the system and only then replace parts you know to be inefficient.
I'm looking for a way to reduce a javascript library/framework with the objective of only sending to the client (browser) only the necessary code. I've searched and I found that, for example, closure compiler can't remove jquery dead code.
How can I write a web application, using javascript or any other languages/frameworks/tools to archive this goal? I've nothing against frameworks but in mobile devices performance counts a lot. I've tested HTML5 mobile apps on cheap android devices and it's terrible to use due to performance issues. I want to extract maximum performance.
My 2 cents:
In term of performance, use good practises with a linter such as jslint, jshint, or eslint.
To check wich concept is better than another one, you can check at jsperf or make your own ones with benchmark.js.
For loading time, jQuery is a bit big for mobile. Zepto is a good alternative. Imo, it's better to concat all js files on mobile than async load the js.
MicroJs is a site which list all libraries that usually fit a specific need.
How does GWT compare (or can it be compared) to Javascript frameworks such as backbone.js, angularJS, Ember, JQuery, etc.? Do they aim to accomplish the same job, making them competitors, or can they be used together?
Yes and no. While GWT's compiler is essentially a Java-to-Javascript converter, the benefits it offers far outweigh anything I've seen from any popular JS libraries.
Since GWT-based apps are written in Java, they gain many of the benefits thereof, such as being strongly typed and extremely easy to refactor. If something changes that affects another class, you know it immediately. And for those things that Java isn't great at, you can always use Javascript to handle the case with JSNI. Google has also provided a great plugin for Eclipse which allows you to debug your code like nothing I've ever seen of a JS library. Another benefit of this is that you write your client- and server-side code in the same language, and GWT does the heavy lifting of tying them together.
There are also the benefits of the automatic generation of multiple permutations. GWT kicks out a copy of your code that looks and behaves identically (inasmuch as is possible) on the most commonly used browsers. Your clients all see the same thing without you carrying the extra weight. You aren't responsible for writing endless lines of code to deal with those countless browser idiosyncrasies that have plagued web developers forever. While to some extent these things are handled by some JS libraries, GWT makes it completely effortless.
In my experience, the libraries you mentioned are all great in their own right, but simply can't provide the powerful debugging, portability, extensibility, maintainability and portability that GWT does right out of the box. GWT isn't really built to work with other libraries, and instead gives you the capacity to do (mostly) everything those libraries can without their help. (Of course that isn't to say that you can't use other libraries wherever you want...you can if you really feel the need to do so.)
So in my opinion, no, there is no competition. GWT is the figurative heavyweight champion in this arena.
I am new to computer programming and have some experience programming with python. I am thinking of developing a program that does physics simulations (projectiles, circular motion, damped simple harmonic motion systems etc.) as a hobby project. I would like to write the program that it could be run by a non-technical user(my fellow students) on a variety of platforms (mac, windows etc.) without any setup and python doesn’t seem to be a good option for building such a program so I am looking for an alternative. JavaScript has caught my attention, as it seems to be quite powerful on modern browsers, especially in conjunction with HTML5. I would like to know whether it is suitable to use JavaScript for this type application, and some information as to where I should start (I have no JavaScript knowledge)
Thanks in advance!
Yes I did have a look at the similar threads on the site but I want write something by myself than using a 3rd party library (other than for the frontend, if possible) :)
What is actually your question? :)
Can you write a physics simulation in Python?
Yes, of course.
Can you write a physics simulation in Javascript?
Yup.
Will it be useful?
Yes, probably.
Will it be efficient?
Not as efficient as an implementation with C, to be sure. But for small-scale simulations should you should have quite enough power with current JIT javascript interpreters. Tens or hundreds of objects on 30fps looks like a safe approximation, I think.
Can you make use of modern HTML when writing a physics simulation in JS?
The simulation and the display are two different things, but yes, if you want to make a graphics frontend to your simulation, the modern features of HTML and CSS could be certainly useful. But if you write it in any other language, you still have nice choices for visualization.
How to learn JavaScript?
There's plenty of tutorials online, but I don't know any particular one to recommend; perhaps anyone else can fill for me here.
As mentioned by Kos languages that are as High Level as Python or Javascript might constrain you. But later on you can still move critical parts to C-Code. (-> Regular shared Library or even Browser-Plugin)
For JavaScript I recommend you the Mozilla tutorials: https://developer.mozilla.org/en/javascript
Check out the "JavaScript Guide" in particular and keep in mind that not every Browser supports JavaScript 1.7. By the way, you should also checkout jQuery. Actually it might be easier to start right off with jQuery because you need some highlevel library anyways.
By the way: You might also want to check out Processing. (www.processing.org) It might be perfect for you as you are new to programming and it has a lot of awesome vizualization features. It basically a simplified Java with a very easy to use library. You can checkout the pre-installed examples and start playing around. Be sure to check the Reference on the website / the forum if you are stuck with problems. Processing runs on the JVM and is therefore cross plattform.
I recommend Processing very much because you can directly see results and in any case it might be interesting for Prototyping even if you think of using another language in the future to suit your needs.
Actually there is even a JavaScript version of Processing though I never used it...
EDIT: If you plan to choose JavaScript, you should use Firefox in combination with Firebug. It makes life easier when debugging...
We are about to commence a redesign of our site and are exploring all options in improving performance. The site is fairly heavy in javascript loaded adverts, therefore we need to be really lean with the javascript we use.
Do any of you have any experience of lighter frameworks or more efficient frameworks that I could explore? Or any resources that you could point me toward? YUI looks like an interesting concept … has the loader being tested in anger? ANy good?
Any thoughts would be appreciated.
Cheers.
edit: Sorry, I wasn't clear. The sites performance currently is pretty good, we are not redesigning due to performance issues, it is due to a rebrand. We just wanted to take the opportunity to review best practices.
jQuery 1.4.2 is lean and mean. You'll be hard pressed finding something faster or more lightweight.
As an example, here is a framework test called slickspeed from mootools. It tests a framework's ability at finding elements in the DOM. The version of jQuery being tested is 1.2.6. Depending on your browser, jQuery performs exceptionally well. In my Chrome browser, jQuery beat all the others with a total time of 20 milliseconds.
And since version 1.2, jQuery has had astounding improvements in optimization and speed, especially with 1.4.
That said, a framework isn't going to make you code better. You can write some seriously slow scripts using any framework, including jQuery.
If, however, you write optimized code, jQuery can be so fast you don't even notice.
Pointy's comment above is spot on. All these guys do all day is worry about how to perform better. So it's pretty optimized.
addendum
This is from jQuery's blog:
While comprehensive benchmarks like Taskspeed can be interesting if deconstructed into individual sub-tests for further study, as a project we tend to stay away from using them as an accurate measure of true, overall, library performance. Considering how many aspects make up a library, not to mention the different techniques that they offer, cumulative results rarely reflect how an actual user may use a library.
So take that as you will.
I prefer YUI3 for larger apps and just about anywhere that 'load on demand' can offer benefits :)
I agree that slowdowns mostly stem from how you implement your app, which is one of the benefits, imho, of YUI, it lends itself naturally towards more modular implementations.
Using the yui loader to bring in page elements widget style allows for good code reuse (and caching) as well letting the user see 'something' quicker.
It won't really solve your JS ad issues though, for that, the best thing you can do is load it as near the bottom of the page as possible, and perhaps look at what loading options the adservers have.
Re: Stephen's comment
Well, raw speed for tight loops are sometimes meaningful, sometimes not. There is also the issue of the implementations used for the comparison, the YUI3 code posted in Ejohns version looks positively gimped compared to the jQuery code, look fx at the first one. Where jQuery adds almost the complete DOM element from a string while YUI3 is going thru all kinds of hoops, relatively speaking.
For a version that is written by someone who knows YUI3 have a look at http://yuilibrary.com/~msweeney/yui-tests/taskspeed/ the newest jquery isn't represented, but it does have YUI3 as ~4 times faster overall than jquery 1.3.2 in my Chrome.
Update
http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ a jquery users experience of yui3.
Probably the best place to start off is not to ask what frameworks can help but why your current site has bad performance. I would start off with tools like Yahoo's YSlow and also Dynatrace ajax edition. Dynatrace is nice because it will point out javascript/dom manip stuff that make your pages slow. You will want to use more than just two performance tools though since they all pretty much have their own idea's on what makes a page fast. Once you have that down then I would come into a forum and state that your having performance issues with X and what can I do to fix.
vapor.js is the world's smallest and fastest javascript library
http://vaporjs.com/
I think you should have a look at zepto.js
http://zeptojs.com/
this article gives you some advices for porting your jquery code
http://blog.pamelafox.org/2012/03/porting-jquery-plugins-to-zepto-tips.html
jQuery is plenty lightweight if coded properly. It sounds like which framework you are using is not the problem, but either a) why the javascript your writing is performing slowly, or b) why you are using so many slow loading ads to begin with.
But if you really want to look into other frameworks, here's a handy comparison chart: Comparison of JavaScript Frameworks
I just wrote an internal app for our company using jquery and jquery UI (http://jqueryui.com/), mixed in with c#. I found it to be extremely lean and fast - no problems whatsoever.
the jquery ui makes it easy to theme the website...
and by adding other components like blockui, jgrowl, etc you should be able to do anything you want!
Sprint is a tiny, fast alternative.
Check out the repo for benchmarks on a few functions, compared with recent versions of jQuery and Zepto.