Platforma mikrofrontendów Vue 3
Prowadziłem frontend platformy B2B2C złożonej z ponad 28 mikrofrontendów Vue 3 w single-spa — wspólne SDK komunikacji, jedna biblioteka komponentów i niezależne wdrożenia każdej aplikacji.
Szczepan Kosik — Senior Vue developer B2B Dostępny · part-time · B2B
Senior Frontend Developer — Vue 3 i NuxtFrontend, który rośnierazem z biznesem.A nie wbrew niemu.
Od ponad 10 lat zamieniam złożone produkty w szybkie, typowane i łatwe w utrzymaniu interfejsy. Vue 3 · Nuxt · TypeScript. Tech lead z nawyku.
- Base
- Lublin, PL
- Coords
- 51.25°N 22.57°E
- Czas lokalny
Jak buduję frontend
Wydajność to Twoje pieniądze.
01
Każdy zbędny request to pozycja na czyjejś fakturze. Wyłapuję je.
Audyt wydajnościNigdy nie słucham biernie.
02
Refinement jest po to, by kwestionować pomysły. Również moje.
Jakość się automatyzuje, a nie negocjuje.
03
Ścisłe typy, reguły lintera i hooki gita. Standardy, które działają, nawet gdy nikt nie patrzy.
Piszę interfejsy, z których sam chcę korzystać.
04
Klikam je jak użytkownik końcowy. Jeśli coś mnie uwiera, poprawiam, zanim ktokolwiek inny to zauważy.
02 Usługi
Biorę na siebie trudne tematy.Migracje Vue, audyty wydajności, mikrofrontendy.
- 01Czytaj dalej
Migracja Vue 2 → 3
Przenoszę produkcyjną aplikację z Vue 2 na Vue 3 z typowaną architekturą i twardymi regułami lintowania, żeby nowy kod nie odziedziczył starych problemów.
- 02Czytaj dalej
Audyt wydajności
Znajduję kaskady requestów, zduplikowane zapytania i zbędną reaktywność, które spowalniają aplikację Vue lub Nuxt i kosztują pieniądze. Potem to naprawiam.
- 03Czytaj dalej
Mikrofrontendy
Granice między aplikacjami, typowane kontrakty, wspólna biblioteka komponentów i środowiska per feature, na bazie platformy z około 28 aplikacjami Vue.
03 Wpływ
Liczby, nie przymiotniki.Ponad dekada produkcyjnych frontendów w liczbach.
- 01
10+
Lat dowożenia produkcyjnych frontendów
- 02
28+
Mikrofrontendów w jednej żywej platformie
- 03
5+
Lat z tym samym klientem — i dalej
- 04
11+
Projektów dowiezionych na produkcję
04 Wybrane akta
Akta niejawne.Frontendowe case studies — nazwy klientów utajnione.
Większość moich projektów chroni NDA. Oto więc akta sprawy — nazwy ocenzurowane, wyniki nietknięte.
Ratunek wydajności: Vue 2 → 3
Przepisana na Vue 3 aplikacja była wolna, zanim trafiła na produkcję. Typowana warstwa zapytań, rygorystyczny tooling i celowana inwalidacja w czasie rzeczywistym usunęły kaskady requestów i uporządkowały przepływ danych.
Cięcie kosztów tłumaczeń w chmurze
Publikacja tłumaczeń rozlewała się na wszystkie klastry, aplikacje i języki. Prześledziłem ścieżkę requestów i znalazłem powtarzane pobrania cache'a, które generowały koszt; poprawkę wdrożył inny zespół.
Tygodniowy planer posiłków
Zaproponowałem drag & drop jako główny model interakcji. Planowanie tygodnia posiłków przestało być przeklikiwaniem formularzy i stało się układaniem ekranu w kilka sekund.
Biblioteka komponentów Vue 3 w Storybooku
Zaprojektowałem i wdrożyłem wspólną bibliotekę komponentów Vue 3 w Storybooku — jedno spójne źródło powtarzalnych wzorców UI dla zespołów frontendowych platformy i mniej dublowanej pracy nad komponentami.
Izolowane środowiska Kubernetes per feature
Każdy feature dostał własne, izolowane środowisko na Dockerze i Kubernetesie w platformie 28+ mikrofrontendów, a z zespołem DevOps rozwijałem pipeline'y CI/CD w Azure, dzięki którym aplikacje wdrażają się niezależnie.
wirtualnycmentarz.pl
Vue 2 + TypeScript z SSR i złożonymi przejściami między ekranami. Cache'owanie zasobów i danych przez Service Workera, lazy loading przez IntersectionObserver i wizualizacje pogody na canvasie. Mój pierwszy duży projekt — pasuje do mojego gustu filmowego.
05 Stack
Narzędzia, którym ufam.Vue 3, Nuxt, TypeScript — i wszystko wokół.
Core10+ yrs
- Vue 301
- Nuxt02
- TypeScript03
- Tailwind CSS04
W tym myślę. Codziennie, od lat.
Migracja Vue 2 → 3queries/orders.ts
1// one typed source of truth2export const orderKeys = {3 all: ['orders'] as const,4 detail: (id: string) => [...orderKeys.all, id] as const,5}6 7// real-time: invalidate exactly what changed8hub.on('OrderUpdated', ({ id }: OrderEvent) =>9 queryClient.invalidateQueries({10 queryKey: orderKeys.detail(id),11 }),12)NORMALPoprawka, która przyspieszyła wolną aplikację: typowane query keys + celowana inwalidacja w czasie rzeczywistym.ts · utf-8
Dane i real-time
- GraphQL · Apollo
- TanStack Query
- SignalR
- REST
- single-spa
- Pinia
Backend
- NestJS
- Express
- Node.js
- PHP · Laravel
- .NET
- PostgreSQL
- Redis
- MongoDB
Bramki jakości
- Vitest
- Cypress
- Storybook
- Biome
- Git hooks
- Strict TS
- Code review
Infra i wdrożenia
- Docker
- Kubernetes
- Azure
- CI/CD
- Linux · VPS
AI / LLM
Workflow wspierany przez AI i integracje z LLM. Mnożnik, a nie zamiennik myślenia.
Skróty Neovima. W VS Code.
Tak, wiem, jak wyjść. Po prostu rzadko chcę.
:wq
06 Proces
Jak pracuję.Senior frontend w modelu B2B, zdalnie.
„On kompiluje kod samym wzrokiem.”
01
Pytam
Kwestionuję zadanie, zanim napiszę kod. Najtańszy bug to ten, którego nikt nie zbudował.
02
Projektuję
Jasne granice, typowane kontrakty, zero ukrytego couplingu. Komponenty tworzone z myślą o reużyciu.
03
Pilnuję
Ścisły linter, formatowanie, hooki pre-commit i pre-push. Code review, który widzi to, co nieoczywiste.
04
Dowożę
Szybko dla użytkownika, tanio w utrzymaniu dla klienta, czytelnie dla kolejnego developera. Po drodze: mentoring i rozmowy techniczne z kandydatami.
07 Kontakt
Masz produkt,który warto zrobić dobrze?
Dostępny part-time, B2B, zdalnie. Napisz, co budujesz — odpowiadam w ciągu jednego dnia roboczego.
Wolisz e-mail?