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

От автора: я подумал, что не хочу тратить на это вечность, и в основном мне нужен был предлог, чтобы изучить несколько новых фреймворков, поэтому я буду создавать одно и то же приложение 5 раз. Я планирую сделать приложение для создания заметок, в котором пользователи могут писать все, что захотят, и сохранять это в виде разных заметок.

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

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

jQuery

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

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

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

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

Узнать подробнее

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

Затем я компилирую код с помощью sass scss/styles.scss:css/styles.css, и мы готовы приступить к написанию кода JavaScript. По сути, все, что нам нужно сделать, это добавить новый div в DOM с парой дочерних элементов при отправке формы и сохранить его в локальном хранилище. Вот что у меня получилось:

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

Angular

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

Это буквально все, что нам нужно сделать для начала, разве не прелесть Angular CLI? В любом случае, я напишу в основном тот же код для базовой структуры приложения:

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

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

После этого мы можем вернуться в шаблон и исправить логику заметок:

React

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

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

Наш код пока ничего не делает, поэтому давайте добавим другие компоненты. я сделал 3 компонента в отдельной папке.

NotesList.tsx:

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

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

Узнать подробнее

Note.tsx:

AddNote.tsx:

Не самая сложная вещь, которую я когда-либо делал, но она определенно кажется намного более сложной, чем просто использование jQuery или Angular, по крайней мере, для меня в любом случае. Мне очень нравится React, я считаю его своим любимым фреймворком, просто не знаю, нравится ли мне его использовать для такого рода вещей. До сих пор, если бы мне пришлось выбирать, я бы сказал, что Angular — самый чистый из группы, JQuery — самый разумный (во всяком случае для этого проекта), а React — неудобный, который кажется действительно приятным в использовании, но в любом случае кажется бессмысленным.

Vue

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

Я использовал в основном все значения по умолчанию, но с TypeScript и SCSS (в основном с dart sass, поэтому у меня не было неразрешенных зависимостей), потому что мне просто очень нравится использовать их оба в своих проектах. Единственная реальная причина, по которой я не использовал TypeScript в первом случае, заключалась в том, что я не беспокоился о совместной работе jQuery и TS.

Как я приступил к созданию этого приложения? Ну, сначала я удалил почти все о приложении, которое было автоматически сгенерировано, и заменил код приложения следующим:

И тогда компонент Note будет таким:

Вот и все.

Svelte

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

В любом случае, примерно через 10 минут попытки найти yarn create- * CLI для Svelte, которого не существует, я решил просто настроить проект по их шаблоноу, как задумано. Я преобразовал проект в TypeScript, потому что в некотором роде пристрастился к строго типизированным языкам, и начал.

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

А вот компонент Note:

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

Заключение

Помните, когда я сказал, что собираюсь написать больше вещей с помощью Svelte? Я не знаю, насколько буду в этом заинтересован, потому что, хотя мне действительно нравились многие аспекты Svelte, было слишком много сбоев, чтобы хотеть использовать его чаще. React был неоправданно сложным для проекта, который я создавал, Angular я по-прежнему считаю самым чистым, Vue, по-моему, самый интересный, а jQuery, вероятно, лучший, что меня очень удивило.

Я думаю, что если бы мне пришлось выбирать фреймворк для будущих проектов, это определенно зависело бы от проекта, но вижу, как снова буду использовать их все, даже с трудностями, которые у меня были со Svelte. При этом я, вероятно, буду делать большую часть своей работы в Angular и React, а следующим моим выбором будут jQuery и Vue. Я, вероятно, дам Svelte еще один шанс. В любом случае, я думаю, что любой из этих фреймворков был бы отличным выбором для множества случаев использования, и понимаю, почему людям нравится Vue сейчас, но не могу сказать, что мое мнение как-то изменились.

Код

Весь код доступен на github по ссылке.

Автор: Sammy Shear

Источник: dev.to

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

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

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

Узнать подробнее

Laravel+Angular. Быстрый старт

Создание веб-приложения с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.