 Sebenarnya, kenapa kita tak gunakan ini? Bukan itu bagus tak? Untuk buat apa-apa saja dengan satu lelaki? Maksud saya, saya minta kamu semua. Mungkin itu sebabnya. Itu akan bekerja. Bagaimana saya buat? Baiklah. Kenapa javascript untuk pengetahuan saya? Ya, pertama saya bercakap di Talk.js dengan javascript dalam titik ini. Jadi minta maaf, Hu Jing, untuk itu. Sebelum saya bermula, boleh kita bersama-sama berikan alasan untuk Hu Jing dan mempunyai organisasi? Untuk mempunyai perusahaan selama 4 tahun? Ya. Saya terpaksa mempunyai perusahaan saya. Ya. Nama saya Eric. Saya perusahaan perusahaan di Rakutenviki. Dan... Saya sangat gembira untuk perusahaan saya untuk memasukkan alasan ini dan juga alasan saya yang terima kasih untuk bercakap di alasan ini. Baiklah. Jadi, mari saya beritahu cerita kamu. Apabila saya berada di sekolah 6 tahun lalu, saya melakukannya dengan projek sekolah. Kita bersama-sama membuat alasan yang cantik untuk aplikasi kami. Walaupun kita tak berjumpa lagi, tetapi saya bermula berfikir tentangnya. Saya selalu mencari alasan ini terlalu spesial. Pada tahun 2016 atau tahun 2015, saya mempunyai alasan pertama saya sebagai perusahaan perusahaan. Dan itu adalah cara saya bertemu dengan dia lagi. Kita bertemu setiap hari, kita bekerja bersama-sama, membuat alasan kita sendiri. Dan kemudian, awak tahu apa yang akan berlaku? Kita menjadi perusahaan. Dia sangat cantik. Dia membuat alasan yang cantik. Dia perlu membuat alasan yang cantik juga. Dan dia membuat hidup saya sangat banyak lebih warna. Saya selalu tahu dia sangat spesial dan sangat unik. Dan dia adalah motivasi saya untuk pergi bekerja. Tapi tentu saja, tiada siapa yang sempurna. Dia tak bergaduh. Dan juga bergaduh. Dia mencari alasan di mana-mana yang dia boleh. Di bilik dia, di bilik dia, di bilik kita, di tempat nama global. Dia membuat alasan di mana-mana yang... kadang-kadang tak bergaduh. Tapi jika awak bergaduh untuk mengubah itu, hal saya akan berhenti sepenuhnya. Saya ada beberapa kawan baik. Kita bergaduh bersama. Dia tak bergaduh dengan mereka. Jadi kadang-kadang, ketika kita bergaduh, saya perlukan dia dengan beberapa alasan. Siapa-siapa boleh mengetahui alasan itu? Siapa-siapa? Mungkin awak mahu melihat kawan saya dulu. B adalah kawan saya. Jadi sekarang awak tahu. Saya memberikan alasan untuk dia. Okey. Jadi hidup saya dapat lebih susah dan lebih susah mengetahui dia. Sehingga sekarang, saya masih yakin, saya yakin semua orang sudah tahu nama dia. Nama dia CSS. Man, saya suka CSS. Dan saya perlu mencari hubungan ini. Saya perlu mencari cara baru untuk mencari. Jadi saya boleh lanjutkan cerita ini selama-lamanya. Tapi tentu saja, kreativiti saya tak... Jadi mari kita berhenti serius sekarang. Apa masalahnya dengan CSS? Dan bagaimana kita boleh mencari CSS masalah dengan kawan baru javascript? Masalah pertama, nama global. Jadi ya, semuanya global di CSS. Saya yakin semua orang sudah melihat ini. Tentang tawaran. Mereka berdiri berada di bar, dan bar berlainan di bar yang sangat berlainan. Masalah kedua, lebih agresif. Dan sudah dibuat oleh Ken Wheeler. Tapi ya, jadi kamu tahu perkara yang terbaik tentang nama global. Dan kita mempunyai solusi yang baik. Dan saya yakin semua orang sudah melihat ini. Mereka mula menggunakan balang, terbicara modifai... atau tamping keberanian yang ter昔ang. Dan ini adalah sesuatu yang saya lebih suka. Yang mengalami sistem CCS. Yang sedikit terbaik menggunakan konvensi pada benda-benda. Dan sebuah kedua, adalah gilu lapsan tersebar oleh Harry Roberts. Untuk mereka, ia membantu kita membuangkan css dalam cara yang baik. Tetapi seperti Chris Coyer dari Css Tricks berkata, sebuah solusi ini membantu anda menolak masalah dalam cara kata-kata kata-kata tangan tangan. Jadi kata-kata anda harus berhati-hati pada pilihan komponen anda. Anda harus berkata-kata dengan baik. Tetapi tentu saja, kita tidak dapat mengucapkan masa itu. Dan itu, solusi akan berkata-kata dengan javascript. Dan kata-kata css dalam jas. Jadi apabila kita membuangkan kata-kata tangan dalam komponen, semuanya berkata-kata di bawah komponen sendiri. Jadi tidak ada nama global. Sudah tentu pada akhir, terutama, terutama, kita masih mempunyai ini menjadi nama global, tetapi ia sudah mempunyai nama-nama unik. Jadi anda tidak akan mempunyai nama global itu. Pada masalah yang berikutnya, itu adalah kota-kata kata-kata tangan tangan tangan tangan tangan tangan. Jadi bagaimana banyak anda meminta diri anda apabila anda mahu mengalami nama-nama ini? Bagaimana saya menggunakan ini? Anda perlu mencari nama-nama anda dalam file css, file javascript yang anda lakukan dalam manipulasi. Dan ia dapat menjadi lebih teruk apabila anda membuat nama-nama anda dalam javascript, sesuatu seperti anda mempunyai nama-nama dan bergantung pada nama-nama ini, bergantung pada nama-nama ini, anda menggantungkan nama-nama yang bergantung pada nama-nama anda. Jadi anda mempunyai nama-nama yang bergantung. Betul. Tetapi lagi, ia sangat natural dalam file css, apabila anda mempunyai nama-nama anda dalam komponen, apabila anda tidak mahu membuat nama-nama anda dalam komponen, hanya membuat nama-nama dan semuanya bersih. Pertama, nama-nama tidak sangat menarik, juga sangat bergantung pada nama-nama global. Ya, saya rasa saya tidak perlu bercakap dengan nama-nama ini lagi kerana kita semua tahu tentang ini. Kita mempunyai banyak nama-nama dalam UI. Kita mempunyai banyak nama, konten, semua nama, dan kita perlu mempunyai nama-nama berbeza. Kemudian, menggunakan nama-nama di CSS, ini adalah cara kita mempunyai nama-nama UI. Jadi kita tidak mempunyai nama-nama kelas tetapi mempunyai nama komponen dan mempunyai nama-nama anda dalam komponen. Jadi anda boleh mempunyai banyak nama-nama seperti anda boleh. Anda boleh mempunyai banyak nama-nama, seperti anda boleh dalam komponen kota tanpa mengekalkan sama-sama. Pada perkara yang tersebut, apabila anda perlu mempunyai perkara, banyak masa, seperti sesuatu yang sangat kelas, tetapi anda ingin mengubahnya dalam javascript. Dan apa yang anda lakukan? Anda perlu mengusahkannya di kedua tempat. Dan setiap kali anda ingin mengubah, anda perlu mengubahnya dua kali. Untuk contoh, anda mempunyai konten pakaian yang berada seperti 50 pixel dari atas pakaian anda kerana barang nama anda adalah 50 pixel tinggi. Jadi bagaimana anda... Jadi itu menjadikan banyak masalah apabila anda mengubah dan mengubah kota anda. Dan tentu saja, menulis CSS dalam javascript. Apa yang anda perlukan adalah javascript variable, consternya. Pada perkara yang tersebut, adalah CSS yang penting. Sangat susah untuk menjelaskannya. Tetapi, dengan CSS yang penting, anda ingin memasukkan CSS, yang anda menunjukkan kepada penggunaan. Dan lagi, ini dapat menjadi sebuah pakaian dengan CSS dalam javascript apabila anda hanya memasukkan komponen anda, dengan memasukkan. Sudah tentu, ia dapat dibuat dengan kota javascript dan kota splitting dan sesuatu yang luar biasa. Tetapi, bagi anda, anda dapat memasukkan javascript dan perkara yang terakhir adalah memasukkan. Sekarang, orang-orang mengerikan kota javascript. IOS hanya mempunyai kota javascript. Android juga mempunyai kota javascript selama lama. Website mempunyai kota javascript. Kita juga mempunyai kota javascript dalam vkey. Jadi, cara yang tersebut, ada dua cara. Pada pula, anda mempunyai kota javascript, seperti kota javascript.scss apabila anda memasukkan CSS. Kemudian, anda mempunyai kota javascript yang mengawal semuanya yang anda telah menerima dengan mode line. Pertama, anda mempunyai nama ekstra, seperti modifiasi untuk blog, untuk element, untuk semua komponen yang anda mempunyai. Tetapi, anda membuat banyak javascript apabila anda mempunyai dan mempercayai kota javascript. Jadi, kerana mempunyai mempunyai kota javascript, saya akan beri anda contoh bagaimana anda mempunyai CSS dalam javascript. Terutamanya, anda mempunyai komponen kota javascript. Jadi, anda hanya mahu melihat kota javascript. Bagus. Jadi, apa yang kita perlukan adalah sebuah kota javascript yang mempercayai kota javascript untuk mempunyai komponen yang di bawah kota javascript. Saya harap anda mempunyai kota javascript dan mempercayai kota javascript. Tetapi, apabila anda mempercayai kota javascript atau mempercayai kota javascript, anda akan mempunyai kota javascript yang anda mempunyai. Anda dapat melihat kota javascript di sini. Jadi, saya mempunyai kota javascript sekarang. Cara yang saya mempercayai, bagi contoh, saya mempunyai kota javascript dan saya mempercayai kota javascript untuk mempercayai kota javascript. Dan cara yang berlaku adalah anda mempercayai fungsi di sini. Sebelumnya, anda mempercayai kota javascript. Fungsi akan dipercayai. Kemudian ia mempercayai kota javascript. Biar saya menunjukkan contohnya. Ini adalah contoh yang saya mempercayai dari CSS-JS Playground oleh The Steam Straw, saya rasa. Jadi, saya tidak tahu di mana saya mempercayai kota javascript di sini. Apa pun, apabila anda mempercayai kota javascript, saya akan mempercayai. Apabila anda mempercayai kota javascript, saya akan mempercayai kota javascript di sini. Kota javascript di sini akan dipercayai dalam kota javascript. Dan anda mempunyai ini. Dan itu adalah cara mudah. Sebab anda sudah tahu, anda mempercayai kota javascript atau apa-apa pun, kota javascript yang anda mempercayai. Jadi anda tahu bagaimana perkara yang berlaku di kota javascript. Anda tidak perlu mempelajari perkara baru. Anda hanya mempercayai perkara baru dan anda mempercayai dengan yang penting dalam kota javascript. Dan kemudian anda mendapatkan sokongan yang anda mempercayai. Baiklah, sekarang kembali. Jadi, itu adalah perkara yang mempercayai. Jadi, itu adalah masalah kota javascript yang kita dapat menggunakan kota javascript untuk membantu kita mempercayai. Namun, kota javascript, kota javascript dan mempercayai. Tapi apa-apa yang hebat tentang kota javascript dalam javascript? Ada beberapa perkara yang tidak benar-benar berlaku dengan kota javascript tetapi saya akan menyebabkan di sini. Dan dari sekarang, saya akan bercakap tentang lebih banyak detaian yang dipercayai dengan kota javascript yang saya menggunakan, yang adalah kota javascript. Kita dapat menggunakan kota javascript. Seperti yang saya beritahu, kita suka kota javascript. Saya suka kota javascript. Saya tidak yakin tentang anda. Tetapi perkara yang hebat tentang kota javascript atau banyak kota javascript dalam javascript di luar sana, adalah bahawa anda dapat menggunakan kota javascript. Jadi, anda menggunakan kota javascript yang anda sangat menggunakan. Tak ada perubahan. All you need to do is to mark your CSS in a backtake with a style function from styles component and then you have your component style. The next thing is that it's designed for the component age. Yes, so we are living in a component age. We we think of our UI as a collection of components with a lot of legal box. So this is a code from Chantastic. If you are writing React, you have access to more powerful styling construct than CSS class names. You have components and it's not just true for React, it's true for all the front-end modern front-end framework that you are using right now because everything is component driven. And this leads to the next point is codified best practices. I actually didn't make up these terms. It's actually worked by Glenn Maiden which is the co-creator of CSS module and style components. So what does it have us? It enforce component encapsulation. Remove the mapping between styles and components. So you can imagine of that as when you create a UI component you don't need to think about the implementation details of your representational layer anymore. For example if you have a button with like a two variants the default one and the primary one the way we use to think about it is I want a primary button I need to render a button with a primary class name but now we talk we talk to our components using components API. So we don't care about what class name it is, we just pass a props and that's how we can abstract like the implementation details away from our logic and the next thing is also very important separation of concerns. So a lot of people when they first heard about CSS in JS they say no I don't want this I don't want to mix styling in my javascript I was one of them as well I was very against that but then I think again we are just exploring a new dimension of separation of concerns. So we use to separate by logic, styling and we separate our UI by components instead of having CSS, HTML you have buttons dead picker, motor whatever components that you have So CSS in JS blends really well with this now I'm going to speed up a bit so that I don't take much of your time the next thing we can use javascript tooling we own the tooling auto prefixing, linting, minification tree shaking code splitting all the cool words that they are always talk about in the javascript world now you can use that you can utilize that in your styling and it's easy to migrate from CSS as well because as I mentioned we write actual CSS so all you need to do is just copy and paste all you need to do is just yarn install style components, yarn install emotion, whatever libraries you have and it supports gradual migration as well because it's so easy to to start developing your UI right so that's what's good about CSS in JS but of course it has some drawbacks it has some cost number one is performance cost we have because class is like compile in runtime so your browser need to spend more time to do like kind of compile and inject style into the page but you can see that from v3 to v4 of style components and now v4 to v5 the performance just keep increasing really fast so with this kind of improvement in the community I'm sure it can catch up with CSS maybe not like even, but very soon and of course bandwidth cost okay so so it's not really big library it's only like 12kb but with 12kb what you gain you can avoid loading on the CSS that you don't use you avoid even sending the request to get the CSS which is render blocking at the first place so this is actually a gain and the next thing is not a very happy depth tool because what you see is the hash class name but with the support of javascript tooling I think we have some tools that actually put your components name out there for you so you can debug it easier so yeah again why do I write CSS in javascript or the actual question is when should I use it of course it's not a best solution for every case you use it if your code base hash if you have a component library design system in place if you are facing all the problems that I just talked about or if you create and kill features often because the dead code elimination will be a big win for your team and the last thing if you hate CSS but of course no way we don't hate it we love CSS again so that's the end of my talk before I this is some shameless plug I'm from Rakuten Viki we build a beautiful website a global video on demand platform focusing on Asian content and yes we are hiring I'm looking for my boss so if any one of you and my colleagues as well so engineering manager full stack engineer so if any one of you are interested and have a friend please reach out to my recruiter you can scan the barcode and yes thanks and see you again