| Home Blogs | Copyright 2021, Randy Strauss |
A web app consists of multiple html (hypertext markup language) pages, plus one or more css (cascading style sheet) files, and javascript files. All of these are text files. "Markup" means special words and punctuation are added to the text to create structure and special meaning. There are alost image files and font files (a "font" is a set of styled character outlines, like TimesRoman and Helvetica.) Javascript and css styles can also be defined in the html page rather than being put into separate files.
Without javascript, a page can't change (except for a few small ways that forms and css allow.) The javascript can change it in two ways. First, it can alter the css a bit, like hiding one section and making another visible, or when you hit a button, changing a color (or something else.)
Or, it can alter the text a lot. Like maybe the page is from your credit card company and has 1000 transactions in it, stored in an array in the data. When you hit a button, it might create and insert a table for them.
First, we'll review the basics of HTML
The html document is a hierarchical model. The outer html "element" contains a "header" element and a "body" element. The header contains the title shown in the browser tab and other information. The body element contains content, such as headers and paragraphs, each of which contains text, tables and links. Tables contain rows, and rows contain cells. The cells are all aligned into columns.
There are two main kinds of elements, blocks and text. Blocks mostly stack on top of each other- like paragraphs and images. Text things flow with the text, like links, italic sections, etc. Blocks are also called "div"s, text things are also called "span"s. Instead of using paragraphs ('p' elements) and headers ('h1', 'h2', 'h3' and 'h4' elements), some html authors just use div elements with the formats they want. Similarly, special span elements change their text contents, such as making it italic or bold. Some authors just use span elements instead.
Every html element consists of a start tag in angle brackets,
and might have named attributes in double quotes,
and might be folled by content- stuff that it contains-
and then has an end tag, which is like the start tag with
an extra forward slash and no attributes.
For instance, this is a link to my home page.
A link is simply an "a" tag, with the url in the "href"
attribute. The content is the underlined blue text we see:
<a href="http://randy.strausses.net">Rand's personal site</a>
This would produce: Rand's personal site
Finally, there are two ways of saying what "type" something is.
For instance, let's say I want a pink list item (an <li> element)
to be used in my table of contents. I can make it a certain type,
or "class" by giving it a "class" attribute: <li class="toc">
This way I can give it a color in the css: li.toc { color=pink; }
The second way is to give an element a certain ID. Say on each page, I want
to have your name appear at the top in a special font. I would give it
an "id" attribute: <p id="nickname">
After you log in, the app can easily search for the element whose id
is "nickname" and set its content to the name you like to be called.
This hierarchical model of the page is called the DOM (document object model.) The javascript code can alter the DOM. Making a block or text section invisible just involves finding it and setting its visibility attribute. Or it can get or set the contents of one or more elements. The javascript code can also add and remove elements.
One more thing- some characters are difficult to type, like an elipses (…). For these, you can type a "character entity", in this case, …. It's impossible to insert a left angle bracket (less than character) by itself, since that starts an element. To have one appear, you need to type <.
HTML is a bit of a sloppy language. Paragraph start elements <p> don't need to have a close element </p> at the end. Similarly, if an ampersand & isn't followed by a known character entity word followed by a character, the ampersand character is shown. If you want to get rid of this sloppiness, you can make it an xhtml file.
See also this page for a list of color names. W3schools has a full set of html and css tutorials.
A "regular" (old) web server sends you each new page as a separate html. This is the old kind of "multi-page app", just like Wordpress or my simple apache server. These "sites", or "multi-page-apps" are made out of separate html pages.
Wordpress pages are pretty static. Every time a page is changed by the author, the page can be mostly, or wholly, cached- written out to disk as it'll appear in your browser, so it can quickly be sent to someone. I don't know if Wordpress actually caches the pages or creates each as it's needed. Wordpress keeps its information in a database, so has to create most pages. But I think if it doesn't have a page, and the URL points to a file on disk, it will deliver the file.
PHP is a programming language which early on had convenient functions for responding to web requests. It was a pretty bad language, but the special functions made it easier to build a web server. Over the years, other languages have added good web libraries, so there's no real benefit to PHP, but programmers mostly use what they're familiar with. What's important to note is that PHP builds standard multi-page web servers. Every time a browser needs another page, it fetches it from the web server.
Node.js is a standard web server built for javascript. So it's a regular old web server with two differences. One customizes it with javascript (or typescript, a follow-on to javascript.) This is convenient for web programmers who have to know javascript. They can program the web server in the same language they use for programming the page in their browser. Javascript is a dynamic language, so can't be optimized as much. But for a simple web application, it's fine.
The other difference of Node.js is that it's singly-threaded. So if a call to it doesn't need to do much work, perhaps just fetching from a database, under heavy load it can be a lot faster than traditional web servers which made a new thread for each web request. This feature comes at a cost- it's a bit harder to program.
Recently, a java web framework has been made, Vertx.io, which also has this property, but can be programmed in Java. This has the speed advantages of Node.js, with the programming ease of Java.
The main point is that a web server handles requests. When a browser goes to a new page, it sends a GET request to the web server which returns an html page. It might include javascript to do smallish things, but if one clicks on a link to go to a different page, the browswer creates and sends that page.
A web server can send other things back instead of html. For instance, a web server could just send just a bit of information, perhaps fetched from the database. Usually this is sent back in a simple data format called JSON (JavaScript Object Notation), which can very quickly be read by javascript code running in a browser.
Angular and React are two "web application frameworks." These create what are called single page apps. These look like multiple pages, and the URL in the browser might even change, but the pages all come up from the browser when the app is initialized.
A single-page app has everything it needs for multiple pages as soon as it loads, with the possible exception that it might load parts in the background after the first page loads. When your browser seems to go to a new page, it really re-writes the page using a page description that is already loaded. So the one app needs to know all the page names and the DOM for each, plus have special code to initialize it. When the user goes back to the last page or forward again to the next, the code actually rewrites the page.
Many apps use the same header and footer (top and bottom) of the page and just swap out the middle part of the DOM.
The web server must still serve up this single-page application. But it just sends up the files. No parsing is necessary (with one exception.)
We have our own copy of the Angular source code (and fonts), so we can (maybe?) give demos when not connected to the we.
We want to upgrade to it soon.
For general info about Angular, see Wikipedia.
For specific info, see the angular website and it's guide.
Angular 13.0 was released Nov 4, 2021, active till May 4, 2022. We're currently using Angular 2, but want to upgrade.
For testing angular code, See: guide/testing.
Angular is a javascript library. It parses the html page and looks for special attributes (which start with "ng-") that let it manipulate the page. For instance, an angular table will usually be a header row plus a single body row with a special for-loop attribute so the body rows can be manufactured from data that comes from a table.
Angular also lets you make "directive"s which are your own specially-defined HTML tags. Imagine you had a 5-column table of transactions which you wanted to use in 10 different places on a page. Instead of repeating all the table, row and column html elements in each section, you can define it once in a specially named kind of element, and in a separate file for easier coding, and refer to it ten times, each time giving it a different array of data.
Every web request has a "method" and a "URL". It can have optional headers and a body (usually JSON).
Every response has a status line and optional headers and a body (the page, usually html, or data, usually JSON).
The devils in the details. See the Mozilla docs.