Course of Migrating to VueJS Progressively

What will you learn in this course?

You will learn to refactor an existing frontend in HTML, CSS, and JavaScript by progressively integrating VueJS.

The migration process will allow "the two worlds" (the legacy frontend and the new one) to coexist until achieving a complete Single Page Application (SPA).

Our final Vue application will be a blog that will obtain data from different external APIs, managing comments and navigation between pages. Along the way, we will learn the concepts of Vue.js that we need for migration.

In addition to the migration process itself, we will see how to solve new challenges posed by SPAs: Deployment in production and Server Side Rendering (SSR) to avoid SEO penalties.

In short, this is an introductory course to VueJS like no other you will find on other platforms: Based on a Real World™️ case where we can't start from scratch or halt the development pace of our frontend 🤟

What exactly will we do?

1. ⚡ We will start from an existing HTML+CSS+JS frontend for a blog that could be generated by any backend such as Spring (Java), Symfony (PHP), etc.
2. 🔗 We will create a widget that will connect to an API to get the temperature of various cities. This will help us see how we start to introduce VueJS without altering the rest of the frontend.
3. 📂 We will refactor the blog's comment management introducing the concept of Vue component.
4. 🎯 We will migrate all the code to a SPA with Vue managed by Webpack.
5. 🗺️ We will start managing routes with VueJS.
6. 🌍 We will bring our project to life by connecting it to an external HTTP API simulating our backend to get all the blog news.
7. 👀 We will optimize our SPA in VueJS for search engines to avoid penalties in SEO. We will apply Server Side Rendering (SSR) thanks to Nuxt to avoid losing content indexing.

Why this course approach?

Many times we find frontend projects served from backend frameworks like Symfony (PHP) or Spring (Java) that are built with jQuery or other libraries, and we want to migrate to a modern framework like Vue.

The solutions we find online are often all or nothing. Either we start new projects from scratch with Vue (🌈 and 🦄), or we find introductions to Vue.js that explain concept after concept without providing practical utility in a Real World™️ use case.

That’s why, in this course, we will approach the migration to Vue starting from an HTML template that could well be served by any backend with a templating system like Twig or JSP.

Who is this course for?

• You are a backend developer but want to learn how things are done today in the frontend to orient yourself towards a fullstack profile.
• You have experience as a frontend programmer and want to catch up without having to be explained the most introductory concepts of HTML, CSS, and JavaScript, such as what an HTML tag is, a CSS class, or a variable in JS.
• You are considering refactoring the frontend of your existing application towards a framework like Vue or React, and you would like to do it in a way that does not slow down the pace of your team’s development.

Related courses

Here are related courses to leverage the knowledge you will gain from this VueJS course and go a step further:

• Create an app with VueJS and Jest applying TDD:
  Learn to use Jest to test your frontend and apply TDD, creating fast and comprehensive tests so you can sleep soundly at night.
• Testing unidirectional dataflow with Vuex and Jest:
  Dive into the world of Vuex. We will see how it helps in the development of applications with a more complex component hierarchy.
  We will test from actions to the router, and even have a TDD session in this context with a backend developer.
• ReactJS: From 0 to deploy following best practices:
  Compare with React. Create your first React application following best practices and take it to production.
  A concise, direct, and practical course for learning as you develop the most common use cases (element listing, detail page, sign-up form…)