 So, my name is Aaron. I love Vue.js and what I do is I ship various products with Vue.js, crypto, trading, platform, travel, industry and I organize the Vue.js meet-up and also co-organize the React.js meet-up. Saya ingin mencoba framework lain juga untuk memperkenalkan diri saya bahwa Vue.js adalah baik. Dan tawaran saya adalah Rubajit. Sebenarnya, kawan saya, dia suka Vue.js juga, tetapi setiap hari dia bekerja di React pada hari ini. Jadi, dia membuat komponen untuk aplikasi internasional. Dia memperkenalkan, memberikan kelas malam di syarikat yang kita bekerja dengan Seneca. Kita juga ada beberapa bantuan dari Vue.js meet-up group Shirling dan Eugene di sana. Jadi, jika anda ada bantuan, silakan tangan dan tanya mereka. Ya, mereka akan membantu. Jadi, jika anda mulakan, silakan tangan, silakan. Tolonglah. Kami mahu anda bergerak. Pada selanjutnya, kita tidak ada agenda kerja. Kami hanya mahu membuat... Semoga ini adalah tawaran anda, yang adalah untuk memperkenalkan kelas anda tentang NUXJS. Jika anda tahu beberapa bantuan atau React adalah baik. Jika anda tidak, anda boleh tanya di sekitar. Kerana, saya rasa bahagian-bahagian di sini tidak mempunyai Vue atau React. Ya, semoga ada beberapa bantuan yang benar, siap, framework dan tanya yang akan diperkenalkan di sini. Ya, jadi ada beberapa konten unik yang belum di Google. Jadi, anda boleh menulisnya nanti. Jadi, anda boleh berkongsi ini selepas itu. Baiklah. Semoga ada sesuatu yang anda inginkan. Pertama-tama memperkenalkan atau memperkenalkan. Ya, dan kemudian bahan-bahan terdapat. Jadi, nanti kita akan memperkenalkan lagi. Okey, jadi. Selepas itu, apa yang adalah NUXJS? Jadi, ia adalah sebuah framework untuk membuat aplikasi VueJS. Jika anda tahu apa yang ini adalah untuk React, NUXJS adalah sebuah framework yang sama. Jadi, apa framework ini? Saya akan jelaskan lagi selepas itu. Okey, terima kasih. Jadi, VueJS. Jadi, beberapa perkara yang kita ingin menunjukkan dulu. Okay, React. Jadi, kita ada 3 framework yang sangat popular. React adalah dibina oleh seseorang dari Facebook. Jadi, ia sudah diinfluensi oleh seseorang kata-kata XHP. Yang adalah beberapa framework TML untuk PHP yang saya tidak tahu betul-betul apa ini. Tetapi, anda boleh lihat di Wikipedia. Jadi, masalahnya dengan yang kami mencari apabila saya bekerja dengan React, dan beberapa orang lain adalah untuk komponen yang lebih tinggi. Apabila anda ada banyaknya, ia seperti kembali ke program objek, apabila anda perlu menghubungkan dan ia sangat susah untuk menemukan tempat-tempatnya. Okey, selanjutnya. Okey, AngularJS. Banyak perubahan. Selanjutnya. Oh ya, satu lagi. RxJS sebenarnya adalah perkara yang sangat fantastik, tetapi mereka menggunakan semuanya di mana-mana. Jadi, ia tidak sangat bagus. Kerana ia adalah perkara yang sangat bagus, tetapi hanya terlalu bagus. Okey. Jadi, Vue.js. Okey, apa yang sangat bagus tentangnya? Pertama, ia sepatutnya lebih cepat dan lebih kecil daripada kedua-dua. Dan ia adalah komponen yang paling standard dari semua kata-kata. Apabila anda melihat komponen, anda melihat perkara ini adalah slot. Apabila anda melihat Vue.js dan anda melihat slot-kata, ia adalah perkara yang sangat mudah. Ya. Anda dapat melakukan banyak perkara lain juga. Seperti transisi Css, semua perkara ini adalah sangat cepat dalam Vue.js. Ya. Okey. Tapi apabila anda menggunakan Vue, Angular, React, atau bahkan Ember, Svelte, atau vanilla.js, anda perlu tahu tentang 4 perkara ini, aplikasi single-page, rendah server-side, sites static, dan web progressif. Okey. Jadi, sesiapa yang tidak tahu perkara ini, semua tahu, kan? Ya. Okey. Jadi, web progressif adalah sesuatu dengan Google. Di mana sebenarnya, perkara yang berlaku berlaku berlaku berlaku berlaku berlaku berlaku berlaku berlaku. Jadi, anda menambahkan sesuatu yang anda boleh memasukkan semua perjalanan. Ya. Semua perjalanan. Dan itu... Ya. Apa itu? Perjalanan perjalanan? Ya. Ya. Perjalanan perjalanan untuk memasukkan perjalanan. Perjalanan perjalanan, dan juga perjalanan perjalanan, supaya anda boleh memasukkan aplikasi di telefon yang boleh bekerja di mode offline. Ya. Itu yang menguruskan web progressif. Jadi, mungkin saya akan berjaya lebih jauh lebih jauh dalam bahagian ini. Jadi, aplikasi single page adalah apa yang anda biasanya membuat. Ini adalah file 1.html dan jawa javascript di dalam. Jawa jawa. Okey, jadi ini akan mengambil masa untuk memasukkan. Jika ia adalah file yang besar, aplikasi jauh lebih lama untuk memasukkan. Untuk perjalanan perjalanan, basically, perjalanan perjalanan adalah yang memasukkan perjalanan web. Jadi, file ini sebenarnya lebih jauh apabila anda memasukkan. Apabila anda memasukkan mereka. Ya, jadi, Wi-Fi password ini di sini, menunjukkan perjalanan ini. Saya hanya memasukkan. Jadi, perjalanan perjalanan ia memasukkan perjalanan perjalanan sedikit-sedikit. Semua orang memasukkan perjalanan perjalanan perjalanan. Okey, baiklah. Jadi, mungkin anda akan lebih teruk apabila saya memasukkan. Kerana perjalanan perjalanan, ada banyak perkara untuk dihati-hati apabila anda memasukkan perjalanan perjalanan atau perjalanan perjalanan. Jika anda tidak faham perkara, kita akan menjelaskan nanti. Kemudian, yang terakhir adalah perjalanan statis. Perjalanan statis seperti pada masa lalu apabila anda mempunyai banyak file html, banyak file javascript. Ya, okey. Mari kita jelaskan dengan cepat. Okey, jadi, aplikasi yang akan dihati-hati. Okey, jadi, untuk NUX.js, kita akan memasukkan perjalanan perjalanan perjalanan untuk menghasilkan semuanya untuk anda. Anda tidak perlu memasukkan perjalanan perjalanan untuk semua perjalanan anda. Untuk perjalanan perjalanan, anda juga memasukkan perjalanan, untuk setiap modus Vuex. Saya rasa ini tak mengapa. Mari kita pergi ke yang lain. Okey, ya. Anda dapat senang membuat perjalanan perjalanan perjalanan yang berlaku. SPAs, SSR dan perjalanan statis. Jadi, apa perbedaan antara SSR dan perjalanan statis yang memakai nuk ke generasi? Jadi, ini sangat penting. Jadi, SSR digunakan untuk memasukkan perjalanan perjalanan perjalanan perjalanan, seperti yang saya jelaskan tadi. Ia mempunyai perjalanan perjalanan perjalanan, kerana ia akan melalui perjalanan perjalanan. Kemudian, untuk nuk ke generasi, mereka mempunyai semuanya. Jadi, anda mempunyai semua file html. Kemudian, setelah itu, semuanya anda memasukkan file ke browser, dan anda bekerja dari sana. Apa yang terbaik untuk anda lakukan sekarang adalah menunjukkan perjalanan yang berlaku, yang adalah perjalanan yang terbaik dibutuhkan. Itu perjalanan yang terbaik, kan? Ya. Kamu boleh melihat komputer? Ya. Oh, okey. Ya. Kamu boleh memasukkan perjalanan perjalanan. Ah, okey. Maaf untuk keadaan teknikal. Sekejap. Kami akan memasukkan perjalanan. Kamu hanya perlu tinggal di sana. Ya, saya akan tinggal di sana. Baiklah. Baiklah. Oh, yang ini. Ya. Baiklah. Baiklah. Baiklah. Ini adalah perjalanan untuk semua tiga ini. Untuk memasukkan perjalanan perjalanan, SPA adalah sepatutnya kerana anda melihat informasi yang kecil di pakaian. Semuanya dikawal oleh javascript. Untuk dikawal dikawal, ia baik kerana anda memasukkan informasi, kemudian anda memasukkan. Kemudian perjalanan perjalanan ini sebenarnya dapat memasukkan perkara itu. Website statik yang sama. Bagaimana masa untuk memasukkan perjalanan pertama? Kerana anda perlu memasukkan. Lama aplikasi yang lebih besar lagi, lebih kecil. Tetapi untuk ssr dan ssr dan ssr statik, ia lebih cepat. Perjalanan. Sangat mudah untuk aplikasi single page. Bagaimana anda boleh serviskan dari S3 atau dari Netlify atau Google. Baiklah. Jika sesiapa perlu membantu untuk memasukkan apa-apa, hanya memasukkan tangan anda. Dengan kacang tanah di belakang kacang tanah. Perjalanan untuk ssr ia lebih terlibat kerana anda perlu serviskan perkara itu. Jika anda perlu memasukkan, anda perlu memasukkan perkara itu. Tetapi untuk ssr statik, ia berguna seperti SPS. Jadi, 4-poin. 5-poin. Jadi SPS dan ssr basically, mereka akan serviskan untuk memasukkan perjalanan. Tetapi pada ssr statik, kerana anda memasukkan perjalanan. Jika anda memasukkan perjalanan, anda akan memasukkan perjalanan. Apa yang berlaku? Jika anda memasukkan perjalanan, anda akan memasukkan perjalanan. Mereka ada banyak perjalanan di Singapura. Anda tidak boleh memasukkan perjalanan untuk setiap satu. Jika anda memasukkan perjalanan. Jika anda memasukkan perjalanan. Tetapi ia akan menjadi cara untuk memasukkan perjalanan dan saya akan menunjukkan bagaimana untuk memasukkan perjalanan. Ya. Selepas itu, ada kompleksiti. SPS dan perjalanan. Kerana ia berlaku dalam perjalanan. Jadi anda tidak perlu risau. Semua perkara yang berlaku dalam perjalanan seperti perjalanan.event, anda akan semua okey. Tetapi untuk ssr, anda memang perlu berhati-hati. Kerana jika anda memasukkan perjalanan dan anda panggil sesuatu yang berlaku dalam perjalanan, seperti perjalanan.event, ia berlaku-laku. Anda akan melihat perjalanan. 500 perjalanan, ia harus menjadi 500. Kemudian, yang terakhir, PWA. Semua orang boleh memasukkan perjalanan. Jadi, ada pertanyaan di sini? Tiada pertanyaan. Okey, jadi sekarang saya akan memasukkan perjalanan statik. Tetapi anda masih boleh memasukkan SPA, jika ia adalah, seperti yang digunakan dalam perjalanan. Perjalanan perjalanan tidak sangat-sebelah. Sangat besar. Tak ada perjalanan di sini yang sama dengan SPA. Tetapi, ada lebih kurang kompleksiti dalam perjalanan. Dan juga, perjalanan. Sebenarnya, saya mengalami apa yang saya cakap tadi. Saya juga mengelakkan tentang perjalanan. Lihat, saya akan melihat apa yang lain. Okey, yang ini saya cakap tadi. Jadi, sekarang, apa yang kita akan membuat hari ini? NUTS.js akan memutuskan banyak NUTS seperti mungkin. Kita akan memasukkan satu perjalanan. Sebab, ada beberapa masalah yang saya memasukkan. Dan perjalanan normal tidak memasukkan. Jadi, anda harus memasukkan dan melihat bagaimana untuk memasukkan. Kita akan melihat perkara ini seperti nukung perjalanan, dan perjalanan. Dan mereka adalah nukung perjalanan, pilihan dan perjalanan. Saya akan menjelaskan yang ini di detil nanti. Ssr dan perjalanan. Jadi, nanti kita akan melihat bagaimana perjalanan ini mengejar. Kemudian, kita akan memasukkan satu perjalanan yang mudah supaya anda dapat membuat beberapa perjalanan. Dan itu yang kita memasukkan perjalanan untuk perjalanan. Sebelum kita mulakan, mari kita memasukkan bagaimanapun. Jadi, anda memasukkan perjalanan? Jadi, jika anda tidak memasukkan perjalanan, dan memasukkan perjalanan di sini. Dan setelah anda memasukkan perjalanan NPN, pot 3000, ia harus berfungsi. Jadi, mungkin asisten saya akan berjalan-jalan dan membantu. Kemudian saya akan mengambil sekitar 2 minit. 2 minit. Berjalan di sini, DB adalah untuk memasukkan database. Ia adalah Backend. Oh, sial. Tidak, maaf. Jangan memasukkan perjalanan di sana. Ia adalah dalam folder Backend. Ia adalah pada folder Backend. Saya memasukkan perjalanan NPN. Saya memasukkan bagian atas projek di atas. Saya memasukkan banyak perkara di atas. Ya. Jadi, kita tidak perlu memasukkan perjalanan Github? Ya, perjalanan Github. Jadi, kita memasukkan perjalanan kedua? Seperti perjalanan Github? Ya, saya rasa tidak perlu memasukkan perjalanan. Saya memasukkan perjalanan. Saya memasukkan perjalanan. Ya. Okey, sesiapa yang perlukan tolong? Tidak. Tidak terlalu cepat. Tidak terlalu cepat. Tidak terlalu cepat. Okey, selesai. sesiapa yang tidak selesai? Okey, sedikit. Okey. Okey. Ya. Bagaimana dengan peribadi anda? Jika mereka perlukan tolong. Saya akan saja pergi sekitar segera. Okey, baik. Ya. Ken? Okey. Bagaimana dengan perjalanan NPM? Perjalanan. Perjalanan. Okey. Awak perlukan kuasa itu? Awak boleh menggunakan Dels. Ya. Tunggu. Awak hanya perlu yang ketiga untuk menggunakan kuasa itu. Awak adalah yang besar. Tidak ada kuasa yang cukup. Tapi saya rasa awak patut melakukannya juga. Kerana seseorang mungkin... Ini bukan perkara yang baik. Okey. Ya. Yang lain di sana. Okey. Tidak. Okey. Sudah boleh? Ya, tak apa. Api slash off slash log in. Ya. Maaf. Okey. Tak peduli api. Api slash off slash log in. Api slash api slash off slash log out. Tapi tak peduli api ini. Apabila awak melihat konsol... ...tunggu di port 3000, awak tak apa-apa. Okey. Tunggu di port 3000, awak tak apa-apa. Awak tak perlu... Jika awak mahu melihat pos... Saya lupa parameternya. Ya, ini betul. Ya. Ia akan beri awak sesuatu jika pos teruk. Okey. Siapa tak siap? Okey. Saya akan memulai sekitar 30 saat. Siapa tak siap? Oh, awak tak siap. Awak tak siap. Ada masalah dengan modul MP. Saya tak pasti. Boleh saya melihat modul awak? Minas B. Tak. Okey. Ini okey. Awak guna MBM? MBM. Saya tak fikir begitu. MBM? Saya tak fikir begitu. Saya fikir itu okey. Kenapa salahnya lagi? Biar saya melihat. Jadi dia juga ke belakang. Mereka mempunyai MBM. Kemudian dia tak dapat mendapat database... ...sehingga ada database... ...semasa awak mempunyai MBM. Okey, itu pasti masalah. Okey. Biar saya tolong dia. Okey. Ken. Okey? Ya. Sehingga awak melihat perkara yang diperlukan... ...dan MBM 3,000 itu okey. Jangan risau. Jangan risau, saya akan bergerak... ...tapi sistem akan membantu. Jangan risau. Okey, jadi... ...dia yang di bawah... ...awak patut melihat perkara yang diperlukan... ...pada MBM 3,000. Dan kemudian... ...awak akan membuat... ...login dan logout saja. Tapi... ...awak boleh menambah lebih banyak perkara selepas itu. Okey. Jadi mari kita mulakan dengan naks sekarang. Okey. Langkah pertama. N-P-X... ...create dash naks dash app... ...JS Conf. Langkah pertama. Tidak. Jangan risau di belakang. Maaf. Dan kemudian bergerak. Sebenarnya anda boleh bergerak pada gambar belakang... ...tapi... ...tapi terima kasih. Jangan risau... ...kembali ke dalam belakang... ...dan kemudian... ...create naks app. Okey. Jadi... ...selepas itu... ...awak akan beritahu anda beberapa pertanyaan. Okey, perkara yang penting... ...ada... ...tidak ada apa-apa. Kerana kita tidak akan membuat... ...berusaha... ...atau apa-apa lagi. Pilih Xios... ...semasa ada pilihan... ...tidak... ...pilih... ...Linter atau Pretia... ...sebab nanti jika anda bergerak... ...awak mungkin ada masalah... ...kalau format saya tidak sama. Tidak ada Linter atau Pretia... ...cuma... ...kemudian frame UI adalah beautify... ...dan kemudian... ...saya rasa ia sepatutnya okey. Oh, node 10. Tidak ada node 10. Okey. SQ Light, kan? Ya, SQ Light, jadi model node jig. Okey. Okey. Okey. SQ Light, kan? Perhubungan jason. Perhubungan SQ Light... Perhubungan SQ Light lagi. Mungkin adalah versi... ...saya menggunakan. Jangan risau jika anda tidak... ...kalau anda tidak boleh menggunakan belakang... ...saya masih okey. Okey. Siapa masih belum siap? Okey. Jangan risau. Kita ada satu lagi. Okey. Setelah anda selesai... ...settings... ...kemudian kita tunggu di sana, okey? Okey. Tolong bekerja. Tunggu. Kita cuba melakukan node 10. Okey. Untuk node 12... ...tidak menggunakan belakang. Ada beberapa versi node 10 juga ada beberapa. Dengan SQ Light, kan? Ya, seperti itu. Jadi... Mungkin ada... Ya. Okey, maaf. Ya. Makanlah. Makanlah. Makanlah. Makanlah. Makanlah. Jangan risau. Jangan risau. Jangan risau. Ya. Maaf. Maaf. Jangan risau. Ya. Pergi ke jason. Lelaki yang ini dan install. Terima kasih. Kita nak buat selepas belakang. Jadi ada belakang. Atau belakang... Yang pertama. Ini adalah kadang-kadang doktor. Okey. Biar saya buat sesuatu. Okey. Saya tahu beberapa anda belum dapat... Okey. Saya akan mencari. Maaf. Semua dalam belakang. Okey. Biar saya lihat. Itu yang paling penting. Okey. Kita akan beri dua minit lagi. Jangan risau. Kita masih ada masa. Maaf. Okey. Perang dan kegerangan adalah jawapan. Ya. Semuanya di sana. Jadi... Kita sekarang buat kegerangan dari belakang. Ya. Ya. Okey. Sebelum anda menunggu. Orang yang bersedia. Ada paket ini. Saya akan memasukkan ini. Ada paket ini yang anda boleh gunakan. Satu kawasan. Anda memasukkan kegerangan dan belakang. Sebab sekarang anda perlu pergi ke belakang. MpnRDF. MpnRDF. Jadi... Paket ini... Sekarang. Okey. Jika anda tidak tahu, saya akan mencari. Apabila anda memasukkan. Anda boleh menggunakan untuk memasukkan kegerangan. Dan belakang anda bersama. Dan menyelamatkan anda banyak masa. Ya. Dibi set-up lagi. Anda perlu dash-dibi. Ya. MpnRDF. Paket jason. Semuanya adalah paket jason. Ya. Saya sudah lupa. Ya. Okey. Okey. 1 minit. Okey. Saya akan memasukkan. Saya akan memasukkan. Ha ha ha. Jadi apa yang anda lihat di dalam... adalah... struktur projek untuk naks. Okey. Saya rasa anda tidak dapat melihat. Bagaimana anda boleh membuat... MpnRDF di dalam... kegerangan keadaan? Saya minta maaf. Di dalam GSConf. Di dalam GSConf. Anda akan mempunyai masalah. Okey. Anda akan mempunyai masalah. Ya. Kerana anda menggunakan port 3000. Naks menggunakan port 3000. Jadi... 1 minit untuk naks yang anda akan membuat... adalah memasukkan port. Okey. Jadi di dalam GSConf... ada folder... naks.config.js. Buka. Okey. Saya akan memasukkan... masalah yang anda akan memasukkan... untuk mengubah masalah. Okey. Jadi serva... Okey. Ini adalah serva. Kemudian... sebenarnya anda tidak perlu memasukkan port. Anda boleh memasukkan... 8080. atau... apa-apa yang anda mempunyai... di komputer anda. Okey. Jadi... berubah ke ini. Kemudian membuat... npm-run-def lagi. Okey. Jadi jika GSConf atau... kembali... komand untuk memasukkan aplikasi... adalah sama. Npm-run-def. Okey. Okey. Okey. Jadi... jika anda memasukkan port... jika anda memasukkan port... mari saya balik. Okey. Jadi... bagi yang anda memasukkan... saya akan memasukkan... folder projek... untuk naks. Okey, anda hanya perlu memasukkan... file explorer view... untuk folder GSConf. Ada beberapa folder di dalam. Yang pertama anda lihat adalah assets. Jadi anda memasukkan... assets seperti PNG... walaupun javascript file di dalam... file utility anda. Apa yang berlaku di dalam folder assets... adalah webpack akan... kompres dan apa-apa pun. Okey. Yang pertama... CSS juga memasukkan di dalam. Yang kedua adalah komponen. Sebab itu anda memasukkan... komponen yang anda memasukkan... untuk aplikasi. Okey. Kemudian kemudian adalah layout. Okey, ini adalah layout... di mana anda... seperti... untuk beberapa websites, anda memasukkan page... anda memasukkan layout... anda tidak memasukkan bar naf. Anda tidak memasukkan menu. Setelah anda memasukkan... semua pakaian memasukkan bar naf... menu dan sebagainya. Jadi anda dapat... menegaskan layout yang berbeda... untuk pakaian yang berbeda. Okey, kita akan... ber eyeball. Tengoklah, maaf. Siapa di 189 sarapan di...역ian serial di 3,000 detil? Okey. Atau jika anda memasukkan... semua menu jazen akan... terkendalikan di 3,000 detil? Okey. Bagus. Jadi, untuk installation naf dan memasukkan... jika anda perlukan bantuan... anda masih di sini. Saya akan memasak... yang lain Okey, kita berada di tengah-tengah awal dulu Pages adalah di mana semua pakaian untuk pakaian web yang digunakan Jadi anda boleh mempunyai pakaian log-in, pakaian log-out di dalam sana pakaian produk Dan kemudian anda boleh mempunyai folder sub-pakaian untuk setiap pakaian seperti pakaian produk kemudian pakaian produk sub-pakaian dan sebagainya Jadi ia adalah pakaian 3 Jadi bagaimana pakaian pakaian URL yang anda ingin digunakan oleh pakaian ini anda tidak perlu membaik pakaian atau apa-apa saja yang ini akan membuat untuk anda dan bagaimana untuk menjelaskan pakaian dynamic akan masuk ke dalam Pakaian ini sangat penting dan ada banyak perkara di dalam pakaian di mana pakaian log-in adalah Ya yang akan saya jelaskan Pakaian plug-ins adalah seperti AXEOS apabila anda memastikan dan anda ingin buat sesuatu sebelah itu anda memastikan di dalam pakaian yang sama untuk di tengah-tengah Static adalah semua konten static yang tidak akan menjadi web-pack dan pakaian ini adalah pakaian Vuex yang seperti Redux dan sebagainya Okey Jadi ini adalah pakaian naks setiap pakaian naks mengikut pakaian ini Ya Jadi sekarang kita datang ke dua perkara ada dua perkara di naks plug-ins dan modus itu sebenarnya perbezaan besar antara mereka Pakaian plug-ins boleh menjadi sesuatu seperti pakaian eksternal seperti Pakaian Moment Pakaian Low-Jet Low-Dash dan beautify yang adalah UI juga adalah plug-in Okey jadi apa yang terjadi adalah ada beberapa kode initialisasi yang anda ingin memastikan pakaian pakaian seperti pakaian beautify anda membuat pakaian beautify di pakaian pakaian dan di konfig naks ada sesuatu yang yang beritahu anda ada pakaian naks dan ada pakaian beautify untuk beritahu di mana untuk mencari pakaian pakaian pakaian saya rasa lebih baik anda melihat pakaian pakaian untuk melihat jika ada apa-apa itu mungkin tidak ada apa-apa sebenarnya sekarang Okey, tunggu saya Okey, jadi pakaian pakaian ini sangat mudah hanya beberapa pakaian pakaian pakaian yang anda tambah ke pakaian pakaian naks Okey perkara lain adalah pakaian pakaian pakaian pakaian pakaian lebih berguna kerana mereka mengubah pakaian pakaian pakaian pakaian pakaian naks jadi ada banyak perkara yang pakaian pakaian dalam pakaian ini yang sering menghubungi pakaian naks jadi ini sebenarnya adalah perkara yang sangat besar yang saya tidak dapat membahas kerana saya juga tidak dapat membahas kerana saya tidak membangun pakaian pakaian tetapi kita akan pergi dan menghubungi pakaian Okey, jadi kita sudah menghubungi salah satu pakaian yang adalah Axios okey, anda sudah selesai mari saya melihat pakaian okey Hey, Drew Oh, David boleh saya melihat pakaian anda untuk membuka supaya saya dapat melihat pakaian ya, kerana saya okey boleh saya melihat okey, terima kasih okey, tidak ada apa-apa pakaian dalam pakaian saya hanya menghubungi pakaian ya okey, jadi tidak ada pakaian pakaian naks ya, okey okey, jadi bagaimana anda tahu yang sudah digunakan dalam pakaian naks JS adalah anda melihat pakaian konfig naks okey, itu sebenarnya pakaian naks Axios dan juga untuk melihat pakaian di dalam Oh, melihat pakaian sekarang okey okey, jadi hari ini kita akan belajar tentang pakaian naks dan kita akan masuk ke dalam okey, kita belum meletakkan pakaian itu okey, jadi perkara penting adalah pakaian konfig naks apabila semua pakaian digunakan okey okey, ini yang kita lakukan Oh, terima kasih terima kasih okey, tapi sekarang pakaian terdapat okey, sekarang mari kita bergerak okey, tunggu, saya tahu apa yang perlu dibuat hai okey, ia akan kembali lagi jadi, saya sedang minum pakaian yang ini okey, maaf okey terima kasih ini pakaian nombor satu okey okey, jadi sekarang kita akan masuk pakaian pertama yang kita akan meletakkan jika anda perlukan pakaian Oh, Tuhan, ia sangat kecil okey okey mari kita pergi ke anda baru membuka pakaian ini nanti kerana kita akan mengambil pakaian di dalam sini AUTH naks terima kasih okey, jadi AUTH.naks.jaks.org kita akan masuk ke dalam ini nanti jadi, kita akan meletakkan pakaian ini sekarang jadi, kita hanya melakukan pakaian NPM AUTH.naks.jaks.org atau anda boleh melakukan pakaian NPM hanya pakaian yang kecil ia lebih cepat pakaian NPM okey kita sudah meletakkan pakaian ini jadi, tiada masalah untuk melakukannya okey, kemudian setelah anda selesai meletakkan pakaian ini anda akan masuk ke AUTH.naks.jaks.org dan meletakkan AUTH.naks.jaks.org ke pakaian modul jadi, ada pakaian modul dalam AUTH.naks.config.js anda hanya meletakkan pakaian nama AUTH.naks.jaks ia tidak terpaksa ia tidak terpaksa ia tidak terpaksa ia tidak terpaksa ia tidak terpaksa kita perlu membuat pakaian ini okey ya, jika anda memiliki pakaian pakaian yang hilang hanya membuat pakaian index.js dalam pakaian pakaian ia boleh menjadi pakaian blang ya saya tidak tahu apa yang berlaku sebelum saya meletakkan hanya membuat pakaian index.js dan semuanya akan bekerja okey, jika anda mempunyai pakaian pakaian index.js tidak terdapat hanya membuat pakaian dan tinggalkan ia harus bekerja selepas itu ya, okey terima kasih okey jadi, kami hanya membuat pakaian kami akan memulai ia segera okey, saya tidak memulai pakaian index untuk sesetengah masa ia sama juga seperti keputusan saya sama okey, terima kasih okey jadi, sekarang anda memulai pakaian dalam dalam pakaian blaks.jaks.js okey, kami sekarang memulai pakaian kami sekarang memulai pakaian jadi, saya akan memulai pakaian sekarang okey saya rasa jika anda tidak dapat melihat, jangan risau bantu saya untuk memulai okey, okey okey apa itu? tiba-tiba okey anda melihat saya memulai pakaian blaks.jaks.js memulai pakaian blaks.jaks.js okey anda memulai pakaian 1, 2, 3 okey pakaian 3 adalah pakaian pakaian untuk pakaian blaks.jaks.js pakaian ini ada pakaian ini anda boleh memulai dan memulai pakaian blaks okey, beruntung kami tidak cukup kecil mungkin anda boleh memulai pakaian anda ada pakaian pakaian pakaian pakaian visual studio saya tidak tahu apa yang ini saya tidak tahu apa yang ini saya tidak tahu apa yang ini saya dapat membuatnya lebih kecil okey saya tidak tahu saya tidak tahu mana folder okey, js.com tidak terlalu banyak pakaian di dalam okey, yang ini anda memulai pakaian okey, saya takut saya takut pada masa, ya, ini anda boleh memulai pakaian okey, yang ini okey okey, ya wow okey tapi masih anda masih memulai pakaian kerana di belakang saya tidak dapat melihat okey, pakaian ya, saya akan memulai ya, di sana, di atas okey jadi, kita akan membuat strategi lokasi yang sebenarnya anda menghubungi pakaian dan memulai pakaian dari belakang bagaimanapun, bagaimanapun anda boleh memulai sendiri nanti okey jadi, sebenarnya, ada dua pakaian log in slash of slash api slash of log in dan kemudian, yang terakhir adalah user slash api slash of slash me adalah untuk mendapatkan informasi user okey ya, jadi ini basically bagaimanapun, anda memulai pakaian yang perlu pakaian pakaian, ini semua dalam dokumentasi untuk nukstoff okey, jadi masih cukup jauh zoom in okey jadi, kita memiliki bagaimanapun bagaimanapun ya, semua pakaian dan pakaian yang anda perlu dapatkan kerja ya, okey jadi, kerana kita faham bahawa jika anda memulai pakaian, anda sudah berjalan anda tidak dapat melihat apa-apa okey okey, semua yang baik? ya, hanya pakaian dan kemudian memulainya dalam konfig okey okey okey ya, jadi minta maaf mengambilkan ini tapi ia akan mendapatkan sedikit lebih susah okey, selanjutnya selanjutnya, ya ya saya rasa perlu zoom okey, jadi ini hanya untuk mengetahui kami akan melihat dalam pakaian nanti okey, anda dapat memulai pakaian perjalanan jadi, dalam pakaian jgf dan dalam pakaian ada pakaian eksport dan di sini, kita melihat pakaian tengah jadi, apabila anda memulai pakaian di dalam ini adalah pakaian protektif maksudnya, jika anda tidak memulai pakaian anda akan memulai ke mana anda memulai pakaian naks.js okey, untuk sekarang, kita menggunakan default yang saya rasa anda akan memulai kembali ke slash ya, oh, kembali lagi okey, jadi itu perjalanan anda juga boleh melakukannya global, maksudnya anda membuat setiap perjalanan sepatutnya harus ditentang dan itu telah dilakukan dalam konfig naks dalam perjalanan router okey, anda memulai pakaian tengah jadi setiap perjalanan akan ditentang jika anda mahu setiap perjalanan tidak untuk ditentang, anda pergi ke pakaian dan anda memberikan default ya, jadi ini langsung dari dokumen ya dan pakaian tengah okey, anda boleh sebenarnya memulai pakaian jika anda memiliki lebih daripada satu perjalanan, ia boleh menjadi perjalanan internasional atau beberapa perkara lain jadi lebih daripada satu, anda memulai pakaian dalam perjalanan jika tidak, anda boleh memulainya dalam perjalanan okey ya, Guys saya rasa banyak anda berterus pada file yang anda melakukannya jadi folder sebelah ini yang kita memiliki adalah solusi sebenar ia mempunyai aplikasi perjalanan dan setelah anda memulai kita membuat projek baru dengan NPAX aplikasi perjalanan dan folder yang anda memulai kita memulai pada itu jadi, jika anda memiliki itu okey okey terima kasih okey, jadi sekarang kita akan pergi kita akan pergi ke kopi dan pakaian jadi kita akan pergi ke pakaian dalam perjalanan kita akan memulai semuanya yang ada di dalam okey, jadi jika anda pergi ke nombor 4 dari readme-1.md okey anda kopi dan pakaian segalanya memulai perjalanan perjalanan dalam folder layar jadi ada folder layar dalam file perjalanan perjalanan memulai dan memulai dengan okey apa yang di dalam file adalah teks html teks teks, okey sebuah teks untuk perjalanan membuatnya nampak cantik yang itu, saya rasa boleh lepas itu lebih banyak saya akan pergi ke partit kebenaran okey okey, ya ya, jadi perkara yang penting pakaian dan pakaian pastikan anda boleh menarik lalu biar anda faham dalam perjalanan okey, kemudian pakaian atau bantuan saya boleh membantu anda faham okey jadi kita kopi dari file 4.4 sehingga file 105 ya okey, ini banyak sebab kita membuat menu interaktif naf buy dan sebagainya jika anda memulainya saya rasa kita akan ambil 3 jam untuk memulainya kita ada di sini untuk belajar naks jadi kita hanya memulainya dan melepaskan, jangan risau boleh faham nanti jadi sekarang saya beritahu anda perkara yang penting dalam sini okey anda mahu pakaian? iya, pakaian okey jadi, perkara pertama dolar staid.logdin dolar.of adalah modul modul off yang anda gunakan jadi ada dolar.off.whatever banyak perkara yang berlainya modul off dan logdin ini adalah faktor untuk beritahu seorang logdin atau tidak okey iya, ia tidak mempunyai detail pakaian ia hanya beritahu seorang logdin atau tidak dan okey, staid modul ini sebenarnya datang dengan membangun storage jadi ia akan membangun informasi anda anda boleh membangun di dalam Stor View Stor Local yang kedua adalah kukus dan yang ketiga adalah storage lokal jadi ia sebenarnya membuat semuanya untuk anda di belakang jadi nanti saya rasa apabila anda melakukan login jika anda berhasil login, anda akan melihat konsol berhubung anda akan melihat informasi di dalam iya nanti adalah dolar dolar.user jadi ini mempunyai informasi yang anda dapat dari rata api di mana anda dapat informasi user slash api slash off slash me okey dan sangat penting dalam pakaian layar ia adalah perkara yang disebut naks tak dalam layar dan perkara ini adalah semua pakaian yang anda mempunyai dalam pakaian apa-apa yang akan berlaku di sini dan mana layar untuk digunakan dalam pakaian dalam pakaian web ia sebenarnya adalah layar atau layar, salah satu pakaian jadi anda akan menjelaskan layar yang anda pakai untuk ini adalah pakaian dan dalam pakaian layar untuk pakaian pakaian pakaian okey ya jadi anda akan pergi ke pakaian pakaian nanti kita akan membangun layar okey jadi ada soalan ada soalan boleh lari? boleh lari? tidak boleh lari? okey, bagus iya kita masih ada soalan okey okey okey, bagus, kita masih ada masa okey jadi ya jika anda mempunyai pakaian login dengan tidak ada nerf bus dan anda mempunyai pakaian login dengan tidak ada nerf bus, itu layar setelah anda mempunyai pakaian nerf bus jadi anda membuat dua layar satu tidak ada nerf bus, satu dengan nerf bus okey, kemudian anda membuat pakaian anda yang di dalam layar okey jadi kita lihat anda mempunyai dan mempunyai mempunyai dan mempunyai pakaian anda ingin mempunyai layar emt dan di dalam dan di setelah pakaian yang ada layar anda hanya mengisah nama kesejaan layar yang anda membuat dan disini pakaian lain aqua yang setelah anda login produk anda, user anda anda ingin memutuskan pakaian nerf anda dapat mengisah pakaian nerf di dalam anda dapat mengisah layar pakaian nerf di dalam pakaian teringin pun, kawal Layout. So, inside the page.view, you have this thing called layout. Ah, I know because you haven't gone to the page yet. We'll go to the page and then maybe it's easier for us to see it all. Okay? One very easy way to look at it is like, it's just a placeholder where your interact is going to be rendered. Ya. So, depending on what you have before the nest and after the nest, you can define your layouts like that. So, for example, we have like our layout like this where the first page is just a user on the password and once you log in, we have a different layout where we will always have the map bar for all the old pages. We can just reuse this same block of code and just render this part using the nest. Ya. Yes. Ya. So, ya, so there's some. Thank you. Oh, thank you. Okay. So, there's some magic going on in the nest. Okay, don't worry, slowly we will get to learn about it. Okay, let's go on to the next page, the public page, which everybody can see before logging in. So, next we go to item 5 on the readme-1.md, item 5. This is quite short. Okay, you can cut and paste the thing into this page where you create. Okay. So, the pages folder. Pages folder, there's this file called index.js, if it's not, sorry, index.view, if it's not there created, if it's there, replace the whole thing. Yes. It should be there, right? I think it's there. Just replace the whole thing inside there. Click. Ah! Oh, typo. Okay, yes. It's a... Step 6. No, sorry, it's step 5. Ya, index. Oh, okay. That'll be a typo. Yes. Yes, it's a typo. Yes. Okay, let's go to the slide. So, everything working, copy and paste, everything working, then I'll explain what's inside the page. Ya, I'm sorry, I can't explain further more, but maybe once I finish with whatever I need to teach, I can explain more on those things. Okay. So, okay, you have already done npm run dev. Okay, and inside there, there's a dollar off dot. Oh, it should be dollar state. Okay, and then log in. So, this one, it's just the same as before, it tells you whether it's log in or not. Ya. Okay. So, this just a public page. It's very simple. Sorry, the index. Okay, we'll create a public page again. Okay. This is where we'll do some things inside. Okay, so, copy number 6. And the file name is create a file called public.view inside pages. Okay. Yes. Create a public.view file, copy and paste. Yes. I know it's a lot of copy and paste now, but it is building up for the next step. Oh, oh, 210. Okay. Okay, this is the page later where we'll test some problems with server-side rendering. Ah, yes. Sorry, page down to the default. Ah, yes, up, up. Sorry, up, up, up. Up, up, up, up. Okay, zoom in. Down, down. Sorry, down. Ah, ya, here. Okay. So, see down here. Middleware. Off. Okay, so, this page is actually supposed to be authenticated. Okay, but because these options I put off as false, the public can actually, so it's actually not authenticated. So, if you're not authenticated, you can still go in. Ah, what else? There's something very important. Oh, ya. So, these layouts, right, you do not see any layouts property inside here. If they do not see it, they are using the default.view layouts. Okay. Yup, so when you see this page, you will still see the, I think the default page has got the the menu, bus and everything. Okay, ya. Okay, so, I think, so, once I've done the public page, okay, we'll go back to the slide. Okay, we'll go on to the next one. Yes. Okay. We'll go on to the private page, which is only after you log in, you can go in. So, this one is number seven. Yes. Okay, we are Can we name it? Log in? It's secure. Ya, you can call it secure. Okay, if you name it some other name, right? Inside the inside the Layouts.page, we have to also change the route to be similar to this. So, if you name it slash ABC, you go to the Layout default.view file, look for slash secure and change it to slash ABC. Yes. There's number seven which says a page is locked Oh, sh**. Okay, wait. Sorry, sorry, sorry. Yes, yes. Sorry, sorry, wait, wait, wait. Secure, is it? Wait, wait. Okay, sorry. Go to eight first. No, because go to eight. I'm sorry. Go to eight. Go to eight and then create this pages log in.view. Ya, sorry. Number eight. No, because I changed halfway because the login is more involved. Yes, there's a lot of things inside there. You can do both. Yes. Okay, do both. Do both. What's the other one? Secure, right? Secure, is it? Okay. Let's just do both. Okay, create the login.view, create secure.view. Copy and paste the code inside. Good suggestion. Thank you. Yes. So, anytime you find you need some way to improve or speed up, improve the work processes, please go ahead. Yes. Important thing is the code can work. Okay. Once you're done, we'll need to do some things here. Okay, wait first. Okay, so there's this thing. Okay, fetch user. Okay, this is the one that fetches user information. Okay, let me look at the... Okay. So once you are ready, go to naks.config.js and look at baseurl. Okay. You should be pointing to the localhost pod 3000. On... Ah, sorry, base... Axios baseurl. That's Axios and then baseurl. I think you drink more water. Okay, so just make sure that this is a localhost 3000. This is the server that we started off with before. So we're just acting in this server. Ya, the backend. Okay, we can move on to the next slide. It's a break. Okay, oh, great. We have a break. Okay, so this thing called custom elements is a web standard for those web components. One of the four pillars of web components. So there's this website called CustomElementsEverywhere.com and it tells you which is the... whether they are... How compatible it is. Okay. View and Angular is still there. You can look at all the other frameworks down there. Okay. React.js is really the worst. 70%. 71. Okay. Just to get our mind off a bit. Okay, let's detox the mind a bit. Any questions? We can take questions here. No questions. Nobody. Nothing. Like something in front of you like we are building multiple Vue.js. So those of you who don't have a Vue.js experience it may be a bit more difficult for people. Just follow us if you need questions or have questions. If you have questions that you want to get answered. Yes. So the important thing is that whatever you copy and paste it will work and then figure it out later. And then like you have access to the repository, the code, the slides then you can dig through the syntax on your own. Yes. Sorry? You okay? Yes. Okay, thank you. To you guys. Thank you. Okay. Sorry? We only want 30. The timing is it? Oh ya, ya, ya. We started 15 minutes. So it's like 76. Slide class Oh, okay. So... Okay. But I didn't explain much on a Vue. Because it's all napsed here. Okay. The Vue files are actually composed. I want to talk about it because I'm not ready for that. No, it's only like a template. Okay. I can say something. Okay. You can go ahead. You need me to... I will scroll and... Okay. Wait. Just one. Come on, come on, come on. Relax. I need files like this. Oh my gosh. Okay. Oh. Just like a... A quick primer of Vue.js. Like every Vue file we have is split into three segments. The first part is a template which is just our HTML. So this is the same as our JSX syntax in React. And this is also the same as like our templates in Angular. So we just... Like everything you see here like this is just a performance of our Vue and this is just our HTML file. HTML files. So after the template tag, we have the script tag. So inside the script, whatever we have is just a JavaScript. This is just JavaScript. Like nothing fancy. And one of the very small thing from here is going to be passing to the Vue application. Like the Vue part that we're running behind the scenes. And Vue exposes like some properties that we expect. Like data, scene data and some things. We're not going to do that now but this is like a very quick primer. So whatever is inside the script is just our JavaScript. Whatever is inside our template is just our HTML template. And whatever is inside our style tags is our CSS. We have styles here. No. But there's CSS later. We can also have a style here and that can be scope as well. So I realize that a lot of you may be using Vue for the first time. So this is just like a very quick primer for that. Oh, okay. So it's like we only have one file where I segment it into three different points. The templates, the scripts and then the CSS. Rather than if you select them. Okay. So now we're going to go to the fun part. Okay. So if you look at the documentation for the authentication for next, it's very easy actually because all you need to do is call this login with thing and then you specify the strategy like local. There's two. Local and O of two. So if you use O of two you can do a GitHub, Google, whatever. Okay. So we can do this very easily username password. Next slide. Now. Okay. But now we hit a road block. Okay. Okay. Yes. So what is my problem? Any guesses? It's very easy. I just login and log out. But why can't I use it? Sorry. Don't worry. There's no wrong answer. It's okay. That is part of the problem. That's part of the problem. Oh, okay. Very good. Actually that is very close. Okay. Very close. Very close. Getting closer. Okay. Ah, no. It's not that one public is always false. It's okay. Yes. Okay. Are you sure? Okay. 2FA. I got an app that needs 2FA. Google off. You know. This. I can't do it. I check the the stack overflow, stack area where nothing. Okay. So time to dig into the modules. Okay. So now we'll go into the off module. Okay. Now I'll teach you how to dig inside. Let's go to GitHub or you can search for naks off. Okay. Once you're there, go into the package JSON file because from there you can see where the module will start off. Oh, okay. Okay. Very. Okay. Plus, plus, plus, plus, plus. Yes. Okay. Package JSON. There's this thing called main property inside there. Inside, you should see a lib slash module slash index.js. So this is the starting point of everything where you dig. It's not just for off module. Some other package that you use even in React or whatever it is. I think so. Yeah. So let's go inside the app. So let's go inside the package JSON. Okay. Lib. Okay. We're also going to the lib module index.js. Okay. I think I can zoom in a bit more. Okay. Let's look at the packages first on top. Sorry, the cons. Okay. Nothing here that tells me anything. Go down a bit more. Okay. Okay. It tells you where the library root is which is actually on top. Okay. Then might go scroll down some more. Nothing looks interesting yet. Okay. Setting default strategies we know from the documentation there's a few. Okay. There's this copy plug in. Okay. Ah. Wait. Okay. So copy plug in is inside one of the inside the import where they all set everything. Okay. Then we scroll down but it's just copying all the options inside. Okay. So ah. Okay. Not copy core yet. You can scroll down some more. Okay. Copy plug in. Okay. Scroll down. Okay. Okay. Scroll down. Nothing interesting. Okay. Scroll down. Don't worry if I forgot I have the answer somewhere. Resolve scheme. Wow. Okay. Okay. Wrong. Okay. Scroll up. I think it's somewhere copy plug in. Ah. What is it? Okay. Wait. Scroll down a bit. Scroll down. Okay. So there's something inside here. Okay. Options. Ah. Go to the slide lah. Ah. I forgot. I remember digging through this. Okay. Let's see. And then copy plug in. Copy plug in. Ah. Copy plug in. Yes. Copy plug in. Okay. On top. Okay. So this source resolve lib root. It goes to this plug in.js. So there's a plug in system inside view. I suspect something is going on inside. So we'll proceed to the next file which is plug in. But you need to know the folder. Okay. Wait. Let's go to the slide first. Okay. Ya. So we go to the module plug in. So now in module index go up and go to the module plug in. Ah. Yes. Is this the one? Yes. Okay. So ah. This looks like something interesting. CTX inject and the dollar sign off. You can see that also. So this doing something important and there's a new off where it creates a new instance of this off. So this is quite important. There must be something inside here. Ah. Okay. Let's see. Okay. So it initialise. Okay. There's something inside here. What is in the notes? Inside. Ah. So this is you're doing something and then returning something. So the off is obviously ah. Sorry. The import off. Go to the import off. Go to the import off. Okay. So this top line is telling me that is importing something here which is very important. So I'm going to find the off. GS file. So go back to module and then go to lib. Lib. Because it's not here. There's somewhere where they actually link it to the off file. Ah. Look at the call. I think it's in the call. Okay. So we're going to the off GS now. Okay. So exactly we see there's a the context and options that's passed in when we knew the off object. Okay. Let's scroll down some more. Okay. Strategy is here. Scroll down some more. Okay. Some more. Okay. Strategy and same scheme are the same thing. Yes. Let's scroll up. I think because this is the off. Oh. Login with is inside the documentation. So this login with cause something inside here called login. So we go into the login which is just below. Okay. And it's looking for this dot strategy dot login. So it's got to do with something in the strategy. Okay. Because down here you can see also wrap login. Okay. So we go to find another file. Let's go back up again. So yes. There's a strategy somewhere or something. No. Get out of the folder. Yes. Okay. Get out of call. I don't think it's here. Nope. Wait. Just let me show you something. Okay. Storage.js go inside here. This is where you see that they are actually working with the Vuex store. Okay. So they actually work with the you can restore the authentication stuff inside the local state, inside cookies and inside strategy. So everything inside there you don't have to build your own. You don't have to add anymore code. Okay. Let's find the off the strategy. Okay. Strategy is also schemes. Okay. Ya. It sounds like it. So best guess. Ah. So there's two schemes local and O of 2 as in the documentation. Let's look at local. See what happens. Local. Okay. Scroll down. Okay. Set token. This one. Oh, it works with Xios. So this is where it actually sets the authentication header. Okay. Okay. Good. The song we may need it later. Scroll down some more. We look for the login. Ah. Login. Okay. So if you didn't specify your endpoints inside the config file, they'll return. Bye bye. Okay. So you need to specify. Let's look at some more. Okay. So login set token. Oh. Okay. So what happens is that login also does a fetch user. The problem with the OTP is that when I do the login first, I haven't clear the OTP so I can't fetch the user. So that's a problem. So what I need to do is I need to do a login without fetching the user. Once I clear the OTP, then I fetch the user. Okay. So how do we do it? Sorry? We have to do something here. What? It's a basically we have to do something. Yes. We have to do something with the functions here which is the login and so on. We can actually make use of all these functions down here which I will show later. So you go to the slide. Yes. Let's go back to the slide. Then we can start working on the solution. Okay. There are some tips though. You can console log inside the source files what's happening. To learn more about the library. That's one thing when you want to dig in and you use find in files a lot to find things. Okay. So basically what is important is that set token that we need to call if we are going to do all the things by ourselves to set the authentication header. There's also a set token that is inside the off.js we need to call. Okay. This one later if one can dig in yourself. This was setting all the local storage and so on. Okay. So here's the I explained before for fetch user this should fail for the 2FA and only after you clear the 2FA then you fetch the user. Okay. So we are going to fix it instead of waiting for somebody to fix this problem. Okay. So how are we going to fix? Okay. Next slide. No. Previous. Okay. So we are going to fix it ourselves. We will use the existing library source. Any forking or whatever. We will just use the functions that's existing inside there. Which is inside the login.view which you have already copied and paste, right? Okay. So Oh, I need a password. Password. Oh. Okay. So maybe we can go into the login.view file now to see how it is actually done. Okay. Just now you have copied and paste the login.view, right? So it's actually the answer screen inside there. Okay. One thing to notice this one I did not put in any OTP but you can still log in and log out without the OTP part. If you want to see the whole OTP thing in action there's actually my repository actually has it. Another repository. Okay. So login.view. Scroll down a bit. Yeah, login.view. Okay. So what happens is that once the person clicks the login button Oh, you want a login button there? Okay. But you need to zoom in. Yeah, they can't see. Okay. So once you click the login button, it will go to a method inside view.js there's this thing called method which will do the login. Okay. It's that I, okay. I actually didn't use those end points that are specified in the in the NUF NUF because I'm doing it here. So it will send a post to the back end. Okay. Using an email and password and then it will come out. Okay. For the example, the user name and the password is test TEST. After the thing comes back successively, I set the token in the local storage and so on. And I set the token in the exios. Okay. And then after that, I get the me result. Of course, if you are doing the OTP, you will not be getting your me user. You'll be going again to get your OTP and you can use the off function, the off module set user to set the user. So this is where you get just now the dollar dot off dot dollar state dot user, the user information. And once you're authenticated, we can push you to whichever page that you want to. Okay. Which is secure page. So if you want, now you can actually test out by typing the username to go into the secure page. And there'll be some information that is displayed in the secure page. Actually, this is quite fast. Ya. So ya, it's done already. Everybody good so far. Okay. Okay. Okay. Okay. So we have a wire checking it out. We have a short short break again. Okay. Oh, typo. Change to, can't change, set interval. Okay. So set interval, this javascript command. Okay. How you use it in React hooks. Okay. When you in use effect and you need to set interval, there's this whole block of code that you need to do in order to set the interval. Okay. In Vue.js, just this one line down here on the mounted hook. Okay. Mounted means the javascript is ready. The page is loaded, the javascript is ready. Yes. This, for the, the React component did mount. Okay. So that's why I actually prefer Vue.js to React. Okay. And then there's a very long explanation on why this is so. Ya. Ya. We'll take another short break. Okay. Okay. Are we all on the same page? Ahem. Okay. Ya. Okay. Anybody still need the help? Yes. Yes. Yes. Okay. Sorry. Oh. For some reason, my back end is like not getting nice turning. Sorry. Okay. Console. Or not found. Oh. Okay. Check your base URL. Nuts Conf. Okay. Ya Nuts Conf. Yes. Correct. Base. This looks okay. Okay. Okay. Take a look at the login page again. Sorry. Okay. Okay. It looks okay. Ah. Okay, wait. Your back end again is running, right? I started it. I just started it. Okay. So, basically in the beginning, like when I was initialising the Nuts View or whatever, I even selected Axios. It didn't come with the whole thing. Confirmed. So, I had to like install it myself. Oh, okay. So, I was wondering maybe it's something to do with that. Ah, okay. Because of Nuts Conf. I tried to like just copy whatever was done. This looks okay. This looks fine? Yes. What about this? This is not. Ya, this is okay. Okay. Maybe I need help. That's the only thing that I can think of. Okay. Shilling. Ah, sorry. He needs help with the login. Oh, sorry. Test, test. Try test. It's a... Can't login. Can't post. Post. Ya, I can't post the login. Oh, you're posting to the wrong... It's 8,000. Ya. Okay, somewhere it is... Okay. Ya, so you need to find... Maybe something to do with this base URL thing, no? Yes. Order server thing? No, not this one. It's correct. Port 8080? Yes, the server port is correct. But your base URL is not really correct. It's not working. Yes, it's not working correctly. Okay. Ah, restart your Nuts app. Okay. Off and on, not the back end, the front end restart. Okay, anybody else got issue? No. Oh, okay. Oh, okay. I think a lot of you were facing login issues with axinos. Oh, you can't find post on Mac or something. So... Yes. Okay, the other thing is stop the Nuts and restart again. Yes. That's it? It still doesn't. We're going to our Nuts.compact.js. And inside this folder, we have this modules property. Which is an array. We should already have some things here. On top of that, and after that. Is yours working? Ya. Oh, you can login. Okay. Okay. Okay. I'll ask around. Can you login? Okay. Okay. You can login. Okay. Are you able to login? No. Oh. Can ah? Okay. Eh, no. Test. Okay, you can login. Are you able... Or you can... You can't login, right? Ya, you need axios. Okay. Ya, I'm good. Okay. Oh, sorry. I don't have... Okay. You got... Okay. Okay. You can login, right? Okay. Okay. I need to go to the workshop. Okay. You can start the workshop. Yes. Okay. You can start again. Okay. We'll continue first and try and compete. If any of you have problems later after the workshop, we will help to get it working for you. Okay. So now we come to routing in naks.js. Okay. So, basically, we are going to see how the routing goes on naks.js. Ah. Okay. This is going to be a quite long one. Okay. So, you copy... Okay. There's a readme file to look at. Readme-2.md. Okay. So I think we will speed things up by copying all and creating all the pages. Okay. So, we create a folder under pages called dynamic. Okay. Pages slash dynamic. Okay. And then you create some files inside underscore slug.view. Okay. And this file you can copy and paste item number 2. Okay. Then there's another one under item number 4. Index.view but... Oh, wait. Okay. Then I just copy underscore slug.view first. Okay. So, assure the dynamic navigation. Okay. This one, you don't need to login to get it to work. Okay. So, don't worry. Yup. So, once you get into underscore slug.view.navigation, sorry, once you copy the page. Okay. The front end, is it running? Okay. Okay. Just click on this one. Okay. Go to the nav bound the left. Click on the dynamic roads. What do you see? Okay. Click on dynamic routes. Oh, that's all you see. Wait. Yes, I think you copy the whole thing, right? Yup. Okay. See the page. Just click on this one. Slug.view. Okay. See what's on top. Okay. You should be able to see the rest. Okay. Okay. Are you able to see some links in the page when you click on the dynamic? You can't see. Okay. Never mind. Get back to you. Okay. You can see, right? Okay. So, right, the dynamic page, one, two, three, all this. So, when you click on the one, two, three, you will see the header on top change as you click on the page. There's something wrong with your site. Ya. So, you rebuild. Okay. Those who have something wrong, stop the NARX, Control-C and run the thing again. Item on the left. And then there's some, you open up a page where you can navigate between the pages. Okay. Let me just go around. Okay. Are you okay? Ya. Oh, okay. Okay. Okay. Ah, okay. It's problem. But then, when you go here, it will be able to show you. Yes. Yes. But like when you click this thing, it will... Yes. I will tell you why. Okay. When you navigate, just go to slash dynamic slash one. Okay. Because the slash dynamic page is not there. That's why you get a 404 error. Ah. Okay. So, go slash dynamic slash one. Okay. Then you can see some items ready. Okay. So, Ya. So, when you don't have the index page, you get a 404 error. Okay. Okay. Okay. Sorry. So, Yes. We're clicking here. Yes. It's 404. Because this is A. Okay. When you click on the... Okay. When you click on the menu, it goes to slash A. Why is getting a 404? You go into the slide page again. There's this function called validate. This is one of the NUX options. So, it will validate your parameters. So, sometimes your parameters you only want integers. You don't want characters. Then, Ya. So, it will 404 you if you type in something. Yes. Okay. So, you see there's a validate function inside the slug.view page. There's the one that validates the parameters. Ah. So, if your index is alphabet and not a number, there you 404. Ya. Actually, I fixed that thing but I didn't. Somehow it wasn't inside here. Okay. So, so much for it. Okay. No next thing you can create after the underscore slug write, you can create index.view and then copy and paste everything inside there under the slash dynamic folder. Okay. That one is script number 5. So, this is actually the parent for the dynamic rock. Yes. We can go to the next child. Next child. Oh my gosh. Okay. Okay. Yes. So, Ya. Okay. I'm coming to that. Yes. Okay. So, we have done underscore slug view and you have looked at the validate function to validate the URL parameters. What happens if there's no parameters? We will come to next child soon because of this. What happens if there's no parameters? That's why you can create index.view file and then show something or redirect them to some place for some other place. Okay. So, that's what's the purpose of the index. Dot file is for. Okay. So, next thing, we have this pager slash dynamic folder. We can add one more thing. Okay. We can add one more thing. Slash dynamic dot view. Okay. So, you have two dynamic here. What's the use of this extra dynamic dot view? So, actually, if you want current page for all your dynamic routes, like if you want certain information, like you have a property page, you have something on the left that you want, which is common to everything inside there, you can put this thing called dynamic review which matches the folder name. Okay. That is the parent. And then inside all the slug will be rendered by this file. So, your slug could be a different property like some HDV flat somewhere or some condo somewhere. It's all rendered inside. Ya, it's just like a layout. Just layout. Yes. But yes, we got confusing after that. Ya, but you can nest it further. So, all the pages, everything, the routes, you can nest and nest and nest. Ya, how deep you want. Ya, you can go but please. Ya, don't. It's like rapping high order components. Ya. Yes. Okay. So, error handling you see that 404 page. Okay, this is quite important because there's something, there are a few ways to handle it. Okay. So, I think I'll go through this quite quickly. Yes. Okay. So, this 404 page, the first method is, but you don't need to do this because it's not very good. I will explain later. 404.view, you create a 404 page and then inside the Nux config, there's some configuration that you put in to actually redirect back. There's some problem with this and there's some problem with this underscore.view. So, what is this underscore.view? It's actually a wild card. It's a wild card. It's your fallback page. So, let's say if you have a slash pages and then underscore.view, okay, if you type your URL slash some rubbish, you'll send you here. You'll send you to, so it's a catch all. But it's it's better to use the bottom one which is the layouts slash error. Okay. It's actually a page although it is put inside the layouts folder. Ya, don't know why but they just did that. Okay, and I think I will explain to you why so that maybe it's better to not the code yet. Okay, let me go to this. Okay. So, what's the difference between these three? The fall for error is a bit more involved. You've got to create the view file and then you've got to type something in the Nux.js. Okay, browser property. You have to do something about it. The other two, they are easy. It's okay. When you want to navigate between the pages, sorry, via the what is it? Okay, so let's go via browser URL. So you type in slash some URL. All of these cases will capture the error and you'll go to the error page and you can handle it. But, if it's a push, a router push, it's not from the browser where you key in the root. You push from the browser when you're navigating. The top two will not handle it properly. You go to the default, the Nux error page. So, only the last part it will handle the thing properly. Okay, this is for server-side rendering. How about static page when you're using Nux Generate? Same thing. Same thing. This one will handle the error when you push the route and it will also handle when they type in the URL manually and how they actually handle it is, okay, when you're serving the page from the host, when there's an error route, you can specify the HTML file that falls back to. So, inside here, there's some configuration where you can state the place to fall back to and you'll fall back nicely to that page. And you'll get to see that now. Yes. Okay, but first, before we continue with that, we'll look at what Nux View is. Can't zoom in, right? Okay, so, okay, we have the layout for the thing and we have the page. So, the layout currently you are seeing only one layout. We will create another layout for the error page. Okay, so, your error page once it falls to the error page, the layout will look different. And we can go to readme dash3.md. Okay, we go to ignore number 3 also ignore. Okay, let's go to, there's one thing called Nux Error Page. Create a file in the layouts. So later you see the difference in the layout. Okay, layouts slash minimal. This is the name I'll call it. You can call it something else if you want. Just remember to use the name later. Okay, layouts slash minimal.view. You can just copy and paste the thing to the layouts folder. Okay. Okay. So, we have created the layouts. After you create the layout, also inside the same folder, you will create the error.view. This is a very special file name inside the layouts because this is where Nux will go to handle if you have an error, 500 error, 404. 500 is the server side, 404 is the client side. It will handle. Of course, one of them, they need to configure on the host that's serving the page. The Error.view. Oh! You can overwrite it. Yes. I think so, I can overwrite it. I don't know it exists. How come? They already have error. You mean the Nux? Determine install it wasn't there, you know. Okay. I think they might put in the thing. First, I just prepare this. I think less than a month ago. Yup. Okay. So, the error page. Once you copy and paste, very important, okay, it's item number 3. When it's in a static Nux, when it's in a static page. Okay. Let's zoom in. Zoom in. So, inside Nux config, inside the generate keyword, you have this fallback. Okay. If you set it to true, you will use the 404.html. But this one will go back to the Error. Error. Error. Error page. I think I set something in the back end. Let me check. Just check. Okay. Because the back end also needs to fall back. Where is it? Crap. Okay, never mind. This one I have to explain. Okay. This one there. Okay. Okay. So, this important, if you are doing the Nux generate later. Okay. So, we are going to try it out after this. Okay. Let's go back to the slide. Okay. So, once you have copied those. So, she's asking like, what's the difference between 404.html and 200.html? It's not defined. 200 is okay. It's not defined inside. Oh, no. It's not defined inside because by your web host. So, they'll fall back to a certain page. Like, whenever you got the 200 response, you're actually going to something, server-side call. Okay. Okay. So, how to test it? You go into the dynamic menu again. I think there's one option where it says it's a not found or something. Click on it. It should fall back to that error page. Does it go to that error page? Yes. It does. Okay. Yes. So, you see a page not found slash using layouts slash error view. That is the error view page that you are doing. Okay. Because you have some error with your routes, whether it's 404 or 500-side, it will come here. Actually, about the static generated page, we can... You might have some questions later. I will try and clarify on that part. Okay. Because I have no... I will try and see how it can replicate that problem here. Okay. So, also what you can try is you type the URL. You just type a rubbish URL on the web browser. It should bring you to the error page also. E... No. Ya. Ah, yes. Okay. Ya. So, if you were to type a rubbish URL, it also bring you to the error page. Okay. So now... Okay. This dynamic routing on the single page application, it is easily handled in this SSR. How about static pages? How do we do it? Because this static pages is all pre-generated. And if you want to generate for every dynamic route, for every dynamic piece of data which may be in the database, and it can change, you have a problem. So, there are a few ways. It's not perfect, but can be handled. Okay. So, one of the ways that NUX actually... Oh, let's zoom in. Zoom... ...that they show how to do it. Ah, nothing. Zoom. Oh, okay. Ya. So, inside generate, inside the NUX config.js, the generate properties, there's this routes. Okay. And what happens is that there's a function that's being called. You go to your API. Let's say, for example, you want to generate routes for all your users. So, it goes inside here. And then it finds all the user IDs. And then you generate. So, if you have one million users, it will work. And some of your users change or if the things change, it's not good. So, yep. So, what you can do is... Inside that custom error page, there's a few things you can do. You can allow the user to click a link to push to some other route that is known. Or you can, during the mounting of the page, you can route the person to the URL that is 404. Okay. So, what happens is that... Okay. Let's say you have a slash user slash, let's say, Aaron. Okay. Because this page is not generated, the static page is not generated because it is dynamic, it will go to the error page. Okay. So, what happens is that inside the error page, because you can have this information, you can do a push. Okay, push to this place. And if let's say I really exist inside, that will be good. But, let's say if I do not exist, so what's going to happen if I do not exist, it's going to go back and forth, back and forth error. So, you have to be careful how you handle this. I'm still trying to find a way to see whether it can be better handled. So, but the two ways that so far I've figured out is you either immediately push, but make sure you know that the person is there or you click a link. So, maybe in between what can happen is actually before pushing, you actually check the database to find that there's this person and then you push. And if you don't find the person, then you show the button to... that says not found and to go somewhere else. That could be one workaround. So, this is how the error handling is done. Okay. We can proceed. Okay. Okay. Time for another. Okay, this one will be a very quick break. Yeah, I think don't trust this. Anyway, the top, the top three react users is actually Singapore, India and Sri Lanka according to the search. So, apparently Japan is one of the... Japan and China is one of the top users. So, you see the blue colour and the red colour, there's a difference where, which people use what. A lot of Eastern European companies use it, I think. Ya. Ya, but one of my, one of my colleagues added AngularJS, right? AngularJS on top. View non-existent. Ya. But AngularJS from Google, then this Google search. I don't know what they do. Okay. Let's go on. Okay. So, naks options and life cycles. Actually, we have gone through it, but I'm just going to go through. Do you all want a short break? Okay. Five minutes. Five minutes. We have time. Yes. Five minutes. You can get a, grab a drink or something. Toilet break. We have over an hour left. It's time to 4.30, right? We will have like 10 slides left. Really? Until 4.30? 4. 4. Is it? What time does it end? There's a next event at 4.30. Okay. Shit. That means we end at 4. It's 3 hours. Okay. We have one hour. Slightly less. We have time. I'm not very sure what time it will work for. Because I only know when the next is when we get down to the coffee area. Lift. The lift. There's a lift. Yeah. I can bring it down. Yeah. We still have like, we can finish it like half an hour. Okay. Okay. It's okay? Is it? Okay. It's not too heavy going. Okay. Okay. Okay. Oh. Okay. It's great for static websites. Yes, actually. But we use NUX to generate the static. There's another option that I'll show you later. Yes. It's not just NUX. Yes, you can build static websites. Okay. It's inside the NUX options. You can actually put the header. All the meta tags and so on. You generate. Yes. You will generate those meta tags for each. If it's different for different page, it will be up. Yes. You can put the same or you can put different. Yeah. Thank you. Yes. Yeah. It was a bit heavy going in the earlier part. Yeah. Oh. Okay. But it's... Are you able to run it? Yeah. Okay. But I think it's error money. Oh. On the machine. Okay. But are you able to get the example running or something? Okay. Are you with her the machine? No. Oh. But I think I can follow the instruction. Ah, yes. Okay. So actually if the final answer is all inside the... Yeah. But there could be some problems. So it's better to run it later and then see that it works. Yes. Okay. Yeah. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Oh. Okay. Oh, great. Naks, are you going to use naks? Okay. Oh, a client. Like... Okay. Okay. Okay. Okay. Okay. Jia, you need company que payment? Okay. So you know there is like some qualifyingloe users who login but if there's like we need to have some public site or whatever the property user has Dan... Hei, ini adalah penghubungan melalui Melbaik yang saya pergi ke Dan... Sangat kecil, ada beberapa orang di sana yang bergantung untuk menghubungi Okey... Saya hanya menghubungi sebuah... Nanti ada dua minit, dua minit Mereka sudah menghubungi Mereka sudah menghubungi Mereka sudah menghubungi reaksi Mereka sudah menghubungi Pembaru tajam untuk pengerusi Mereka sedang menghubungi Mereka banyak perempuan yang mahu membantu Mereka ada pelajaran yang akan membantu Mereka ada pelajaran dalam perniagaan mereka Mereka ada pelajaran untuk membantu Kita tidak adalah penjualan mereka Kita boleh beritahu apa yang kita harus lakukan Kita akan berhenti, kita akan bercakap dengan mereka Okey... Terima kasih kerana menonton. Terima kasih kerana menonton. Kami akan melihat sebuah kata-kata naks. Ini sebuah kata-kata naks yang mempunyai kata-kata servis. Tetapi kami boleh mengingat kata-kata servis jika kami melakukan SPAs, atau Static Generator Website. Pertama, ia adalah pembunuhan yang menyebabkan di pakaian. Kamu dapat kata-kata, apa-apa saja. Naks akan bekerja di sana. Pertama, ia berlaku dengan kata-kata naks servis. Jadi, apa yang kata-kata ini? Untuk mengekalkan, kami ada Redux. Untuk menonton, kami ada Vuex, ini adalah kata-kata servis. Tapi kata-kata ini berlaku di kata-kata servis. Jadi, saya akan mengekalkan semua informasi dari kata-kata servis. Ini adalah kata-kata servis. Ini adalah kata-kata servis yang akan saya lakukan untuk kamu. Kemudian, setelah kita bekerja di kata-kata servis, kami akan pergi ke kata-kata servis, mencari kata-kata servis naks. Kemudian, kami akan mengekalkan semua pakaian. Kemudian, kami akan mengekalkan semua pakaian yang anda lihat. Jika anda mengekalkan, kami akan memberi anda ke pakaian 4 atau 5. Pakaian 4 atau sesuatu. Jadi, kami sudah melihat kata-kata servis. Ini adalah salah satu pilihan naks. Selepas itu, async, data dan fetch. Jadi, apa yang ini? Async data, seperti anda dapat data dulu sebelum anda meletakkan keadaan di depan. Jika anda menjelaskan, ada perkara ini adalah data. Data semasa anda mengekalkan semua data. Jadi, ia di sisi browser. Jadi, async data ini mengambil semua perkara. Kemudian, ia mengekalkan keadaan. Jadi, bagi fetch, ia akan mengekalkan pakaian async dan kemudian mengekalkan semua perkara di dalam pakaian anda. Bagaimana perbezaan antara naks servis ini dan yang ini? Naks servis ini, jika anda membuat pakaian di dalam pakaian, apa yang berlaku adalah, anda mengambil pakaian jika risau lebih kecil, ia masih okey. Kemudian, ia mengekalkan pakaian. Tapi jika risau anda besar, ia akan mengekalkan semua data, mempunyai. Jadi, ia akan mengekalkan masa yang lama dan kemudian, ia mengekalkan. Yang penting, ia tidak akan menjadi begitu bagus. Jadi, hanya berhati-hati di dalam pakaian servis. Tolong, jangan mengekalkan semua data dari pakaian servis dan mengekalkan. Ia seperti mengekalkan kembali ke P.H.P. Bukan anda mengekalkan semuanya. Jadi, mengekalkan di mana-mana lain. Saya telah melihat kesilapan yang berlaku. Jadi, website-nya hanya mengekalkan masa yang lama untuk mengekalkan kerana ada banyak data, mereka mengekalkan pakaian servis dan ia mengekalkan. Selepas itu, ia mengekalkan. Jadi, saya rasa pakaian besar adalah tentang mengekalkan pakaian servis. Apabila anda mengekalkan pakaian servis, ia akan mengekalkan pada pakaian servis. Jadi, pakaian servis mengekalkan informasi dulu. Selepas itu, ia mengekalkan semua data dan ia akan mengekalkan pada pakaian servis. Jadi, ini pakaian pertama. Dan ini lagi yang berlaku pada pakaian pertama yang mengekalkan pakaian servis. Jadi, jika anda mempunyai sesuatu yang sangat komputasi dan intensif, kemudian ia akan mengekalkan masa yang lama sebelum anda mengekalkan pakaian servis. Pada kemudian, ia seperti data asing. Ia berlaku di sini. Ia berlaku satu kali di sini juga? Pada pakaian pertama. Ya. Jadi, cara ini berlaku, ia hanya berlaku pada pakaian servis setelah ia mengekalkan pakaian servis dan setelah ini ia mengekalkan juga. Tapi perkara-perkara seperti nama ini adalah asing. Jadi, ia berlaku di latihan. Jadi, ia tidak akan menunggu lagi. Untuk setiap masa yang mengekalkan, ia akan tetap mengekalkan. Tapi ia hanya akan mengekalkan pada pakaian pakaian servis. Jadi, kita boleh mengekalkan apa-apa yang kita lihat. Kita dapat melihat konsol kita, seperti Kormor Firefox. Dan apa-apa pun kita mengekalkan kita dapat melihat konsol kita di sini juga. Untuk mengekalkan, ia sebenarnya cukup pintu untuk panggilan. Apa lagi di sana? Okey, ya. Jadi, ini adalah untuk SSR. Untuk SPA, anda boleh lupa tentang ini. Untuk SPA. Untuk website statik generasi, apa yang anda akan lakukan, anda akan mengekalkan perkara-perkara ini untuk menghasilkan semua html anda. Selepas itu, apabila anda mengekalkan pakaian, ia sudah berlaku pada pakaian ini. Jadi, sebenarnya, data asing ini, fetch ini, ia cukup berguna di sana. Anda hanya menggunakan html untuk melakukan pakaian anda. Ya, jika anda mahu. Okey, jadi, ya. Jadi, sekarang kita pergi ke pilihan nuk. Okey, kita telah mengekalkan data asing. Selepas itu, setiap kali anda mengekalkan pakaian, ia akan ditangkap. Ia akan ditangkap. Ia akan ditangkap. Ya. Fetch, yang sama. Jadi, sebenarnya, jika anda melakukan pakaian statik, saya rasa anda tidak perlu menggunakan itu. Tetapi, jika anda melakukan SSR, ya, anda dapat menggunakan itu. Ia hanya sebab anda perlu belajar. Jadi, hanya sebab anda perlu belajar. Okey, jadi, seseorang beritahu saya bagaimana untuk menggunakan pakaian, setiap pakaian yang berbeza, anda mahu menggunakan pakaian yang sama atau berbeza. Ada pakaian ini yang dipanggil HIT. Jadi, anda boleh mengekalkan pakaian. Dan sebagainya di dalam sana. Ada sesuatu yang anda ingat. Apabila anda menggunakan data asing, sebab anda mendapat render dan server, jika anda ingin melakukan pakaian funky, pakaian funky untuk mengetahui objek windu, ia tidak ada di sana. Jadi, ia akan mengekalkan. Okey. Pakaian ini akan mengekalkan pada masa yang berikutnya. Jadi, anda boleh mempunyai pakaian. Jika windu berada, anda boleh menggunakan pakaian. Ya. Dan ada satu perkara lain yang anda boleh lakukan. Ada perkara lain yang dipanggil proses yang di dalam konteks naks yang anda juga akan mengekalkan. Proses server betul-betul. Ini beritahu di proses server. Jadi, jika anda melihat ini, anda boleh tidak melakukan pakaian funky untuk pakaian yang sangat besar. Dan anda boleh mengekalkan pakaian yang anda ingat di dalam sana. Jika anda menggunakan pakaian, anda akan mengekalkan. Ya. Jadi, ini sebenarnya sangat penting, proses.server. Ini adalah perkara yang paling penting, proses.server atau proses.client. Kerana anda perlu mengetahui jika itu pakaian funky atau pakaian funky. Layout. Jadi layout, anda melihat bagaimana anda menggunakan. Di dalam perjalanan keadaan, ada sebenarnya layouts. Jadi, itu adalah keadaan yang mengubah layouts untuk berbeza. Di tengah-tengah, anda juga menggunakan untuk keadaan. Lalu, jika anda ingin mengekalkan pakaian funky, apabila anda mengekalkan, ini adalah perkara yang sangat mudah. Pakaian funky, anda boleh mengekalkan pakaian funky. Kita sudah melihatnya, mengekalkan pakaian funky. Pakaian funky adalah di perjalanan server. Jadi, pakaian funky, setiap kali ia berubah, anda boleh menggunakan ini untuk mengubah pakaian funky dan lakukan apa yang anda mahu. Sebelum itu, saya tidak tahu apa yang anda lakukan. Awak tahu? Saya tidak mengerti. Tapi, anda akan melihat perubahan perubahan. Lain hal yang terakhir, adalah mengubah pakaian funky. Jadi, jika anda mengekalkan pakaian funky, itu adalah perkara yang baik. Anda boleh mengubah pakaian funky. Pakaian funky, pakaian funky, apabila anda mengekalkan pakaian funky. Mereka mempunyai pakaian funky untuk mengubah pakaian funky dan anda boleh melihat perubahan. Ya, anda boleh melihat perubahan. Baiklah. Baiklah. Jadi, kita mengekalkan pakaian funky. Baiklah. Jadi, untuk pakaian funky, pakaian funky, pakaian funky yang anda perlukan, pakaian funky, mereka sebenarnya tidak menggunakan banyak. Tidak ada pakaian funky dalam pakaian funky kerana semua pakaian funky dan semua pakaian pakaian funky. Jadi, anda tidak perlukan pakaian funky tanpa SSR. Saya akan menunjukkan apa yang berlaku lagi. Ada sesuatu yang lebih berlainan. Anda tidak perlu risau tentang SSR dalam pakaian funky. Kerana pakaian funky, anda perlu risau tentang SSR kerana anda membeli pakaian funky yang mempunyai pakaian funky dan ia memperkenalkan dalam pakaian funky pakaian funky. Ada pakaian funky di tengah-tengah. Jadi, anda mempunyai pakaian funky dan ia memperkenalkan dalam pakaian funky. Ini memperkenalkan di tengah-tengah. Saya tidak suka memakai pakaian funky tetapi anda boleh membaca lebih banyak untuk memperkenalkan pakaian funky di dalam pakaian funky. Tapi anda boleh menggunakan pakaian funky sendiri. Jadi, pakaian funky. Jadi, pakaian funky yang dibuat di mana ia seperti komponen yang dibuat dan yang dibuat ada sebelah yang dibuat dan ada pakaian funky. Pakaian funky itu bahagia untuk digunjukkan. Apa yang berlaku? Pakaian yang dibuat adalah disebabkan pakaian funky. Pakaian yang dibuat dan yang lain, tidak. Jadi, anda perlu berhati-hati pakaian yang dibuat adalah di pakaian funky. Pakaian yang dibuat tiada pakaian funky. Jadi, saya rasa kita boleh memperkenalkan pakaian terakhir. Pakaian ini menunjukkan sesuatu yang sangat penting, yang adalah konteks. Ini salah satu objek di dalam NUX GX. Jadi, pakaian pakaian anda, pakaian anda dari mana? Jadi, jika anda mempunyai pakaian di dalam serva, jika kita mempunyai pakaian yang dilakukan, maksudnya, pakaian yang dibunyai dari pakaian pakaian, anda sebenarnya dapat itu dari pakaian pakaian. Tapi jika kita tidak mempunyai pakaian yang di depan, anda dapat itu dari pakaian pakaian pakaian. Oh, sebenarnya anda boleh menginginkan. Saya hanya cuba menjelaskan bahawa dalam nuk generasi anda hanya dapat menggunakan flag navigator, kerana ia tidak lebih berlaku. Ya, ia tidak berlaku, tetapi ini adalah ilustrasi yang baik di sisi servis dan SSR. Jadi SSR sebenarnya adalah sedap, tetapi ada beberapa keadaan untuknya. Okey, jadi kita bergerak. Ya, jadi ini adalah sesuatu yang anda patut menginginkan. Kita akan melihat beberapa keadaan. Okey, mari saya melihat. Okey, jadi mari kita pergi ke keadaan dalam servis. Mungkin kita zoom-zoom. Okey, kita perlu tahu apa yang digunakan dalam klien dan apa yang digunakan dalam servis. Ah, maaf, sebelum itu, ada perkara ini kata naks konteks. Jadi sebenarnya ada beberapa keadaan dalam sana. Ia tidak terlalu susah. Anda hanya boleh pergi dan melihat apa yang ada dalam klien dan apa yang ada dalam servis. Jadi anda perlu menemukan apa yang ada dalam servis atau klien dan tahu apakah untuk digunakan. Okey, jadi sumber apa yang ada dalam servis, keadaan. Jadi semua seperti anda telah menggunakan segala-galanya. Anda dapat mengambilnya daripada keadaan, tetapi jika anda dalam SPA atau sebagainya, maaf, anda tidak mempunyainya. Dalam klien, anda mempunyai keadaan, navigator, storage logo. Jadi jika anda menggunakan apa-apa yang ada dalam servis, keadaan keadaan, selamat tinggal. Keadaan keadaan keadaan berdiri di dalam keadaan, selamat tinggal. Okey, mari kita pergi kemudian. Bercakap tentang masalah tapi tidak melihatnya dalam hidup sebenar. Okey, jadi masalah dengan SSR. Ya, zoom in. Maaf. Ya, sebenarnya tidak perlu, tetapi saya hanya... Tidak apa-apa. Okey, jadi hukul yang telah dibuat hanya telah dibuat dalam servis. Ya Tuhan, ini sangat susah untuk melihat. Boleh digunakan? Ya. Oh, bergerak pada berdua. Ya, maaf, maaf. Okey, jadi... Okey, jika anda dalam klien, okey, anda tahu anda dalam klien. Jadi jika anda dalam servis, anda dapat memasak dan memasak kode ini dan kemudian anda memasak ini, window.addEventListener, klik. Tunggu. Tidak, ia betul kerana saya menunjukkan kesilapan. Ya, jadi jika anda dalam servis dan anda memasak ini, window.eventListener, anda akan melihat masalahnya. Saya hanya bercakap tentangnya tapi jika anda memasak kode ini, anda akan melihat masalahnya. Ia tidak perlu memasak kode eventListener, ia boleh menjadi sesetengah kode window, anda memasaknya dalam kode servis. Ia akan memasak. Okey, okey, selanjutnya, ini okey. Ia tidak akan menjelaskan. Okey, jadi... Pada masa yang selesa, kemudian menghasilkan semula. Okey, so... Ya, ini anda juga dapat hal ini. Pada masa yang menghasilkan sesuatu... mari kita memasak ke kode. Okey, tunggu, saya harap anda semua dapat melihat. Okey, jadi... kita memiliki hal ini yang namun mempunyai pilihan. Ia adalah pilihan pilihan dari jalan-jalan di lantai. Okey, apa yang berlaku adalah itu. Okey, anda boleh menerimahkan ke ke sisi, ke belakang, minta maaf, ke belakang. Jadi jika proses dalam browser, kemudian kita perlukan komponen datang. Kerana komponen datang di dalam, mungkin ada sesuatu pengguna, pengguna atau sesuatu. Jadi kamu hanya dengar dalam browser. Tetapi masalahnya, apabila kamu mengandalkan dalam server, kamu tidak dapat mencari, kerana perkara ini hanya datang dalam browser. Jadi kamu akan mendapatkan keadaan hidrasi. Okey, kita boleh zoom kembali. Okey. Okey, pengguna. Pengguna. Pada penggunaan klien, apabila mereka mengandalkan pengguna, perkara ini tidak dikenalkan. Jadi pengguna di dalam server, kamu mahu menjelaskan. Sebenarnya, dalam server, kamu sebenarnya mempunyai pengguna di dalam juga. Dan seperti perlukan, dan kamu mempunyai pengguna di dalam server. Tetapi kerana kamu mempunyai sesuatu yang lebih dikenalkan, bahawa kamu tidak mempunyai pengguna, ada keadaan keadaan. Pada keadaan keadaan, ia seperti keadaan hidrasi. Kita boleh... Ya. Okey, jadi... Ya, jadi pengguna tidak menggunakan konten server. Dan kemudian, mereka menghubungi pengguna, bla-bla-bla. Jadi bagaimana untuk mengekalkan? Jadi kamu hanya menghubungi komponen, keadaan keadaan, dengan perkara ini tidak ada keadaan SSR. Ya, ia seperti itu. Sementara itu, kamu... Ya. Sebenarnya ada satu perkara yang kamu boleh lakukan. Ada perkara ini, VEV. VEV. VEV. Ia adalah syarikat VUJES. Jadi kalau VEV ialah benar, ia akan menjadikan komponen itu. Jika tidak, ia tidak. Jadi kamu boleh lakukan... saya rasa kamu boleh lakukan VEV. Kemudian jika proses ialah browser, kemudian kamu menjadikan komponen itu. Baiklah. Ia tidak ada perkara ini? Ia tidak ada perkara ini? Ya. Di sisi servis. Kamu tidak akan mempunyai perkara itu? Ya. Jadi kamu akan keluar. Ya. Sebenarnya, SSR ini, ada beberapa masalah dengan itu yang saya bekerja pada, jika komponen bergerak, kemudian ada beberapa perkara yang berlaku. Kamu akan melihat perkara yang benar-benar berlaku seperti kamu menjadikan keadaan. defeat Miss saya akan melihat perkara satu. B wiedh perkara satu, menjadikan yang tidak ter ceuxすごい. Saya akan memizerkan perkara ini. Jadi, apa yang saya nak, Dan satu perkara lagi, anda perlu tahu mana yang anda mahu rendah dan mana yang anda tidak mahu rendah. Kadang-kadang, beberapa blocs, html-template blocs, anda betul-betul perlu berhati-hati Bagaimana anda mahu rendah perkara lain? Bagaimanakah noSSR sebenarnya membantu? Ia membantu banyak, tapi maksud saya, semuanya masih berhati-hati pada kawasan klien yang akan membebaskan perkaraan. Maksud saya, ada satu perkara yang lebih besar di sini dan jabas berkawasan. Ya, betul. Maksud saya, ada beberapa perkara yang lebih kecil, anda perlu dikenali. Bukan 100% sempurna, tapi jika anda boleh mengalami perkaraan, Mungkin ada perkara lain yang saya boleh beritahu. Tapi sejauh ini, saya tidak menyebabkan masalah mereka. Saya tidak menyebabkan perkara itu sebelah tahun yang lalu, tapi tidak di tempat itu lagi. Ya, perkaraan hidrasi. Maksud saya, perkara ini adalah perkara yang saya tidak dapat... Tidak ada jawapan di Google, tapi kita mengembangkannya dengan peraturan dan peraturan. Jadi, anda mempunyai perkara yang mempunyai... penyelesaian Vue.js. Vue.js mempunyai konsep modul yang mempunyai perkaraan. Jadi anda dapat mempunyai perkaraan untuk pengguna. Anda dapat mempunyai perkaraan untuk produk. Anda dapat mempunyai perkaraan untuk sesuatu yang lain. Jadi anda mempunyai perkaraan. Tetapi perkaraan adalah statik. Anda membuat perkaraan di dalam perkaraan. Apa yang berlaku jika anda mempunyai perkaraan yang anda ingin membuat... dynamically dan perkaraan di dalam di dalam, jika anda mempunyai perkaraan yang anda ingin membuat dynamically dan perkaraan di dalam. Jadi, perkaraan ini adalah perkaraan yang anda boleh mempunyai untuk menggantikan perkaraan. Tetapi perkaraan adalah... setelah menggantikan perkaraan, saya dapat perkaraan yang statik tidak dikenalkan. Tidak dikenalkan. Tidak dikenalkan. Statik tidak dikenalkan. Jadi, apa yang berlaku adalah... saya sebenarnya perlu mempunyai perkaraan yang lain di bawah... untuk menginitiasi statik lagi. Saya tidak tahu kenapa. Tetapi perkaraan ini berlaku. Jadi, setelah saya membuat perkaraan ini, perkaraan ini berlaku. Kerana jika saya tidak mempunyai perkaraan di bawah, set, counter, bla... ia tidak berlaku. Yang ini di dalam... Saya rasa yang ini kita boleh cuba. Ia di dalam kota anda di bawah public.view. Di bawah public.view. Kerana semuanya sangat besar. Ya. Mari kita pergi di bawah public.view. Ya. Baiklah. Tidak di sini. Baiklah. Tunggu. Ya. Ia di dalam fungsi yang dibuat. Baiklah. Jadi sekarang, anda hanya membuka konsol log F12. Baiklah. Jadi, ia adalah permulaan dan permulaan dan permulaan. Anda hanya menyebabkan kedua ini. Ya. Anda hanya menyebabkan kedua ini. Kemudian... Ia hanya menyebabkan kedua ini. Baiklah. Kemudian, mari kita lihat apa yang berlaku. Ada beberapa masalah. Ada beberapa masalah yang baik. Ya. Tidak. Ia mungkin tidak. Baiklah. Refresh. Baiklah. Baiklah. Tunggu. Tunggu. Tunggu. Tunggu. Tunggu. Baiklah. Jadi, setelah anda meletakkan pakaian, ada sebuah botol yang dipanggil Test. Anda hanya perlu mencari. Kemudian... Ya, ada botol yang betul. Kemudian, konsol anda melihat keadaan. Baiklah. Ini adalah masalah. Ia tidak dapat menyebabkan counter di dalam. Baiklah. Anda boleh menyebabkan. Ya, tidak menyebabkan dan melihat apa yang berlaku. Baiklah. Baiklah. Baiklah. Jadi, sesiapa yang menyebabkan keadaan? Saya harap semua orang menyebabkan keadaan. Baiklah. Jadi, setelah anda selesai, menyebabkan keadaan. Tidak, tidak menyebabkan keadaan. Refresh dan klik lagi. Ia sepatutnya bekerja dengan baik. Saya tidak tahu kenapa ia berlaku. Saya tidak ada masa untuk menyebabkan keadaan. Tetapi... Ya, ia adalah keadaan dan keadaan. Ya, kita boleh pergi ke dalam. Ya. Ya. Tidak, kita boleh... Jadi, semua orang menyebabkan keadaan dan mencoba. Baiklah. Anda okey? Anda menyebabkan keadaan. Anda menyebabkan keadaan. Baiklah. Kemudian menyebabkan keadaan. Anda menyebabkan keadaan, bukan? Baiklah. Sekarang menyebabkan keadaan dan klik. Baiklah. Ya. Baiklah. Baiklah. Baiklah. Oh, ia di dalam file yang sama. Ada keadaan dan klik yang sama untuk mencoba. Memang sama untuk mencoba. Ya. Baiklah. Anda semua okey? Boleh melihat masalahnya. Kemudian selepas ia tidak menyebabkan keadaan, ia sepatutnya okey. Ya, jadi ini... Ya, saya mencoba keadaan dan keadaan banyak-banyak. Saya rasa... Saya rasa... Saya menyebabkan keadaan untuk banyak jam. Ya, saya menyebabkan untuk menyebabkan bahawa perkara ini tidak boleh bekerja. Tetapi anda perlu melakukannya untuk... ...banyak perkara di dalam perjalanan. Baiklah. Satu tip adalah perjalanan, bukan? Jangan menyebabkan semuanya di dalam perjalanan. Sebenarnya perkara yang penting. Tidak menggunakan perjalanan untuk semuanya. Sangat. Baiklah. Baiklah. Jadi sekarang kita datang ke beberapa perkara yang menarik... ...tapi tiba-tiba tidak berlaku lagi. Jadi ada beberapa perkara di dalam perjalanan. Boleh menyebabkan perkara ini. Baiklah. Di dalam perjalanan naks, bukan? Di dalam, di dalam perjalanan. Orang-orang mencari bahawa... ...perjalanan ini mengambil tiga sekitar. Ya. Jadi mempunyai banyak keadaan. Itu akan menjadi masalah. Jadi... ...seperti... ...saya rasa mereka mengambilnya dalam perjalanan naks. Satu-satunya perkara lain adalah... ...saya mengambilnya dengan cepat... ...selepas banyak keadaan juga mengambilnya dalam perjalanan naks. Saya tidak pasti kenapa, tetapi anda dapat menerima... ...dokumentasi. Jadi perkara yang menggunakan perjalanan adalah... ...awak perlu berhati-hati juga. Kerana jika perkara ini benar-benar berlaku... ...saya boleh bermain jika anda melakukan sesuatu yang besar. Okey. Saya akan menunjukkan lagi... ...saya akan menunjukkan lagi... ...saya akan mencari-cari lagi untuk PugS. Okey. Selepas itu... ...saya akan memperbaiki sebuah perkara ini. Ya. Ya, kerana perkara itu akan mengambil lagi tiga jam. Okey. Ada perkara yang membantu... ...terbaik untuk semua orang. Okey, selanjutnya. Okey, jadi... ...berkaitan performa... ...sehingga... ...untuk gambar, anda boleh menggunakan... ...sampai penjara untuk memasak gambar. Okey, satu contoh adalah... ...saya akan berkata, anda mempunyai sebuah pembentangan... ...dan anda mempunyai sebuah pembentangan. Jika anda mempunyai sebuah pembentangan, anda mencari. Anda mempunyai 200 pembentangan, anda mempunyai 200 pembentangan... ...pembentangan di satu masa. Jadi, sebuah pembentangan ini... ...sebenarnya, apa yang anda boleh lakukan... ...awak mencari. Anda akan mencari 5 pembentangan... ...yang adalah pembentangan sebuah pembentangan... ...untuk contohnya... ...dan mungkin plus atau minus 5 pembentangan... ...dan juga anda mencari beberapa pembentangan... ...dan apabila anda mencari... ...awak mencari. Jadi, anda tidak mempunyai 200 pembentangan, anda hanya mempunyai beberapa pembentangan. Okey, itu satu perkara. Mencari pembentangan... ...dengan... ...mencari pembentangan jika mungkin. Saya tidak perlu mencari... ...sebabnya. Baiklah, beberapa pembentangan yang lebih baik... ...saya cuba memandangkan dan menjelaskan. Baiklah, anda memiliki... ...banyak pemutusan dalam aplikasi anda.... ...jadi jika boleh menikmati 10 pembentangan... ... ...ibu tidak diserang yang baik untuk memalukan semua 10 pembentangan. Jadi, sebelumnya... ...yang ada i18n periksaan yang소... ...adalah mereka tidak memalukan semacam pembentangan... ...tapi sekarang... ...awak boleh memalukan semacam pembentangan. Jadi, jika anda memalukan semacam pembentangan... ...debenarnya, anda akan memalukan semacam frang. jadi menggunakan load yang luar biasa bukan hanya untuk bahagian, tapi juga untuk komponen komponen anda dapat menjadi luar biasa load hanya apa yang diperlukan bla bla bla okey, tak mengapa, selanjutnya okey, jadi load js3 ada perubahan yang berubah extremnya minimal hanya satu perkara sejauh yang saya nampak seperti slot ini jadi banyak orang menggunakan slots seperti satu perkara lebih tinggi atau komponen jadi anda dapat meletakkan anak-anak di dalam node parent dan kemudian mereka mengubahnya untuk slot okey, itu semuanya sebenarnya sangat mudah untuk untuk menghubungi dan untuk beautify yang kita menggunakan sekarang adalah versi 1 ia akan bergerak ke versi 2 yang sekarang di beta saya akan mengubah semuanya ia lebih stabil okey, stil mereka sebenarnya menggunakan hal ini namun stilus okey, kemudian masalah dengan stilus adalah bahawa ada beberapa masalah beberapa orang tak dapat menjelaskan atau sesuatu sebab jadi ia seperti tidak sangat mendukung jadi mereka menghubungi stilus ia bukan sebenarnya menjelaskan untuk sejauh sekejap daripada apa yang saya tahu jadi sebenarnya kita perlu berhati-hati dengan kita sebab CSS yang kita menggunakan apabila kita membangun sesuatu yang semua orang boleh menggunakan jadi sebenarnya CSS sangat kuat hari ini jadi saya ingin mempertimbangkan hanya berhati-hati dengan CSS ada banyak perubahan kepada proses proses inisialisasi dari beautify jadi ini saya akan juga berubah jadi ini untuk mengambil notis kerana sekarang kita hanya ada versi 1 ya kemudian okey, jadi mempertimbangkan menggunakan stilus cepat membangun FWF senjata okey, tidak mengenangkan SSR, SPA, stilus okey, kemudian yang ini grid sum seperti juga generator stilus grid sum.org sesuatu yang saya ingin mengenangkan jadi terakhir ada banyak perubahan dan perubahan jadi ia membuat perubahan yang luar biasa ia akan membuat perubahan yang luar biasa dan kita tidak perlu mengenangkan semua itu ia juga akan melakukannya apabila anda menjadi generator stilus jadi itu adalah grid sum iya grid sum grid sum itu adalah grid sum iya grid sum iya, iya, iya iya iya iya iya iya kita tidak perlu mengenangkan perubahan iya, iya, iya iya, iya, iya jadi perubahan yang lainnya kita ada reading dan dalam source kita ada permelukannya betul jadi ini saya akan utungku dalam langkah di dalam perubahan dapat ridiculous dekan Mei iniirler dia iya ok saya akan memputkan langkah dalam perubahan perlu terus apabila katakan anda dapat surfing financi saya saya adalah formed rancangan是的 tapi wair semoga semua ...saya masih boleh membahas. Terima kasih, semua. Terima kasih. Jika kamu semua ada pertanyaan, kamu boleh tanya. Tanya. Atau orang lain juga. Terima kasih kepada Eugene dan Shilin. Mereka juga menggunakan Vue.js tapi bukan naks. Kerana mereka perlu menggunakan Vue.js. Jadi mereka juga sangat baik menggunakan Vue.js pertanyaan. Terima kasih. Jika ada masa, kamu boleh menolong kami. Ya, floor masih terbuka atau boleh duduk di sini. Sehingga kemudian lelaki lain. Dan air. Terima kasih banyak-banyak.