Why responsive design?
- In the current age of digital revolution, there are many devices with different screen sizes. This increases an additional layer of complexity for web development. A web application now has to present a similar experience across different devices. To solve this problem, it needs a design solution .This solution is termed as responsive design. There are also some key areas in the responsive design approach. They are as follows:
- Increase in the use of handheld devices (mobile, tablet): One example is data analytics provider, Flurry Inc. It released data about mobile application usage. The published report shows the mobile application usage is increasing. You can view this report at http://www.flurry.com.
- A single codebase is easier to manage: From a developer’s point of view, it is easier to manage a single code repository base for different devices. The developer has to make a change in one place for a change request in the functionality.
- Better Engaging content: Based on the device, the view will be optimized through responsive web development, which increases the user’s interest. Hence, the engagement of the user will remain the same as the original application.
- Conversion rate and lead generation: Through responsive web development, an optimized view will be presented to the user which will increase engagement and thus the probability of a higher conversion rate and lead generation.
- Better user experience: Using responsive design, we can show better content to the user that includes appropriate images and widgets. This increases the user experience for the application.
- Page load speed: Using responsive design, only required content can be downloaded to the targeted device; hence, the page speed will increase.
What is single page web application?
In a single page application (SPA) architecture, the presentation logic is moved to the client side. SPA can redraw a part of the UI on a page without a complete round trip or reload of a window.
Templates can be thought of as placeholders for styling and structure that will be modified by the application’s code. This way the content to be displayed can be generated dynamically by the app, while the presentation remains static. In web
application development, domain templating is a very well known concept and has been used by developers. In a more specific sentence, we can define a template as any document or file with a presentation format that can be created initially and does not have to be recreated for subsequent use.
The partial components is similar to a template that can be created once and reused many times. The only difference between partial and template is that partial is the smallest unit of a reusable chunk of code.
The router components is used for correctly navigation to a view based on the request. In single page application, the routing logic is present in the client side.
The controller components is the owner of a part of a page. It provides a scope to be used by the specific part of the page. In single page application, controller is used to share objects or create common behavior in terms of event callback functions.
Real-time communication introduces the two-way request-response mechanism. Technologies like WebSocket, Server-Sent Event (SSE), and WebRTC made this possible. In single page application, real-time communication is used to share the load between the server and client. Instead of polling from the client side, now push updates from the server side can now be used to sync the application.
Local storage provides a client-based storage system to cache the data in the browser. This really helps by reducing the number of HTTP requests to the server. In single page application, the client first checks the data required by a request in the local storage and if it is not present in local, then it makes a call to the server.
Understanding responsive single page application
In the previous section, we explored responsive and single page applications, two modern features of a web application. In this book, we will develop an SPA with responsive design using AngularJS, which is a perfect fit for SPA development as all the characteristics of SPA are present within the library. In the next section, we will quickly go through these features.
What is an AngularJS framework?
AngularJS is a complete client-side solution for web application development and is maintained by Google Inc. The AngularJS framework is one of the best frameworks to create single page application. AngularJS follows declarative programming similar to an HTML element declaration. This makes AngularJS simple. The AngularJS library is a perfect fit for SPA development. AngularJS is more like a Model View Whatever (MV*/MVW) design pattern instead of Model view Controller (MVC).This means that an AngularJS application can be developed with the model and view features.
Exploring the features of AngularJSIn this section, we will quickly go through some of the important features provided by the AngularJS library. The goal of this section is to understand each feature with its appropriate syntax.
Some of the features that we are interested in to build responsive web applications are listed as follows:
- The AngularJS module
- The controller scope
- The AngularJS routing module
- The provider
- Data binding
- Angular expressions
- Built-in directive
- Custom directive
The AngularJS module
Using the AngularJS module feature, an independent code section can be created. A module can be easily detachable. This module helps with better code management and it helps to work in large teams. Loose coupling allows developers to create their parts of the project independently. The angular.module() method is used to create a module. The syntax to create an AngularJS module is as follows:
var aModule = angular.module(“<moduleName>”, [“<injectedModule1>”,”<injectedModule2>”]);
In the above code, the angular.module() function takes two parameters: the first is the module name and second is the array of dependent module. The parameters used to create a module are as follows:
• moduleName: This represents the name of the module registered
• injectedModule: In the above syntax, injectedModule1 and injectedModule2 are modules that are injected as input to the targeted module
The controller scope
AngularJS provides the controller scope to create a new controller to manipulate HTML DOM indirectly under its scope by modifying properties present inside its scope. AngularJS uses the controller feature to perform the following operations:
• Setting up the scope object inside the controller
• Modifying the value of the scope object inside the controller
The controller() method is used to create a controller section. The syntax to create a controller is as follows:
var aModule = angular.module(“<moduleName>”,
//Definition of the controller
Some parameters used in the preceding syntax to create a controller section are as follows:
• controllerName: This represents the name of the controller created using the AngularJS library
• injector: In the above syntax, injector1 and injector2 are individual modules that are injected to be used by the controller scope
A controller scope can be defined inside HTML DOM using the ng-controller directive. The following code shows the use of the controller directive in the HTML file:
<! — HTML element inside the controller scope –>