Budowa Własnego Ekosystemu Narzędzi Webowych
Jako inżynierowie oprogramowania każdego dnia stajemy przed drobnymi problemami, które wymagają szybkich, technicznych kalkulacji: dekodowania base64, sprawdzenia hasha SHA-256, formatowania zepsutego pliku JSON czy przeliczania jednostek rem na piksele.
Standardowym odruchem jest wpisanie problemu w wyszukiwarkę Google i kliknięcie w pierwszy lepszy "Online JSON Formatter". Problem polega na tym, że te strony często:
- Pękają w szwach od reklam i banerów z ciasteczkami.
- Wymagają połączenia z internetem (co irytuje w pociągu bez zasięgu).
- Wysyłają nasze nierzadko wrażliwe dane lub klucze API na zewnętrzne, niecertyfikowane serwery, by tam je przetworzyć!
Zdałem sobie sprawę, że ten "narzędziowy śmietnik" zbyt mocno wpływa na moje bezpieczeństwo i komfort pracy. Dlatego stworzyłem tools-app – scentralizowane repozytorium moich własnych podręcznych narzędzi.
Projekt można przeglądać i współtworzyć na mojej instancji Gitea: gkucmierz/tools-app.
Architektura i Założenia Projektu
Projekt tools-app to nie jest ciężka, napuchnięta aplikacja biznesowa. To zwinny zestaw wysoce zoptymalizowanych kalkulatorów i widżetów spiętych dobrym frameworkiem frontendowym.
1. Zero Backend Processing (Tylko Client-Side)
Najważniejszą zasadą, którą się kieruję podczas dodawania kolejnych modułów do moich narzędzi, jest absolutny zakaz przetwarzania danych na backendzie. Nawet wyliczanie zaawansowanych hashów krzywych eliptycznych czy skomplikowane formatowania muszą dziać się wyłącznie w pamięci RAM przeglądarki użytkownika.
- Gwarantuje to 100% prywatności. Kod wklejony do narzędzia nigdy nie opuszcza maszyny operującej.
- Odporność na awarie sieciowe. Jeśli strona się wczyta, narzędzie będzie działać nawet po wymuszonym odłączeniu od internetu.
2. Szybkość dzięki Vanilla JS / Vue
Choć lubię dobre środowiska takie jak silnik Vite z frameworkiem Vue 3, wiele z tych "toolsów" z uporem maniaka piszę wykorzystując lekkie komponenty lub wręcz wracając do korzeni natywnych Web Components.
Brak wirtualnego DOM (lub jego ścisła kontrola w Vue) w przypadku prostego zegara epoch czy kalkulatora HEX-RGB to po prostu krótszy Time-To-Interactive (TTI). Aplikacja ma otwierać się w sekundę i od razu przyjmować wklejenie ze schowka systemowego.
3. Progressive Web App (PWA)
Tworzenie własnych narzędzi ma ten gigantyczny plus, że łatwo spiąć je Service Workerem. Dzięki temu cały zestaw tools-app ląduje u mnie w docku na systemie macOS czy na ekranie głównym telefonu jako pełnoprawna, odizolowana aplikacja (PWA), gotowa do pracy offline.
Radość z niekończącej się historii
Najlepszą stroną posiadania i pielęgnowania własnego tools-app jest to, że projekt ten nigdy nie jest skończony. Co tydzień potrafię dopisać nową funkcję – czasami jest to parser JWT (JSON Web Token), na który rzucałem wulgaryzmami przy pracy z backendem od klienta, innym razem malutki symulator kolorów.
To repozytorium w Gitei to poligon doświadczalny dla nowych CSS'owych API przeglądarek, optymalizacji i zabawy czystym inżynieryjnym rzemiosłem. Zamiast budować u kogoś zasięg darmowym kliknięciem, ładuję te moduły dla poszerzenia własnego warsztatu.
Zapraszam Was do sklonowania, zmodyfikowania ułożenia na własną modłę i dorzucenia własnych widgetów!