Intro to Web Clients (Week 6, part #2) Flashcards
What is an important distinction relating to JS, the browser and Node?
JavaScript + browser !== JavaScript + Node
What are the key ideas with JS + browser? (7)
1) You’re dealing with a user!
2) Input and output via HTML & CSS (& DOM)
3) Deployment of your app is different
4) Different APIs in browser -> AJAX (XHR)
5) Dependencies on libraries -> ‘importing’ JS libraries is different e.g. CDN vs npm install, node packages –> npm cannot always work due to security issues in browser so need to design code differently
6) Project structure is different -> JS, HTML, CSS, other assets
7) Similar terminology, different meaning -> e.g. “routes” & “routing”
What does “deployment of your app is different” mean in terms of JS + browser
1) You don’t know which browser, or version.
2) You don’t know the network-connection quality.
3) You don’t know whether cookies are enabled.
4) You don’t know the computing power of the hosting machine.
What is CDN?
Content delivery network -> a geographically distributed group of servers which work together to provide fast delivery of Internet
What does HTML stand for?
Hyper Text Markup Language
What is HTML?
Most basic building block of the Web. It describes and defines the content of a webpage.
Other technologies besides HTML are generally used to describe a webpage’s appearance/presentation(CSS) or functionality (JavaScript).
What is the difference between content and data?
DATA
1) gives us raw material from where we can provide information about our users
2) what’s in javascript structures (arrays & objects) want to inject data in html content
CONTENT
1) digestible forms of information.
2) what’s in HTML elements
What is a single page web application (SPA)?
A web page that changes it view
What type of language is HTML?
declarative
What is HTML comprised of?
A declaration of a document type (HTML), together with a hierarchical structure of (nested) HTML elements, with elements and attributes
In terms of HTML, how are elements identified?
by tags
In terms of HTML, what do elements typically contain?
some kind of content(to display)
In terms of HTML, what may elements have?
attributes
In terms of HTML, what do attributes define?
characteristics of elements
In terms of HTML, what do attributes often have?
values(for the characteristics)
In terms of HTML, what do attributes allow for?
cross-referencing to CSS and JavaScript
In terms of HTML, what may attributes be?
custom-defined
Give the general heirarchy of an HTML document.
See images doc -> #1
What are some elements of html?
tags, attributes
Identify open and closing tags, content and element for:
[p]Javascript callbacks are turtles all the way down.[/p]
Note: [ = < and ] = >
[p] = opening tag
[/p] = closing tag
Javascript callbacks are turtles all the way down. = content
entire thing = element
Identify the name and value and attribute:
[p class=”comment”]Javascript callbacks are turtles…[/p]
Note: [ = < and ] = >
class = name
“comment” = value
class=”comment” => attribute
In terms of nested HTML elements, identify the nested element, open tag, closing tag and content:
[p]Javascript callbacks are [strong]turtles[/strong] …[/p]
[p] = opening tag
[/p] = closing tag
[strong]turtles[/strong] = nested element
Javascript callbacks are [strong]turtles[/strong] … = content
What is one way to change HTML content using JavaScript?
Use getElementById to change styling.
E.g.
document.getElementById(“four”).innerHTML= “Hello world!”;
How can custom attributes be specified?
HTML5 offers data-* attribute, where * is a unique string (watch out for name clashes)
How do Vue.js and Angular.js use cumstom defined exceptions as part of their two-way ‘binding’ magic? What kind of development does this encourage?
Angular has ng-*attributes
Vue has v-* attributes e.g. v-bind, v-for
Encourages data driven development
What is CSS? What does it stand for?
A (declarative) ‘language’ which is a set of rules for specifying how content of a web page should look.
Cascading Style Sheets
In terms of CSS, what is a typical rule comprised of?
1) a selector
2) a set of properties and values for how HTML content should be presented
In terms of CSS, what there selectors for?
1) Attributes e.g. select on attribute name
2) Element/s e.g. select on element type
In terms of CSS, where can CSS be contained in? Comment on the preference of each three.
1) An external style sheet (recommended)
2) An internal style sheet (sometimes okay)
3) An inline style (are you insane?!)
Give the CSS rule for the following:
- Select (all) [h1] elements, and
- Set three properties: color, background-color, and border
h1 {
color: blue;
background-color:yellow;
border: 1px solid black;
}
Give the CSS rule for the following:
- Select (all) [p] elements
- Set one property: color
p {
color: red;
}
How do you reference an external style sheet?
[head] [meta charset="utf-8"] [title]Blah[/title] [link rel="stylesheet" href="style.css"] [/head]
Explain the process of displaying content on a web page.
See images doc -> #2
How do CSS, HTML, Javascript and the DOM relate to each other? Draw rendering web page diagram
CSS adds style to HTML.
The DOM is constructed of HTML.
Javascript creates dynamic HTML.
Results are rendered, put into a layout and then painted.
See diagrams doc - #2
How can elements be referenced?
By:
1) Element type e.g. [p]
2) Unique identifier e.g. id=”…” –> #id for styling
3) Attribute class e.g. class=”…” –> .class for styling
What are CSS rules used for?
‘Apply’ presentation to referenced elements, through selectors
What does JS get and based on what?
Gets (and sets):
1) Element content
2) Element attributes & values
based on references to those elements
What does “HTML document is the primary source” means?
1) Contains HTML (duh)
2) Contains CSS or reference to CSS
3) Contains JS or reference to JS
How do we handle data?
Data needs to be ‘injected’ into HTML content e.g. JavaScript setter
How to we get the user entered data?
retrieved from the rendered fields on screen e.g. JavaScript ‘getters’
How can we retrieve inputted data using Vue?
through two-way binding. -> ‘Injecting’ data into content; and retrieving content into data
What may a server send?
1) Resources: HTML, CSS, JavaScript etc; and separately
2) Data: JSON, XML; and
3) The application on the client-side injects the data into the HTML etc when needed
Can data injection and data retrieval take place on the client side? If so, how?
Data injected into HTML, and retrieved from HTML
But still need to be persisted somewhere: locally, or on server
What is the motivation for the move to Single Page Applications (SPA)?
1) Users want responsiveness & interactivity; improved user experience
- >Compare user experience with native apps & stand alone apps
2) Managing the interactions with a user is much more complex than managing communication with server
- > Think of all those events (e.g. onClicks) to handle
What distinguishes SPAs? How do they achieve this?
Their ability to redraw any part of the UI without requiring a server round trip to retrieve HTML.
This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models
Explain the ‘separate’ feature of SPAs.
Separate:
1) data
2) ‘Content’ & Presentation: HTML & CSS(and other resources)
Explain how SPAs reduce communication with the server/s.
By:
1) Occasional download of resources e.g. HTML, CSS and JavaScript
2) Asynchronous ‘background’ fetching of data: AJAX / XHR or web sockets
3) Fetch data only e.g. JSON
4) Fetch data from different servers: CORS
Explain SPAs’ ‘page’ navigation.
1) Client-side JavaScript handles the routing instead of the browser itself
–> Managing page history
2) Routing within the SPA
What do SPAs re-balance workload across?
1) Server-side application
–> e.g. Node.js
2) Client-side application/
–> Front-end libraries and frameworks e.g. vue.js
3) Communication between client & server
–> API-driven/specified
–>e.g. AJAX & JSON
What do SPAs need to consider?
1) Manage application assets/resources
–> •e.g. dependency management
2) Application design and implementation
–> Modularisation
–> Design patterns
3) Templating
What types of resources are on the client side?
1) Design patterns
2) Virtual DOM
3) Templating
4) Routing
What is used for the client and backend to communicate?
1) XHR / AJAX
2) Websockets
3) HTTP
4) CORS
Label all of these
[title] A title [/title]
[!DOCTYPE html]
class = “aim”
Note: [ = < and ] = >
[title] = tag
[!DOCTYPE html] = declaration to the web server of what html version the page is written in.
A title = content
class = “aim” = attribute
[title] A title [/title] = element
Note: [ = < and ] = >
Define declarative language
Declarative languages, also called nonprocedural or very high level, are programming languages in which (ideally) a program specifies what is to be done rather than how to do it.
