TourManager — это одностраничное приложение, которое я разработал для Flatiron School для нашего модуля Javascript. Это приложение, которое я на самом деле придумал и разработал в фургоне во время моего первого тура после пандемии. У нашего тур-менеджера был обычный день в туре: перепроверка времени загрузки, электронная почта промоутеров, подсчет общего количества товаров и, как правило, занятость множеством различных приложений. Я заметил неэффективность и разочарование от переключения между разными шоу в разных приложениях и хотел создать для него решение. Проверьте репозитории Github для интерфейса и бэкенда!

TourManager In View (но не Vue)

TourManager — простое приложение. Когда пользователь входит в систему, ему показывается домашняя страница, на которой отображается его имя, кнопка для создания нового шоу и все карты шоу, которые уже были созданы. Существует элемент span, который генерирует общую валовую прибыль всех шоу, захватывая итоги прямо из DOM. Когда пользователь захочет создать новое шоу, он увидит это модальное окно.

Когда они создают шоу, информация будет загружена в серверную часть с помощью запроса на выборку «POST» и немедленно отображена в DOM. Если они передумают, они могут нажать X в правом верхнем углу, чтобы выйти из модального окна, или с помощью события «нажатие клавиши» они также могут использовать клавишу выхода для выхода. Затем у пользователя будет возможность отредактировать или удалить любую из карт шоу, что обновит общую валовую прибыль в верхней части страницы.

Ваниль, едва знаю тебя

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

Прототипное наследование

Одним из тех правил, которые может выучить любой новичок и которые объяснят некоторые особенности Javascript, является прототипное наследование и то, как Javascript обрабатывает классы. Вы, вероятно, знакомы с классами, но если нет, то их можно рассматривать как чертежи для создания объектов в Объектно-ориентированном программировании (ООП). Эта парадигма существует практически в каждом языке программирования, но в стиле Javascript это не совсем точное сравнение.

Такие языки, как Ruby, обрабатывают наследование классов, как если бы классы и подклассы были генеалогическим древом. В самом деле, ruby ​​даже содержит метод класса под названием .ancestors, который покажет вам массив в порядке наследования или от потомка к предку.

Абстрактное наследование прототипов похоже, но вместо того, чтобы иметь дело с классами и подклассами, мы имеем дело исключительно с объектами, объектами-прототипами и свойствами, указывающими на эти прототипы. Например, мой класс User и экземпляр этого класса User:

Как вы можете видеть выше, экземпляр «user» моего класса User имеет некоторые свойства и функцию, известную как «handleClick». Когда мы проверяем это свойство [[Prototype]], мы получаем следующее:

Вот объект-прототип нашего класса User! Класс User лучше понимать как синтаксический сахар для концепции Javascript «функций-конструкторов». Когда мы вызываем «новый пользователь», создается пустой объект. Ключевое слово «this» функции-конструктора устанавливается на пустой объект. Затем пустой объект связывается с объектом-прототипом функции-конструктора через свойство emptyObject.__proto__. Наконец, новый объект возвращается.

Одно примечание: «__proto__» всегда будет указывать вверх на объект-прототип объекта выше в цепочке наследования, тогда как .prototype будет указывать вбок на объект-прототип объекта.

Все это означает, что любой экземпляр функции-конструктора имеет доступ ко всем свойствам и функциям объекта-прототипа функции-конструктора. Очень похоже на то, как подклассы в Ruby наследуют методы своих родительских классов, это наследование доходит до вершины цепочки. Отличие в том, что в Javascript не существует классов, только эти объекты-прототипы. Углубившись в нашу функцию-конструктор User, мы видим, что свойство ее прототипа .__proto__ указывает на объект-прототип функции-конструктора Object.

Несмотря на сложность, в сфере Javascript, и особенно с синтаксическим сахаром классов ES6, этот шаблон абстрагирован, так что он больше похож на традиционную систему наследования. Однако важно понимать, что под капотом объекты взаимодействуют с другими объектами, и можно использовать это понимание для помощи в отладке (может быть, то, что вы считаете массивом, на самом деле им не является?) и добавления функциональности в наш Javascript ООП.

Ванильный CSS и Chrome DevTools

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

Хотя глубокое погружение в CSS выходит за рамки этой статьи, я хотел бы поговорить о DevTools в Google Chrome. При внедрении моего CSS в мой HTML я обнаружил, что лучший рабочий процесс для меня — это открыть Devtools, проверить элемент в DOM, которым я хотел манипулировать, и начать экспериментировать с некоторыми из основных стилей CSS в консоли, такими как отображение , положение, радиус границы и цвет. Я обнаружил, что фактическое наблюдение за эффектом кода CSS на странице делает процесс обучения действительно интересным и помогает исправить более серьезные проблемы до того, как они будут фактически закодированы в моем файле style.css.

Что дальше

Я всегда считаю свои проекты незавершенными, и этот не исключение. Я хотел бы, чтобы TourManager мог генерировать электронные письма, ежедневные отчеты в виде PDF-файла и, как правило, выполнять второстепенные задачи, с которыми любой ТМ будет заниматься в любой день в туре. Это позволило бы TM иметь большую пропускную способность для работы с личностями и ситуациями, которые не может предсказать ни одно приложение в чудесном мире индустрии развлечений.

Фронтенд для начинающего веб-разработчика никогда не бывает легким, но он не обязательно должен быть невозможным или неинтересным. Я надеюсь, что мой опыт работы с ванильным Javascript и ванильным CSS поможет другим студентам, таким как я, лучше понять некоторые из самых неправильно понимаемых языков в нашей области.