Week Ten lecture notes (MGDP2050)
The page has lecture notes for Week Ten (MGDP2050).
Contents
jQuery UI
jQuery UI is a set of interactive components for web pages.
It is built on jQuery. In order to use jQuery UI, you also need jQuery.
- In computer science, this is known as a dependency.
- jQuery must come before jQuery UI, because jQuery depends upon jQuery.
Mixing jQuery UI and Bootstrap
Many of the features in jQuery UI are similar to features in Bootstrap (framework).
Using features from two libraries is not uncommon.
You will probably need to write some custom CSS (and perhaps custom JavaScript).
One library is probably preferable -- simpler, easier.
But sometimes a project is committed to "Library A", which lacks a certain feature. Options include:
- Also using "Library B", which has the feature. (Easy.)
- Writing a plug-in for "Library A". (Difficult.)
Libraries and frameworks
Libraries and frameworks are similar and overlapping concepts.
There is no formal definition of which does what. The terms are used somewhat differently, in various sub-fields of computer science. Opinions vary from one software developer to another.
I think of it this way:
- A library is a smaller concept: more like a toolbox
- A framework is a larger concept: more like an automobile (or better yet, an automobile factory)
For further information, see Libraries and frameworks (computing).
Underscore.js
Underscore.js is a JavaScript library which provides some general-purpose utilities of interest to computer programmers.
It is a dependency of Backbone.js.
- In other words: Backbone.js depends upon Underscore.js.
For technical information, see the Underscore website:
Backbone.js
Backbone.js is a JavaScript library which is widely used to build web applications.
Modern web applications are typically single-page applications which use Ajax.
For technical information, see the Backbone website:
Web applications
A web application is any computer program that runs in a web browser.
Single-page application
A single-page application (SPA) is a web application with a single web page.
- The user interacts with the page, including the experience of "navigating from page to page".
- The user never actually navigates away from the page.
Ajax
Ajax is set of several technologies, widely used in web design and development.
It is not a single, strictly-defined technology, but rather a set of best practices.
Thus, when someone says "Ajax", they may mean one (or more) of several things.
What people mainly mean when they say "Ajax" is this central set of principles:
- The web browser sends a request to the web server (via JavaScript, commonly without the user's direction action or awareness).
- The web server receives the request, processes it, sends back a response
- The response typically a unit of information meant to go in some part of a web page -- not a complete web page
- The browser receives the response, and uses it to update the Document Object Model, or take other actions
- Typically, the browser takes the response and uses it to update a specific subsection of the web page.
With Ajax, the user can have the experience of navigating from page to page, while remaining on a single web page.
JSON
JSON is a file format for text data, widely used in web applications.
JSON is an alternative to XML.
JSON file
A JSON file is a text file containing JSON data (and nothing else).
JSON files have the .json file extension.
JSON data is commonly delivered via web service, and not as a text file.
Text files are convenient for classroom demonstrations, but less common in real-world websites.
In real-world websites, web services are more powerful.
- A web service is a URL which provides data, for example data in JSON format.
- The obviates the need for text files, providing a more dynamic solution.
Document Object Model
In a web browser, the Document Object Model (DOM) represents the HTML, CSS, and other parts of a web page.
Inspect Element
Use Inspect Element to view and manipulate the DOM.
