Статьи

6 обязательных пакетов метеоров для (почти) каждого проекта

Ноябрь 3, 2018

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

Но, конечно, с большим выбором приходит парадокс выбора. Может быть сложно понять, какие пакеты могут пригодиться.

Вот краткий обзор того, что я считаю несколькими наиболее полезными:

1. Железный Маршрутизатор

Вопрос, который я получил несколько раз от начинающих разработчиков: «Как мне создать многостраничное приложение с Meteor?»

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

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

  1. Подавляющее большинство приложений Meteor каким-либо образом использует маршрутизацию.
  2. Для обработки этой маршрутизации лучше всего подходит пакет Iron Router.

Iron Router — это все — дружественный, глубокий и хорошо поддерживаемый — вы можете добавить его в проект с помощью следующей команды: 

meteor add iron:router

После установки создайте маршрут внутри файла JavaScript: 

 this.route('about');

Затем создайте шаблон с тем же именем: 

 <template name="about">
    <h1>About</h1>
</template>

Теперь вы сможете посетить путь http: // localhost: 3000 / about и увидеть шаблон «about».

Это, однако, очень простой пример маршрутизации. Для более глубокого ознакомления посмотрите это видео, которое я сделал для Learnable .

2. Collection2

Большинство приложений Meteor каким-то образом взаимодействуют с базой данных. Однако по умолчанию вам придется вручную проверять данные, которые пользователи вставляют, редактируют и удаляют из базы данных.

Collection2 помогает в этом процессе, расширяя функциональные возможности Meteor, позволяя ему «предоставлять поддержку для определения схемы и последующей проверки по этой схеме при вставке и обновлении». Например, вы можете сделать так, чтобы коллекция «Книги» имела поле titlelastCheckedOut

Вот пример схемы: 

 var Schemas = {};

Schemas.Book = new SimpleSchema({
    title: {
        type: String,
        label: "Title",
        max: 200
    },
    author: {
        type: String,
        label: "Author"
    },
    copies: {
        type: Number,
        label: "Number of copies",
        min: 0
    },
    lastCheckedOut: {
        type: Date,
        label: "Last date this book was checked out",
        optional: true
    },
    summary: {
        type: String,
        label: "Brief summary",
        optional: true,
        max: 1000
    }
});

Чтобы добавить этот пакет в проект, напишите следующую команду: 

 meteor add aldeed:collection2

Но чтобы увидеть весь спектр возможностей Collection2, обязательно ознакомьтесь с официальной документацией .

3. Кадира

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

Чтобы справиться с этой проблемой, Кадира . Это инструмент мониторинга производительности, похожий на New Relic. Вы регистрируете учетную запись в Интернете, добавляете пакет в проект Meteor, а затем через веб-интерфейс вы получаете представление о различных узких местах производительности и других вопросах, которые следует учитывать.

Вы можете добавить Kadira в свой проект с помощью следующей команды: 

 meteor add meteorhacks:kadira

Если вы не знаете, с чего начать, когда дело доходит до мониторинга производительности, я бы посоветовал вам воспользоваться Bulletproof Meteor — интерактивным курсом, разработанным создателями Kadira, который углубляется в эту конкретную тему.

4. Спиннер

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

Чтобы добавить Spinner в ваш проект, используйте эту команду: 

 meteor add sacha:spin

Затем используйте шаблон «spinner» всякий раз, когда его нужно использовать: 

 {{> spinner}}

Вы также можете настроить его с помощью ряда опций: 

 Meteor.Spinner.options = {
    lines: 13, // The number of lines to draw
    length: 10, // The length of each line
    width: 5, // The line thickness
    radius: 15, // The radius of the inner circle
    corners: 0.7, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#fff', // #rgb or #rrggbb
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: true, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
};

Самый простой способ использовать пакет Spinner — это интегрировать его с пакетом Iron Router .

5. Момент

Moment.js позволяет легко анализировать, проверять, манипулировать и отображать даты в JavaScript, а установка пакета Moment для Meteor — самый быстрый способ начать работу.

Чтобы установить пакет, используйте следующую команду: 

 meteor add mrt:moment

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

6. НПМ

Meteor построен поверх Node, а сам Node имеет множество пакетов, доступных через NPM. Чтобы использовать эти пакеты, самый простой способ — установить пакет NPM: 

 meteor add meteorhacks:npm

Файл packages.json 

 {
  "redis": "0.8.2",
  "github": "0.1.8"
}

Затем можно использовать функцию npmRequire 

 var Github = Meteor.npmRequire('github');

Вам нужно будет использовать этот код только на сервере (он не будет работать на клиенте), и если вы столкнетесь с проблемой, вероятно, это связано с асинхронной природой большинства пакетов NPM , но это тем не менее быстрый и простой способ получить еще больше «бесплатных» функций для ваших творений.

Вывод

Следует признать, что немного неискренне утверждать, что небольшая группа пакетов Meteor является «лучшей», поскольку на самом деле ценность пакета определяется его уместностью в определенной ситуации. Тем не менее, эти опции являются одними из наиболее подходящих доступных пакетов, и если вы не проверили ни один из них, я бы посоветовал вам сделать именно это.

37
Share: