Demystifying JAMstack: Wawancara Dengan Phil Hawskworth

Beberapa dari Anda mungkin pernah mendengar tentang JAMstack, dan mungkin bahkan tentang cara beralih dari WordPress ke Hugo, tetapi apakah JAMstack merupakan opsi yang layak untuk segala jenis proyek?

Saya berbicara dengan Phil Hawksworth, seorang insinyur front-end yang (setelah 9 tahun bekerja di agensi telah kembali bekerja pada produk mandiri) sekarang berfokus pada pengembangan strategi untuk teknologi JAMstack untuk membuat pembangunan web lebih sederhana, lebih cepat, dan banyak lagi aman. Phil juga akan menjadi co-hosting JAM_stack ldn, sebuah konferensi yang didedikasikan untuk generator situs statis, tanpa server dan JAMstack di London, pada 9-10 Juli.

Vitaly: Halo dan selamat datang di salah satu percakapan kami dengan pembicara kami di Smashing Conf dan orang-orang yang umumnya baik. Anda mungkin ingat saat-saat ketika FTP adalah hal yang besar dan mungkin sebenarnya Anda masih menerapkan mengapa FTP adalah ruang yang sangat aman sehingga Anda tidak perlu khawatir tentang itu. Tetapi perubahannya tinggi sehingga Anda tidak menggunakan FTP lagi dan alih-alih pindah ke alur kerja berbasis Git, dan mungkin penerapan berkelanjutan. Semua peluit dan lonceng mewah ini. Jadi hari ini saya sangat senang menyambut Phil Hawksworth yang sebenarnya bekerja di Netlify, hubungan Pengembang [tidak terdengar 00:10:00]. Halo Fil. Bagaimana kabarmu hari ini?

Phil: Saya baik-baik saja, apa kabar Vitaly? Senang bertemu anda.

Vitaly: Ah, aku baik-baik saja. Itu selalu menyenangkan untuk melihat Anda. Anda seperti sinar matahari yang mengalirkan Netlify dan Jump Stack dan semuanya.

Phil: Saya mencoba. Saya bahkan tidak dicap, sungguh kesempatan yang terlewatkan.

Vitaly: Tidak apa-apa, tidak apa-apa. Tapi kau harus memberitahuku, jadi permata itu atau jen atau jeet, seperti, jem? Apakah itu jem?

Fil: Jam. Ini selai. Ini semua tentang selai.

Vitaly: Semuanya macet. Jadi JAMstack. Bagi developer atau desainer, sebenarnya belum pernah mendengar istilah tersebut sebelumnya. Jika Anda ingin meringkas apa itu dan mengapa itu baik dan apa manfaatnya sejak awal. Mengapa Anda ingin pindah dari tumpukan lama yang tradisional dan bagus ke JAMstack. Mungkin bisa diringkas secara singkat.

Phil: Biarkan saya melihat apakah saya bisa mencoba karena tergoda hanya untuk mengatakan, JAMstack, JAM adalah singkatan dari Javascript, API, dan mockup. Tapi itu sendiri tidak benar-benar menjelaskan banyak hal, hanya mengetahui apa artinya. Jadi sungguh, JAMstack adalah tentang cara menyebarkan dan melayani situs web yang tidak bergantung pada server asal, mereka tidak bergantung pada permintaan yang mengenai server aktif sepanjang waktu.

Phil: Jadi Anda mungkin lebih familiar dengan tumpukan seperti tumpukan LAMP yaitu Linux, Apache, MySQL, dan PHP, itu adalah jenis tumpukan yang melayani situs Anda di sana. Dengan JAMstack, ini menjadi sedikit berbeda karena kami telah naik level, menjauh dari server dan lebih dekat ke browser sehingga kami banyak berpikir untuk masuk ke browser secepat mungkin dan kemudian menggunakan teknologi di browser untuk tingkatkan dan tingkatkan di kemudian hari. Jadi JAMstack adalah tentang situs pra-rendering, memasukkannya ke dalam browser, dan kemudian mungkin meningkatkannya, menambahkannya, pengalaman dengan Javascript yang berjalan di browser Anda, mungkin membuat permintaan ke API dan hal semacam itu.

Phil: Jadi begitulah modelnya, mencoba melepaskan diri dari memiliki server yang perlu Anda pelihara karena saya tahu memelihara server itu sulit. Saya tidak tahu tentang Anda, tetapi saya punya banyak situs yang hilang ketika saya mengabaikannya selama beberapa tahun. Saya perlu memutakhirkan PHP yang berarti saya perlu memutakhirkan versi Linux yang telah saya lakukan sekali dalam bulan biru. Jadi memelihara server itu sulit sehingga ide JAMstack adalah mencoba dan membuatnya sesederhana mungkin untuk melayani situs sebagai aset statis dan kemudian memaksimalkan semua API dan ketidakmampuan di browser untuk melakukan augmentasi dan melakukan lebih banyak hal dengan mereka di sana.

Vitaly: Benar, masuk akal. Sebenarnya, kami pindah ke JAMstack 2 tahun yang lalu atau lebih sekarang.

Phil: Dua tahun?

Vitaly: Ya, itu adalah perjalanan yang cukup berat bagi kami. Dan tentu saja, kami belajar beberapa pelajaran di sepanjang jalan. Tapi saya bertanya-tanya, apakah Anda akan mengatakan bahwa pada dasarnya setiap proyek dapat memperoleh manfaat dari memindahkan atau memindahkan beberapa bagiannya ke JAMstack atau sejenisnya, di mana Anda melihat batasannya? Apakah itu sesuatu yang berpotensi dapat digunakan oleh setiap pengembang dalam suatu proyek atau apakah itu sesuatu yang didedikasikan untuk sekelompok situs web tertentu atau sekelompok proyek?

Phil: Ya, maksud saya, tergoda untuk mengatakan, oh ya, Anda dapat menggunakannya untuk segala hal, tetapi saya pikir Anda harus berhati-hati mengatakannya tentang teknologi apa pun. Anda tahu, Anda benar-benar perlu memilih kasus penggunaan dan memastikannya disesuaikan dengan baik. Saya akan mengatakan naluri pertama ketika Anda berpikir tentang situs JAMstack dan mungkin berpikir tentang sesuatu yang disajikan sebagai aset statis, mungkin langsung dari CDN. Anda mungkin berpikir, itu hanya bagus untuk situs yang tidak terlalu sering berubah, kutipan berdasarkan kutipan, statis, tidak berubah. Namun pada kenyataannya, itu tidak benar karena begitu banyak alat yang ada sekarang yang dapat mengurangi gesekan dalam menyebarkan sesuatu.

Phil: Anda dapat menerapkan berkali-kali sehari, atau beberapa kali dalam satu jam jika Anda mau dan benar-benar membuat segalanya terasa jauh lebih dinamis daripada yang mungkin pernah mereka lakukan sebelumnya. Jadi beberapa kasus penggunaan yang menurut Anda tidak sesuai; mereka benar-benar datang ke flip juga. Waktu yang menjadi tantangan, mungkin, adalah ketika kami membuat situs yang memiliki banyak halaman, ratusan ribu atau jutaan halaman karena model JAMstack sangat masuk akal ketika Anda dapat membuat situs terlebih dahulu jadi Anda mungkin menggunakan generator situs statis. Mereka benar-benar dalam mode saat ini; mereka benar-benar sangat populer.

Phil: Tapi tentu saja, mereka harus melakukan pekerjaan setiap kali mereka menyebarkan pembaruan jadi jika Anda memiliki situs, mungkin seperti situs surat kabar, yang memiliki jutaan halaman, pekerjaan yang diperlukan untuk membuat ulang itu bisa sangat, Anda tahu, itu bisa memakan waktu lama sehingga saat itulah Anda mulai menabrak beberapa batasan di mana JAMstack dapat, semacam, hanya digunakan. Anda bisa mulai sedikit licik dan mulai menyiasatinya jika, Anda tahu, Anda sangat licik tetapi itu pasti menimbulkan beberapa tantangan.

Phil: Salah satu hal yang mulai saya lihat dari berbagai generator situs statis seperti Gatsby misalnya atau React Static, dan juga Hugo. Tim di balik generator situs statis tersebut mulai mencari cara yang dapat Anda lakukan untuk membuat halaman secara progresif sehingga dengan kata lain, Anda tidak menerapkan ulang seluruh situs atau membuat ulang seluruh situs setiap kali ada perubahan, tetapi cobalah dan temukan cara untuk melakukan pembangunan inkremental. Ini semacam masalah yang menantang untuk diatasi tetapi ada pekerjaan yang sedang dilakukan pada saat itu sehingga akan membantu untuk mencoba dan menghancurkan penghalang itu juga. Namun, tentu saja saat ini, menemukan cara untuk menggunakan situs JAMstack untuk situs web yang memiliki jutaan halaman atau ratusan ribu halaman, di situlah hal itu bisa menjadi sedikit menantang saat ini.

Vitaly: Oh, itu menarik. Jadi sebenarnya ide untuk melayani div dari keadaan yang Anda miliki dan pada dasarnya bahwa apa pun yang harus Anda bangun, seperti portal baru harus dimasukkan ke dalamnya sehingga menarik untuk melihat ini terjadi. Karena Anda juga, baru-baru ini, saya pikir dua minggu yang lalu, ada sebuah artikel oleh Jason Pamental muncul di mana idenya sebenarnya sangat mirip di mana Anda akan memuat font, dan kemudian Anda memuat halaman pertama yang Anda butuhkan dan kemudian Anda muat yang kedua dan kemudian Anda benar-benar menggabungkannya dengan cara membuat font baru, seperti juga pemuatan font tambahan.

Fil: Menarik.

Vitaly: Itu akan sangat menarik untuk dijelajahi.

Phil: Ya, dan bukan hanya memuat banyak, ini adalah generasi-

Vitaly: Generasi, pembangunan.

Phil: Ya, persis.

Vitalia: Saya mengerti. Tapi menurut Anda apa tantangan umum yang dihadapi sebagian besar pengembang? Baiklah, maksudku, biarkan aku mundur dulu. Jika Anda belum pernah bekerja di JAMstack sebelumnya dan Anda sangat nyaman dan senang dengan tumpukan LAMP Anda dan Anda mungkin ingin menjelajahi kemungkinan dan keuntungan seperti keamanan dan kinerja JAMstack. Bagaimana Anda akan benar-benar memulai? Apa yang akan Anda pindahkan, apa artinya perubahan alur kerja?

Phil: Jadi, perubahan alur kerja sebenarnya bisa sangat besar karena Anda menghilangkan banyak infrastruktur yang biasanya Anda andalkan dan mengatakan sebenarnya kami dapat menghapusnya dan mulai menerapkan hal-hal langsung ke CDN. Tetapi dalam hal bagaimana seseorang mungkin mulai bereksperimen dengan ini, kemungkinan mereka mungkin sudah menggunakan beberapa aspek dari ini. Anda tahu, bahkan dengan cara tradisional dalam membangun sesuatu untuk web.

Phil: Jika Anda berpikir tentang bagaimana Anda dapat membangun sesuatu di tumpukan LAMP, kemungkinan ada di PHP Anda di sana, Anda melakukan hal-hal seperti menulis template yang mengambil data dari sumber data, dalam hal ini, database MySQL atau semacamnya database, menampilkan hal-hal itu dan kemudian membuatnya dilayani. Dan itu mirip dengan cara kerja generator situs statis. Mereka memiliki template, mereka mengambil data dari suatu tempat yang mungkin berupa data terstruktur dalam file atau mungkin mengenai beberapa jenis database atau API konten. Either way, itu mengambil data, menggabungkan data itu dengan template, menghasilkan tampilan dan satu-satunya perbedaan adalah tidak melakukan itu sesuai permintaan, itu melakukannya sebelumnya. Jadi, beberapa langkah logis dalam langkah kognitif semacam itu untuk pengembang mungkin sebenarnya tidak terlalu besar.

Phil: Perubahan terbesar adalah dalam memikirkan bagaimana Anda menyebarkan sesuatu. Karena sebenarnya yang Anda terapkan adalah aset yang dibuat dan dirender secara keseluruhan setiap kali Anda ingin melakukan penerapan. Itu mulai membawa hal-hal seperti pengelolaan konten dan pengelolaan kode semua ke tempat yang sama sehingga hal-hal seperti visi mengendalikan semua hal itu bersama-sama. Jadi ini mulai menjadi cara berpikir yang sedikit berbeda tentang bagaimana Anda dapat mengembangkan dan mengelola situs dan konten di dalamnya. Jadi ada sedikit perubahan disana. Tetapi hal yang menyenangkan adalah, banyak generator situs statis dapat dengan mudah memulai eksperimen dan hal yang menyenangkan adalah Anda tidak memerlukan banyak infrastruktur untuk melakukan ini. Jadi, hal yang menyenangkan adalah Anda benar-benar dapat mulai membangun semuanya langsung di mesin lokal Anda. Anda menjalankan generator situs statis langsung di mesin Anda dan Anda bisa benar-benar memahami apa hasilnya tanpa perlu bersandar pada banyak infrastruktur lain.

Phil: Jadi, langkah pertama semacam itu, jalan di jalan, bisa jadi sangat dangkal bagi Anda untuk mulai berkata, “Baiklah, saya akan mencoba seperangkat alat khusus ini. Saya bisa menjalankannya secara lokal.” Dan Anda akan memiliki keyakinan yang baik bahwa ketika Anda menerapkan output itu di suatu tempat, itu akan sama persis di mana Anda menyebarkannya seperti yang akan terjadi secara lokal. Itulah salah satu hal yang saya suka tentang rendering hal-hal yang statis karena Anda tidak bergantung pada banyak infrastruktur dan bagian yang bergerak untuk melayani mereka. Anda dapat melihatnya di server statis di mesin Anda sendiri dan berpikir, "ya, beginilah cara kerjanya ketika masuk ke CDN."

Vitaly: Mm-hmm (afirmatif);Dan juga infrastruktur ketika kita melihat, misalnya, ke dalam cara kita membangun tunggal [tidak terdengar 00:10:07], dan ada banyak sekali opsi yang dapat Anda lakukan. Untuk server, untuk klien, dan segala sesuatu di antaranya.

Phil: Ya.

Vitaly: Jadi, saya pikir, dalam kasus kami karena kami membangun kerangka dan melayani langsung melalui CDI dengan konten dan semuanya dan disempurnakan dengan Javascript. Itu sebenarnya cukup masuk akal dan cukup, saya tidak akan mengatakan mudah tetapi masuk akal untuk pindah ke pengaturan semacam itu. Karena pada akhirnya, hanya konten yang tertinggal di halaman. Ini hanya HTML dengan beberapa area komentar dan kotak pencarian dan beberapa hal lainnya. Tetapi jika Anda bergerak menuju aplikasi yang benar-benar mandiri, bahkan mungkin aplikasi keuangan, perbankan online, hal semacam ini. Apakah Anda masih berpikir bahwa JAMstack akan menjadi pilihan yang baik untuk dipertimbangkan di sana jika Anda memiliki sesuatu yang meminta banyak logika? Apakah perlu server atau tidak?

Phil: Yah, saya tidak suka mengeluarkan ungkapan lama, "itu tergantung." Tapi itu agak tergantung sedikit. Dengan demikian, ada banyak aplikasi yang berfungsi dengan baik sebagai aplikasi Javascript karena sebenarnya memiliki komponen sisi layanan. Saya mengatakan itu dengan hati-hati karena saya agak ketinggalan jaman dalam hal pengembangan web dan saya sangat suka memasukkan sesuatu ke dalam browser sebanyak mungkin HTML dan kemudian memiliki tanda air yang sangat tinggi dari mana Anda semakin meningkatkan dari. Jadi saya pribadi tidak suka melakukan semuanya dalam Javascript dan hanya mengirimkan tag tubuh kosong dan kemudian menjalankan semuanya melalui Javascript.

Phil: Dengan itu, terkadang ada di mana itu bisa diterima. Jika Anda berpikir tentang jenis aplikasi tertentu yang, tentu saja, akan sangat bergantung pada Javascript dan Anda mengenal audiens Anda. Itu bisa sepenuhnya masuk akal. Ada hal-hal yang telah dikirim baru-baru ini. Saya sebenarnya sedang memikirkan sesuatu yang dikirimkan ke Google IO untuk, sebagai contoh, tim chrome menyusun permainan yang sangat Javascript dan yang bekerja dengan baik disajikan secara statis. Ada banyak kasus penggunaan di mana itu bisa berhasil.

Phil: Kembali ke contoh keuangan Anda, saya dulu bekerja, pekerjaan pertama saya sebenarnya, adalah menempatkan angka di layar bagi para pedagang untuk berdagang menggunakan teknologi web dan ini sebelum soket web, sebelum Ajax, sebelum apa pun benar-benar itu berguna untuk membantu Anda melakukan itu dan itu agak menantang tetapi baru-baru ini, Anda akan melakukan banyak hal semacam itu di Javascript dan itu masuk akal. Anda dapat mulai membuat permintaan aman ke API langsung dari browser. Ada banyak model sekarang untuk melakukan otentikasi dan otorisasi langsung dari browser Anda. Jadi dalam banyak hal, ini dapat menyederhanakan tumpukan untuk lembaga keuangan yang ingin membangun beberapa hal ini karena cara mereka dapat memisahkan beberapa hal ini dapat membuat mereka jauh lebih mudah dikelola. Jadi saya pasti berpikir bahwa model JAMstack dapat bekerja dengan sempurna dalam skenario itu juga.

Vitaly: Oke, jadi mungkin kembali sekarang untuk menjelajahi dunia JAMstack dan front end itu. Apa yang paling membuatmu bersemangat hari ini, Phil? Jika Anda melihat JAMstack dan front end secara umum, apakah itu sesuatu yang benar-benar membuat Anda tetap terjaga di malam hari di mana Anda bangun di pagi hari dengan harapan ya, saya akan mengerjakannya suatu hari nanti. Suatu hari saya akan menyelesaikannya. Apakah Anda memiliki [crosstalk 00:13:33]

Phil: Ya, dan ini adalah hal di mana jawaban Anda bisa berbeda dari hari ke hari karena rasanya dunia ini bergerak begitu cepat. Dan itu sendiri adalah salah satu hal yang sangat menggairahkan saya. Sekarang kita mulai melihat browser API mulai benar-benar berkembang dan hal-hal yang dapat kita lakukan secara langsung di browser tanpa harus mengimplementasikannya sendiri. Itu agak menarik bagi saya. Saya masih sangat bodoh dalam hal SVG. Saya harus menjelaskan kata duffer, jika ada yang bukan bahasa Inggris dan menonton ini, artinya bodoh. Itu berarti saya jauh di belakang kurva.

Phil: Tapi saya menemukan diri saya benar-benar ingin berbuat lebih banyak dengan SVG dan animasi adalah hal-hal yang saya jauh di belakang dan saya ingin bermain dengan itu. Tetapi hal-hal seperti API browser apakah itu untuk offline atau untuk meningkatkan kinerja dan khususnya saat ini cara pemuatan font tampaknya semakin mudah diakses sehingga kami dapat mulai benar-benar membuat hal-hal yang secara visual sangat kaya dan lebih dekat apa yang mungkin ingin kita buat dengan tipografi. Saya sedikit kutu buku untuk hal-hal itu, saya suka hal-hal semacam itu jadi saya ingin bermain lebih dan lebih dengan itu.

Vitaly: Jadi Phil, berbicara tentang JAMstack conf di London. Bisakah Anda juga menjelaskan dalam beberapa kata seperti tentang apa, apa fokusnya dan untuk siapa dan apa peran Anda di sana? Tepat di belakang layar, mengurus konten dan semuanya. Apa peran Anda di sana?

Phil: Jadi saya menikmati bagian pekerjaan yang menyenangkan. Jadi saya memiliki kesempatan untuk keluar dan mencari pembicara dan menemukan konten yang menarik, jadi saya sangat bersemangat tentang bagaimana program-program itu bersatu. Kami memiliki orang-orang seperti Chris Coia yang akan berbicara tentang memberdayakan pengembang front-end dan seberapa banyak yang dapat kami lakukan dengan teknologi front-end sekarang berdasarkan model JAMstack ini. Kami memiliki orang-orang seperti Jake Archibald dan Surma dari tim Google Chrome yang akan membicarakan hal-hal seperti kinerja di bagian depan dan cara kami benar-benar dapat mendorong pengalaman kinerja yang sangat baik dengan hosting statis atau infrastruktur atau kode yang berjalan tepat di browser.

Phil: Kami juga akan membuat Yuna Kravitz berbicara tentang hal-hal yang berkaitan dengan CSS dan Houdini dan semua hal semacam itu. Dan masih banyak lagi selain itu. Kami juga akan berbicara tentang hal-hal yang berkaitan dengan perubahan budaya yang dapat dimiliki model JAMstack di organisasi Anda dan pada proyek Anda sehingga benar-benar menjangkau semua tempat. Jadi saya agak bersemangat tentang itu. Saya akan mendapat kesempatan juga untuk memperkenalkan semua orang ini karena mereka telah membiarkan saya menjadi liar dan menjadi MC juga sehingga itu berarti saya dapat berbicara dengan orang-orang ini dan mengajukan beberapa pertanyaan dan hal-hal semacam itu. Jadi saya pikir ini akan sangat menarik bagi siapa saja yang tertarik dengan pengembangan front-end dan juga model baru dalam menyampaikan proyek di web dengan cara yang sangat efisien.

Vitaly: Oh, jadi kamu suka sorotan di atas panggung, ya?

Phil: Saya seorang pencari perhatian. Anda harus tahu itu sekarang, Vitaly.

Vitaly: Oh, sebenarnya saya selalu berpikir Anda orang yang sangat rendah hati dan baik dan baik, ternyata saya-

Phil: Ini akting, akting.

Vitaly: Oke, tidak apa-apa. Phil, kita akan bertemu dalam beberapa, oh sebenarnya, besok.

Phil: Sampai jumpa lagi di acara lain, tapi kalau tidak saya akan bertemu lagi di bulan Juli, tanggal sembilan dan sepuluh Juli.

Vitaly: [tidak terdengar 00:16:52] Jadi dengan mengingat hal ini, terima kasih Phil dan tanda tangan. Sampai jumpa semuanya.

Phil: Sampai jumpa.

Itu Bungkus!

Kami menantikan kehadiran Phil di SmashingConf Toronto 2019, dengan sesi langsung di JAMstack. Kami akan senang melihat Anda di sana juga!

Beri tahu kami jika menurut Anda rangkaian wawancara ini bermanfaat, dan siapa yang Anda ingin kami wawancarai, atau topik apa yang Anda ingin kami bahas dan kami akan segera melakukannya!