web 1.0: the era of CGI & Web documents

https://www.oreilly.com/library/view/cgi-programming-on/9781565921689/07_chapter-04.html

web 1.0: the era of CGI & Web documents

#!/usr/bin/perl -w

use strict;
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<TITLE>Simple Web Form</TITLE>\n";
print "<BODY>\n";
print "<b>Simple Web Form</b><p>\n";
print "<FORM ACTION=\"/cgi-bin/program.pl\">\n";
print "Name: <INPUT TYPE=\"text\" NAME=\"user\" SIZE=40><BR>\n";
print "Age: <INPUT TYPE=\"text\" NAME=\"age\"  SIZE=3 MAXLENGTH=3><BR>\n";
print "Password: <INPUT TYPE=\"password\" NAME=\"pass\" SIZE=10><BR>\n";
print "<INPUT TYPE=\"SUBMIT\" NAME=\"Submit\" VALUE=\"Submit\">\n";
print "</FORM>\n";
print "</BODY>\n";
print "</HTML>";

web 1.0: the era of CGI & Web documents

<HTML>
<TITLE>Simple Web Form</TITLE>
<BODY>
<b>Simple Web Form</b><p>
<FORM ACTION="/cgi-bin/program.pl">
Name: <INPUT TYPE="text" NAME="user" SIZE=40><BR>
Age: <INPUT TYPE="text" NAME="age"  SIZE=3 MAXLENGTH=3><BR>
Password: <INPUT TYPE="password" NAME="pass" SIZE=10><BR>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>

web 1.0: the era of CGI & Web documents

#!/usr/bin/perl

print "Content-type: text/html\n\n";
print "Output of form:<P>\n";
while(<STDIN>)
  {
  chomp($_);
  print "$_<br>\n";
  }
print "<P>\n";

web 1.0: the era of CGI & Web documents

Web Browser

UI

HTTP request

HTML/CSS/JS

CGI

web 2.0: AJAX & Web Applications

https://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/

web 2.0: AJAX & single page apps

web 2.0: AJAX & single page apps

Web Browser

AJAX

UI

XML HTTP Request (XHR)

XML/JSON/etc...

API Server

database

Single Page Application

Web Browser

UI

HTTP request

HTML/CSS/JS

Web Server

database

Traditional Web Site

web 3.0: The rise of Semantic Web

https://semantic-web.com/2018/08/23/knowledge-graphs-connecting-dots-increasingly-complex-world/

the web of data

what is a

static web app?

a SWA is a traditional spa

with superpowers!!

fast to load

fast to render

fast to use

+serverless

Static Web Apps are...

html, css, vanilla.js, angular, vue, jekyll, gatsby ...

Use your favorite tech. stack...

Web Browser

AJAX

UI

HTTP request

Static HTML/CSS/JS

XHR2/fetch

XML/JSON/Buffer/etc...

Serverless API

Database

Static Content

Static Web Apps model...

Azure

static web apps

Azure static Web Apps...

build and host static web apps

authentication & authorization

serverless api (Azure Functions)

ci/cd (github actions)

custom domain + free SSL

Geo Distributed!

Azure swa supported auth providers

https://wassim.dev/.auth/login/twitter

https://wassim.dev/.auth/login/aad

https://wassim.dev/.auth/login/github

https://wassim.dev/.auth/login/facebook

https://wassim.dev/.auth/login/google

https://

Azure Function

Static content

Authn / Authz

Azure Static Web Apps flow

Push/Pull
request

GitHub Workflow

Azure Static Web Apps Tools

* SWA CLI is still under development

VS Code ext.

Azure Portal

Azure CLI

SWA CLI*

Web Browser

AJAX

UI

Static HTML/CSS/JS

XML/JSON/Buffer...

Serverless API

Database

Azure Static Web Apps model...

https://wassim.dev

Static Content

Auth

GitHub

Twitter

Google

...

Azure Static Web Apps demo!!!!

Azure Static Web Apps demo!!!!

Try it today!!!

Static Web Apps Examples Gallerycode-samples

Azure Static Web Apps documentation

Publish an Angular, React, Svelte, or Vue app and API