В течение прошлой недели я работал с отличным партнером над созданием клона аудиоплеера/WinAmp с использованием React/Redux и Electron в рамках программы разработки интерфейса Школы Тьюринга. Нашему классу был предоставлен выбор: либо развивать и реорганизовывать предыдущие проекты, либо с головой погрузиться в область электронных настольных приложений. Чувствуя себя немного подавленным, совмещая учебную программу Тьюринга с процессом попытки получить свою первую работу по разработке программного обеспечения, я ослабил друга, который недавно закончил программу. Он дал следующий совет:
Я сделал 2 проекта на Electron, и, честно говоря, Electron очень прост, но вы можете связать его с любой веб-технологией. Я бы сделал Electron. — Бен Годфри
Свобода использовать любые библиотеки, фреймворки или передовые экспериментальные API, которые щекотали мое воображение, звучала заманчиво. Кроме того, новизна возможности упаковать производственную сборку моего проекта в файл .zip и отправить его по электронной почте моей маме звучала еще лучше. Электрон это был.
Редукс или не редукс 💀
Согласно моим источникам, React сейчас популярен в мире фронтенда, и это технология, которую я широко использовал в своих проектах Школы Тьюринга. Однако его более сложный аналог, Redux, может оказаться менее практичным для использования в небольших недельных проектах, которыми мы занимаемся в Тьюринге. Поскольку запуск с нуля и настройка приложения React с помощью Redux, Webpack и всех других тонкостей разработки может быть несколько болезненным процессом, мы искали короткий путь. Благодаря нашему хорошему другу Google мы наткнулись на Electron-React-Boilerplate, который поставляется со всем, что нужно разработчику для создания правильного настольного приложения с использованием React, и даже имеет встроенный Redux. Вау!
Использование Redux казалось многообещающей идеей — мы получили дополнительную практику, связывая вместе действия и редюсеры, и в то же время наслаждались всеми преимуществами наличия независимого хранилища для состояния нашего приложения. Даже если бы нам пришлось потратить несколько часов на выяснение того, почему «отправка» не была правильно сопоставлена с нашими реквизитами, свобода совместного использования состояния между нашими компонентами стоила бы того в долгосрочной перспективе.
Реакция + Электрон = Свобода 👍
Благодаря темной магии Chromium Electron может работать со всеми типами библиотек и экспериментальных API — даже с теми, которые были созданы недавними учениками школы Тьюринга. Недавние выпускники Джефф Дюк и Бен Годфри также создали аудиоплеер во время своего четвертого модуля проекта Electron и создали небольшую библиотеку, чтобы упростить использование mp3-файлов с аудиотегом HTML5. Объединив несколько других зависимостей с небольшой горсткой функций на основе промисов, они создали простую в использовании библиотеку, предлагающую быстрые решения именно тех проблем, с которыми мы начали сталкиваться при попытке работать с нашими аудиоисточниками.
В основном мы использовали функцию Бена и Джеффа createSongObject(), которая преобразует заданную строку пути к файлу в красивый маленький объект с названием альбома аудиодорожки, названием песни и исполнителем.
Если и была какая-то характеристика, которая больше всего впечатлила меня в сообществе школы Тьюринга (и в сообществе программистов в целом), так это щедрость, с которой люди делятся бесплатными знаниями друг с другом и делятся своими решениями проблем. И снова наше сообщество отплатило нам, и на этот раз они дали нам простые маленькие объекты песни, которые мы могли использовать в наших внешних компонентах. Большое-большое спасибо всем, кто работает над библиотеками с открытым исходным кодом и помогает юниорам со всего мира, таким как я, получать удовольствие от процесса разработки приложений. Эта свобода, конечно, не бесплатна.
💸Мечты против MVP💩
С приложением аудиоплеера открывается бесконечный потенциал для функциональности. Создание списков воспроизведения, добавление треков в избранное, оценка песен, эквалайзеры, очереди песен, отображение информации о песнях и визуализаторы звука — это лишь верхушка айсберга. Учитывая, что у нас была всего неделя, чтобы реализовать наше видение, мы должны были управлять своим воображением и расставить приоритеты в отношении нескольких функций, над которыми было бы и необходимо, и весело работать.
Для нашего MVP (минимально жизнеспособного продукта) мы хотели следующее:
- возможность воспроизведения двух треков одновременно(круто.)
- кроссфейдер для объединения двух треков или создания изящных переходов между песнями (красиво круто и навеяно этим классическим веб-сайтом!)
- раздел плейлист, в котором отдельные дорожки или папки могут быть загружены и воспроизведены одним щелчком мыши (это позволило бы нам поиграться с чтением файловой системы и использовать Node's библиотека «fs»)
Если нам удавалось собрать наш MVP за оставшееся время, мы хотели попытаться оживить наше приложение дополнительным преимуществом:
- визуализатор аудио (совершенно круто!)
Мы завершили наш MVP, и у нас не было лишнего времени или энергии, чтобы глубоко погрузиться в создание визуализатора, но вот что нам удалось создать:
Обучение будущему 🚀
WebAudio API очень мощный и, по сути, дает разработчику доступ к синтезатору в браузере. Разработчики могут связывать различные узлы с основным источником звука или контекстом и манипулировать звуком звука всевозможными способами. Кроме того, webAudio API включает analyserNode, который можно использовать для доступа к длинам волн на выходе источника звука. Наша идея (благодаря некоторому интернет-вдохновению) состоит в том, чтобы использовать длины волн для управления формами и цветами в элементе холста HTML5.
Удивительно, что есть еще так много новых идей, которые можно привнести в создание настольного аудиоплеера.
TL;DR 🤔
С Electron действительно есть бесконечные возможности для создания настольных приложений с использованием всего спектра веб-технологий. Это забавная и вдохновляющая технология, которая может помочь вам произвести впечатление на друзей и близких. Сейчас я написал JavaScript для фронтенда, бэкенда и десктопа — на очереди нативные мобильные приложения (смотрю на вас, React Native).