Quick Frontend Handbook for Backend Developers

Most backend developers may miss the wave of technological changes brought by Node.js and remain stuck in the era of jQuery. However, in reality, frontend development has been rapidly evolving. This article aims to provide an in-depth introduction from various perspectives, including the historical background, fundamental principles, essential project files, and common knowledge of React and Vue. The goal is to enable any backend developer to quickly transition to frontend development and become a full-stack developer.

Historical Background

Looking back at the history of frontend technology, the rise of Node.js marks a milestone. It not only allows JavaScript to shine on the server-side but also creates favorable conditions for deep integration between frontend and backend.

React, created by the Facebook team, is highly acclaimed for its emphasis on component-based development. Reviewing the evolution of React, its fundamental principles include concepts such as virtual DOM and component lifecycle. Together, these factors contribute to why React has become a gem in today’s frontend landscape.

Vue, created by Evan You, has gained popularity due to its simple and user-friendly API, as well as its progressive nature. We will unveil Vue’s design philosophy, similarities, and differences with React. Exploring how Vue’s flexibility and intuitiveness bring joy to development is worth delving into.

Fundamental Principles

In the early days, browsers did not support JS modules, and large web projects had to be concatenated into a single script before execution. Node.js implemented its module system based on the CommonJS specification for server-side modularization, while the browser’s module system was based on the ES6 module specification. CommonJS was designed for JS modularization on the server-side, and ES6 modules were designed for JS modularization on the browser side. This led to the development of bundling tools responsible for packaging JS into browser-readable code, such as Webpack, Rollup, Parcel, etc. The commonly used Vite uses Rollup as its bundling tool. React’s Babel, on the other hand, can transform JSX into corresponding standard JS code.

Compared to the frontend in the jQuery era, the introduction of virtual DOM significantly improves the development efficiency of modern frontend. Virtual DOM is the core of React and Vue, an abstraction of the real DOM represented as a JS object. It allows frontend developers to focus on data changes without worrying about DOM operations; the virtual DOM automatically updates the DOM for us.

In Vue3, its core utilizes the Abstract Syntax Tree (AST) to convert templates into JS code, which then generates virtual DOM through JS code. The advantage of this approach is that template compilation work can be completed in advance rather than at runtime, improving runtime performance. After AST, there is a transform process that converts virtual DOM into real DOM. In contrast, React directly transforms JSX into virtual DOM and then converts it into real DOM through virtual DOM. Slightly different, React has four major components, corresponding to four types of VDOM, which is slightly different from Vue’s quantity. Additionally, React has a diff algorithm to compare differences between new and old virtual DOMs, reducing DOM operations and improving performance.

Essential Project Files

Whether it’s Vue or React, both are Node.js projects, and their project structures are similar. We will use Vue3 as an example to introduce its project structure.

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── babel.config.js
├── package-lock.json
├── package.json
└── vite.config.js

In this context, the index.html in the public directory serves as the entry file for the entire project, main.js in the src directory is the entry JS file, and App.vue is the root component of the entire project. The remaining files exist to implement this root component. Files in the assets directory contribute to the styling of the root component, while those in the components directory contribute to its functionality. Files such as babel.config.js, package-lock.json, package.json, and vite.config.js exist to facilitate the overall project bundling.

It’s worth noting that JSON files in the root directory often allow for redefining the default file locations. For example, you can place index.html in the root.

JavaScript and TypeScript

JavaScript was created by Brendan Eich at Netscape in 1995, initially designed as a scripting language to provide dynamic interaction in browsers. In 1997, ECMAScript (ES) was proposed to standardize the JavaScript language specification, ensuring compatibility across different browsers.

The significance of JavaScript further escalated during the Web 2.0 era, and the rise of Ajax technology made asynchronous communication and dynamic page updates possible. Ryan Dahl released Node.js in 2009, enabling JavaScript to run on the server side, allowing developers to use the same language to build the entire application stack.

Frontend frameworks like Angular.js, React, and Vue.js emerged, making JavaScript more efficient and maintainable for building complex Single Page Applications (SPAs). ES6/ES2015 introduced new features such as classes, arrow functions, and modules, enhancing the development experience. Subsequent years saw the release of versions like ES7, ES8, continually refining the language.

TypeScript, an open-source programming language developed by Microsoft, made its first public appearance in 2012. TypeScript is a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript code, but TypeScript provides additional static typing and other features. It introduces static type checking, capturing potential errors during development to improve code maintainability. TypeScript supports object-oriented programming with features like classes, interfaces, and modules, enhancing code structure and readability. It integrates rich tool support, including intelligent code completion, go-to-definition, and refactoring, improving development efficiency. TypeScript has gained widespread recognition and support in the community, with many open-source projects and frameworks providing TypeScript declaration files.

npm, npx, and Yarn

npm is the most commonly used package management tool for Node.js, facilitating the installation, uninstallation, updating, and management of dependencies. Other tools like npx and yarn serve similar purposes.

Vue3 Common Knowledge A simple Vue3 template example

<template>
  <div>
    <h1>{{ greeting }}</h1>

    <p v-if="showMessage">Welcome to Vue 3!</p>

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <input v-model="inputValue" placeholder="Type something..." />

    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue 3!',
      showMessage: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      inputValue: '',
    };
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

input {
  margin-top: 10px;
  padding: 5px;
}
</style>

This example includes the following:

Interpolation: Use {{ greeting }} in the template to insert the value of a variable.

Conditional Rendering: Use v-if to conditionally render elements based on a condition, toggling the display of a message with a button click.

List Rendering: Use v-for to iterate over an array, providing a unique identifier with :key.

Two-Way Binding: Implement two-way binding for an input field using v-model.

Event Handling: Handle button click events with @click.

Scoped Styling: Ensure styles only affect the current component by using the scoped attribute.

Every Vue template follows this structure, consisting of three parts: template, script, and style. The template defines the component’s structure, the script defines its behavior, and the style defines its appearance.

Composition API

Vue 3 introduces the Composition API, offering a more flexible and composable way to organize component logic. By using the setup function, component data and methods are logically organized, replacing the previous data, methods, and so on.

  <script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      increment,
    };
  },
};
</script>

New Reactive API

Vue 3 introduces a new reactive API, including ref, reactive, toRefs, and more, providing finer-grained control over reactivity.

<script>
import { ref, reactive, toRefs } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello, Vue 3!',
    });

    const { message } = toRefs(state);

    return {
      count,
      message,
    };
  },
};
</script>

1. ref： ref is used to create a wrapped reactive object, converting a regular JavaScript value into reactive data. It returns an object with a .value property, and when accessing or modifying the value, you need to use .value.

import { ref } from 'vue';

const count = ref(0);

console.log(count.value);  // Access value
count.value++; // Modify value  

2. reactive： reactive is used to create a wrapped reactive object, converting a regular JavaScript object into reactive data. Unlike ref, reactive can wrap an entire object, and all properties of the object become reactive.

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!',
});

console.log(state.count); // Access value
state.count++; // Modify value

Template Syntax

The template syntax has undergone some improvements in Vue 3, supporting new features such as the ability to use v-if and v-for together, as well as introducing syntactic sugar for v-model.

<template>
  <div v-if="isVisible" v-for="item in list" :key="item.id">
    {{ item.name }}
  </div>
</template>

Using v-model on form elements makes it easy to achieve two-way binding, establishing a connection between form input and component data. This ensures that changes made by the user in the input are automatically reflected in the component’s data, and vice versa.

<template>
  <div>
    <input v-model="message" placeholder="Type something..." />
    <p>You typed: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

Lifecycle Hooks

Vue 3 introduces some new lifecycle hooks, such as beforeUnmount, to provide more granular control over component lifecycle events.

<script>
export default {
  beforeUnmount() {
    console.log('Component will be unmounted');
  },
};
</script>

Below are commonly used lifecycle hooks:

Custom Templates

In Vue, you can use the <template> element to reference a custom template. This is often used to define multi-line HTML templates in components to improve readability. Here’s a simple example:

<template>
  <div>
    <h1>Hello, Vue!</h1>
    <custom-template></custom-template>
  </div>
</template>

<script>
import CustomTemplate from './CustomTemplate.vue';

export default {
  components: {
    CustomTemplate,
  },
};
</script>

In the above example, the <custom-template> element is used to reference a component named CustomTemplate. You need to make sure that this component is registered in the components option so that Vue can render it correctly.

Then, define your custom template in the CustomTemplate.vue file:

<template>
  <div>
    <p>This is a custom template.</p>
  </div>
</template>

<script>
export default {
  // Component logic code
};
</script>

Then, you can use <custom-template> in the main component to reference your custom template.

References

https://vuejs.org/

https://react.dev/

https://github.com/vuejs/core

https://github.com/facebook/react