6. Intrduction
Client-side refers to operations that are performed by the
client in a client–server relationship in a computer network.
6 Client-side 2 / Client-side web app
7. Intrduction
7 Client-side 2 / Client-side web apps
8. Goals
● Less time
● Less bandwidth
● Lesser security risk
8 Client-side 2 / Client-side web apps
11. Intrduction
A single-page application (SPA), also known as single-page
interface (SPI), is a web application or web site that fits on a
single web page with the goal of providing a more fluid user
experience akin to a desktop application.
11 Client-side 2 / Architecture
12. Pros
● Single page load
● New code/data on demand
● No reloads
12 Client-side 2 / Architecture
14. Events
Events are signals generated when specific actions occur.
JavaScript is aware of these signals, and scripts can be built to
react to these events.
14 Client-side 2 / Architecture
15. Samples
● blur occurs when input focus is removed from a form
element (when the user clicks outside a field) or focus is
removed from a window
● click occurs when the user clicks on a link or form element
● change occurs when the value of a form field is changed by
the user
● focus occurs when input focus is given to a form element
or a window
15 Client-side 2 / Architecture
20. Introduction
Model–view–controller (MVC) is a software architecture that
separates the representation of information from the user's
interaction with it.
20 Client-side 2 / MVC
22. Model
Model is where the application’s data objects are stored. The
model doesn’t know anything about views and controllers.
22 Client-side 2 / MVC
23. View
View is what's presented to the users and how users interact
with the app. The view is made with HTML, CSS, JavaScript and
templates.
23 Client-side 2 / MVC
24. Controller
The controller is the decision maker and the glue between the
model and view.
The controller updates the view when the model changes.
It also adds event listeners to the view and updates the model
when the user manipulates the view.
24 Client-side 2 / MVC
27. Introduction
A fast, concise, library that simplifies how to traverse HTML
documents, handle events, perform animations, and add AJAX.
http://jquery.com
27 Client-side 2 / jQuery