Wassim Chegham PRO
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev
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/twitterhttps://wassim.dev/.auth/login/aadhttps://wassim.dev/.auth/login/githubhttps://wassim.dev/.auth/login/facebookhttps://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
...
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?
