Instant Zurb Foundation 4: Get up and running in an instant with Zurb Foundation 4 Framework (2013)

2. Basic Concepts

Note
This book is intended for those who have basic knowledge of programming, web development, JavaScript and are familiar with the Angular.js framework even at a very basic level.

Note
This book follows the development of an example of a simple web application (blog), which consumes data from an external API that we will not develop, therefore it is beyond the scope of this book. Angular.js is much more than this; this book merely provides the basis for the implementation of scalable and maintainable web applications and the use of task managers like Gulp.js to be more agile.

2.1 Structure of a Modern Web Application

A web application, currently, is usually composed of three main parts:

· The public or client part, also known as the front end

· The server part, known as the back end

· The data storage, or database

The database is responsible for storing all of our application’s information. Users, data related to our application, etc... This database communicates with the back end, which is responsible for monitoring security, data processing, authorization, etc... Finally the front end is the part that runs on the end user’s browser, and is responsible for displaying information in an appealing manner and communicating with the back end to create and display data. In a modern web application, communication is achieved asynchronously with JavaScript (AJAX) using the document format JSON to send and receive data from the back end through a REST API.

In summary, to create a complete web application we need:

· A database so that the information can be stored persistently.

· A back end that is responsible for security, authorizations and data processing through a REST API.

· And a front end that lays out the data, presents it and communicates with the API using AJAX and JSON. In this example we are going to deal with the front end.

2.2 Technologies

Throughout this example we will program what is known as a single page application, a web application of a single page that does not reload with each server request we make, since it will communicate asynchronously thanks to JavaScript.

JavaScript was the language used on the web to add effects and animations to pages. But this language has evolved significantly in the present day, to the point of being taken to the server with Node.js. Node.js is a programming environment driven by events, meaning that the user defines the program’s flow through the user interface, in this case the web page. Following a non-blocking input and output model, this allows us to do asynchronous programming, similar to AJAX in the client JavaScript. At present there are numerous frameworks that make programming easier on the server-side. The most known and widespread is Express, although others exist, depending on your needs, such as: Meteor, Restify, Sails, Koa, Hapi,...

JavaScript has evolved to the point that it is also found in databases, as in the case of MongoDB, a non-relational database (NoSQL) whose entries are stored as documents in the BSON format: Binary JSON that allows for the reading and writing of data to be done very quickly and in an atomic manner, as long as we organize our data model following a non-relational structure. It is a different way of thinking from the classic SQL.

Of course JavaScript has also evolved on the front end, where it has always resided, though its implementation has improved thanks to the emergence of MVC frameworks that allow us to modularize code and avoid the famous spaghetti code that is generated when we are not careful. Within this family of frameworks we can find Backbone.js, Ember.js and the one that we will use which is Angular.js, a project developed at Google in 2009 that is now achieving widespread popularity.

By combining these technologies in all of the parts that form a web application, the same programming language (JavaScript) is used throughout the entire technology stack from beginning to end, which is known as JavaScript end-to-end or also MEAN Stack, which refers to its use of (M)ongoDB, (E)xpressJS, (A)ngularJS and (N)odeJS.