Веб фреймворк Meteor и Electron — в чём разница между ними?
Meteor.js и Electron – кроссплатформенные фреймворки для разработки приложений на JavaScript, Node, HTML и CSS. Я попытался выяснить, какой из этих веб-фреймворков лучший для написания десктопных приложений.
Веб-фреймворк Meteor

Meteor — веб фреймворк, который предназначен для создания Javascript-приложений . Для этого фреймворк нужно установить на компьютер и работать с проектами через команды. Он включает в себя API , инструменты разработки, пакеты из Node.js , а также базовую поддержку Javascript-сообщества .
Чтобы начать работать с Meteor , перейдите на официальный сайт фреймворка и установить его на ПК ( есть версии для Windows , Mac или Linux ). Затем нужно создать приложение при помощи команды meteor create myapp и запустить meteor. После чего будет запущен локальный сервер для разработки. Если вам нужно больше подробностей, ознакомьтесь с руководством Meteor.
В состав Meteor входит библиотека пакетов Atmosphere , в которой есть всё необходимое для работы с фреймворком. Meteor также позволяет использовать npm . Есть вероятность, что уже в скором будущем пакеты будут переведены на npm . Готовые Meteor-приложения также можно перевести в библиотеки, чтобы использовать их внутри других проектов.
Так как Meteor создает приложения на базе Node , вам потребуется хостинг Node . Лучший хостинг для Meteor js — Galaxy , основанный на Amazon Web Services ( AWS ). Использование этого хостинга упрощает процесс запуска.
Galaxy позволяет вести логи, собирать аналитику, мониторить, обновлять и постоянно интегрировать что-то новое, переносить проекты, а также пользоваться специальными инструментами.
Создаваемое вами приложение также может быть адаптировано под Android или iOS . Для этого понадобятся дополнительные настройки и инструменты. Но добавить их достаточно просто, а для тестирования можно использовать эмуляторы. Meteor для Windows не поддерживает мобильные сборки ( билды ). Эта способность есть у Cordova, который является фреймворком, преобразующим веб-языки в мобильные приложения.
На сайте Meteor js Windows сказано, что он позволяет разрабатывать десктопные приложения. Но в действительности это не так.
Meteor подходит для создания того, что запускается на сервере, и работает в браузере или на iOS/Android . Он представляет собой фреймворк, оборудованный модулями и интерфейсами.
Другие фреймворки ( например, Ember ), предназначены только для front-end разработки. Meteor поддерживает интеграцию и применение большинства популярных Javascript-библиотек и фреймворков ( Angular и React ).
Meteor js изначально подготовлен к интеграции с MongoDB на серверной стороне и MiniMongo на стороне клиента. Здесь довольно просто создать набор данных и начать использовать их в базе.
Electron

Electron предназначен для создания кроссплатформенных приложений, работающих как десктопные. Здесь разработка также происходит на JavaScript , HTML , CSS и с использованием различных Node-библиотек . Но создаваемое приложение компилируется в нативные программы для Windows , Linux и Mac . Как раз этой функции не хватает в Meteor .
Electron был разработан командой Github специально для редактора Atom , и с того времени используется для системы лайков в Microsoft и Facebook .
Интерфейс контейнера управляется с помощью Chromium и использует сервер Node.JS для вывода приложения внутри контейнера. Это автономный веб-сервер, работающий во фрейме, который не сильно отличается от вкладки в браузере Chrome .
Данный фреймворк позволяет использовать React , Angular или библиотеки Node . Но здесь не придётся запускать PHP , Ruby или Java .
За счёт Chromium создаваемые приложения осуществляют доступ к определенным функциям операционной системой, будь то диалоговые окна, меню или оповещения. Приложения для Windows можно упаковать и выполнять при помощи установщика. У вас будет доступ к файловой системе и возможность хранить данные различными способами.
Если хотите увидеть Electron в действии, то вы уже делаете это. Многие приложения основываются на этом фреймворке: Slack , Visual Studio Code , Nylas N1 , Brave Browser и редактор Atom .

Что касается приложений под Mac , то вам понадобится версия операционной системы не ниже 10.9 , 64bit . В случае с Windows потребуется Windows 7 или выше, 32bit или 64bit ( но не версии ARM ). Ситуация с Linux зависит от библиотек, но с точностью можно сказать, что приложения будут работать на Ubuntu 12.04 ( и выше ), Fedora 21 и Debian 8 .
Для хранения данных предусмотрено множество вариантов. Самый простой – LocalStorage . Но его может оказаться недостаточно, так как объём исчисляется в мегабайтах. Следующим по счёту JSON-хранилищем , которое удобно использовать для настроек и состояний называется electron-json-storage. Ещё можно использовать Pouchdb, но доводилось слышать много жалоб на производительность этой СУБД, если код насчитывает свыше 50 тысяч строк.
Идеальным вариантом будет IndexedDB . Для работы с ней есть различные инструменты и API , вроде Dexie.js . Здесь даже есть локальные хранилища для БД, вроде NeDB.
Electron компилирует десктопные приложения под Windows , Linux и Mac . Meteor js обучение показало, что он создает веб-приложения с возможностью адаптации под iOS и Android с помощью Cordova .
Возникает очевидный вопрос: могу ли я создать Meteor-приложение , но запустить его как контейнер Electron ? Ответ – да!
Загвоздка в том, что вряд ли для этого существует удобный способ. Есть много разных методов. Лучше начать изучать этот вопрос с форумов Meteor . Также можно обратиться к Electrometeor – проекту для запуска Meteor в Electron . Но учтите, что этой утилите уже несколько лет. Я не знаю, работает ли она с последними версиями Meteor .
Я бы и сам хотел попробовать скомбинировать два этих фреймворка. Результатом такого слияния должно стать приложение, которое будет работать в веб, компилироваться под iOS и Android , а также работать на всех десктопных операционных системах. При этом все варианты реализации будут основываться на одной и той же базе исходного кода.
Конкурентов Electron не так и много. Среди них можно выделить NW.js ( прежнее название «node-webkit» ). Оба фреймворка построены на движке V8 Chromium JS , но Electron лучше с точки зрения функционала.
Есть и другие способы скомпилировать создаваемые приложения под несколько платформ, но Electron лучше всего подходит для работы с HTML , JS , CSS и Node . Xamarin, к примеру, делает всё то же самое, но на C# .
Сильнейшим конкурентом Meteor js Windows считается Express – фреймворк также основанный на Node.js . В дополнение к Express можно использовать Feathers , который добавляет новые модули и функции для разработки приложений в режиме реального времени.
Meteor – фреймворк для разработки, тестирования, профилирования, запуска, обновления и мониторинга полноценных веб-приложений. С помощью Cordova можно адаптировать любой проект под iOS или Android . После этого можно превратить приложение в полноценную десктопную программу, работающую в Windows , Mac и Linux .
Учтите, что Meteor подходит только для работы с маленькими приложениями.
Electron можно использовать, если необходимо разрабатывать кроссплатформенные десктопные приложения, работающие как офлайн, так и онлайн. При этом желательно чтобы разработка велась на JavaScript , HTML , CSS , Node с использованием библиотек npm . Electron является простым Node-сервером , работающим в контейнере Chromium на движке J avaScript V8 . Теоретически, в нём можно запускать любые старые Node-приложения , независимо от того, разработано оно на Meteor js или нет.
Если вы разработали приложение при помощи Electron , а затем хотите запустить его в веб, то придётся разобрать его до базового Node-проекта без использования API Electron . Проще будет сначала создать веб-приложение, а затем думать о том, как скомпилировать его для работы на настольных ПК.
Надеюсь, сегодняшняя статья поможет вам определиться, какой фреймворк использовать в следующем проекте – Electron или Meteor js . Я рекомендую познакомиться с обоими фреймворками.
Вадим Дворников автор-переводчик статьи « What’s the Difference between Meteor and Electron? »
Мажорный MeteorJS 2.0: HMR, Cloud и другое
Свершилось! Команда Meteor выпустила версию 2.0, которая была в разработке последние пол года. Посмотрим, что нового внутри и снаружи. Так же поделюсь полезными материалами по теме.
Кратко о том, что такое Meteor:
Meteor это full-stack JavaScript фреймворк, включающий практически все, что нужно для разработки полноценного веб приложения:
— zero-config сборщик, умеющий работать с JS/TS, минифицировать, разделять сборки для старых и новых браузеров, транспилировать код до ESNext;
— возможность подключить на выбор React, Vue, Angular, Svelte, Blaze — любой инструмент, подходящий вам для разработки клиентской части приложения;
— готовый транспортный слой(DDP) поверх WebSocket, и вызов серверных функций через RPC;
— встроенная поддержка MongoDB, но можно работать и с другими бд;
— Meteor построен на основе NodeJS, поэтому доступно все то, что есть в NPM.
Что нового в 2.0
Hot Module Replacement (HMR)
Meteor умеет пересобирать сборки(клиентскую и серверную), если обнаруживает изменения в коде. Однако, это может занимать достаточно много времени, если размер кодовой базы большой.
HMR позволяет быстрее увидеть изменения, так как подменяет JavaScript модули «на лету» не дожидаясь окончательной сборки приложения. При этом не нужно обновлять страницу или перезапускать приложение.
React компоненты обновляются автоматически, используя React Fast Refresh. Для других библиотек необходимо использовать сторонние решения. Поддержка Blaze (ui библиотека от Meteor) в процессе разработки.
Meteor Cloud, Free tier
В последнее время команда Метеора нацелена на объединение различных продуктов компании, чтобы они выглядели как часть одного целого. Хостинг Galaxy Hosting, менеджер пакетов Atmosphere и мониторинг производительности Meteor APM теперь стали частью одной семьи Meteor Cloud. На блоге компании есть статья, подробно описывающая приход к Meteor Cloud.
Куда более значимым изменением стало возвращение бесплатного хостинга!
Теперь можно деплоить приложение одной командой:
meteor deploy habr.meteorapp.com --free
А если вам нужна бесплатная MongoDB, то добавляем —mongo
meteor deploy habr.meteorapp.com --free --mongo
Бесплатный хостинг отлично подходит для:
- демонстрации ваших пакетов: теперь не нужны отдельные хостинги, а залить/обновить демо дело одной команды;
- запуска MVP: если у вас маленькие нагрузки и объемы, то можно временно разместиться на бесплатном плане. В дальнейшем можно переключиться на платный или сменить площадку.
Остальное
- В версии 1.12 обновили TypeScript до 4.1.2 с поддержкой декораторов. Напомню, что метеор сам умеет собирать typescript проекты. Вам нужен tsconfig только для вашей IDE!(иногда нужно изменить поведение сборщика, например aliases, это можно сделать с помощью babelrc, так как под капотом метеор использует babel)
- Пакет http считается устаревшим. Используйте fetch.
- Можно задавать поля и БД, которые автоматически будут пушиться на клиент после авторизации. PR. Вместо
// Server Meteor.publish('userData', function () < if (this.userId) < return Meteor.users.find(< _id: this.userId >, < fields: < other: 1, things: 1 >>); > this.ready(); >); // Client Meteor.subscribe('userData');
Достаточно
// Server Accounts.setDefaultPublishFields(< other: 1, things: 1>); // + username:1,profile:1,emails:1 если нужно
Что дальше?
Статьи и ссылки
Why choose Meteor (or not) for your next project? (eng)
После публикации результатов StateOfJS 2020(кстати, сам сайт написан на метеор-е) внутри комьюнити метеор-а завязалась дискуссия насчет позиции Meteor в рамках опроса. Кто-то увидел крах метеора, кто-то — надежду. Один из активных участников форума Jan Küster написал хорошую статью по поводу того, кому подходит метеор.
Добавляем поддержку PWA
Репозиторий содержит step-by-step инструкции по подготовке и настройке вашего метеор проекта. Тема PWA достаточно популярна сейчас, поэтому обязательно посмотрите. Из плюсов выделю поддержку Hot Code Push (читай «непрерывное обновление приложения»), возможность создать приложение для Windows/OSx/Linux без electron-a.
Awesome Meteor List
Данный топик на форуме содержит список полезных ссылок. Инструменты, статьи, книги, компании, использующие Meteor.
Присоединяйтесь к сообществу метеора в Slack (eng) или Telegram (рус).
Meteor (веб-фреймворк) — Meteor (web framework)
Meteor, или MeteorJS, является бесплатным и открытым исходным кодом изоморфный JavaScript веб-фреймворк, написанный с использованием Node.js. Meteor позволяет быстро создавать прототипы и создавать кроссплатформенный код (Android, iOS, Web ). Он интегрируется с MongoDB и использует протокол распределенных данных и шаблон публикации-подписки для автоматического распространения изменений данных на клиентов, не требуя от разработчика написания какого-либо кода синхронизации.. На клиенте Meteor можно использовать с любой популярной интерфейсной JS-средой, Vue, React, Svelte, Angular или Пламя.
Meteor разработан Meteor Software. Стартап был создан Y Combinator и в июле 2012 года получил 11,2 миллиона долларов финансирования от Andreessen Horowitz. Meteor привлекла дополнительные 20 миллионов долларов в рамках серии B от Matrix Partners, Andreessen Horowitz и Trinity. Предприятия. Компания намерена стать прибыльной, предлагая Galaxy, среду хостинга корпоративного уровня для приложений Meteor.
- 1 История
- 2 Протокол распределенных данных
- 3 Книги
- 4 Пакеты и инструменты
- 5 Ссылки
- 6 Внешние ссылки
История
Meteor находился в разработке около 8 месяцев и первоначально был выпущен в декабре 2011 года под названием Skybreak. К апрелю 2012 года фреймворк был переименован в Meteor и официально запущен. В течение следующих нескольких месяцев, благодаря крупным инвестициям Андреессена Горовица и поддержке видных деятелей в мире стартапов, Meteor неуклонно увеличивал свою пользовательскую базу и стал более широко использоваться в производственных приложениях и веб-сайтах.
В частности, после получения крупных венчурного капитала в рамках раунда финансирования серии B, Meteor приобрела и интегрировала несколько других стартапов в свой основной продукт. Приобретения включали FathomDB, запуск облачной базы данных, Galaxy, облачную платформу для работы и управления приложениями Meteor, и Kadira, решение для мониторинга производительности. Meteor успешно монетизировала свою базу пользователей: в 2016 году Meteor превзошла свои собственные цели по выручке на 30%, предложив веб-хостинг для приложений Meteor через Galaxy.
С 2016 года начала работать Meteor Development Group (организация с открытым исходным кодом, на которой работает Meteor). работают над новым серверным уровнем, основанным на GraphQL, чтобы постепенно заменить свою систему pub / sub, в значительной степени изолированную во всей экосистеме node.js: инфраструктуру Apollo.
В октябре 2019 года платформа с открытым исходным кодом Meteor.js и продукты для хостинга Galaxy были приобретены Tiny Capital и переименованы в Meteor Software.
Протокол распределенных данных
Протокол распределенных данных (или DDP ) — это протокол клиентского сервера для запросов и обновления база данных на стороне сервера и для синхронизации таких обновлений между клиентами. Он использует шаблон обмена сообщениями публикация-подписка. Он был создан для использования фреймворком Meteor JavaScript. Спецификация DDP находится на GitHub.
Книги
- Коулман, Том; Грейф, Саша — Откройте для себя метеор (2014)
- Хоххаус, Стефан; Шибель, Мануэль — Метеор в действии (2014)
- Мюнс, Филипп — Аудит приложений Meteor (2016)
- Страк, Исаак — Начало работы с фреймворком Meteor.js JavaScript (2012)
- Сусирипала, Арунода — Пуленепробиваемый метеор (2014)
- Титаренко, Дэвид; Робинсон, Джош; Грей, Аарон — Знакомство с Meteor (2015)
- Сусирипала, Арунода — Meteor Explained — A Journey Into Meteor’s Reactivity (2014)
- Turnbull, David — Your First Meteor Application: A Complete Beginner’s Guide to the Meteor JavaScript Framework (2014)
Пакеты и инструменты
- Meteor Toys — инструменты разработки в приложении
- Meteor Candy — панель администратора в приложении
- InjectDetect — обнаружение атак путем внедрения в базу данных
- Vulcan.js — стек React / GraphQL, построенный на основе Meteor
- Apollo — сервер GraphQL с поддержкой Meteor
Ссылки
Внешние ссылки
- Бесплатные и портал программного обеспечения с открытым исходным кодом
- Официальный сайт
Разбираемся с Meteor.js
Как я стал разработчиком веб приложений — в стиле Meteor
Что должен знать веб-разработчик, собирающийся создавать приложения на Meteor? Ниже приведен список языков, фреймворков, библиотек, пакетов и многое другое 😉
Списки в статье специально даны в определённом порядке, если не указано иное. Эта статья не объясняет, почему вы должны изучать ту или иную технологию (вы сами должны в этом разобраться). Её цель — дать быстрый обзор технологий, с которыми ежедневно имеет дело Meteor-разработчик.
Чтобы не блуждать в море новой информации, хорошо бы иметь под рукой карту, на которую можно взглянуть, чтобы узнать в какой точке пути вы находитесь.
Языки, библиотеки и фреймворки, трындец!
В конечном итоге вам нужно уметь понимать Meteor API. Изучение технологий, приведенных ниже, даст вам всё необходимое. Нет нужды становиться экспертом в каждой области, но нужно понимать структуру и терминологию каждой из них.
Обязательно
- Javascript — вначале JS?! Да, солдат, не задавай мне снова вопросов, а то я подыму тебя с вертухи!
- Shell (Terminal)
- HTML & CSS
- JSON
- MongoDB
- Handlebars
- Git и GitHub
- jQuery
- LESS и/или SASS
- Underscore и/или Lo-Dash
- Bootstrap
Опционально (изучайте при необходимости)
MeteorJS
Теперь, когда изучены все перечисленные технологии, вы достойны познать силу и великолепие Meteor!
Почему вам нужно изучить ВСЁ это перед тем, как прикасаться к Meteor? Потому что Meteor — это full-Stack платформа. Через Meteor вы управляете фронт-эндом, бек-эндом и всеми остальными эндами.
… Ладно, больше никаких вопросов, давайте узнаем ещё БОЛЬШЕ!
Пришло время становиться Meteor-задротом, читайте доки:
- Основная документация по API
- Подпроекты
Если подпроекты выглядят пугающе, не волнуйтесь. Ниже приведен необходимый минимум, который вам нужно знать:
Хорошие уроки и курсы по Meteor
Упорядочены по сложности и глубине. Уроки, курсы, книги и видео проведут вас по различным проектам Meteor. Это будет кульминацией всей статьи:
- Meteor’s official tutorial (бесплатно)
- Your First Meteor Application от David Turnbull (бесплатно)
- Meteor Walkthrough Videos от George McKnight (бесплатно)
- Meteor Cookbook от Abigail Watson
- Discover Meteor от Sacha Greif & Tom Coleman (от $ до $$) (прим. переводчика: есть бесплатная версия на русском языке)
- Meteor in Action от Manuel Schoebel & Stephan Hochhaus ($)
- 8 Days of Meteor от Josh Owens ($)
- Meteor Testing от Sam Hatoum ($)
- Meteor Club Master Bootcamp от Josh Owens ($$$)
- Meteor Club Testing Bootcamp от Josh Owens & Sam Hatoum ($$$)
- Bulletproof Meteor от Arunoda Susiripala (бесплатно или $$)
- Продвинутые курсы Evented Mind от Chris Mather ($$)
Пакеты Meteor (в произвольном порядке)
Да, для изучения осталось ещё много всего. У Метеора есть менеджер пакетов, который называется Atmosphere. Он позволяет сообществу создавать пакеты, которые глубоко интегрированы в платформу Meteor, они расширяют API, доступные для вас как для разработчика. Ниже приведен список из стандартных пакетов, которые вы найдёте почти в каждом серьёзном Meteor-приложении, поэтому их нужно знать:
| Название пакета | GitHub | Atmosphere | Сайт |
|---|---|---|---|
| accounts-password | github | atmosphere | сайт |
| useraccounts:core | github | atmosphere | сайт |
| reactive-var | atmosphere | сайт | |
| reactive-dict | atmosphere | ||
| iron:router | github | atmosphere | руководство сайт |
| zimme:iron-router-active | github | atmosphere | |
| zimme:iron-router-auth | github | atmosphere | |
| manuelschoebel:ms-seo | github | atmosphere | статья |
| dburles:collection-helpers | github | atmosphere | |
| matb33:collection-hooks | github | atmosphere | |
| reywood:publish-composite | github | atmosphere | сайт |
| ongoworks:security | github | atmosphere | |
| alanning:roles | github | atmosphere | сайт |
| aldeed:autoform | github | atmosphere | |
| aldeed:collection2 | github | atmosphere | |
| aldeed:simple-schema | github | atmosphere | |
| momentjs:moment | github | atmosphere | сайт |
| matteodem:easy-search | github | atmosphere | сайт |
| matteodem:server-session | github | atmosphere | |
| meteorhacks:kadira | github | atmosphere | сайт |
| meteorhacks:aggregate | github | atmosphere | |
| meteorhacks:fast-render | github | atmosphere | сайт |
| meteorhacks:subs-manager | github | atmosphere | |
| meteorhacks:unblock | github | atmosphere | |
| raix:handlebar-helpers | github | atmosphere | |
| yogiben:helpers | github | atmosphere | |
| zimme:collection-softremovable | github | atmosphere | |
| zimme:collection-timestampable | github | atmosphere | |
| u2622:persistent-session | github | atmosphere | |
| tmeasday:publish-counts | github | atmosphere | |
| percolatestudio:synced-cron | github | atmosphere | |
| dburles:factory | github | atmosphere | |
| anti:fake | github | atmosphere |
##Кроличья нора становится всё глубже…
Ух ты, вы должно быть упорные, раз дошли до этого места. Ладно, хотите взглянуть на мои суперсекретные списки?
Сервис-провайдеры
Когда вам нужно разместить ваше приложение онлайн, есть огромное количество сервис-провайдеров, доступных для разработчика. Ниже несколько из них, которые служат целям Meteor-сообщества (и делают отличную работу), поэтому я решил озвучить их названия:
- Kadira — отслеживание производительности
- Modulus — хостинг (используйте промо-код «Metpodcast», чтобы получить кредит в $25)
- Compose — хостинг MongoDB с Oplog
Блоги, видео, новости и всё остальное (в произвольном порядке)
Пойдём выпьем со мной чего-нибудь, что остудит нас после Meteor… Увидишь, мы будем не одни:
- Crater.io — агрегатор новостей
- Meteor Weekly — агрегатор новостей
- Meteor’s Official Blog — блог
- Josh Owens — блог
- Discover Meteor — блог
- The Meteor Chef — блог
- Differential — блог
- Gentlenode — блог
- MeteorHacks — блог
- Meteor Tips — блог
- PEM — блог
- Manuel Schoebel — блог
- Practical Meteor — блог
- Lukasz Kups — блог
- David Burles — блог
- The Meteor Podcast — подкаст
- Meteor Devshops — YouTube
- Josh Owens — YouTube
- George McKnight — YouTube
- Arunoda Susiripala — YouTube
- David Turnball — YouTube
- Sasi Kanth — YouTube
- Vianney Lecroart — Medium
- Space Camp — Medium
- Dominus — Medium
- Arunoda Susiripala — Medium
- Sacha Greif — Medium
- Paul van Zyl — Medium
Если я кого-то забыл, дайте мне знать на (@_benstr) или @joshowens.
Другие статьи вроде этой
- Best Learning Resources for Meteor.js от Cтефан Хочхаус (Stephan Hochhaus)
- Learn Meteor.js Properly, которую написал Ричард (Richard)