В наши дни в Интернете существует бесконечное количество интерфейсных фреймворков javascript, и хотя кажется, что это дает нам больше возможностей, выбрать один из них становится все труднее и труднее. В наши дни многие разработчики используют три огромных фреймворка (Vue, React, Angular), и всегда ведутся споры о том, почему один лучше другого.
Когда я начал веб-разработку, как и многие другие разработчики, я выбрал JQuery. Это было легко и хорошо задокументировано, и было много примеров. Это заставило сложные задачи казаться легкими. Но самым большим уроком для меня было узнать, почему мне нужно использовать JQuery, и, надеюсь, следующие причины помогут вам выбрать структуру для вашего следующего проекта.
Зачем нужно использовать фреймворк?
Использование фреймворка не всегда является решением. Вам нужно обосновать, почему фреймворк необходим для вашего проекта. Хотя написание приложения с нуля кажется сложным, это может быть важно для таких факторов, как производительность или простота. Например, чтобы создать реагирующее приложение для отображения списка нечетных чисел, вам нужно иметь узел js, создать реагирующее приложение, и ваш код будет выглядеть следующим образом:
import React from 'react';
const OddNumbers = () => {
const numbers = [1, 3, 5, 7, 9];
return (
<ul>
{numbers.map(number => (
<li key={number}>{number}</li>
))}
</ul>
);
};
export default OddNumbers;
import React from 'react';
import OddNumbers from './OddNumbers';
const App = () => {
return (
<div>
<OddNumbers />
</div>
);
};
export default App;
Но посмотрите на то же самое в javascript, и он не требует NodeJs или NPM или загрузки какого-либо пакета.
<div id="container"></div>
const numbers = [1, 3, 5, 7, 9];
const container = document.getElementById('container');
const list = document.createElement('ul');
for (let i = 0; i < numbers.length; i++) {
const item = document.createElement('li');
item.innerHTML = numbers[i];
list.appendChild(item);
}
container.appendChild(list);
Как вы видите, от небольшого проекта к крошечному проекту можно использовать ванильный javascript, и было бы намного лучше и быстрее, если бы фреймворк не был разработан для простого проекта или решения небольших проблем.
Где вы собираетесь использовать этот фреймворк?
Это отличный вопрос, на который необходимо ответить. Если вы работаете над домашним проектом, на который нацелены, несколько человек проявляют творческий подход и даже изучают новый фреймворк, почему бы и нет! Да, все зависит от масштаба вашего проекта и от того, где вы планируете его реализовать. На мой взгляд, для небольших проектов такой фреймворк, как Angular, даже не имеет смысла. Посмотрите на следующий пример, который представляет собой программу todo в Angular.
Как видите, это приложение состоит из двух частей: первая часть — HTML, а вторая — TypeScript.
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="newTodoText" name="newTodoText">
<button type="submit">Add Todo</button>
</form>
<ul>
<li *ngFor="let todo of todos">
{{todo.text}}
</li>
</ul>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
todos: any[] = [];
newTodoText = '';
constructor() { }
ngOnInit(): void {
}
addTodo() {
this.todos.push({text: this.newTodoText});
this.newTodoText = '';
}
}
Теперь давайте взглянем на эту программу todo в реакции, которая состоит только из одного файла. Как видите, синтаксис намного проще. Однако наличие всего в одном файле означает, что при плохой практике вы можете получить огромные файлы, которые могут быть нечитаемыми.
import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [newTodoText, setNewTodoText] = useState('');
function handleSubmit(event) {
event.preventDefault();
setTodos([...todos, { text: newTodoText }]);
setNewTodoText('');
}
return (
<div>
<h1>Todo App</h1>
<form onSubmit={handleSubmit}>
<input type="text" value={newTodoText} onChange={event => setNewTodoText(event.target.value)} />
<button type="submit">Add Todo</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo.text}</li>
))}
</ul>
</div>
);
}
export default App;
Теперь для последнего раунда давайте проверим это приложение todo в Vue, и вы легко увидите, что есть сходство с React.
<template>
<div>
<form @submit.prevent="addTodo">
<input type="text" v-model="newTodoText" />
<button type="submit">Add Todo</button>
</form>
<ul>
<li v-for="(todo, index) in todos" :key="index">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [],
newTodoText: ''
}
},
methods: {
addTodo() {
this.todos.push({ text: this.newTodoText });
this.newTodoText = '';
}
}
}
</script>
Все эти фреймворки способны достичь одного и того же, но вам, как разработчику, нравится или не нравится их структура или способ их реализации. Например, я обнаружил, что существует так много возможностей для создания компонента Angular, где Vue можно реализовать на существующем веб-сайте HTML, добавив следующий тег script в заголовок вашего файла HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Как трудно учиться
Ни один проект не имеет неограниченного времени. Ваши навыки работы в команде играют важную роль при выборе фреймворка. Как и в случае с Typescript, вы должны учитывать, сколько времени вашей команде нужно, чтобы повысить свою квалификацию, чтобы использовать его. Но есть и хорошие новости: у всех крупных фреймворков есть сотни примеров и документации в Интернете. Например, в настоящее время в репозитории GitHub у React более 2 миллионов. Это богатые ресурсы, которые могут значительно упростить использование этой платформы. Поддержка и популярность важны, потому что вы можете выбрать фреймворк, который удивителен, но не получит поддержки со стороны сообщества. В настоящее время React поддерживается Facebook, Angular — Google, а Vue — сообществом открытого исходного кода. Эти крупные технологические компании будут поддерживать и тратить деньги на расширение функциональности этих фреймворков.
Каков мой первый выбор?
Я решил использовать Vue для своих проектов. Некоторые из ключевых особенностей Vue.js, которые делают его хорошим выбором для создания веб-приложений, включают:
Реактивные компоненты: Vue.js использует реактивную систему для обновления представления при изменении данных. Это означает, что при изменении данных представление автоматически обновляется, чтобы отразить изменения.
Виртуальный DOM: Vue.js использует виртуальный DOM для повышения производительности приложения. Это позволяет ему обновлять только те части представления, которые изменились, а не перерисовывать все представление каждый раз при изменении данных.
Компоненты: Vue.js использует архитектуру, основанную на компонентах, которая позволяет вам разбить ваше приложение на более мелкие, повторно используемые части. Это упрощает поддержку и масштабирование приложения.
Простота использования: Vue.js разработан так, чтобы его было легко изучать и использовать даже для разработчиков, которые плохо знакомы с фреймворками JavaScript. Он имеет простой синтаксис и небольшой размер, что позволяет легко интегрировать его в любой проект.
В целом, Vue.js — это мощная и простая в использовании среда JavaScript, которая может стать отличным выбором для создания веб-приложений.
