Рубрики
Без рубрики

Учиться svelte: Начните с Svelte, написав приложение Pomodoro Technique

Разделение моего первоначального опыта в изучении SVELTE Начало работы, создавая образец проекта, приложение Pomodoro Technique. Tagged с Svelte, JavaScript, WebDev.

Эта статья была первоначально опубликована на Варвар встречает кодирование .

SVELTE это современная веб-структура, которая придерживается нового подхода к созданию веб-приложений, перемещая основную часть своей работы со времени выполнения до времени компиляции. Будучи компилятором-первой структурой позволяет SVELTE делать некоторые очень интересные вещи, которые недоступны для других рамках, таких как исчезающие из вашего приложения во время выполнения, или позволяя создавать компонентное развитие с HTML, JavaScript и CSS, сосуществующим в том же файле SVELTE в очень Веб-стандарты Дружественная мода.

В этой серии мы будем следовать, когда я впервые использую Svelte, чтобы построить приложение. Я буду использовать мой Go-to Project 1 Выучить новые рамки: A Помодоро Техника APP, которое немного более вовлечено, чем список TODO в том, что в нем есть хотя бы пара компонентов (таймер и список задач), которые должны взаимодействовать друг с другом.

Не читали первую статью в этой серии? Тогда вы можете захотеть посмотри , есть много ресурсов, чтобы вы начали с SVELTE.

Создание приложения Pomodoro Technique

Для вас, кто не знаком с Помодоро Техника Немного контекста может быть в порядке. Давайте сделаем быстрый TLDR!

Техника Pomodoro – это методика, целью которой поможет вам стать более продуктивным путем укрепления вашего фокуса и помогая вам узнать о том, что заставляет вас отвлекаться Анкет

По сути, методика предписывает, что вы работаете над задачами в 25 минутах кусочков бесперебойного фокуса (единица измерения Pomodoro). Если вы отвлекаете или кто -то прерывает вас, вы записываете причину отвлечения и начинаете Pomodoro с самого начала. Как вы становитесь лучше и лучше с этой техникой, вы станете мастером отвлекающих факторов. Вы сможете оставаться сосредоточенным дольше и заполнять больше Pomodoros, становясь более продуктивным с каждым днем.

Если вам интересно, вы можете Узнайте больше об этой технике от его производителя Анкет На протяжении многих лет я обнаружил, что эта техника была специально полезна, чтобы заставить меня сосредоточиться на задаче в те моменты жизни, когда она была самой сложной.

Таким образом, приложение, которое поддерживает эту технику, должно иметь, по крайней мере, список задач, которые вы хотите выполнить в течение дня, и таймер Pomodoro, который отмечает периоды сфокусированной работы. Затем приложение может быть расширено с помощью приема заметки о ваших частых отвлекающих факторов, способ отслеживать, как вы прогрессируете со временем и т. Д.

В этой серии статей мы сосредоточимся на разработке MVP и внедрите список задач и таймер Pomodoro.

Давайте начнем! Сделай!

Начало работы со стройным

Самые простые способы начать С стр.

  1. Проходя через СВОВНА
  2. Tinkering в SVELTE REPL в Svelte.dev
  3. Создание приложения с нуля с использованием шаблона стрте

Хотя я думаю, что прохождение учебника действительно полезно для изучения синтаксиса стрижек и того, что доступно, я думаю, что Лучший способ узнать что -то – это сделать это, делая это В окружающей среде, как можно ближе к тому, как это будет разработать приложение Svelte в реальном мире. Вам нужно бороться о решении проблем самостоятельно, чтобы действительно узнать что-то Анкет Вот почему мы следуем шагу 3 и воспользуемся преимуществами стройного шаблона, чтобы создать приложение Pomodoro Technique.

Создание нового проекта

Мы генерируем новый проект, используя град (Инструмент строительных лесов проекта, также написанный Рич Харрисом, создателем Svelte). Тип:

$ npx degit sveltejs/template il-pomodoro

Это создает совершенно новый проект Svelte внутри Il-Pomodoro каталог. Мы прыгаем, устанавливаем зависимости и запускаем сервер разработки:

# Jump in
$ cd il-pomodoro
# Install the dependencies
$ npm install
# Run the development server
$ npm run dev

Теперь мы открываем браузер на Localhost: 5000 И давайте посмотрим, что мы получаем …

Тада! Svelte Hello World!

Настройка вашего редактора

Svelte – это компилятор-первая каркас, которая компилирует .svelte Файлы, которые представляют стройные компоненты для создания веб -приложений. Это особенное .svelte Расширение и без веб-стандартного синтаксиса, который я видел в руководствах, говорит мне, что мне понадобится дополнительная поддержка в моем редакторе, чтобы обрабатывать SVELTE. В блоге Svelte есть хорошая статья о Как настроить редактор для работы со SVELTE Анкет Обычно я работаю с VIM, либо VSCode, поэтому давайте установим оба этих редактора для работы с SVELTE.

Настройка VSCode для работы со Svelte

Для VSCode есть SVELTE-код плагин, который обеспечивает поддержку для .svelte Синтаксическое выделение, диагностика, автозаполнение и Много больше Анкет

Настройка VIM для работы со SVELTE

Для vim the Настройка статьи редактора не оказывает большой поддержки. Это в основном говорит вам изменить филетип .svelte файлы в HTML. После некоторого копания я нашел пару плагинов, которые сделают ваш Svelte опыт намного лучше в Vim и до стандартов VSCode:

  • vim-svelte который обеспечивает выделение синтаксиса и отступление к .svelte файлы
  • Coc-Svelte который обеспечивает продвинутую поддержку IDE, подобную стройной разработке, зацепив стенд LSP 2 Анкет Это расширение на coc.nvim Плагин автозаполнения (который оказался моим любимым плагином завершения для VIM).

Хорошо, теперь, когда у нас есть наши редакторы, давайте посмотрим на наш новый проект Svelte.

Положительность земли

Мы открываем Il-Pomodoro Папка внутри нашего редактора, и мы видим кучу файлов и папок:

  • А SRC Папка с исходным кодом для приложения Svelte Hello World
  • А public Папка, которая будет содержать наше веб -приложение после его составления и обработанного Svelte Compilerer
  • А Rollup.config.js который содержит конфигурацию для нашего Bundler ( Rollup ). Rollup – это ответственный за обработку наших файлов исходного кода, используя SVELTE, чтобы создать пакеты Dev и Prod, которые могут работать в браузере.

Очень интересная часть для новичка происходит внутри SRC Папка, так что это где мы посмотрим дальше. Эта папка содержит всего два файла:

  • App.svelte который является корневым компонентом для нашего приложения
  • main.js который содержит код начальной загрузки для инициализации нашего приложения

Файл, который выступает в качестве точки входа нашего приложения, – это main.js :

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

Что создает новую Svelte Приложение компонент и прикрепляет его к Документ. Тебе с одним опорой под названием Название Чья ценность Мир .

Давайте посмотрим на что Приложение точно:





    
Hello {name}!

    
Visit the Svelte tutorial to learn how to build Svelte apps.

Я понимаю! Таким образом, стройный компонент – это немного повторно используемого пользовательского интерфейса, который инкапсулирует разметку компонента (HTML), его поведение (JavaScript внутри A TAG) и его внешний вид (CSS внутри Tag). Прохладно! Это имеет смысл.

Если мы домой в разметку, мы можем понять, что мы видим в браузере, когда мы указываем на localhost: 5000. :


    
Hello {name}!

    
Visit the Svelte tutorial to learn how to build Svelte apps.

Опора имя передается в компонент на создании экземпляров, и он сохраняется в этом имя переменная:

Который затем распространяется на разметку компонента и отображается внутри H1 Тег, который мы видим в браузере. Прохладно! Немного странно, но знакомого Экспорт пусть имя Синтаксис должен быть Путь компонент SVELTE определяет свой API к внешнему миру как реквизиты .

Добавление заголовка

Давайте начнем возиться с чем -то простым, например, добавление заголовка для нашего первого представления о приложении и привязка его к некоторым данным. Начальный шаблон дает мне намек на то, как это сделать. Мне просто нужно добавить новую переменную в мой компонент, чтобы сдержать этот заголовок. Так как я не использую для имя Переменная в исходном шаблоне я просто заменим его:

И Обновление main.js Чтобы ввести название моего приложения:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        title: 'il Pomodoro'
    }
});

export default app;

Во второй мысль мне не нужно разоблачать эту переменную как опору. Мы не ожидаем для пользователей этого компонента, чтобы изменить этот заголовок, поэтому мы просто сохраним его как часть внутренних чисел компонента.

Давайте переписываем нашу компонент приложения, чтобы сделать это вместо этого:

И, наконец, я обновлю шаблон HTML, чтобы использовать Название вместо название :


  
{title}

Успешно справился!

Список задач

Потрясающий! Давайте продолжим создать очень простой список задач. Поскольку это похоже на совершенно отдельную ответственность, мы собираемся поставить его в свой компонент.

Я создаю новый файл Asklist.svelte Чтобы представить этот новый компонент и добавить некоторую разметку, так как можно меньше вещей, можно не так, когда я использую его из моего App.svelte :

I'm a list of tasks

Я добавляю это в App.svelte :





  
{title}

И … это не работает. Хм … что я делаю не так …

И Vscode, и браузер предупреждают меня о следующем:

'TaskList' is not defined. svelte(missing-declaration)

Что говорит мне две вещи:

  1. Моя настройка VIM не работает должным образом, потому что я не получаю ошибку внутри редактора (что-то для устранения неполадок позже), и
  2. Кажется, я забыл импортировать компонент!

Конечно! Поэтому я добавляю его в App.svelte составная часть:





  
{title}

И … Да!

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

И теперь мне нужно показать те на экран в списке. SVELTE имеет особый способ повторять перечисленные списки внутри шаблона: {#} Блок Анкет

Это работает так:

    
  {#each tasks as task}
    
  • {task}
    • 
  {/each}

Итак, мы повторяем каждый Задача В списке Задачи и поместите его в список списка li элемент. Мы также удаляем точки из списка, потому что они выглядят ужасно:

И это то, что мы получаем:

Дин Дин Дин! Помодоро закончился. Должен идти! Мы продолжим с большим количеством SVELTE, список задач Interactife и Timer Pomodoro очень скоро.

Ищете исходный код для приложения Pomodoro?

Смотрите не больше! Вы можете найти его на GitHub готов быть клонирован и наслаждаться, или на СВОВНАЯ РЕПАСА Где вы можете потираться с ним сразу.

Некоторые отражения Уже

Потрясающий! Это был быстрый способ начать с Svelte. Вот мои впечатления до сих пор:

  • При первом контакте чувствует себя очень удобными веб-стандартами, и все работает, как вы ожидаете, что они будут работать. Принцип наименьшего удивления очень хорошо применим к стр.
  • Мне понравилась плоская структура компонента SVELTE, а также, как он разделяет компонент в HTML Markup, JavaScript (

Оригинал: “https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph”

  • Svelte.dev действительно потрясающе.

    • Интерактивный учебник Имеет шаг за шагом введение, которое берет вас за счет всех функций и важных концепций SVELTE.
    • Svelte Playground Это действительно круто, это позволяет вам возиться со стройным созданием многопрофильных приложений, сохранять их и делиться ими со своими друзьями и коллегами.
    • Dev Docs действительно хороши Кроме того, очень понимают и с множеством примеров. Добавьте их и использовать в качестве ссылки по мере необходимости.
    • Все вышеперечисленное предоставляет замечательный первый контакт с Svelte Что очень ценится, когда вы впервые прыгаете в новую экосистему.
  • Способ начать новый проект был немного странным. Я привык ко всем рамкам населения, имеющим CLI, и было слегка запутанным использовать npx degit и т. Д... Чтобы создать новый проект. Но после первых 5 секунд путаницы я просто пробежал команду и продолжал свою жизнь.
  • Мое первое впечатление с поддержкой текстового редактора не было отличным Например, VSCode не предложил мне завершение операторов в штушке Svelte, который я бы ожидал работать (например, позволяя мне фильтровать задачи ). В кратком времени я экспериментировал с Svelte, я не работал правильно настроек Vim.

  • Использование самого Svelte является действительно хорошим опытом .

    • При первом контакте чувствует себя очень удобными веб-стандартами, и все работает, как вы ожидаете, что они будут работать. Принцип наименьшего удивления очень хорошо применим к стр.
    • Мне понравилась плоская структура компонента SVELTE, а также, как он разделяет компонент в HTML Markup, JavaScript (

Оригинал: “https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph”

Читайте ещё по теме: