От автора: я подумал, что не хочу тратить на это вечность, и в основном мне нужен был предлог, чтобы изучить несколько новых фреймворков, поэтому я буду создавать одно и то же приложение 5 раз. Я планирую сделать приложение для создания заметок, в котором пользователи могут писать все, что захотят, и сохранять это в виде разных заметок.
В некоторых из этих фреймворков я уже создавал подобные приложения раньше, но с другими я либо никогда не делал этого раньше, либо вообще не использовал, так что это будет более сложной задачей.
Создание приложений
jQuery
Я буду использовать jQuery, чтобы упростить свое приложение без фреймворка. Я начал с создания базовой файловой структуры и создал index.html. Файловая структура, если вам интересно, такова: у меня есть таблица стилей SCSS, которую я скомпилирую в CSS, и на этом пока все. На данный момент html выглядит так, но позже я расскажу о нем подробнее:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/styles.css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>Notes App</title> </head> <body> <div class="container"> <header> <h1>Notes App</h1> </header> <main> <div class="note"> <form> <input required type="text" id="note-title" placeholder="Note Title" /> <textarea id="note-body" placeholder="Note Body"></textarea> <input type="submit" id="note-submit" title="Add Note" /> </form> </div> </main> </div> </body> </html>
Таблица стилей выглядит так:
body { height: 100%; width: 100%; margin: 0;
} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }
}Затем я компилирую код с помощью sass scss/styles.scss:css/styles.css, и мы готовы приступить к написанию кода JavaScript. По сути, все, что нам нужно сделать, это добавить новый div в DOM с парой дочерних элементов при отправке формы и сохранить его в локальном хранилище. Вот что у меня получилось:
let notes = []; $(document).ready(function () { if (localStorage.getItem("notes")) notes = JSON.parse(localStorage.getItem("notes")); setNotes();
}); $("#note-submit").click(function (e) { let noteTitle = $("#note-title").val(); let noteDesc = $("#note-body").val(); let note = { title: noteTitle, desc: noteDesc } notes.push(note); console.log(notes); localStorage.setItem("notes", JSON.stringify(notes)); setNotes();
}); function setNotes() { notes.forEach((note) => { $("main").prepend(` <div class="note"> <h4>${note.title}</h4> <span>${note.desc}</span> </div> `); });
}Вероятно, это не лучший код, который мог бы быть, но он имел для меня наибольший смысл, и я решил, что в этом идеальном коде не будет необходимости. Тем не менее, это было намного проще, чем я ожидал, учитывая предыдущий опыт, и мне это действительно нравится. Единственное, что, вероятно, будет отличаться в других приложениях, — это порядок заметок, потому что я просто не мог позаботиться о том, чтобы они всегда добавлялись перед формой, но после других заметок. При этом, наверное, сейчас, когда я думаю об этом, это будет не так уж сложно.
Angular
Это немного глупо, учитывая, как много вы можете сделать с Angular, и как мало мы на самом деле делаем, но вопреки впечатлению, которое я мог создать ранее, мне действительно нравится Angular, мне просто не нравится, каким он может быть не-модульным в сравнении с чем-то вроде React. В любом случае, пора сгенерировать проект:
$ ng new angular
Это буквально все, что нам нужно сделать для начала, разве не прелесть Angular CLI? В любом случае, я напишу в основном тот же код для базовой структуры приложения:
<div class="container"> <header> <h1>Notes App</h1> </header> <main> <div class="note" *ngFor="let note of [0, 1, 2, 3]"> <h4>Note Title</h4> <span>Note Body</span> </div> <div class="note"> <form> <input required type="text" #noteTitle placeholder="Note Title" ngModel /> <textarea #noteBody placeholder="Note Body" ngModel></textarea> <input type="submit" #noteSubmit title="Add Note" /> </form> </div> </main> </div>
Это может быть спорным моментом, но я собираюсь реализовать всю логику для приложения в самом компоненте приложения, без каких-либо дочерних компонентов. Это просто сделает приложение немного проще в целом. В любом случае, давайте использовать в основном тот же стиль, что и раньше:
.container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }
}В любом случае, мы можем просто написать код, аналогичный тому, что мы делали раньше:
import { Component } from '@angular/core'; type Note = { title: string; desc: string;
} @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']
})
export class AppComponent { notes: Array<Note> = []; title!: string; body?: string; constructor() { const data = localStorage.getItem("notes"); if (data) this.notes = JSON.parse(data); } submitForm() { let note: Note = { title: this.title, desc: this.body || "" } this.notes.push(note); localStorage.setItem("notes", JSON.stringify(this.notes)); }
}После этого мы можем вернуться в шаблон и исправить логику заметок:
<div class="container"> <header> <h1>Notes App</h1> </header> <main> <div class="note" *ngFor="let note of notes"> <h4>{{note.title}}</h4> <span>{{note.desc}}</span> </div> <div class="note"> <form #addNoteForm="ngForm"> <input required type="text" placeholder="Note Title" [(ngModel)]="title" name="Title" /> <textarea placeholder="Note Body" [(ngModel)]="body" name="Body"></textarea> <input type="submit" #noteSubmit title="Add Note" (click)="submitForm()" /> </form> </div> </main>
</div>React
Я думаю, вероятно, это будет более сложной задачей, из-за природы React. React спроектирован так, чтобы быть более модульным и легким, чем другие фреймворки, но в некотором смысле он более сложен для небольших приложений из-за своей структуры. Во всяком случае, я начал с создания своего приложения с помощью собственного шаблона sammy-libraries:
$ yarn create react-app react-app --template sammy-libraries
У меня была ошибка, которая иногда возникает, когда node sass (который я все еще использую в основном потому, что dart sass имеет медленное время компиляции для React, по моему опыту) отказывается компилировать мой код sass, поэтому я просто удалил node_modules и yarn.lock а потом снова запустил yarn. В любом случае вот что я сделал. Я начал с того, что сделал index.scss таким же, как и styles.scss в первом приложении, а затем в своем компоненте приложения я воссоздал базовую структуру приложения:
import React, { useEffect, useState } from "react";
import NotesList from "components/NotesList";
import { NoteType } from "components/Note";
//import "scss/App.scss"; function App() { const [notesList, setNotesList] = useState<NoteType[]>([]); const [noteTitle, setNoteTitle] = useState<string>(""); const [noteDesc, setNoteDesc] = useState<string>(""); useEffect(() => { const data = localStorage.getItem("notes"); if (data) { setNotesList(JSON.parse(data)); } }, []); useEffect(() => { localStorage.setItem("notes", JSON.stringify(notesList)); }, [notesList]) const addNote = (event: React.FormEvent<HTMLFormElement>) => { let note: NoteType = { title: noteTitle, desc: noteDesc, }; setNotesList([...notesList, note]); event.preventDefault(); }; const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => { setNoteTitle(event.currentTarget.value); }; const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => { setNoteDesc(event.currentTarget.value); }; return ( <div className="container"> <header> <h1>Notes App</h1> </header> <NotesList addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} notes={notesList} /> </div> );
} export default App;Наш код пока ничего не делает, поэтому давайте добавим другие компоненты. я сделал 3 компонента в отдельной папке.
NotesList.tsx:
import React from "react";
import AddNote from "components/AddNote";
import Note, { NoteType } from "components/Note"; type NotesListProps = { notes: NoteType[]; addNote: (event: React.FormEvent<HTMLFormElement>) => void; changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
}; function NotesList({ notes, addNote, changeTitle, changeDesc }: NotesListProps) { return ( <main> {notes.map((note) => { return ( <Note note={{ title: note.title, desc: note.desc, }} /> ); })} <AddNote addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} /> </main> );
} export default NotesList;Note.tsx:
import React from "react"; export type NoteType = { title: string; desc: string;
} interface NoteProps { note: NoteType;
} function Note(props: NoteProps) { return ( <div className="note"> <h4>{props.note.title}</h4> <span>{props.note.desc}</span> </div> );
} export default Note;AddNote.tsx:
import React from "react"; interface AddNoteProps { changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; addNote: (event: React.FormEvent<HTMLFormElement>) => void;
} function AddNote(props: AddNoteProps) { return( <div className="note"> <form onSubmit={props.addNote}> <input type="text" placeholder="Note Title" onChange={props.changeTitle} /> <textarea placeholder="Note Body" onChange={props.changeDesc}></textarea> <input type="submit" value="Add Note" /> </form> </div> );
} export default AddNote;Не самая сложная вещь, которую я когда-либо делал, но она определенно кажется намного более сложной, чем просто использование jQuery или Angular, по крайней мере, для меня в любом случае. Мне очень нравится React, я считаю его своим любимым фреймворком, просто не знаю, нравится ли мне его использовать для такого рода вещей. До сих пор, если бы мне пришлось выбирать, я бы сказал, что Angular — самый чистый из группы, JQuery — самый разумный (во всяком случае для этого проекта), а React — неудобный, который кажется действительно приятным в использовании, но в любом случае кажется бессмысленным.
Vue
Это фреймворк, который я использовал однажды, что может быть кощунственным для некоторых людей, но я просто не видел необходимости возиться с ним, если вы можете в это поверить. Я могу использовать как Angular, так и React, и мне кажется, что он охватывает большую часть того, что мне нужно (а остальное обычно заполняется библиотеками), поэтому Vue никогда не казался мне таким полезным. В любом случае, давайте сделаем сам проект Vue.
$ vue ui
Я использовал в основном все значения по умолчанию, но с TypeScript и SCSS (в основном с dart sass, поэтому у меня не было неразрешенных зависимостей), потому что мне просто очень нравится использовать их оба в своих проектах. Единственная реальная причина, по которой я не использовал TypeScript в первом случае, заключалась в том, что я не беспокоился о совместной работе jQuery и TS.
Как я приступил к созданию этого приложения? Ну, сначала я удалил почти все о приложении, которое было автоматически сгенерировано, и заменил код приложения следующим:
<template> <div class="container"> <header> <h1>Notes App</h1> </header> <main> <Note v-for="(note, index) in notes" :key="index" :title="note.title" :body="note.body" /> <div class="note"> <form @submit="submitForm()"> <input type="text" placeholder="Note Title" v-model="title" /> <textarea placeholder="Note Body" v-model="body"></textarea> <input type="submit" value="Add Note" /> </form> </div> </main> </div>
</template> <script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Note from "./components/Note.vue"; type NoteType = { title: string; body: string;
}; @Component({ components: { Note, },
})
export default class App extends Vue { notes: Array<NoteType> = []; title!: string; body?: string; constructor() { super(); const data = localStorage.getItem("notes"); if (data) this.notes = JSON.parse(data); } submitForm(): void { let note: NoteType = { title: this.title, body: this.body || "", }; this.notes.push(note); localStorage.setItem("notes", JSON.stringify(this.notes)); }
}
</script> <style lang="scss">
body { height: 100%; width: 100%; margin: 0;
} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }
}
</style>И тогда компонент Note будет таким:
<template> <div class="note"> <h4>{{ this.title }}</h4> <span>{{ this.body }}</span> </div>
</template> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; @Component({ components: {},
})
export default class App extends Vue { @Prop() title!: string; @Prop() body?: string;
}
</script>Вот и все.
Svelte
Вот фреймворк, который я хотел изучить, но даже не думал заниматся им, пока не довелось. По сути, я не знал абсолютно ничего, кроме того, что Svelte очень любят веб-разработчики, но я, собираюсь продолжать создавать проекты с Svelte в будущем.
В любом случае, примерно через 10 минут попытки найти yarn create- * CLI для Svelte, которого не существует, я решил просто настроить проект по их шаблоноу, как задумано. Я преобразовал проект в TypeScript, потому что в некотором роде пристрастился к строго типизированным языкам, и начал.
Что касается стиля, я перестал использовать SCSS. Я просто скомпилировал его вручную, потому что это не похоже на то, что я буду редактировать таблицу стилей слишком часто. Это компонент, с которым я работал:
<script lang="ts">
import Note from "./components/Note.svelte"; type NoteType = { title: string; body: string;
}; let notes: Array<NoteType> = []; const data = localStorage.getItem("notes");
if (data) notes = JSON.parse(data); let title: string = "";
let body: string = ""; function onSubmit() { let note: NoteType = { title: title, body: body }; notes.push(note); localStorage.setItem("notes", JSON.stringify(notes));
}
</script> <div class="container"> <header> <h1>Notes App</h1> </header> <main> {#each notes as note} <Note title={note.title} body={note.body} /> {/each} <div class="note"> <form on:submit={onSubmit}> <input type="text" placeholder="Note Title" bind:value={title} /> <textarea placeholder="Note Body" bind:value={body}></textarea> <input type="submit" value="Add Note" /> </form> </div> </main>
</div> <style>
body { height: 100%; width: 100%; margin: 0;
} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column;
}
.container header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white;
}
.container header h1 { margin-left: 6px;
}
.container main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center;
}
.container main .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px;
}
.container main .note form { display: flex; flex-direction: column;
}
.container main .note form textarea { resize: none;
}
</style>А вот компонент Note:
<script lang="ts"> export var title: string; export var body: string;
</script> <div class="note"> <h4>{title}</h4> <span>{body}</span>
</div>Вот проблема, которую я не знаю, как решить, и на данный момент не хочу решать, стиль работает только в том случае, если вы вставляете стили bundle.css, которые затем сбрасываются при перезагрузке в реальном времени. Это не будет проблемой для полностью созданного приложения, но очень неприятно для тестирования. Я не думаю, что буду исправлять ее в ближайшее время, возможно, когда-нибудь, я исправлю эту проблему.
Заключение
Помните, когда я сказал, что собираюсь написать больше вещей с помощью Svelte? Я не знаю, насколько буду в этом заинтересован, потому что, хотя мне действительно нравились многие аспекты Svelte, было слишком много сбоев, чтобы хотеть использовать его чаще. React был неоправданно сложным для проекта, который я создавал, Angular я по-прежнему считаю самым чистым, Vue, по-моему, самый интересный, а jQuery, вероятно, лучший, что меня очень удивило.
Я думаю, что если бы мне пришлось выбирать фреймворк для будущих проектов, это определенно зависело бы от проекта, но вижу, как снова буду использовать их все, даже с трудностями, которые у меня были со Svelte. При этом я, вероятно, буду делать большую часть своей работы в Angular и React, а следующим моим выбором будут jQuery и Vue. Я, вероятно, дам Svelte еще один шанс. В любом случае, я думаю, что любой из этих фреймворков был бы отличным выбором для множества случаев использования, и понимаю, почему людям нравится Vue сейчас, но не могу сказать, что мое мнение как-то изменились.
Код
Весь код доступен на github по ссылке.
Автор: Sammy Shear
Источник: dev.to
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен