100 dni, 87 narzędzi, zero serwerów

Spędziłem 100 dni na budowaniu ToolKnit. To zestaw 87 narzędzi działających w przeglądarce.

Większość stron z narzędziami działa w następujący sposób:

  • Przesyłasz plik.
  • Serwer go przetwarza.
  • Pobierasz wynik.

Oznacza to, że Twoje poufne pliki PDF i zdjęcia trafiają na serwer kogoś innego. Chciałem innego podejścia. Każde narzędzie w ToolKnit działa całkowicie w Twojej przeglądarce. Żadne pliki nie opuszczają Twojego urządzenia.

Oto czego nauczyłem się podczas budowania aplikacji bez backendu.

Stack

  • HTML i Tailwind CSS.
  • Vanilla JavaScript.
  • PHP wyłącznie do prostych statystyk.
  • Zero frameworków. Żadnego Reacta. Żadnego Vue.

Dlaczego statyczny HTML?

  1. Lepsze SEO. Google błyskawicznie indeksuje statyczne strony. Nie ma opóźnień związanych z hydracją.
  2. Większa prędkość. Użytkownicy otrzymują narzędzia natychmiast. Nie muszą czekać na załadowanie dużych paczek JavaScript.
  3. Niskie koszty. Prawie nie zużywam mocy serwera.

Wyzwania Budowanie 87 stron bez komponentów jest trudne. Jeśli zmienię link w stopce, muszę edytować 87 plików. Musiałem napisać skrypty w Pythonie, aby tym zarządzać.

Poznałem ograniczenia przeglądarki:

  • Kompresja PDF jest trudna. Wymaga skomplikowanej manipulacji strumieniami, aby uniknąć uszkodzenia plików.
  • Synteza dźwięku jest złożona. Stworzenie realistycznego brzmienia pianina wymaga wielu oscylatorów i niestandardowych harmonicznych.
  • Wideo jest „ciężkie”. Użycie ffmpeg.wasm działa, ale 32 MB pobierania to obciążenie przy wolnych połączeniach.

Moja najważniejsza lekcja Zabijaj funkcje, które prawie działają.

Zbudowałem narzędzie dla iPhone Live Photos. Miało ono trzy główne wady:

  • Matematyka dotycząca zaokrąglonych rogów w Canvas API była błędna.
  • Transkodowanie wideo trwało zbyt długo.
  • Aplikacje takie jak WeChat usuwały dane, których potrzebowałem.

Narzędzie, które działa w 90%, podważa zaufanie. Jeśli nie jest świetne, nie wypuszczaj go.

Co dalej? Buduję teraz aplikację desktopową przy użyciu Tauri i Rust. Będzie ona przestrzegać tej samej zasady: całe przetwarzanie odbywa się lokalnie.

Podsumowanie 100-dniowego procesu budowania: • 87 wydanych narzędzi. • 3 wycofane narzędzia. • 0 zależności od frameworków. • Ponad 3000 całkowitych użyć.

Czy budujesz narzędzia działające po stronie klienta? Napisz o swojej architekturze w komentarzach.

Źródło: https://dev.to/dngzihng114379/100-days-87-tools-zero-servers-what-i-learned-building-a-fully-client-side-utility-suite-1bh0