DynamicJS v2.2 · produkcyjnie sprawdzona

DynamicJS
Dynamiczne interakcje bez kompromisów

Dodaj wysokiej jakości doświadczenia użytkownika bez przepisywania projektu na duże frameworki SPA. Automatyzuj AJAX, formularze, cache i animacje używając prostych atrybutów HTML.

Dlaczego DynamicJS?

⚡ Szybkie wdrożenie

Podłącz bibliotekę w kilka minut. Wystarczy jQuery i znane atrybuty danych, aby wdrożyć ładowanie AJAX w całym projekcie.

🎯 Gotowe wzorce

Obsługa automatycznych reloadów, formularzy, nawigacji, lazy-loadingów, poolingu i widżetów statusów – bez pisania dodatkowego kodu.

🔧 Elastyczne API

Możliwa rozbudowa przez hooki, customowe eventy, cache i integrację z historią przeglądarki. Pełna kontrola, gdy jej potrzebujesz.

Najważniejsze funkcje

📝 Obsługa formularzy

  • Automatyczne ajax-submit dla formularzy
  • Obsługa multipart/form-data oraz JSON
  • Wbudowane stany ładowania i komunikaty

🔄 Ładowanie treści

  • Atrybuty data-dyn-load, data-dyn-link, data-dyn-change
  • Efekty przejść i automatyczne podstawianie HTML
  • Mechanizm cache z TTL i ręcznym odświeżeniem

🔗 Integracja z URL

  • Aktualizacja window.history dla SEO i UX
  • Obsługa przycisków wstecz/dalej
  • Fallbacki dla starszych przeglądarek

⚙️ Zaawansowane dodatki

  • Pooling danych (data-dyn-poll)
  • Lazy loading z IntersectionObserver
  • Własne inicjalizatory i hooki JS

Instalacja w 60 sekund

Wstrzyknięcie na stronie

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://dynamicjs.krzysztofzylka.pl/cdn/dynamicjs.iife.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    window.DynamicJS.init();
  });
</script>

Integracja w bundlerze

import $ from 'jquery';
import DynamicJS from './dynamicjs.es.js';

window.$ = $;
DynamicJS.init();

Dobre praktyki

🎯 Organizacja selektorów

Trzymaj kluczowe obszary w atrybutach data-dyn-target. Ułatwia to przeładowanie konkretnych widoków z przycisków, linków i formularzy.

💾 Cache z TTL

Jeśli API zwraca dane, które się nie zmieniają co sekundę, użyj data-dyn-cache="5m" aby ograniczyć requesty i przyspieszyć stronę.

🔌 Łącz z systemami CMS

DynamicJS jest lekki – możesz go osadzić w WordPressie, Magento czy autorskim CMS bez konfliktów z istniejącym frontem.

🪝 Customowe hooki

Dodaj własne nasłuchy na zdarzenia dyn:beforeSend, dyn:afterLoad, by spinać logikę analityczną, snackbary albo komponenty UI.