Smashing Podcast Episode 18 Dengan Mina Markham: Bagaimana Saya Bisa Belajar Bereaksi?

Dalam episode Smashing Podcast ini, kita berbicara tentang mempelajari React. Seperti apa React bekerja, dan bagaimana developer berpengalaman bisa memulai? Saya berbicara dengan Mina Markham untuk mencari tahu.

Tampilkan Catatan

• Mina Markham di Twitter
• Situs web pribadi Mina

Update mingguan

• Dari Situs Statis Hingga Aplikasi JAMstack Pengguna Akhir Dengan FaunaDB oleh Bryan Robinson
• Apakah Situs Web Anda Menekankan Pengunjung? oleh Suzanna Scacca
• Mirage JS Deep Dive: Memahami Waktu, Respons, dan Passthrough (Bagian 3) oleh Kelvin Omereshone
• Membangun Aplikasi Web Pengenalan Wajah Dengan React oleh Adeneye David Abiodun
• Internasionalisasi Di Vue Dengan Plugin Vue I18n oleh Timi Omoyeni

Salinan

Drew McLellan: Dia adalah seorang arsitek front-end, pembicara dan penyelenggara konferensi, dan pecinta sistem desain. Karyanya di perpustakaan paten Pantsuit untuk kampanye kepresidenan Hillary Clinton untuk Amerika menandai titik balik untuk sistem desain dalam industri dan ditampilkan pada publikasi, seperti Wired, Fast Company, dan Communication Arts. Seperti kebanyakan dari kita, dia menulis kode untuk mencari nafkah, saat ini sebagai insinyur senior di Slack. Jadi kami tahu dia adalah pengembang yang berbakat dan berpikiran maju, tetapi tahukah Anda bahwa dia pernah dikira Patrick Swayze? Teman-temanku yang hebat, tolong sambut Mina Markham. Hai Mina. Apa kabar?

Mina Markham: Saya menghancurkan.

Drew: Senang mendengarnya. Sekarang, terkadang di Smashing Podcast, kami berbicara dengan orang-orang tentang topik yang paling mereka kenal. Dan terkadang menyenangkan hanya untuk membicarakan sesuatu yang sedikit tangensial. Sekarang, saya dapat mengobrol dengan Anda sepanjang hari tentang perpustakaan pola, sistem desain, pekerjaan luar biasa yang telah Anda lakukan di area tertentu, dan saya dapat berbicara dengan Anda tentang subjek yang mungkin pernah Anda bicarakan, acara, seperti Acara Selain itu, hal-hal seperti arah seni. Dan kita jelas bisa berbicara tentang CSS sampai sapi pulang. Tetapi Anda men-tweet beberapa hari yang lalu, dan saya menyadari bahwa kami sebenarnya berada di kapal yang sama karena kami berdua adalah insinyur front-end yang berpengalaman dan kami berdua baru-baru ini mulai bekerja dengan React. Jadi sebelum kita masuk ke React itu sendiri, di mana Anda sampai pada titik ini? Apakah Anda pernah bekerja dengan perpustakaan dan kerangka kerja lain untuk pengembangan JavaScript?

Mina: Tidak, sebenarnya saya telah melakukan sebagian besar JavaScript vanilla untuk sementara waktu. Dan sebelum itu, tentu saja saya masuk ke JavaScript. Biarkan saya ulangi itu. Saya mulai bekerja dengan skrip Java menggunakan jQuery karena itu paling masuk akal bagi saya. Itu adalah sesuatu yang sangat mudah bagi saya untuk menguraikan untuk mencari tahu apa yang terjadi. Dan kemudian dari sana saya mundur untuk melakukan hanya vanilla, JavaScript biasa, ESX, dan saya tidak terlalu banyak terlibat dalam perang kerangka kerja. Saya tidak punya, seperti saya tidak punya favorit. Saya tidak punya anjing dalam pertarungan. Saya seperti, “Untuk Anda, Bereaksi, terserah. Aku tidak terlalu peduli.” Tapi waktu berubah.

Drew: Dan dengan cara seperti ini bekerja dengan JavaScript vanilla, karena saya juga telah melakukannya sendiri. Saya telah bekerja dengan berbagai kerangka kerja. Saya telah melakukan banyak hal dengan jQuery di masa lalu. Saya bekerja dengan YUI, Perpustakaan Antarmuka Pengguna Yahoo. Pernahkah Anda merasakan banyak masalah yang coba diatasi oleh sesuatu seperti arsitektur React?

Mina: Saya tidak berpikir saya pernah. Saya menghabiskan sebagian besar karir saya membuat situs web versus aplikasi web dan hal-hal seperti itu. Jadi semua yang saya lakukan cukup statis sampai batas tertentu. Jadi saya tidak pernah benar-benar harus berurusan dengan manajemen negara, hal-hal seperti itu. Jadi poin rasa sakit yang React coba pecahkan tidak pernah benar-benar saya terapkan pada jenis pekerjaan yang saya lakukan.

Drew: Secara umum, apa jenis proyek yang Anda miliki dengan React sejauh ini?

Mina: Sebenarnya itu hanya satu proyek, yang saat ini sedang saya kerjakan dan saya tidak bisa memberikan terlalu banyak detail karena perusahaan publik dan semua hal bagus itu.

Drew: Tentu saja.

Mina: Tapi pada dasarnya apa yang saya coba lakukan adalah saya mencoba menggunakan React to, ini adalah jenis produk yang sangat interaktif di mana saya membutuhkan orang untuk dapat masuk dan menyimpan data pada keadaan tertentu dan kemudian memanipulasinya dan menghasilkan sesuatu yang lain dengan data tersebut. Dan itu hanya sesuatu yang bukan manipulasi DOM sederhana pada saat itu. Ini benar-benar jauh lebih kompleks, pengelolaan data front-end dan pengelolaan status data tersebut. Jadi benar-benar tidak ada alternatif lain selain menggunakan semacam perpustakaan yang mencoba memecahkan masalah itu. Saya tahu saya tidak akan bisa melewatinya hanya dengan JavaScript biasa. Saya mempertimbangkan mungkin menangani sesuatu di sisi server, tetapi sekali lagi, karena sifat yang sangat interaktif dari apa yang saya kerjakan, itu harus ada di klien. Jadi kita sudah menggunakan React at Slack untuk berbagai hal lainnya. Jadi saya seperti, "Oke, kita harus melanjutkan dan mengadopsi hal yang sama yang digunakan oleh induk perusahaan lainnya dan pergi dari sana."

Drew: Salah satu hal yang tampaknya selalu menjadi masalah bagi saya dengan orang-orang yang mengambil React adalah memahami rantai alat yang diperlukan untuk membuat segala sesuatunya berfungsi, Webpack menjadi gajah yang jelas di dalam ruangan. Apakah Anda harus melakukan banyak konfigurasi rantai alat atau seperti saya jika Anda memiliki kemewahan rekan tim melakukannya untuk Anda?

Mina: Oh, saya suka tim infrastruktur di Slack data. Tim infrastruktur front-end di Slack, mereka menangani semua itu. Saya tidak perlu memikirkannya. Itu bagus. Karena saya pernah mencoba belajar React sebelumnya. Biasanya cara terbaik saya belajar adalah dengan benar-benar bekerja dan menerapkannya. Dan kami menggunakan React untuk membangun banyak hillaryclinton.com di tahun 2016. Jadi bukan berarti saya tidak pernah bekerja dengan orang yang menggunakannya. Hanya saja pekerjaan saya tidak pernah secara langsung membutuhkan saya untuk terlibat. Tetapi basis kode itu sangat kompleks dan sangat canggih, dan ada banyak hal yang terjadi sehingga ada penghalang untuk masuk untuk mencoba mempelajari apa pun di sana jika Anda belum tahu cara React dan Redux dan semuanya bekerja, yang saya tidak. Jadi saya tidak terlalu efektif dalam belajar di lingkungan itu.

Mina: Untungnya, di sini saya memiliki orang-orang yang suka mengambil sedikit lebih banyak bagian yang rumit darinya. Saya tidak perlu khawatir tentang konfigurasi Webpack sama sekali. Itu sudah diatur. Itu sudah dicoba dan diuji dan siap digunakan. Saya berada di kapal yang sama di mana kami juga menggunakan Redux selain React, yang saya tidak sadari adalah dua hal yang berbeda. Saya tidak tahu bagian mana yang menangani yang mana. Menjatuhkan ke dalam basis kode seperti itu, itu sedikit membingungkan karena saya tidak menyadari bahwa mereka semua adalah hal yang sama. Saya memiliki orang-orang yang merupakan pengembang React berpengalaman yang memberi tahu saya, "Oh, kami juga menggunakan Redux, yang membuatnya sedikit lebih sulit bagi Anda untuk benar-benar mempelajari apa yang dapat dilakukan React all jika Anda memulai dari awal." Dan saya tidak pernah benar-benar tahu apa yang mereka maksud dengan itu karena saya tidak tahu apa yang mereka bicarakan.

Mina: Untuk menjawab pertanyaan awal Anda, saya masih memiliki sedikit hambatan untuk masuk, karena ini bukan hanya mempelajari React. Saya harus belajar Bereaksi dan juga cara menggunakan toko Redux. Jadi dua hal itu pada saat yang sama bisa menjadi sedikit banyak.

Drew: Ya, saya menemukan hal yang persis sama dengan basis kode yang ada sebagai proyek React pertama saya yang menggunakan Redux. Dan saya pikir seperti sifat dari teknologi semacam ini ketika mereka masih muda, mereka beralih dengan sangat cepat, dan praktik terbaik apa pada satu titik, 6 bulan kemudian telah pindah dan ada cara berbeda dalam melakukan sesuatu. Dan ketika Anda memiliki basis kode yang membentang bertahun-tahun, terkadang Anda dapat memiliki gaya penerapan yang berbeda di sana. Itu tidak selalu tetap sinkron. Dan tentu saja, jika Anda mengikuti tutorial atau apa pun untuk dipelajari, Anda membaca buku, Anda menggunakan sumber daya, mereka akan berada dalam versi paling modern tentang cara melakukan sesuatu. Dan itu tidak selalu sesuai dengan apa yang Anda lihat saat melihat produk yang sudah ada dan matang. Apakah itu sesuatu yang pernah Anda alami, atau apakah Anda berhasil menjaga basis kode Anda benar-benar mutakhir?

Mina: Saya pikir itu adalah sesuatu yang pasti saya alami. Ketika saya mencoba mempelajari bagaimana melakukan React sendiri, saya melihat berbagai tutorial dan hal-hal seperti itu. Dan saya perhatikan, atau setidaknya orang telah memberi tahu saya yang telah bekerja yang telah bekerja dengan saya bahwa beberapa hal yang kami lakukan atau semacam anti-pola atau tidak seperti cara kerjanya sekarang, karena basis kode ini sedikit, yah dewasa kita relatif, tapi itu berumur beberapa tahun. Jadi ada beberapa cara yang menurut saya lebih mudah dilakukan daripada cara yang kita lakukan saat ini karena ini ditulis bertahun-tahun yang lalu. Jadi ini adalah sedikit treadmill yang mencoba mengikuti waktu saat ini dan memastikan saya ingin melakukan hal-hal dengan cara terbaik, tetapi saya juga tidak ingin merusak basis kode yang sudah ada karena saya ingin bermain-main dengan hal-hal.

Drew: Jelas, salah satu hal dengan React yang orang-orang seperti Anda dan saya datangi, itu bisa terasa sedikit menggelegar karena semua ini dengan JSX. Apakah Anda menggunakan JSX dalam proyek Anda?

Min: Kami. Saya menggunakan JSX.

Drew: Sudahkah Anda berdamai dengan itu?

Mina: Saya jatuh seperti bagian kecil dari diri saya yang mati setiap kali saya membuka salah satu file itu. Masih terasa penistaan ​​untuk memasukkan HTML saya ke dalam file JavaScript. Saya tahu itu agak revolusioner dan intinya, tetapi saya merasa tidak enak bahwa saya menulis markup saya dalam file JavaScript. Saya telah berdamai dengan itu, tetapi setiap kali saya melakukannya, saya hanya seperti, "..." Masalah pemisahan, itu adalah suatu hal. Saya ingin kembali, silakan.

Drew: Itu poin yang valid, bukan? Latar belakang saya ketika saya mulai bekerja lebih serius dengan JavaScript, dan ini mungkin ketika saya kembali di Yahoo, hal-hal sangat banyak pada model halaman HTML yang diberikan server dan kemudian mengambil pendekatan peningkatan progresif, melapisi JavaScript di atas untuk meningkatkan antarmuka. Dan jika keadaan sesuatu di antarmuka perlu diubah, kode Anda harus tahu tentang semua bagian antarmuka yang perlu diperbarui, yang jelas membawa Anda ke pendekatan yang digabungkan erat dengan tampilan monolitik besar ini di mana kode yang Anda tulis perlu tahu tentang semua kode lain di sekitarnya. Dan saya kira itu tidak benar-benar cocok untuk pendekatan komponen yang akan Anda ambil saat bekerja dengan perpustakaan pola atau sistem desain, yang lebih sesuai dengan bidang keahlian khusus Anda. Saya kira, React lebih cocok untuk pendekatan itu, bukan?

Mina: Saya rasa begitu, terutama dengan kemampuan untuk memasangkan CSS yang sangat spesifik ke satu JSX atau satu komponen React. Dan dengan cara itu akan lebih mudah untuk memisahkan atau hanya mengambil apa yang Anda butuhkan untuk perpustakaan dan meninggalkan sisanya, sedangkan perpustakaan pola atau sistem desain yang mencoba melakukan sesuatu yang lebih monolitik hanya dengan satu file CSS gaya besar atau sesuatu seperti itu , itu membuatnya sangat sulit. Anda harus mengambil semuanya atau tidak sama sekali. Jadi saya sangat menghargai bahwa React memungkinkan kita untuk melakukan cara pengembangan yang lebih individual dan lebih komponen, bahkan jika saya masih berharap ada cara bagi saya untuk benar-benar memisahkan lapisan presentasi dan lapisan konten saya dari lapisan interaktivitas saya. Tapi mungkin itu hanya saya menjadi sekolah tua sedikit dalam pengertian itu.

Drew: Saya pasti merasakan sakit di sana. Idenya adalah, datang dan koreksi saya jika saya salah, pemahaman saya adalah bahwa alih-alih memisahkan teknologi, CSS, dan JavaScript, dan HTML, itu memisahkan fungsionalitas. Jadi segala sesuatu yang merupakan satu komponen semua ada bersama-

Minah : Iya.

Drew: … yang saya kira berguna jika komponen itu tidak lagi diperlukan. Anda cukup menghapusnya, dan itu hilang, dan tidak meninggalkan jejak di sekitar aplikasi Anda. Itu tidak selalu terjadi dengan CSS sekalipun. Bagaimana Anda bekerja dengan CSS dengan React? Pernahkah Anda melihat hal-hal seperti komponen gaya atau semacamnya?

Mina: Tidak, kami belum. Saya pernah mendengar tentang komponen gaya, tetapi saya belum pernah benar-benar menyelidikinya dengan sangat jujur. Jadi cara kita bekerja dengan CSS dengan React adalah kita menulis Less, dan kita hanya memiliki file Less yang dilampirkan ke masing-masing komponen yang diimpor ke komponen itu. Dan kemudian diikat melalui Webpack dan disajikan ke klien.

Drew: Apakah Anda menggunakan sistem seperti BEM atau sesuatu untuk mengubah namespace?

Minah : Iya. Kami menggunakan BEM untuk penspasian nama, meskipun kepatuhannya agak bervariasi tergantung pada siapa yang menulis apa. Tetapi kami mencoba menggunakan pola penspasian nama BEM untuk membuatnya sedikit lebih jelas apa tujuan dari setiap kelas dan komponen individual.

Drew: Dan apakah itu tampaknya berhasil untuk Anda?

Mina: Saya pikir begitu. Kadang-kadang itu memiliki masalah lama yang sama, kadang-kadang saya tidak tahu bagaimana menyebutkan sesuatu. Setelah beberapa saat, hal-hal sehari-hari selalu dan akan selalu menjadi hal yang sulit bagi master. Jadi satu-satunya masalah yang saya miliki adalah kadang-kadang saya tidak tahu apa yang harus saya sebut komponen tertentu.

Drew: Pasti. Itu adalah pertempuran yang terus-menerus, bukan, bagaimana cara mengetahui hal-hal yang namanya?

Minah : Iya.

Drew: Saya selalu berakhir ketika mengerjakan fitur baru atau sesuatu seperti itu, Anda memberikan komponen dan semua kelas dan semua nama yang dimiliki fitur saat ini. Dan kemudian pada saat Anda datang untuk meluncurkan, itu telah berganti nama menjadi sesuatu yang lain. Jadi Anda memiliki referensi ke nama lama dalam kode dan antarmuka memiliki nama baru. Dan …

Mina: Saya mencoba untuk selalu menamai sesuatu berdasarkan fungsi atau tujuannya versus hal-hal yang sedikit lebih singkat, karena kecil kemungkinannya bahwa tujuan sebenarnya dari komponen ini akan berubah. Saya lupa menyebutkan, tetapi selain menggunakan BEM, saya kira kami menggunakan BEMIT jika Anda terbiasa dengan itu. Ini pada dasarnya adalah ITCSS plus BEM, yang keduanya dibuat oleh Harry Roberts. Jadi saya menggunakan notasi Hungaria untuk menunjukkan apakah sesuatu adalah komponen atau bukan, versus objek tata letak, versus seperti pola yang lebih besar yang terdiri dari beberapa komponen. Dan kemudian dari sana kami menggunakan konvensi BEM untuk menandakan seperti elemen blok dan semua itu.

Drew: Dan apakah Anda harus melakukan banyak refactoring dan menghapus komponen dan hal-hal di basis kode Anda dan harus berurusan dengan masalah CSS yang tertinggal?

Minah : Iya. Jadi bagian non-React dari pekerjaan saya, memelihara slack.com adalah itu semua hanyalah sekumpulan file Less yang sedang dikompilasi untuk CSS. Dan saya jamin, ada banyak kode zombie di sana, karena kami pasti banyak mengulangi hal-hal di atas selama saya berada di sana. Dan kami tidak selalu punya waktu untuk kembali dan melakukan pembersihan dibandingkan saat kami mendesain ulang halaman atau sesuatu. Jadi sudah terlambat untuk audit, saya akan mengatakan itu.

Drew: Ini adalah sesuatu yang baru saja kita lihat di proyek React kita, melihat bagaimana kita mendekati CSS. Saat ini, kami memiliki beberapa file CSS global yang besar untuk keseluruhan aplikasi, dan kami mendapatkan situasi ini di mana ukuran bundel kami terus bertambah, dan terus bertambah, dan terus bertambah dan tidak pernah mengecil, meskipun banyak hal menjadi DIHAPUS. Jadi kami telah melihat hal-hal seperti komponen gaya, Tailwind juga merupakan opsi lain yang benar-benar kami pertimbangkan dengan serius. Pernahkah Anda melihat tailwind banyak?

Mina: Saya belum banyak melihatnya. Saya penasaran tentang itu, tetapi sekali lagi, saya tidak pernah benar-benar punya waktu untuk menggali untuk benar-benar melihat apakah itu sesuatu yang ingin saya coba bawa ke dalam basis kode kami.

Drew: Saya sebenarnya cukup terkejut, karena seperti Anda, saya agak kuno dengan cara melakukan hal-hal ini. Saya suka pemisahan kekhawatiran yang baik. Dan saya suka menulis CSS saya di CSS, dan tentu saja pendekatan dengan Tailwind adalah Anda memiliki semua nama kelas ini, yang terasa seperti gaya sebaris yang Anda terapkan. Dan jika terasa kotor.

Minah : Iya.

Drew: Dan saya menjadi sukarelawan di dalam tim, kami masing-masing mengambil teknologi untuk menyelidiki apakah mereka cocok untuk masalah kami, dan saya menawarkan diri untuk melihat Tailwind karena saya benar-benar yakin saya akan membencinya.

Mina: Tidak, tidak.

Drew: Tapi ternyata saya benar-benar berpikir itu memecahkan banyak masalah. Saya cukup terkesan.

Minah : Iya. Saya memiliki cara berpikir yang serupa, karena saya di masa lalu lebih suka memiliki satu kelas yang terdiri dari semua gaya yang saya butuhkan untuk komponen tertentu dan tidak melakukan kelas per properti, seperti yang saya yakini dilakukan Tailwind atau bahasa seperti itu. Untuk alasan yang sama, rasanya seperti, “Saya hanya menjalankan CSS sebaris saat ini. Mengapa saya melakukan ini?” Tetapi karena saya telah mengembangkan lebih banyak dan lebih banyak lagi, di dalam sistem desain Slack kami, saya membuat banyak dari apa yang saya sebut kelas utilitas yang melakukan hal-hal seperti menambahkan sedikit margin dengan sebuah pola. Saya perhatikan bahwa semakin banyak, saya menggunakan kelas-kelas itu selain kelas-kelas komponen. Jadi saya seperti, "Oke, mungkin saya harus meninjau kembali keseluruhan ini untuk melakukan CSS sebagai satu deklarasi pada satu waktu." Saya tidak tahu apakah saya akan melangkah sejauh itu, tetapi itu pasti layak untuk dipertimbangkan.

Drew: Komputasi tampaknya mengalami kemunduran dalam hal tren antara solusi klien kurus dan klien gemuk. Kami mulai dengan mainframe dengan terminal, dan kemudian era PC dengan windows dan office dan semua jenis aplikasi besar ini. Dan mereka semua menjadi sangat lambat, dan kemudian web muncul, dan itu hanya browser, dan semua pekerjaan sedang dilakukan di server. Dan itu semua cepat dan tajam lagi. Dan sekarang kita telah kembali meletakkan semua pekerjaan itu kembali di browser dengan segala sesuatu yang dilakukan dengan JavaScript, hal-hal seperti React dan pendekatan JAMstack di mana kita kembali ke semacam klien gemuk. Terkadang saya khawatir bahwa kami meminta terlalu banyak dari browser. Apakah ini sebuah kesalahan? Apakah kita meminta terlalu banyak dari browser yang mencoba melakukan semua hal ini di React?

Mina: Saya ingin mengatakan ya dengan peringatan, sekali lagi, pengalaman saya sangat banyak berisi sebagian besar situs web statis. Saya tidak melakukan banyak pengembangan produk. Jadi mungkin di ranah itu, ini lebih masuk akal. Tapi dari sudut pandang saya, saya merasa kita sering menggunakan kapak ketika kita hanya membutuhkan pisau mentega. Saya tidak tahu mengapa kita perlu meletakkan semua ini di browser, memberikan begitu banyak pekerjaan dan begitu banyak tekanan pada klien. Saya merasa kita bisa melakukan ini dengan lebih sederhana. Salah satu hal yang selalu membuat saya sedikit ragu untuk menggunakan React, atau saya katakan ragu-ragu, tetapi yang saya maksud ketika itu membuat saya sangat marah dan saya secara aktif menentang, adalah ketika saya pergi ke sebuah situs web dan secara harfiah tidak ada yang ditampilkan karena di sana adalah satu kesalahan atau sesuatu, Seperti, “Benarkah? Seluruh halaman rusak karena satu fungsi rusak?”

Mina: Itu hanya membuatku kesal karena sering kali itu adalah pendekatan semua atau tidak sama sekali. Salah satu pembicaraan yang saya berikan di AEA di masa lalu dan tempat-tempat lain di masa lalu adalah berbicara tentang bagaimana memasukkan peningkatan progresif dan bukan hanya pengembangan Anda, tetapi juga arah seni dan desain situs. Dan saya akan menunjukkan secara khusus contoh situs web yang tidak melakukan peningkatan progresif atau segala jenis degradasi yang anggun. Sepertinya Anda menjalankan JavaScript di browser atau Anda tidak mendapatkan apa-apa. Dan itu akan seperti sebuah situs sederhana yang mewakili informasi tentang sejarah desain web, yang merupakan salah satu situs yang benar-benar dibicarakan, sejarah desain web dari tahun 1990 hingga sekarang. Itu adalah situs web yang indah dengan banyak garis waktu, animasi berbagai hal. Tapi itu juga bisa dirender secara statis hanya dengan daftar. Ada langkah-langkah di antara tidak menunjukkan apa-apa dan menunjukkan pengalaman yang disempurnakan dengan indah yang menurut saya hilang karena cara kita mendekati pengembangan web modern sekarang.

Drew: Jadi, apakah Anda akan mengatakan bahwa ada beberapa kategori proyek yang sesuai dengan solusi seperti React dan beberapa di mana itu benar-benar tidak boleh digunakan dan Anda harus menggunakan metode yang lebih tradisional?

Mina: Saya pikir jika situs Anda sebagian besar statis, itu hanya menyajikan informasi, saya kira saya tidak mengerti mengapa Anda memerlukan proyek seperti React untuk membuat sesuatu yang tidak memiliki banyak interaksi selain manipulasi DOM . Saya kira saya tidak melihat manfaat apa yang Anda dapatkan dari itu. Sekali lagi, saya mungkin tidak mengerjakan proyek yang sesuai. Saya mungkin tidak hanya melihat atau menemukan kasus penggunaan itu, tetapi saya kesulitan melihat apakah itu hanya sebagian besar situs statis, menyajikan konten, tidak banyak interaksi, tidak banyak interaksi di luar DOM yang dimanipulasi dan melakukan animasi. Saya tidak melihat bagaimana memiliki perpustakaan Bereaksi membantu Anda mencapai tujuan itu.

Drew: Ini menarik karena saya tidak buruk membicarakannya karena saya belum pernah menggunakannya, tetapi saya melihat banyak proyek Gatsby dan Gatsby menjadi generator situs statis yang menggunakan front-end React di dalamnya. Dan saya melihat semua contoh tema dan hal-hal yang mereka miliki adalah semua situs berbasis konten, atau blog, dan situs resep, dan portofolio, dan hal-hal semacam ini. Dan ada sesuatu yang saya pikir sebenarnya ini belum tentu cocok untuk sesuatu seperti React. Mengapa ini tidak dirender secara statis dan kemudian ditingkatkan secara progresif?

Minah : Iya.

Drew: Ini bukan perangkat lunak.

Minah : Iya. Saya juga belum pernah menggunakan Gatsby. Saya telah mendengar banyak hal hebat tentangnya, tetapi itu mungkin salah satu contoh yang akan saya pikirkan tentang di mana saya seperti, “Oke, saya kira saya hanya tidak mengerti mengapa alat itu diperlukan untuk melakukan pekerjaan tertentu. ” Sekali lagi, saya tidak tahu. Mungkin karena lebih banyak orang merasa nyaman menulis di React ketika mereka menulis sesuatu yang baru, dan itu hanya menyediakan alat yang bertemu orang-orang di mana pun mereka berada. Saya telah mendengar hal-hal hebat tentang generator situs statis yang menggunakan Bereaksi untuk orang-orang yang telah menggunakannya dan menyukainya, tetapi itu bukanlah kasus penggunaan yang saya akan langsung seperti, "Oh, itu masuk akal."

Drew: Sepertinya selalu ada pertempuran antara apa yang kami sebut situs web dan apa yang Anda sebut aplikasi web. Dan jurang antara keduanya tampaknya semakin lebar, dan semakin lebar, dan semakin lebar, sedangkan pendekatan peningkatan progresif mencoba menjembatani kesenjangan dengan mengambil sesuatu yang statis dan menambahkan JavaScript dan menambahkan interaktivitas. Tampaknya hal-hal seperti React cocok untuk perangkat lunak yang Anda jalankan di browser. Apakah Anda setuju dengan itu?

Mina: Saya pasti akan setuju dengan itu karena rasanya seperti itu dibangun untuk jenis lingkungan itu; itu dibangun untuk menjalankan perangkat lunak. Itu dibangun oleh Facebook untuk Facebook. Jadi itu dibangun untuk sebuah produk. Itu dibuat untuk menjalankan apa pun yang Anda sebut aplikasi web di browser dan tidak harus untuk jenis pekerjaan yang, seperti yang saya sebutkan, biasa saya lakukan. Jadi saya pikir dalam skenario itu, sangat masuk akal untuk menggunakannya jika Anda membangun perangkat lunak yang lebih kompleks dan canggih yang dimaksudkan untuk dijalankan di dalam browser. Tetapi jika Anda sedang membangun situs pemasaran atau apa pun, saya kira saya masih akan berjuang untuk melihat mengapa itu diperlukan di sana.

Drew: Jadi, apakah kami memberikan izin kepada orang-orang untuk tetap membangun situs web yang layak dan dirender secara statis?

Mina: Saya akan senang melihat lebih banyak hal itu terjadi. Saya merasa itu seperti tersesat dan seperti hilang, apakah itu keren atau apalah. Saya merasa kita telah kehilangan bagian dari pengembangan web itu. Ini sangat lucu: Anda dan saya sama-sama mengatakan bahwa kami agak kuno, dan saya menertawakannya karena saya sebenarnya telah melakukan pengembangan web selama enam tahun sekarang? Bagaimana saya sekolah tua? Itu belum lama bagiku. Namun entah bagaimana saya adalah bagian dari penjaga lama yang tidak menyukai hal-hal baru dan berkilau. Saya tidak mengerti.

Drew: Jadi sebenarnya React sudah ada sejak Anda menjadi web developer.

Mina: Mungkin saya hanya memiliki jiwa tua. Saya tidak tahu.

Drew: Saya pikir mungkin itu masalahnya. Saya belum melihat secara pribadi, ada pendekatan yang diberikan sisi layanan yang dapat Anda ambil dengan aplikasi React. Apakah Anda mengalami salah satunya?

Mina: Saya belum pernah mengalaminya. Saya secara singkat melihat mereka untuk proyek yang sedang saya kerjakan, karena saya merasa ada bagian dari operasi yang akan bekerja lebih baik di server dibandingkan di klien. Tetapi saya pikir karena pengetahuan saya yang terbatas dan fakta bahwa basis kodenya sedikit lebih rumit daripada yang dapat saya pahami, saya tidak dapat menemukan cara untuk membuat bagian itu bekerja. Saya akan senang untuk mengetahuinya pada akhirnya, tetapi saya menghabiskan satu hari untuk menggalinya. Saya seperti, “Tahukah Anda? Aku tidak grokking ini saya harus. Jadi saya hanya akan mundur dan mengambil rute yang berbeda.”

Drew: Ya. Saya pikir kita semua pernah ke sana.

Minah : Iya. Aku pergi ke sebuah jalan. Saya seperti, “Oh, ini gelap dan menakutkan. Mari kita mundur. Mari kita mundur.”

Drew: Menjauh dari kode.

Mina: Ya.

Drew: Jadi sejauh ini Anda sangat diplomatis dan sopan tentang React. Saya merasakan ada sedikit ketegangan yang menggelegak di bawah permukaan. Ayo. Beritahu kami apa yang sebenarnya Anda rasakan.

Mina: Saya telah bersikap sopan dan diplomatis, terutama karena basis penggemar Reacts kadang-kadang bisa sedikit kejam, dan saya lebih suka mereka tidak datang untuk saya. Jadi tolong, React itu bagus. Ini luar biasa. Gunakan untuk apa Anda ingin menggunakannya. Saya bercanda, tetapi bahkan tweet yang Anda sebutkan di awal podcast ini di mana saya pikir apa yang Anda katakan adalah bahwa saya tidak membencinya. Aku tidak menyukainya, tapi aku tidak membencinya. Bahkan pernyataan itu, saya mendapatkan orang, tidak ada vitriol, tetapi lebih dari itu mereka siap untuk melompat ke pertahanan dan berkata, "Yah, saya menyukainya karena X, Y, Z." Saya seperti, “Saya tidak mengatakan itu buruk. Saya baru saja mengatakan bahwa saya baik-baik saja tentang semuanya. ” Tapi ternyata menjadi meh tidak apa-apa. Aku harus menyukainya.

Mina: Jadi itu sebabnya saya mungkin sedikit lebih diplomatis daripada biasanya, hanya karena saya tidak ingin orang berpikir bahwa saya berbicara buruk, karena saya tidak. Ini memiliki tempat di lebih banyak pengembangan web. Ini melayani fungsi. Ia melakukan tugasnya dengan baik. Orang-orang menyukainya. Ini bukan alat yang pernah saya miliki atau ingin saya gunakan sampai sekarang.

Drew: Ya. Hal-hal bisa menjadi sangat kesukuan, bukan begitu, dengan orang-orang merasa mereka harus memihak satu pihak atau lainnya, dan Anda benar-benar mendukung sesuatu atau sepenuhnya menentang sesuatu? Dan saya tidak yakin itu memiliki tujuan yang baik, dan saya tidak berpikir itu benar-benar menggerakkan kita sebagai industri dan sebagai komunitas untuk melakukan itu.

Minah : Iya. Ini benar-benar aneh. Sangat menarik untuk ditonton hanya dari sudut pandang sosiologis, tetapi seringkali sangat aneh untuk diamati. Sepertinya saya tidak diizinkan untuk menjadi, seperti yang saya katakan, netral tentang hal-hal tertentu. Saya harus memiliki pendapat yang kuat, yang menurut saya tidak sehat. Apa istilah, "Pendapat kuat, dipegang secara longgar?" Itu semacam cara saya pergi tentang hal-hal. Saya merasa kuat tentang hal-hal tertentu, tetapi itu tidak seperti Anda tidak dapat mengubah pikiran saya. Di mana saya merasa seperti beberapa orang, identitas mereka terbungkus dalam aspek-aspek tertentu darinya, bahwa jika Anda bukan karena apa pun yang mereka pilih untuk diidentifikasi, itu sedikit pribadi versus adil, saya tidak peduli dengan topik khusus ini, atau alat, atau apa pun.

Drew: Ya. Saya tidak tahu apakah itu diperburuk oleh fakta bahwa kita semua cenderung lebih berspesialisasi dalam bagian-bagian tertentu dari tumpukan. Dan saya tahu ada orang yang merupakan pengembang Bereaksi. Mereka akan menyebut diri mereka sebagai pengembang Bereaksi karena itulah pekerjaan mereka. Dan mereka tidak perlu menulis skrip Java vanilla atau tidak akan menggunakan Vue atau apa pun. Bereaksi adalah dunia mereka. Jadi saya rasa itu hampir terasa seperti serangan terhadap seluruh karir mereka untuk mengatakan, "Saya tidak suka React." Yah, mereka benar-benar berinvestasi untuk membuat Anda menyukai React atau apa pun teknologinya.

Mina: Saya akan mengakui menjadi salah satu dari orang-orang di masa lalu. Sebenarnya, mungkin sebagian besar tentang SASS, saya percaya. Saya sangat terlibat dalam tim melakukan SASS sebagai praprosesor dan semua praprosesor lainnya adalah sampah. Saya tidak ingin berbicara tentang mereka. Saya tidak ingin berurusan dengan mereka. Dan saya menyadari bahwa itu adalah cara yang sangat sempit untuk melihat sesuatu. Gunakan alat yang sesuai untuk pekerjaan itu. Apa pun yang membuat Anda lebih produktif, itulah alat yang tepat. Tidak peduli apa itu.

Drew: Apakah ada teknologi yang kami kerjakan yang tidak memiliki nuansa kesukuan seperti itu? Apakah ada sesuatu yang orang senang gunakan atau tidak gunakan? Aku tidak bisa memikirkan apapun.

Minah : Wah. Tidak ada yang memiliki pendapat tentang markup, sebenarnya.

Drew: Tidak.

Mina: Saya merasa tidak ada yang memiliki pendapat tentang HTML yang sebenarnya dan hanya markup, seperti, "Itu ada." Mereka menggunakannya. Tetapi orang-orang memiliki pendapat yang kuat tentang CSS dan bagaimana itu mengerikan atau luar biasa, dan perang praprosesor yang tidak terlalu sering terjadi lagi, dan tentu saja, semua tribalisme dalam berbagai perpustakaan JavaScript.

Drew: Jadi, Anda akan mengatakan bahwa perjalanan Anda sejauh ini dengan React hanyalah, “Ini adalah sebuah alat. Itu melakukan tugasnya? ”

Mina: Itu berubah dari rasa ingin tahu menjadi ketidaksukaan yang aktif dan mendalam karena betapa lazimnya hal itu dan betapa saya tidak perlu, saya pikir bahwa prevalensi itu untuk meh. Saya sekarang dengan meh, yang sekali lagi tidak berarti saya membencinya. Itu hanya berarti…

Drew: Saya pikir itu tempat yang bagus. Saya pikir kita mungkin lebih kuat sebagai teknolog jika kita memahami nilai teknologi tertentu untuk tujuannya. Kami dapat mengevaluasi apa yang baik untuk keadaan apa dan memilih alat yang tepat untuk pekerjaan itu.

Minah : Iya. Dan di situlah saya sampai pada titik ini dalam karir saya di mana saya tidak benar-benar berinvestasi dalam bahasa tertentu, atau teknologi, atau apa pun, karena itu seperti, “Alat apa pun yang paling sesuai untuk apa yang Anda coba lakukan, lalu gunakan itu.” Saya telah belajar bahwa ada tempat untuk segalanya; ada waktu dan tempat untuk melakukan segalanya. Dan sampai saat ini, tidak ada waktu atau tempat nyata bagi saya untuk menggunakan pustakawan React ini, dan sekarang ada.

Drew: Saya pikir itu tempat yang bagus. Jadi saya telah mempelajari semua tentang React akhir-akhir ini seperti yang Anda lakukan dalam pekerjaan sehari-hari. Apakah ada hal lain yang Anda pelajari akhir-akhir ini?

Mina: Saya sebenarnya telah belajar ironisnya, yang menurut saya bahasa lain yang berasal dari Facebook, saya telah melakukan banyak pengembangan Hack, terutama karena itulah yang saya gunakan di Slack, di pekerjaan saya sehari-hari. Belajar Hack membuka jalan bagi saya untuk merasa lebih nyaman menggunakan React karena mereka mengikuti pola yang sangat mirip, kecuali satu sisi server dan yang lainnya tidak. Jadi, selain secara umum, saya telah belajar lebih banyak tentang back-end dan cara kerjanya karena berbagai alasan berbeda. Dan saya telah meregangkan diri selama beberapa tahun terakhir dan semakin keluar dari zona nyaman saya. Sistem desain, perpustakaan, itulah dunia saya, dan saya merasa sangat baik dan nyaman di dunia itu. Tapi saya melangkah keluar dari itu dan melakukan lebih banyak logika sisi server, dan pengembangan API, dan pemodelan data, dan semua itu. Saya telah melakukan banyak hal itu selama setahun terakhir juga.

Drew: Saya menemukan bahwa semakin saya mengerti tentang seluruh tumpukan tentang hal-hal back-end di hal-hal front-end, masing-masing membantu pengetahuan saya tentang yang lain. Saya menemukan saya menulis kode front-end yang lebih baik dengan menulis kode back-end dan pemahaman-

Minah : Iya. Saya pikir saya merasakan hal yang sama. Sekarang saya memiliki gagasan yang lebih baik tentang, seperti yang kami katakan, seluruh tumpukan tentang bagaimana kami mendapatkan dari data ke klien akhir. Saya menemukan bahwa saya sedang memikirkan keseluruhan saluran, tidak peduli bagian mana yang sebenarnya saya kerjakan. Saya sedang memikirkan cara terbaik untuk menyusun API ini sehingga ketika saya membuka template, saya tidak perlu melakukan begitu banyak manipulasi data yang saya terima di ujung itu. Ini benar-benar membuat saya secara keseluruhan menjadi insinyur yang lebih baik, saya merasa menyukainya

Drew: If you, dear listener, would like to hear more from Mina, you can follow her on Twitter where she's @MinaMarkham and find her personal site at mina.codes. Thanks for joining us today, Mina. Do you have any parting words?

Mina: Have a smashing night?

Drew: Great.