Web App Architecture

Web Frameworks – Pros & Cons

Pros

• Saves time, makes development process going faster
• Ease of maintenance
• Security

Cons

• Every framework has its limits and rules

Examples of Full-stack JS Web Frameworks

• MEAN stack
• MERN stack

Hosting websites

• First, a web server has to store the website's files, namely all HTML documents and their related assets, including images, CSS stylesheets, JavaScript files, fonts, and video.
  • A dedicated web server is typically more available.
  • A dedicated web server is always connected to the Internet.
  • A dedicated web server is typically maintained by a third-party.

HTTP Methods/Verbs

• GET: Get a specific resource (e.g. an HTML file containing information about a product, or a list of products).
• POST: Create a new resource (e.g. add a new article to a wiki, add a new contact to a database).
• HEAD: Get the metadata information about a specific resource without getting the body like GET would.
• PUT: Update an existing resource
• DELETE: Delete the specified resource.

Static Sites

​ The server for a static site will only ever need to process GET requests, because the server doesn't store any modifiable data. It also doesn't change its responses based on HTTP Request data (e.g., URL parameters or cookies).

Dynamic sites

Single Page Applications

• A web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
• JavaScript frameworks, such as Angular, Ember.js, Knockout.js, Meteor.js, ExtJS, Vue.js and React have adopted SPA principles.

Single Page VS Traditional Web Apps

Intro to HTML

Uniform Resource Locators (URL)

​ In order to allow clients to request different resources from the server, a naming mechanism is required so that the client knows how to ask the server for the file.

HTML Syntax

Elements and Attributes

• HTML element encompasses
  • the element name within angle brackets
  • HTML elements can also contain attributes.

Basic use

• Insert images using the tag
• Create links with the tag
• Create lists with the
  ,
  and
  1. tags
  2. Create headings with

     ,

     , ...,

  3. Define metadata with tag

  Sample HTML Document

  

  Headings

  ​ HTML provides six levels of heading (h1-h6), with the higher heading number indicating a heading of less importance.

  Paragraphs

  ​ Notice that the

  tag is a container and can contain HTML and other inline HTML elements

  Divisions

  • This
    tag is also a container element and is used to create a logical grouping of content
  • has no intrinsic presentation.

  Links

  • Links use the element (the “a” stands for anchor).
  • A link has two main parts: the destination and the label.

  <a href="http://www.somewhere.com">Photo</a>
  <!-- Same directory-->
  

  URL Relative Referencing

  

  Main, article, section

  • main is meant to contain the main unique content of the document.
  • main provides a semantic replacement for markup such as
    or
  • section is a much broader element, while the
  • article element is to be used for blocks of content that could potentially be read or consumed independently of the other content on the page

  Intro to CSS