Multido - это мультиплатформенное приложение с той же кодовой базой для мобильных, настольных и веб-приложений.
Зачем я создал еще одну программу для дел? Каковы были мои цели и как я создал подход к мультиплатформенному продукту с помощью фреймворков React Native, React Js и Electron?
Цели
Моей главной целью было попытаться создать реальное приложение, которое можно было бы использовать ежедневно, без необходимости писать отдельный код для каждой платформы. Я уже довольно давно экспериментирую с React Native и решил попробовать достичь этой цели таким образом.
Я давно имею дело с javascript, кроме того, что я знаком с другими языками программирования (например, Swift, ActionScript, Php), но обычно я чувствовал, что, к сожалению, одного отдельного языка или API недостаточно, чтобы покрыть достаточное количество площадок. В последние несколько лет, благодаря усовершенствованию javascript, начали разрабатываться некоторые варианты, которые могут помочь вам создавать приложения для основных платформ, основанные почти на одном и том же коде.
Другой моей целью было избавить меня от необходимости использовать липкие бумажные заметки для планирования своих ежедневных задач. Конечно, у меня есть много возможностей для мобильных и веб-приложений, но лично я не мог использовать эти приложения так, как я хотел. Например, я не люблю касаться своего смартфона, когда работаю за своим столом. С другой стороны, когда я сижу за компьютером, я ценю возможность использовать настольное приложение для работы или выполнения задач. Кроме того, я использую ежедневные списки задач даже на несколько дней вперед. Конечно, это должно быть доступно отовсюду и постоянно синхронизировано.
Первые шаги
Я начал с цели создать приложение для мобильных и настольных компьютеров. Фреймворки React Native и Electron казались наиболее эффективным решением. Решил попробовать соединить эти две системы. React Native - отличная кросс-мобильная библиотека для разработки приложений для iOS и Android, тогда как Electron - очень эффективная платформа для создания настольных приложений с помощью веб-технологий для macOS, Windows и Linux. Конечно, мы могли бы также использовать React в этом фреймворке. React Js и React Native предоставляют нам возможность использовать для работы аналогичный исходный код, но нам нужна библиотека для перевода рендеров React Native в элементы html. Решением стал модуль react-native-web.
Во время экспериментов наиболее удобной отправной точкой было инициализировать приложение React Native, а затем вставить в него фреймворк Electron. После этого я мог управлять системой из общего кода с помощью webpack и react-native-web. Уже было очевидно, что эта идея не годится для большого проекта, но может быть полезна только для дела.
Дизайн
Итак, теперь, когда основы системы были заложены, я приступил к разработке пользовательского интерфейса. Это всегда улучшает мою мотивацию. Тем более, что я обнаружил Figma, это крутой кроссплатформенный инструмент для проектирования, который я мог бы отлично использовать в macOS и Windows. Более того, я сразу смог протестировать мобильные макеты на устройствах с Figma Mirror. Это фантастический, постоянно развивающийся инструмент дизайна, который я могу только рекомендовать.
Разработка
Эта часть истории заслуживает отдельной статьи, поэтому я буду краток. Когда я начинал, я знал, что мне придется обрабатывать определенные компоненты и функции отдельно на мобильном устройстве и компьютере. С одной стороны, не каждый данный модуль можно перенести из одной среды в другую. С другой стороны, поведение пользователей и использование устройств также различаются.
Например, жест смахивания - это устоявшаяся практика на мобильных устройствах, в то время как мы могли бы использовать контекстные меню правой кнопки мыши на рабочем столе. В процессе разработки я пробовал и использовал много подходов к различиям. В некоторых местах было достаточно дифференциации по платформе, но, конечно, в других местах с некоторыми компонентами приходилось обращаться совершенно по-другому.
Очевидно, в процессе разработки мне пришлось переосмыслить некоторые части программного обеспечения. Оказалось, если я покажу слишком много svg, Android это не понравится. Мне пришлось изменить использование svg на использование шрифтов значков, что заставило меня изменить дизайн некоторых значков, но оно того стоило и производительность улучшилась.
Сортировочные списки были еще одной проблемой, потому что требовались дополнительные функции. Я сделал строки списка прокручиваемыми и внес изменения в красивую анимацию. К сожалению, Android также представлял более серьезную проблему, потому что анимация макета обычно не учитывала элементы при сортировке. На рабочем столе я решил, что элементы списка можно перетащить в другой список или через средство выбора даты.
Естественно, не стоит пренебрегать и опытом редукции. Правильное использование важно для хорошей работы. Если мы не будем эффективно обрабатывать обновления компонентов, мы столкнемся с серьезным замедлением работы при использовании наборов данных размером 10 тыс. Строк.
Я предположил, что если приложение будет работать в Chrome, оно, вероятно, будет работать в Chrome. Поэтому я сделал небольшой обходной путь, чтобы попробовать это в веб-среде. К моему удивлению, большинство браузеров справились с этой задачей лучше, чем я ожидал. Мне пришлось внести лишь незначительные изменения в внешний вид, чтобы веб-приложение работало в текущих браузерах. Конечно, здесь тоже ничего не было идеального, например, вы не могли использовать перетаскивание в Edge и IE.
Результат
Во время разработки у меня появилось много новых идей, и мне пришлось использовать временные решения, но мне пришлось где-то установить лимит, чтобы сделать версию 1.0. Естественно, это ранняя тестовая версия, и я, конечно, допустил там ошибки.
В любом случае, я счастлив, потому что эти фреймворки и библиотеки - важный шаг на пути к созданию мультиплатформенных приложений в ближайшем будущем.
Multido - это всего лишь один эксперимент, один из многих подходов к разработке приложений для основных платформ с одной и той же кодовой базой.
Детали разработки: https://medium.com/@attilaberki/multido-details-of-development-c5ff644e3bb1
Попытайся
Репозиторий: https://bitbucket.org/attilaberki/multidoapp
Веб-сайт: http://multido.net/
Веб-приложение: https://app.multido.net/
Благодарности / ссылки
Курсы Стивена Гридера по Udemy
Полезные библиотеки для React и React Native
react-native-web
react- родной-сортируемый-список-просмотр
реагировать-сортировать-hoc
реагировать-переворачивать-перемещать
Обо мне: www.abg.hu
LinkedIn: www.linkedin.com/in/attilaberki/
