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.

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.

Available in Español

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.

3. CI-CD Dimensions and Speed Considerations

Short description:

Now that the app is built and tested, the deployment phase begins. CI-CD success requires attention to multiple dimensions, including speed, recovery time from failing builds, and organizational speed considerations. Onboarding new team members is also facilitated by the code-based configuration. To improve speed, consider the resources allocated to your CI, such as machine size, and utilize caching techniques to reuse previous work.

That's the CI part of it. But now that we have our app built and tested and ready for primetime with users, we also want to deploy it. And CD is the part of it that actually does the deployment. And, yeah, again, it doesn't matter what environment you're deploying to, it could be a preview environment for your Vue app or it could be a production Kubernetes cluster that you're trying to get this software to or anything in between, really.

But, yeah, the continuous deployment step is that. And as you might imagine, this whole CI-CD thing has many dimensions that we need to essentially be on top of, we need to think of, we need to take care of in order to be successful. And, yeah, we need to be successful in every single one of them because every single one of them can actually hold you back and prevent you from having a good time developing something. So, yeah, in this talk, we will be untangling some of those dimensions and, yeah, breaking them down and talking about tips and tricks for it.

First one, probably most obvious dimension that we can think of is speed. How fast does your CI-CD pipeline run? That's like the most obvious thing you can think of, especially if developers are counting on your CI to actually tell them whether their work is essentially passing all the tests, is successful. As soon as you can get that information to them, the better because they can continue their work, but there's more to speed, much, much more to speed. The other one could be time to recovery from a failing build. If you're thinking that if you're working off a main branch and you merge something that doesn't pass the build, so, the build essentially goes red as opposed to green, you want to get that back to green, back to passing as soon as possible because your main branch is essentially where you can get all the deployment out to your users, to your testers, to your stakeholders. So, yeah, that's another very important facet of speed.

And then there's organizational speed considerations, like time to ship a feature, how long does my team need from getting a mandate to a product manager for a new feature to actually shipping that to users. CI can definitely help you build that continuously and obviously CD can definitely help you get that to users as soon as possible, as soon as it's ready, and, yeah, all the updates as well. And lastly, there's things like you might not think about a speed, but it could help you onboard new team members because, as I said, everything is configured in code, everyone can read YAML, hopefully. So a new team member can then be just pointed to this CICD configuration and tell, hey, these are the environments, everything, all the jobs that we're doing, all the different types of tests. Maybe you're doing unit tests, maybe you're doing integration tests, maybe you're initiating some smoke tests as well. Maybe you're doing like a canary deployment, like a really advanced type of deployment, and a new team member can actually understand what's happening and then ask you questions about individual portions of that essentially pipeline which is all automated, which is beautiful. Anyway, speed. Running things faster. First thing to do is really think about whether you're running things on the right size of machines. So, you've got a developer laptop and that's probably got a number of gigabytes of RAM, a number of virtual processors or threads that you can work with. And if your laptop is building something in a minute and your CI takes five minutes, maybe your CI needs more resources to get more up to speed, literally, to how quickly this might need to work. The second one is things like cache. For example, cache is just reusing things you've already done. For example, node modules, you've run npm install once, maybe if your package.json hasn't really changed, maybe that's enough for now, you don't need to update all the dependencies. Maybe you can just store them and pull them from cache next time so you don't have to take that loading hit each individual moment. Maybe you're using some advanced caching techniques, testing techniques with some testing utilities, and for that maybe you don't want to install everything on your Docker container, maybe you can just use a Docker image which has all of that pre-installed.

4. Speed, Failures, and Signal in CI/CD

Short description:

You can cache and split jobs to speed up the process. Choose which tests to run based on your needs. Recover from failures faster by understanding your builds and debugging them. CI-CD speed should be like an ambulance, fast but maintaining the quality signal.

So these are all the things that you can cache and really kind of help you speed up the whole thing across many runs. Speaking of runs, jobs themselves, so building, testing, various types of testing can also run in parallel. And also they can be split, especially if you've got a long-running integration test suite or a lot of functional tests kind of hit different parts of your application as a user would. You can actually split those within a single test suite across multiple parallel test jobs, which essentially run just a portion of that, which obviously takes the time down quite significantly.

And, of course, you can pick what runs whenever you want to run it. For example, maybe, yes, you want to run your test, maybe you want to run some functional tests, but you don't need to run all of them. You just need to do that minimum part and then do that preview deployment of your website, which is good enough for most use cases. But then when you're kind of ready to merge this to the main branch, get ready for a release, you want to run all the tests.

So that's speed in general. But what about when things don't go as planned? Sometimes you just break things. For that, you really want to recover from failures a lot faster. First one is understanding what's happening to your builds. Like logging everything, being able to kind of get those logs out. This depends on your frameworks, on your tools. But really invest time into understanding them, understanding how to read the logs, how to get that out and just get as much out of your CI-CD. Because there is information in there.

And my favorite thing is actually being able to debug your builds as they fail. So sometimes your environment will fail, something in your environment will fail. With CircleCI, for example, we have this cool feature called SSH debug. So essentially, SSH into that environment and you can see what's going on as your tests have failed. Maybe there's something wrong with the state. Maybe there's something wrong with the database that you're connecting to. And it really helps you quickly debug things. But yeah, speed is fine. We're all trying to get go as fast as possible. But you know what? It's not a race. It's very important, but yeah, it's not a race. And CICD speedwise should be seen more like an ambulance instead. So it should definitely go fast, but still keep that payload, keep that signal alive. So signal meaning the quality of your app that's telling you, hey, all of my tests have passed or some of them have failed.

5. CI-CD Security and Team Responsibility

Short description:

When it comes to security, keeping credentials inside the CICD system and automating security scanning are important. There are also other features and external services beyond the CICD tool that can be integrated. CICD is a team responsibility, and it helps in recovering from failures and enables frequent and error-prone releases. The ultimate goal is to be free to deliver software on your own terms, focus on quality and team happiness, and adapt faster to change.

And yes, obviously when red lights are flashing, when the build is red on your main branch, go fix it as soon as possible. Don't let it wait around for that. Anyway, that speed.

Now, let's think about some other things like security, something that can really slow you down as you're building things. As many of you are probably very aware that, yeah, a security review can definitely kind of slow you down. But there's ways to actually get on top of security with a CICD system as well. First one, most important one is actually keeping the credentials inside of the CICD system and using it to kind of really fine-grain your access control policies and really only allowing whoever has the right permissions to ship or deploy to a particular environment or just keeping the credentials out of your Git repos at the very least. That's something you can do. And the next one is automating security scanning. You know how vulnerable, how easy it is to kind of get some vulnerable or even compromised library into your application and there's tools available that will just kind of tie into your CICD flow and automate all of that for you so that you're not leaking your customer's credit card numbers or passport numbers or what not from the front end, which is just horrid. So, yeah, these are the things that you can think about when you're thinking about security.

But yeah, there's more and more to the ecosystem than just the CICD system and there's features beyond the CICD tool. First, obviously, there's the features that are built in, so is there something available that you're not using? It's worthwhile just kind of reading the release logs, release notes every couple of months and seeing, hey, maybe they've released something cool and we can actually utilize this and I think about whether there's any external services that you're using, maybe product project management tools that you're using that you could be integrating with and just tying that into your CICD flow and really informing everyone of your process. And of course, it's never a DevOps talk if we're not talking about the team. And yes, I mentioned that your configuration is definitely a good onboarding aid, but also it's worth reiterating that CICD is never a single person's responsibility. It's always a team responsibility and just kind of get everyone on board to at least understand what's happening, if not be able to introduce and suggest improvements to the whole process because that's gonna benefit you all. And obviously we've initiated deployment in the beginning and sometimes everything goes fine, but sometimes it doesn't. Things will happen that you're gonna break some software, gonna break some deploys, and you will need to kind of get stuff back to a working shape. Luckily, we have a time machine because everything is tied to a commit. We can just revert to a previous commit and restart that process, and your CICD process can definitely help you recover a lot faster than you would have to... that you could ever think about doing it manually. And yeah, another thing is because we're doing all those testing, all this testing, all those verifications all the time, we can actually ship a lot smaller changes a lot more frequently and have releases which are a lot less error prone because there's just less stuff to do. And, yeah. Best thing for this is, best thing to prepare is to plan and to actually prepare and practice to understand, hey, we've broken something, how do we get it back? Let's do a dry run. Let's deploy it back to the staging environment, see how this will fare, how the team is ready. Ultimately, though, to me, to be successful with a CICD system, it means to be free. And it means to be free that you're able to deliver software on the terms that you really control. And that's the best thing you can get out of it. And you can focus on quality, you can focus on team happiness. And you can always adapt faster to change because you're able to ship constantly and release things a lot faster than you would have without the whole kind of... a greenhouse approach. And yeah, as a benefit you have this self-documenting, build, test and deploy process which anyone can just kind of read and utilize and obviously recover from failure a lot faster because a, everyone understands the whole process and b, it's all reproducible. My name is Anne Marken. This was a talk on succeeding with CI-CD for Vue.js.

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
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
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 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
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
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.

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.
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
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.
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.