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

The New Era of Static Web Apps (GDG Minsk)

By Wassim Chegham

The New Era of Static Web Apps (GDG Minsk)

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?

  • 2,682