web 1.0: the era of CGI* & Web documents

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

 * Common Gateway Interface

#!/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

 * Common Gateway Interface

<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

 * Common Gateway Interface

#!/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

 * Common Gateway Interface

Web Browser

UI

HTTP request

HTTP Response

CGI*

web 1.0: the era of CGI* & Web documents

 * Common Gateway Interface

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

HTTP Response

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

Microsoft

Sr. Developer Advocate (JavaScript)

Wassim Chegham

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/aad
https://wassim.dev/.auth/login/twitter
https://wassim.dev/.auth/login/github

Azure Static Web Apps flow

Azure Function
Static content
Authn / Authz
Push
Pull request
https://wassim.dev

@manekinekko

GitHub Workflow
Azure Pipelines

Web Browser

AJAX

UI

Static HTML/CSS/JS

XML/JSON/Buffer...

Serverless API

Database

https://wassim.dev

Static Content

Auth

GitHub

Twitter

Google

...

Azure Static Web Apps architecture

Azure Static Web Apps dev Tools

* Preview available at https://aka.ms/swa-cli

VS Code ext.

Azure Portal

Azure CLI

SWA CLI*

Azure Static Web vs code

Azure Static Web Apps portal

Azure Static Web Apps cli

demo!!!

Azure Static Web Apps SWA CLI

Azure Static Web Apps SWA PLayground

Azure Static Web Apps - auth demo 

Azure Static Web Apps - api demo

Try it today!!!

Shoutout to my GitHub sponsors!

Join me and save the planet

The New Era of Static Web Apps (Dutch Angular Group)

By Wassim Chegham

The New Era of Static Web Apps (Dutch Angular Group)

The web has always been shaped by many trends and the emerging landscape has some surprises in store for us. We are currently witnessing a new era of Web Applications: Static and Serverless Web Applications (or Serverless Static Web Apps). These applications are designed to be fast, reliable, engaging while benefiting from the power, flexibility and scalability of "Serverless". Even if they are created with traditional JavaScript frameworks, such as Angular or Vue, they load and render instantly in your browsers. Join me in this session to find out how to create, configure and deploy your Static Web Apps in a Serverless and geo-distributed environment, while benefiting from a modern and complete CI / CD chain. Are you ready to enter the era of Serverless Static Web Apps?

  • 9,724