Frontend untuk pengembang backend

Saya ingin membuat reservasi segera bahwa artikel ini tidak ditujukan bagi mereka yang memiliki pengembangan utama kegiatan utama. Posting ini ditujukan untuk pengembang backend yang sangat dibutuhkan untuk mempercepat UI web atau mereka yang hanya tertarik pada bidang baru, serta pengembang fullstack.

Jadi, mari kita beralih ke masalah. Saya ingat sebuah artikel , dan juga, di ruang terbuka Habr ada beberapa yang serupa. Mereka semua disajikan sebagai komik, tetapi seperti yang mereka katakan "dalam setiap lelucon ada butir kebenaran", dan di sini bahkan tidak sedikit ... Tapi di sini adalah pertanyaan, seberapa berguna semua kerangka kerja ini, apakah mereka dibutuhkan?

Pertanyaan yang ingin saya ajukan terutama tentang perakitan. Pada tahap inilah komunitas js menawarkan sejumlah alat yang luar biasa, kebutuhan yang sama sekali tidak jelas. Misalnya, komunitas menawarkan berbagai opsi untuk bekerja dengan modul, yang masuk akal pada saat itu, tetapi saat ini, spesifikasi impor / ekspor didukung oleh semua browser modern, dan bahkan tidak oleh browser tepi. Karena kami sebutkan sebelumnya bahwa kami tidak punya alasan untuk bekerja dengan perpustakaan lama, kami akan melihat spesifikasi impor / ekspor. Tetapi yang benar-benar kita butuhkan adalah semacam pekerjaan dengan ketergantungan.

Saya akan melakukan penyimpangan kecil untuk menjelaskan pilihan teknologi yang akan digunakan dalam contoh untuk frontend itu sendiri. Agar tidak mempelajari beragam kerangka kerja, mari kita beralih dari standar yang bagus. Jadi, semuanya menjadi sangat sederhana, tidak ada DOM virtual, ada komponen web. Ini bisa selesai, tetapi masih js. Jika kita memutuskan untuk menyingkirkan js murni , maka kita harus entah bagaimana menyelesaikan masalah infrastruktur, menyingkirkan kode boilerlet, dll. Dengan kata lain, untuk membuat sepeda Anda sedikit ... Agar tidak melakukan ini, saya ingin mengambil sesuatu di mana semuanya sudah dilakukan dan memiliki kualitas yang cukup. Dengan demikian, pilihan saya jatuh pada Polymer - kerangka kerja dari Google, yang mendorong komponen web ke dalam standar.

Kembali ke majelis. Banyak di antara Anda (dalam hal apa pun, pengembang Java) yang terbiasa dengan alat seperti maven dan gradle, dan mungkin berhasil mengetahui bahwa mereka melakukan pekerjaan hebat dengan manipulasi sumber daya (maven tentu sedikit lebih buruk, tetapi gradle tidak memiliki masalah sama sekali apapun). Komunitas frontend menawarkan kita untuk mengambil npm, yang mana nodeJs diperlukan, tetapi ini tidak cukup, webpack juga ada di atas. Dan mereka masih harus memahami dan menempatkan setiap pengembang. Um ... Saya hanya ingin mengempiskan repositori, membuat gradlew build dan mulai bekerja, jadi mari kita berhenti di gradle yang biasa.

Tentu saja, kami tidak dapat melakukannya tanpa npm sama sekali, setidaknya kami membutuhkan repositori tempat mendapatkan perpustakaan js dari dan npm menyediakannya, tetapi utilitas ini opsional. Anda dapat menemukan beberapa solusi bagus seperti ini , tetapi mereka selalu mengunduh nodeJs dan menjalankan tugas npm. Sebuah opsi, tetapi saya ingin meminimalkan komunikasi dengan npm sebelum berinteraksi dengan repositori dan banyak lagi. Sebagai solusinya, tulis plugin Anda sendiri untuk gradle. Walaupun menulis plugin untuk gradle cukup sederhana, karena beragamnya pilihan untuk menentukan versi untuk repositori npm, tugasnya agak lebih rumit. Untungnya, ada dokumentasi yang jelas untuk ini.

Jadi, mari kita menulis skrip gradle untuk memuat dependensi. Ini digunakan oleh kotlin dsl karena alasan menulis ulang ke groovy dsl cukup sepele, tetapi sebaliknya, akan memakan waktu jika tidak ada pengalaman sebelumnya.

repositories { mavenLocal() jcenter() } dependencies { classpath("com.github.artfable.gradle:gradle-npm-repository-plugin:0.0.3") } apply(plugin = "artfable.npm") configure<GradleNpmRepositoryExtension> { output = "$projectDir/src/libs/" dependencies = mapOf( Pair("@polymer/polymer", "3.0.5"), Pair("@polymer/app-layout", "3.0.1"), Pair("@polymer/paper-toolbar", "3.0.1"), Pair("@polymer/paper-icon-button", "3.0.1"), Pair("@polymer/iron-icons", "3.0.1"), Pair("@webcomponents/webcomponentsjs", "2.1.3") ) } 

Plugin ini akan menambahkan kita npmLoad . Untuk membiarkan grup IDE dengan baik, tentukan dalam grup

 tasks["npmLoad"].group = "frontend" 

Hebat, Anda dapat mencoba menulis kode untuk frontend kami. Server Intellij bawaan akan memberi tahu Anda secara default bahwa Metode Tidak Diizinkan mencoba menghubungkan skrip melalui impor. Untuk menghindari ini, centang kotak centang boleh menggunakan permintaan . (dalam versi terbaru ini berfungsi tanpa itu).



Mari kita coba mulai sekarang, dan ... Tetap saja, tidak ada yang berhasil. Ketergantungan di dalam komponen polimer jatuh. Faktanya adalah bahwa banyak perpustakaan js mendorong impor dengan harapan beberapa jenis transpiler seperti babel. Impor seperti ini terlihat seperti ini:

 import '@polymer/polymer/polymer-legacy.js'; 

Impor sintaksis ini tidak benar, karena untuk peramban, jalur harus dimulai hanya dengan '/', './' atau '../'. Selain itu, dalam formulir ini tidak dapat diambil sebagai relatif atau absolut, karena di sini perhitungan dibuat sebagai permulaan dari akar direktori perpustakaan. Oleh karena itu, jalur seperti itu perlu diperbaiki, dan agar tidak melakukannya sendiri, Anda dapat mengambil plug-in yang sudah disiapkan.

Menurut

 classpath("com.github.artfable.gradle:gradle-js-import-fix-plugin:0.0.1") 

 apply(plugin = "artfable.js.import.fix") configure<GradleJsImportFixExtension> { directory = "$projectDir/src/libs" } 

Tugas jsImportFix akan ditambahkan yang akan membawa semua impor dalam urutan.

Persis seperti itu, dan tanpa harus berurusan dengan segunung alat baru, Anda dapat menyusun front. Tapi mari kita lihat masalah gaya lagi. Sejujurnya, komponen web dapat menghilangkan pelat lantai, dan variabel dalam css yang sudah ada dalam standar membuka banyak kemungkinan, sehingga hal-hal seperti sass tidak lagi diperlukan. Tapi tiba-tiba, misalnya, Anda sangat menyukai bootstrap dan ingin membuat desain berdasarkan itu.

Mencari plug-in untuk membangun tentang hal ini bukan masalah, pada dasarnya, mereka semua mengambil libsass sebagai dasar dan ada pembungkus di java - jsass . Satu-satunya masalah untuk semua orang (setidaknya pada saat saya mempertimbangkannya) adalah menduplikasi file dependen.

Contoh:

Ajukan:

 @import “b”; @import “c”; 

File _B dan _c:

 @import “d”; 

Akibatnya, kita mendapatkan 2 file identik di file utama dari file _c. Anda dapat memperbaikinya, jika Anda menambahkan importir ke jsass, api memungkinkan. Sebenarnya, oleh karena itu, saya lagi dengan keputusan saya di sini (jika tidak ada persyaratan seperti itu, maka lebih baik menggunakan solusi lain).

Tambahkan dependensi npm ke daftar

 Pair("bootstrap", "4.1.3") 

Ketergantungan plugin

 classpath("com.github.artfable.gradle:gradle-sass-plugin:0.0.1") 

 apply(plugin = "artfable.sass") configure<GradleLibsassPluginExtension> { group(delegateClosureOf<GradleLibsassPluginGroup> { sourceDir = "src/sass" outputDir = "src/css" } as Closure<Any>) } tasks.create("processResources") 

Tugas palsu processResources harus dibuat jika java-plugin tidak terhubung (dan kami tidak membutuhkannya di sini). Ini tentu saja cacat, maka saya pasti akan memperbaikinya.

Harap dicatat bahwa file css yang dihasilkan tidak boleh terhubung ke kepala , karena di dalam komponen itu tidak akan terlihat, tetapi langsung ke template komponen itu sendiri.

Langkah terakhir adalah sedikit memodifikasi skrip untuk mendapatkan direktori build yang biasa, dengan proyek yang sudah jadi yang dapat digunakan untuk mendukung.

Kode lengkap diunggah ke github (Anda mungkin harus bermigrasi ke gitlab nanti ...).

Saya harap ide dasarnya jelas, dan kemudian Anda dapat menambahkan apa saja yang Anda suka. Terima kasih sudah membaca.