Создание одного и того же приложения 5 раз

0 0

В некоторых из этих фреймворков я уже создавал подобные приложения раньше, но с другими я либо никогда не делал этого раньше, либо вообще не использовал, так что это будет более сложной задачей.

Создание приложений

jQuery

Я буду использовать jQuery, чтобы упростить свое приложение без фреймворка. Я начал с создания базовой файловой структуры и создал index.html. Файловая структура, если вам интересно, такова: у меня есть таблица стилей SCSS, которую я скомпилирую в CSS, и на этом пока все. На данный момент html выглядит так, но позже я расскажу о нем подробнее:

Создание одного и того же приложения 5 раз

Создание одного и того же приложения 5 раз

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

<!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>

123456789101112131415161718192021222324252627282930<!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>

Таблица стилей выглядит так:

CSS 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; } } } } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253body {    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 с парой дочерних элементов при отправке формы и сохранить его в локальном хранилище. Вот что у меня получилось:

JavaScript 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> `); }); }

123456789101112131415161718192021222324252627282930let 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. В любом случае, пора сгенерировать проект:

JavaScript $ ng new angular

1$ 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>

123456789101112131415161718<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>

Это может быть спорным моментом, но я собираюсь реализовать всю логику для приложения в самом компоненте приложения, без каких-либо дочерних компонентов. Это просто сделает приложение немного проще в целом. В любом случае, давайте использовать в основном тот же стиль, что и раньше:

CSS .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; } } } } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647.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;              }          }      }  }}

В любом случае, мы можем просто написать код, аналогичный тому, что мы делали раньше:

JavaScript 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)); } }

12345678910111213141516171819202122232425262728293031import { 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>

123456789101112131415161718<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:

JavaScript $ yarn create react-app react-app –template sammy-libraries

1$ yarn create react-app react-app –template sammy-libraries

У меня была ошибка, которая иногда возникает, когда node sass (который я все еще использую в основном потому, что dart sass имеет медленное время компиляции для React, по моему опыту) отказывается компилировать мой код sass, поэтому я просто удалил node_modules и yarn.lock а потом снова запустил yarn. В любом случае вот что я сделал. Я начал с того, что сделал index.scss таким же, как и styles.scss в первом приложении, а затем в своем компоненте приложения я воссоздал базовую структуру приложения:

JavaScript 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;

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import 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:

Создание одного и того же приложения 5 раз

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript 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;

123456789101112131415161718192021222324252627282930import 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:

JavaScript 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;

123456789101112131415161718192021import 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:

JavaScript 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;

123456789101112131415161718192021import 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.

JavaScript $ vue ui

1$ 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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114<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>

123456789101112131415161718<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>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091<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>

123456789<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

Источник: webformyself.com

Оставьте ответ