Silnik przykładowych stron oparty na szablonach
Jeden Cloudflare Worker, który z kilku parametrów adresu tworzy kompletną stronę dla danej branży — z niego pochodzą wszystkie przykłady w tej bibliotece.
Cel techniczny
W mniej niż sekundę tworzyć przekonującą, gotową na telefon koncepcję strony dla dowolnej małej firmy, bez osobnego budowania każdej strony, tak by pomysł na design można było pokazać jako działającą stronę, a nie statyczną makietę.
Ograniczenia
- Zero infrastruktury na demo: jedno wdrożenie musi obsługiwać każdą branżę.
- Szybko na średnich telefonach przez 4G, bo tak większość ludzi otwiera udostępniony link.
- Żadnych zewnętrznych treści zapisanych dla firmy — wszystko wynika z kilku parametrów.
- Koszt działania bliski zeru na darmowym hostingu.
Architektura
- 01
Parametry URL
Klucz szablonu, nazwa firmy, miasto i opcjonalne szczegóły.
- 02
Router szablonów
Bez klucza reguły słów kluczowych wybierają jeden z 17 szablonów branżowych.
- 03
Budowanie strony
Funkcje szablonów składają HTML, CSS i małe skrypty interakcji.
- 04
Warstwy dodatkowe
Wspólne warstwy dodają prezentację wideo, przyklejone przyciski mobilne i porządne nazwy.
- 05
Proxy na brzegu sieci
Proxy obrazów i licencjonowanego wideo z listami dozwolonych, limitami rozmiaru i cache.
- 06
Izolowane renderowanie
Strona trafia do iframe przez srcdoc i jest serwowana z noindex.
Przepływ biegnie od lewej do prawej, z góry na dół.
Kluczowe decyzje
Szablony jako funkcje, nie pliki
Każda branża to funkcja zwracająca kod z obiektu danych. Nowa branża to nowe dane i funkcja — bez nowych tras i nowych celów wdrożenia.
Parametry zamiast bazy danych
Demo jest w pełni opisane adresem, więc linki są powtarzalne, cache'owalne i nigdy nie zależą od zapisanych danych osobowych.
Słowa kluczowe przed AI
Nazwy firm porównuje się z uporządkowanymi regułami słów kluczowych. To deterministyczne, wytłumaczalne i darmowe; krok AI można dodać później dla niejednoznacznych przypadków.
Proxy z listą dozwolonych
Proxy obrazów przyjmuje tylko obrazy poniżej 8 MB i blokuje adresy prywatne; proxy wideo serwuje wyłącznie jawną listę licencjonowanych klipów.
Zrzuty ekranu
Wyzwania
Wspólne kody branżowe
Oficjalne kody działalności są wspólne dla bardzo różnych zawodów (salon paznokci i fryzjer mogą mieć jeden). Słowa w nazwie okazały się dużo lepszym sygnałem, a kod służy tylko jako rezerwa.
3D z kodu nie wyglądało premium
Wczesna wersja budowała pokoje 3D w kodzie. Technicznie ciekawe, ale sztuczne. Zastąpiły je prawdziwe licencjonowane nagrania z ruchem sterowanym przewijaniem — przypomnienie, że wierność wygrywa ze sprytem.
Wnioski
- Demo działające w przeglądarce przekonuje bardziej niż jakakolwiek statyczna makieta.
- Deterministyczne reguły z jasnymi rezerwami wygrywają z nieprzejrzystym modelem przy decyzjach routingu.
- Każdy endpoint proxy potrzebuje listy dozwolonych od pierwszego dnia.