В последнее время возникла интересная дискуссия о современной сети.

Я лично считаю что

  • Одностраничные приложения (SPA) использовались (ab) там, где более традиционный подход на стороне сервера мог бы лучше подходить
  • SPA требуют особого внимания (навигация, прокрутка, доступность, SEO и т. д.)
  • Есть много спа-салонов, которые не созданы должным образом, но, если они созданы хорошо, СПА могут значительно улучшить взаимодействие с пользователем
  • Браузер кажется естественным местом для обработки сложных пользовательских интерфейсов, а не сервер
  • Как разработчики я (мы?) Хотел бы продолжать использовать свои лучшие инструменты для улучшения взаимодействия с разработчиками.

Что касается последнего пункта, мне кажется, что язык вяз несет в себе проклятие:

« Попав в Эльм, вы захотите остаться в Эльме »

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

Поэтому, чтобы решить некоторые из этих проблем, я сделал небольшой скрипт для преобразования Elm SPA в статически генерируемые прогрессивные веб-приложения (PWA), названный elm-starter.

(Да, еще один)

Цель

Цель состоит в том, чтобы получить инструмент, который

  • В основном написано на вязе (см. Упомянутое выше проклятие)
  • Поддерживает большинство библиотек Elm (elm-ui, elm-spa и др.)
  • Относительно простой в использовании
  • Может использоваться для начальной загрузки нового приложения или для преобразования существующего.
  • Не инвазивен и может быть удален в любой момент.

Полученный PWA должен иметь следующие характеристики

  • Работает без Javascript
  • Работает в автономном режиме
  • Устанавливается на мобильный / настольный компьютер
  • Дружественен к ботам (SEO)
  • Поддерживает предварительный просмотр карточек
  • Отрисовывает быстро (получает высокие баллы в Lighthouse)

Классический скриншот Маяка с конфетти 🎉

Предварительный просмотр карточек в Slack:

Что делает этот инструмент?

  • Создает все необходимые файлы для PWA
  • Централизовать все метаданные в одном «едином источнике истины»
  • Создает статические страницы

Это все. Довольно просто!

Демо

Есть 3 демонстрации, сделанные с elm-starter:

1. Официальная elm-starter демка

Это простой SPA с объектом SVG. Это пример одного из различий между SPA и MPA: переход страницы. Это приложение работает как с Javascript, так и без него. Единственная разница в том, что: Нет Javascript - ›Нет перехода между страницами.

Обратите внимание, что переход страницы выполняется с применением перехода CSS к SVG. Я слишком поздно понял, что это поддерживается только в Chrome, и у меня не было времени изменить это, но вы поняли.

Вот разница между включенным и выключенным Javascript:

2. Todo MVC

Это классический Todo MVC, тот, который я много использовал для сравнения различных фреймворков в прошлой статье.

Первоначально он был написан Эваном Чаплицки, я просто скорректировал его, чтобы исправить некоторые проблемы с доступностью.

По сравнению с предыдущей демонстрацией, эта не работает без Javascript по своей природе.

Карточка предварительного просмотра в Slack:

3. elm-spa Пример

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

elm-starter затем может взять на себя управление и преобразовать его в PWA, статически генерируя все маршруты.

В этом конкретном примере все страницы доступны без Javascript, но виджет, для которого требуется Javascript (например, счетчики), работать не будет.

Карточка предварительного просмотра в Slack:

За кулисами

  • Все файлы генерируются кодом Elm:
  • HTML: создается с использованием модифицированной версии zwilias / elm-html-string. Например, Index.elm генерирует index.html.
  • JSON: создается с помощью elm / json. Например, Manifest.elm генерирует manifest.json.
  • CSS: создается из строк. Я знаю, это не идеально. Rtfeldman / elm-css, то есть CSS с типобезопасностью Elm, похоже, не раскрывает преобразователь toString. В любом случае количество CSS, необходимое в elm-starter, очень мало, поэтому я сохранил его в виде строки. Например, SnippetCss.elm.
  • Javascript: создается из строк. Опять же, количество Javascript, необходимого для запуска приложения, минимально, поэтому я решил сохранить его как строку. Для большего количества Javascript лучше хранить в .js файлах. Например, SnippetJavascript.elm.
  • Все статические страницы и снимки создаются с помощью Кукловода.
  • Большая часть CSS и Javascript отформатирована с запятой или с запятой (извините, я не смог устоять, снова см. Elm проклятие выше)

Это снимок Index.elm, который генерирует index.html:

SEO

Каждая страница статически генерируется с определенными метатегами, так что пауки поисковых систем могут легко ее уловить, даже если они не так сложны, как Google, которые могут выполнять Javascript с давних пор.

Кто-то говорит, что даже если Google может запускать Javascript, он все равно предпочитает статические веб-сайты.

Вот как Google проиндексировал демонстрацию elm-starter через несколько дней после ее запуска:

Похожие проекты

Это другие отличные проекты, которые можно использовать для начальной загрузки приложения Elm или для создания статического сайта:

О современной сети и традиционной сети

Чтобы получить больше информации о дебатах, упомянутых в начале этого поста:

Как использовать elm-starter

Вы можете найти elm-starter на github.com/lucamug/elm-starter.

Самый быстрый способ начать его использовать - нажать [Развернуть в Netlify].

Это автоматически

  • Создайте репозиторий, содержащий elm-starter, в свою учетную запись Github
  • Разверните его вживую, используя свою учетную запись Netlify

Чтобы изменить приложение, просто клонируйте новое репо на своем компьютере и запустите:

$ npm install
$ npm start

Теперь вы можете отредактировать src/Main.elm и, подтвердив результат на http: // localhost: 8000, зафиксировать свои изменения в Github.

Новое приложение будет опубликовано Netlify автоматически в течение нескольких секунд, включая повторное создание всех статических страниц.

Более подробная информация доступна в README.

Это все, спасибо, что прочитали! ❤️