UNIT I

INTRODUCTION TO FULL STACK DEVELOPMENT

INTRODUCTION

 Full stack development refers to the development of both front end(client side) and back end(server side)
portions of web application.

 Full stack web developers have the ability to design complete web application and websites. They work
on the frontend, backend, database and debugging of web application or websites.

TECHNOLOGIES

Front end: It is the visible part of website or web application which is responsible for user experience. The user
directly interacts with the front end portion of the web application or website.

Front end Languages: The front-end portion is built by using some languages which are discussed below

1. HTML: HTML stands for Hyper Text Markup Language. It is used to design the front end portion of
web pages using markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup language is used to define the text
documentation within tag which defines the structure of web pages.

2. CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that makes up each web page.

3. JavaScript: JavaScript is a famous scripting language used to create the magic on the sites to make the
site interactive for the user. It is used to enhancing the functionality of a website to running cool games and
web-based software.
FRONT END FRAMEWORKS AND LIBRARIES

1. AngularJS: AngularJS is a JavaScript open source front-end framework that is mainly used to develop
single page web applications(SPAs). It is a continuously growing and expanding framework which
provides better ways for developing web applications. It changes the static HTML to dynamic HTML.
It is an open source project which can be freely used and changed by anyone. It extends HTML attributes
with Directives, and data is bound with HTML.

2. React.js: React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
ReactJS is an open-source, component-based front end library responsible only for the view layer of the
application. It is maintained by Facebook.

3. 3. Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and
web applications. It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first web sites.

4. 4. jQuery: jQuery is an open source JavaScript library that simplifies the interactions between an
HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event
handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

5. 5. SASS: It is the most reliable, mature and robust CSS extension language. It is used to extend the
functionality of an existing CSS of a site including everything from variables, inheritance, and nesting
with ease.

BACK END

It refers to the server-side development of web application or website with a primary focus on how the
website works.

It is responsible for managing the database through queries and APIs by client-side commands.

This type of website mainly consists of three parts front end, back end, and database.

The back end portion is built by using some libraries, frameworks, and languages which are discussed
below:

1. PHP: PHP is a server-side scripting language designed specifically for web development. Since, PHP
code executed on server side so it is called server side scripting language.
2. 2. C++ : It is a general purpose programming language and widely used now a days for competitive
programming. It is also used as backend language.
 3. 3. Java: Java is one of the most popular and widely used programming language and platform. It is
highly scalable. Java components are easily available.
4. 4. Python: Python is a programming language that lets you work quickly and integrate systems more
efficiently.
5. 5: JavaScript: Javascript can be used as both (front end and back end) programming languages.
6. 6. Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside of a browser. You need to remember that NodeJS is not a framework and
it’s not a programming language.

Database

Database is the collection of inter-related data which helps in efficient retrieval, insertion and deletion of data
from database and organizes the data in the form of tables, views, schemas, reports etc.

1. Oracle: Oracle database is the collection of data which is treated as a unit. The purpose of this database is to
store and retrieve information related to the query. It is a database server and used to manages information.

2. MongoDB: MongoDB, the most popular NoSQL database, is an open source document-oriented database.
The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t based on the table-like relational
database structure but provides an altogether different mechanism for storage and retrieval of data.

3. SQL: Structured Query Language is a standard Database language which is used to create, maintain and
retrieve the relational database.

POPULAR STACKS

 LAMP stack: JavaScript - Linux - Apache - MySQL - PHP

 LEMP stack: JavaScript - Linux - Nginx - MySQL - PHP

 MEAN stack: JavaScript - MongoDB - Express - AngularJS - Node.js

 Django stack: JavaScript - Python - Django - MySQL

 Ruby on Rails: JavaScript - Ruby - SQLite – Rails

ADVANTAGES

The advantage of being a full stack web developer is:

 You can master all the techniques involved in a development project

 You can make a prototype very rapidly

  You can provide help to all the team members

 You can reduce the cost of the project

 You can reduce the time used for team communication

 You can switch between front and back end development based on requirements

 You can better understand all aspects of new and upcoming technologies

DISADVANTAGES

 The solution chosen can be wrong for the project

 The solution chosen can be dependent on developer skills

 The solution can generate a key person risk

 Being a full stack developer is increasingly complex.

NEED FOR FULL STACK DEVELOPMENT

 FULL STACK DEVELOPER is an engineer who works on both client-side and server-side software.
This type of software developer works on the Full Stack of an application meaning Front End
Technology, Back End Development Languages, Database, Server, API, and version Controlling
Systems. Hence, the name "Full Stack" Developer.

 Full stack developer translates user requirements into the overall architecture and implement the new
systems. A Full-Stack Developer doesn't necessarily master all technologies. However, the professional
is expected to work on the client as well as server sides and understand what is going on when developing
an application. He or she should have a genuine interest in all software technologies.

Why do you need a Full-Stack Developer?

Here are some prominent reasons why you should hire a full stack development professional:

1. Full stack developer helps you to keep every part of the system running smoothly

2. Full stack developer can provide help to everyone in the team and greatly reduce the time and technical
costs of team communication

3. If one person plays different roles, it saves your company's personnel, infrastructure and operational cost
SKILL SETS

Front-end technology

Full stack developer should be master of essential front-end technologies like HTML5, CSS3, JavaScript.
Knowledge of third-party libraries like jQuery, LESS, Angular and React JS is desirable

Development Languages

Full stack engineer should know at least one server-side programming languages like Java, Python, Ruby,
.Net etc.

Database and cache

Knowledge of various DBMS technology is another important need of full stack developer. MySQL,
MongoDB, Oracle, SQLServer are widely used for this purpose. Knowledge of caching mechanisms like
varnish, Memcached, Redis is a plus.

Basic design ability

In order to become a successful full stack developer, the knowledge of designing is also recommended.
Moreover, the person should know the principle of basic prototype design and UI /UX design.
Server

Exposure to handling Apache or nginx servers is desirable. A good background in Linux helps tremendously
in administering servers.

Version control system (VCS)

A version control system allows full stack developers to keep track of all the changes made in the codebase.
The knowledge of Git helps full stack developers to understand how to get the latest code, update parts of
the code, make changes in other developer's code without breaking things.

Working with API (REST & SOAP)

Knowledge of web services or API is also important for full stack developers. Knowledge of creations and
consumption of REST and SOAP services is desirable.

Other Pieces of the Puzzle:

 Ability to write quality unit tests

 He or she should have a complete understanding of automated processes for building testing, document,
and deploying it at scale

 An awareness of security concerns is important, as each layer has its own vulnerabilities

 Knowledge of Algorithms and data structures is also an essential need for professional full stack
developers

Myths about the Full Stack Engineer

Myth: Full stack developer is writing all types of code themselves.

Fact: He or she might know different technologies but not writing each code.

Myth: Write both frontend and backend codes.

Some full stack developers might code entire websites if they are working as a freelancer. But this its not a
given that they mandatorily write both front and backend code.

Full Stack Developer is "jack of all trade, master on none".

No, FSD is master of a few stacks and comfortable with the rest. In fact working as a Full stack engineer
gives you a 360 degree view into different components that make a software product successful. Due to this
 awareness, a Full Stack Developer can rapidly create a prototype compared to a backend or frontend
engineer. Their viewpoints on product design and architecture are very pointed and helpful.

Myth: You can't become full stack developer if you work for an Outsourcing company

It is a mind-set, not a position. In order to become full stack developer all, you need a right combination of
technical knowledge.

INTRODUCING NODE.JS: THE WEB SERVER/PLATFORM

Node is an open-source program that is built on a JavaScript runtime engine (Chrome'sV8) and consists of
JavaScript libraries that are implemented in the form of modules. The cross-platform server environment is
lightweight and efficient because it uses an event-driven, non-blocking I/O model. For example, PayPal employs
Node to solve the problem that arises owing to the boundary between the browser (client side) and
server (server side) by enabling both to be written in JavaScript. This, in turn, helps PayPal unify their
engineering specialties into one team, thus enabling them to focus on user needs and create solutions to meet
these on the technology stack level. Some other websites and applications built on Node are eBay, GoDaddy,
Groupon, Uber, Netflix, Mozilla, Yahoo, LinkedIn, and so on. The outstanding performance offered by
Node makes it the heart of the MEAN stack. According to a number of benchmarks, JavaScript technology for
the backend outperforms several other backend programming languages, such as PHP, Python, and Ruby.

Advantages Of Node:

1.Fast code execution: Google Chrome's V8 JavaScript engine makes the Node library extremely fast at code
execution as V8 compiles JavaScript into native machine code.
2. Single-threaded operation: Node is able to handle concurrent tasks because its architecture is built to use
the single-threaded event loop model.
3. Highly Scalable: Its microservice architecture makes Node highly scalable, thereby making it a highly
sought-after development environment by most start-ups and established companies alike.
4.Asynchronous and event-driven I/O: Programs in Node do not run until an event
occurs.
5.Open source (MIT license) and community support: Node is a distributed development project that is
governed by the Node.js Foundation. Also, Node has a very active and vibrant community with several code
files shared by GitHub users.
6.Easy web-application deployment: Node allows the automated deployment of web applications. Also, the
deployment of further updates can be reduced to a single command with Node. Thus, the deployment of Node
applications has also led to the proliferation of Platform-as-a-service (PaaS) providers such as
Heroku,Modulus, and so on.
7.Easy scalability: Developers find it easy to scale applications horizontally as well as vertically. However, you
should be aware of a few points before beginning application development in Node. Using relational databases
in conjunction with Node might be a daunting task because Node does not provide support for them. Also, using
Node is unsuitable for heavy-computation applications. Having given an overview of Node, we will now
progress and build our first Node application in the next section.
Getting Started with Node: Here, we will build on the introduction to Node from the previous topic and
concretize our knowledge about Node by completing exercises and activities that will help us understand how
application development with Node.js is achieved. To get started with Node, the first step is installation. You
have two installation options: the LTS or stable version:
8.LTS (Long-Term Support): Support and maintenance are provided by the Node Foundation for at least 18
months from the date of release. So, it's better to use this version for the production of backend Node
applications.
9.Stable: Stable has support for approximately 8 months after release, with features/updates released more often.
This version can be used for production if you're using Node for frontend services (dependency management).
If apps can be easily updated without interrupting the environment, this version will work for backend services
in Node as well. In this book, we will be using the LTS version.
Before we start with Node application development, we need to understand the built-in modules that make up
Node. The set of modules that you can use without any further installation are listed as follows, along with a
short description:
• Assert: This module provides a set of assertion tests
• Buffer: This module is used to handle binary data
• Child process: This module is used to run a child process
• Cluster: This module is used to handle unhandled errors
• Events: This module is used to handle events
• Filesystem (fs): This module is used to handle the filesystem
• HTTPS: This module is used to render Node as an HTTPS server
• Path: This module is used to handle file paths
• Readline: This module is used to handle readable streams one line at a time
• Stream: This module is used to handle streaming data
• String: This module is a decoder that's used to decode buffer objects into strings
• Timers: This module is used to execute a function after a given number of
milliseconds
Beginning a Node application involves the following steps:
1. Importing and loading the required modules by invoking the require directive.
2. Creating the server that will receive the client's requests.
3. Reading the requests and returning the responses from the server that was
created in the preceding step.
Introducing Express: The Framework

Node.js - Express Framework

Introducing Express: The framework

Express is the E in MEAN. As Node.js is a platform, it doesn’t prescribe how it should be set up or used. This
is one of its great strengths. But when creating websites and web applications there are quite a few common
tasks that need doing every time.
Express is a web application framework for Node.js that has been designed to do this in a well-tested and
repeatable way.

1. Easing your server setup

As already noted, Node.js is a platform not a server. This allows you to get creative with your server setup and
do things that other web servers can’t do. It also makes it harder to get a basic website up and running. Express
abstracts away this difficulty by setting up a web server to listen to incoming requests and return relevant
responses. In addition, it also defines a directory structure. One of these folders is set up to serve static files in a
nonblocking way—the last thing you want is for your application to have to wait when somebody else requests
a CSS file!

2. Routing URLs to responses

One of the great features of Express is that it provides a really simple interface for directing an incoming
URL to a certain piece of code. Whether this is going to serve a static HTML page, read from a database, or
write to a database doesn’t really matter.The interface is simple and consistent. What Express has done here
is abstract away some of the complexity of doing this in native Node.js, to make code quicker to write and
easier to maintain.
3. Remembering visitors with session support
Being single-threaded, Node.js doesn’t remember a visitor from one request to the next. It doesn’t have a silo of
RAM set aside just for you; it just sees a series of HTTP requests. HTTP is a stateless protocol, so there’s no
concept of storing a session statethere. As it stands, this makes it difficult to create a personalized experience in
Node.js or have a secure area where a user has to log in—it’s not much use if the site forgets who you are on
every page. You can do it, of course, but you have to code it yourself. Or, you’ll never guess what: Express has
an answer to this too! Express comes with the ability to use sessions so that you can identify individual visitors
through multiple requests and pages. Thank you Express! Sitting on top of Node.js, Express gives you a great
helping hand and a sound starting point for building web applications. It abstracts away a number of complexities
and repeatable tasks that most of us don’t need—or want—to worry about. We just want to build web
applications.
Introduction to AngularJS – Overview

AngularJS is a Javascript open-source front-end structural framework that is mainly used to develop single-
page web applications(SPAs). It is a continuously growing and expanding framework which provides better
ways for developing web applications. It changes the static HTML to dynamic HTML. Its features like
dynamic binding and dependency injection eliminate the need for code that we have to write otherwise.
AngularJS is rapidly growing and because of this reason, we have different versions of AngularJS with the
latest stable being 1.7.9. It is also important to note that Angular is different from AngularJS. It is an open-
source project which can be freely used and changed by anyone. It extends HTML attributes with Directives,
and data is bound with HTML.

Why to Learn AngularJS?

AngularJS is an open-source web application framework. It was originally developed in 2009 by Misko Hevery
and Adam Abrons. It is now maintained by Google. Its latest version is 1.2.21.

 AngularJS is a efficient framework that can create Rich Internet Applications (RIA).
 AngularJS provides developers an options to write client side applications using JavaScript in a
clean Model View Controller (MVC) way.
 Applications written in AngularJS are cross-browser compliant. AngularJS automatically handles
JavaScript code suitable for each browser.
 AngularJS is open source, completely free, and used by thousands of developers around the world.
It is licensed under the Apache license version 2.0.

Core Features

The core features of AngularJS are as follows −

 Data-binding − It is the automatic synchronization of data between model and view components.
 Scope − These are objects that refer to the model. They act as a glue between controller and view.
 Controller − These are JavaScript functions bound to a particular scope.
 Services − AngularJS comes with several built-in services such as $http to make a
XMLHttpRequests. These are singleton objects which are instantiated only once in app.
  Filters − These select a subset of items from an array and returns a new array.
 Directives − Directives are markers on DOM elements such as elements, attributes, css, and
more. These can be used to create custom HTML tags that serve as new, custom widgets.
AngularJS has built-in directives such as ngBind, ngModel, etc.
 Templates − These are the rendered view with information from the controller and model. These
can be a single file (such as index.html) or multiple views in one page using partials.
 Routing − It is concept of switching views.
 Model View Whatever − MVW is a design pattern for dividing an application into different parts
called Model, View, and Controller, each with distinct responsibilities. AngularJS does not
implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-
ViewModel). The Angular JS team refers it humorously as Model View Whatever.
 Deep Linking − Deep linking allows to encode the state of application in the URL so that it can
be bookmarked. The application can then be restored from the URL to the same state.
 Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the
developer to create, understand, and test the applications easily.
General Features

The general features of AngularJS are as follows −

 AngularJS is a efficient framework that can create Rich Internet Applications (RIA).
 AngularJS provides developers an options to write client side applications using JavaScript in a
clean Model View Controller (MVC) way.
 Applications written in AngularJS are cross-browser compliant. AngularJS automatically handles
JavaScript code suitable for each browser.
 AngularJS is open source, completely free, and used by thousands of developers around the world.
It is licensed under the Apache license version 2.0.

Overall, AngularJS is a framework to build large scale, high-performance, and easyto-maintain web
applications.

Advantages of AngularJS

The advantages of AngularJS are −

 It provides the capability to create Single Page Application in a very clean and maintainable way.
 It provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of separation of concerns.
 AngularJS provides reusable components.
  With AngularJS, the developers can achieve more functionality with short code.
 In AngularJS, views are pure html pages, and controllers written in JavaScript do the business
processing.

On the top of everything, AngularJS applications can run on all major browsers and smart phones, including
Android and iOS based phones/tablets.

Disadvantages of AngularJS

Though AngularJS comes with a lot of merits, here are some points of concern −

 Not Secure − Being JavaScript only framework, application written in AngularJS are not safe.
Server side authentication and authorization is must to keep an application secure.
 Not degradable − If the user of your application disables JavaScript, then nothing would be
visible, except the basic page.
AngularJS Architecture

Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below:

 The Controller represents the layer that has the business logic. User events trigger the functions which
are stored inside your controller. The user events are part of the controller.
 Views are used to represent the presentation layer which is provided to the end users
 Models are used to represent your data. The data in your model can be as simple as just having primitive
declarations. For example, if you are maintaining a student application, your data model could just have
a student id and a name. Or it can also be complex by having a structured data model. If you are
maintaining a car ownership application, you can have structures to define the vehicle itself in terms of
its engine capacity, seating capacity, etc.

Angular has the following key features which makes it one of the powerful frameworks in the market:
  MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a
design pattern used in all modern day web applications. This pattern is based on splitting the business
logic layer, the data layer, and presentation layer into separate sections. The division into different
sections is done so that each one could be managed more easily.
 Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This
can be done by Angular by just adding a few snippets of code.
 Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written
to design any application. But with Angular, you will be amazed with the lesser amount of code you
need to write for DOM manipulation.
 Unit Testing ready – The designers at Google not only developed Angular but also developed a testing
framework called “Karma” which helps in designing unit tests for AngularJS applications.

JQUERY VERSUS ANGULARJS

If you’re familiar with jQuery, you might be wondering if AngularJS works the sameway. The short answer is
no, not really. jQuery is generally added to a page to provideinteractivity, after the HTML has been sent to the
browser and the Document Object Model (DOM) has completely loaded. AngularJS comes in a step earlier and
helps put together the HTML based on the data provided. Also, jQuery is a library, and as such has a collection
of features that you can use as you wish. AngularJS is what is known as an opinionated framework. This means
that it forces its opinion on you as to how it needs to be used.As mentioned, AngularJS helps put the HTML
together based on the data provided, but it does more than this. It also immediately updates the HTML if the
data changes, and can also update the data if the HTML changes. This is known as two-way data binding, which
we’ll now take a quick look at.
TWO-WAY DATA BINDING: WORKING WITH DATA IN A PAGE
To understand two-way data binding let’s start with a look at the traditional approach of one-way data binding.
One-way data binding is what you’re aiming for when looking at using Node.js, Express, and MongoDB.
Node.js gets the data from MongoDB, and Express then uses a template to compile this data into HTML that’s
then delivered to the server. This one-way model is the basis for most database-driven websites. In this model
most of the hard work is done on the server, leaving the browser to just render HTML and run any JavaScript
interactivity.
USING ANGULARJS TO LOAD NEW PAGES
Something that AngularJS has been specifically designed for is single-page application (SPA) functionality. In
real terms, an SPA runs everything inside the browser and never does a full page reload. What this means is that
all application logic, data processing, user flow, and template delivery can be managed in the browser. Think
Gmail. That’s an SPA. Different views get shown in the page, along with a whole variety of data sets, but the
page itself never fully reloads. This approach can really reduce the amount of resources you need on your server,
as you’re essentially crowd-sourcing the computational power. Each person’s browser is doing the hard work,
and your server is basically just serving up static files and data on request.The user experience can also be better
when using this approach. Once the application is loaded there are fewer calls to be made to the server, reducing
the potentialof latency.

SUPPORTING CAST & DESIGNING A MEAN ARCHITECTURE

The MEAN stack gives you everything you need for creating data-rich interactive web applications, but you
may want to use a few extra technologies to help you on the way.

You can use Twitter Bootstrap to help create a good user interface, Git to help manage your code, and Heroku
to help by hosting the application on a live URL.

1. Twitter Bootstrap for user interface

1. Twitter Bootstrap is used to create a responsive design with minimal effort.
2. It’s not essential for the stack, and if you’re building an application from existing HTML or a specific
design then you probably won’t want to add it in.
3. But we’re going to be building an application in a “rapid prototype” style, going from idea to application
with no external influences.
4. Bootstrap is a front-end framework that provides a wealth of help for creating a great user interface.
5. Bootstrap provides a responsive grid system, default styles for many interface components, and the ability
to change the visual appearance with themes.

1.1 RESPONSIVE GRID LAYOUT

In a responsive layout, you serve up a single HTML page that arranges itself differently on different devices.
This is done through detecting the screen resolution rather than trying to sniff out the actual device. Bootstrap
targets four different pixel-width breakpoints for their layouts, loosely aimed at phones, tablets, laptops, and
external monitors. So if you give a bit of thought to how you set up your HTML and CSS classes, you can
use one HTML file to give the same content in different layouts suited to the screen size.

1.2.CSS CLASSES AND HTML COMPONENTS

Bootstrap comes with a set of predefined CSS classes that can create useful visual components. These include
things like page headers, flash-message containers, labels and badges, stylized lists … the list goes on! They’ve
thought of a lot, and it really helps you quickly build an application without having to spend too much time on
the HTML layout and CSS styling.
1.3. ADDING THEMES FOR A DIFFERENT FEEL
Bootstrap has a default look and feel that provides a really neat baseline. This is so commonly used that your
site could end up looking like anybody else’s. Fortunately, it’s possible to download themes for Bootstrap to
give your application a different twist. Downloading a theme is often as simple as replacing the Bootstrap CSS
file with a new one. We’ll use a free theme in this book to build our application, but it’s also possible to buy
premium themes from a number of sites online to give an application a unique feel.

2. Git for source control

1. Saving code on your computer or a network drive is all very well and good, but that only ever holds the
current version. It also only lets you, or others on your network, access it.
2. Git is a distributed revision control and source code management system. This means that several people
can work on the same codebase at the same time on different computers and networks.
3. These can be pushed together with all changes stored and recorded. It also makes it possible to roll back to
a previous state if necessary.
4. Git is typically used from the command line, although there are GUIs available for Windows and Mac.

Throughout this book we’ll use command-line statements to issue the commands that we need.
Git is very powerful and we’re barely going to scratch the surface of it in this book, but everything we do will
be noted..
3. Hosting with Heroku
1. Hosting Node.js applications can be complicated, but it doesn’t have to be.

2. Many traditional shared hosting providers haven’t kept up with the interest in Node.js. Some will install
it for you so that you can run applications, but the servers are generally not set up to meet the unique
needs of Node.js.

3. To run a Node.js application successfully you either need a server that has been configured with that in
mind, or you can use a PaaS provider that’s aimed specifically at hosting Node.js.

4. Applications on Heroku are essentially Git repositories, making the publishing process incredibly simple.
Once everything is set up you can publish your application to a live environment using a single command.
 Designing a MEAN stack architecture
2.1.A common MEAN stack architecture
A common way to architect a MEAN stack application is to have a representational state transfer (REST)
API feeding a single-page application (SPA). The API is typically built with MongoDB, Express, and
Node.js, with the SPA being built in Angular. This approach is particularly popular with those who come to
the MEAN stack from an Angular background and are looking for a stack that provides a fast, responsive
API.

2.2. Looking beyond SPAs

Coding an SPA in Angular is like driving a Porsche along a coastal road with the roof down. Both are amazing.
They’re fun, fast, sexy, agile, and exceedingly capable. If, historically, you’ve not done either thing before, it’s
most likely that both are a vast improvement.

But sometimes, they’re not appropriate. If you want to pack up the surfboards and take your family away for the
week, you’re going to struggle with the sports car. As amazing as your car may be, in this case you’re going to
want to use something different. It’s the same story with SPAs. Yes, building them in Angular is amazing, but
sometimes an SPA isn’t the best solution to your problem. Let’s take a brief look at some things to bear in mind
about SPAs when designing a solution and deciding whether a full SPA is right for your project.

2.2.1.Hard to crawl

 JavaScript applications are very hard for search engines to crawl and index. Most search engines look at
the HTML content on a page but don’t download or execute much JavaScript.
  For those that do, the actual crawling of JavaScript-created content is nowhere near as good as content
delivered by the server. If all of your content is served via a JavaScript application then you cannot be
sure how much of it will be indexed.

2.2.2. Analytics and browser history

• Analytics tools like Google Analytics rely heavily on entire new pages loading in the browser, initiated
by a URL change. SPAs don’t work this way. There’s a reason they’re called single-page applications!
• After the first page load, all subsequent page and content changes are handled internally by the
application.
• So the browser never triggers a new page load, nothing gets added to the browser history, and your
analytics package has no idea who’s doing what on your site.

2.3 Speed of initial load

• SPAs have a slower first page load than server-based applications.

• This is because the first load has to bring down the framework and the application code before rendering
the required view as HTML in the browser.
• A server-based application just has to push out the required HTML to the browser, reducing the latency
and download time.

To SPA or not to SPA?

• Just a reminder that this wasn’t an exercise in SPA-bashing; we’re just taking a moment to think about
some things that often get pushed to the side until it’s too late.
• The three points about crawlability, analytics integration, and page load speed aren’t designed to give
clear-cut definitions about when to create an SPA and when to do something else. They’re there to give
a framework for consideration.
• It might be the case that none of those things is an issue for your project, and that an SPA is definitely
the right way to go. If you find that each point makes you pause and think, and it looks like you need to
add in workarounds for all three, then an SPA probably isn’t the way to go.
• Even if you decide that an SPA isn’t right for you, that doesn’t mean that you can’t use the MEAN stack.

PLANNING A REAL APPLICATION

Build a working application on the MEAN stack called Loc8r. Loc8r will list nearby places with WiFi where
people can go and get some work done. It will also display facilities, opening times, a rating, and a location
 map for each place. Visitors will be able to submit ratings and reviews. For the sake of the demo application,
we’ll be creating fake data so that we can test it quickly and easily. So let’s get planning.

Planning the application at a high level

 The first step is to think about what screens we’ll need in our application. We’ll focuson the separate
page views and the user journeys.
 We can do this at a very high level, not really concerning ourselves with the details of what is on each
page. It is a good idea to sketch out this stage on a piece of paper or a whiteboard, as it helps to visualize
the application as a whole.
 It also helps with organizing the screens into collections and flows, while serving as a good reference
point for when we come to build it. As there’s no data attached to the pages or application logic behind
them, it’s really easy to add and remove parts, change what is displayed where, and even change how
many pages we want.
 The chances are that we won’t get it right the first time; the key is to start and iterate and improve until
we’re happy with the separate pages and overall user flow.

PLANNING THE SCREENS

Let’s think about Loc8r. As stated our aim is as follows: Loc8r will list nearby places with WiFi where
people can go and get some work done. It will also display facilities, opening times, a rating, and a
location map for each place. Visitors will be able to submit ratings and reviews.

From this we can get an idea about some of the screens we’re going to need:

1. A screen that lists nearby places

2. A screen that shows details about an individual place

3. A screen for adding a review about a place

We’ll probably also want to tell visitors what Loc8r is for and why it exists, so we should add another
screen to the list:

2. A screen for “about us” information

DIVIDING THE SCREENS INTO COLLECTIONS

Next, we want to take the list of screens and collate them where they logically belonG together. For example,
the first three in the list are all dealing with locations. The About page doesn’t really belong anywhere so it can
go in a miscellaneous others collection. Sketching this out brings us something like

 Having a quick sketch like this is the first stage in planning, and we really need to go through this stage
before we can start thinking about architecture. This stage gives us a chance to look at the basic pages,
and to also think about the flow. For example, also shows a basic user journey in the Locations collection,
going from the List page, to a Details page, and then onto the form to add a review.

Architecting the application

 On the face of it Loc8r is a fairly simple application, with just a few screens. But we still need to think
about how to architect it, as we’re going to be transferring data from a database to a browser, letting users
interact with the data, and allowing data to be sent back to the database

Starting with the api

Because the application is going to be using a database and passing data around, we’ll start building up the
architecture with the piece we’re definitely going to need. Figure shows the starting point, a REST API built
with Express and Node.js to enable interactions with the MongoDB database.
  As already discussed in this chapter, building an API to interface with our data is a bit of a given, and is
the base point of the architecture. So the more interesting and difficult question is: How do we architect
the application itself?

 As already discussed in this chapter, building an API to interface with our data is a bit of a given, and
is the base point of the architecture. So, the more interesting and difficult question is: How do we
architect the application itself?

APPLICATION ARCHITECTURE OPTIONS

 At this point we need to take a look at the specific requirements of our application, and how we can put
together the pieces of the MEAN stack to build the best solution.

 Do we need something special from MongoDB, Express, AngularJS, or Node.js that will swing the
decision a certain way?

 Do we want HTML served directly from the server, or is an SPA the better option?

 For Loc8r there are no unusual or specific requirements, and whether or not it

 should be easily crawlable by search engines depends on the business growth plan.

 If the aim is to bring in organic traffic from search engines, then yes it needs to be crawlable.

 If the aim is to promote the application as an application and drive use that way, then search engine
visibility is a lesser concern

 we can immediately envisage three possible application architectures

1. A Node.js and Express application

2. A Node.js and Express application with AngularJS additions for interactivity

3. An AngularJS SPA

Architecting the application

WRAPPING EVERYTHING IN AN EXPRESS PROJECT

Express applications for the API and the application logic. This is perfectly possible, and is a good way to go
for a large project. If we’re expecting large amounts of traffic we might even want our main application and our
API on different servers. An additional benefit of this is that we can have more specific settings for each of the
servers and applications that are best suited to the individual needs. Another way is to keep things simple and
contained and have everything inside a single Express project. With this approach we only have one application
to worry about hosting and deploying, and one set of source code to manage. This is what we’ll be doing with
Loc8r, giving us one Express project containing a few sub applications.
Breaking the development into stages

1 Build an application on the MEAN stack

2 Learn about the different layers of the stack as we go

Rapid prototype development stages

STAGE 1: BUILD A STATIC SITE

The first stage is to build a static version of the application, which is essentially a number of HTML screens. The aims of this
stage are
■ To quickly figure out the layout

■ To ensure that the user flow makes sense

At this point we’re not concerned with a database or flashy effects on the user interface; all we want to do is create a working
mockup of the main screens and journeysthat a user will take through the application.

Based on this architecture we’ll build the static application in Node and Express, using that as our starting point into the
MEAN stack. this step in the process as the first part of developing the proposed architecture.
STEP 2: DESIGN THE DATA MODEL AND CREATE THE DATABASE

Still following the stages of development we’ll continue to stage 2 by creating the database and designing the data model.
Again, any application is likely to need this step, and you’ll get much more out of it if you’ve been through step 1 first.
STAGE 3: BUILD OUR DATA API
After stages 1 and 2 we have a static site on one hand and a database on the other. This stage and the next take the natural
steps of linking them together. The aim of stage 3 is
■ To create a REST API that will allow our application to interact with the database.

STAGE 4: HOOK THE DATABASE INTO THE APPLICATION

When we get to this stage we have a static application and an API exposing an interface to our database. The aim of this stage
is
■ To get our application to talk to our API

When this stage is complete the application will look pretty much the same as it did
before, but the data will be coming from the database. When it’s done, we’ll have a
data-driven application!

STAGE 5: AUGMENT THE APPLICATION

This stage is all about embellishing the application with additional functionality. We might add authentication systems, data
validation, or methods for displaying error messages to users. It could include adding more interactivity to the front end or
tightening up the business logic in the application itself. So, really, the aims of this stage are
■ To add finishing touches to our application

■ To get the application ready for people to use

These five stages of development provide a great methodology for approaching a new build project. Let’s take a look at how
we’ll follow these steps to build Loc8r.

Hardware architecture

No discussion about architecture would be complete without a section on hardware. You’ve seen how all of the software and
code components can be put together, but what type of hardware do you need to run it all?
Development hardware
The good news is that you don’t need anything particularly special to run a development stack. Just a single
laptop, or even a virtual machine (VM), is enough to develop a MEAN application. All components of the stack
can be installed on Windows, Mac OS X, and most Linux distributions.I’ve successfully developed applications
on Windows and Mac OS X laptops, and also on Ubuntu VMs. My personal preference is native development
in OS X, but I know of others who swear by using Linux VMs. If you have a local network and a number of
different servers you can run different parts of your application across them. For example, it’s possible to have
one machine as a database server, another for the REST API, and a third for the main application code itself. So
long as the servers can talk to each other this isn’t a problem.

Production hardware
The approach to production hardware architecture isn’t all that different from development hardware. The main difference
is that production hardware is normally higher spec, and is open to the internet to receive public requests.

STARTER SIZE
It’s quite possible to have all parts of your application hosted and running on the same server.
This architecture is okay for applications with low amounts of traffic, but isn’t generally advised as your application grows,
because you don’t want your application and database fighting over the same resources.

GROWING UP: A SEPARATE DATABASE SERVER

One of the first things to be moved onto a separate server is often the database. So now you have two servers: one for the
application code and one for the database.

This is quite a common model, particularly if you choose to use a platform as a service (PaaS) provider for your hosting.

GOING FOR SCALE

Much like we talked about in the development hardware, you can have a different server for the different parts of your
application—a database server, an API server, and an application server.

But it doesn’t stop there. If your traffic starts to overload your three servers, you can have multiple instances—or clusters—
of these servers. Setting up this approach is a little more involved than the previous methods because you need to ensure
that your database remains accurate, and that the load is balanced across the servers. Once again, PaaS providers offer a
convenient route into this type of architecture.
Creating & Setting up MEAN Architecture

 In the MEAN stack Express is the Node web application framework.

 Together Node and Express underpin the entire stack, so let’s start here. In terms of building up the
application architecture, figure shows where we’ll be focusing in this chapter.

We’ll be doing two things:

1. Creating the project and encapsulating the Express application that will house everything else except the
database.
2. Setting up the main Express application.

 Express is great, but you can make it better—and get to know it better—by tinkering a little and changing
some things around.

 This ties into a quick look at modelview-controller (MVC) architecture. Here’s where we’ll get under
the hood of Express a little, and see what it’s doing by modifying it to have a very clear MVC setup.

 When the framework of Express is set up as we want it, we’ll next include Twitter’s Bootstrap
framework, and make the site responsive by updating the Jade templates.

 In the final step of this chapter we’ll push the modified, responsive MVC Express application to a live
URL using Heroku and Git

 Express is a web application framework for Node. In basic terms, an Express application is simply a
Node application that happens to use Express as the framework.

 npm is a package manager that gets installed when you install Node, which gives you the ability to
download Node modules or packages to extend the functionality of your application.

 But how do these things work together, and how do you use them? A key piece to understanding this
puzzle is the package.json file.

1. Defining packages with package.json

 In every Node application there should be a file in the root folder of the application called package.json.

 This file can contain various metadata about a project, including the packages that it depends on to run.

A brief look at Express, Node, and npm

 The following listing shows an example package. json file that you might find in the root of a new
Express project.
 This is the file in its entirety, so it’s not particularly complex. There’s various metadata at the top of the
file followed by the dependencies section.

 In this default installation of an Express project there are quite a few dependencies.

 Express itself is modular so that you can add in components or upgrade them individually.

WORKING WITH DEPENDENCY VERSIONS IN PACKAGE.JSON

 Alongside the name of each dependency is the version number that the application is going to use. Notice
that they’re all prefixed with a ~.

 Let’s take a look at the dependency definition for Express 4.9.0. It specifies a particular version at three
levels:

 Major version (4)

 Minor version (9)

 Patch version (0)

 Prefixing the whole version number with a ~ is like replacing the patch version with a wildcard, which
means that the application will use the latest patch version available.

 This is considered best practice, as patches should only contain fixes that won’t have any impact on the
application.

 But different major and minor versions could well include changes that cause problems with the
application, so you want to avoid automatically using later versions of these.

2. Installing Node dependencies with npm

 Any Node application or module can have dependencies defined in a package.json file.

 Installing them is really easy, and is done in the same way regardless of the application or module.

 Using a terminal prompt in the same folder as the package.json file you simply need to run the following
command:

$ npm install

 This tells npm to install all of the dependencies listed in the package.json file.

 When you run it, npm will download all of the packages listed as dependencies and install them into a
specific folder in the application called node_modules.