The goal of this chapter is to understand the need for client-side development and to understand AngularJS. We will also get acquainted with the anatomy of AngularJS and its conceptual overview. Finally, we will discuss the basics of a single-page application development process. This chapter is organized as follows:
- Understanding the need for client-side development
- Understanding AngularJS
- Getting acquainted with the anatomy of AngularJS
- The conceptual overview of AngularJS
- Learning the basics of a single-page application
Application development is a broad term; it can range from developing a simple, static page of plain text to developing the most complex database driven electronic businesses and social network applications. A more comprehensive list of tasks, which application development commonly refers to, may include web designing, content development, client relationship, client-side configuration, server-side configuration, and deployment.
In the past, most developers were developing server-side applications because of the available server-side frameworks. Windows Presentation Foundation (WPF) or web frameworks, such as ASP.NET or Silverlight, are used to create objects that contain data and to bind them to user interface controls, such as HTML. However, improved browser features, faster JavaScript engines, and the increase in the usage of mobile devices, such as iPad, iPhone, and Android devices, have definitely shifted the trend from server-side to client-side development. However, data binding has been difficult in client-side application development because neither HTML nor JavaScript natively supports data-binding.
It is possible to achieve client-side data binding from scratch; however, it is definitely challenging and possibly not the best solution available. It is also very difficult to maintain and reuse the code. To create a client-side application is an amazing ability although the complexity involved in creating a client-side application is high. To develop a client-side application means to manipulate the Document Object Model (DOM) in a browser that runs JavaScript. One of the benefits of client-side applications is that HTML (DOM) will be updated with the click of a button, rather than the user waiting for the server to respond. In the case of a server-side rendering, it is very difficult to update the page. Any portion of a page that's animated or highly interactive (a draggable slider, sortable table, drop-down menu) almost certainly uses client-side rendering.
For the past several years, the application development landscape has changed drastically because of the increase in the use of mobile devices, such as smartphones and tablets. In 2013, mobile web traffic increased substantially to almost a third of the total web traffic; this web traffic is expected to increase in the near future. Applications are expected to be able to work on different platforms such as Windows, web, and mobile. In order to create multiplatform applications, the application should support the diversity of client browsers and plugins, such as Java and Adobe Flash Player. This is because an application becomes problematic if the plugins are not available or not supported on all devices.
A client-side application development environment enables developers to slowly and gradually replace applications based on browser plugins with newer versions of HTML, CSS, and JavaScript applications. While previous development tools would abstract away the key elements of HTML, CSS, and JavaScript, client-side development embraces all these tools. Using client-side development, a programmer can now render and manipulate content by focusing on client-browser capabilities. Several client-side application development approaches, such as responsive page design and progressive development are adopted to build modern web applications that include single-page applications.
The development process of these types of applications is however challenging and costly when compared to other applications because these applications need rapid prototyping, rich client features, and a large JavaScript base for them to be employed. Another JavaScript framework that has been developed in the same timeframe and is widely used for developing single-page applications is the AngularJS framework by Google.
There are many libraries that have been introduced, such as QUnit in 2008, Jasmine in 2010, and Backbone.js and Knockout.js in 2010. These libraries address the challenges that are involved in solving the rich client features. These libraries use derivatives for a design pattern, such as Model-View-Controller (MVC), which is common in both server-side and client-side. During the design, application data and business logic need to be clearly differentiated. This differentiation is achievable by MVC patterns where the controller components sit in the middle. The controller has access to all the different elements of the application; thus, it passes the data to and from the model, updates the view, or responds to view or changes that are passed to the model. There are several advantages of using the MVC design pattern, such as better code reuse (same model can be used for multiple views), testability (controller can be tested from view), and efficient development workflow that is achieved due to the designer's ability to modify the view.
AngularJS can enhance and extend HTML by adding new elements to it and AngularJS is based on the MVC pattern. It can also be tested from the start using modular, composable code units. AngularJS has grown in popularity since its introduction in 2012.
The use of client-side data binding is becoming more widespread as more and more developers are writing client-side applications. Most of these libraries follow the MVC or Model-View-ViewModel (MVVM) design pattern and some of these libraries directly integrate with the server framework, such as Knockout.js.
The following table illustrates the list of a few client-side data binding libraries that can be used for a client-side application development:
Nowadays, the cross-platform application development that uses the client-side binding is more popular. Most of the client-side script libraries retrieved from the server using the JavaScript Object Notation (JSON) format and dynamic binding of the HTML elements can be achieved by employing the JSON format. This is because JSON uses multiple client-side libraries and it is an advanced subset of JavaScript itself. JSON is a preferred client-side application format that parses and transmits data using a lightweight framework, making reading and writing of data easier.