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.