DevOps.js

DevOps.js Conf 2024

This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.

Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Atomic Deployment for JS Hipsters

m4dz 

Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.

Scaling large codebases, especially monorepos, can be a nightmare on Continuous Integration (CI) systems. The current landscape of CI tools leans towards being machine-oriented, low-level, and demanding in terms of maintenance. What's worse, they're often disassociated from the developer's actual needs and workflow.Why is CI a stumbling block? Because current CI systems are jacks-of-all-trades, with no specific understanding of your codebase. They can't take advantage of the context they operate in to offer optimizations.In this talk, we'll explore the future of CI, designed specifically for large codebases and monorepos. Imagine a CI system that understands the structure of your workspace, dynamically parallelizes tasks across machines using historical data, and does all of this with a minimal, high-level configuration. Let's rethink CI, making it smarter, more efficient, and aligned with developer needs.

End the Pain: Rethinking CI for Large Monorepos

Juri Strumpflohner

DevOps.js Conf 2022

Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.

We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why is CI so Damn Slow?

Nicholas Yang

Maya Min, a senior software engineer at Microsoft Industry AI, discusses the importance of accessibility testing and its relation to CIDI. WCAG provides guidelines for accessibility compliance, covering various aspects such as color contrast, navigation, and content layout. Maya explores automating accessibility testing through UI components and different testing levels. They recommend xCore and Playwright for end-to-end browser testing and integrating accessibility testing into CI/CD workflows using tools like GitLab and Azure Pipeline.

CI/CD has been essential for any productive web product development and release. However, while accessibility is always an important aspect for any Web product included UI, it is often overlooked or considered as a time-consuming manual step, outside of the CI/CD flow. How can we automate accessibility testing within our CI/CD for better developer experience and team collaboration? What tools can we use to integrate and leverage accessibility compliance in our CI/CD? Join my talk and let's find out.

Accessible CI/CD 

Maya Shavin

React Advanced

React Advanced 2022

Feature flags can be used to mitigate risk in software development by altering the visibility of features to end users. By using flags, you can protect against single points of failure and pivot to a fallback service in worst-case scenarios. Monitoring and managing complexity is crucial, and using feature flags allows for dynamic changes and adjusting values based on proven correctness. Operating in the unknown is inevitable in software development, so it's important to manage complexity and embrace learning. Collaboration is key in making feature failures less painful.

Creating and deploying new software is risky. We've all seen how easily bugs arise, causing software to be poorly delivered or to the wrong people. What's more, depending on how tightly we couple our systems and services, they can interact unexpectedly and unfortunately with existing software or hardware. Beyond unintended consequences, we can also find that people can use our services for nefarious purposes. It's essential to have safety nets in place when things don't go as planned or people attempt to break the rules. In this session, we'll discuss how feature flags can work in both temporary and permanent scenarios to enable you to break the quality triangle and deliver quality promptly.

Keep Calm and Deploy On: Creating Safer Releases with Feature Flags

Jessica Cregg

Today's Talk introduces Reacher, a performance monitoring tool for React and React Native codebases. It highlights the need for catching performance regressions early in the development process and identifies JavaScript misusage as a common source of performance issues. ReaSure, developed by Covstack, is presented as a promising library that integrates with existing ecosystems and provides reliable render time measurements and helpful insights for code review. Considerations for operating in a JavaScript VM are discussed, including JIT, garbage collection, and module resolution caching. Statistical analysis using the z-score is mentioned as a method for determining the significance of measurement results.

As developers we love to dive into performance metrics, benchmarks, compare one solution to another. Whether we enjoy it or not, we’re often required to fix performance issues in our React and React Native apps. But this process is not sustainable and prone to regressions, especially as the app and team grow. What’s worse, those issues are often discovered by your users, making their experience miserable. In my talk I’ll introduce you to Reassure—a performance regression testing library for React and React Native— which happens to be a missing piece in our automated testing and performance suites. Spotting problems before they hit production.

Automated Performance Regression Testing with Reassure

Michał Pierzchała

JS Nation

JSNation 2022

The talk focuses on creating the best JavaScript data grid by categorizing code using abstract syntax trees. Code files are represented as tree structures, allowing for the extraction of different sections. Framework-specific converters generate code examples for Angular, React, and Vue. TypeScript validation and testing ensure code quality and easy updates for framework examples.

At AG Grid, we maintain thousands of code demos, with the same demo in Angular, React, Vue, and Vanilla JS. Additionally, each framework has different variations covering JavaScript, TypeScript, Modules, Packages, Hooks, Classes, Vue 2, and Vue 3. How do we do it? We automate. This session will explain how we start with a single TypeScript version and automatically convert it to every combination we need and finally use Cypress to test the converted example.

Automatically maintaining thousands of code demos across multiple framework variations

Stephen Cooper

We'll be using Node version 14 or 16 and GitHub Actions for continuous integration. We'll create a Lightning Web Runtime application and assemble web components into a single-page app. We'll add code quality tools and explore configuration files. We'll set up testing, create a Git repository, and configure CI workflows using GitHub Actions. Finally, we'll explore bonus tasks such as adding badges to the readme and creating pre-commit hooks with Husky.

Join us for a workshop in which you’ll deploy a simple Node.js app built with Web Components and set up a Continuous Integration (CI) workflow. You’ll learn about the power of the Lightning Web Runtime (LWR) and GitHub Actions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Deploy a Web Component App and Set Up a Continuous Integration Workflow

Philippe Ozil

Welcome to this workshop on CICD in GitLab Actions and Terraform. The workshop covers building workflows from scratch, creating reusable actions and workflows, and destroying infrastructure. It also explores common actions and code reuse, remote composite actions, and centralized repositories. The workshop demonstrates the power of reusable workflows and how they can be called from another workflow. It emphasizes the simplicity and flexibility of using reusable workflows to deploy to different environments.

You will get knowledge about GitHub Actions concepts, like:- The concept of repository secrets.- How to group steps in jobs with a given purpose.- Jobs dependencies and order of execution: running jobs in sequence and in parallel, and the concept of matrix.- How to split logic of Git events into different workflow files (on branch push, on master/main push, on tag, on deploy).- To respect the concept of DRY (Don't Repeat Yourself), we will also explore the use of common actions, both within the same repo and from an external repo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Powering your CI/CD with GitHub Actions

David Rubio Vidal

This workshop covers the debugging process for CI/CD pipelines, including the steps involved and potential points of failure. It emphasizes the importance of good reporting, logging, and artifacts for effective debugging. The workshop also introduces Replay, an open-source time travel debugger, and demonstrates its capabilities for manual and automated testing. Participants are encouraged to reach out for further assistance.

- Causes of failed builds in CI/CD pipelines- Approaches to debugging (reviewing logs, accessing environments, reproducing issues)- Debugging application-related causes (failing tests, failed application builds)- Debugging pipeline-related causes (pipeline setup, environment issues, container issues) <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging JavaScript Apps in CI/CD

Cecelia Martinez

The Workshop introduces Sonar products for code quality and security, including SonarLint, SonarQube, and SonarCloud. It covers setting up SonarLint, configuring rules in SonarCloud, and connecting SonarLint to SonarCloud. The Workshop also explains how to configure GitHub Actions for running tests and generating coverage, and how to use SonarCloud's quality gate and new code analysis. Sonar Cloud supports multiple languages and platforms and has a strong community support system.

In this workshop we will go through all the aspects and stages when integrating your project into Code Quality and Security Ecosystem. We will take a simple web-application as a starting point and create a CI pipeline triggering code quality monitoring for it. We will do a full development cycle starting from coding in the IDE and opening a Pull Request and I will show you how you can control the quality at those stages. At the end of the workshop you will be ready to enable such integration for your own projects. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Bring Code Quality and Security to your CI/CD pipeline

Elena Vilchik

TestJS Summit

TestJS Summit 2021

This workshop provides insights into engineering at Microsoft, highlighting the company's culture of curiosity, learning, and customer focus. It discusses the use of hackathons to generate ideas and overcome challenges in building large-scale products. The workshop also covers technical resources and tutorials on Azure Static Web Apps and Playwright testing framework. It emphasizes the flexibility and powerful features of Playwright for testing and code reuse. The session concludes with information about open positions at Microsoft.

A real-world demo and a playground for Azure Static Web Apps service. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Static Web Apps demo – CI/CD, Deployment and Test Pipeline on Azure

Juarez Barbosa Junior

Vue.js Live Conference

Vue.js London Live 2021

Today's Talk discusses CI and CD success with Vue.js, emphasizing the importance of automation in software delivery. The speaker shares tips applicable to all CI-CD systems and programming languages, explaining the concept of continuous integration (CI) and its role in automatically building and testing changes. Attention to speed, recovery time, and organizational considerations are crucial for CI-CD success. Techniques such as caching and job splitting can improve speed, while automation and security scanning help maintain a secure environment. Ultimately, CI-CD is a team responsibility that enables frequent releases and adaptability to change.

This talk will cover best practices for performance, stability, security, and maintainability of CI/CD pipelines, each supported with practical examples and counterexamples and tailored towards Vue.js developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CI/CD Success for Vue Developers

Zan Markan

DevOps.js Conf 2021

The Workshop covered the topic of CI/CD with CircleCI and included prize draws for participants. CircleCI is a platform for CI/CD that helps test JavaScript code for different browsers and provides configuration alongside the repository. The workshop covered forking repositories, setting up CircleCI, and creating real configurations. Debugging failed jobs with SSH and workflow orchestration were also discussed. Orbs were highlighted as a way to share common config sets and optimize pipelines. The workshop concluded with an assignment to interact with the CircleCI API and a prize draw for participants.

Continuous Integration and Continuous Delivery/Deployment (CI/CD) concepts are increasingly adopted many technology organizations and teams. CI/CD enables teams to establish processes that increase velocity, collaboration and quality of their codebase. CI/CD enables developer &amp; operations teams to break down unnecessary silos and gain a deeper knowledge of their respective arenas. In this workshop the participants will be introduced to the basic fundamentals of Continuous Integration and Continuous Delivery/Deployment. Participants will learn the core principles of CI/CD and have the opportunity to reinforce what they’ve learned in a hands on workshop featuring the CircleCI platform. The workshop will demonstrate CI/CD build configuration, code commits, commit builds, code testing and packaging. The participants will leave with a hands-on experience and understanding of what it takes to CI/CD. Table of contents- Introduction to the topic of CI/CD, and motivation for it- How different kinds of JavaScript projects are built and deployed (from static sites to APIs)- Overview of common manual steps &amp; how we might automate them- Implementing a CI/CD pipeline from 'scratch'- Overview of CircleCI orbs- Testing across multiple versions of Node- Debugging builds with SSH- Caching dependencies- Security / vuln scanning- Deploying to various outlets Prerequisites- Code and git installed- GitHub account <a href="https://github.com/CircleCI-Public/cicd-workshop-js" target="_blank">github.com/CircleCI-Public/cicd-workshop-js</a> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CI/CD 101 with CircleCI

Angel Rivera

Tibor Blenici, a languages developer since 2016, will be our speaker today. To start the presentation, a poll was conducted to determine if participants use static analysis in their CI/CD pipelines. Static analysis works by analyzing the syntax and semantics of code. Control flow analysis and graphs are used to detect bugs in code. Taint analysis is a form of data flow analysis that tracks how data flows through a program. SonarQube is a free service for 15 popular languages, while SonarCloud is free for 24 languages for open source projects.

CI/CD pipeline became the norm in software development. So is linting, which is a basic form of static analysis. In this webinar I would like to demonstrate how you can go beyond simple linting and improve your pipeline to provide additional insights into your code and allow you to deliver more reliable and safe applications. Prerequisites:Familiar with CI/CD concepts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Make your CI/CD pipeline smarter with static analysis

Tibor Blenessy

The Fruit Loops team at ING aims to simplify the lives of front-end engineers by introducing pipelines. They started with an Angular pipeline and then introduced a Polymer pipeline based on apps and web components. The ING web CLI and Azure DevOps were used to create pipelines that provided agility, freedom of choice, scaling, and autonomy to teams. The key takeaway is to choose the right drivers to fit your organization's needs when implementing pipelines.

Within ING we have been dealing with JS/FE for quite some years now. Starting with nothing we evaluated the CI/CD process for this, via multiple stages into what it is right now. I will go along these stages to inspire you to create a similar process for your own company. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ING’s Journey in Building and Deploying Frond-end Code

Erik van der Voort

This Talk discusses the benefits of microservices and containers for building CI-CD pipelines. It explains how container technology enables portability and scalability. The challenges of microservices include network communication and testing in isolation. The Talk introduces Tacton, a cloud-native CICD pipeline for Kubernetes, and highlights the use of GitOps and Argo CD. It also discusses the importance of maintaining referential integrity between microservices and the evolving role of operators in the DevOps world.

Microservices present many advantages for running modern software, but they also bring new challenges for both Deployment and Operational tasks. This session will discuss advantages and challenges of microservices and review the best practices of developing a microservice-based architecture.We will discuss how container orchestration using Kubernetes or Red Hat OpenShift can help us and bring it all together with an example of Continuous Integration and Continuous Delivery (CI/CD) pipelines on top of OpenShift.

How to Build CI/CD Pipelines for a Microservices Application

Sasha Rosenbaum

The Talk discusses how to increase app confidence using CICD and infrastructure as code. It explores different types of testing, including smoke tests, and the benefits of continuous deployment. Common post-deployment failure reasons are identified, and the importance of quick smoke tests is emphasized. The Talk also highlights the use of infrastructure as code to deploy and test applications, and the value of smoke testing Kubernetes deployments. The Q&A session covers the depth of smoke tests and the role of quick smoke tests in ensuring application functionality.

Ever run code in CI/CD and builds pass only to fail during deployment? This presentation will discuss the advantages of Smoke Test patterns in CI/CD pipelines using Infrastructure as Code (IaC). Learn how teams can leverage automation to ensure apps are tested live in target environments which provide valuable insights pre-deployment. Angel will demonstrate how to leverage IaC to provision infrastructure, deploy apps, test then destroy all the resources created in a single CI/CD pipeline run. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Increase App Confidence Using CI/CD and Infrastructure as Code

This talk provides an introduction to CI/CD, discussing its key components and how to succeed with it. It emphasizes the importance of speed, safety, and scaling in CI/CD, highlighting the need for unit tests, value stream management, metrics, and addressing deployment challenges. The talk also emphasizes the continuous nature of DevOps and the importance of gathering feedback and releasing changes to a subset of users.

Software delivery is a top priority for organizations that own software, yet it remains one of the most challenging problems enterprises face today. Continuous integration (CI) and continuous delivery (CD) are software practices that allow organizations and teams to deliver code to customers quickly, safely, and repeatedly. Whether it's to improve development, operations, or security, CI/CD pipelines give engineers and teams more time to work on things that matter and less time struggling with the risk, standards, and velocity of deployments. Join this session to learn about the components of CI/CD and how to build and scale pipelines for the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Get CI/CD Right in 2021: A Guide to CI and CD

Tiffany Jachja

GitLab supports the entire DevOps cycle and uses tools like YesLint, Jest, Docker, and Kubernetes. Cache and validation are major challenges in DevOps. GitLab's auto DevOps feature simplifies Docker, Kubernetes, and Helm. Customization and advanced options are available in GitLab. GitLab's pipeline allows for optimizing job dependencies and continuous improvement. The average duration of front-end build pipelines is under 10 minutes for most people. Running a build and pipeline process in GitLab involves job calculations, runner setup, and hidden logic. GitLab can help with running front-end in Kubernetes and has a DAG visualizer. Dealing with flaky tests in the frontend is a challenge in GitLab pipelines.

Introducing CI/CD to your project might be a challenging process. In GitLab we value iteration as one of our key values, and in spirit of iteration we will be happy to share how GitLab could help you to gradually work on bringing your project to CI/CD heaven. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build your JS Pipeline in Incremental Fashion with GitLab

Illya Klymov

This Talk on CICD covers various use cases, challenges, and best practices. It emphasizes the importance of people and learning in CICD, as well as the complexity of coordinating teams and managing infrastructure. The speaker shares insights on frontend development, microservices, and security considerations. The Talk concludes with discussions on Jenkins files, bash scripts, and the challenges of DevOps in organizations.

Automation of a single monolithic app is pretty straight-forward. Split it into a frontend and backend and it's still manageable. Throw in more components or infrastructure and suddenly you're scratching your head at why a build ran - or didn't run. How many pipelines do I need? How many git repos should I have? Let's walkthrough use cases from small teams who own their entire stack to organizations with central IT units that manage shared infrastructure. Learn which scenarios and criteria determine how to slice but not spaghettify your pipelines. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Infra vs Apps – Where are my Pipelines?

Julie Ng

JSNation Live

JSNation Live 2021

The DevOps 2.0 Workshop covers topics such as CI/CD, Git workflows, Docker deployment, and automated browser testing. It emphasizes the importance of continuous improvement, transparency, and adaptation in CI/CD setups. The workshop also highlights the use of pipelines for feature branches, pull requests, and vulnerability fixes. Additionally, it explores visual testing, smoke tests, and SEO metrics for application monitoring and optimization.

Buddy is a CI/CD tool that lowers the entry threshold to DevOps simplifying pipeline configuration to bare minimum, enabling teams to embrace CI/CD with no dedicated engineers. During the presentation, we will show you how to create a fully functional JavaScript pipeline and adapt it to the workflow in your company in a couple of minutes. We are going to put special emphasis on features that help secure code quality, share some tricks that speed up the deployment (trigger conditions, cache, Docker, changeset deployments, parallelization), and show you how to preview deployed websites with no server infrastructure using Sandboxes – a unique feature of Buddy. Prerequisites:Code , Git installedGitHub account <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#ci cd