Smashing Podcast Episode 20 Dengan Marcy Sutton: Apa Itu Gatsby?

Hari ini, kita berbicara tentang Gatsby. Apa itu dan bagaimana itu cocok dengan tumpukan pengembangan web Anda? Drew McLellan berbicara dengan ahli Marcy Sutton untuk mencari tahu.

Tampilkan Catatan

• Gatsby
• Marcy di Twitter
• Situs web pribadi Marcy

Update mingguan

• “Jadikan Situs Anda Cepat, Dapat Diakses, dan Aman Dengan Bantuan Dari Google”
  oleh Dion Almaer
• “Memahami Pengembangan Plugin Di Gatsby”
  oleh Aleem Isiaka
• “Membuat Aplikasi Desktop Kecil Dengan Tauri Dan Vue.js”
  oleh Kelvin Omereshone
• “Menghilangkan Kepanikan Dari Pengiriman E-Commerce Dan Peringatan Inventaris”
  oleh Suzanne Scacca
• “Transisi CSS Di Vuejs Dan Nuxtjs”
  oleh Timi Omoyeni

Salinan

Drew McLellan: Dia adalah insinyur utama di tim Hubungan Pengembang di Gatsby. Sebelumnya, dia bekerja di perpustakaan pengujian aksesibilitas inti kapak sumber terbuka, dan juga bekerja sebagai insinyur aksesibilitas di Adobe. Dia bersemangat untuk meningkatkan web bagi penyandang disabilitas dan sering membicarakannya di konferensi. Pada tahun 2016, O'Reilly memberikan penghargaan platform webnya untuk karya dalam aksesibilitas.

Drew: Dia juga memimpin pertemuan aksesibilitas Seattle dan NW Tech Women di wilayah lokal. Jadi, kami tahu dia adalah insinyur yang terampil dan ahli aksesibilitas. Tapi tahukah Anda dia ingin mengirimkannya Angel Falls dalam tong? Teman-temanku yang hebat, tolong sambut Marcy Sutton.

Marcy Sutton: Halo.

Drew: Halo. Marcy. Apa kabar?

Marcy: Saya menghancurkan. Apa kabar?

Drew: Saya sangat baik. Terima kasih. Saya ingin berbicara dengan Anda hari ini tentang Gatsby. Karena itu muncul dalam percakapan yang saya lakukan di episode sebelumnya tentang belajar Bereaksi dengan Mina Markham. Saya menyadari bahwa saya berada dalam bahaya melakukan hal-hal tipikal pria di internet dalam memberikan pendapat tentang sesuatu yang tidak saya alami secara langsung. Jadi itu bukan cara kami melakukan hal-hal di Smashing.

Drew: Dan saya ingin memastikan bahwa kita menutupi Gatsby dengan benar. Dan cara apa yang lebih baik untuk melakukannya selain berbicara dengan seseorang yang mengetahuinya luar dalam. Jadi, mungkin saya pernah mendengar nama Gatsby. Tapi saya tidak tahu di mana itu cocok dengan tumpukan saat membangun situs web. Apa sebenarnya Gatsby.

Marcy: Gatsby adalah pembuat situs web, saat ini menggunakan React. Tetapi itu akan membuat situs web statis untuk Anda yang kemudian akan direhidrasi menjadi aplikasi web React lengkap. Jadi Anda benar-benar mendapatkan yang terbaik dari kedua dunia dengan build cepat yang Anda kompilasi file HTML yang akan dimuat dengan cepat untuk pengguna. Dan kemudian Anda mendapatkan semua peningkatan ini dengan JavaScript untuk membuat aplikasi web dinamis yang sangat interaktif.

Marcy: Jadi, ini adalah ruang yang sangat menarik. Dan saya telah bekerja di sisi pembelajaran dengan dokumentasi dan sekarang di tim Devrel, saya fokus untuk membuatnya sebaik mungkin, mengetahui tantangan aksesibilitas dengan JavaScript dan hanya mencoba untuk memperbaikinya dari dalam ke luar.

Drew: Banyak dari kita akan akrab, saya kira, dengan konsep generator situs statis. Dan Gatsby tampaknya secara luas cocok dengan peran itu. Tapi bagi saya, sepertinya ini berjalan lebih jauh daripada kebanyakan SSG. Dan sebagian besar pembuat situs adalah agnostik kode front-end. Tampaknya dengan Gatsby, Anda berakhir dengan kode Gatsby yang berjalan sebagai bagian dari situs Anda. Apakah itu penilaian yang adil? Dan jika demikian, hal apa yang sebenarnya dilakukan Gatsby di front-end Anda?

Marcy: Ya, menurut saya bagian terbesarnya adalah perutean sisi klien. Jadi, Gatsby sekarang menggunakan router jangkauan di bawah tenda. Itu semacam implementasinya sendiri. Tapi itu adalah bagian ketika Anda memuat situs statis Anda untuk pertama kalinya, ada file HTML di sana. Jadi, jika pengguna mematikan JavaScript karena alasan tertentu, situs Anda harus tetap ada, masih memiliki konten.

Marcy: Tetapi jika JavaScript diaktifkan, saat itulah langkah hidrasi ini terjadi di mana, ketika Anda menggunakan tautan di situs Gatsby Anda, itu akan mengambil sumber daya terlebih dahulu dari halaman itu, sehingga memuat lebih cepat. Jadi, itu semua diaktifkan dengan lapisan JavaScript yang diberikan Gatsby ini kepada Anda. Dan lebih dari itu, sangat tergantung jenis apa yang Anda gunakan di situs Anda akan berakhir di bundel JavaScript itu.

Marcy: Tetapi untuk hal-hal yang menggunakan banyak interaktivitas, seperti antarmuka yang dapat diakses, itu adalah tempat yang baik. Bagi saya, saya sangat menikmati JavaScript tersedia untuk saya setiap saat, dan markup saya berada di tempat yang bagus. Saya tahu ini masalah preferensi, apakah Anda ingin HTML dan JavaScript dan CSS Anda semua jenis digabungkan dengan rapi dan ada ruang untuk variasi dalam membangun Gatsby

Marcy: Anda tidak selalu harus menggunakan sesuatu seperti CSS dan JS. Tapi ini benar-benar tentang mendapatkan kekuatan lapisan JavaScript dinamis itu, tersedia untuk Anda saat Anda sedang menulis situs web Anda. Ini tidak seperti add-on ini di file terpisah.

Drew: Ketika saya memikirkan bagaimana generator situs statis biasanya bekerja, saya memikirkan konten mungkin dalam file penurunan harga. Dan generator menjalankan konten itu dan menggabungkannya dengan templat dan membuat 10-an, ratusan, ribuan file HTML, yang merupakan halaman situs web Anda. Ketika saya memikirkan situs atau aplikasi React, saya lebih memikirkan pengalaman satu halaman di mana antarmuka dibuat oleh React dengan cepat. Jadi, maksudmu Gatsby melakukan keduanya? Itu membuat semua halaman dan juga meningkatkannya dengan JavaScript?

Marcy: Itu, ya. Gatsby akan menggunakan Node.js pada waktu pembuatan, ia akan memeriksa komponen React Anda dan mengompilasinya ke dalam file HTML. Yang jujur, pertama kali saya melihat Gatsby saya tidak akan mematikan JavaScript dan seperti, "Baiklah, apakah ada halaman lain di sini, apa ini?" Dan saya sangat senang bahwa Gatsby bekerja seperti itu secara default. Ini akan membuat file bawaan dari komponen reaksi Anda, yang luar biasa.

Marcy: Saya telah menjelajahi pendekatan peningkatan yang lebih progresif karena dalam JavaScript. Seperti bagaimana jika Anda ingin menampilkan sesuatu yang semakin ditingkatkan untuk pengguna, di mana jika mereka menonaktifkan JavaScript, Anda tidak ingin semua kode rusak yang mengasumsikan JavaScript ada di sana. Jadi ada beberapa keanehan dengan itu. Tetapi Anda dapat mengatasi hal semacam itu setidaknya untuk alur pengguna inti Anda di mana Anda ingin seseorang tetap dapat membeli sesuatu, Anda mungkin perlu menambahkan beberapa dukungan dan untuk kasus penggunaan tersebut.

Marcy: Tapi saya sangat terkejut bahwa cara Gatsby meluncurkannya secara default. Jadi, itu adalah pilihan yang mereka buat untuk membangun situs seperti itu, dan kami selalu mengevaluasinya. Apakah itu masih cara terbaik? Apa yang perlu kami lakukan untuk memberikan apa yang diminta pengguna kami? Jadi, kami sedang melakukan beberapa eksplorasi internal, berkelanjutan hanya untuk memastikan Gatsby melakukan pekerjaan terbaiknya dalam membangun situs web.

Marcy: Jadi, jaga agar ukuran bundel tetap kecil, dan pastikan bahwa untuk melakukan trade off untuk apa yang kami katakan adalah kode berkinerja dengan pengambilan sebelumnya. Seperti, apakah kita memiliki data untuk mendukungnya? Hal seperti itu sebagai advokat pengembang yang sangat saya minati, adalah memastikan bahwa apa yang kami kemas dan bundling di situs web benar-benar dibutuhkan dan akan benar-benar membuat situs Gatsby terbaik yang dapat dibuatnya.

Drew: Anda menyebutkan kinerja di sana, dan ada fokus besar pada kinerja. Jelas terlihat dari cara Gatsby menampilkan dirinya. Apakah itu fitur Gatsby yang sebenarnya atau hanya sifat situs web JAMstack?

Marcy: Saya pikir itu bisa menjadi sifat situs web JAMstack. Pada akhirnya, itu akan tergantung pada apa yang Anda gabungkan di situs web Anda. Jadi, apa pun kerangka kerja atau alat yang Anda gunakan, kami tetap harus memikirkan apa yang kami masukkan ke dalam bundel tersebut untuk pengguna akhir. Tapi Gatsby benar-benar bertujuan untuk memberi Anda default yang bagus. Tidak hanya untuk kinerja, tetapi juga untuk aksesibilitas.

Marcy: Tapi itu selalu membutuhkan evaluasi, kami selalu harus memastikan bahwa jika kami menambahkan sesuatu, itu masih berkinerja. Tapi ya, mendapatkan muatan awal file statis, mereka memuat dengan cepat. Jauh lebih cepat daripada situs WordPress klasik yang pernah saya miliki. Tapi kemudian meningkatkannya dengan JavaScript. Ada beberapa trade off di sana pasti.

Marcy: Tapi itu bekerja dengan sangat baik, banyak orang, mereka sangat menyukai situs Gatsby mereka. Jadi, sangat menyenangkan untuk bekerja penuh waktu, dan mempelajari seluk beluk kerangka JavaScript seperti Gatsby.

Drew: Fitur performa seperti apa yang baru saja diterapkan oleh Gatsby untuk mempercepat situs Anda?

Marcy: Nah, dengan pra-pengambilan untuk tautan, klien ini mengatakan hal-hal perutean, menurut saya itu mungkin yang terbesar. Membuatnya sangat mudah untuk menghasilkan aplikasi web progresif. Jadi, memiliki beberapa kemampuan offline, Anda dapat memilah dan memilih apa yang Anda inginkan dalam hal offline dan jenis barang PWA. Tetapi mereka benar-benar menjadikan itu bagian dari pengalaman awal, seperti banyak situs contoh pemula yang mungkin Anda mulai dari memiliki contoh penggunaan manifes, dan semacam membuat versi modern situs web Anda.

Marcy: Sungguh, ini seperti bukan kode pengiriman yang tidak Anda butuhkan. Itu adalah bagian besar dari itu. Caching, itu benar-benar pra-pengambilan untuk tautan. Itulah yang akan saya katakan adalah bagian terbesarnya.

Drew: Jadi di sinilah situs sebenarnya mengantisipasi ke mana pengguna akan pergi. Apakah secerdas itu atau apakah itu mengambil semua yang ada di halaman atau?

Marcy: Tidak, ini berdasarkan interaksi pengguna. Jadi, jika pengguna menggulir ke bawah port View, ada sesuatu yang diambil sebelumnya yang terjadi di sana. Jika Anda mengarahkan kursor ke tautan, itu akan memperkirakan bahwa ada peluang bagus bahwa Anda mungkin pergi ke halaman itu. Kami telah berbicara secara internal, baik, saya kira, open source tentang apakah pengambilan awal harus terjadi pada fokus keyboard juga, sehingga persimpangan aksesibilitas dan kinerja sangat menarik.

Marcy: Ada beberapa trade off di sana seperti pengguna keyboard yang tidak dapat menggunakan mouse dan menelusuri setiap tautan untuk menavigasi, jika itu benar-benar mengambil konten untuk setiap satu dari mereka karena pengguna mouse mungkin sedikit lebih selektif tentang di mana mereka meletakkan kursor mouse mereka. Jadi, percakapan-percakapan itu menurut saya sangat menarik.

Marcy: Dan mencoba memikirkan data apa yang kita perlukan untuk memvalidasi asumsi ini juga. Jadi ya, sangat menarik untuk melihat default tersebut dan peningkatan apa yang dapat kami lakukan dan benar-benar memeriksa seperti berapa banyak data yang diambil? Apakah itu benar-benar hal yang baik? Hanya untuk mempercepatnya sedikit? Atau cukup cepat tanpa itu? Apakah ada solusi alternatif yang bisa kita gunakan sebagai bagian dari kesenangan mengerjakan suatu kerangka kerja karena dapat mengevaluasi semua pertukaran itu.

Drew: Ini adalah pra-pengambilan sesuatu yang pengguna dapatkan secara gratis di situs mereka. Jadi, apakah mereka harus melakukan pekerjaan untuk mengimplementasikannya?

Marcy: Anda mendapatkannya secara gratis menggunakan tautan Gatsby. Jadi itu adalah komponen yang disertakan dengan Gatsby dan ketika Anda menggunakannya, itu akan mengeluarkan tag jangkar. Jadi HTML Anda adalah HTML asli dan Anda telah memanfaatkan platform web dengan cara itu. Tetapi dalam komponen React Anda, Anda bekerja secara langsung dengan komponen tautan Gatsby. Dan itu memiliki semua mekanisme itu untuk… Ia melihat apa pun HREF Anda di masa depan, untuk tautan ke mana Anda ingin pergi dan ia akan pergi dan mengambil sumber daya dari tautan itu dan memuatnya terlebih dahulu.

Marcy: Dan itu hanya internal situs Anda. Jadi itu tidak mati dan mencoba mengambil sesuatu di situs web lain. Tapi tampaknya bekerja cukup baik. Saya tahu beberapa pengguna secara aktif mencari cara, seperti Anda sebenarnya harus menyisih dari beberapa hal ini. Setidaknya perutean, tidak menggunakan pra-pengambilan. Anda cukup menggunakan tag jangkar biasa. Dan kemudian Anda tidak benar-benar mendapatkan fungsi itu. Cukup mudah untuk menggunakan sesuatu yang lain. Tetapi beberapa diskusi yang kami lakukan adalah seputar perutean sisi klien, dan bagaimana menjadikannya yang terbaik. Jadi, itu juga ruang yang sangat menarik.

Drew: Seberapa dekat Anda harus bekerja dalam ekosistem Gatsby jika saya ingin memiliki komponen tautan saya sendiri? Apakah itu akan baik-baik saja, saya tidak akan melawan Gatsby untuk melakukan hal semacam itu?

Marcy: Tidak, Anda bisa memasukkan komponen apa pun yang Anda inginkan, selama mereka bekerja dengan runtime React. Itu benar-benar keindahan itu. Apa pun yang dapat Anda masukkan ke dalam aplikasi React, Anda dapat memasukkannya ke dalam aplikasi Gatsby. Bahkan ada plugin pra-Bereaksi. Jadi, ada beberapa alternatif untuk bekerja dengan Gatsby. Tapi saya suka bagaimana Anda bisa menarik apa pun, dari rak komponen yang ingin Anda gunakan atau tulis sendiri.

Marcy: Dan saya pikir fleksibilitas adalah hal yang benar-benar dinikmati orang. Ada peringatan itu menggunakan runtime React. Jadi, Anda harus baik-baik saja dengan menggunakan reaksi atau menggunakan plugin pra-Bereaksi ini. Tetapi secara pribadi, saya sangat suka react dan JSX untuk bekerja dengan aksesibilitas dan template, terutama dengan kait React. Jadi, bisa menggunakan gubuk di situs Gatsby saya sangat keren. Aku benar-benar menyukainya.

Drew: Dan bagaimana proses membangun situs Gatsby yang mungkin merupakan modul simpul yang baru saja Anda instal dan Anda akan melakukan pembangunan seperti yang Anda lakukan dengan generator situs statis lainnya?

Marcy: Ya. Ada CLI yang Anda instal secara global. Dan saya kira itu apakah Anda ingin menginstalnya secara global. Itulah yang kami sarankan, karena Anda dapat menjalankannya dari direktori mana pun di komputer Anda, tetapi itu akan menarik apa pun yang Anda perlukan untuk membangun situs Gatsby. Dan kemudian Anda dapat menambahkan, katakanlah Anda ingin menggunakan WordPress sebagai CMS tanpa kepala atau sumber konten lainnya.

Marcy: Anda dapat menginstal paket, plugin untuk membuatnya berfungsi, dan kemudian mengintegrasikannya dengan situs Anda. Ada juga beberapa permulaan dan tema yang dapat Anda gunakan untuk bangun dan berjalan lebih cepat. Saya telah menggunakannya jika saya ingin menguji sesuatu atau memulai situs dengan cepat untuk integrasi tertentu seperti Drupal atau prismik atau solusi CMS atau eCommerce mana pun atau sesuatu yang ingin saya gunakan.

Marcy: Ada banyak contoh. Jadi Anda tidak selalu bermain-main dengan coba-coba mencoba untuk mencari tahu, tapi ini semacam blok bangunan yang dapat Anda kumpulkan dan buat… Itulah yang kami sebut jaring konten. Jadi, Anda dapat menggunakan integrasi breed terbaik ini untuk membuat situs alih-alih, jika saya memiliki situs WordPress klasik, pengalaman menulis dan bekerja dengan tim benar-benar hebat.

Marcy: Tapi ada kekurangan di bagian depan, seperti cara kerjanya di perangkat seluler. Apa lagi? Jika saya menginginkan solusi eCommerce? Saya pikir ada beberapa hal yang lebih mudah dilakukan akhir-akhir ini, tetapi dapat memilih solusi terbaik apa pun yang Anda inginkan untuk otentikasi, atau apa pun hal modern itu, Anda seperti, “Saya harap saya bisa menggunakannya. ” Dengan Gatsby, Anda dapat menggabungkan banyak hal ini dan membuat konten ini menjadi cara membangun yang cukup menyegarkan.

Marcy: Terutama ketika Anda masih dapat menggunakan integrasi seperti WordPress dan masih bekerja dengan tim. Jadi, kami sangat senang dengan cara kerja baru ini di mana Anda dapat memilih semua teknologi yang Anda sukai, atau yang cocok untuk tim Anda.

Drew: Salah satu fitur besar yang sangat dipuji oleh Gatsby adalah kemampuannya untuk menarik data atau konten dari berbagai sumber yang berbeda. Anda menyebutkan hal-hal seperti WordPress dan Drupal, dan apa yang Anda miliki. Secara tradisional, jika saya menggunakan sesuatu seperti Jekyll atau Eleventy, atau sesuatu seperti itu, saya perlu menghubungkannya sendiri untuk berinteraksi dengan API, mungkin menarik konten ke bawah dan menuliskannya ke dalam file penurunan harga atau file JSON, dan kemudian generator bekerja dengan file-file itu.

Drew: Jadi ini akan menjadi semacam proses dua langkah, dapatkah menggunakan sesuatu seperti bit sumber, yang telah kita bahas di episode sebelumnya yang melakukan hal semacam itu? Apakah saya benar memahami bahwa Gatsby baru saja memiliki kemampuan asli ini untuk menggunakan sumber yang berbeda dengan cara yang tidak dilakukan oleh generator situs statis lainnya?

Marcy: Saya rasa apa yang membuat Gatsby sangat kuat di area ini adalah lapisan data GraphQL-nya, dan ekosistem plugin. Jadi, kemungkinan seseorang telah menulis plugin untuk sumber data apa pun yang ingin Anda buat. Dan jika tidak, mungkin ada sesuatu yang dekat. Tetapi menggunakan GraphQL, adalah cara kerjanya. Lapisan yang memungkinkan semua integrasi ini menggunakan GraphQL.

Marcy: Jadi, ada banyak kemungkinan untuk apa yang dapat Anda lakukan dan kami juga mencoba membuatnya mudah untuk menulis plugin. Jadi pembelajaran yang sangat rapi tentang cara menulis plugin, dan AST atau Pohon Sintaks Abstrak yang dibuatnya dan jenis pembelajaran tentang cara kerjanya sangat keren. Tapi ya, menurut saya, ada banyak hal dari rak yang bisa Anda ambil tanpa harus menulis semuanya sendiri, yang cukup mengagumkan.

Marcy: Dan itu bagus untuk memiliki fleksibilitas untuk menarik penurunan harga. Katakanlah pengembang Anda ingin menulis penurunan harga konten blog mereka, tetapi tim pemasaran benar-benar tidak senang dengan itu, Anda dapat menggabungkan sumber konten, dan sumbernya dari berbagai tempat. Saya telah melihat orang-orang mengambil barang dari repo GitHub lain, dan mereka menggunakan plugin get untuk menarik konten penurunan harga dengan cara itu. Banyak fleksibilitas.

Drew: Dan saya kira Anda punya opsi untuk menulis plugin Anda sendiri untuk menarik dari sumber data khusus. Katakanlah Anda memiliki beberapa sistem warisan dan Anda ingin menempatkan situs web baru yang bagus dan berkilau di depannya. Anda dapat menulis plugin yang akan mengeluarkan data dalam format apa pun yang diperlukan dan menerjemahkannya menjadi sesuatu yang lebih besar daripada bekerja?

Marcy: Anda bisa ya. Jadi, plugin memungkinkan itu. Dan ada abstraksi di atasnya, yang kami sebut tema Gatsby. Dan itu bukan hanya kode antarmuka pengguna, tetapi bisa juga kueri GraphQL, konfigurasi yang menyiapkan plugin, jadi ini seperti plugin dengan jenis penggunaan yang digabungkan bersama. Dan Anda dapat mendistribusikan tema-tema tersebut di NPM.

Marcy: Dan kemudian, versi mereka dan Anda dapat menariknya. Dan seluruh API itu juga sangat menarik untuk tim yang mengatakan Anda memiliki banyak repo, dan Anda ingin menarik data ke dalamnya, akan sangat berulang untuk memiliki kueri yang sama di semua repo ini dalam kode yang sama. Jadi, untuk mengeringkan sedikit dan tidak mengulanginya terlalu banyak. Anda dapat menggunakan abstraksi yang disebut tema ini, untuk mengurutkan distribusi di sekitar logika atau kode yang akan mengaktifkan plugin sumber tersebut. Jadi, ada lapisan-lapisan abstraksi yang dapat Anda bangun di atasnya yang telah kami dengar bahwa tim benar-benar mendapatkan banyak hal saat ini.

Drew: Jadi tema di dunia Gatsby tidak terlihat dan terasa seperti dengan CMS seperti WordPress.

Marcy: Ya, maksud saya, bisa tapi bukan hanya itu. Jadi, memberi nama sesuatu sangat sulit. Tapi tema yang saya sangat senang pelajari hanya tentang fleksibilitas dan kemampuan, ya, Anda dapat menyertakan beberapa kode antarmuka pengguna. Tetapi mungkin ada beberapa kode bahasa kueri yang masuk ke sana juga. Tetapi fakta bahwa itu dibundel bersama, membuatnya mudah untuk didistribusikan. Ya, ini adalah abstraksi yang sangat rapi sehingga keren untuk melihat apa yang sedang dibuat orang dan tema apa yang mereka kirimkan, dan sebagainya.

Drew: Ya, saya bisa membayangkan itu akan mengarah pada penggunaan Gatsby yang cukup inovatif. Pernahkah Anda melihat sesuatu, khususnya yang menarik perhatian Anda bahwa pelanggan melakukan hal ini dengan sangat kreatif?

Marcy: Ya. Nah, dalam hal tema, maksud saya, salah satu yang pertama saya baca tentang studi kasus di blog Gatsby, saya pikir dari Apollo. Dan mereka menulis situs dokumentasi menggunakan tema Gatsby dan yang menggunakan plugin get source. Jadi, ini benar-benar memisahkan sumber Anda, dan konten Anda, sehingga tim dapat menarik tema untuk digunakan di beberapa repo.

Marcy: Saya akan mengatakan itu yang paling menarik bagi saya hanya karena apa yang dapat saya bayangkan memungkinkannya seperti, tim sebelumnya saya berada di tempat kami harus mencari konten, kami sangat terbatas dan di mana kode itu dapat hidup dan betapa berulangnya bisa jadi. Jadi, melihat solusi sekarang di mana tim seperti, "Oh, ini bekerja dengan baik." Dan itu bahkan musim panas lalu, atau seperti itu adalah studi kasus beberapa waktu lalu.

Marcy: Sejak itu, API telah meningkat, dan ada seluruh tim yang mengerjakan tema Gatsby. Dan saya tahu mereka meluncurkan beberapa perbaikan besar dalam beberapa minggu ke depan. Jadi, saya tidak ingin mencuri guntur mereka, tetapi ada beberapa hal rapi yang datang dengan tema. Mereka telah merombak beberapa tema blog seperti tema inti yang kami tawarkan dari Gatsby.

Marcy: Saya tahu mereka menggunakannya secara internal untuk membuat beberapa pengumuman produk kami sendiri, atau peningkatan produk yang akan diumumkan di sini dalam beberapa minggu ke depan. Jadi, banyak hal keren yang terjadi dengan tema Gatsby, dan orang-orang menjual tema dan permulaan mereka sendiri. Saya pikir itu juga sangat menarik.

Drew: Ada sedikit pasar bermunculan di sekitar Gatsby.

Marcy: Ada, Ya.

Drew: Apakah ada pelatihan online dan semacamnya jika seseorang menginginkannya… Jika seseorang memutuskan bahwa mereka benar-benar akan masuk ke Gatsby dan mereka perlu mempelajarinya dengan cepat? Apakah ada tempat lari yang bisa mereka datangi dengan informasi semacam itu tersedia?

Marcy: Satu ton? Ya. Pasti ada situs Doc Gatsby, yaitu gatsbyjs.org/doc's. Dan kami memiliki tutorial, dan saya telah melakukan streaming langsung hampir setiap minggu untuk hal-hal Gatsby. Ada banyak sekali pendidik yang memiliki materi Gatsby di YouTube dan berbagai platform pembelajaran. Egghead, saya rasa beberapa rekan tim saya dari Gatsby memiliki video egghead juga.

Marcy: Jadi, ada banyak hal di luar sana. Saya akan mengatakan periksa tanggalnya jika Anda menemukan sesuatu. Kami selalu secara aktif memperbarui Dokumen Gatsby, beberapa video pihak ketiga yang lebih lama dan hal-hal yang mungkin, memeriksa tanggalnya karena kami tidak dapat memantau setiap sumber belajar untuk pembaruan. Sulit untuk bersaing dengan staf kami sendiri.

Marcy: Karena ada begitu banyak pilihan sumber konten dan kasus penggunaan. Ini adalah ruang yang sangat luas. Tetapi ada begitu banyak materi pembelajaran di luar sana, dan banyak cara untuk memulai sehingga Anda dapat mencoba dan menemukan hal-hal seperti tergantung di mana Anda berada pada spektrum pembelajaran Anda. Apakah Anda pada tahap awal, apakah Anda berasal dari teknologi lain dan Anda hanya perlu belajar tentang seperti apa React ini.

Marcy: Anda dapat memilah dan memilih bahan mana yang cocok untuk Anda berdasarkan di mana Anda berada. Saya telah melakukan kursus baru-baru ini melalui streaming langsung yang disebut Gatsby Web Creators, di mana kami mulai dari HTML, CSS, dan JavaScript pemula hingga membuat situs Gatsby pertama kami. Kami baru saja menyelesaikannya pada hari Jumat. Jadi, sangat rapi untuk kembali ke awal.

Marcy: Dan karena banyak material dengan Gatsby, ia menggunakan React. Jadi, ini adalah lompatan yang cukup besar untuk memulainya. Jadi, saya benar-benar ingin kembali dan mengambil langkah-langkah untuk menyelesaikan semuanya dengan React dan Gatsby. Jadi itu benar-benar rapi. Dan saya bersemangat untuk melanjutkan rute itu, sehingga ada lebih banyak materi pemula dan lebih banyak hal untuk membantu orang memahami cara membangun situs dengan Gatsby karena banyak dari keterampilan itu portabel untuk kerangka kerja lain.

Drew: Salah satu pertanyaan besar yang akan muncul bagi siapa saja yang berpikir tentang membangun semacam situs proyek klien menggunakan Gatsby, salah satu pertanyaan besar yang akan muncul adalah tentang mengelola konten dan meletakkan barang di depan klien. Anda sudah menyebutkan bagaimana Gatsby dapat terhubung ke sistem manajemen konten yang berbeda. Apakah itu metode utama yang akan Anda terapkan untuk menjawab pertanyaan itu? Atau apakah Gatsby memiliki sesuatu dalam ekosistemnya yang memungkinkan orang mengedit konten dengan cara apa pun?

Marcy: Ya, saya akan mengatakan memiliki CMS atau sesuatu dapat membuat hubungan tim itu bekerja jauh lebih baik. Saya pernah mengalami kasus penggunaan di mana tim pengembang menyukai, "Belajar saja HTML." Dan Anda melihat glasir ini dari klien seperti, "Tidak, saya tidak percaya Anda baru saja mengatakan itu." Jadi memiliki sistem di mana orang dapat melakukan pekerjaan terbaik mereka dengan cara apa pun yang paling cocok untuk mereka, adalah sangat, sangat penting.

Marcy: Seperti Anda tidak bisa menangani pemasar GitHub, dan mungkin berhasil kadang-kadang tetapi tidak sepanjang waktu. Jadi, memiliki seperti pratinjau dan membangun infrastruktur membuatnya lebih baik, dan di situlah ruang produk cloud Gatsby masuk ke dalam keributan. Ada cara untuk melakukan pratinjau. Tanpa sisi cloud berbayar dan cloud Gatsby memang memiliki tier gratis untuk proyek pribadi, jadi tidak semuanya berbayar.

Marcy: Tapi kami memiliki ini, seperti sumber terbuka dan ekosistem produk, yang bersatu sehingga Gatsby dapat sebagai organisasi pendiri, menghasilkan cukup uang untuk mempertahankan kerangka kerja sumber terbuka, menjaganya tetap sehat, dan menjaga komunitas kami terus berjalan seiring dengan itu . Jadi, di situlah sisi komersial open source ini bersatu, dan benar-benar memungkinkan beberapa alur kerja yang dibutuhkan tim.

Marcy: Beberapa hal seperti mendapatkan pratinjau cepat, membangun keluar pintu dengan cepat, dan diterapkan. Jadi, ada solusi di sisi cloud Gatsby secara khusus, dan kemudian di mana pun ada cara open source untuk membuat Gatsby bekerja seperti dengan server pratinjau atau semacamnya, kami mencoba mendokumentasikannya dan memastikan komunitas kami tahu apa dan bagaimana melakukannya melayani kebutuhan tim tersebut.

Marcy: Ya, saya akan mengatakan seperti, Anda perlu beberapa cara untuk melihat perubahan CMS Anda karena itu seperti kepuasan instan. Anda tidak ingin menunggu satu jam untuk membangun untuk melihat beberapa konten.

Drew: Jadi itu menarik. Layanan cloud Gatsby memberi Anda kemampuan untuk menggunakan layanan CMS tanpa kepala, di mana Anda hanya bekerja dengan konten, tetapi Anda tidak memiliki visualisasi seperti apa tampilannya di situs Anda memungkinkan Anda mendapatkan pratinjau bagaimana itu akan bekerja. Apakah itu benar?

Marcy: Itu, ya. Jadi, ini adalah bagian dari trade off dari decoupling, CMS tanpa kepala Anda, yang mungkin memiliki, seperti WordPress, Anda hanya dapat melihat front end, tapi kami memberikan front end baru, dan berpotensi menarik sumber lain dan hal-hal lain yang tidak diketahui WordPress. Jadi, memisahkannya dengan cara itu masuk akal. Tetapi Anda tetap, sebagai anggota tim, Anda harus dapat melakukan pekerjaan Anda dengan kecepatan yang biasa Anda lakukan dengan cepat.

Marcy: Jadi, di situlah pratinjau Gatsby, build Gatsby masuk untuk memberikan ujung depan itu kembali ke tim sehingga mereka dapat berkolaborasi, mereka dapat membuat keputusan, mengirimkan sesuatu. Jadi itu bermunculan di tahun lalu, mendapatkan lebih banyak fitur dan peningkatan setiap saat dan kami telah mendengar dari beberapa tim yang benar-benar mulai melihat peningkatan kecepatan.

Marcy: Dan seperti yang kita ketahui, “Oke, jika build ini berjalan lambat, mengapa demikian?” Biasanya karena situsnya sangat, sangat besar. Jadi kami telah banyak berfokus pada peningkatan untuk situs besar, dan benar-benar meningkatkan tim tersebut, alur kerja kolaboratif. Ini adalah fokus besar tim saat ini.

Drew: Jadi Gatsby cloud, saya kira intinya adalah layanan hosting. Apakah ini CDN untuk menyebarkan situs Gatsby Anda dengan banyak fungsi dan fitur khusus Gatsby di sekitarnya?

Marcy: Saya akan menyebutnya lebih sebagai produk pengiriman berkelanjutan karena ini bukan CDN yang sebenarnya. Ini terintegrasi dengan CDN seperti Fastly, Netlify. Ada banyak penyedia berbeda yang dapat Anda kaitkan dan beberapa di antaranya gratis. Anda dapat melakukan banyak hal secara gratis, yang cukup mengagumkan. Saya baru saja melakukannya beberapa hari yang lalu di sesi pembuat web Gatsby terakhir kami, kami menggunakan cloud Gatsby dan Netlify untuk membangun situs kami.

Marcy: Dan ini memungkinkan Anda untuk membuat situs Gatsby lebih cepat secara khusus, karena memang ada peningkatan tersebut. Hanya perlu membangun satu jenis situs. Jadi, ada beberapa peningkatan yang dapat dilakukan oleh cloud Gatsby, yang tidak dapat dilakukan oleh platform lain karena mereka mencoba untuk mendukung semua jenis situs web yang berbeda ini dan mereka melakukannya dengan sangat baik.

Marcy: Tapi untuk Gatsby, jika hanya itu yang Anda bangun, dan ada beberapa agensi, yang semuanya tergabung dalam Gatsby, dan mereka ingin membuatnya secepat mungkin. Nah, dari situlah Gatsby cloud bisa melakukan beberapa peningkatan kinerja khusus untuk Gatsby, karena tidak perlu khawatir dengan platform lain.

Drew: Jadi, Gatsby cloud akan melakukan pembangunan Anda, dan kemudian akan menyebarkannya ke sesuatu seperti Netlify atau mungkin berbagai tempat yang berbeda.

Marcy: Ya. Ya, itu akan. Jadi, itu adalah bagian dari Netlify yang akan digunakannya saat mengunggah paket-paket yang dibuat ini. File yang dibangun. Itu tidak menggunakan build mereka, jadi build terjadi di infrastruktur cloud Gatsby, dan di sanalah beberapa peningkatan kecepatan dapat terjadi. Dan masih ada langkah unggah untuk mengeluarkannya ke CDN, mana pun yang Anda pilih.

Marcy: Tapi ya, sepertinya tim sangat menyukai kemampuan melihat ini. Maksud saya, itu adalah fungsionalitas yang mungkin Anda lewatkan. Jadi, itu adalah hal yang perlu untuk ditambahkan kembali, untuk dapat melakukan pratinjau kolaboratif ini dan mendapatkan persetujuan dan semua itu.

Drew: Jadi, Gatsby cloud disediakan sebagai layanan dari perusahaan Gatsby, dan ada juga proyek open source Gatsby. Apakah ini semacam hubungan yang mirip dengan WordPress dan otomatis, di mana Anda memiliki entitas komersial yang mengembangkan produk sumber terbuka?

Marcy: Saya akan mengatakan ya, seperti Drupal. Ada preseden dalam teknologi untuk memiliki organisasi pendiri ini di mana itu semacam siklus yang baik. Dan kami sedang berupaya menerbitkan beberapa dokumentasi tata kelola sekarang untuk memastikan bahwa, itu sangat jelas bagi komunitas kami, bagaimana kami membuat keputusan. Tetapi keseluruhan tujuannya adalah untuk menjaga agar Gatsby tetap lestari, sehingga dapat terus menjadi proyek sumber terbuka yang dapat digunakan orang bahkan dengan masuk ke cloud Gatsby.

Marcy: Anda bisa menggunakan solusi lain dengan itu jika Anda mau. Jadi, kita membutuhkan bisnis yang cukup untuk bertahan, seperti orang-orang yang mengerjakannya. Jadi, saya berada di antara keduanya, seperti melayang di antara sumber terbuka dan sisi komersial dan mencoba memastikan bahwa kami memprioritaskan sesuatu. Maksud saya, seperti yang dapat Anda bayangkan, kami menyulap banyak hal dengan seberapa luas ruang seperti, kami semua memiliki kasus penggunaan khusus yang kami sukai, rasakan sangat kuat, yang perlu kami lakukan untuk pekerjaan kami.

Marcy: Itu menambah banyak kasus penggunaan khusus. Jadi, kami mencoba menyulap dan memprioritaskan dan benar-benar mendengarkan komunitas kami tentang apa yang menyakitkan saat ini, apa yang menyakitkan, apa yang berjalan dengan baik. Jadi, itu adalah perjalanan yang menarik bagi saya secara pribadi untuk kembali ke devREL dan benar-benar mendengarkan komunitas tentang, bagaimana kita bisa membuat kita menjadi lebih baik?

Drew: Dan apakah ada komunitas besar di sekitar Gatsby yang banyak dan banyak orang yang menggunakannya?

Marcy: Ada banyak orang yang menggunakannya, banyak kontributor. Jadi bagi banyak orang, ini mungkin pertama kalinya mereka berkontribusi pada open source seperti datang ke dermaga kami dan bergabung dengan kami untuk Hacktoberfest dan hal-hal seperti itu. Jadi, sangat menarik untuk melihat apa yang dimiliki komunitas besar Gatsby, terutama dengan hal-hal seperti aksesibilitas dan mencoba memastikan bahwa kerangka kerja melakukan semua yang mereka bisa secara gratis.

Marcy: Jadi, ada ini, saya tidak tahu, subset atau persimpangan aksesibilitas dan Gatsby dan itulah tempat bahagia saya. Tapi komunitas yang lebih luas, banyak orang belajar React atau belajar pengembangan web melalui Gatsby. Jadi, sangat bagus untuk melihat perkembangan melalui komunitas kami, dan mudah-mudahan kami mendapatkan orang untuk berkontribusi, bahkan jika itu masalah atau sesuatu seperti, “Hei, tautan ini rusak atau bagian dermaga ini membingungkan saya atau sudah ketinggalan zaman.”

Marcy: Seperti hanya memberi tahu kerangka kerja atau proyek yang Anda gunakan, bahwa sesuatu bisa menjadi lebih baik adalah cara yang bagus untuk berkontribusi, karena Anda dapat membantu kami mendapatkan wawasan tentang hal-hal yang dapat menggunakan peningkatan. Jadi itu cara yang bagus untuk berkontribusi.

Drew: Anda menyebutkan aksesibilitas dan tentu saja, orang akan mengenal Anda sebagai ahli aksesibilitas. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.