quasar что это за программа
Некоторое время назад (года два с половиной) чувак по имени Razvan Stoenescu собрал команду Vue-разрабов и начал пилить с ними свой фреймворк. Свечку не держал, но я твёрдо уверен что в первоначальном документе было что-то типа «Хотим свой фреймворк, чтобы в нём было вообще всё. Включая блэкджек и куртизанок». Довольно странно, что во многих материалах за прошедший год упоминается Quasar, но статья про него вышла всего одна и была приурочена к релизу 1.0, да ещё и оказалась переводом. Недавно я наконец распробовал этот чудесный фреймворк и с удовольствием поделюсь своими впечатлениями о нём.
Возможно, вы разделите мою точку зрения насчёт того документа. Судите сами: в текущем состоянии (v1.14.3) Quasar позволяет строить SPA-, SSR-, PWA-, Electron- и нативные мобильные приложения, а также делать браузерные плагины и пользоваться библиотекой компонентов на Material 2.0. И весь этот зоопарк строится на одной кодовой базе, что теоретически позволяет некий функционал реализовать одновременно под почти все возможные платформы и запросы. Всё это многообразие тщательно стандартизировано и задокументировано, чтобы сделать жизнь разработчика легче и сформировать непреодолимую привязанность к проекту. На гитхабе у них 16к звёзд, что вдвое меньше чем у Nuxt, но поддержка комьюнити у Quasar несоизмеримо больше. На чём строится эта любовь?
1. Это всё ещё Vue
У Vue тоже большая поддержка сообщества благодаря удобной структуре с крутыми плагинами вроде vuex, быстроте и обалденной документации, решающей все возможные проблемы на этапе обучения. По данным w3techs, Vue уже оставил позади React и Angular в метриках top-100K, top-1M и overall, а в топ-1K и 10K приближается к реакту. Тенденция выглядит так:
Quasar никак не ограничивает возможности Vue, в нём нет навязанных паттернов и он не тянет за собой тонны зависимостей, по крайней мере поначалу — по умолчанию модули устанавливаются по мере необходимости, но при желании можно загрузить всё и сразу.
Кроме того, команда разработки активно работает над версией Quasar, предназначенной для использования с относительно новым Vue 3:
The plan
Our main focus at the moment is shipping Quasar v2 with Vue v3.
The plan is to not introduce any breaking changes, unless forced by the vue 3 / vue-router 4 architectures.
Affected Quasar packages: «quasar», «@quasar/app».
Rough schedule
First beta: «quasar» v2.0.0-beta.1 & «@quasar/app» v3.0.0-beta.1 — 2020/10/31
Stable releases: «quasar» v2.0.0 & «@quasar/app» v3.0.0 — 2020/11/30
The current progress is in line with holding the above schedule.
2. Он закрывает основные потребности разработчиков
Что-то модно, что-то вышло из моды, а что-то вечно. Сейчас модно делать PWA и SSR, нативные приложения тоже не теряют популярность. Flutter растёт, но Quasar предлагает альтернативу в виде webview через фреймворки Capacitor или Cordova. Всё это доступно из коробки и не требует вообще никаких танцев с бубном. Более того, почти всегда нужный модуль можно подключить уже в процессе разработки, если вас вдруг попросили собрать демку под мобильные устройста или электрон. Это сильная сторона определяет Quasar — кроссплатформенная разработка здесь проходит без головной боли.
3. Разумеется, он избавляет от бойлерплейта
Как и любой другой большой фреймворк, Quasar позволяет минимальный функционал, используя минимальное количество кода. И это не обязательно должен быть набивший оскомину todo-list из видео выше, благодаря богатой библиотеке UI-компонентов, можно собирать довольно сложные интерфейсы, не написав ни строчки. В доках есть генераторы layout-ов, разметки с flexbox, цветовой палитры и, конечно, примеры.
4. Документация — огонь
And that’s a fact. В лучших традициях идеальной документации Vue, доки Quasar содержат подробную информацию по всему функционалу, с примерами и рекомендациями. Кроме того, даже для некоторых базовых понятия (вроде принципа работы flexbox) выделены отдельные главы и разделы, что может быть избыточно, но всё равно круто. Вот бы каждому фреймворку такую документацию.
5. Большое, пассионарное сообщество
Многие крупные проекты ограничиваются ведением репозитория и, максимум, твиттера. Они принимают вопросы и предложения через issues, многие из которых часто остаются без внимания. У Quasar есть достаточно активный форум и discord-сервер с Q&A, рекомендациями и обсуждениями всех подпроектов. В проект контрибьютит более 350 человек, спонсоров более 200. Наглядно на stackshare:
Кстати, сравнивать его с Nuxt считается не очень корректным, зато в разработке модуль с Nuxt-функционалом. Блекджек и куртизанки, помните?
Заключение
По восторженному тону видно, что и я тоже с удовольствием подсел на Quasar — в основном из-за очень быстрого прототипирования и минимума геморроя, привычного для многих менее крупных фреймворков. При этом он не старается конкурировать с ними — он поглощает их, расширяясь, но не становясь от этого большой помойкой. Это показывает огромное количество сил и любви, которое вкладывают в фреймворк разработчики и комьюнити. Попробуйте Quasar, если ещё не работали с ним. А если пробовали больше года назад и разочаровались — дайте ему второй шанс, за это время была проведена колоссальная работа над ошибками.
На правах рекламы
Эпично! Мощнейшие виртуальные серверы на базе новейших процессоров AMD EPYC для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.
Quasar Framework — универсальный Vue-фреймворк
Создаем web-приложение и мобильное приложение из одного исходного кода.
Несколько дней назад я был занят поиском фреймворка под библиотеку Vue.js. Такого фреймворка, на котором можно было бы создавать универсальный код — как для веб-приложения, так и для мобильного приложения ( под iOS и под Android-устройства одновременно).
Моей основной целью было свести к минимуму время для написания кода приложения, которое одинаково хорошо работало бы на мобильных устройствах и в браузерах.
Я просмотрел множество ресурсов с описанием профессиональных инструментов подобного рода. Во многих источниках на первом месте фигурировал фреймворк Weex.
Однако мое внимание привлек другой фреймворк — Quasar Framework, возможности которого мне показались много большими, нежели у Weex.
Вот почему я решил пожертвовать время на написание статьи о Quasar Framework. Целью данного обзора является создание приложения, которое могло бы одинаково работать на различных устройствах.
Мне было интересно посмотреть, как приложение, собранное из одного исходного кода, будет работать в качестве мобильного приложения как под iOS, так и под Android.
Вопрос — почему Cordova работает под Quasar Framework без каких-либо проблем? Секрет заключается в отлично написанной оболочке фреймворка Quasar Framework. Данная оболочка отвечает за генерирование Cordova-приложения из исходных файлов проекта Quasar Framework.
Ниже представлен пример готового приложения, которое одинаково работает как в обычном веб-браузере, так и под Android-устройством и iOS-устройством:
Quasar Framework — создание веб-приложения
Для начала давайте создадим обычное веб-приложение на Vue.js, используя Quasar Framework.
Данный фреймворк имеет в своем составе консольную утилиту quasar-cli для быстрого развертывания проекта на Quasar Framework.
Чтобы воспользоваться этой утилитой, ее необходимо первоначально установить ( глобально) как обычный npm-пакет:
Теперь можно развернуть новый проект на Quasar Framework под именем my-project:
Затем переходим в директорию проекта и устанавливаем все зависимости из файла package.json:
Примерный вид сгенерированного проекта представлен ниже:
Quasar Framework поддерживает два режима работы.
Debug mode — режим отладки Vue-приложения с поддержкой hot reload. Для запуска проекта в этом режиме нужно указать ключ dev в консольной утилите quasar.
Помимо этого, Quasar Framework поддерживает две темы оформления для создаваемого приложения — тема оформления Material Design и тема оформления iOS.
Для запуска проекта в режиме отладки с поддержкой Material Design запускаем команду:
… что одинаково по результату. Команда quasar dev является сокращением команды quasar dev mat.
Для запуска проекта в режиме отладки с поддержкой темы оформления iOS нужна команда:
Вид проекта в браузере в момент первоначальной инициализации:
Release mode — режим сборки приложения. В этом режиме в папку /dist производится генерация готового кода приложения. Фреймворк оптимизирует код приложения и соединяет все части в единое целое. Производится минификация кода, проверка вендорных префиксов, очистка кэша браузера и многие другие вещи.
Команда для запуска сборки готового приложения:
Также можно запустить сборку приложения с указанием определенной темы оформления:
В соответствии с официальной документацией фреймворка Quasar Framework, можно локально запускать сервер статических файлов прямо из директории.
При этом в браузере будут автоматически отображаться все изменения в текущем проекте.
Для запуска в этом режиме нужно выполнить команду:
Можно также запустить команду с указанием относительного или абсолютного пути ( три варианта на выбор — результат одинаковый получится):
Quasar Play App
При разработке проекта на Quasar Framework можно воспользоваться мобильным приложением Quasar Play. Цель создания этого приложения — возможность тестирования проекта непосредственно на мобильном устройстве.
Приложение создано под Android и доступно для установки с Google Play. Преимущество использования Quasar Play заключается в том, что можно тестировать создаваемое приложение на “настоящем” устройстве.
Для запуска проекта с возможностью тестирования в Quasar Play нужно ввести команду:
После установки приложения Quasar Play на мобильном устройстве нужно его запустить. Затем сканировать QR-код, который сгенерируется в терминале командой quasar dev ( см. скриншот выше).
Тем самым приложение Quasar Play получает ссылку на запущенный сервер проекта. Результатом является отображение разрабатываемого приложения прямо на физическом Android-устройстве.
Можно ввести ссылку на работающий сервер проекта вручную, но это не так удобно.
Создание приложения под iOS и Android
В данном разделе необходимо акцентировать внимание на наиболее важных моментах разработки приложения под Android и iOS.
Предполагается, что пакеты приложений Android Studio и Xcode уже установлены и правильным образом настроены на локальной машине, на которой производится разработка приложения.
За более подробной информацией можно обратиться на страницу официальной документации Quasar Framework — Cordova App Wrapper.
Затем при помощи команды:
… из текущего Quasar-проекта создается Cordova-приложение.
В дополнение к платформе Cordova крайне рекомендуется установить в проекте плагин Crosswalk WebView Cordova.
Цель данного плагина — предотвращение возможных проблем, связанных с ошибками поведения более старых версий Android-платформ.
Для установки плагина нужно перейти в директорию cordova текущего проекта:
… и установить плагин cordova-plugin-crosswalk-webview командой:
Затем добавляем в проект поддержку Android-платформы:
Quasar 1.0: новый полезный инструмент для Vue-разработчиков и не только для них
Автор материала, перевод которого мы публикуем сегодня, занимается работой над фреймворком Quasar. Это — полнофункциональный расширяемый опенсорсный инструмент для разработки современных приложений различного назначения. Он построен на базе популярного фронтенд-фреймворка Vue.js и использует возможности Node.js, Webpack и Babel. Совсем недавно, в начале июля сего года, вышел первый стабильный релиз Quasar.
Предыстория
Прежде чем я приступлю к разговору о возможностях Quasar, мне хотелось бы в двух словах рассказать об истории возникновения этого фреймворка.
Несколько лет назад я, как, полагаю, многие из тех, кто это читает, работал в корпоративной среде. В определённый момент я устал от всего того, что сопровождает такую работу.
Мне не давали покоя неприятности, вызванные конфликтующими корпоративными инструментами. Мне надоело сражаться с несовместимостями, возникающими при их взаимодействии. Мне страшно хотелось вести простую жизнь, в которой я мог бы задействовать свои знания в области программирования и создать что-то значащее, что-то приносящее внутреннее удовлетворение. Что-то такое, что способно сделать мир лучше.
В 2015 году я использовал массу инструментов для создания проектов различных типов. Это были приложения для iOS и для Android. Это были веб-приложения, веб-сайты и PWA, настольные приложения для Windows и для macOS.
Каждая разновидность приложений требует уникального набора инструментов. Эти инструменты используются для проектирования интерфейсов, для написания кода, для подготовки проектов к публикации. Я видел эту реальность, но не мог избавиться от мечты об одном универсальном инструменте, способном заменить все остальные.
Я хотел найти некий единственный фреймворк, который позволил бы разрешить все сложности разработки приложений для разных платформ. Такой, с помощью которого можно было бы создавать разные виды приложений, которые основывались бы на единой кодовой базе.
Я не смог найти подобного фантастического инструмента и решил создать его своими силами.
Это была колоссальная по своим масштабам задача. Я начинал работу с нуля и понимал, что мне нужна основа в виде мощного базового фреймворка, возможности которого могут быть расширены и улучшены для создания той универсальной системы, которую я нарисовал в своём воображении.
В это время получил известность Vue.js. После того, как я исследовал структуру этого фреймворка, узнал о том, как создавать на его основе приложения, как расширять его возможности, я решил, что он станет отличной основой для того нового фреймворка, который я планировал создать. Это, кроме прочего, означало и серьёзную экономию времени на разработку.
Именно тогда и родился фреймворк Quasar.
В чём суть Quasar?
Фреймворк Quasar, на концептуальном уровне, представляет собой универсальный набор компонентов, которые используются для создания современных приложений. Среди таких компонентов, например, можно отметить диалоговые окна, кнопки, поля ввода, вкладки, панели, всплывающие подсказки, панели инструментов, значки уведомлений, инструменты для выбора даты, цвета, иконок. Это карточки, аватарки, баннеры, индикаторы загрузки. При этом в Quasar применяются как простые компоненты, вроде тех же кнопок, так и более сложные. Например, это поля для вывода сообщений чатов, это графики активности, таблицы, календари, видеопроигрыватели, WYSIWYG-редакторы, выдвижные панели, ленточные системы меню и многое другое.
Все эти компоненты основаны на Vue.js. Благодаря этому работа с ними покажется совершенно знакомой всем Vue-разработчикам, которые, совершенствуя свои проекты, ищут простую и расширяемую систему компонентов.
В только что вышедшей первой версии Quasar имеется 123 компонента. Это число постоянно растёт благодаря имеющимся в нём стандартным инструментам для создания пользовательских компонентов.
Quasar, кроме того, имеет встроенную систему создания продакшн-версий приложений. Работает это всё из командной строки.
После установки одной глобальной зависимости и создания проекта, для сборки приложений, нацеленных на поддерживаемые Quasar платформы, нужна буквально одна строчка кода. При этом приложения для iOS, Android, Windows, macOS, Linux, а также веб-приложения, создаются на основе единой кодовой базы.
Собственно говоря — вот команда, о которой идёт речь:
При работе с Quasar можно забыть о сложностях, связанных с Webpack и Babel, об алгоритме tree-shaking и о других способах оптимизации бандлов. Все эти вопросы автоматически решаются внутренними средствами фреймворка. При этом у того, кто использует Quasar, есть возможность вмешаться в работу его механизмов и настроить всё именно так, как ему нужно.
Доступ ко всем этим мощным возможностям оформлен с прицелом на упрощение и ускорение процесса разработки приложений с использованием Quasar.
Путь к первой версии Quasar
В ранние версии Quasar, после их выпуска, приходилось вносить много изменений. Часто это были изменения, ломающие совместимость. Это, уверен, не нравилось многим из первых пользователей фреймворка. Но это — необходимое зло, «болезнь роста», возникающая из-за итеративной природы разработки Quasar.
Версии с 0.13 и вплоть до 0.17 использовались для улучшения фреймворка. Начиная с версии 0.17 Quasar наконец обзавёлся подходящей структурой. Она помогла сформировать стабильную основу, способствующую росту и расширению фреймворка. При этом данная структура позволяла обходиться в будущем без глубоких изменений, влияющих на совместимость.
В этот момент мы приняли решение заморозить разработку и провести полный рефакторинг проекта для того, чтобы организовать и оптимизировать то, что уже было создано.
Обратите внимание на то, что выше я сказал «мы». Сделал я так из-за того, что к тому моменту я уже вполне осознал масштабность проекта и понял, что создать его в одиночку не смогу. В результате я приступил к формированию команды программистов для того, чтобы заниматься разработкой Quasar вместе с ними.
Сначала ко мне присоединился один программист. Потом — второй, третий. Так происходило до тех пор, пока в основной команде не оказалось 8 программистов. Сейчас в нашей команде столько же специалистов, сколько было после того, как она сформировалась. Это — опытные разработчики, они дополняют друг друга в плане имеющихся у них знаний и навыков.
Основную команду поддерживают добровольцы, которые занимаются поддержкой пользователей, документацией, работой со СМИ и прочими подобными делами. Кроме того, вокруг Quasar сложилось активное сообщество разработчиков. Члены этого сообщества обмениваются опытом, который помогает им всем профессионально расти. Всё это видится мне чем-то вроде «большой семьи» — группы людей, собранных вокруг общей цели и помогающих друг другу достигать новых горизонтов.
В частности, наш Discord-чат представляет собой оживлённое место, разговоры в котором, как кажется, не прекращаются никогда. Тут говорят о самых разных вещах. Например, разработчики охотно делятся советами по работе с системой.
Quasar 1.0 представляет собой проект, потребовавший от членов основной команды и добровольцев огромных затрат времени. С того момента, как мы решили заморозить ветку разработки одной из ранних версий, на работу над Quasar было затрачено более 4000 человеко-часов.
Кроме того, сообщество пользователей Quasar принимало активное участие в улучшении кода проекта. Этот процесс шёл в течение 5 месяцев. Сначала вышла открытая бета-версия продукта, потом вышел релиз-кандидат. Всё это дало нам возможность выпустить первую версию фреймворка, которая уже, так сказать, проверена в бою.
Выпуск Quasar v1 Stable — это важная веха на пути проекта. Но это — лишь первый шаг, лишь база для тех замечательных вещей, которые мы хотим реализовать в будущем.
Этот релиз был создан с учётом гибкости и расширяемости решения. Но у нас уже есть большая схема развития проекта, на которой видно направление будущего движения Quasar. В частности, в будущих версиях фреймворка появится несколько новых целевых платформ, под которые можно будет собирать проекты. Например — это Browser Extensions, Webview и Capacitor.
Переработка фреймворка потребовала упорядочения его основных внутренних систем и процессов. Это — то, что даст Quasar возможность расти в ближайшие годы и при этом оставаться актуальным. Это означает и то, что в его код, по мере его развития, не придётся вносить изменений, нарушающих совместимость.
Итак, предположим, вы — Vue-разработчик (или разработчик, который пользуется чем-то другим). При этом вы хотите следующего:
Итоги
Этот материал лишь очень кратко описывает возможности фреймворка Quasar. Его автор говорит, что планирует написать ещё несколько статей, посвящённых техническим особенностям фреймворка.
Если этот фреймворк вас заинтересовал — вот несколько полезных ресурсов.
Введение в Vue.js и Quasar Framework
Но среди фреймворков JavaScript в последние годы наблюдается особенно быстрый рост: Vue.js. Он был настолько популярен, что его темп роста стал взрывоопасным по сравнению с другими в этом пространстве.
Vue стал одним из основных претендентов благодаря своей мягкой кривой обучения. Это прекрасно подходит для постепенной реализации. Он имеет модульную компонентную архитектуру. И это имеет широкое использование и развитую экосистему инструментов. Если вы заинтересованы в начале работы с Vue, вы можете обратиться к нашей книге Jump Start Vue.js, чтобы начать переход к использованию Vue в своих проектах.
Vue Инструменты, Терминология и Пейзаж
Как и в случае с большинством технологий, которые нужно осваивать, освоение Vue включает в себя знакомство с терминами и концепциями, а также освоение экосистемы инструментов и строительных блоков.
Vue Router является неотъемлемой частью всех одностраничных приложений Vue. Он обеспечивает управление навигацией, вложенную маршрутизацию, отображение маршрута и многие другие функции.
Vue devtools может облегчить жизнь разработчикам. Это поможет вам отслеживать компоненты, состояние и события в наших приложениях. Вы можете найти больше об этом инструменте в Главе 2 нашей книги, посвященной инструментам Vue.
Vue Component System — еще одна сильная сторона Vue. Это позволяет нам модулировать наши приложения, инкапсулировать части разметки, логики и стиля и повторно использовать их.
Awesome Vue также отличный ресурс. Это всесторонний, категоризированный, актуальный сбор / репо всех частей экосистемы Vue и ресурсов Vue.js.
квазар
Vue — это JavaScript-фреймворк для создания пользовательских интерфейсов. Однако сам по себе он не предоставляет реальных элементов или компонентов пользовательского интерфейса или согласованных конструкций, которые мы можем использовать. Вот почему, помимо Vue, было построено много сред пользовательского интерфейса, чтобы предоставить пользователям многократно используемые стилизованные компоненты. Мы можем думать об этом как о разных вариантах загрузки Twitter — только для Vue.
Quasar — это высокопроизводительный, Material Design 2, полный интерфейсный стек для Vue.js.
Это простой в использовании, но мощный набор пользовательского интерфейса с лицензией MIT, который дополняет Vue.js, предоставляя полнофункциональный набор инструментов для создания отзывчивых интерфейсных приложений без необходимости слишком углубляться в леса и конфигурацию.
Это дает нам три способа загрузить наше приложение:
Мы будем следовать рекомендациям команды Quasar и использовать Quasar CLI.
Начальная загрузка приложения Quasar с помощью Quasar CLI
Перед установкой Quasar CLI мы должны убедиться, что у нас есть правильные версии узлов (> = 8 на момент написания) и npm (> = 5). Если нет, нам нужно либо установить, либо обновить его. Затем мы можем установить Quasar CLI:
Мы используем quasar create для создания квазар-проекта.
Затем нам предоставляется список вариантов проекта, который мы хотим загрузить.