В течение прошлой недели я работал с отличным партнером над созданием клона аудиоплеера/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).