I have heard that EXTJS is a browser independent javascript library. How does extjs make itself browser independent? When I open up the library classes, I do not see any code like :
if (IE)//do this;
else if (FF) // do something else;
Is my understanding correct that extjs is browser independent?
In addition to sha's point, I'm aware that ExtJS uses conditional checks for browser features and selects whether to use things like images, or css for particular visual effects.
Two examples of this would be that it manages to produce rounded corners on it's widgets in IE6 via images, but in anything which supports it, it will use 'border-radius' in CSS.
This is also true with gradients in widgets, which are rendered as images in older browsers, but use CSS3 gradients where supported.
As a rule, from what I've seen, ExtJS uses 'feature detection' to work out what your current browser supports and responds appropriately. A further example of this would be it's charting classes, which render as SVG if supported, or VML on older browsers.
There are some classes in ExtJS you can use to perform feature detection if you wish to do anything specific outside of it's in built in actions too. I'd imagine it uses these under the hood to make decisions about what to render.
That aside, it should be noted that every now and again, you can notice odd discrepancies between browser versions, usually annoying little visual effects, like a scrollbar being present in one browser an not in another, this could however just be a symptom of other code, but I know we've seen a few little quirks from time to time when testing accross IE8, IE9 and Chrome for example.
It is browser independent. As far as I know they have some different CSS definitions for different browsers. If you want to see is there any difference in the JS code you will have to look deeper - probably at some ExtJs core files.
We've been using it so far on IE, FF, Chrome, Safari, Mobile Safari etc.
Related
I trying to decide whether I could to use angular.js (and anguar-ui-bootstrap) in my project.
The web application should work with any reasonably modern browser, I was quite surprised that the right on the angular-ui-bootstrap site, after clicking on "create a build" button the server responds:
Your current browser doesn't support creating custom builds. Please
take a second to upgrade to a more modern browser (other than Safari).
with a link to http://browsehappy.com, where my Safari (v.8) is listed, but the angular-ui-bootstrap explicitly excludes it.
In the FAQ for the angular.js is:
AngularJS is 100% JavaScript, 100% client-side and compatible with
both desktop and mobile browsers.
also the bootstrap 3 itself is compatible too.
Since I am a complete novice to angular.js, just downloaded and trying to learn it, but honestly, I do not want to waste several days/weeks with learning to discover: it doesn't supports Safari fully. The support of all reasonably modern browsers is crucial for the project.
Therefore the questions are:
Supports angular-ui-boostrap any reasonable modern browser fully, e.g. for any functionality?
If not fully, which functions / modules / parts are "problematic"?
e.g. the "build-problem" is the angular.js's "feature" ?
The angular-ui-bootstrap build modal window kicks off a function called isOldBrowser. Looking through their repo you can find that function under misc/demo/assets/app.js. Instead of looking for specific browsers it's looking for the browser to be able to execute specific functions or return certain results. Presumably, the checks would be a very generalized way for them to make sure you have an appropriate browser.
Having said that, Bootstrap lists pretty much every browser as being supported with only a few exceptions (like Safari on Windows) plus a couple of bugs each. Angular has a similar statement in that they support all current browsers (IE9 and up). Either way you should be safe using any modern browser.
hopefully my questions won't be too vague.
I designed a pretty simple website. You can see an image of it >>> here
But now I'm trying to make a mobile version.
However I'm contemplating using a different html for the mobile version since the desktop version has jquery pop-ups (prettyPhoto) and a very large backround that scales, which aren't great on mobile screens.
I'm unsure of how to do that. My first question therefore is:
1.) How do I call a different html for mobile?
Also, for tablets, the website renders pretty well in landscape mode but becomes weird in portrait mode. So my second question is:
2.) Can this different html be called based on width? If so, any ideas how?
So if tablet is viewing website in portrait mode, they get the mobile version, if they are seeing it in landscape mode, they get the desktop version.
I am not sure what you are attempting to do, but from experience as both developer and mobile user, what you propose is not a good idea. Again, since you have not mentioned what you are attempting to do, I am speaking generally. Consistency is very important for UX, and delivering completely different behaviours and looks for orientation does not sound like a good usability. Also, remember that on today's tablets, switching orientations is very easy. Would you load each version on each orientation change? What if the user is on 3G?
But technically, it is possible to load depending on width or orientation. Use AJAX, and load the appropriate content.
I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.
i want my websit ui of flash or silverlight quality, but want it to work on any browser by default, i.e not asking for installing flash plugin. is it possible ? what technology should i look at ?
Well, it depends on what kind of "UI quality" you have in mind.
If you want something static, pure HTML will do the job.
If you want dynamic UI, HTML + Javascript is probably your best option right now (AJAX if you need to deal with the server without refreshing the whole page).
HTML 5 will also offer you more UI possibilities if you don't mind waiting for it.
However, some plugins features (like 3D acceleration) will be difficult to "emulate" even with HTML 5, so before choosing which technology is suitable for you, defines whats your real UI needs are (for now and futur development).
you could use javascript with a library such as jQuery to help. But there are things the both Flash and SilverLight can do that html+javascript just cannot do.
HTML5 is around the corner...Which to some extent can do a lot more...
I was wondering if anyone knows of any large sites that use progressive enhancement/CSS3?
I am trying to put a case together at work on why sites don't need to be a carbon copy in all browsers but my arguements will be somewhat impotent without examples in the wild.
http://www.headscape.co.uk/ use CSS3 properties while ensuring that their website degrades nicely in browsers that don't support CSS3.
http://www.piccsy.com/everything-design/
http://www.soleilnoir.net/believein/
sites use CSS3 transitions but they work fine in IE too apart from the smooth transitioning effects.Comprehensive fallbacks can be written in place for CSS3 properties.
For animation effects that use jQuery libraries animation enhancement plugin are advised.
Many major sites though use advanced properties will write comprehensive fallbacks in javascript so that the incompatible browsers will render the same effect but this can be detected when only one views the source code.