The application that accompanies the book has been built using free software and APIs and will not require you to purchase anything. However, there are some specific technical requirements needed for you to follow along:

• Visual Studio Code or another equivalent IDE (integrated development Environment)
• Volar Visual Studio code extension
• A browser updated to the latest version (I suggest Chrome or Firefox)
• Node 16+
• GIT or a Git GUI (Graphic user interface) such as GitKraken installed on your machine

Learning a new language or framework is not an easy task. There are plenty of free resources, such as documentation, blogs, and YouTube videos on the internet, but I believe learning a new tech requires practice, and there is no better way to achieve this than by building a production-ready, performant, scalable social media application together.

The application is going to be very similar to the social media platform X (formerly Twitter). We will start from a clean canvas and slowly add more features and functionality until the app is fully working and ready to be added to your portfolio and showcased at your next job interview.

Each chapter will have a set of sections that will help you navigate the book. This will not only ensure that you can always follow along and have a clear understanding of the scope of the chapter, but it also allows you to use the book as a reference after you have read it all and allows you to jump to a specific chapter if you need...

The JS ecosystem is not shy of frameworks and libraries, but even with this extensive choice, they mostly share the same core values and areas. These are the core parts of a web application and no matter which framework you use to write your application, you will have to know this and have a basic understanding of what they mean.

The pillars of a web application are as follows:

• User interface (UI): This refers to the elements displayed on the screen from which a user can interact. In simple words, anything you can see or interact with on the internet is part of the UI. This core area of web development is usually achieved with basic HTML/CSS, vanilla JS (that is a different way to say plain JS), or a framework such as React, Vue, or Angular. In our case, this will be achieved using Vue.js 3.
• Data fetching: Data fetching is at the core of any web application. No matter how small your site is, it is going to require you to fetch some...

We have reached the final section of our introductory discussion and we are almost ready to start coding. This section is going to introduce the concept of component-based architecture. Even if you are already familiar with this topic, I suggest you continue reading this chapter as it will support some of the decisions we will make later in the course of the book.

In this section, we are going to cover how web development worked before this concept was introduced and we will then discuss how component-based architecture has shaped the web development industry as we know it.

One page at a time

If you have been a developer for as long as I have been, you have probably worked with languages and frameworks that were not flexible in the way the pages were defined and developed. Using .NET and PHP a few years ago would have meant that each web page was created using a single file (disclaimer: some languages had the definition of “partials”...

It is now the end of the chapter and at this stage, you should have gained some knowledge of what we will achieve in this book and the methods that we will be using.

We have learned about our Companion App and what that will include. We have quickly touched upon the chapters’ structure and how they will support you in your learning journey, and we have finally introduced important topics such as component-based architecture, atomic design, and the core areas of web development that are the foundation of any frontend project.

In the next chapter, we will start to learn about the foundation of Vue.js and its core fundamentals and start to give life to our Companion Application.