Что я построил
Супер легкая структура для создания приложений для одной страницы в Pure JavaScript. Нагрузите свою идею, MVP, прототип, приложение или веб -сайт быстрее, чем раньше.
Отправление категории:
Программа для людей
Ссылка приложения
https://nevolin.be/spa/ или https://spa-zfvf2.ondigitalocean.app/
CODR – это образовательное приложение, созданное с помощью SPA: https://nevolin.be/codr/
Скриншоты
Описание
Многие разработчики не любят использовать сложные, комковатные и медленные разработки, такие как React, Vue и Angular.
Почему мы беспокоимся о разработке приложений для одной страницы? Скорость! Это намного лучше для пользовательского опыта и легче расширяться с помощью расширенных функций, таких как выборочное кэширование и доступность офлайн.
Одна из основных причин для разработчиков Dev Frameworks, таких как React/Vue/Angular, заключается в том, что исторически JS был не очень модульным. Много фронтального кода JS содержалось в одном файле и могло расти очень большим, боль в заднице для технического обслуживания, разработки и отладки.
Вы можете легко скопировать вставьте Spa.js в любой проект/шаблон, и вы настроены.
Ссылка на исходный код
https://github.com/healzer/SPA
Разрешительная лицензия
Герметичный
Фон
В последние годы с последним стандартом ES6 можно создать модульный код JS, благодаря функциональности импорта/экспорта, которая теперь поддерживается всеми современными браузерами. Больше не нужно использовать любую из этих сложных рамок для создания хорошо спроектированных приложений. Использование чистого JavaScript теперь быстрее и эффективнее, чем когда -либо прежде, для разработки.
Последняя основная причина, по которой многие разработчики используют чрезмерные рамки, заключается в обработке динамических навигаций страниц. Это то, что начинающие разработчики могут иметь мало знаний, но на самом деле это очень просто.
Как я его построил
Создание одностраничных приложений не требует каких -либо причудливых технологий, вы можете использовать бесплатный план DigitaloCean для начала работы.
Есть два популярных метода для навигации:
1. Хэш -навигация это дефолт и рекомендуемый метод для строительства навигации в спа -салоне. Нажав ссылку с href =#дом это #home затем также добавляется к адресу URL. Событие JavaScript хэш -оболочка испускается, который мы можем использовать для динамической загрузки контента.
2. URL -навигация является альтернативным методом, который манипулирует адресом URL -адреса вместо хэша. Мы делаем это, захватывая события клика и не допустив их фактической навигации, вместо этого мы используем href =/контакт Значение для определения того, какое содержание загружать динамически.
Этот метод может быть более желательным для целей SEO, но он имеет серьезный недостаток. Когда вы на самом деле перезагружаете страницу, вы получаете ошибку 404, потому что путь /Спа/контакт на самом деле не существует на сервере. Единственный обходной путь для таких ошибок состоит в том, чтобы добавить правила перезаписывания/перенаправления на ваш HTTP -сервер, что может быть не так тривиально на облачной платформе DO, если вы не управляете (виртуальным) сервером (с Nginx или Apache).
Дополнительные ресурсы/информация
ДЕЛАТЬ
Если вы использовали наш спа -платформ, сообщите нам об этом, и мы будем продвигать ваш сайт/приложение на нашем GitHub <3
Мое умное решение кэширования: https://dev.to/codr/smart-caching-with-service-workers-3g3j
Создайте приложения Android и iOS как PWAS: https://web.dev/progressive-web-apps/
Оригинал: “https://dev.to/codr/spa-pure-js-framework-for-single-page-apps-385n”