mirror of https://github.com/apache/kafka.git
MINOR: Redesign of Streams page to include video & logos
guozhangwang Please review. Author: Manjula K <manjula@kafka-summit.org> Reviewers: Guozhang Wang <wangguoz@gmail.com> Closes #4059 from manjuapu/redesign-streams-page
This commit is contained in:
Manjula K
Guozhang Wang
parent
7d6ca52a27
commit
f6e724b127
|
|
@ -5,63 +5,119 @@
|
||||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
(the "License"); you may not use this file except in compliance with
|
(the "License"); you may not use this file except in compliance with
|
||||||
the License. You may obtain a copy of the License at
|
the License. You may obtain a copy of the License at
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
Unless required by applicable law or agreed to in writing, software
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
-->
|
-->
|
||||||
|
<script>
|
||||||
<script><!--#include virtual="../js/templateData.js" --></script>
|
<!--#include virtual="../js/templateData.js" -->
|
||||||
|
</script>
|
||||||
<script id="streams-template" type="text/x-handlebars-template">
|
<script id="streams-template" type="text/x-handlebars-template">
|
||||||
<h1>Kafka Streams API</h1>
|
<h1>Kafka Streams API</h1>
|
||||||
|
<div class="sub-nav-sticky">
|
||||||
<h3 style="max-width: 75rem;">The easiest way to write mission-critical real-time applications and microservices with all the benefits of Kafka's server-side cluster technology.</h3>
|
<div class="sticky-top">
|
||||||
|
<div style="height:35px">
|
||||||
<div class="hero">
|
<a class="active-menu-item" href="#">Introduction</a>
|
||||||
<div class="hero__diagram">
|
<a href="/{{version}}/documentation/streams/developer-guide">Developers Guide</a>
|
||||||
<img src="/{{version}}/images/streams-welcome.png" />
|
<a href="/{{version}}/documentation/streams/core-concepts">Concepts</a>
|
||||||
</div>
|
<a href="/{{version}}/documentation/streams/quickstart">Run Demo App</a>
|
||||||
<div class="hero__cta">
|
<a href="/{{version}}/documentation/streams/tutorial">Tutorial: Write App</a>
|
||||||
<a href="/{{version}}/documentation/streams/tutorial" class="btn">Write your first app</a>
|
|
||||||
<a href="/{{version}}/documentation/streams/quickstart" class="btn">Play with demo app</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<ul class="feature-list">
|
<h3 class="streams_intro">The easiest way to write mission-critical real-time applications and microservices</h3>
|
||||||
<li>Write standard Java applications</li>
|
<p class="streams__description">Kafka Streams is a client library for building applications and microservices, where the input and output data are stored in Kafka clusters. It combines the simplicity of writing and deploying standard Java and Scala applications on the client side with the benefits of Kafka's server-side cluster technology.</p>
|
||||||
<li>Exactly-once processing semantics</li>
|
<div class="video__series__grid">
|
||||||
<li>No seperate processing cluster required</li>
|
<div class="yt__video__block">
|
||||||
<li>Develop on Mac, Linux, Windows</li>
|
<div class="yt__video__inner__block">
|
||||||
|
<iframe class="yt_series video_1 active" style="display:block" src="https://www.youtube.com/embed/Z3JKCLG3VP4?rel=0&showinfo=0&end=602" frameborder="0" allowfullscreen></iframe>
|
||||||
|
<iframe class="yt_series video_2" src="https://www.youtube.com/embed/LxxeXI1mPKo?rel=0&showinfo=0&end=622" frameborder="0" allowfullscreen></iframe>
|
||||||
|
<iframe class="yt_series video_3" src="https://www.youtube.com/embed/7JYEEx7SBuE?rel=0&showinfo=0end=557" frameborder="0" allowfullscreen></iframe>
|
||||||
|
<iframe class="yt_series video_4" src="https://www.youtube.com/embed/3kJgYIkAeHs?rel=0&showinfo=0&end=564" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="video__block">
|
||||||
|
<h3>TOUR OF THE STREAMS API</h3>
|
||||||
|
<div class="video__list">
|
||||||
|
<p class="video__item video_list_1 active" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_1').show();">
|
||||||
|
<span class="number">1</span><span class="video__text">Intro to Streams</span>
|
||||||
|
</p>
|
||||||
|
<p class="video__item video_list_2" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_2').show();">
|
||||||
|
<span class="number">2</span><span class="video__text">Creating a Streams Application</span>
|
||||||
|
</p>
|
||||||
|
<p class="video__item video_list_3" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_3').show();">
|
||||||
|
<span class="number">3</span><span class="video__text">Transforming Data Pt. 1</span>
|
||||||
|
</p>
|
||||||
|
<p class="video__item video_list_4" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_4').show();">
|
||||||
|
<span class="number">4</span><span class="video__text">Transforming Data Pt. 11</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="separator">
|
||||||
|
<div class="use-item-section">
|
||||||
|
<div class="use__list__sec">
|
||||||
|
<h3>Why you'll love using Kafka Streams!</h3>
|
||||||
|
<ul class="use-feature-list">
|
||||||
<li>Elastic, highly scalable, fault-tolerant</li>
|
<li>Elastic, highly scalable, fault-tolerant</li>
|
||||||
<li>Deploy to containers, VMs, bare metal, cloud</li>
|
<li>Deploy to containers, VMs, bare metal, cloud</li>
|
||||||
<li>Equally viable for small, medium, & large use cases</li>
|
<li>Equally viable for small, medium, & large use cases</li>
|
||||||
<li>Fully integrated with Kafka security</li>
|
<li>Fully integrated with Kafka security</li>
|
||||||
|
<li>Write standard Java applications</li>
|
||||||
|
<li>Exactly-once processing semantics</li>
|
||||||
|
<li>No seperate processing cluster required</li>
|
||||||
|
<li>Develop on Mac, Linux, Windows</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="cards">
|
|
||||||
<a class="card" href="/{{version}}/documentation/streams/developer-guide">
|
|
||||||
<img class="card__icon" src="/{{version}}/images/icons/documentation.png" />
|
|
||||||
<img class="card__icon card__icon--hover" src="/{{version}}/images/icons/documentation--white.png" />
|
|
||||||
<span class="card__label">Developer manual</span>
|
|
||||||
</a>
|
|
||||||
<a class="card" href="/{{version}}/documentation/streams/tutorial">
|
|
||||||
<img class="card__icon" src="/{{version}}/images/icons/tutorials.png" />
|
|
||||||
<img class="card__icon card__icon--hover" src="/{{version}}/images/icons/tutorials--white.png" />
|
|
||||||
<span class="card__label">Tutorials</span>
|
|
||||||
</a>
|
|
||||||
<a class="card" href="/{{version}}/documentation/streams/core-concepts">
|
|
||||||
<img class="card__icon" src="/{{version}}/images/icons/architecture.png" />
|
|
||||||
<img class="card__icon card__icon--hover" src="/{{version}}/images/icons/architecture--white.png" />
|
|
||||||
<span class="card__label">Concepts</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="first__app__cta">
|
||||||
<h3>Hello Kafka Streams</h3>
|
<a href="/{{version}}/documentation/streams/tutorial" class="first__app__btn">Write your first app</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="separator">
|
||||||
|
<h3 class="stream__text">Streams API use cases</h3>
|
||||||
|
<div class="customers__grid">
|
||||||
|
<div class="customer__grid">
|
||||||
|
<div class="customer__item streams_logo_grid streams__ny__grid">
|
||||||
|
<a href="https://www.nytimes.com" target="_blank" class="grid__logo__link">
|
||||||
|
<span class="grid__item__logo" style="background-image: url('/images/powered-by/NYT.jpg');"></span>
|
||||||
|
</a>
|
||||||
|
<p class="grid__item__customer__description">
|
||||||
|
<a href="https://www.confluent.io/blog/publishing-apache-kafka-new-york-times/">The New York Times uses Apache Kafka </a>and the Kafka Streams API to store and distribute, in real-time, published content to the various applications and systems that make it available to the readers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="customer__grid">
|
||||||
|
<div class="customer__item streams_logo_grid streams__line__grid">
|
||||||
|
<a href="https://linecorp.com/" target="_blank" class="grid__logo__link">
|
||||||
|
<span class="grid__item__logo" style="background-image: url('/images/powered-by/line.svg');width:9rem"></span>
|
||||||
|
</a>
|
||||||
|
<p class="grid__item__customer__description">LINE uses Apache Kafka as a central datahub for our services to communicate to one another. Hundreds of billions of messages are produced daily and are used to execute various business logic, threat detection, search indexing and data analysis. LINE leverages Kafka Streams to reliably transform and filter topics enabling sub topics consumers can efficiently consume, meanwhile retaining easy maintainability thanks to its sophisticated yet minimal code base.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="customer__grid">
|
||||||
|
<div class="customer__item streams_logo_grid streams__zalando__grid">
|
||||||
|
<a href="http://www.zalando.com" target="_blank" class="grid__logo__link">
|
||||||
|
<span class="grid__item__logo" style="background-image: url('/images/powered-by/zalando.jpg');"></span>
|
||||||
|
</a>
|
||||||
|
<p class="grid__item__customer__description">As the leading online fashion retailer in Europe, Zalando uses Kafka as an ESB (Enterprise Service Bus), which helps us in transitioning from a monolithic to a micro services architecture. Using Kafka for processing
|
||||||
|
<a href="" 'https:="" kafka-summit.org="" sessions="" using-kstreams-ktables-calculate-real-time-domain-rankings="" '="" target="blank'"> event streams</a> enables our technical team to do near-real time business intelligence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="customer__grid">
|
||||||
|
<div class="customer__item streams_logo_grid streams__rabobank__grid">
|
||||||
|
<a href="https://www.rabobank.com" target="_blank" class="grid__logo__link">
|
||||||
|
<span class="grid__item__logo" style="background-image: url('/images/powered-by/rabobank.jpg');"></span>
|
||||||
|
</a>
|
||||||
|
<p class="grid__item__customer__description">Rabobank is one of the 3 largest banks in the Netherlands. Its digital nervous system, the Business Event Bus, is powered by Apache Kafka. It is used by an increasing amount of financial processes and services, one of which is Rabo Alerts. This service alerts customers in real-time upon financial events and is built using Kafka Streams.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 style="margin-top: 5.3rem;">Hello Kafka Streams</h3>
|
||||||
<p>The code example below implements a WordCount application that is elastic, highly scalable, fault-tolerant, stateful, and ready to run in production at large scale</p>
|
<p>The code example below implements a WordCount application that is elastic, highly scalable, fault-tolerant, stateful, and ready to run in production at large scale</p>
|
||||||
|
|
||||||
<div class="code-example">
|
<div class="code-example">
|
||||||
|
|
@ -75,9 +131,9 @@
|
||||||
<pre class="brush: java;">
|
<pre class="brush: java;">
|
||||||
import org.apache.kafka.common.serialization.Serdes;
|
import org.apache.kafka.common.serialization.Serdes;
|
||||||
import org.apache.kafka.streams.KafkaStreams;
|
import org.apache.kafka.streams.KafkaStreams;
|
||||||
import org.apache.kafka.streams.StreamsBuilder;
|
|
||||||
import org.apache.kafka.streams.StreamsConfig;
|
import org.apache.kafka.streams.StreamsConfig;
|
||||||
import org.apache.kafka.streams.kstream.KStream;
|
import org.apache.kafka.streams.kstream.KStream;
|
||||||
|
import org.apache.kafka.streams.kstream.KStreamBuilder;
|
||||||
import org.apache.kafka.streams.kstream.KTable;
|
import org.apache.kafka.streams.kstream.KTable;
|
||||||
|
|
||||||
import java.util.Arrays;
|
import java.util.Arrays;
|
||||||
|
|
@ -100,7 +156,7 @@
|
||||||
.count("Counts");
|
.count("Counts");
|
||||||
wordCounts.to(Serdes.String(), Serdes.Long(), "WordsWithCountsTopic");
|
wordCounts.to(Serdes.String(), Serdes.Long(), "WordsWithCountsTopic");
|
||||||
|
|
||||||
KafkaStreams streams = new KafkaStreams(builder.build(), config);
|
KafkaStreams streams = new KafkaStreams(builder, config);
|
||||||
streams.start();
|
streams.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -112,9 +168,9 @@
|
||||||
<pre class="brush: java;">
|
<pre class="brush: java;">
|
||||||
import org.apache.kafka.common.serialization.Serdes;
|
import org.apache.kafka.common.serialization.Serdes;
|
||||||
import org.apache.kafka.streams.KafkaStreams;
|
import org.apache.kafka.streams.KafkaStreams;
|
||||||
import org.apache.kafka.streams.StreamsBuilder;
|
|
||||||
import org.apache.kafka.streams.StreamsConfig;
|
import org.apache.kafka.streams.StreamsConfig;
|
||||||
import org.apache.kafka.streams.kstream.KStream;
|
import org.apache.kafka.streams.kstream.KStream;
|
||||||
|
import org.apache.kafka.streams.kstream.KStreamBuilder;
|
||||||
import org.apache.kafka.streams.kstream.KTable;
|
import org.apache.kafka.streams.kstream.KTable;
|
||||||
import org.apache.kafka.streams.kstream.KeyValueMapper;
|
import org.apache.kafka.streams.kstream.KeyValueMapper;
|
||||||
import org.apache.kafka.streams.kstream.ValueMapper;
|
import org.apache.kafka.streams.kstream.ValueMapper;
|
||||||
|
|
@ -201,49 +257,13 @@
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="customer-title">See how Kafka Streams is being used</h3>
|
|
||||||
<div class="customer__cards">
|
|
||||||
<div class="customer__card">
|
|
||||||
<div class="customer__card__icon">
|
|
||||||
<img src="/{{version}}/images/icons/NYT.jpg" style="max-width:35%">
|
|
||||||
</div>
|
|
||||||
<span class="customer__card__label">The New York Times uses Apache Kafka and the Kafka Streams API to store and distribute, in real-time, published content to the various applications and systems that make it available to the readers.</span>
|
|
||||||
<a href="https://www.confluent.io/blog/publishing-apache-kafka-new-york-times/">Learn More</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="customer__card customer-right" >
|
|
||||||
<div class="customer__card__icon">
|
|
||||||
<img style="max-width:60%" src="../../images/powered-by/rabobank.jpg">
|
|
||||||
</div>
|
|
||||||
<span class="customer__card__label">Rabobank is one of the 3 largest banks in the Netherlands. Its digital nervous system, the Business Event Bus, is powered by Apache Kafka. It is used by an increasing amount of financial processes and services, one which is Rabo Alerts. This service alerts customers in real-time upon financial events and is built using Kafka Streams.
|
|
||||||
</span>
|
|
||||||
<a href="https://www.confluent.io/blog/real-time-financial-alerts-rabobank-apache-kafkas-streams-api/">Learn More</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="customer_cards_2">
|
|
||||||
<div class="customer__card customer_z">
|
|
||||||
<div class="customer__card__icon" >
|
|
||||||
<img style="max-width:60%" src="../../images/powered-by/zalando.jpg">
|
|
||||||
</div>
|
|
||||||
<span class="customer__card__label">As the leading online fashion retailer in Europe, Zalando uses Apache Kafka as an ESB (Enterprise Service Bus), which helps us in transitioning from a monolithic to a micro services architecture. Using Kafka for processing event streams enables our technical team to do near-real time business intelligence.</span>
|
|
||||||
<a href="https://kafka-summit.org/sessions/using-kstreams-ktables-calculate-real-time-domain-rankings/">Learn More</a>
|
|
||||||
</div>
|
|
||||||
<div class="customer__card">
|
|
||||||
<div class="customer__card__icon green_card">
|
|
||||||
<img src="/{{version}}/images/icons/line.png">
|
|
||||||
</div>
|
|
||||||
<span class="customer__card__label">LINE uses Apache Kafka as a central datahub for our services to communicate to one another. Hundreds of billions of messages are produced daily and are used to execute various business logic, threat detection, search indexing and data analysis. LINE leverages Kafka Streams to reliably transform and filter topics enabling sub topics consumers can efficiently consume, meanwhile retaining easy maintainability thanks to its sophisticated yet minimal code base.</span>
|
|
||||||
<a href="https://engineering.linecorp.com/en/blog/detail/80">Learn More</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<a href="#" class="pagination__btn pagination__btn__prev pagination__btn--disabled">Previous</a>
|
<a href="#" class="pagination__btn pagination__btn__prev pagination__btn--disabled">Previous</a>
|
||||||
<a href="/{{version}}/documentation/streams/quickstart" class="pagination__btn pagination__btn__next">Next</a>
|
<a href="/{{version}}/documentation/streams/quickstart" class="pagination__btn pagination__btn__next">Next</a>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
|
||||||
|
|
||||||
|
</script>
|
||||||
<!--#include virtual="../../includes/_header.htm" -->
|
<!--#include virtual="../../includes/_header.htm" -->
|
||||||
<!--#include virtual="../../includes/_top.htm" -->
|
<!--#include virtual="../../includes/_top.htm" -->
|
||||||
<div class="content documentation documentation--current">
|
<div class="content documentation documentation--current">
|
||||||
|
|
@ -251,21 +271,63 @@
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<!--#include virtual="../../includes/_docs_banner.htm" -->
|
<!--#include virtual="../../includes/_docs_banner.htm" -->
|
||||||
<ul class="breadcrumbs">
|
<ul class="breadcrumbs">
|
||||||
<li><a href="/documentation">Documentation</a></li>
|
<li><a href="/documentation">Documentation</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="p-streams"></div>
|
<div class="p-streams"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--#include virtual="../../includes/_footer.htm" -->
|
<!--#include virtual="../../includes/_footer.htm" -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
// Show selected style on nav item
|
// Show selected style on nav item
|
||||||
$('.b-nav__streams').addClass('selected');
|
$('.b-nav__streams').addClass('selected');
|
||||||
|
|
||||||
|
$('.video_list_1').click(function(){
|
||||||
|
$('.video_2').attr('src', $('.video_2').attr('src'));
|
||||||
|
$('.video_3').attr('src', $('.video_3').attr('src'));
|
||||||
|
$('.video_4').attr('src', $('.video_4').attr('src'));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.video_list_2').click(function(){
|
||||||
|
$('.video_1').attr('src', $('.video_1').attr('src'));
|
||||||
|
$('.video_3').attr('src', $('.video_3').attr('src'));
|
||||||
|
$('.video_4').attr('src', $('.video_4').attr('src'));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.video_list_3').click(function(){
|
||||||
|
$('.video_1').attr('src', $('.video_1').attr('src'));
|
||||||
|
$('.video_2').attr('src', $('.video_2').attr('src'));
|
||||||
|
$('.video_4').attr('src', $('.video_4').attr('src'));
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.video_list_4').click(function(){
|
||||||
|
$('.video_1').attr('src', $('.video_1').attr('src'));
|
||||||
|
$('.video_2').attr('src', $('.video_2').attr('src'));
|
||||||
|
$('.video_3').attr('src', $('.video_3').attr('src'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//sticky secondary nav
|
||||||
|
var $navbar = $(".sub-nav-sticky"),
|
||||||
|
y_pos = $navbar.offset().top,
|
||||||
|
height = $navbar.height();
|
||||||
|
|
||||||
|
$(window).scroll(function() {
|
||||||
|
var scrollTop = $(window).scrollTop();
|
||||||
|
|
||||||
|
if (scrollTop > y_pos - height) {
|
||||||
|
$navbar.addClass("navbar-fixed")
|
||||||
|
} else if (scrollTop <= y_pos) {
|
||||||
|
$navbar.removeClass("navbar-fixed")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Display docs subnav items
|
// Display docs subnav items
|
||||||
$('.b-nav__docs').parent().toggleClass('nav__item__with__subs--expanded');
|
$('.b-nav__docs').parent().toggleClass('nav__item__with__subs--expanded');
|
||||||
|
|
||||||
// Show selected code example
|
// Show selected code example
|
||||||
$('.btn-group a').click(function(){
|
$('.btn-group a').click(function(){
|
||||||
var targetClass = '.b-' + $(this).data().section;
|
var targetClass = '.b-' + $(this).data().section;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue