React Summit

React Summit 2024

Today's Talk covers creating videos with React, including using Puppeteer and FFmpeg to build videos frame by frame. The ReMotion library offers advantages such as declarative and reusable components, versioning, and automation. The Talk also demonstrates building a video with ReMotion, embedding previews in React, and customization options. It explores rendering at scale with ReMotion's Lambda or Docker options and the rendering process using Lambdas.

I bet you've always used React to build websites and applications, right? What if I told you that we can also edit a movie with it! Learn how a simple render engine built in React and Node.js works to make videos using React components.Also, you will learn how to create a scalable render-farm using AWS. The main library to build the render engine is Remotion and allows to render videos programmatically.

Creating Videos... With React!

Alfonso Graziano 

Node Congress

Node Congress 2024

This Talk covers various optimization techniques for Lambda functions, including parameter fetching, code minification and bundling, observability with Power Tools and X-Ray, baseline testing with load testing tools, caching with Elastic Cache and Redis, and optimizing code size and memory usage. The importance of library choices, power tuning for cost and performance, leveraging subprocesses and sandboxes, and adjusting concurrency limits are also discussed. Overall, these techniques can significantly improve Lambda function performance.

Have you ever wonder how to get the best out of your Lambda functions?If so, this talk will reveal the behind the scene one of the most popular serverless service and you will be exposed to a step by step guidance for optimizing your functions.During this session, I will walk you through the mindset to reduce your Lambda functions execution time. In the example presented I was able to reduce the execution time by 95% for warm start and over 50% with cold starts improving also the transactions per seconds served with this API.

AWS Lambda Performance Tuning

Luca Mezzalira

DevOps.js

DevOps.js Conf 2024

We will be building a simple React application using Wig, a toolchain for JavaScript, React, and Wing lang. The Wing compiler allows us to compile applications into Terraform JSON files that can be deployed on AWS. We can handle events on the cloud bucket, connect the backend and frontend using Vite, and use environment variables to expose the API gateway URL. We can create a REST API interface for the application and connect it to a DynamoDB for data storage. Lastly, we can use WebSockets to synchronize the counter with the backend and deploy the application to AWS using Terraform and AWS CLI.

This workshop enables you to learn how to develop React applications, and then deploy them to the cloud (or building them to the console) coupled with a backend, fully abstracted, with no complex backend configuration, simplifying the building and deployment of frontend &amp; web apps to the cloud.

Frontend to the Cloud Made Easy - A ReactJS + AWS Workshop

Eyal Keren

Imagine starting as an AWS DevOps engineer in a small company. Your boss wants an all-in AWS approach, with CICD entirely on AWS for automated deployments. Use AWS CDK for creating a pipeline, stages, and actions. Learn how to handle multiple pipelines for different accounts and handle manual approval for staging and production environments. Discover how to trigger pipelines with EventBridge and Lambda, and create sophisticated pipelines for different scenarios.

Many companies are going all-in AWS and thus adopting their complete CodeSuite for their CI/CD processes. However, while CodePipeline is the platform for this process, it may not be the most user-friendly. In a Monorepo setup, it's typical to create multiple CI/CD pipelines for each package. However, there are several caveats to be aware of. For instance, you may encounter scenarios where multiple pipelines get triggered even if you just modified one file, or you may question the need to create multiple branches for each pipeline. In this talk, we provide valuable tips for building a sophisticated CodePipeline using CDK in a Monorepo environment. The techniques discussed in this talk are also transferrable to other CI/CD tools.

Building a sophisticated CodePipeline with CDK in a Monorepo Setup

John Nguyen

Welcome to this session on Lambda Developer Experience. Learn about using AWS Cloud Development Kit (CDK) to write code in your favorite language and automatically generate CloudFormation templates. Test locally with the SAM CLI and deploy with CDK. Accelerate testing and updates with CDK flags. Use the AWS Toolkit to invoke Lambda functions, analyze logs, and generate code with Application Composer.

In this session, I share with you how AWS CDK and AWS Toolkit can simplify the developer experience to run serverless workloads in the cloudA session with no slides, just an IDE and a CLI for deploying an API in the cloud, update it quickly, and retrieve logs without leaving your favourite IDE!

Demystify the  DX for Lambda functions

Node Congress 2023

In this Talk, key characteristics of AWS Lambda functions are covered, including service architecture, composition, and optimization of Node.js code. The two operational models of Lambda, asynchronous and synchronous invocation, are explained, highlighting the scalability and availability of the service. The features of Lambda functions, such as retries and event source mapping, are discussed, along with the micro VM lifecycle and the three stages of a Lambda function. Code optimization techniques, including reducing bundle size and using caching options, are explained, and tools like webpack and Lambda Power Tuning are recommended for optimization. Overall, Lambda is a powerful service for handling scalability and traffic spikes while enabling developers to focus on business logic.

In this talk I explain how the AWS Lambda service works explaining the architecture, how it scales and how a developer should think about when they design their software using Lambda functions

AWS Lambda under the hood

The Talk discusses the challenges of IoT development, including issues with fleet offline, data missing, alerts not working, inconsistent data, and slow loading dashboards. It explores how to build observability in IoT applications using metrics, logging, and tracing. The integration between the rules engine and Lambda is explained, highlighting the use of tools like Lambda Power Tools and X-Ray for logging, monitoring, and tracing. The Lambda invocation process and the tracing capabilities of X-Ray are also mentioned.

Observability is crucial for successfully operating large IoT fleets. IoT incorporates different components, including hardware, network, on-device software, and cloud. Devices operate under unreliable conditions and constraints, and need to be monitored remotely. Cloud applications become complex and costly, as they are built to handle device activity at scale. Answering questions such as: -    Do I have a problem in my IoT application? -    Where is the problem? -    What is causing the problem? -    How much of my fleet is affected? -    Is my code expensive to run and if yes, how can I fix that? , can be challenging. Logging, monitoring and tracing are fundamental observability pillars. However, they are often viewed as non-functionals in IoT applications, and can fall off the radar, or are not standardized during development. This session will show how to leverage Open Source tools, such as AWS Lambda PowerTools, in a fully functional Serverless IoT application, to ease adoption of best practices for modern application development, and integrate services such as Amazon X-Ray, Amazon CloudWatch and AWS IoT Core features, to achieve end-to-end observability.

Tools for better Observability in NodeJS Serverless IoT Applications

Alina Dima

React Summit 2022

This Workshop focuses on building a knowledge base using Gatsby, Contentful, and AWS. It covers the basics of Gatsby, including static site generation and routing. The Workshop also introduces Gatsby Content Mesh, which provides a GraphQL layer for adding various data sources. It then demonstrates how to integrate Contentful, a Headless CMS, with Gatsby using the Gatsby-Source-Contentful plugin. The Workshop concludes with deploying the app to AWS Amplify and setting up webhooks for automatic redeployment.

In this workshop, we will go over how to build a knowledge base using Gatsby, a static site generator Framework that uses React and graphQL, Contentful, a Headless CMS to drive the content and deploy it to AWS S3.

Build a knowledge base with Gatsby, Contentful and AWS 

Abdelrhman Adel

DevOps.js Conf 2022

AWS CDK is a concept that allows you to use coding languages to create infrastructure as code, making it more flexible and powerful than traditional config languages. CDK offers benefits such as improved developer experience, multi-regional deployments, and a programmatic approach to infrastructure as code. It is a suitable choice for AWS users, particularly those familiar with CloudFormation. CDK can be used to migrate from CloudFormation to a more efficient and user-friendly infrastructure management tool. CDK also provides drift detection and supports multi-region deployment, making it a popular choice for managing infrastructure on AWS.

CDK is growing in popularity in the AWS ecosystem, and is set to be the successor of CloudFormation, being built natively for the configuration of AWS resources. Learn how this is a game changer for NodeJS programmers &amp; stacks. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Enter CDK: What this Means for the World of IaC

Roy Tal

React Advanced

React Advanced 2021

This Talk covers infrastructure as code using Terraform and CDK. The speaker demonstrates how to build infrastructure for a React application, including an S3 bucket and connecting to a real domain. They also discuss configuring cache behavior, CloudFront, and remote backends. TypeScript is highlighted as a powerful language for infrastructure as code, and the importance of automation and well-documented code for global-scale infrastructures is emphasized.

We consider what IaC (Infrastructure as Code) is and why we should invest our time/money into it. It’s going to be a workshop-style talk and as the result, the end of it you will have complete infrastructure as code for React application on AWS written in TypeScript <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Infrastructure as Code for React Application on AWS Written in TypeScript

Denis Artyuhovich

Node Congress 2021

This workshop focuses on learning serverless with TypeScript and building a serverless app for a coffee shop. It covers various topics such as serverless services and pricing, serverless workflow with AWS, setting up IAM and credentials, CDK project setup, organizing functions, and creating DynamoDB tables. The workshop also explores the benefits of a single-table layout in DynamoDB, creating APIs with AWS Lambda and API Gateway, and troubleshooting deployment issues. Additionally, it discusses environment variables, testing and debugging, and handling environments and rollbacks.

This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application. Table of contents:<ul><li>        - How to set up a serverless project with TypeScript and CDK</li><li>        - How to write a testable Lambda function with hexagonal architecture</li><li>        - How to connect a function to a DynamoDB table</li><li>        - How to create a serverless API</li><li>        - How to debug and test a serverless function</li><li>        - How to organize and grow a serverless application Materials referred to in the workshop: <a href="https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w" target="_blank">https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w </a>DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/ Excellent book for the DynamoDB: <a href="https://www.dynamodbbook.com/" target="_blank">https://www.dynamodbbook.com/ https://slobodan.me/workshops/nodecongress/prerequisites.html </a></li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Serverless Applications on AWS with TypeScript

Slobodan Stojanović

DevOps.js Conf 2021

This Talk focuses on automating React deployments to S3 and CloudFront using a CICD pipeline in AWS. It covers setting up the pipeline, sourcing code from GitHub, and configuring infrastructure with Terraform and Terragrunt. The Talk also demonstrates the process of building and deploying a React application using AWS CodeBuild and CodePipeline. Overall, it provides a comprehensive overview of the tools and techniques involved in automating React deployments in AWS.

In this talk, I will demonstrate how to create a CI/CD pipeline for a React application in AWS. We'll pull the source code from GitHub and run tests against the application before deploying it to an S3 bucket for static site hosting. The site will then be distributed using CloudFront which will point to the S3 bucket. All of the infrastructure will be built using Terraform. In addition, I'll make use of Terragrunt to show how to create this setup for multiple environments. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automate React Site Deployments from GitHub to S3 & CloudFront

Lukonde Mwila

The AWS CDK is an infrastructure as code tool that supports multiple programming languages and helps mitigate concerns about vendor lock-in. It uses JSII to support different languages and allows you to write code once and get the same API across different languages. The CDK simplifies resource creation and management in AWS, addressing the verbosity and error-proneness of CloudFormation. CDK applications consist of apps and stacks, with stacks mapping to CloudFormation stacks. The CDK provides a more compact and familiar syntax compared to CloudFormation, making it easier for JavaScript developers to handle the entire stack.

For years AWS has offered CloudFormation as an approach to Infrastructure as Code (IaC). CloudFormation allows application stacks to be provisioned from JSON or YAML formatted templates. Unfortunately, due to their size and complexity, CloudFormation templates have earned a reputation as being unwieldy to work with. The AWS Cloud Development Kid (CDK) mitigates some of the complexity associated with CloudFormation allowing developers to programmatically define their cloud architecture using familiar high-level languages such as JavaScript and TypeScript. CDK projects can then be deployed via CloudFormation, while retaining all of the benefits of CloudFormation, such as repeatable deployments and drift detection. This talk will introduce the CDK in the context of Node.js and demonstrate how it can be leveraged to provision cloud native architectures. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introduction to the AWS CDK: Infrastructure as Node

Colin Ihrig

Welcome to the DevOpsJS conference where Jeff Hopper introduces his Slack bot called LGTM ReplyGIF for posting GIFs on his behalf. He troubleshoots issues with the serverless Node code, uses CloudWatch logs and stack traces for debugging, and ships logs to Elasticsearch for analysis. Jeff explores troubleshooting options with Rollbar and discusses serverless deployment recommendations. The audience is invited to contribute to the Slack bot project, and the session concludes with thanks from Jeff.

AWS ushered in a new landscape for deploying JavaScript applications using Node.js hosted in AWS Lambda, and since then the management simplicity that it provides has made serverless applications and APIs grow exponentially in both popularity and use cases. However, operationally for many starting out, troubleshooting issues can be painful. I'll walk through some techniques to make this easier and provide an evolution of how we can get to a better solution with tips and tools you can use in your serverless deployments right away. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Troubleshooting your Serverless Node.js doesn't have to be a Pain

Jeff Hoffer

JSNation Live

JSNation Live 2020

This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.

In this talk I’ll show how we can use a combination of GraphQL SDL along with a new DSL (GraphQL Transform) created the Amplify team to build out a full stack cloud application directly from your GraphQL schema. Using this GraphQL DSL, we’ll walk through how to model a Database, authorization rules, relationships, and custom access patterns. We’ll look at how to rapidly prototype an example application, and view some demos including a voting app capable of handling over 100,000 operations per second. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Transforming GraphQL – Infrastructure as Code for Front End Developers

Nader Dabit

React Summit 2020

This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.

CDK (Cloud development kit) enables developers to build cloud infrastructure using popular programming languages like Python, Typescript, or JavaScript. CDK is a next-level abstraction in infrastructure as code, allowing developers who were traditionally unfamiliar with cloud computing to build scalable APIs and web services using their existing skillset, and do so in only a few lines of code. In this talk, you’ll learn how to use the TypeScript flavor of CDK to build a hyper-scalable real-time API with GraphQL, Lambda, DynamoDB, and AWS AppSync . At the end of the talk, I’ll live code an API from scratch in just a couple of minutes and then test out queries, mutations, and subscriptions. By the end of the talk, you should have a good understanding of GraphQL, AppSync, and CDK and be ready to build an API in your next project using TypeScript and CDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK

JSNation Live 2021

Today's talk introduces the AWS Amplify Admin UI and low code development, which aims to simplify backend web development. The AWS Amplify Admin UI is a powerful tool backed by AWS services, allowing users to create a database schema visually and test locally. The Amplify CLI and Datastore enable developers to link the backend to their code easily. Low code development in Amplify makes coding more accessible and fun. Amplify offers benefits such as direct use of AWS services, extensibility, and excellent GraphQL service. Other interesting topics include server-side rendering support, environmental management, and support for Node.js and Python in AWS Amplify.

There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more. The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of fullstack development for frontend and mobile developers. We'll build a fullstack application backed multiple AWS services including Cognito, Appsync, and S3 in minutes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create an Application Backend in Clicks with the Amplify Admin UI

Ali Spittel

React Summit Remote Edition

React Summit Remote Edition 2021

The Workshop covers building a multi-user blogging app using Next.js, Amplify, and Tailwind. It focuses on core functionality like authentication, data storage, API access, and file storage. The workshop also explores server-side rendering (SSR) options and scalability using cloud providers like AWS. Topics include configuring Amplify CLI, creating AWS services, implementing GraphQL API and authorization, and generating dynamic pages with Next.js.

You'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.   <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hybrid Cloud Development with Next.js, AWS, and Tailwind

Today's Talk discusses turning the cloud inside out using GraphQL, highlighting its benefits such as type validation, real-time capabilities, and query efficiency. It explores the use of GraphQL as an API gateway, particularly in the context of microservices, third-party APIs, and blockchain. The talk also covers the efficient indexing and cloud integration offered by GraphQL, as well as building cloud APIs with AWS using API Gateway and AWS AppSync. It concludes with insights on deploying GraphQL APIs with tools like Amplify and CDK, and creating GraphQL APIs backed by Lambda and DynamoDB.

GraphQL is being used in some really interesting ways in parts of the developer ecosystem that you may be surprised to hear about, including Ethereum as well as for building comprehensive graphs from various third party APIs. In this talk, I'll show how to use a similar approach to build a cloud programming interface into AWS with GraphQL and why using this approach makes sense coming from a front end developer looking to leverage their existing skillset. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#aws