WebFund 2015W Lecture 23

Audio

The audio from the lecture given on April 1, 2015 is now available.

Notes

On-screen notes

Two topics for last two lectures:

• What are the fundamentals of web applications?
• Web applications everywhere

Distributed Applications

Applications that run on multiple computers

• separate memory, CPU, storage, communication (I/O)
• can apply this processes, virtual hosts, or physical hosts

Localhost is useful when you want a distributed app on one computer

• GET and POST can go essentially anywhere on the Internet
• allows for flexible combination of code and data

• web applications are the premier form of distributed applications today

• with distributed applications, you don't control all the computers "your" code runs on

Structured Persistence

Before this class, you worked with files

Files are unstructured (on modern systems)

On the web we use "databases"

• really, structured storage

Why structured?

• convenience
• speed for "complex" queries
• concurrency & distribution

Front vs Back end

• separate parts of app for...
  • doing computation/storage/real work (back end)
  • providing the interface (front end)

Can you do "real work" in the front end?

• Yes, but...
• Don't trust the answers

Front end is untrusted, back end is trusted

Modern web apps have many backends and can have multiple front ends (mobile, desktop)

• but "responsive design" says you should have one front end

So why put stuff in the front end?

• lower the load on the back end
• but main reason is latency (of network communication)

Markup and Templates

HTML, CSS: markup Jade: template language

Markup is constraint or declarative programming

template languages output markup (are meta-markup)

Trust

Who do you trust?

• library, runtime authors
• content providers
• ad providers
• whatever else you add to a page

Trust means "who can screw you over"

• if they go bad how badly are you hurt

Amazing the web works at all

Student notes

Distributed applications

These are applications that run on multiple computers using separate memory, CPU, storage and communication(I/O). These computers don't have to be separate physical computers.

Our web applications these days are at least in three pieces:

• One part that runs in the browser (client).
• One part that runs as the server.
• One part that runs as the database(s).

Then it goes up from there e.g: communications on twitter(your server interacting with twitter's)

Importance of distributed apps:

• GET and POST can go essentially anywhere on the internet.
  • Allows for flexible combination of code and data.
• With distributed applications, you don’t control all the computer your code runs on. Often, you will use third party libraries to run code that is not even your own. For example, you can use features from Google Analytics in your application but it is their code running on their server; this distributes the burden on your application, making it ore distributed.
• Web applications are the main form of distributed applications today.

Localhost is useful when you want a distributed app on your own computer. i.e: when you want to have multiple processes talk on the same system, but you want to use the same method as you would to talk to other computers - you talk to localhost.

Distributed applications typically communicate using an HTTP or HTTPS protocol as seen in assignment 9.

Nota Bene(NB) Google makes their money from search advertisement and imbedded advertisement on other pages. Look at the script tags of various web pages and see if you understand them.

The web is funded primarily by advertisement. The advertisement is done using JavaScript code. The JavaScript is running on untrusted browsers (machines of people that want to steal money) That's why the code is obfuscated (hard to read and figure out).

Structured persistence

Previously, you have handled persistent storage by using files. Files are unstructured(on modern systems). On the web, we use databases.

What are Databases? Databases are an organization system which enforce a structure on the stored data.

Why structured?

• Convenience.
• Speed for Complex Queries: This is primarily because files in the databases can be indexed on various attributes allowing for quick look-ups.
• Concurrency and distribution: Key component of databases - concurrent access to data. This is not a simple task to manage. o not try to implement this yourself as you will probably do it poorly. Use an existing database suited to your needs.

Font vs back end

This is the concept of separating parts of apps into:

• The back end - Where the real work is done
• The front end - used for the interface

Can the real work be done in the front end?

Yes, but don't trust the answers. This is because the front end is running from an unknown source so it shouldn't be trusted. The integrity of your application cannot depend on it working properly.

Back End - Trusted Front End - Untrusted

Example: YouTube uses Google's servers as the back end to manage videos and the front end is a user interface on the web page itself. Modern web apps may have many back ends.

So why do computation/put stuff in the front end?

• To lower the load on the back end.
• The main reason is the latency (of the network communication). The front end takes less time to perform actions and events compared with back end because back computations require communication with the server(s) to return information (which induces latency).

A web application may also have multiple front ends (desktop, mobile, etc) however it is currently considered to be preferable to only have a single front end made with a responsive design such that it will adapt to whatever display it is used with.

Markup and templates

What we have worked with:

• HTML
• CSS
• Jade (template/markup language)

There are many others which exist as well. HTML and CSS are constantly evolving. Others include XML, Latex, etc... Even WYSIWYG programs like Microsoft Word have underlying markup languages.

Markup is constraint or declarative programming.

Template languages output markup (they are meta-markup).

A markup language is a way of programming. You are declaring what something should be. You are not telling it exactly how to do it (it is not procedural), it is not object oriented but you are specifying constraints on it. So implicitly, a template language is a markup of a markup language. Markup languages are used for safety and efficiency reasons. i.e: less code to write, protection of input, etc....

Trust

When you run a web app, you have to trust various sources like: content providers, ad providers, library and runtime authors. Trust essentially refers to who can screw you over. So basically, if they go bad, how strongly does it affect you.

Embedded JavaScript scripts have access to the entire DOM so if they wanted, they could modify the entire page as they please. Companies that have their scripts embedded in many pages across the web could do some serious damage if they wanted.