A frontend még mindig jQuery-n, régi osztálykomponenseken vagy elavult Next.js beállításon fut, és minden változtatás a kelleténél tovább tart. Én modern Reactre vagy Next.js-re helyezem át TypeScriptben, oldalról oldalra, miközben a termék továbbra is működik.
Áthelyezem a jQuery vagy régi React frontendedet modern Reactre vagy Next.js-re, oldalról oldalra
Migrációs terv a frontendhez és egy kis oldal áthelyezve mintaként.
- Terv és egy mintaoldal
- Írásos migrációs terv
- Forráskód
Akár 3 oldal áthelyezve Reactre vagy Next.js-re, az régi kód mellett futva.
- Akár 3 oldal áthelyezve
- Írásos migrációs terv
- Forráskód
Akár 8 oldal, megosztott komponensek, TypeScript típusok és tesztek.
- Akár 8 oldal, komponensek, tesztek
- Írásos migrációs terv
- Forráskód
Egyedi ajánlat kérése
Jelentkezzen be egyedi ajánlat kéréséhez
Hozzon létre egy ingyenes fiókot, vagy jelentkezzen be, hogy személyre szabott ajánlatot kérjen ettől a Zinnertől.
Bejelentkezés / RegisztrációElőzetes értékesítési kérdés feltevése
Jelentkezzen be kérdés feltevéséhez
A platformon történő spam csökkentése érdekében az előzetes értékesítési üzeneteket csak bejelentkezett felhasználók küldhetik el.
Hozzon létre egy ingyenes fiókot, vagy jelentkezzen be, hogy közvetlenül üzenjen ennek a Zinnernek.
Bejelentkezés / RegisztrációBejelentkezés szükséges
Hozzon létre egy ingyenes fiókot, vagy jelentkezzen be, hogy üzenetet küldjön ennek a Zinnernek.
Bejelentkezés / RegisztrációBejelentkezés szükséges
Hozzon létre egy ingyenes fiókot, vagy jelentkezzen be, hogy személyre szabott ajánlatot kérjen.
Bejelentkezés / RegisztrációÁttekintés
Főbb részletek erről a szolgáltatásról, hogy segítsen a döntésben. A Zinn Hub generálta, nem az eladó.
Értékpozíció
Migrációs megközelítés
Technológiai stack
Mi marad érintetlen
Szállítás utáni támogatás
Amit kapni fog
Teljes leírás
Néhány termék működik és pénzt termel, de a frontendjüket nehéz megváltoztatni: jQuery terjedt el a sablonokban, évekkel ezelőtti React osztálykomponensek, vagy egy Next.js alkalmazás még mindig a Pages Routeren. Egy teljes újraírás hónapokra befagyasztja a terméket. Én mást csinálok: a régi és az új kód egymás mellett fut, és az oldalak egyenként költöznek át, így soha nincs nagy átállási nap a felhasználók számára.
Pontosan ezt csináltam egy korábbi, NDA alá tartozó projekten: egy jQuery frontendet Reactre költöztettem oldalról oldalra, miközben a termék élőben maradt.
A Starter csomag a tervet adja: elolvasom a régi frontendet, feltérképezem az oldalait és megosztott részeit, felsorolom a kockázatokat, és egy kis oldalt áttelepítek, mint a megközelítés működő mintáját. A Standard csomag legfeljebb három oldalt vagy képernyőt mozgat át. Az Advanced csomag legfeljebb nyolcat mozgat át, elkészíti a szükséges megosztott komponenseket, és TypeScript típusokkal látja el az adataikat, valamint tesztekkel a fő folyamatokat.
Ami marad: a backend, az URL-ek és a felhasználók által ismert viselkedés. Ami változik: a kód szervezése, így a következő funkció egyszer, egy helyen íródik meg. A szállítás után 14 napig ingyenesen javítok mindent, ami nem működik a megbeszéltek szerint.
Az oldalak sorrendjét és a tervet a rendelési chatben egyeztetjük, hívások nélkül. Minden áttelepített oldal önállóan kerül szállításra, és minden munkanapon írásos állapotjelentést kap.
A projekt befejezésének lépései
1. A régi frontend feltérképezése – átnézem a sablonokat, szkripteket és komponenseket, és felsorolom az oldalakat, a megosztott részeket és minden kockázatos dolgot, mint például a globális állapot vagy az inline szkriptek.
2. A sorrend egyeztetése – Írásos tervet kap: melyik oldal kerül először, mi kerül át vele, és hogyan osztozik a régi és az új kód a terméken, amíg mindkettő létezik.
3. Híd – Az új React vagy Next.js kód a régi kód mellé kerül, olyan útválasztással, amely minden oldalt ahhoz az oldalhoz küld, amelyikhez tartozik.
4. Oldalak áthelyezése egyenként – Minden oldal újraépül, összehasonlításra kerül a régi verzióval, és önállóan átváltásra kerül, így egy probléma egy oldalt érint, nem a terméket.
5. Átadás – Az áttelepített oldalak, a fennmaradó részek frissített terve, és egy rövid megjegyzés a következő oldalakhoz követendő mintákról.
Zinner minőségi garancia
Minden Zinnert felülvizsgálunk és jóváhagyunk, mielőtt csatlakozna a platformhoz.
Minden szolgáltatásunkat minőségbiztosítási kötelezettségvállalásunk támasztja alá.
A kifizetés védett mindaddig, amíg Ön jóvá nem hagyja a leszállított munkát.
Csomagok összehasonlítása
| Funkció | Indító | Standard | Haladó |
|---|---|---|---|
| Szállítási idő | 4 nap | 10 nap | 21 nap |
| Felülvizsgálatok | 1 | 2 | 3 |
| Hatály | Terv és egy mintaoldal | Akár 3 oldal áthelyezve | Akár 8 oldal, komponensek, tesztek |
| Írásos migrációs terv | ✓ | ✓ | ✓ |
| Forráskód | ✓ | ✓ | ✓ |
Portfólió
Példák az eladó munkájára, amely ehhez a Zinnhez kapcsolódik.
Formline: Next.js áruház Stripe-pal
Egy kattintható kirakat: 16 poszter 4 kollekcióban, szűrők és keresés, amelyek az URL-ben maradnak, kosár, világos és sötét témák, és egy pénztár, amely demo rendeléssel vagy valós Stripe Checkout munkamenettel végződik teszt módban. Next.js statikus exportként építettem TypeScriptben Tailwind CSS-sel. A kártyás fizetések egy Cloudflare Worker-en keresztül mennek, amely a szerveren újraárazza a kosarat és ellenőrzi a Stripe webhook aláírását.
Kétnyelvű személyes oldal Next.js-ben
Egyoldalas személyes oldal angol és orosz nyelven, szolgáltatások szekcióval és linkekkel a demó projektjeimhez. Next.js, React és TypeScript segítségével terveztem és építettem statikus exportként, egyszerű CSS modulokkal és UI keretrendszer nélkül. Világos és sötét témákkal rendelkezik, és minden nyelvhez generálódik egy közösségi előnézeti kép a buildelés során. A GitHub Actions építi és telepíti a Bunny CDN-re, amely biztonsági fejléceket ad hozzá, és átirányítja a www-t és a sima HTTP-t a fő HTTPS címre.
Szolgáltatás részletei
Gyakran Ismételt Kérdések
Mert a termék hónapokig állna, és minden kockázat egyetlen kiadási napra hárulna. Oldalról oldalra minden lépés kicsi, tesztelhető és könnyen visszaállítható.
Az oldalak megtartják a címeiket. A Next.js-szel az új oldalak kész HTML-ként jutnak el a böngészőbe, szerveren vagy build időben renderelve, így a keresőmotorok ugyanúgy látják a tartalmat, mint korábban. A Vite-tel működő React a böngészőben renderel, így a keresési forgalmat hozó oldalakhoz a Next.js-t ajánlom.
Igen. Az áttelepített oldalak TypeScriptben íródnak, és a régi kód JavaScriptként fut tovább, amíg sorra nem kerül.
Nem. A migráció csak a frontendet érinti. Ahol a backend már rendelkezik végpontokkal az oldal által igényelt adatokhoz, az új oldal azokat használja. Ha ezek az adatok ma csak PHP által renderelt HTML-ként léteznek, a terv felsorolja az oldal által igényelt kis JSON végpontokat, és megegyezünk, hogy ki adja hozzá őket, mielőtt az oldal átkerül.
Vásárlói vélemények
Nézze meg, mit mondanak ügyfeleink erről a Zinnről
Kategóriák
Zinner irányelvek
Kapcsolódó Zinns
Reszponzív React.js Next.js Redux Firebase webalkalmazások készítése
Teljes stack webalkalmazások fejlesztése React, Next.js, Firebase és AI integrációval
React JS, Next JS, Firebase és MERN Stack fejlesztői szolgáltatások
