В последнее время возникла интересная дискуссия о современной сети.
Я лично считаю что
- Одностраничные приложения (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 или для создания статического сайта:
О современной сети и традиционной сети
Чтобы получить больше информации о дебатах, упомянутых в начале этого поста:
- Недостатки одностраничных приложений Адам Сильвер.
- Разработка интерфейса без Javascript Мэтт Рейер
- Возвращение сети 90-х Макс Бёк
- Рендеринг на стороне сервера - это правда Тиля Тим Раффлз
- Архитектура, которая никому не нужна Грега Нависа
- Почему я ненавижу ваше одностраничное приложение Стефана Тилкова
- Угадывая современную сеть, Том Макрайт.
- В защиту современной паутины Рич Харрис
- Современная сеть Криса Койера
Как использовать 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.
Это все, спасибо, что прочитали! ❤️