Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS and JavaScript

Single Page
Applications
(SPA)
Workshop
Jalal Mostafa
1

Why are we doing this?
– Web apps that load a single HTML
page and dynamically update that
page as the user interacts with the
app.
– Better User eXperience (UX)
– Better performance and fast page
load
– HTML generation is done on the
client’s computation power
– Less data to communicate between the
server and the client
– Trendy in the software industry
2

3
Demo
Single Page Applications vs Multi-Page Applications
Twitter vs StackOverflow
Using Google Chrome Dev Tools

About this workshop
Goals
– Introduce interesting topics in
HTML, CSS and JS – 2 Lectures
– Introduce Single Page Applications
by example (Introduction to
AngularJS) – 3 Lectures
Non-goals
– Cover every detail out there
– Teach you things you can learn by
yourself
– Replace university courses
Every lecture includes a live coding session
Workshop materials: http://bit.ly/spa_workshop
4

Interesting Topics in
HTML5
Session 1
5

HyperText
“Markup”
Language
Data is random chunks of
information under no context
HTML code is Semantic Data i.e. data
with description about the role of
each data chunk
6
?
Biology
Chemistry
Computer
Science
Math
ULFDS
ULFDS
Title
Math
Section
Computer
Science
Section
Chemistry
Section
Biology
Section
Figure/Image

Why HTML5?
– HTML51 is the latest evolution of the standard that define HTML released by W3C
– Semantics: describe more precisely what the content of the page is
– Offline and storage: store data on the client-side locally and operate offline more
efficiently
– 2D/3D graphics and effects: canvas – WebGL – SVG
– Device access: access to camera/microphone/geolocation and new touch events
– Connectivity: new and innovative ways to communicate with the server
– Multimedia: better support for audio and video
– Performance and integration
– Styling
7

HTML5 Semantics
HTML5
<header>Some Text</header>
<article>
<h3>Title</h3>
<figure>
<img src="…">
<figcaption>
<p>Caption here…</p>
</figcaption>
</figure>
<p>Description Here…</p>
</article>
<footer>This is my header</footer>
Before HTML5
<div>Some Text</div>
<div>
<h3>Title</h3>
<div>
<img src="…">
<div>
<p>Caption here…</p>
</div>
</div>
<p>Description Here…</p>
</div>
<div>This is my footer</div>
8

HTML5 Semantics – Why?10
– Why do we need semantic HTML code?
– Better Readability ⇒ Less time to read code ⇒ Less pain
– Better Search Engine Optimization (SEO)
– Why do we need to help search engines? Because we are interesting in promoting our
websites through search engines e.g. Google, Bing, Yahoo, etc…
– But how do Search Engines work? [3]

HTML5 Semantics – Benefits of
Semantics for Search Engines
11
– Semantic code allows search engine to crawl meaningful interesting HTML for better
search results
– Example the new tags <figure> and <figcaption> provide meaningful information
about an image content i.e. optimized image search results
Personalizing
Results
Algorithm
Search
Algorithm
IndexingCrawling

HTML5
Semantics -
Sectioning
Introducing new tags for semantic
sectioning of code. The new tags
allow specifying what is the
significance or goal of this data.
12

HTML5 Semantics – <article>
– Represents an independent article in a
web page
– Used for wrapping content that can be
plucked out of your page and distributed
in a completely different context
– Example: should be used for articles in a
blog, or magazines.
– Flipboard can crawl webpages for content
in <article> to show it to Flipboard users
– Usually one <article> per webpage, it is
confusing for search engines if you have
multiple articles per webpage
13

HTML5 Semantics – <section>
– Like an <article>, except it doesn’t
need to make sense outside the
context of the document
– Define the sections in a document
outline ⇒ Wrap a part of <article>
or other parts of the webpage for
layout purposes
– It makes sense to use the more
descriptive <section> element over
a generic <div>.
14
SPA
Workshop
Interesting
Topics in HTML5
and CSS
HTML5
Semantics
…
Single Page
Applications
…

HTML5 Semantics – <nav>
– Mark up the various navigation
sections of your webpage
– Helps search engines quickly
identify the structure of your
entire website
– Makes it easier to discover other
pages
15

HTML5 Semantics – <header>
– Introductory content for a section,
article, or entire web page
– E.g. logo, navigation, article title or
author information.
– Best practice: wrap a website’s
name/logo and main navigation in
a <header>
16

HTML5 Semantics – <footer>
– Ending Content for a section,
article, or entire web page
– E.g. copyright notices, footer
navigation, and author bios at the
end of an article.
17

HTML5 Semantics – <aside>
– Remove information from an
article/webpage that are irrelevant
to the article
– E.g. advertisements, navigation
links
18

HTML5 Semantics – <figure>
and <figcaption>
– Represents a self-contained
“figure”
– E.g. diagram, images, illustration, or
code snippets.
19
<figure>
<img src=‘…‘ alt=‘….'/>
<figcaption>…</figcaption>
</figure>

More Interesting Topics: Canvas
– WebGL – SVG
– Canvas
– HTML5 tag to draw graphics on a webpage using JavaScript, mostly used for HTML5 games
– Example
– Scalable Vector Graphics (SVG)
– Vector image format for two-dimensional graphics with support for interactivity and
animation using CSS3 and JavaScript
– WebGL
– a JavaScript API for rendering interactive 3D and 2D graphics (needs support of browser
and video card)
– Examples
20

HTML5 References
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[2]: https://internetingishard.com/html-and-css/semantic-html/
[3]: https://www.google.com/search/howsearchworks/
21

22
Interesting Topics in
CSS3
Session 1

CSS Layouts
– CSS properties to adjust layout:
– display
– margin
– padding
– float
– position/top/bottom/right/left
24
<header>
<article>
<footer>
<aside>
<header>
<article>
<footer>
<asi
de>

CSS Layouts
– Most used display: block;
– Most notable display: flex;
– Most promising display: grid; (March
2017)
– Not all layouts are compatible with
every browser.
– You can check for compatibility on
caniuse.com
– Manual Layout is hard; that’s why
CSS Frameworks like Bootstrap exist
25

Box Layout[1]
– Each element in a HTML document is a “box”
– Display: block/inline-block
– Default layout for most HTML tags
– Controlled through: padding, borders, margins, block boxes, and inline boxes
26
[1]

Box Layout
– It is easy to understand
– Cons
– Layout is not easy to do. Many properties to adjust but one goal to achieve.
– Common Questions about basic things:
– How to vertically center a <div>? https://stackoverflow.com/questions/396145/
– How to horizontally center a <div>? https://stackoverflow.com/questions/618097
27

Flexbox Layout[2]
– Gives complete control over the
alignment, direction, order, and
size of the boxes
– New de-facto of web page layouts
– Using display: flex;
28

Flexbox Layout[2]
– Two new types of boxes:
– Flex containers
– To group a bunch of flex items
together and define how they’re
positioned.
– Every direct child of a flex container
is an “item”
– Can be manipulated individually
– The container can determine their
layout
– Flex Items
29

Flexbox Layout[2] – Align Items
inside a Flex Container
– justify-content is used to align
items inside a container
– Flex-start aligns items to the
beginning of flex container
– Flex-end aligns items to the end of
flex container
– Center aligns items to the center of
flex container
30

Flexbox Layout[2] – Distribute
Items inside a Flex Container
– justify-content is used to distribute
items too
– Space-around spreads items out
across its entire width
– Space-between, similar to space-
around but only adds extra space
between items
31

Flexbox Layout[2] – Vertical
Alignment and Distribution
– Vertical alignment and distribution
using align-items
– Similar to justify-content but works
on the “cross-axis”
32

Flexbox Layout[2] – Flex
Direction
– Flex-direction specifies the
direction of the items in the
container (column or row)
– By default, flex-direction is row
– Flex-direction toggles the axes of
justify-content and align-items
33

Flexbox Layout[2] – Flex
Direction
– Flex-direction specifies the
direction of the items in the
container (column or row)
– By default, flex-direction is row
– Flex-direction toggles the axes of
justify-content and align-items
– Row-reverse and column-reverse
are two additional possible
directions too
34

Flexbox Layout[2] – Flex Item
Alignment and Size
– Justify-self and align-self are used
to align a single item inside a flex
container
– Similar to justify-content and align-
content
– Flex defines the width of individual
items in a flex container
– works as a weight that tells the flex
container how to distribute extra
space to each item
35

Responsiveness
– A website should display equally
well in everything from widescreen
monitors to mobile phones
36

Responsiveness37
@media only screen and (max-width: 400px) {
.menu {
width: 100px;
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.menu {
width: 200px;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.menu {
width: 300px;
}
}

Bootstrap and Other CSS
Frameworks
– Bootstrap is a CSS framework for faster and easier web development
– templates for typography, forms, buttons, tables, navigation, modals, image carousels
and many other, as well as optional JavaScript plugins
– Easily create responsive designs
– Bootstrap 4.0 is based on Flexbox layout
– https://getbootstrap.com/
– Alternatives to Bootstrap include Semantic UI and Foundation
38

References
[1]: https://internetingishard.com/html-and-css/css-box-model/
[2]: https://internetingishard.com/html-and-css/flexbox/
39

40
Live Coding Session
Session 1

A Fun Fact about JavaScript
back from 1995
– Common Question: How are Java and JavaScript related?
– One Common Answer: Java and JavaScript are related exactly the same way as “Car” and
“Carpet” are related.
– Two completely different programming languages. Each has its own syntax, tools,
and environment.
– The story behind the similarity in the names[1]
– JavaScript was started by NetScape Inc. as a programming language for their web browser
NetScape Navigator in 1995 when Java was very popular and buzzy
– NetScape decided to name the new language as JavaScript for their marketing ploy (to
make it more popular and relatable to Java even if the two languages are different)

JavaScript Standards
– ECMA Script (ES) is the name of the JavaScript standard.
– JavaScript is considered one implementation of the standard. Others are JScript and ActionScript
– ECMA (European Computer Manufacturers Association) is a standardization organization
– Latest Standards:
– EcmaScript 1999 (ES3). Most used standard with highest compatability.
– …
– EcmaScript 2015 (ES6). Largest . Most notable addition: Classes http://es6-features.org/
– EcmaScript 2016 (ES7). Most notable addition: exponentiation operator (**), [1,2].includes(1)
– EcmaScript 2017. Most Notable addition: async/await
– EcmaScript 2018.

JavaScript as a Dynamically
Typed Programming Language
– JS, by design, does not validate programs before running them
– It directly starts executing the script
– But What about checking the availability of used variables/functions/properties?
– If a variable, function, property does not exist while executing the script, the engine returns undefined
instead of preventing the completion of executing the code)
– JS throw runtime exceptions to signal errors in code including
– Syntax Errors (grammatical error in the code)
– Reference Errors (unable to find a reference on undefined object)
– JS is a weak dynamically typed language i.e.
– Weak: Program can run without the availability of some variables
– Dynamically Typed: there is no type checking and a variable can be assigned to value with any type.

JavaScript as a Dynamically
Typed Programming Language
C Code
int i; // a random number from memory is assigned to
i
scanf("%dn", &i); // write value to memory
if(i % 2 == 0) { // read i from memory
printf("Even!");
} else {
printf("Odd!");
}
printf(“%d“, b); // compile error. All the code does
not work
JavaScript Code
var i; // `undefined` is assigned to i, i does
not have a type. It can be of any!
i = prompt(); // write new value of i into
memory
console.log("i is ", i);
if (i % 2 == 0) { // read value of i from
memory
console.log("Even!");
} else {
console.log("Odd!");
}
console.log(b); // throws exception at runtime

Demo on JS as a
Dynamically Typed
Programming Language

Dynamic Typing vs Static Typing
– Statically Typed Languages
– the type of a variable is known (either specified
manually or can be deduced by the compiler) at
compile time
– Compiler search for errors, and therefore a lot of
trivial bugs are caught at a very early stage.
– E.g. C, C++, Java, C#
– Dynamically Typed Languages
– the type is associated with run-time values
– a programmer can write a little quicker because you
do not have to specify types every time but it is
error-prone
– E.g. JavaScript, Python, Ruby

JavaScript:
DOM
Manipulation
DOM is a programming interface for
HTML and XML documents
JavaScript can access and change all
the elements of an HTML document.
Document.createElement()
Node.append(element)
Document.getElementById()

jQuery
– A lightweight JavaScript library. Write less, do more
– DOM manipulation: Change page content
– CSS manipulation: Change page looks
– HTML event methods: Change page behaviour
– Effects and animations: Add effects
– AJAX: Get data with performance
– Utilities: helper functions

jQuery: Selector
– Basic syntax is: $(selector).action()
– A $ sign to define/access jQuery. It returns an array of jQuery objects that the
selector applies on
– A (selector) to "query (or find)" HTML elements. Same as document.querySelector
– A jQuery action() to be performed on the element(s)
– E.g. $(‘p’) - $(‘#id’) - $(‘.class’) - $(‘.class1.class2’) - $(‘li a’) - $(‘input[type=number]’)
- $(document)

jQuery: Actions
– Every action returns the current jQuery object. Chaining is beautiful.
– Some widely used actions
– $(selector).append to add content to the selected element
– $(selector).after / .before to add content after / before the selected element
– $(selector).css to change/read css properties of an element (manipulate style attribute)
– $(selector).attr to change/read attributes of an element
– $(selector).addClass / .removeClass / .toggleClass to add / remove / toggle a css class
– $(selector).html to change/read the content of an element as an HTML string
– $(selector).val to change/read the value of an input element
– $(selector).click / .hover / .blur / “mouse events” / “keyboard events” to change what happens on click /
hover …..
– Hide, show, ….

jQuery: Action Examples
$('a.add-book').click(function() {
alert('Add book');
});
var mySection = $('<section>').append('<div>').css('display',
'flex').css({
backgroundColor: 'red',
fontSize: 12
});
$('a.button').append(mySection)

Asynchronous Programming
var data =
DownloadFile("http://xyz.abc/
file.pdf"); // blocks CPU
SaveFileToDisk(data,
"myfile.pdf"); // blocks CPU
– At the same time, the user clicked a
button that need to execute the
following code, but the CPU is
blocked until the downloading and
saving the file finishes => the code
will not execute directly and the user
will think that something bad
happened
void OnClick() {
ShowHomePage();
}

Asynchronous Programming
DownloadFileInBackground("http://xyz.a
bc/file.pdf", function (data) {
SaveFileToDiskInBackground(data,
"myfile.pdf");
});
– It runs asynchronously
– It does not block the
CPU
– We can execute other
code at the same time
– This is managed in JS
using event loops[2]

Callbacks
– An executable code that is passed
as an argument to other code that
is expected to execute the
argument at a given time
– It can be
– A function identifier
– An anonymous function
(functions with no name)
setTimeout(function() {
alert('OK');
}, 10000);
// or
function alertOk() {
alert('OK');
}
setTimeout(alertOk, 10000);

Promise
– An object representing the eventual completion or failure of an asynchronous
operation
– Promises in JavaScript are very similar to the promises you make in real life[3]
– A promise gives you an assurance that something will be done
– At the time of making a promise, all we have is only an assurance.
– A promise can either be kept or broken
– When a promise is broken, you would like to know the reason
– If a promise is fulfilled, then an action has been taken and could be followed by other
actions

Promise
var promise = GetDataFromServer(); // a
promise is pending
promise.then(function(result) { // On
Success, Promise is resolved
console.log('Server data is',
result);
} [, function(error) { // On Failure,
Promise is rejected
throw error;
}]).catch(function(error) { // On
Failure, Promise is rejected
console.log('Error is', error);
});
Pending
Resolved/Fulifilled
Run success
callback
Rejected
Run failure callback
Promise
started
Call
Callback
Downloa
ding
data
Execute
code
pending
finished

Promise: Chaining
– Then, returns a new promise with
the previous promise results
– Catch, can catch an exception that
has been thrown inside the
promise or in then success or
failure callback
– Finally, execute some code
whether it has been success or
failure
fetch('/article/promise-
chaining/user.json')
.then(function(response) {
return
response.text();
})
.then(function(text) {
alert(text);
});

Asynchronous JavaScript And X
ML (AJAX)
– A technique to transfer data using JS, Asynchronous Programming and a data
format (XML – JSON) without the need to reload the page
– AJAX is a misleading name. XML is not always used as a data format for
communication. JSON and plain text are other data formats
– Originally, all AJAX are done using XMLHttpRequest in JS. However, very few
people use this API.
– Instead, people rely on wrappers provided by frameworks (available in jQuery,
AngularJS…). It is easier to use these wrappers than to use the original API.

AJAX using jQuery
– AJAX supports all HTTP request methods (e.g. GET – POST – PUT- DELETE ….)
– $.ajax( url [, settings ] ) or $.ajax(settings)
– Settings is a plain object e.g. {
url: "script.php",
method: "POST",
data: { id : menuId },
dataType: "html"
}
– $.ajax returns a Deferred object (a wrapper of a promise) of completing the defined request:
– then to handle success, failure and progress
– done for sure it is a success
– Fail / catch to handle failure

AJAX using jQuery
– $.get( url [, data ] [, success ] [,
dataType ] )
– Equivalent to $.ajax({
url: url,
data: data,
success: success,
dataType: dataType,
method: «GET»
});
– $.post( url [, data ] [, success ] [,
dataType ] )
– Equivalent to $.ajax({
url: url,
data: data,
success: success,
dataType: dataType,
method: «POST»
});

JavaScript Object Notation
(JSON)
– It is a data format to communicate
data between the clients and the
server inspired by JavaScript
objects
– Advantages:
– Easy to use
– Does not consume many bytes to
format data compared to other
formats

JavaScript Object Notation
(JSON)
{
"userName": "Computer Science Club",
"isAdmin": true,
"books": [{
"id": 1,
"name": "A Brief History of Time",
"description": "...",
"image": "briefhistoryoftime.jpg",
"authorName": "Stephen Hawking"
}, {
"id": 2,
"name": "21st Century C",
"description": "...",
"image": "21stcenturyc.jpg",
"authorName": "Ben Klemens"
}
]
}

Server-side Programming with
JS: Node.js
– Everybody loves JavaScript => JavaScript is coming to server-side programming
– Node.js is a platform that provides the tools and a JavaScript engine to run
JavaScript outside the browser
– Any kind of programs can be made using JS including Development Tools, Web Application
(MEAN stack), and other server applications
– https://nodejs.org/
– NPM (Node Package Manager) is a package manager to install 3rd party libraries,
manage and update them
– Manage dependencies of projects
– Manage tools that are developed for the Node platform

JavaScript: Package Managers
– Client-side programming is not an easy task
– Multiple Technologies that needs to be integrated together
– Multiple 3rd party dependencies to manage and update (JS Libraries like jQuery and
AngularJS – CSS Libraries like Bootstrap and others)
– There is an extensive need to manage libraries automatically not manually.
– NPM is the default and the most used package manager.
– Other package managers: Yarn - Bower

References
[1]: https://www.computer.org/csdl/mags/co/2012/02/mco2012020007.html
[2]: https://www.youtube.com/watch?v=8aGhZQkoFbQ
[3]: https://hackernoon.com/understanding-promises-in-javascript-13d99df067c1

Live Coding Session:
AJAX, DOM Manipulation
and Package Management
Session 2

Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS and JavaScript

More Related Content

What's hot (20)

Similar to Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS and JavaScript (20)

Recently uploaded (20)

Single Page Applications Workshop Part I: Interesting Topics in HTML5, CSS and JavaScript

Editor's Notes