Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Tuesday, 11 August 2015

jQuery Mobile: Events


Orientation events:

  • At times a user will change the orientation of device when using an application, which could happen as a result of general movement of the device.
  • Orientation events are triggered when you rotate the mobile device vertically or horizontally i.e. change your mobile device orientation.

Example:

$(window).on("orientationchange", function(event){
      alert("Orientation Change");
});



Thursday, 6 June 2013

Frequently asked PhoneGap/Cordova interview questions

When we talk about PhoneGap/Hybrid mobile app development, it is most probable that the interviewer may also ask about JavaScript, Dojo, jQuery, HTML5, CSS, Sencha, JSON and so on. Be prepared. Below are some questions which I came across -

1. What is PhoneGap and why ?
PhoneGap is a mobile application framework that allows developers to use HTML, JavaScript and CSS to create mobile apps that are present as first-class applications on the phone. That means the mobile apps have their own icons and operate similarly to native applications without a browser frame around them.

They have access to a set of native functions to further make them work like native apps.

Mobile developers use PhoneGap because it allows them to have a common codebase for all their application code. It doesn’t force developers to write code from scratch every time they move from platform to platform.

2. PhoneGap architecture.
PhoneGap has a plugin-based architecture. Each device-specific feature is a plugin, which consists of javascript and native sides. Js side should be as cross-platform as possible, whereas native side can be implemented only once, for 1 device. Nevertheless built-in plugins are developed for all of the most popular platforms, so no need to reinvent the wheel.
This architecture, together with open source code, not only allows a developer to fix their bugs, but also allows them to tweak their plugins for as per requirements. Also, a developer can build his own plugin, and support any platform of his choice.

3. What is the difference between PhoneGap and Cordova?
PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.

4. What is PhoneGap Build, and how is it different from PhoneGap framework?
PhoneGap is a mobile application development framework, based upon the open source Apache Cordova project. It allows you to write an app once with HTML, CSS and JavaScript, and then deploy it to a wide range of mobile devices without losing the features of a native app. PhoneGap Build is a cloud-based service built on top of the PhoneGap framework. It allows you to easily build those same mobile apps in the cloud.

5. What is a Plist file in iOS development ?
Yes, this is not related to phonegap, but interviewer expects the answer!

Property lists are a way of structuring arbitrary data and accessing it at run-time. An information property list is a specialized type of property list that contains configuration data for a bundle. The keys and values in the file describe the various behaviors and configuration options you want applied to your bundle. Xcode typically creates an information property list file for any bundle-based projects automatically and configures an initial set of keys and values with appropriate default values. You can edit the file to add any keys and values that are appropriate for your project or change the default values of existing keys.

For further details click here.

6. What is the difference between ChildBrowser and InAppBrowser in PhoneGap ?
As the name suggests, Child Browser Plugin is a plugin and can be integrated in any phonegap application.

Whereas, InAppBrowser is a phonegap API that provides the ability to spawn a browser instance from a Cordova(2.3.0) application. The API is based on standard browser capability. In a nutshell, this has the same functionality as the ChildBrowser, and has events support as well.
Example usage:
var ref = window.open('http://google.com', '_blank');
ref.addEventListener('loadstart', function(event) { alert(event.type + ' - ' + event.url); } );
ref.addEventListener('loadstop', function(event) { alert(event.type + ' - ' + event.url); } );
ref.addEventListener('exit', function(event) { alert(event.type); } );

// also, you can do ref.removeEventListener('loadstart', myfunc) .. etc

7. What are CDNs in jQuery? Why do we use it?
CDNs(Content Delivery Networks) can offer a performance benefit by hosting jQuery on servers spread across the globe.
There are three CDNs available that host the jQuery library free of charge:
  1. Google’s Libraries API CDN (a.k.a. Google Ajax API CDN)
  2. Microsoft’s Ajax CDN
  3. Media Temple’s ProCDN (the official “jQuery CDN”)
Using jQuery's CDN provided by MediaTemple
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

There are several benefits to using CDNs:
  • The file will normally load faster than it would if self hosted.
  • Odds are better that the site visitor will have a cached copy of the file since other sites will also be linking to the same file.
  • It saves the site owner some bandwidth since the file is externally hosted.
8. Name PhoneGap events
  • deviceready
  • pause
  • resume
  • online
  • offline
  • backbutton
  • batterycritical
  • batterylow
  • batterystatus
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton
More details here



References:
http://docs.phonegap.com/
http://phonegap.com/about/faq/
https://cordova.apache.org/




Friday, 8 March 2013

Dojo vs jQuery Mobile: Quick Comparison

Both jQuery and DOJO are JavaScript Development Frameworks/Packages that provide functions to make the writing of JavaScript code easier, faster and more efficient. jQuery normalize things across browsers and serves as a great way of doing DOM manipulation. Dojo is a more on comprehensive toolkit which helps developers to build superior desktop and mobile web experiences.

Advantages of jQuery:
  • Fast
  • Well documented
  • Easy to use
  • Chaining
  • Easy-to-use Ajax
  • Nice event handlers
  • CSS selectors
  • Small (only 30 KB)
  • Nice little built-in effects.
  • Plugins
Advantages of Dojo:
  • OOP (and other paradigms).
  • Widget infrastructure.
  • Modules done right with all necessary goodies:
    • Lazy loading of modules dynamically.
    • Asynchronous loading of modules if desired.
    • Simple integration with CDNs (content delivery networks) for heavy-duty web applications.
  • Sheer breadth of available modules in DojoX including graphics, charting, grids, and so on.
  • Attention to details in widgets:
    • Support for i18n (including LTR and RTL languages),
    • Support for l10n (including standard date, currency, number formatting),
    • Provisions for people with special needs (automatic high-contrast mode, keyboard-only support, and so on).
Deciding right tool for a project depends a lot on complexity of the application, scalability, DB/Web Service dependencies, current skill set, etc. jQuery offers little guidance on how to structure your codebase, how to ensure that everything you need is loaded, or how to build your code into production-ready files. Dojo really shines here, but again, it takes a bit of getting used to.

Personally, I think Dojo's lack of good documentation/reference code, lack of 'marketing', and relative complexity keep it from becoming popular. Documentation is a whole lot harder to use than jQuery’s because, at first glance, it’s quite a bit more scattered and substantially more API-based than task-based. It's much easier to get started with library like jQuery because of all these factors. However, once you get over that initial steep learning curve, Dojo is good!

References



Monday, 19 November 2012

Sencha Touch vs jQuery Mobile: High Level Review

Cross-platform development tools are used for developing mobile applications that can be deployed in multiple platforms. Sencha Touch is a framework which uses Web standards for creating mobile applications. jQuery Mobile is a jQuery based framework which can be used for designing and developing web applications for mobile..

jQuery Mobile - jQuery Mobile announced in August 2010. It takes a similar – but more standards-compliant – approach to jQTouch and feels very much like that framework’s successor, with a broader array of UI controls and styles.
jQuery Mobile’s performance is variable, particularly in responding to tap events rendering animations.

Sencha Touch - Sencha Touch is the mobile counterpart to the Ext JS framework. Its approach differs significantly from jQuery Mobile: instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript. Working with Sencha feels a little less “webby” and a little more like building apps in other technologies like Java or Flex.

Selecting a suitable UI framework is very important for the success of any mobile web application development. Knowing the strength and weakness of these frameworks will help the platform selection an easy process. Based on some important parameters which will influence the platform selection, I have listed below a summary of comparison.

jQuery Mobile
Sencha Touch
jQM is based on the popular framework jQuery.  This is prevalent in the script loads as well. It's Lightweight.
ST on the other hand loads one file with ExtJS framework requirements in addition to the Touch framework.
jQM, lists support for iOS, Andriod, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo.Latest stable version is 1.2.0.
ST v1.1.1 supports, iOS, Android and BlackBerry. Latest release is 2.1(in beta version).
No MVC. Lot of care has to be taken while organizing the code.
ST is based on ExtJS 4 and brings the MVC pattern to the table.
Some transitions are not very smooth.
The transitions are seamless and very smooth.
Active ecosystem. Lots of plugins.
Difficult to design layouts.
Finer control of the HTML. Can use full power of HTML5

Easier to find errors
Too much dependence on global variables. Debugging mess.
Dead easy to make themes. Have an online ThemeRoller! (http://jqueryui.com/themeroller/)
Difficult to theme. Requires messing around with JS and SCSS.
Supports majority of the browsers (http://jquerymobile.com/gbs/)
Can be used for mobile site as well as mobile app (embedded webkit)
Only supports webkit based browsers.
Development is open and happens publicly with the support of the community.
The code repo is available to you on only if you purchase support and development is mainly done within Sencha company.
It's jQuery! It’s handy!
Learning curve is required to learn the ST framework, understand the documentation styles, and implement the application and features necessary to build an application.
Need to handle reliability and performance for complex applications.
Better performance.

If you want to build an iOS app then you may go for Phonegap + sencha because sencha makes it looks like a real native app and has explicit iPad support. It will work very well for iPhone. But if you want to port the same app in Android, you need to rethink; it is slower in android due to low hardware specs. It is somewhat better in HTC, S3 and other high end android devices because of their good specs.

If the requirement is to develop a large enterprise application with lots of emphasis on performance, security, extensibility etc, opting for Sencha Touch could be a good decision. But if you are looking for simple web based and very less time to market applications, jQuery Mobile could be a good decision because of its simplicity and its very Web-centric approach to development.

Reference Links :
http://mhorner.blogspot.in/2012/02/sencha-touch-vs-jquery-mobile-high.html
http://www.fusonic.net/en/blog/2012/06/26/sencha-touch-vs-jquery-mobile/