FACUNDO GIULIANI
Web fgiuliani.com
Twitter @facundozurdo
GitHub @fgiuliani
Software Engineer
Lead Web Developer @ MultiTracks.com
Auth0 Ambassador
GitKraken Ambassador
Cloudinary Media Developer Expert
Slide 3
Slide 3 text
Jamstack,
static sites
and Azure
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
Tim Berners-Lee
Slide 6
Slide 6 text
http://info.cern.ch/hypertext/WWW/TheProject.html
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
http://spacejam.com
Slide 10
Slide 10 text
Static Web Page
A web page that is delivered to the user's
browser exactly as stored
Slide 11
Slide 11 text
Dynamic Web Page
A web page where some of the content is
generated dynamically, when needed
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Server Side Rendering
The HTML content is generated by the
Web Server
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Single Page Application
A web application that interacts with the
user by dynamically rewriting the current
web page with new data from the server
Slide 19
Slide 19 text
Client Side Rendering
The HTML content is rendered directly in
the browser using JavaScript
Slide 20
Slide 20 text
Client Side Rendering
PROS CONS
◆ Richer interactions.
◆ Faster rendering after initial
page load.
◆ Lower server load.
◆ Reusable UI components.
◆ Slower initial page load.
◆ Low SEO If not implemented
correctly.
◆ Dependency on external
libraries.
Slide 21
Slide 21 text
Server Side Rendering
PROS CONS
◆ Faster initial page load.
◆ Better SEO / Social Media
Optimization.
◆ More secure (server-side code).
◆ Lower user device load.
◆ Busier web servers.
◆ Overall slow page rendering.
◆ Full page reload after route
changes.
◆ The page is viewable sooner,
but it’s not interactive.
Slide 22
Slide 22 text
One Step
Forward Backward
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Static Web Pages
◆ Fast
◆ Cheap
◆ Easy to maintain
◆ Secure
◆ Easy to scale
◆ Stable
Slide 26
Slide 26 text
Jamstack
Slide 27
Slide 27 text
Jamstack
A new way of building websites and apps
that delivers better performance, higher
security, lower cost of scaling, and better
developer experience.
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Generating cacheable, static assets
at build time whenever is possible
Slide 30
Slide 30 text
Deploying those assets to CDNs
Slide 31
Slide 31 text
Use client-side JavaScript to call
third-party APIs and serverless
functions for dynamic interactions
and data
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Static Site Generator
Software that produces and deploys a
static website using data sources and
templates
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Content Management System
Application or set of related programs
that are used to create and manage
digital content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Headless CMS
A CMS where the content repository is
separated or decoupled from the
presentation layer
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Build, Deployment and Hosting
Service to build, integrate, deploy and
host the application
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Jamstack
◆ Better Performance
◆ Cheaper Servers
◆ Better Caching
◆ More Security
◆ Easy to scale
◆ Better SEO
◆ Better Developer Experience
PROS
Slide 49
Slide 49 text
Jamstack
◆ Different costs to evaluate
◆ External dependencies
◆ Atomic build time
◆ Hard for content editors
PROBLEMS
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Thank you!
Web fgiuliani.com
Twitter @facundozurdo
GitHub @fgiuliani