Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Newsletter #7114

Merged
merged 8 commits into from
May 22, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
path: "/blog/2024/04/01/fullstack-workshop"
date: "2024-04-01"
title: "Full Stack GraphQL Workshop"
description: "We're excited to announce our new Full Stack GraphQL Workshop. Learn more about the workshop here!"
tags: ["bananacakepop", "graphql", "hotchocolate", "workshops"]
featuredImage: "header.png"
author: Pascal Senn
authorUrl: https://github.com/pascalsenn
authorImageUrl: https://avatars.githubusercontent.com/u/14233220?v=4
---

In today's rapidly evolving technology landscape, staying ahead requires not only understanding the latest technologies but also how to implement them effectively. This two-day workshop is a hands-on journey designed to demystify advanced concepts by building from the ground up. We'll start with the basics and progressively build a fully functional distributed web shop using HotChocolate, Relay.js, Fusion, multiple subgraphs .NET Aspire and also concepts like domain driven design, CQRS and clean architecture.

Book your seat now and learn more about the workshop [here](https://learn.chillicream.com/blog/2024-04-01/fullstack-workshop).

![Full Stack GraphQL Workshop](img1.png)

Over two days, we'll cover everything from basic concepts to advanced techniques. We start by getting to know GraphQL, learning about its features and benefits compared to traditional methods. Later, we introduce Relay.js, focusing on how it works with GraphQL to improve data handling and application performance.

**Day 1:** We begin with basic GraphQL concepts, then move on to how you can build efficient APIs. In the afternoon, we'll learn about Relay.js, starting with the fundamentals and advancing to more complex topics.

**Day 2:** We explore deeper topics like how to change and improve your GraphQL setup, how to handle data updates smoothly, and how other advanced techniques fit into the GraphQL world. We end by learning about real-time data updates with subscriptions.

For the next online workshop you [find more information here](https://learn.chillicream.com/blog/2024-04-01).

This workshop can also be tailored to meet your company's specific needs. We offer the flexibility to customize the content and focus areas to best match your team's requirements and goals.

Here are the detailed modules available:

**Module 1: Getting Started with GraphQL**

Kick off with GraphQL by understanding its fundamental concepts such as operations, types system, syntax, and reasons for using GraphQL over other APIs. The session ends with setting up a first GraphQL server, providing hands-on experience from the start.

**Module 2: Building a Database Driven Application**

Explore how to build GraphQL apis using Entity Framework Core, with features like paging, filtering, sorting, and projections. The session will also cover some advanced concepts like field middlewares.

**Module 3: Building APIs with Simple Layering**

This session focuses on API with simple layering, including applying filtering and pagination in layered architectures. It also covers best practices using DataLoaders for optimized data fetching operations.

**Module 4: GraphQL Query Patterns and Best Practices**

Detailed exploration of advanced GraphQL patterns such as evolving schemas, entity and connection patterns for large-scale applications, ensuring best practices are met for enterprise development.

**Module 5: Getting Started with Relay.js**

Introduction to Relay.js, focusing on queries, using fragments and arguments effectively.
Module 6: Advanced Fetching Patterns
This module covers complex data fetching strategies in Relay.js, including transitions, refetching, and pagination, essential for managing data in applications and providing peak user experience.

**Module 7: Understanding Relay**

Expands on Relay's core concepts, including store management, data prefetching methods, and internal workings of Relay for performance improvements and predictable state management.

**Module 8: GraphQL Mutations Patterns and Best Practices**

Deep dive into the structure and patterns of GraphQL mutations, focusing on how to effectively manage errors and ensure robust mutation operations.

**Module 9: Mutations In Relay**

This module focuses on teaching effective methods for managing mutations, error handling, and executing optimistic updates within Relay.

**Module 10: GraphQL Schema Evolution**

Review of techniques to evolve a GraphQL schema over time without breaking existing operations, including the use of client and schema registries and implementing open telemetry.

**Module 11: Introduction to Distributed GraphQL**

Covering the concepts and implementation of distributed GraphQL with fusion to allow scalable, efficiently distributed data across different services and servers.

**Module 12: Authentication / Authorization**

Detailed breakdown of implementing authentication and authorization in GraphQL applications, ensuring secure and controlled access to data through proper practices.

**Module 13: CQRS, DDD and GraphQL, the Perfect Fit?**

Exploration of how CQRS and Domain Driven Design can be integrated with GraphQL to optimize complexity management in large-scale domains.

**Module 14: GraphQL Subscriptions Patterns and Best Practices**

In-depth look at implementing real-time functionalities via GraphQL subscriptions, with specific focus on patterns. Implemented in both the backend and frontend..

**Closing Session: Q&A**

An open session where attendees can ask questions or clarify doubts about the topics covered, facilitating deeper understanding and practical implementations.

## We Want to Hear From You
Your insights are invaluable to us. If you have questions, need more information, or just want to talk to use, don’t hesitate to reach out on contact@chillicream.com or on [slack.chillicream.com](https://slack.chillicream.com/blog/2024/04/01/fullstack-workshop)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
path: "/blog/2024/05/21/newsletter-may"
date: "2024-05-21"
title: "What we have been up to!"
description: "We just released the Operation Builder, Telemetry, and a new Full Stack GraphQL Workshop. Checkout the blog post to learn more!"
tags: ["bananacakepop", "graphql", "hotchocolate", "workshops", "cloud", "release"]
featuredImage: "header.png"
author: Pascal Senn
authorUrl: https://github.com/pascalsenn
authorImageUrl: https://avatars.githubusercontent.com/u/14233220?v=4
---

We’re excited to bring you some significant updates from ChiliCream that can genuinely make a difference in your day-to-day development. This isn't just about new features—it's about making your workflow more effective and your projects more successful.

# 🛠️ Operation Builder
We’re excited to introduce the Operation Builder in Banana Cake Pop, a tool designed to make creating and managing your GraphQL operations a breeze.

![Operation Builder](img1.png)

The Operation Builder simplifies the process of creating and managing queries, making it easier than ever to draft, edit, and inspect your operations. Dive deep into your schema, seamlessly navigate fields and fragments, and gain instant insights into your data structure.

This is perfect for both quick edits and detailed explorations, helping you understand and optimize your queries with ease.

Try out the Operation Builder today and transform the way you work with GraphQL!

**[Check out the video here](https://link.chillicream.com/2024/05/21/ops-builder-video)**

# 📊 Telemetry

![Telemetry](img2.png)
We’re excited to put a spotlight on our Telemetry integration. Why did we build this? The answer is simple. Understanding your application’s performance shouldn't be a guessing game and GraphQL Telemetry is difficult. With our telemetry integration, you can have complete visibility into your GraphQL server.

![Telemetry](img3.png)
- **Trace Visualization:** See every trace in detail. This helps you pinpoint precisely where your system can be improved.
- **Latency Monitoring:** Track average latency and critical percentiles to ensure top-notch performance.
- **Throughput Metrics:** Keep an eye on operations per minute, so you can manage and scale your resources effectively.
- **Client Insights:** Identify which clients impact your system the most, helping you make data-driven decisions.
- **Error Tracking:** Stay ahead of potential issues with real-time error reports.
- **In-depth Operation Analysis:** Gain a comprehensive overview of each operation's latency, throughput, and error rates.

The fusion dashboard offers extensive monitoring capabilities, presenting real-time tracing and telemetry insights of your gateway and subgraphs. The topology view reveals interconnections and client activities, while status indicators provide a quick overview of latency, throughput, and error rates.

_Create, Collaborate, Conquer! Get Started with Banana Cake Pop Pro. Use the promo code **BCPROCKS** to get a discount on your first year and start using our GraphQL IDE to enhance your projects efficiently._

**[Check out the video here](https://link.chillicream.com/2024/05/21/telemetry-video)**

or read the docs: [Open Telemetry Documentation](https://link.chillicream.com/2024/05/21/otel-docs)

# 🛠️ Announcing Our New Full Stack GraphQL Workshop

In today's rapidly evolving technology landscape, staying ahead requires not only understanding the latest technologies but also knowing how to implement them effectively. Our brand-new Full Stack GraphQL Workshop is a two-day, hands-on journey designed to demystify advanced concepts.

![Full Stack GraphQL Workshop](img4.png)

We'll start with the basics and progressively build a fully functional distributed web shop using HotChocolate, Relay.js, Fusion, multiple subgraphs, and .NET Aspire. We’ll also delve into foundational principles like domain-driven design, CQRS, and clean architecture.

Learn more about the workshop here: [learn.chillicream.com](https://link.chillicream.com/2024/05/21/learn)

## We Want to Hear From You
Your insights are invaluable to us. If you have questions, need more information, or want to discuss how our tools can fit into your projects, don’t hesitate to reach out on contact@chillicream.com or on [slack.chillicream.com](https://link.chillicream.com/2024/05/21/slack)

## ❤️️ Thank You
We appreciate your engagement and are thrilled to support your projects with our evolving GraphQL solutions. Keep an eye out for HotChocolate 14, and let us help you take your projects to the next level.
PascalSenn marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions website/src/components/images/fullstack-workshop.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { graphql, useStaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React, { FC } from "react";
import styled from "styled-components";

import { GetFullStackWorkshopQuery } from "@/graphql-types";

export const FullstackWorkshop: FC = () => {
const data = useStaticQuery<GetFullStackWorkshopQuery>(graphql`
query getFullStackWorkshop {
file(
relativePath: { eq: "2024-04-01-fullstack-workshop/header.png" }
sourceInstanceName: { eq: "blog" }
) {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
}
}
}
`);

return (
<Container>
<GatsbyImage
image={data.file?.childImageSharp?.gatsbyImageData}
alt="Fullstack Workshop"
/>
</Container>
);
};

const Container = styled.div`
padding: 30px;

.gatsby-image-wrapper {
border-radius: var(--border-radius);
box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
}
`;
39 changes: 39 additions & 0 deletions website/src/components/images/newsletter-may-2024.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { graphql, useStaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React, { FC } from "react";
import styled from "styled-components";

import { GetNewsletterMay2024ImageQuery } from "@/graphql-types";

export const NewsletterMay2024: FC = () => {
const data = useStaticQuery<GetNewsletterMay2024ImageQuery>(graphql`
query getNewsletterMay2024Image {
file(
relativePath: { eq: "2024-05-21-newsletter-may/header.png" }
sourceInstanceName: { eq: "blog" }
) {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
}
}
}
`);

return (
<Container>
<GatsbyImage
image={data.file?.childImageSharp?.gatsbyImageData}
alt="Newsletter May 2024"
/>
</Container>
);
};

const Container = styled.div`
padding: 30px;

.gatsby-image-wrapper {
border-radius: var(--border-radius);
box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
}
`;
26 changes: 13 additions & 13 deletions website/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import styled from "styled-components";

import { BananaCakePop } from "@/components/images/banana-cake-pop";
import { BlogPostBananaCakePopApis } from "@/components/images/blog-post-banana-cake-pop-apis";
import { BlogPostEFMeetsGraphQL } from "@/components/images/blog-post-ef-meets-graphql";
import { BlogPostHotChocolate13 } from "@/components/images/blog-post-hot-chocolate-13";
import { BlogPostGraphQLFusion } from "@/components/images/blog-post-graphql-fusion";
import { BlogPostHotChocolate13 } from "@/components/images/blog-post-hot-chocolate-13";
import { NewsletterMay2024 } from "@/components/images/newsletter-may-2024";
import { Layout } from "@/components/layout";
import { Link } from "@/components/misc/link";
import {
Expand All @@ -30,6 +30,7 @@ import { GetIndexPageDataQuery } from "@/graphql-types";
import { THEME_COLORS } from "@/shared-style";

// Artwork
import { FullstackWorkshop } from "@/components/images/fullstack-workshop";
import { SrOnly } from "@/components/misc/sr-only";
import ContactUsSvg from "@/images/artwork/contact-us.svg";
import DashboardSvg from "@/images/artwork/dashboard.svg";
Expand Down Expand Up @@ -75,6 +76,16 @@ const IndexPage: FC = () => {
showStatus={false}
showThumbs={false}
>
<Slide>
<Link to="/blog/2024/05/21/newsletter-may">
<NewsletterMay2024 />
</Link>
</Slide>
<Slide>
<Link to="/blog/2024/04/01/fullstack-workshop">
<FullstackWorkshop />
</Link>
</Slide>
<Slide>
<Link to="/blog/2023/08/15/graphql-fusion">
<BlogPostGraphQLFusion />
Expand Down Expand Up @@ -102,17 +113,6 @@ const IndexPage: FC = () => {
</SlideContent>
</Link>
</Slide>
<Slide>
<Link to="/blog/2020/03/18/entity-framework">
<BlogPostEFMeetsGraphQL />
<SlideContent>
<SlideTitle>Entity Framework Meets GraphQL</SlideTitle>
<SlideDescription>
Get started with Hot Chocolate and Entity Framework
</SlideDescription>
</SlideContent>
</Link>
</Slide>
</Slideshow>
</Intro>
<Section>
Expand Down
Loading