mirror of https://github.com/knative/docs.git
401 lines
17 KiB
HTML
401 lines
17 KiB
HTML
{% extends "main.html" %} {% block content %}
|
||
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
|
||
|
||
<div class="md-container home-page">
|
||
<section class="home-container">
|
||
<div class="md-grid md-typeset">
|
||
<div class="mdx-hero">
|
||
<div class="headline-section">
|
||
<h1 class="main-headline">
|
||
Knative is an Open-Source Enterprise-level<br>
|
||
solution to build Serverless and Event Driven Applications
|
||
</h1>
|
||
<p style="display: block">
|
||
<a href="{{ 'getting-started/tutorial' | url }}" class="md-button white md-button--primary">Try the tutorial</a>
|
||
<a href="{{ 'install/' | url }}" class="md-button white">Install Knative on your cluster</a>
|
||
</p>
|
||
<div class="trusted-by-container">
|
||
<h3 class="trusted-by">Trusted by</h3>
|
||
<div class="scroller">
|
||
<div class="scroller__inner">
|
||
<!-- First row of adopters will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
<div class="scroller" data-direction="right">
|
||
<div class="scroller__inner">
|
||
<!-- Second row of adopters will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="need-to-know-more-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>Need to know more?</h1>
|
||
<p class="normal-text">
|
||
Learn about how Knative works with Kubernetes and the underlying ideas behind containers <br class="br">
|
||
and serverless infrastructure.
|
||
</p>
|
||
<a href="{{ 'getting-started/' | url }}" class="md-button call-to-action">
|
||
Explore Knative
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="why-serverless-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>Why serverless containers?</h1>
|
||
<p class="normal-text-head">
|
||
Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
|
||
meaning that companies only pay for what they use. Knative is a platform-agnostic
|
||
solution for running serverless deployments.
|
||
</p>
|
||
<div class="img-table">
|
||
<div class="img-row">
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_simple_abstractions_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Simpler Abstractions</h2>
|
||
<p class="normal-text">
|
||
Simplify your YAML with our custom CRDs
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_autoscaling_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Autoscaling</h2>
|
||
<p class="normal-text">
|
||
Scale down to zero and up from zero
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_progressive_rollouts_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Progressive Rollouts</h2>
|
||
<p class="normal-text">
|
||
Choose your rollout strategy depending on your needs
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="img-row">
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_event_intergrations_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Event Integrations</h2>
|
||
<p class="normal-text">
|
||
Handle events from many sources
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_handle_events_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Handle Events</h2>
|
||
<p class="normal-text">
|
||
Trigger handlers from the event broker
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<div class="img-wrapper">
|
||
<img src="images/home-images/blue_plugable_icon.svg"
|
||
onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
|
||
onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
|
||
</div>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Plugable</h2>
|
||
<p class="normal-text">
|
||
Kubernetes native to be integrated and extended
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="knative-components-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>Knative Components</h1>
|
||
<p class="normal-text">
|
||
Knative has two main components that empower teams working with Kubernetes. Serving and<br>
|
||
Eventing work together to automate and manage tasks and applications.
|
||
</p>
|
||
<div class="components-content">
|
||
<img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" />
|
||
<div class="text-table">
|
||
<p class="normal-text">
|
||
Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
|
||
autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming
|
||
language.
|
||
</p>
|
||
<p class="normal-text">
|
||
Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data
|
||
stream with declarative event connectivity and developer friendly object models.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="knative-components-container-mobile">
|
||
<div class="text-upper-right">
|
||
<p>Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking.</p>
|
||
</div>
|
||
<div class="svg-diagram">
|
||
<img class="components-img" src="images/home-images/knative_flowchart_graphic_mobile.svg" alt="" draggable="false" />
|
||
</div>
|
||
<div class="text-lower-left">
|
||
<p>Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data stream with declarative event connectivity and developer-friendly object models.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="trying-it-all-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>Trying it all together</h1>
|
||
<div class="img-table">
|
||
<div class="img-row">
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false">
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Developers focus on code</h2>
|
||
<p class="normal-text">
|
||
From container to URL<br>
|
||
with less YAML config
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false">
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Scale up and down</h2>
|
||
<p class="normal-text">
|
||
Scale down to zero<br>
|
||
based on traffic patterns
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="img-col">
|
||
<div class="reason-img">
|
||
<img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false">
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Cloud agnostic</h2>
|
||
<p class="normal-text">
|
||
Control traffic shifting<br>
|
||
for smoother rollouts
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="{{ 'install/' | url }}" class="md-button call-to-action">
|
||
Deploy Knative Today
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-studies-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>
|
||
<a href="{{ 'about/case-studies/' | url }}">Case Studies</a>
|
||
</h1>
|
||
<div class="cases-table">
|
||
<a href="{{ 'about/case-studies/sva/' | url }}">
|
||
<div class="col">
|
||
<div class="logo">
|
||
<img class="sva" src="images/case-studies/sva.png" alt="" draggable="false" />
|
||
</div>
|
||
<hr>
|
||
<p class="normal-text">
|
||
"Knative allowed the team to centralize their system, scale, audit, and
|
||
even select events while enforcing policies and simplifying the architecture"<br>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
<a href="{{ 'about/case-studies/ibm/' | url }}">
|
||
<div class="col">
|
||
<div class="logo">
|
||
<img class="ibm" src="images/case-studies/ibm.png" alt="IBM logo" draggable="false" width="75" />
|
||
</div>
|
||
<hr>
|
||
<p class="normal-text">
|
||
"The introduction of the ML training infrastructure using Knative Eventing
|
||
has enabled us to establish a well-defined operational boundary for the service teams."<br>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
<a href="{{ 'about/case-studies/pnc/' | url }}">
|
||
<div class="col">
|
||
<div class="logo">
|
||
<img class="pnc" src="images/case-studies/pnc_bank.png" alt="" draggable="false" />
|
||
</div>
|
||
<hr>
|
||
<p class="normal-text">
|
||
"The power of Knative’s eventing and serverless features allows PNC to bridge processes
|
||
between Apache Kafka and CI/CD toolchain events and achieve this automated state."<br>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="cncf-notice-container">
|
||
<h3>Knative is a <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> incubation project</h3>
|
||
<img class="cncf-logo" src="images/home-images/cncf-color.png" alt="" draggable="false" />
|
||
</section>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
{{ super() }}
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Suggested size for the logo images = 320x96
|
||
const adopters = [
|
||
{ logoPath: "images/corporate-logos/alauda.svg", url: "https://www.alauda.io/" },
|
||
{ logoPath: "images/corporate-logos/alibaba_cloud.svg", url: "https://cs.console.aliyun.com/" },
|
||
{ logoPath: "images/corporate-logos/bloomberg.svg", url: "https://www.bloomberg.net/" },
|
||
{ logoPath: "images/corporate-logos/blue_origin.svg", url: "https://www.blueorigin.com/" },
|
||
{ logoPath: "images/corporate-logos/box.svg", url: "https://box.com/" },
|
||
{ logoPath: "images/corporate-logos/chainguard.svg", url: "https://chainguard.dev/" },
|
||
{ logoPath: "images/corporate-logos/control_plane.svg", url: "https://www.controlplane.com/" },
|
||
{ logoPath: "images/corporate-logos/deepc.svg", url: "https://www.deepc.ai/" },
|
||
{ logoPath: "images/corporate-logos/fulcrum.svg", url: "https://www.fulcrumapp.com/" },
|
||
{ logoPath: "images/corporate-logos/gojek.svg", url: "https://www.gojek.com/" },
|
||
{ logoPath: "images/corporate-logos/google.svg", url: "https://cloud.google.com/anthos/run" },
|
||
{ logoPath: "images/corporate-logos/ibm.svg", url: "https://cloud.ibm.com/codeengine" },
|
||
{ logoPath: "images/corporate-logos/ka-nabell_japan.svg", url: "https://www.ka-nabell.com/" },
|
||
{ logoPath: "images/corporate-logos/kubesphere.svg", url: "https://kubesphere.io/" },
|
||
{ logoPath: "images/corporate-logos/liquidx.svg", url: "https://www.liquidx.com/" },
|
||
{ logoPath: "images/corporate-logos/manomano.svg", url: "https://www.manomano.es/" },
|
||
{ logoPath: "images/corporate-logos/optum.svg", url: "https://optum.com/" },
|
||
{ logoPath: "images/corporate-logos/property_xyz.svg", url: "https://property.xyz/" },
|
||
{ logoPath: "images/corporate-logos/redhat.svg", url: "https://www.openshift.com/learn/topics/serverless" },
|
||
{ logoPath: "images/corporate-logos/scaleway.svg", url: "https://www.scaleway.com/en" },
|
||
{ logoPath: "images/corporate-logos/sonavi_labs.svg", url: "https://www.sonavilabs.com/" },
|
||
{ logoPath: "images/corporate-logos/spider.svg", url: "https://www.spider.com/" },
|
||
{ logoPath: "images/corporate-logos/tata_comm.svg", url: "https://www.tatacommunications.com/solutions/cloud/platforms" },
|
||
{ logoPath: "images/corporate-logos/vmware.svg", url: "https://network.tanzu.vmware.com/products/serverless" },
|
||
{ logoPath: "images/corporate-logos/y_meadows.svg", url: "https://www.ymeadows.com/" },
|
||
{ logoPath: "images/corporate-logos/grerook.svg", url: "https://www.greyrook.com/" },
|
||
{ logoPath: "images/corporate-logos/high_cohesion.svg", url: "https://www.highcohesion.com/" },
|
||
{ logoPath: "images/corporate-logos/vhive.svg", url: "https://vhive-serverless.github.io/" },
|
||
{ logoPath: "images/corporate-logos/sva.svg", url: "https://sva.de/en" },
|
||
{ logoPath: "images/corporate-logos/vorteil-direktiv.svg", url: "https://www.direktiv.io/" }
|
||
];
|
||
|
||
function shuffle(array) {
|
||
for (let i = array.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[array[i], array[j]] = [array[j], array[i]];
|
||
}
|
||
}
|
||
|
||
// Shuffle the adopters array
|
||
shuffle(adopters);
|
||
|
||
const trustedByContainers = document.querySelectorAll(".trusted-by-container .scroller__inner");
|
||
|
||
function populateAdopters(container, adopters) {
|
||
adopters.forEach(adopter => {
|
||
const adopterLink = document.createElement("a");
|
||
adopterLink.href = adopter.url;
|
||
adopterLink.target = "_blank";
|
||
|
||
const adopterImg = document.createElement("img");
|
||
adopterImg.src = adopter.logoPath;
|
||
adopterImg.alt = "Adopters";
|
||
adopterImg.classList.add("logo");
|
||
|
||
adopterLink.appendChild(adopterImg);
|
||
container.appendChild(adopterLink);
|
||
});
|
||
}
|
||
|
||
const firstRowAdopters = adopters.slice(0, adopters.length / 2);
|
||
const secondRowAdopters = adopters.slice(adopters.length / 2);
|
||
|
||
// Shuffle each row's adopters array independently
|
||
shuffle(firstRowAdopters);
|
||
shuffle(secondRowAdopters);
|
||
|
||
populateAdopters(trustedByContainers[0], firstRowAdopters);
|
||
populateAdopters(trustedByContainers[1], secondRowAdopters);
|
||
|
||
// If a user hasn't opted in for reduced motion, then we add the animation
|
||
const scrollers = document.querySelectorAll(".scroller");
|
||
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||
addAnimation();
|
||
}
|
||
|
||
function addAnimation() {
|
||
scrollers.forEach((scroller) => {
|
||
scroller.setAttribute("data-animated", true);
|
||
|
||
const scrollerInner = scroller.querySelector(".scroller__inner");
|
||
const scrollerContent = Array.from(scrollerInner.children);
|
||
|
||
// For each item in the array, clone it -> add aria-hidden to it -> add it into the `.scroller-inner`
|
||
scrollerContent.forEach((item) => {
|
||
const duplicatedItem = item.cloneNode(true);
|
||
duplicatedItem.setAttribute("aria-hidden", true);
|
||
scrollerInner.appendChild(duplicatedItem);
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{% endblock %}
|
||
|
||
<!-- Application footer -->
|
||
{% block footer %}
|
||
{% include "partials/footer.html" %}
|
||
{% endblock %}
|