💰 🕺🏽 📥 Pergi dari jQuery ke Svelte, tanpa rasa sakit 🐘 ♻️ 🚑

Halo semuanya.

Saya seorang pengembang backend dan saya menyelesaikan tugas-tugas front-end yang saya bisa, yaitu, di jQuery, ia bekerja pada tahun 2015, ia berfungsi sekarang. Tetapi dengan Vue dan Bereaksi, ini bukan lagi sebuah camphile. Karena cinta untuk cara khusus, saya memutuskan untuk menguasai Angular / React / Vue, yang belum diuji oleh jutaan pengembang, saya memutuskan untuk mencoba Svelte .

Setelah melakukan beberapa latihan dari buku teks, saya memutuskan untuk melanjutkan berlatih. Untuk ini, saya mengambil salah satu tugas tes saya yang berhasil diselesaikan.

Pada penugasan itu perlu untuk meninjau daftar tugas dan satu tugas dari daftar ini, CRUD tidak diperlukan.

Bagian klien diimplementasikan sebagai SPA, dan semua pekerjaan dengan DOM dilakukan melalui jQuery, itu adalah kandidat yang sangat baik untuk menggantikan jQuery dengan Svelte.

Di bawah ini saya akan berbicara tentang rintangan pertama di sepanjang jalan dan tentu saja tentang cara mengatasinya.
Tutorial Svelte sangat mudah diakses dan intuitif, tetapi bagaimana menanamkan Svelte dalam proyek arbitrer tidak begitu jelas, karena Svelte bukan perpustakaan seperti jQuery, itu adalah kompiler, yaitu, kode yang ditulis menggunakan arahan Svelte entah bagaimana harus dikompilasi ke dalam JS asli.

Batu sandungan lain adalah penggunaan

di Svelte, ini adalah karakter yang dilindungi undang-undang, jadi menggunakannya dalam kode yang akan dikompilasi oleh Svelte mengarah ke kesalahan:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

Menggunakan `$`

Tentu saja, pertanyaan mungkin muncul: seperti apa `$` jika kita benar-benar mengubah jQuery ke Svelte?
Ya, pertanyaannya masuk akal, tetapi jika Anda memikirkannya, masalahnya akan menjadi jelas - Anda tidak perlu memakan keseluruhan gajah, orang-orang yang berpengalaman memakan sebagian gajah. Dalam hal transisi dari menggunakan jQuery ke menggunakan Svelte, itu akan menjadi serangkaian refactoring atom, kemajuan akan selalu terlihat dan "sistem" secara keseluruhan akan selalu dalam kondisi kerja.

Rencananya adalah ini: menulis ulang sepotong, menguji, memperbaiki, menulis ulang potongan berikutnya, dan seterusnya sampai kita memakan seluruh gajah tanpa jejak.

Masalah dengan `$` hanya terjadi pada kode yang dikompilasi Svelte, saya memiliki semua logika SPA yang dipindahkan ke file "business-process.js", tidak perlu menyelesaikan masalah ini, tetapi semua kode dari "business-process.js" harus pergi ke App.svelte dan komponen aplikasi terkait lainnya.

Setelah refactoring pertama, App.svelte muncul dengan kode berikut:


<script>
    jQuery(function ($) {

        function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
        }

        loadStartScreen();

        async function search(sample) {
            $('#paging').empty();
            $.ajax({
                type: "GET",
                url: `/api/v1/task/search/${sample}/`,
                dataType: "json",
                success: renderTasks,
                error: function (jqXHR, textStatus, errorThrown) {
                },
                timeout: 500,
            });
        }

        $("#search").submit(async function (event) {
            event.preventDefault();
            const sample = $("#sample").val();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });
    });
</script>

<div class="container">
    <h1>  </h1>

    <form class="form-horizontal" id="search">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  " 
                 autofocus autocomplete="on" />
            </div>
        </div>
    </form>
    <div id="taskList">
    </div>
    <div id="paging">
    </div>

Kode berfungsi, sebenarnya Svelte belum digunakan sama sekali, pada tahap ini Svelte hanya menghasilkan kode HTML yang dimasukkan ke

<body>

Variabel `$` terisolasi dalam panggilan

jQuery(function ($) {});

tidak ada konflik penamaan.

Kami mengikat variabel sampel dengan nilai elemen input dengan id = "sample":


                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />

Pada acara ajukan elemen bentuk dengan id = "cari" kode dieksekusi:


        $("#search").submit(async function (event) {
            event.preventDefault();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });

Kode ini harus dijalankan sesuai dengan arahan Svelte, kami menulis ulang:


<script>
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>
<form class="form-horizontal" id="search"
on:submit="{svelteSearch}">
</form>

Kode mengkompilasi, tetapi tidak berfungsi, karena fungsi pencarian () didefinisikan dalam lingkup jQuery (fungsi ($) {}); dan dalam lingkup global fungsi ini tidak terlihat. Tarik pencarian () ke dalam satu ruang lingkup dengan svelteSearch (acara):


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }

    let sample = '';

    jQuery(function ($) {
        loadStartScreen();
    });
    async function search(sample) {
        $('#paging').empty();
        $.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

Kode semacam itu tidak dikompilasi:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

Apa yang harus dilakukan? Google itu! "Svelte cara mengimpor jquery": Bagaimana cara menggunakan jQuery di Svelte
Saya tidak suka jawaban yang ditandai sebagai "benar" untuk mengimpor perpustakaan pihak ketiga (sewenang-wenang * .js), tidak cukup untuk menulis impor *, Anda harus mendaftarkannya di rollup.config.js luar:


export default { external []};

Opsi kedua dengan jendela. $ Membutuhkan lebih sedikit gerakan tubuh dan karena kami berencana untuk sepenuhnya mengabaikan penggunaan jQuery, arahan untuk impor ini akan bersifat sementara dan keakraban dengan impor dapat ditunda hingga nanti.

Gunakan salin-tempel dengan stack overflow:


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }
    jQuery(function ($) {
        loadStartScreen();
    });

    let sample = '';

    async function search(sample) {
        window.$('#paging').empty();
        window.$.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

<div class="container">
    <h1>  </h1>
    <form class="form-horizontal" id="search"
    on:submit="{svelteSearch}">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />
            </div>
        </div>
    </form>
// ..skip..
</div>

Tetap menyingkirkan:


    jQuery(function ($) {
        loadStartScreen();
    });

Kami menghapus kode ini dan menambahkannya ke markup:


<svelte:window on:load = {loadStartScreen} />

Selesai

Dalam dokumentasi Svelte , Anda dapat menemukan:

<svelte: document>
Tag <svelte: document>, seperti <svelte: window>, memberi Anda cara mudah untuk menambahkan pendengar acara secara deklaratif ke objek dokumen. Ini berguna untuk mendengarkan acara yang tidak menyala di jendela, seperti mouseenter dan mouseleave.

Dalam praktiknya, kami memiliki:


[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component

Yaitu, tag telah dihapus dari kode , tetapi mereka lupa untuk menghapusnya dari dokumentasi, membuat saya takjub, Svelte dikembangkan bukan oleh para dewa, tetapi oleh orang-orang yang juga cenderung meninggalkan sesuatu untuk nanti dan lupa.

Bagaimana mengintegrasikan jQuery dalam kode Svelte dengan sedikit darah yang saya katakan.

Cara mengkompilasi arahan Svelte dalam kode JS

Kami memompa proyek kosong ke folder terpisah seperti yang dijelaskan dalam blog Svelte (instal Node.js di sepanjang jalan). Sekarang kami mentransfer file yang diunduh ke direktori proyek kami.

Kami mentransfer file dari "publik" ke tempat kami memiliki file untuk diunduh oleh klien (browser pengguna), saya memilikinya "publik / aset / Situs", saya tidak perlu gaya dari "global.css", saya tidak mentransfer file ini.

File "public / index.html", saya dipindahkan ke tempat server akan mengambil templat untuk dilihat: "view / Site / index.html".

File dari "src" ditambahkan ke sumber frontend - "src / frontend".

File yang menjelaskan sumber-sumber frontend:

rollup.config.js
package-lock.json
package.json

Saya beralih ke root, di sana IDE mengambilnya dan mengurus semuanya (dependensi yang diinstal).
Sekarang Anda perlu mengubah konfigurasi kompilasi arahan Svelte di JS.

Buka rollup.config.js dan ubah jalur file:


export default {
	input: 'src/frontend/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/assets/Site/bundle.js'
	},
	plugins: [
		svelte({
			dev: !production,
			css: css => {
				css.write('public/assets/Site/bundle.css');
			}
		}),

Itulah kesulitan dengan integrasi awal Svelte ke dalam proyek yang ada.

Kami menginstal dependensi dan mulai melacak perubahan dalam kode sumber frontend untuk kompilasi dengan cepat:

npm install
npm run dev

Jangan lupa

Edit templat presentasi (dalam kasus saya, itu adalah "view / Situs / index.html"):

Segala sesuatu di dalam tag tubuh portabel untuk App.svelte

Tambahkan tautan ke file sumber daya yang diperlukan


<head>
  <link rel='stylesheet' href='/assets/Site/bundle.css'>
</head>

Setelah tag tubuh, tambahkan "tautan" ke file rakitan yang dihasilkan:
```
<body>
</body>
<script src='/assets/Site/bundle.js'></script>
```

Seluruh kode dapat dilihat di repositori .

Pengabaian jQuery terakhir dalam proyek ini masih jauh, tetapi artikel itu bukan tentang itu, artikel ini adalah tentang langkah-langkah pertama untuk mengimplementasikan Svelte dalam kode Anda, tentang hal-hal paling sederhana.

Terimakasih atas perhatiannya.

Ancaman
Bagaimana transisi itu terjadi, Anda dapat membaca di artikel berikutnya " Bagaimana itu "

Pergi dari jQuery ke Svelte, tanpa rasa sakit

Menggunakan `$`

Cara mengkompilasi arahan Svelte dalam kode JS

Jangan lupa

More articles: