CI/CD Success for Vue Developers

Rate this content
Bookmark

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.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

CI stands for Continuous Integration, which involves automatically building and testing code changes as they are pushed to a remote repository. CD stands for Continuous Deployment, which involves automatically deploying the built and tested code to a production or other environment.

Automation is crucial in CI/CD because it ensures that processes are reproducible and consistent, reducing the risk of human error and allowing for faster and more reliable software delivery.

CI/CD can speed up software development by automating builds and tests, reducing the time developers spend on manual tasks, and providing quick feedback on code changes. It also allows for parallel testing and caching, which further speeds up the pipeline.

Best practices for optimizing CI/CD pipelines include using the right size of machines for builds, implementing caching for dependencies, running tests in parallel, and selectively running tests based on the stage of development.

CI/CD can help with security by automating security scans and keeping credentials secure within the CI/CD system. It can also enforce fine-grained access control policies to ensure only authorized personnel can deploy code.

If a build fails, it's important to understand the logs and debug the environment. Tools like CircleCI's SSH debug feature can help you investigate and fix issues quickly.

CI/CD facilitates team collaboration by providing a self-documenting process that is easily understandable. It allows team members to read and understand the CI/CD configuration, making onboarding easier and encouraging collective responsibility for the pipeline.

Configuration is crucial in CI/CD as it codifies the entire process, making it reproducible and consistent. It typically involves specifying the environment and the steps needed to build, test, and deploy the application.

Yes, CI/CD can help in recovering from deployment failures by allowing you to revert to previous commits and redeploy from a known good state. This makes recovery faster and more reliable.

Continuously integrating and deploying smaller changes reduces the risk of errors, makes it easier to identify and fix issues, and allows for faster feedback and iteration, leading to more stable and reliable software releases.

Zan Markan
Zan Markan
23 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to CI/CD Success with Vue.js

Short description:

Today we'll be talking about CI and CD success with Vue.js. The difference between the two options is down to automation. Software delivery lifecycle can be compared to growing and tending crops. Manual work gets the job done, but it's not as reproducible.

♪♪♪ All right. Hello. Thanks for having me over. So, today we'll be talking about CI and CD success with Vue.js in particular. But first, let's start with a thought exercise. Think about a time when you were getting ready to release some software. Maybe it's something you'd worked on for the past week. Maybe it's the past four weeks. Maybe it's the past six months. Hopefully not much longer than that.

Anyway, everything has been tested, everything is ready. It's just waiting for you to press this big red button, which then initiates the deployment process and will get the software in the hands of your user. So, without further ado, you press that big red button. It has a nice audible click. It's very satisfying, nice satisfying tactile feedback as well. Like only a nice mechanical keyboard can have. And then it's off to the races. The software is out of your hands and things are being deployed. And in a matter of minutes, maybe hours, depending on what you're actually deploying and how it's actually done, this software will be actually used by your users. And all you can do is hold your breath and sit in silence.

And then you have two options. Option one. You keep holding your breath, sweating, and nervously waiting for it to actually start blowing up, some errors showing up, and your users complaining. Or option B, pack up, go home, because it's 4 pm on a Friday and you've done your job. I certainly prefer option B, partly because it is 4 pm on a Friday when I'm recording this, but also because it's a nicer thing to do if you want to enjoy your weekend. Anyway, the difference between the two, though, it's really just always down to automation, and it's always down to automation, from software to processes, manufacturing, and, yes, also agriculture. Well, we're not talking about agriculture today. I do like to compare software delivery lifecycle with the process of growing and tending for crops. So if you imagine you have a field like this, you can have hundreds of people working that field, planting everything, picking everything manually, watering, weeding, all those things. Doing manually by hundreds of people, it gets the job done, but it's not as reproducible as one might want.

2. CI-CD Success with Vue.js

Short description:

CI-CD systems, like a finely tuned greenhouse with automated processes, can greatly improve efficiency. However, it's important to remember that any issues that arise are typically due to human error. The speaker, En Marken, a developer advocate at CircleCI, shares tips and tricks applicable to all CI-CD systems and programming languages. En Marken explains the concept of continuous integration (CI) and its role in automatically building and testing changes pushed to remote repositories. The CI process includes running tests, security scanning, and producing a built application in an isolated environment.

Of course, you can do it with a lot fewer people if you employ some tractors, if you get some irrigation systems in place, or take this a few dozen steps further and put everything in a greenhouse with controlled atmosphere, controlled lighting, controlled nutrients that are directly fed to each individual plant, and I like to imagine that these robot hands, they use computer vision to pick the plants at their best ripeness for essentially selling them at optimal profit. And that's what I like to compare to a really finely tuned CI-CD system.

Everything is automated. Everything is out of your hands and things just work. Until, of course, they don't. And while I'm not expecting your CI-CD system and the robots in a greenhouse to suddenly rise up and turn into dinosaurs that try to kill us all, they can definitely A, kill your crops, and B, your CI-CD system can definitely ruin your day if you've deployed something that's not really deployable. But yeah, fret not. It's never the machine's fault. It's always us, you know. It's always the humans that kind of program these machines, and it's our fault to actually break things.

And with that thought in mind, my name is En Marken. I'm a developer advocate at CircleCI, and I do break a lot of things. And I'm often the problem between keyboard and chair. This talk is titled CI-CD Success with Vue.js and for Vue.js Developers. But the tips and tricks I'm handing out here are essentially universal for every CI-CD system, for every programming language, whatever you're building, however you're doing it. Most of the things will always hold true. As I mentioned, I work for CircleCI. We've been around for 10 years. We're the world's leading CI-CD provider and a huge number of teams all over the world working on so many different platforms, programming languages with programming paradigms are using us, including parts of Vue.js as well, the open source projects, which is really cool to be now talking to you about this. So yeah, this is not to talk about CircleCI. This is a talk about generally CI-CD best practices, optimization, tips and tricks to help you get the most out of it. But as we're talking about CI-CD, what does it actually stand for? What does it really mean?

So it's a double acronym where CI stands for continuous integration. And this is the practice of getting all the changes automatically built and tested as they are pushed to remote repositories by developers. So if you're working on a GitHub project with a team, every time you push a commit, the CI process will essentially run all your tests, do all verifications that you might have, like security scanning, static code analysis, and ultimately produce a built application. In addition to that happening automatically, everything is also happening in isolation. So that's where the greenhouse analogy comes from. Because all the builds, all the tests, they are run in virtual machines or Docker containers, which are spun up from scratch essentially. So you just specify the type of environment you want and then all the necessary steps. Everything is also configured with a configuration file which lives inside of the same repository, at CircleCI, we use YAML, but you could use any other format for that. But ultimately, yeah, you codify, everything is tied to the same commit and everything is reproducible.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance