Всем привет.
Я бэкэнд разработчик и фронтэнд задачи решаю как умею, то есть на jQuery, это работало в 2015, работает и сейчас. Но при наличии Vue и React это уже не камильфо. Из любви к особому пути я решил осваивать не проверенный миллионами разработчиков Angular/React/Vue, я решил попробовать Svelte.
Сделав пару упражнений из учебника, я решил перейти к практике. Для этого я взял одно из своих успешно выполненных тестовых заданий.
По заданию надо было сделать просмотр списка задач и одной задачи из этого списка, CRUD не нужен.
Клиентская часть выполнена как SPA, и вся работа с DOM ведётся через jQuery, для замены jQuery на Svelte это отличный кандидат.
Ниже я расскажу о самых первых препятствиях на этом пути и конечно о том как их преодолеть.
Учебник по Svelte очень доступный и наглядный, но как внедрить Svelte в произвольный проект не очень понятно, ведь Svelte это не библиотека как jQuery, это компилятор, то есть код написанный с использованием директив Svelte надо каким то образом откомпилировать в нативный JS.
Другим камнем преткновения было использование
$
[!] (plugin svelte) ValidationError: $ is an illegal variable name
<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>
<body>
jQuery(function ($) {});
<input id="sample" class="form-control " type="search"
placeholder="Введите наименование задачи"
autofocus autocomplete="on"
bind:value={sample}
/>
$("#search").submit(async function (event) {
event.preventDefault();
if (sample) {
search(sample);
}
if (!sample) {
loadStartScreen();
}
});
<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>
<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>
[!] (plugin svelte) ValidationError: $ is an illegal variable name
export default { external []};
<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>
jQuery(function ($) {
loadStartScreen();
});
<svelte:window on:load = {loadStartScreen} />
<svelte:document>
The <svelte:document> tag, just like <svelte:window>, gives you a convenient way to declaratively add event listeners to the document object. This is useful for listening to events that don't fire on window, such as mouseenter and mouseleave.
[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
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');
}
}),
npm install
npm run dev
<head>
<link rel='stylesheet' href='/assets/Site/bundle.css'>
</head>
<body>
</body>
<script src='/assets/Site/bundle.js'></script>
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
К сожалению, не доступен сервер mySQL