თქვენი ფრონტ-ენდი კვლავ მუშაობს jQuery-ზე, ძველ კლასის კომპონენტებზე ან მოძველებულ Next.js-ის დაყენებაზე, და ყოველი ცვლილება იმაზე მეტ დროს მოითხოვს, ვიდრე საჭიროა. მე მას გადავიტან თანამედროვე React-ზე ან Next.js-ზე TypeScript-ში, თითო გვერდზე ერთდროულად, სანამ პროდუქტი გააგრძელებს მუშაობას.
თქვენს jQuery-ს ან მოძველებულ React-ის ფრონტ-ენდს გადავიტან თანამედროვე React-ზე ან Next.js-ზე, გვერდ-გვერდ
თქვენი ფრონტ-ენდის მიგრაციის გეგმა და ერთი პატარა გვერდი, როგორც ნიმუში.
- გეგმა და ერთი ნიმუში გვერდი
- წერილობითი მიგრაციის გეგმა
- წყაროს კოდი
3 გვერდამდე გადატანილია React-ზე ან Next.js-ზე, რომელიც ძველი კოდის გვერდით მუშაობს.
- გადატანილია 3 გვერდამდე
- წერილობითი მიგრაციის გეგმა
- წყაროს კოდი
8 გვერდამდე, საერთო კომპონენტები, TypeScript-ის ტიპები და ტესტები.
- 8 გვერდამდე, კომპონენტები, ტესტები
- წერილობითი მიგრაციის გეგმა
- წყაროს კოდი
მოითხოვეთ მორგებული შეთავაზება
შედით სისტემაში მორგებული შეთავაზების მოთხოვნისთვის
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა მოითხოვოთ პერსონალიზებული შეთავაზება ამ Zinner-ისგან.
შესვლა / რეგისტრაციადასვით შეკითხვა გაყიდვამდე
შედით სისტემაში შეკითხვის დასასმელად
პლატფორმის სპამის შესამცირებლად, გაყიდვამდე შეტყობინებების გაგზავნა მხოლოდ სისტემაში შესულ მომხმარებლებს შეუძლიათ.
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა პირდაპირ მიწეროთ ამ Zinner-ს.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში ამ Zinner-ისთვის შეტყობინების გასაგზავნად.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში პერსონალიზებული შეთავაზების მოთხოვნისთვის.
შესვლა / რეგისტრაციაერთი შეხედვით
ძირითადი დეტალები ამ სერვისის შესახებ, რათა დაგეხმაროთ გადაწყვეტილების მიღებაში. გენერირებულია Zinn Hub-ის მიერ და არა გამყიდველის მიერ.
ღირებულების პოზიცია
მიგრაციის მიდგომა
ტექნოლოგიური სტეკი
რა რჩება ხელუხლებელი
მიწოდების შემდგომი მხარდაჭერა
რას მიიღებთ
სრული აღწერა
ზოგიერთი პროდუქტი მუშაობს და ფულს შოულობს, მაგრამ მათი ფრონტ-ენდის შეცვლა გართულდა: jQuery გავრცელებულია შაბლონებში, React-ის კლასის კომპონენტები წლების წინანდელი, ან Next.js აპლიკაცია ჯერ კიდევ Pages Router-ზე. სრული გადაწერა პროდუქტს თვეობით აჩერებს. მე სხვას ვაკეთებ: ძველი და ახალი კოდი მუშაობს გვერდიგვერდ, და გვერდები სათითაოდ გადადის, ასე რომ, თქვენი მომხმარებლებისთვის არასოდეს არის დიდი გადართვის დღე.
მე ზუსტად ეს გავაკეთე წარსულ პროექტზე NDA-ის ფარგლებში: jQuery-ის ფრონტ-ენდი გადავიდა React-ზე გვერდ-გვერდ, სანამ პროდუქტი ცოცხალი იყო.
Starter გაძლევთ გეგმას: მე ვკითხულობ ძველ ფრონტ-ენდს, ვადგენ მის გვერდებსა და საერთო ნაწილებს, ვადგენ რისკებს და ვახდენ ერთი პატარა გვერდის მიგრაციას, როგორც მიდგომის სამუშაო ნიმუშს. Standard გადააქვს სამ გვერდამდე ან ეკრანამდე. Advanced გადააქვს რვა გვერდამდე, აშენებს მათთვის საჭირო საერთო კომპონენტებს და ფარავს მათ TypeScript-ის ტიპებით მათი მონაცემებისთვის და ტესტებით ძირითადი ნაკადებისთვის.
რა რჩება: თქვენი ბექენდი, თქვენი URL-ები და მომხმარებლებისთვის ნაცნობი ქცევა. რა იცვლება: როგორ არის ორგანიზებული კოდი, ასე რომ შემდეგი ფუნქცია ერთხელ, ერთ ადგილას დაიწერება. მიწოდებიდან 14 დღის განმავლობაში, მე ვასწორებ ყველაფერს, რაც არ მუშაობს ისე, როგორც შევთანხმდით, უფასოდ.
გვერდების თანმიმდევრობა და გეგმა შეთანხმებულია შეკვეთის ჩატში, ზარების გარეშე. თითოეული მიგრირებული გვერდი იგზავნება ცალკე, და თქვენ ყოველ სამუშაო დღეს იღებთ წერილობით სტატუსის შენიშვნას.
თქვენი პროექტის დასრულების ნაბიჯები
1. ძველი ფრონტ-ენდის რუკის შედგენა - მე გავდივარ შაბლონებს, სკრიპტებსა და კომპონენტებს და ვადგენ გვერდებს, საერთო ნაწილებს და ყველაფერს სარისკოს, როგორიცაა გლობალური მდგომარეობა ან ჩაშენებული სკრიპტები.
2. თანმიმდევრობის შეთანხმება - თქვენ მიიღებთ წერილობით გეგმას: რომელი გვერდი მიდის პირველი, რა გადადის მასთან ერთად და როგორ იზიარებს ძველი და ახალი კოდი პროდუქტს, სანამ ორივე არსებობს.
3. ხიდი - ახალი React ან Next.js კოდი დაყენებულია ძველი კოდის გვერდით, მარშრუტიზაციით, რომელიც თითოეულ გვერდს აგზავნის იმ მხარეს, რომელიც მას ფლობს.
4. გვერდების სათითაოდ გადატანა - თითოეული გვერდი ხელახლა იქმნება, შედარებულია ძველ ვერსიასთან და ცალკე გადადის, ასე რომ პრობლემა ერთ გვერდს ეხება და არა პროდუქტს.
5. გადაცემა - მიგრირებული გვერდები, განახლებული გეგმა იმის შესახებ, რაც დარჩა, და მოკლე შენიშვნა იმ შაბლონების შესახებ, რომლებიც უნდა დაიცვათ შემდეგი გვერდებისთვის.
Zinner ხარისხის გარანტია
ყველა Zinner განიხილება და მტკიცდება პლატფორმაზე გაწევრიანებამდე.
ყველა სერვისი მხარდაჭერილია ჩვენი ხარისხის უზრუნველყოფის ვალდებულებით.
თქვენი გადახდა დაცულია მანამ, სანამ არ დაამტკიცებთ შესრულებულ სამუშაოს.
პაკეტების შედარება
| ფუნქცია | დამწყები | სტანდარტული | მოწინავე |
|---|---|---|---|
| მიწოდების დრო | 4 დღეები | 10 დღეები | 21 დღეები |
| რევიზიები | 1 | 2 | 3 |
| ფარგლები | გეგმა და ერთი საცდელი გვერდი | 3 გვერდამდე გადატანილია | 8 გვერდამდე, კომპონენტები, ტესტები |
| წერილობითი მიგრაციის გეგმა | ✓ | ✓ | ✓ |
| წყაროს კოდი | ✓ | ✓ | ✓ |
პორტფოლიო
გამყიდველის ნამუშევრების მაგალითები ამ Zinn-თან დაკავშირებით.
Formline: Next.js მაღაზია Stripe-ით
მაღაზია, რომელშიც შეგიძლიათ დაათვალიეროთ: 16 პოსტერი 4 კოლექციაში, ფილტრები და ძებნა, რომლებიც რჩება URL-ში, კალათა, ღია და მუქი თემები, და გადახდა, რომელიც მთავრდება დემო შეკვეთით ან რეალური Stripe Checkout სესიით ტესტის რეჟიმში. მე ავაშენე ის, როგორც Next.js სტატიკური ექსპორტი TypeScript-ში Tailwind CSS-ით. ბარათით გადახდები ხორციელდება Cloudflare Worker-ის მეშვეობით, რომელიც ხელახლა აფასებს კალათას სერვერზე და ამოწმებს Stripe-ის webhook ხელმოწერას.
ორენოვანი პირადი საიტი Next.js-ში
ერთგვერდიანი პირადი საიტი ინგლისურ და რუსულ ენებზე, სერვისების განყოფილებით და ბმულებით ჩემს დემო პროექტებზე. მე შევქმენი და ავაშენე ის Next.js-ით, React-ით და TypeScript-ით, როგორც სტატიკური ექსპორტი, სტილიზებული უბრალო CSS Modules-ით და UI ფრეიმვორკის გარეშე. მას აქვს ღია და მუქი თემები, და თითოეული ენისთვის სოციალური გადახედვის სურათი გენერირდება აგების დროს. GitHub Actions აშენებს და აქვეყნებს მას Bunny CDN-ზე, რომელიც ამატებს უსაფრთხოების სათაურებს და გადამისამართებს www-ს და უბრალო HTTP-ს მთავარ HTTPS მისამართზე.
სერვისის დეტალები
ხშირად დასმული კითხვები
რადგან პროდუქტი თვეობით გაჩერდებოდა და მთელი რისკი ერთ გამოშვების დღეს დაეცემოდა. გვერდ-გვერდ, ყოველი ნაბიჯი მცირეა, ტესტირებადი და ადვილად უკან დასაბრუნებელი.
გვერდები ინარჩუნებენ თავიანთ მისამართებს. Next.js-ით, ახალი გვერდები ბრაუზერში მზა HTML-ის სახით ხვდება, რენდერირებული სერვერზე ან აგების დროს, ასე რომ საძიებო სისტემები ხედავენ კონტენტს ისე, როგორც ადრე. React Vite-ით რენდერირდება ბრაუზერში, ამიტომ გვერდებისთვის, რომლებიც საძიებო ტრაფიკს იზიდავს, Next.js-ს გირჩევთ.
დიახ. მიგრირებული გვერდები დაწერილია TypeScript-ში, და ძველი კოდი აგრძელებს მუშაობას JavaScript-ად, სანამ მისი ჯერი არ დადგება.
არა. მიგრაცია მხოლოდ ფრონტ-ენდს ეხება. სადაც თქვენს ბექენდს უკვე აქვს ენდპოინტები გვერდისთვის საჭირო მონაცემებისთვის, ახალი გვერდი მათ იყენებს. თუ ეს მონაცემები დღეს მხოლოდ PHP-ის მიერ რენდერირებული HTML-ის სახით არსებობს, გეგმაში ჩამოთვლილია მცირე JSON ენდპოინტები, რომლებიც გვერდს სჭირდება, და ჩვენ ვთანხმდებით, ვინ დაამატებს მათ ამ გვერდის გადატანამდე.
მომხმარებელთა შეფასებები
ნახეთ, რას ამბობენ ჩვენი მომხმარებლები ამ Zinn-ის შესახებ
კატეგორიები
Zinner-ის პოლიტიკა
მსგავსი Zinns
შექმენით მორგებული ვებ აპლიკაციები React JS, Node JS & Google Firebase-ის გამოყენებით
