StarterPacks
Kasutusvalmis rakendusemallid, mille kujundust saate enne ostu reaalajas muuta. Valige värvid, kirjatüübid ja nurkade raadius ning vaadake, kuidas päris mall nendega brauseris ja päris iOS-i simulaatoris renderdatakse.
- esimene iOS-i renderdus, varem 43,4 s
- 3,7 s
- ekraanivaate vahetamiseks töötava simulaatoriga
- 0,1 s
- renderdust praegu kettal vahemälus
- 761
- Mac mini teenindab kõike
- 1
Mall näeb välja nagu iga teine, kuni annate sellele oma näo.
Malli ostes tuleb tavaliselt usaldada kellegi teise värvides kuvatõmmist. StarterPacks laseb teil kõigepealt näha päris malli enda kujundusega, nii veebis kui ka iOS-is.
Selleks oli vaja kahte renderdajat, kõigile mallidele ühist kujundusreeglistikku ja viisi, kuidas kõike teenindada ilma serveriparki rentimata.
Style Mixer
Iga malli välimuse määrab ühine reeglistik: värvid, kirjatüübid ja nurkade raadius on määratud CSS-i kohandatud omadustena. Värve ei tohi malli koodi püsivalt sisse kirjutada, nii et kujunduse muutmine muudab kõike.
Renderdaja avab päris malli aknata Chromiumis, rakendab pärast laadimist kujunduse lehe juurelemendile ja teeb kuvatõmmise. Tulemused salvestatakse vahemällu URL-i, kujunduse ja vaateala räsi järgi. Nii ilmub varem proovitud kujundus kohe.
Liikumise jaoks leiab see document.getAnimations() abil iga animatsiooni kordusperioodi, peatab lehe ja liigutab virtuaalset kella kaadri kaupa edasi. Edasi liiguvad ainult korduvad animatsioonid, nii et ilmumisanimatsioone ei korrata. ffmpeg kodeerib tulemuse sujuvalt korduvaks videoks.
Ostmisel pakitakse teie kujundusega mall ZIP-failiks teie brauseris. Allalaaditav fail ei läbi ühtegi serverit.
iOS-i simulaator, mida keegi ei näe
iOS-i mallide jaoks käivitab väike teenus simctl-i abil aknata simulaatori, seab olekuriba kellaajaks 9:41 ja avab SwiftUI rakenduse, andes teie kujunduse käivitusargumendina kaasa. Kuvatõmmis kirjutatakse ajutisse faili, mis seejärel nimetatakse ümber lõpliku nimega failiks, et keegi ei saaks poolikut pilti.
Esimene versioon lülitas simulaatori pärast kümmet jõudeolekuminutit välja, nii et päris külastaja võis külmkäivitust oodata 43 sekundit. Nüüd hoitakse kahte simulaatorit töös, üht piltide ja teist video jaoks. Teised ekraanivaated renderdatakse igaks juhuks ette ning kahetasandiline järjekord annab külastaja päringule taustatöö ees eelisõiguse.
Üks viga pani 3-sekundilise renderduse näima 26-sekundilisena: sünkroonne kutse blokeeris Node'i sündmussilmuse. Selle eemaldamine tõi suurima üksiku ajavõidu.
| Renderdus | Enne | Pärast |
|---|---|---|
| Esimene kuvatõmmis | 43,4 s | 3,7 s |
| Kuvatõmmis töötava simulaatoriga | ~5,5 s | 3,2 s |
| Ekraanivaate vahetamine | 5,5 s | 0,1 s |
Kõik ühel Mac minil
Me ei rentinud ühtegi serverit. Sait, mõlemad renderdajad ja mallide majutus töötasid ühel Mac minil Tallinnas Cloudflare'i tunneli taga. Kontode, salvestusruumi ja maksete jaoks kasutasime Supabase'i ja Stripe'i. Alates 2026. aasta oktoobrist tulevad pildid ja videod Maci asemel Cloudflare'i CDN-ist.
Renderdamine on kulukas, seega oleme seadnud piirangud: lubatud päringupäritolude loend, kuni 30 renderdust minutis külastaja kohta, kuni 12 tööd järjekorras ja kuni 8 KB kujundusandmeid päringus. Populaarsed eelvaated renderdatakse ette ja hoitakse püsivalt vahemälus. See lahendas ka külmkäivitusega renderduste probleemi: varem ületasid need puhverserveri 60-sekundilise ajalimiidi.
- külastajatest avas Style Mixeri
- 37%
- lehevaatamisest tuli telefonist
- 2 kolmest
Külastajate ja lehevaatamiste andmed meie enda analüütikast, 11. juulist 24. oktoobrini 2026.
Mis oli keeruline
Vaiksed CSS-i vead
Tailwind v3 jättis otse var() kaudu määratud värvide läbipaistmatuse muutjad vaikselt arvestamata. Kujundusmuutujad kasutavad nüüd nende asemel color-mix()-i.
Vale mall
Üks üleliigne IPv6-l kuulav eelvaateserver vastas esimesena, nii et Chromium renderdas küsitud malli asemel teise.
Blokeeritud sündmussilmus
Simulaatoriteenuse sünkroonne exec peatas ühe renderduse ajaks kõik teised päringud.
Millele pöörasime erilist tähelepanu
Eelvaate jaoks pole eraldi koodi
Mallid ei vaja eelvaateks midagi erilist. Alla laadite sama asja, mida näete renderdatuna.
Valmis enne, kui küsite
Populaarsed eelvaated renderdatakse ette ja hoitakse püsivalt vahemälus. Simulaator renderdab ette ka ekraanivaated, mille tõenäoliselt järgmisena avate.
Täpselt korduv liikumine
Veebieelvaated luuakse päris lehelt kaadri kaupa, mitte ekraanivideona. Nii on liikumine täpne ja korduskoht märkamatu.
Kas teil on idee, mis väärib teostust?
