Jens Martensson

Framework-
Defined
Infrastructure
Programmatic framework understanding
for automatic infrastructure provisioning
Infrastructure
Components:
• Servers
• Networking
• Storage

Jens Martensson
• Database
• Load Balancers
• Security groups & firewall rules
• Identity & access management (IAM)
• Containers
• Monitoring and logging
• Cloud Services
• Configuration management
• Orchestration

2
Infrastructure Provisioning: Process of
preparing and setting up
Components:
resources
• Servers
• Networking
• Storage

Jens Martensson
• Database
• Load Balancers
• Security groups & firewall rules
• Identity & access management (IAM)
• Containers
• Monitoring and logging
• Cloud Services
• Configuration management
• Orchestration

3
Why we need infrastructure?
A little History
• In the early days of the internet, managing
servers and infrastructure was a manual and
often tedious process.
• Infrastructure provisioning involved running
install scripts and configuring software through
graphical user interfaces, which was not scalable
as the web expended.
• With the rapid growth of the internet and web
services, the limitations of manual infrastructure
became apparent. As more servers and services
were needed, the traditional approach couldn’t
keep up with the demand.
The DevOps Movement
• The DevOps movement emerged as a response
to these challanges.
• It emphasizes collaboration, automation, and the
Jens Martensson
integration of development and operations teams
to streamline software delivery and
infrastructure management
Emergence of Infrastructure as Code (IaC)
• IaC became the best practice for provisioning
infrastructure in a repeatable and reliable
manner. It represents a significant shift in
infrastructure management practice.
• IaC eliminates the need for manual, error-prone
configuration tasks. It brings consistency,
repeatablility, and automation to infrastructure
management.
4
Why IaC and DevOps became?
IaC is a response to the scalability and automation challenges faced in the early days Server and
Infrastructure management.

Infrastructure as Code (IaC)

Jens Martensson
The DevOps Movement
• DevOps promotes the culture of collaboration • IaC provides the means to automate
and automation infrastructure provisioning and configuration.

5
IaC(Infrastructure
as Code)
1: Manage and provisioning infrastructure

Jens Martensson
using code.
2: Configurations are expressed in human
readable format e.g scripts or declarative
code.
3: Primary goal is to make infrastructure
provisioning more repeatable and reliable.
4: Version control, tested and automated.

6
 Concept in cloud computing and application
development that simplifies the management
and provision of infrastructure resources
within the context of a software framework or
plate-form. FDI builds on the principles of
(IoC).
• Key Points
Framework-

Jens Martensson
• Abstraction of Cloud Primitives
• Probability between Infrastructure Providers
Defined •
•
Elimination of Manual Configuratoin
Increased Focus on Product Code

Infrastructure •
•
Use of Native Development Tools
Standardization on Secure Services

Inversion of Control (IoC)

• Programmatic framework understanding for
automatic infrastructure provisioning
• IoC is a design principle where the framework
or system manages the high-level flow of the
application, and developer writes code within
the frameswork’s provided hooks or
interfaces. 7
FDI in context of
Vercel
1: Vercel has implemented fdi to support a
variety of frameworks, not just Next.js, but
for multiple frameworks based on the

Jens Martensson
same mechanism.

2: The key benefit of this approach is the

flexibility and abstractin It provides.

3: Developers can focus on writing

application code using their preferred
framework (such as Next.js)
8
Relationship between Next.js and FDI
• Next.js File-Based Router:
• Next.js uses a file-based router, where the structure of files and directories corresponds to the URL routes in
web applictions.
For example,

Jens Martensson
‘pages/blog/index.ts’

• Framework-Defined Infrastructure:
• FDI enhances this routing concept by elevating the route table from an implementation detail within the
framework to something integral to the infrastructure itself.

• Vercel’s Implementation of FdI:

• In Vercel’s case, the route table generated by a framework(like Next.js) is an essential part of the infrastructure.
“ This route table defines how URLs are mapped to application ccode..

9
 Jens Martensson
Code Explanation:
• In Next.js, when you have a page that needs to fetch data dynamically (like blog posts), you can use the
getServerSideProps function to do this.

• The getServerSideProps function fetches the data and is called each time a user visits the page. This ensures
the data is always up-to-date.
10
• To make this work, Next.js requires a "compute service" (like a server or serverless function) to run the code
that fetches the data and generates the page.

• Next.js, with the help of frameworks like Vercel, automatically figures out that you need this compute service
and sets it up for you. In Vercel's case, it uses AWS Lambda for serverless functions and sets up routing to
handle page requests

Jens Martensson
In Simple
Words:
when you use getServerSideProps in Next.js, it's like having a waiter who gets you fresh data every time
you visit a page, and Next.js takes care of setting up the waiter and the kitchen (compute resources) for
you. This ensures your pages always show the latest information.

11
 Jens Martensson
Code Explanation:
• Next.js has a feature called getStaticProps, which helps generate static HTML pages during build time.
• BlogPosts is a component that displays a list of blog posts.
• Inside getStaticProps, it fetches the blog posts from a function called getBlogPosts. This happens when you
build your Next.js app, not when a user visits the page.
• The fetched blog posts are passed as props to the BlogPosts component.
12
• Inside getStaticProps, it fetches the blog posts from a function called getBlogPosts. This happens
when you build your Next.js app, not when a user visits the page.

• The fetched blog posts are passed as props to the BlogPosts component.

• When a user visits the page, Next.js serves pre-generated HTML pages for this component,

Jens Martensson
without needing to run server-side code

• This makes the web page faster and more cost-effective because it's served from static files, and
there's no need for additional server infrastructure

In essence, getStaticProps helps Next.js create fast and efficient static web pages by doing most of
the work at build time rather than on each user's request.

13
Gatsby
Gatsby is a React-based open source
framework with performance, scalability and
security built-in.

• React-Based

Jens Martensson
• Static Site Generation(SSG)
• GraphQL
• Serverless Function
• In the context of web development, serverless
functions are often used for executing
backend logic in response to HTTP requests,
API calls, or other events

14
SvelteKit
open-source framework for building web
applications and websites

• Svelte Integration

Jens Martensson
• File-Based Routing
• Server-Side Rendering (SSR)
• Client-Side Navigation
• Serverless Functions
• Integration with APIs and Databases
• Error Handling

15
 NEXT.JS
The React Framework for the Web
• Middleware in Next.js
• Middleware is set of instructions for handling
web requests.

Jens Martensson
• In Next.js, when you use middleware, it tells
the platform (Vercel) to prepare extra
computing resources to process certain parts
of your website
• Image Optimization in Next.js
• Next.js has a built-in feature for making sure
images on your website load quickly and look
good on each visitor's device.
• Vercel's Build Output API
• When you build your Next.js website, the
framework's building blocks (primitives) are
turned into something like a set of instructions 16
called "Vercel's Build Output API
 Serverless in an IaC
Serverless doesn't mean there are no servers
world

• Serverless Architecture
• Despite its name, serverless doesn't mean there are no
servers. There are still servers, but you don't need to
worry about them
• You don't have to think about specific physical or
virtual servers; you just focus on your code and what
you want it to do
Jens Martensson
• Creating serverless functions (AWS lambda)
• In serverless systems like AWS Lambda, you still need
to tell the system what you want your code to do.
• This is similar to how you would set up a new service
on a regular server, but it's often simpler and more
focused
• when you create a Lambda function, you define what
your code should do, and the system takes care of the 17
server-side details for you
Local Development Problem for Serverless
Serverless systems are often complex and specific to their platforms

• Sometimes, it's tough to develop and test

serverless code on your local computer.

Jens Martensson
• The worst-case scenario is that you can't
test locally, so you have to make slow
updates on the real system

18
Local Development Problem for Serverless
Best-case scenario with framework-defined infrastructure

• With "framework-defined infrastructure," the

system's behavior is controlled by the framework

Jens Martensson
itself.
• This means your local development can use the
framework's tools, which are easier to work with
• Your production system is automatically set up to
match the same behavior as your local
development

19
Framework-defined Infrastructure and immutable deployments

• The code changes over time as new features are
added or bugs are fixed. This is like the story of
the software's development.
• On the other hand, the infrastructure may not
Immutable Deployments Solution
• Instead of updating existing infrastructures (like
"production" or "staging"), immutable
deployments create entirely new infrastructures

Jens Martensson
always keep pace with these code changes. It's for each deployment.
like a different story running parallel to the
software's development, and they might not • These new infrastructures are never changed;
match perfectly. they remain exactly as they were when created.
They are "immutable."
• This misalignment between the code and the
infrastructure can cause issues in how the
software behaves or performs. To avoid these
issues, techniques like immutable deployments
are used to ensure that the infrastructure always
matches the code at a specific point in time.

20
 Jens Martensson
• Vercel's platform creates an "immutable deployment" for each version of your code (like a
specific Git version).

• Each of these deployments gets its own brand-new serverless infrastructure.

• In simple terms, in a serverless system like Vercel, you can have immutable deployments because
they don't lock up physical resources, and each deployment gets its own fresh serverless setup.
This simplifies management and scalability.

21
 Jens Martensson
Thank
You
Moiez Bilal
moiezbilal1523@gmail.com