Developing Responsive Web Applications with AJAX and jQuery

Developing Responsive Web Applications with AJAX and jQuery

English | 2014 | ISBN: 978-1-78328-637-9 | 248 Pages | PDF | 12 MB


AJAX is a web development technique that allows a web page to be updated with new information without having to reload the page. jQuery is a JavaScript library that harnesses AJAX interactions to allow rapid web development. Together, they are a powerful combination, and are generally considered by frontend web developers as technologies that complement each other perfectly.
Developing Responsive Web Applications with AJAX and jQuery will empower you with the skills required to create responsive web applications in a quick and efficient manner. The book begins by identifying the key benefits of a responsive application for a commercial site, and then covers how to develop a layout using Bootstrap 3 and adding dynamic visuals to your web application using AJAX calls.
By the end of this book, you will be able to develop responsive web applications by combining AJAX development techniques with the jQuery JavaScript library.
What You Will Learn

  • Build responsive, fluid layouts using Bootstrap 3
  • Create JSON data and integrate it with your web pages using AJAX calls
  • Integrate Twitter, Facebook, and Google+ into your application
  • Incorporate Google currency converter into your application
  • Fuse YouTube videos and third-party shopping carts to your application
  • Debug and test responsive web applications
+

Introduction to a Responsive Web Application

HTML5

HTML5 is the latest version of HTML, released by the W3C foundation with more modern features included such as more semantics and usability features. This helps in responsive web application development with more ease and less effort. Some of the key points that highlight why HTML5 is a better candidate than other versions of
HTML are as follows:

  • Inclusion of new HTML5 elements such as video and audio as native reduces the use of an additional third-party plugin
  • Enhanced existing elements such as form element reduce the need for an additional amount of code to be written
  • Inclusion of Canvas and SVG for graphic rendering and drawing adds additional capabilities

CSS3 and media queries

Features such as media type detection and layout manipulation of media queries are useful to build a responsive layout. Some of the key points of CSS3 are as follows:

  • CSS3 animations and transitions reduce the need for JavaScript processing, favoring, instead, a native implementation that can vastly improve performance on mobile devices where processing power can be quite limited, while falling back gracefully to immediate changes in browsers that do not support them.
  • Support of new measuring units such as rem helps in building a logical relationship among elements’ dimensions present inside a page.
  • Ultimately, the vw and vh units will greatly enhance the ability of a developer to size elements relative to the viewport.
  • FlexBox provides numerous benefis with direction-based alignment and element ordering inside a layout. For a responsive design, this means that a default ideal order can be established via the document order to provide greater SEO benefis, while different ordering can be provided based on viewport size, device orientation type, and so on, to display content in the best format for a given use case.

JavaScript

JavaScript brings the capability of feature detection for the browser. It helps in choosing the right component for the end user and makes the browser responsive to its environment.

Some of the key points about JavaScript are as follows:

  • Browser feature detection helps you to fid features that are supported by the browser. This helps in helps you to execute the appropriate code in the application.
  • Rendering behavior of the site can be altered using JavaScript.