JQuery Mobile performance - javascript

My JQM application needs to display only content that never changes. That's why I've written a static website which is about (HTML file <= 500kb).
I am using the multipage architecture. No own JavaScript is used.
The application works well on newer smartphones, but lags on older smartphones. Are there any ways to optimize the performance of JQM?
(Split into different files is not wanted..)

Consider a case that you're developing your website to make it work with Opera Mini as well, and then you'll have to make your website rely less on JavaScript.
If your website is actually a Mobile Webapp which substitutes a dedicated native app for smartphones that can't run it, you might want to make all your modules AMD-ready so that not all of your code gets downloaded at once.
And since you mention that:
I've written a static website which is about (HTML file <= 500kb).
I believe loading all that markup is not wise, if your target "old smartphones" have browsers which can handle Ajax, you can load page content selectively and maintain webapp state via hash-tagging the URLs.
Obviously, there's no magic wand to fix the problem your facing except for some modifications that I've suggested. You may want to check Google's Closure Compiler and some tips from Yahoo. :)

Related

Is it possible writing a cross-platform desktop application with XHTML, CSS and JavaScript?

Is it possible writing a cross-platform desktop application with XHTML (or HTML), CSS and JavaScript?
If the answer is yes, how to run this application? Should I run it with a browser like Firefox?
Note: Currently Windows supports HTML Application.
It seems that what you're looking for is the Open Web Apps
HTA is really Old technology.
Try tools like Titanium (Appcelerator). They are tools, which render HTML content inside an APP. So, from outside, you will be running an executable but inside , it is loading a HTML file.
Same principle is being used in many apps now a days. Facebook for android is a best example
If client-side JavaScript, and/or HTML/CSS hackery accomplishes the task you wish it to, yes, and with a user agent like Firefox, indeed.
Yes. With HTML5.
The other answer's solutions are great, but generally they assume that the user is connected to the internet to have a server-side that handles the data.
But it's possible to use Open Web Apps (as ZER0 suggested) with HTML5, which has a lot of support for offline web apps.
Pay attention to it, though. Even HTML5 assumes that eventually the user will have some sort of internet connection, and offline functionalities are seen as a "cache". So, I'm not sure that this solution is enough for every requirement, because I don't know how much space HTML5 provides to offline applications

Designing JQuery / Ajax sites backwards compatible w' no-JavaScript browsers

Does anyone know a good place to look for basic principles and tutorials on designing a JQuery rich websites, but which would still work in browsers that either don't support JavaScript or have it disabled?
If that's even possible, in practical terms..
Before you look at all this, you should be aware of a few things.
Historically, there were lots of reasons to make things work without JS:
SEO. Googlebot ran much like Lynx
Mobile devices. Hardly any, if any at all would run JS
Paranoid users who turn off JS
Corporate restrictions
Accessibility - screen readers etc.
If we look at todays landscape, things are different
Googlebot evaluates JS. In my own testing I've found that Googlebot can make ajax requests via jQuery code, and include text inserted into the page in it's results.
Mobile devices run better browsers than desktops for many users (i.e. Android Phone + IE8 user)
Noscript etc allow you to whitelist sites, though hardly anyone uses it anyway
Some corporations likely still ban JS, but again, it's minimal
Accessibility is getting better, and in many ways it's not an issue, but users may still be using older versions that don't deal with JS well.
This means that you are making a site without JS for accessibility reasons. This lets you concentrate much more on the experience you are creating without JS.
In short, you should ensure that anything that happens via AJAX can also happen without. This usually means modifying your serverside code so that anytime it generates JSON, it can also create the whole page the JSON is to be inserted into (i.e. if you have a button that loads text into a div, you should have an actual page with that view in).
An alternative approach is to carefully provide a different version of the app targeted at users without JS. Many old mobile sites are “good” examples of this.

Can I use HTML4 and Javascript for a mobile version of my site?

I want to create a mobile version to http://thenamestork.com. After reading a few posts as well as the official google blog, I understand that a valid mobile site, that will get indexed in google mobile search, is made with different markup languages than html4. I also understand there's a problem with using JS, and my site is JS based (works more like an app than a content-website).
My focus is on smartphones, that CAN handle my site anyway - I thought all I'll need to do is changing the css layout - but there is no point if it won't get indexed by google.
So what's the best way to convert a html4 javacsript site into a valid, search engine friendly mobile version?
Google is actually quite forgiving and will index most sites that use something that looks a bit like HTML, even if it's nog 100% valid. Just to be on the safe side, though, you could try validating your HTML.
On the other hand, if you load content asynchronously (i.e. through AJAX), Google might not index it. Search engines generally only index the HTML that's sent to the browser when the page is loaded, without running any JavaScript.
You can certainly use html and javascript for a mobile site for smart phones. Browsers on smart phones are mostly the same as the ones you find on a desktop (with some added features).
jQuery Mobile is a good place to start. I have used it for a few sites I've worked on.
Yes you can, you might also want to check a little of CSS3 and Html5 since mobile devices are mostly compatible with!

Any serious problems when making an old java web app run on new IE 8 browser?

I need make an quick estimation on project (not sure we got):
It's an old banking CMS java web app, but the UI aimed for getting near the winform style:
Server: jdk5, weblogic 9 (JSP 1.x), only use weblogic internal servlet (not strut...).
Client: winXP, Ie6.
It was design only for use with ie6 but now we need make it also run well on new client: ie8,ie7 on win7. I understand the most difference is the client: DOM and CSS.
But my problem is we hasn't been worked with ie8, and I have not enough time to build an testing environment because our developing environment is not ready to make test (its remoting completely, and managed by another partner)
Any experience or suggestion to help me weighing this task need will be welcomed.
Edit: HTML, CSS is fairy outdated, not work on firefox at all, JS is barely procedure, no ajax, no plugins.
Client PC is limited for banking and, internal use (user not be supposed to change config or choose the browser)
Using activeX to manipulating printer and creating the report (increase ability to meet security problem )
This has nothing to do with Java, or weblogic. What you need to worry is javascript and css.
As long as your concern is limited to IE7 and IE8 only (ignoring Firefox, Chrome, etc), I think you are pretty safe. These two browsers have compatibility mode that should work with IE6 designed websites. Most problem would probably cosmetic rather than functions.
In my eyes, this is going to be impossible to tell without actually testing the application.
It'll totally depend on what kind of markup was used. Possible problems can range from near zero (if only standard markup, simple design, and basic Javascript or a framework like jQuery was used) to several weeks of fixing (heavy use of complex CSS rules optimized for IE6; heavy use of IE specific Javascript).
I'm not sure about any DOM problems since IE8 hasn't had any significant DOM updates since 1998 while any other browser is far more advanced than that. CSS and, maybe, javascript will be the big issue since you say it doesn't work in any modern browser (Firefox, Chrome, etc.)

iphone web page transitions

I am developing a web page for iPhones and iPod Touch's. I am using the Universal iPhone UI framework. I need to have silding page transitions, but can't seem to get it working. Is there a good javascript framework I could use that would make this easier? I've done a lot of normal web dev with jquery, but it doesn't seem to like the iPhone.
Try http://code.google.com/p/iui/
It's a nice little JS framework, among other things, that will help you with the transition aspect. Have a flick through the documentation too, as it'll give you quite a few additional options as well.
Regardless of what framework you're using, the WebKit CSS trasitions are extensions of CSS and were developed with the iPhone and iPhone web-based apps in mind. You can do some very clever, complex animations with no JavaScript and only a few lines of CSS.
Here's what Google finds on the subject.
Try the following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
Reference
Apple's Dashcode IDE has an extensive set of page transition templates for the iPhone. You should be able to fire up a quick project, get the look you want, then export the resulting HTML/CSS/Javascript into your favorite IDE.
The only catch is that it's OSX only.
I've been deep into an iPhone web app project lately. We evaluated iUI, but decided against it for various reasons. Consequently, I've developed most of the same functionality from scratch. While I can't share the code from the actual product (as I'm under NDA), I have been documenting many of the techniques I've used to do certain things. Check out the links below:
http://segdeha.com/e/css-transitions/
http://segdeha.com/blog/2009/07/19/stupid-webkit-tricks

Categories