BerandaComputers and TechnologyJaring kusut yang kami rajut

Jaring kusut yang kami rajut

Refleksi lain tentang pengembangan web modern

11 September 2020

Bulan lalu saya mengerjakan prototipe tiga bagian teknologi sederhana: Eleventy + Tailwind + Netlify CMS . Saya suka mashup yang bagus. Itu adalah teknologi yang cukup berbeda dengan peran yang ditentukan dengan baik, jadi saya tidak mengantisipasi terlalu banyak cegukan. Saya lebih mencari batasan atau deal breaker. Minggu pertama dipenuhi dengan kecepatan dan momentum yang luar biasa, tetapi saya mengalami hambatan selama minggu kedua. Bagian pratinjau Netlify CMS mulai berantakan. Jadi saya mulai menyelidiki…

Berikut adalah rincian teknologi yang saya gunakan untuk membuat prototipe:

  • Gunakan Eleventy CLI untuk kompilasi Penurunan harga dan Nunjucks
  • Gunakan Tailwind untuk membuatnya terlihat bagus
  • Gunakan TailwindUI untuk beberapa komponen bergaya prefab yang bagus
  • Gunakan PurgeCSS untuk membuat Tailwind lebih kecil
  • Gunakan PostCSS untuk menjalankan Tailwind , Bersihkan , dan Autoprefixer
  • Gunakan AlpineJS untuk membuat Tailwind interaktif

Ini berfungsi sebagaimana mestinya dengan beberapa skrip npm bekerja bersama-sama. Tapi langkah selanjutnya menjadi sedikit licin.

  • Gunakan NetlifyCMS untuk membuat memperbarui penurunan harga lebih mudah bagi penulis konten
  • Gunakan netlify-cms-proxy-server CLI sehingga saya dapat menguji CMS secara lokal
  • Gunakan nunjucks-precompile CLI sehingga Pratinjau CMS Netlify dapat menggunakan template Nunjucks saya
  • Gunakan rollup untuk menggabungkan filter konten jadi Netlify CMS dapat sepenuhnya membuat konten Penurunan Harga (dicuri dari Hylia)
  • Gunakan React untuk membuat membuat komponen dalam NetlifyCMS
  • Gunakan Babel mandiri untuk mentranspilasi Komponen JSX .

Di sinilah segalanya mulai rusak. Alpine tidak berfungsi dalam React pratinjau komponen Netlify CMS . Jadi semua menu saya meledak dan tidak ada bit interaktif yang berfungsi. Saya mencoba beberapa cara untuk perbaikan cepat seperti menulis ulang komponen saya kelas dengan componentDidMount sebagai fungsi dengan useEffect . Ini menghasilkan lebih banyak kesalahan karena JSX menjadi sangat marah karena tidak menyukai arahan khusus yang Alpine menggunakan, tapi itu semua adalah ikan haring merah. Baunya seperti masalah antara Alpine dan React bagian dari Netlify CMS karena frame tidak memiliki pengetahuan tentang Alpine .

Saya memutuskan hal terbaik berikutnya yang dapat saya lakukan adalah mengisolasi masalahnya. Saya mengambil penurunan harga, Nunjucks , rollup , dan Netlify CMS dari persamaan seluruhnya dengan menulis kasus uji yang dikurangi di CodePen untuk membuktikan bahwa saya bisa mendapatkan Bereaksi dan Alpine bekerja sama. Melihat itu berhasil di CodePen memvalidasi hipotesis bahwa masalahnya ada di Netlify CMS sisi hal (atau bagaimana pun itu merender pratinjau). Saya memindahkan CodePen saya ke Netlify CMS dengan sedikit modifikasi untuk menyuntikkan Alpine dan akhirnya saya melihat masalah saya.

Saya tidak melihatnya sebelumnya karena saya memiliki terlalu banyak kode template di iframe , tetapi mengurangi jumlahnya kode membantu saya akhirnya menunjukkan masalahnya. Alpine telah disuntikkan, tetapi berada di jendela induk , bukan konteks dokumen dari iframe . Sekarang saya harus mencari cara untuk mendapatkan Alpine di dalam pratinjau iframe . Anehnya, iframe tidak memiliki src atau srcdoc , jadi harus ada DocumentFragment unik hal yang belum pernah saya gunakan sebelumnya. Menunjukkan ini mungkin sulit. Jadi saya mulai menggali kode sumber Netlify CMS (ini cukup jauh dari lubang kelinci untuk prototipe, btw). Di EditorPreviewPane.js # L188-L233 Anda dapat melihat di mana iframe dibuat dengan dari react-frame-component . Saya tidak tahu apa-apa tentang itu, tetapi Anda dapat melihat cara untuk meneruskan gaya pratinjau ke , saya ingin tahu apakah Anda juga bisa melewatkan skrip dengan cara itu.

Sebelum saya memulai tambalan ke Netlify CMS , Saya mengajukan permintaan fitur dengan solusi tiruan. Syukurlah, Erez Rokah (pengelola) menemukan cara untuk mendapatkan akses ke dokumen dari bereaksi -frame-component , dengan perbaikan yang jauh lebih kecil daripada yang saya usulkan. Sebuah tambalan mendarat dalam beberapa hari. Itu adalah perubahan haluan yang luar biasa dan kesuksesan sumber terbuka. 🎉 Terima kasih, Netlify!

LEGO, pipa ledeng, dan penggembalaan ternak

Jadi mashup kecil saya, yang seharusnya hanya 3 teknologi, akhirnya memaparkan saya pada ~ 20 teknologi berbeda dan membuat saya menggali kode sumber ketergantungan tingkat n setelah tengah malam. Jika ada alegori untuk hal yang tidak saya sukai tentang pengembangan web modern, ini dia. Anda ingin menggunakan tiga alat, tetapi Anda harus tahu cara menggunakan dua puluh alat. Jika modul dan komponen seperti LEGO, maka ini membuang seluruh nampan di lantai hanya untuk menemukan satu bagian kecil yang Anda butuhkan.

Pengalaman ini dibumbui dengan pos terbaru oleh Jessica Joy Kerr “ Dulu ketika perangkat lunak dibuat ”(dan utas oleh Justin Searls ) berbicara tentang industrialisasi industri kita. Selama bertahun-tahun kami telah menjadikan industri perangkat lunak lebih banyak lagi dari industri berbasis pengetahuan. Kami telah beralih dari industri seperti “kerajinan” yang dipesan lebih dahulu dengan papan potong khusus dan sekarang kami memiliki proses yang menyerupai sistem suku cadang standar.

Perangkat lunak terasa lebih seperti perakitan daripada kerajinan.
– Jessica Joy Kerr, Dulu ketika perangkat lunak dibuat

Saya pasti telah merasakan perubahan ini dalam hidup saya sendiri, tetapi tidak dapat mengungkapkannya dengan begitu sederhana. Rasanya seperti tugas pemrograman telah bergeser dari “Bisakah Anda membuat ini?” hingga “Apakah Anda memiliki pengetahuan untuk menggabungkan kedua teknologi ini?” Kerr lebih menerima kenyataan ini daripada saya. Kode pipa dan lem bukanlah bagian pekerjaan favorit saya. Dan seringkali, Anda tidak benar-benar mengetahui batasan dependensi tertentu hingga Anda mendapatkan lima ribu baris kode ke dalam sebuah proyek. Biaya hangus yang besar dan janji pengembangan aplikasi yang cepat dapat terhenti ketika Anda kehabisan jalan pintas.

Ini mengingatkan saya pada perumpamaan yang pernah saya dengar:

Suatu hari, seorang petani, yang lelah membajak ladangnya dengan tangan, memutuskan untuk membangun kandang dan membeli banyak sapi untuk membantu merawat ladangnya. Membajak ladang memang menjadi lebih mudah, tetapi akhirnya sapi melahirkan lebih banyak sapi, dan petani itu menghabiskan sisa hidupnya dengan memotong jerami untuk memberi makan ternak dan menyekop kotoran mereka.

Pengorbanan, kawan.

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments