Приступаем к работе, не беспокоясь о «функциональном программировании».

Вы по-прежнему будете использовать функциональные коды, только не беспокойтесь о том, как и почему. Продолжайте, наслаждайтесь удобочитаемостью, ожидайте результата, представляйте возможности и решайте в конце.

Я написал эту статью, предполагая, что не все будут следовать этим инструкциям по клонированию / кодированию / установке, потому что я не люблю печатать что-либо, если я здесь просто для изучения. Но никаких гарантий.

Отправная точка

Svelte рекомендует всегда запускать проект веб-приложения из репозитория шаблонов. Чтобы следовать этому руководству, клонируйте репозиторий шаблонов fp-tailwindcss-svelte-template svelte-app с помощью degit, например:

npx degit yuan-kuan/fp-tailwindcss-svelte-template svelte-app
cd svelte-app
npm install

Чтобы все работало, в вашей системе должны быть установлены npm и git. Если у вас нет этих двух, но вы читаете это, конечно, но вы уверены?

Что мы смотрим в базовом проекте?

Этот шаблонный проект имеет относительно больше исходных файлов (.js) для начала. Их имена тоже пугающие: free_monad.js, interpreter.js, ref.js и т. Д. Не беспокойтесь о них сейчас, это исходные файлы фреймворка. Не стесняйтесь их изучать, если хотите, просто будьте храбры.

main.js похож на main.js любого другого проекта Svelte, за исключением этой строки: addSop(() => viewMainPage(Sample)). Мы еще раз посмотрим на это позже.

App.svelte, с другой стороны, выглядит устрашающе даже для ветерана Svelte. Это не то место, где вы найдете «точку входа». Это необычно для проекта Svelte, и это не единственный необычный паттерн, с которым вы столкнетесь.

Наконец, есть несколько дополнительных файлов, связанных с TailwindCSS.

В Части 1 мы в основном будем работать с main.js и создадим новый компонент Svelte (*.svelte).

Привет мир

Чтобы начать разработку этого проекта, запустите npm run dev в командной строке. Должна быть инструкция, которая просит вас посетить http://localhost:5000, когда она будет успешной. Сделайте это, и вы увидите простую веб-страницу с простым сообщением.

К сожалению, здесь не написано «Hello World». Богохульство! Давайте исправим ошибку.

  1. Создайте новый файл и назовите его Hello.svelte. Вы можете разместить его где угодно, пока я предлагаю поместить его в /src/view.
  2. Набери в нем свой «Hello World», будь фантазией. Или скопируйте мой:
<p class="w-full pt-3 font-light text-5xl text-center underline">Hello World</p>

3. Откройте main.js, замените import в образце нашим новым Hello:

// REMOVE THIS LINE
import Sample from './view/Sample.svelte';
// ADD THIS LINE
import Hello from './view/Hello.svelte';

4. Затем измените забавно выглядящую строку addSop на следующую:

// Change "Sample" to "Hello"
addSop(() => viewMainPage(Hello));

5. Сохраните файл и снова проверьте веб-страницу.

У вас, наверное, есть несколько вопросов, но я не буду на них сейчас отвечать. Но оставайся со мной!

Привет {$name}

А теперь давайте немного поработаем, добавив немного реактивности. В конце концов, какой смысл использовать Svelte, не используя его реактивность?

В fp-svelte мы будем полагаться на Svelte Store для всей реактивности, то есть динамического изменения DOM. Сделайте следующие изменения:

  1. Откройте Hello.svelte, добавьте в верх следующие коды:
<script context="module">
import {createRef} from '../ref.js';
export const name = createRef();
</script>

2. Измените привет мир на Hello {$name}. {$store} - это синтаксис Svelte для обновления DOM всякий раз, когда в name Store появляется новое значение.

3. Откройте main.js сейчас, замените строку addSop(() => viewMainPage(Hello)); следующими:

addSop(() =>
  free.sequence([
   viewMainPage(Hello),
   setRef(name, 'Svelte in FP')])
);

4. Импортируйте две новые зависимости вверху main.js, чтобы коды были скомпилированы:

import * as free from './free_monad';
import { setRef } from './ref';
import Hello, { name } from './view/Hello.svelte';

5. Сохраните все эти изменения и наблюдайте за новой страницей в браузере.

Если вы прошли шаг 3, браво! Если вам сейчас немного любопытно, я благодарю вас за всех терпеливых, которые не отставали от путешествия. Я должен тебе много ответов. Но я не буду их обсуждать в этой статье. Они достойны целой новой статьи, которая может быть немного философской, и я напишу ее в следующий раз.

Мы еще не закончили. Я буду неправ, если не смогу дать небольшое представление о функции взаимодействия с пользователем в этом небольшом руководстве. Последнее упражнение.

Привет

Давайте добавим текстовый ввод и кнопку на страницу Hello. Здесь цель состоит в том, чтобы позволить пользователям вводить свое имя в поле ввода текста, нажимать кнопку, и на странице будет сказано «Привет». Легкий!

  1. Откройте Hello.svelte, добавьте следующий HTML-код в раздел шаблона:
<div class="flex justify-center p-4">
  <input
    class="appearance-none bg-gray-200 text-gray-700 border rounded py-2 px-4 leading-tight "
    type="text"
    placeholder="new name here"
    bind:value={username}
  />
  <button
    class="bg-blue-500 text-white font-bold py-2 px-4 rounded"
    on:click={confirm}>Confirm</button
  >
</div>

2. Добавьте новый раздел <script> со следующей новой переменной и новой функцией.

<script>
  let username;

  const confirm = () => {
    $changeName(username);
    username = '';
  };
</script>

3. Ого, что это? Повесить там. Это функция закрытия как Svelte Store. Что мы определим в нашем разделе <script context="module">:

<script context="module">
import {createRef} from '../ref.js';

export const name = createRef();
export const changeName = createRef();
</script>

Давайте сделаем здесь перерыв и рассмотрим альтернативу: просто установите значение ввода в $name! Верно, но это не демо Svelte. Мне нравится показывать вам, как это можно сделать более функциональным способом программирования.

Мы закончили с шаблоном. Пришло время написать более функциональные программные коды:

4. Откройте main.js, добавьте импорт changeName:

import Hello, { name, changeName } from './view/Hello.svelte';

5. Добавьте новую функцию. Эта функция будет вызываться каждый раз, когда пользователь нажимает новую кнопку, которую мы только что добавили. Чтобы доказать, что мы сделали больше, чем просто установили значение, мы будем использовать значение ввода с заглавной буквы:

const performChangeName = (newName) =>
  free.of(newName)
    .map(R.toUpper)
    .chain(setRef(name));

6. Мы только что представили Рамду. Импортируйте это:

import * as R from 'ramda';

7. Наконец, нам нужно настроить функцию закрытия, которая будет вызываться через $changeName Svelte Store. Измените строки addSop на эти

addSop(() =>
  free.sequence([
    viewMainPage(Hello),
    setRef(name, 'Svelte in FP'),
    setRef(changeName, (newValue) => addSop(() => performChangeName(newValue)))
  ])
);

8. Сохраните и проверьте новый локальный сайт. Протестируйте новую функциональность.

Последняя строка может показаться непонятной даже для сезонного программиста на JavaScript. Это означает назначение функции закрытия, которая должна вызываться с аргументом newValue, в changeName Svelte Store. Эта закрывающая функция состоит из одной инструкции: addSop(() => performChangeName(newValue)).

Я люблю говорить о addSop гораздо больше, но для этого потребуется целая новая статья. Теперь представьте себе это так: поставьте в очередь функцию закрытия с системой. Это закрытие сработает, когда система решит, что пора его запустить. Выполнение «SOP» - это наш способ сохранить работоспособность этого веб-приложения.

Конец части 1

Это упорный способ разработки веб-приложения. Я продемонстрировал, что нужно делать дополнительные очереди для выполнения простой небольшой задачи. Как будто я запустил бензопилу, чтобы нарезать морковь. Для этого есть причины, и все они сводятся к наличию веб-приложения с полной функциональной архитектурой.

Вы можете изучить полный исходный код этого на https://github.com/yuan-kuan/blog-fp-svelte-part-1.

Если вы уже заинтересованы или хотите узнать, работает ли это в реальном мире, проверьте это: Zasa. Это PWA, построенный на основе этой самой архитектуры.

Если вам нравится следить за этой серией руководств, подпишитесь! Если у вас есть какие-либо комментарии, напишите мне по адресу [email protected].

Первоначально опубликовано на https://world.hey.com.