 Jadi mari kita lanjutkan momentum yang hebat dari pemeriksaan pertama kita. Jadi titik kita di sini adalah modernisasi legacy 20-an. Jadi dengan legacy 20-an, kita mengenai aplikasi Sumpi kita yang telah berjaya selama 20 tahun. Dan dengan modernisasi, kita ingin menerima aplikasi yang berdasarkan masalah yang kita telah melihat selama beberapa tahun yang terakhir. Jadi pertama, just a brief introduction. Jadi di sini saya ada Amiw, dan nama saya Wei Yuan. Ia menunjukkan. Jadi ya, we're full stack engineers from Rocket Mviki. Okey, pertama pertanyaan, apa yang Sumpi? Untuk menerimanya dengan satu perkataan, K-POP. Jadi aplikasi platform yang menerimanya untuk menyelamatkan pemeriksaan terlebih dahulu untuk K-POP. Untuk K-POP fans. Dan mengenai legacy 20-an, anda dapat melihat. Jadi ini adalah pemeriksaan bagaimana anda nampak di 1999. Sangat ramai pemeriksaan dari sisi di masa itu. Okey. Dan jalan ke depan hari ini. Jadi ini adalah pemeriksaan yang telah diperlukan selama beberapa tahun sebelum kita melakukan pemeriksaan. Jadi anda dapat melihat ia nampak relativnya modernisasi. Dan ini adalah apabila ia diselamatkan pada pemeriksaan. Okey. Jadi sekarang yang kita telah melihat pemeriksaan, anda tahu ia nampak relativnya modernisasi. Kenapa ada perlukan untuk kami untuk menerima pemeriksaan ini? Okey, jadi hidupnya di bawah aplikasi dalam masalah yang kita telah melihat. Okey, pertama masalah. Pemeriksaan legacy, dan juga pemeriksaan liki. Jadi kami dapat tahu bahawa pada masa ini, kami ada banyak pemeriksaan legacy. Kerana pemeriksaan, anda tahu, apabila mereka menghidupkan projek, mereka menghidupkan pemeriksaan pemeriksaan. Pemeriksaan selepas pemeriksaan. Jadi kami ada banyak pemeriksaan yang terlalu rendah. Di masa awal, kami tidak mempunyai pemeriksaan. Dan kami pun menjaga masalah di mana kami mempunyai pemeriksaan pemeriksaan. Mereka mempunyai pendapatan sekolah bersama-sama. Jadi lebih susah mempunyai pemeriksaan. Pemeriksaan liki, kami berkiranya kemahiran pemeriksaan. Jadi mari kita mempunyai pemeriksaan kemahiran pemeriksaan. Jadi untuk pemeriksaan pemeriksaan, anda ada pemeriksaan yang menggantikan. Jadi ia seperti pemeriksaan pemeriksaan. Anda memasukkan beberapa peringkat, ia memasukkan beberapa peringkat yang dipercaya. Tapi jika anda mempunyai pemeriksaan kembali ke pemeriksaan. Kita melihat bahawa pemeriksaan kita dapat melakukan, ada banyak perempuan yang dapat mengubah sesuatu di tengah. Pada masa yang sama, ia dapat mengubah sesuatu di CSS, pemeriksaan pemeriksaan pemeriksaan, ia dapat mengubah sesuatu di database, pemeriksaan pemeriksaan di data, dengan semua pemeriksaan ini. Kemudian anda mempunyai semua pemeriksaan ini di atas satu sama lain. Jadi anda menjadikan situasi di mana pemeriksaan tidak lagi ada pemeriksaan pemeriksaan. Pemeriksaan pemeriksaan merupakan pemeriksaan pemeriksaan. Jadi ini menjadikan ke situasi ini semasa kita menjadikan pemeriksaan menjadi lebih sederhana dan lebih efisien. Dan ini di setiap keadaan dari K-POP BINGMAW dalam beberapa tahun. Jadi anda dapat meningkatkan pemeriksaan di atas. Dan keadaan di mana anda dapat berhubungan. Ada pemeriksaan yang beritahu bahawa mereka mengubah sesuatu lain pemeriksaan. Jadi pada masa itu, anda dapat sebuah keadaan yang besar untuk keadaan kita. Pada masa yang panjang, dari media sosial yang berbeza. Jadi apabila itu berlaku, kami menjadikan keadaan, keadaan, keadaan. Jadi untuk setiap keadaan, kami akan menghubungi pemeriksaan untuk mengubah masalah. Untuk menghubungi pemeriksaan, mengubah sesuatu pemeriksaan, tetapi masalah ini dilatihkan pada masa. Dan kami dapat tahu kami hanya mengubah sesuatu di setiap keadaan. Jadi kami perlu melakukan sesuatu untuk mengubahnya dalam masa yang lama. Jadi ada dua pemeriksaan yang kami dapat mengambil. Kalaulah kami dapat menghubungi pemeriksaan yang tidak berlaku dari sistem kami. Kami akan mengambil semua pemeriksaan yang tidak berlaku yang kami mengubah pada masa. Atau kami dapat melihat mengubah pemeriksaan. Dan apa yang menghubungi kami pada melihat pemeriksaan adalah kerana prototipa yang kami membangun dalam pemeriksaan. Pada pemeriksaan lain yang kami membangun, bagi contoh, kami mempunyai sumpi award di sini yang adalah aplikasi single-page yang membangun menggunakan reakrouter. Di mana kami dapat melihat kebaikan bagaimana aplikasi single-page dapat menggunakan kebaikan kepada pemeriksaan. Jadi sekarang kami mempunyai mengubah pemeriksaan. Kami ingin mempunyai sesuatu pemeriksaan. Apa yang kami ingin mencapai dengan pemeriksaan ini? Jadi pertama, seperti yang diberikan di sebelah slide, membuat aplikasi single-page yang membangun. Pertentangan kedua adalah aplikasi single-page yang membangun. Jadi ini adalah pemeriksaan yang membangun bahawa pemeriksaan telah membangun tidak memperkenalkan dengan teknologi yang berlainan pada pemeriksaan yang berlainan. Jadi mengapa kami tidak membangun mereka semua bersama-sama dan membangun kebaikan dalam pemeriksaan single-page ini? Dan akhirnya, kami memutuskan bahawa kami ingin menggunakan aplikasi single-page GCP sebagai pilihan infrastruktur kami kerana pemeriksaan untuk pemeriksaan yang lain yang kami membangun bahawa ia sangat mudah untuk membangun aplikasi otoskale. Jadi saya akan menghantar Ammew yang akan bercakap tentang pengalaman rehat. Hai, semua. Ini sebenarnya kali pertama saya berbicara di Singapura. Jadi sebenarnya saya sangat lapar. Jadi waktu rehat. Nampak seperti pengalaman, kan? Jadi mari kita mulakan aplikasi isomorfik. Jadi jika kita berfikir tentang aplikasi isomorfik dalam termasuk javascript, apa yang sebenarnya bermakna? Okey? Jadi biasanya javascript hanya bergerak pada klihatan, kan? Kita semua tahu itu. Maksud saya, hanya bergerak pada pemeriksaan. Jadi dan ia menggunakan pemeriksaan pemeriksaan anda untuk mengalami sesuatu, untuk menghantar dan menghantar pemeriksaan anda. Jadi tetapi dengan pemeriksaan no.js ia sebenarnya menjadi sebuah pemeriksaan yang sangat compel. Lengah juga, kan? Jadi dan plus dengan dengan membuat aplikasi isomorfik kita juga mengalaminat masalah kontek perubahan. Jadi bagi contoh, jika anda menggunakan rubi untuk ke belakang, dan kemudian anda menggunakan reak untuk ke depan anda. Jadi semua orang akan hanya oh, ini rubi. Oh, ini reak. Oh, ini rubi, ini reak. Jadi kita mengalaminat semua itu dengan hanya melakukan javascript seluruh semuanya. Okey. Jadi, jadi seperti yang kita katakan, seperti ini ia adalah aplikasi javascript universal. Jadi semuanya adalah aplikasi javascript. Dan dengan melakukan itu, kadang-kadang pemeriksaan bandar anda dapat melakukannya dengan mudah. Ia boleh pergi dari mula dari 1MB dan seterusnya ia pergi 2MB dan kemudian 4MB dan 5MB. Dan anda tidak mahu untuk aplikasi anda untuk melakukan itu. Ia akan mengambil sekejap untuk memasukkan. Ia akan mengambil 10 sekejap untuk aplikasi anda untuk melakukannya. Jadi apa yang kita lakukan adalah kita melakukannya untuk membuatnya lebih cepat dan ia hanya memasukkan apa yang pemeriksaan anda perlukan. Jadi apabila ia melakukannya ke pemeriksaan rumah, ia hanya membutuhkan pemeriksaan rumah yang pemeriksaan rumah perlukan. Dan tidak tidak semua file javascript. Okey. Jadi lepas ini saya akan menunjukkan demo bagaimana perkara ini berlaku. Tapi, okey. Jadi sekarang kita adalah isomorphik dan sekarang kita memasukkan pemeriksaan. Apa yang berlaku kemudian? Okey. Pada kemudian adalah kita juga mahu menjadi SPA. Jadi kita tidak mahu pemeriksaan untuk memasukkan. Jadi anda tahu dengan dengan aplikasi web normal anda klik pada pemeriksaan yang berlaku. Ia memasukkan seluruh jalan. Memasukkan semua aset anda lagi seperti JS, CSS dan kemudian memasukkan pemeriksaan anda. Kita juga tidak mahu itu berlaku kepada pemeriksaan kita. Jadi kita mahu semua untuk menjadi berlaku selama 4 bulan. Jadi dengan memasukkan SPA kita memasukkan pengalaman seluruh jalan. Kita memasukkan latihan kita. Jadi, pemeriksaan tidak tahu bahawa pemeriksaan mempunyai dari satu yang lain ke satu yang lain tanpa memasukkan aplikasi anda. Okey. Jadi, ya. Jadi itu yang kita lakukan. Dan saya akan menunjukkan anda sedikit demonstrasi. Di mana? Di mana? Di mana? Ya. Ya. Okey. Terima kasih. Terima kasih. Terima kasih. Terima kasih. Saya hanya klik. Ya. Ya. Ini kita. Okey. Jadi ya. Jadi ini adalah kode splitting dan reak router dalam akcik. Jadi seperti yang anda lihat, ia tidak memasukkan pemeriksaan dan ia hanya memasukkan apa yang perlu. Jadi pemeriksaan dan kemudian tentang dan kemudian kontak. Jadi dengan dengan itu dalam mind dengan eskip eskip. Kita pergi. Okey. Jadi kembali, kembali, kembali, kembali. Okey. Jadi ya. Jadi kita sudah memperbaiki performa dari web kita dengan hanya melakukan tiga perkara. Okey. Jadi tapi kita masih mahu lebih. Kita masih mahu memberikan kepadamu kita kepadamu kita sedikit lebih. Jadi okey. Jadi dengan itu kita juga menambah kepadamu kita kepadamu kita. Kerana kita adalah sangat, sangat kepadamu yang panjang. Jadi k-pop, fans hanya ingin melihat gambar. Kadang-kadang mereka tidak bahan-bahan bahan-bahan. Mereka hanya melihat gambar dengan adil mereka. Jadi dengan memasukkan gambar kita, kita menghargai banyak data juga untuk pemeriksaan kita dan untuk pemeriksaan kita. Jadi apa yang kita lakukan adalah kita memasukkan dulu gambar kepadamu yang panjang dan kemudian setelah itu bahan-bahan kepadamu datang untuk melihat kepadamu kita memasukkan gambar kepadamu yang panjang. Jadi ini sebenarnya menunggu di sana untuk dilatih. Okey. Jadi dan juga seperti seperti telah anda pernah pergi ke pemeriksaan kita dan kemudian ia mulai dengan wajah untuk seperti 5 sekejap dan atau 10 sekejap. Jadi orang akan hanya mahu pergi jika seperti baga-baga ini ini mungkin seperti menggunakan sebaru sekejap data. Apa yang website ini akan lakukan kepada plan data saya? Bagus. Saya akan keluar dari sana. Jadi mereka tidak akan balik lagi. Jadi kami telah memasukkan pemeriksaan kita sangat-sangat sangat-sangat minimal dan kita juga perlu mempercayai aset kita dari memasukkan. Jadi mereka akan memasukkan satu sekejap dan mereka tidak akan menunggu satu-satunya. Ia akan mulai pula yang pertama sudah dan website anda akan memasukkan untuk semua orang dalam sekejap sekejap. Okey. Jadi iya jadi jadi itu itu semua yang kita lakukan. Betul. Tapi bagaimana kita memasukkan semua ini? Bagaimana kita bagaimana kita memasukkan ini? Bagaimana kita bagaimana kita memasukkan hal ini? Jadi seperti yang anda menyebabkan kami memasukkan ini untuk Google App Engine sebuah pemeriksaan. Kerana ia sangat mudah untuk memasukkan. Untuk kita kita hanya memasukkan dan kemudian itu kita dapat kita bahkan memasukkan kawal kami untuk memasukkan untuk kami. Jadi ia hanya untuk menunggu dan kemudian ia di sana. Kemudian kemudian baru berhasil. Jadi dan plus ia ia semua memasukkan jadi ia boleh memasukkan sangat, sangat cepat tanpa kita membuat apa-apa. Okey. Jadi jadi tetapi tentu anda semua tidak di sini untuk cerita. Betul. Anda ingin melihat nombor anda ingin melihat bagaimana bagaimana rirai berjalan. Rirai ini berbicara banyak-banyak perkara tentang anda tahu memperbaikkan itu memperbaikkan itu. Tetapi anda ingin melihat nombor betul. Jadi dan pada bahagian itu saya akan memberikan rindu kembali untuk memasukkan untuk mengajar sedikit lebih tentang metrik setelah rirai. Terima kasih. Okey. Jadi mari kita melihat alasan alasan rirai kita yang kita lakukan pada tahun terakhir. Okey. Sebelum kita mulai mari saya pertama bercakakan tentang rindu yang kita gunakan untuk memperbaikkan performa rindu individu web. Jadi kita gunakan kembali kembali yang menolakkan kita untuk memperbaikkan anda tahu apabila anda melahirkan pakaian apabila anda memperbaikkan rindu kembali apabila ia menghubungi rindu sepanjang pakaian seperti itu. Jadi dari sini kita dapat memasukkan rindu kita ke dalam 3 kategori yang berbeda. Okey. Pertama kategori pertama perlukan latihan jadi dari perlukan latihan anda dapat mengharapkan ini maaf anda dapat mengharapkan ini dari rindu seperti kategori yang berbeda seperti kategori yang berbeda sepanjang masa. Jadi latihan perlukan latihan penting untuk kami bukan kerana ia berlainan tapi lebih lebih adalah kecepatan yang pakaian anda memasukkan. Jadi dengan mempengaruhkan latihan perlukan latihan ini bermaksud anda dapat memasukkan pakaian anda lebih awal semasa rindu anda memasukkan. Jadi untuk memperbaikkan mereka dari memasukkan rindu anda untuk beberapa lagi website. Okey. Jadi anda dapat melihat untuk kedua-dua kategi yang kita mempada lebih baik. Okey. Kategori kedua latihan sebenar sendiri. Jadi selepas kita beritahu anda dapat melihat untuk kedua-dua kategori ini kami memiliki atau lebih perbaiki dalam kategori latihan yang berbeda. Okey. Jadi kata-kata sangat jelas anda memiliki lebih baik latihan kategori anda memasukkan lebih cepat lebih baik pengalaman. Okey. Kategori terakhir kategori berlainan. Jadi untuk kategori berlainan kami menyebabkan kepada kategori yang berbeda yang anda memasukkan di dalam kategori seperti pagi anda memasukkan. Jadi anda memiliki kategori seperti HTML size, CSS, JS dan sebagainya. Kemudian kami mempunyai setelah kami membuat kita memulai kategori ini. Okey. Jadi kategori berlainan adalah penting bukan hanya untuk kategori maaf, bukan hanya untuk kategori klien tetapi juga untuk kategori kategori. Okey. Untuk kategori kategori mempunyai kategori berlainan bermaksud anda dapat membuat lebih dengan lebih. Okey. Dan sebagainya untuk kategori klien ada sebenarnya dua pengalaman. Kategori lebih tinggi untuk memasukkan lebih baik latihan. Okey. Dan satu pengalaman adalah yang kita katakan jadi kita memasukkan memasukkan kategori. Kita akan kata ada kategori kategori kategori 1 GB per sebulan. Ya. Dan saya memasukkan kategori ini. Ia mengambil 100MB untuk memasukkan kategori ini. Jadi itu seperti 10% kota yang saya berlainan memasukkan dengan hanya satu pengalaman. Jadi itu adalah pengalaman yang terdapat dalam keadaan pengalaman pengalaman pengalaman. Saya tidak ingin memasukkan kategori ini lagi. Okey. Jadi di sini kita dapat lihat bagaimana kategori kategori sebenarnya memasukkan pengalaman pengalaman pengalaman. Okey. Jadi apa yang kita lakukan yang kita belajar dari kategori ini? Okey. Jadi beberapa kebaikan dan kategori. Okey. Satu kata-kata adalah kita merenungkan bahawa kita harus memulangkan memulangkan kategori kita dalam kategori kota yang berlainan dalam kategori kota yang berlainan. Bukan dalam aplikasi sendiri. Jadi ini akan memuangkan kita untuk memasukkan kategori yang berlainan di sebuah pembentangan yang kita memulangkan di masa depan. Okey. Dan saya rasa itu adalah jenis jenis. Jadi kita memulangkan aplikasi jenis jenis. Tetapi ini juga bermaksudah untuk pengalaman pengalaman ketika mereka berbunuh dalam projek, mereka mungkin akan memasukkan ketika aset servis anda berlainan dan ketika ia berlainan. Jadi ini mungkin berlainan dalam situasi di mana kebenaran yang berlainan kepada aset klien anda. Jadi pastikan kita periksa bahawa PR yang telah dibuat dengan baik-baik saja. Pastikan ini tidak berlainan. Okey. Dan satu perkara lain adalah menggunakan aplikasi jenis kita dapat membuat kejadian untuk perangkatan untuk perangkatan GCP. Seperti sebab kita dapat menggunakan pengalaman jenis untuk memulangkan perangkatan dan perangkatan dari jenis jenis. Dan untuk membangunkan di atas ini, kita membangunkan mekanikkan mekanikannya untuk membuat kita tahu apabila perangkatan sistem membasuhkan. Okey. Dan akhirnya, sebuah pilihan yang kita belajar menggunakan aplikasi jenis jenis itu adalah sebenarnya pilihan untuk aplikasi jenis adalah sebuah region per projek. Dan ini sangat susah jika kita mahu secara regionalis dalam masa depan. Itu adalah sesuatu yang kita perlukan dalam masa depan. Okey. Jadi akhirnya, apakah kita pilih untuk fezukkan? One of the things we wanted to achieve adalah, why not use next.js to create our single-page application instead of reinventing the wheel using react-router. And in Rewriting this application we take note of different performance metrics but one of the things we did not take note of was site accessibility.So that's another thing that we should look into. Third point, 3 shaking, this is a little bit peculiar because we just rewrote the app. Where's the legacy code membuat kode terserah. Tapi perkara ini, kode terserah tidak datang pada sebuah sejauh hari. Kamu memiliki kode terserah yang dibina, kode terserah yang dibina sehari. Jadi membuat kode terserah yang terkenal supaya kamu dapat menghubungi kode terserah. Dan akhirnya, membuatkan keadaan sistem kita, kenapa tidak memasukkan keadaan performa? Semuanya yang kita baca dibina oleh keadaan performa di tempat pertama memasukkan keadaan performa kamu supaya kamu dapat menghubungi diri apabila performa membesar, apabila kamu membuat sesuatu keadaan. Jadi, kamu tahu, kamu dapat menghubungi diri kita apabila kita harus, kita membuat kode yang kita membesar jika ia membuat keadaan performa. Jadi, itu akhirnya untuk kode terserah. Jadi, saya harap kamu menikmati. Kodak kamu, kamu membuat kode terserah dengan kodak yang terkenal di tempat kedua, jadi kamu ingin menggantikan keadaan performa kamu? Kamu tak menggantikan? Ya. Jadi, kita tidak sebenarnya menggantikan keadaan performa per词 alsa CCP. Jadi, ia masih di sana. Daripada menggantikan keadaan performa, Saya igenklik bahawa, dari siapa yang kekal di serang saja, menjadi keadaan performa, seperti menggantikan校enan tempat yang keadaan Cold牛 screwdriver. dan melakukan kerja mereka. Boleh kita berusaha dengan CMS? Ya, kita berusaha dengan CMS. Boleh kita beritahu? Mungkin satu perkara lain yang saya ingin tahu adalah komponen belakang. Jadi apabila anda dapat aplikasi api, aplikasi aplikasi ini perlu membuat aplikasi aplikasi untuk di mana-mana. Jadi, apabila kita berusaha dengan CMS, kita menggunakan aplikasi belakang. Kita menggunakan aplikasi belakang sebaiknya kita membuat aplikasi belakang dengan aplikasi belakang. Sebenarnya, apabila kita bergerak ke perjalanan untuk membuat aplikasi belakang, bagaimana dengan perjalanan SEO? SEO? Ya, SEO. Okey, jadi, kita mengatakanlah ia adalah isomorphic, jadi kita juga menggunakan rendang server-side pada kerja ini. Jadi, kita menggunakan Node.js sebagai server kita. Dan ia menggantikan segalanya. Jadi, ia sebenarnya menggunakan komponen yang sama yang kita menggunakan di depan. Ya. Jadi, kita hanya akan menambahkan sedikit lebih banyak kepada itu. Jadi, rendang server-side, kita menambahkan informasi. Jadi, keadaan pertama yang datang, ada data sebenarnya di sana. Jadi, untuk perjalanan SEO, ya, apabila bot bergerak, bahkan untuk bot yang tak faham javascript, kemudian ada data untuk mereka bergerak.