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/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
/.auth/login/twitter/.auth/login/aad/.auth/login/github/.auth/login/facebook/.auth/login/google
Push/Pull request
GitHub Workflow
https://
Azure Function
Static content
Authn / Authz
Azure Static Web Apps flow
Azure Static Web Apps demo!!!!
Try it today!!!
Learn more at aka.ms/ah-avocado-lab
Or contact @sherrrylst on Twitter
Azure Heroes Summer Badge: The Learner Badge
Azure Heroes recognises Azure practitioners from across Europe
The other digital badgers must be earned with verifiable acts of impact
Our digital badgers live on the blockchain and are verifiably scarce, so they require free blockchain wallet to safely store them
For more information visit: aka.ms/azure.heroes
(scan to get it)