Сравнение DASH и VUE

Что такое Vue.js?

Vue.js — один из самых по­пуляр­ных и прог­рессив­ных фрей­мвор­ков JavaScript, дос­тупных на рынке. Исполь­зу­ет­ся для создания поль­зо­ватель­ских ин­терфей­сов на основе стан­дар­тных JavaScript, CSS и HTML. Эта плат­форма пред­ла­га­ет дек­ла­ратив­ный и ком­по­нен­тный подход к прог­рамми­рова­нию, который поз­во­ля­ет раз­ра­бот­чи­кам соз­да­вать ин­те­рак­тивный поль­зо­ватель­ский ин­терфейс как для простых, так и для сложных при­ложе­ний. С помощью Vue.js спе­ци­алис­ты также создают од­нос­тра­нич­ные при­ложе­ния.

Как правило, фронтенд-раз­ра­бот­чи­ки, которые создают веб-сайты и веб-при­ложе­ния, обычно работают с фрей­мвор­ка­ми JavaScript, такими как Vue.js, пос­коль­ку они включают в себя одни из лучших офи­ци­аль­ных биб­ли­отек.

Какие задачи решает?

Vue.js поз­во­ля­ет воп­ло­тить в жизнь прак­ти­чес­ки любую идею, свя­зан­ную с отоб­ра­жени­ем данных и уп­равле­ни­ем ими, включая анимацию.

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

Такое раз­де­ление поз­во­ля­ет ре­али­зовать более про­думан­ную, легко мас­шта­биру­емую и под­держи­ва­емую ар­хи­тек­ту­ру, чем если ис­поль­зо­вать только один фрей­мворк по типу Dash или Django.

Легко ли его освоить?

Одним из наиболее важных факторов, которые помогают людям решить, стоит ли изучать кон­крет­ную тех­но­логию, является кривая ее обучения. А в случае с фрей­мворком Vue.js именно это делает его таким по­пуляр­ным. Чтобы изучить Vue.js, не обя­затель­но владеть такими инс­тру­мен­та­ми, как TypeScript, JSX, или какой-либо биб­ли­отекой, в отличие от других ин­терфейсных тех­но­логий.

Базовые знания, не­об­хо­димые для начала работы с Vue.js, — это HTML, CSS и JavaScript. Допол­ни­тель­ные инс­тру­мен­ты, такие как Visual Studio Code, Atom, Sublime Text, могут улучшить опыт раз­ра­бот­ки при­ложе­ний на Vue.js.

Какие пре­иму­щес­тва у Vue.js?

Размер

Фрей­мворк Vue.js не занимает много места, и его вес ми­нима­лен, что помогает соз­да­вать более легкие конечные при­ложе­ния, которые, сле­дова­тель­но, быстрее заг­ру­жа­ют­ся. Эта осо­бен­ность плат­формы Vue.js улучшает вза­имо­дей­ствие с поль­зо­вате­лем и по­ис­ко­вую оп­ти­миза­цию.

Фрей­мворк Vue.js поз­во­ля­ет раз­ра­бот­чи­кам прог­рам­мно­го обес­пе­чения соз­да­вать шаблоны с помощью JSX, JavaScript и HTML. Бла­года­ря своим лег­ко­вес­ным ха­рак­те­рис­ти­кам и ком­по­нен­тной природе ин­фраструк­ту­ра Vue.js может быть ре­али­зова­на прак­ти­чес­ки в любом новом проекте.

Ком­по­нен­тная струк­ту­ра

Во Vue.js каждый элемент при­ложе­ния или веб-страницы вы­пол­ня­ет функцию от­дель­но­го ком­по­нен­та. Это дает воз­можность мно­гок­ратно ис­поль­зо­вать ком­по­нен­ты по вашему ус­мотре­нию и в целом улучшает чи­та­емость кода путем умень­ше­ния бес­по­ряд­ка. Еще одним пре­иму­щес­твом такого подхода является более простое мо­дуль­ное тес­ти­рова­ние, пос­коль­ку можно про­верить от­дель­ные части при­ложе­ния и убе­дить­ся, что они работают кор­рек­тно не­зави­симо от ос­таль­но­го кода.

Подход к на­писа­нию кода с ар­хи­тек­ту­рой, пред­ла­га­ющей ком­по­зицию на основе ком­по­нен­тов, имеет мно­жес­тво пре­иму­ществ для раз­ра­бот­ки:

• •  чи­та­емость кода - когда все ком­по­нен­ты хранятся в от­дель­ных файлах, понять код ста­новит­ся намного проще. Сле­дова­тель­но, проще ус­тра­нять ошибки и под­держи­вать при­ложе­ние.

• •  пе­ре­ис­поль­зо­вание ком­по­нен­тов - код, вы­делен­ный в ком­по­нен­ты, можно легко ис­поль­зо­вать в раз­личных местах сайта. И даже раз­местить нес­коль­ко оди­нако­вых ком­по­нен­тов на одной странице.

• •  мо­дуль­ные тесты - мо­дуль­ные тесты поз­во­ля­ют ав­то­мати­чес­ки про­верять от­дель­ные ком­по­нен­ты на со­от­ветс­твие тре­бова­ни­ям, обес­пе­чивая на­деж­ность и улучшая под­держи­ва­емость кода.

Инстру­мен­ты для фрей­мворка

Фрей­мворк Vue.js имеет ряд инс­тру­мен­тов, улуч­ша­ющих его фун­кци­они­рова­ние. Vue.js CLI пред­ла­га­ет мно­жес­тво ин­но­ваци­он­ных функций. Инженеры-прог­раммис­ты могут рас­ши­рить его и по­делить­ся с со­об­щес­твом. Проекты, ре­али­зу­ющие CLI, могут ос­та­вать­ся ак­ту­аль­ны­ми в дол­госроч­ной пер­спек­ти­ве. Богатый гра­фичес­кий ин­терфейс поз­во­ля­ет легко соз­да­вать проекты и уп­равлять ими.

Более того, ин­терфейс ко­ман­дной строки ори­ен­ти­рован на будущее, пос­коль­ку дает воз­можность раз­ра­бот­чи­кам изменять кон­фи­гура­цию и получать не­об­хо­димые пакеты и утилиты. Сле­дова­тель­но, он способен пос­тавлять код для сов­ре­мен­ных бра­узе­ров и соз­да­вать ком­по­нен­ты Vue.js как нативные.

Vue.js пре­дос­тавля­ет встро­ен­ные инс­тру­мен­ты, которые помогают веб-раз­ра­бот­чи­кам эко­номить время и усилия, например, для уп­равле­ния сос­то­яни­ем, мар­шру­тиза­ции и анимации. Сущес­тву­ют также инс­тру­мен­ты для отладки напрямую в браузере, которые помогают выявлять и ис­прав­лять ошибки.

Самое главное пре­иму­щество этих инс­тру­мен­тов — они доступны из коробки и поз­во­ля­ют c ми­нималь­ны­ми усилиями достичь не­об­хо­димой цели.

Дос­тупные решения для отоб­ра­жения данных

Так как струк­ту­ра Vue.js поз­во­ля­ет по желанию внедрять его в уже су­щес­тву­ющую страницу, для отоб­ра­жения данных можно ис­поль­зо­вать любую дос­тупную JS-биб­ли­отеку.

Одними из самых по­пуляр­ных решений для отоб­ра­жения данных являются биб­ли­отеки Chart.js и ApexCharts.js. Для них су­щес­тву­ют версии для Vue.js, которые поз­во­ля­ют ис­поль­зо­вать его пре­иму­щес­тва.

Примеры отоб­ра­жения диаграмм с ис­поль­зо­вани­ем ApexCharts

 

Chart.js больше нацелен на отоб­ра­жение данных в раз­личных пред­став­ле­ни­ях для про­веде­ния срав­ни­тель­но­го анализа. В нем есть все базовые гра­фичес­кие пред­став­ле­ния от графиков до радарной ди­аг­раммы.

Примеры отоб­ра­жения диаграмм с ис­поль­зо­вани­ем Chart.js

 

 

 

Дос­тупные решения для пос­тро­ения ин­терфей­сов

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

Одними из самых по­пуляр­ных решений являются:

• •  BootstrapVue;

• •  Quasar;

• •  Vuetify;

• •  Vue Material.

Каждый из них содержит аб­со­лют­но все не­об­хо­димые и су­щес­тву­ющие ком­по­нен­ты от кнопок и базовых полей ввода до готовых меню и таблиц. Это поз­во­ля­ет воп­ло­щать в рамках одного выб­ранно­го инс­тру­мен­та весь ин­терфейс в нужном виде и с нужной логикой.

Пример ин­терфейса с ис­поль­зо­вани­ем Bootstrap Vue

 

 

Пример ин­терфейса с ис­поль­зо­вани­ем Quasar

 

 

Примеры ин­терфей­сов с ис­поль­зо­вани­ем Vuetify

 

 

Примеры ин­терфейса с ис­поль­зо­вани­ем Vue Material

 

 

Интег­ра­ция

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

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

Попу­ляр­ность

Vue.js входит в тройку самых по­пуляр­ных JS-фрей­мвор­ков для раз­ра­бот­ки фронтенд. Среди пре­дан­ных при­вер­женцев Vue.js можно найти таких гигантов ин­дус­трии, как Netflix, Wizz Air и Nintendo.

Несмотря на то что позиции раз­ра­бот­чи­ков React.js и Angular более рас­простра­нены на рынке труда, Vue.js гораздо проще обу­чить­ся. Это означает, что, возможно, более це­лесо­об­разно научить вашу су­щес­тву­ющую команду раз­ра­бот­чи­ков ис­поль­зо­вать Vue.js, чем нанимать новых сот­рудни­ков.

Про­из­во­дитель­ность

Помимо того что это одна из самых быстрых платформ веб-раз­ра­бот­ки, она также пред­ла­га­ет бе­зуп­речный поль­зо­ватель­ский опыт в од­нос­тра­нич­ных при­ложе­ниях и поль­зо­ватель­ских ин­терфейсах. Vue.js может за­пус­кать мо­биль­ные при­ложе­ния быстрее, чем такие плат­формы, как React.js или Angular.

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

Доку­мен­та­ция и под­дер­жка

Под­робная до­кумен­та­ция и обу­ча­ющие ма­тери­алы ока­зыва­ют большую помощь в процессе раз­ра­бот­ки. Эти ре­комен­да­ции пока­зыва­ют воз­можнос­ти, которые пред­ла­га­ет фрей­мворк, включая все недавние улуч­ше­ния и об­новле­ния, пред­став­ленные в Vue.js.

Кроме того, до­кумен­та­ция пред­ла­га­ет обзор API и вводное ру­ководс­тво. Бла­года­ря удобному формату и широкому спектру тем, в ней ос­ве­ща­ют­ся раз­личные сферы: от того, как ус­та­новить фрей­мворк, до того, как впос­ледс­твии мас­шта­биро­вать при­ложе­ние.

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

Срав­не­ние с Dash

Dash — это фрей­мворк для Python для быстрого создания при­ложе­ний, главной целью которого является ви­зу­али­зация данных. Основан на Flask, React.js, HTML и CSS. Появился от­но­ситель­но недавно и не получил такого рас­простра­нения и об­щес­твен­но­го приз­на­ния. Пози­ци­они­ру­ет­ся как фрей­мворк для быстрого и легкого отоб­ра­жения данных Python через Pandas. Все это явно де­монс­три­ру­ет, что он не нацелен на ре­али­зацию пол­но­цен­но­го ин­терфейса и не имеет такой воз­можнос­ти.

Графика

Главная задача фрей­мворка - отоб­ра­зить данные без упора на ви­зу­аль­ную часть. Поэтому все его ком­по­нен­ты имеют более при­митив­ный вид, чем у Vue.js.

 

 

 

На верхнем изоб­ра­жении де­монс­три­ру­ется при­митив­ная ви­зу­али­зация таблицы Dash, схожая таблица на Vue.js может выг­ля­деть как на нижнем изоб­ра­жении.

Основное пре­иму­щество Vue.js над Dash в данном случае состоит в том, что это готовые ком­по­нен­ты. Только у Dash это при­митив­ная таблица, которую не­об­хо­димо вручную до­раба­тывать, чтобы она выг­ля­дела приятно для глаза, а у Vue.js это пол­ностью готовая таблица, которую не надо изменять без острой не­об­хо­димос­ти.

Сравним теперь отоб­ра­жение данных в виде раз­личных гра­фичес­ких пред­став­ле­ний от графиков до диаграмм.

 

Гис­тограм­мы на Dash

 

 

Гис­тограм­мы на Vue.js

 

 

 Графики на Dash

 

Графики на Vue.js

 

 

Также на Vue.js можно ком­би­ниро­вать графики и гис­тограм­мы вместе

 

 

Ком­би­ниро­вание поз­во­ля­ет на одном графике более наглядно увидеть вза­имос­вязь или сделать оп­ре­делен­ный вывод, ос­но­выва­ясь сразу на нес­коль­ких гра­фичес­ких пред­став­ле­ни­ях, а не листая страницу или переводя взгляд с одного места на экране на другой.

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

На Vue.js же все графики пред­став­ля­ют собой готовый ком­по­нент с ви­зу­аль­ной частью, которую не нужно вручную до­раба­тывать. Также если есть не­об­хо­димость изменить стиль того или иного графика, линии, точки или фона, то боль­шинс­тво таких настроек уже пре­дус­мотре­ны в ком­по­нен­тах и это дос­та­точ­но легко изменить, в отличие от Dash.

Круговые ди­аг­раммы на Dash

 

 

 Круговые ди­аг­раммы на Vue.js

 

 

Все готовые ком­по­нен­ты — это биб­ли­отеки, ус­та­нов­ка которых в проект про­ис­хо­дит без труд­ностей.

Выше были рас­смот­ре­ны только самые по­пуляр­ные гра­фичес­кие пред­став­ле­ния, но на Vue.js их ко­личес­тво в нес­коль­ко раз больше, чем в Dash. Срав­ни­вая эти основные гра­фичес­кие пред­став­ле­ния данных, можно уверенно сделать вывод, что Vue.js пре­вос­хо­дит Dash по сле­ду­ющим кри­тери­ям:

• • кра­соч­ность ви­зу­али­зации;

• •  удобство ре­али­зации отоб­ра­жения данных;

• •  удобство сти­лиза­ции;

• •  ко­личес­тво гра­фичес­ких пред­став­ле­ний.

Доку­мен­та­ция и под­дер­жка

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

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

Поэтому при срав­не­нии этих фрей­мвор­ков в данном критерии явно вы­иг­ры­ва­ет Vue.js.

Инстру­мен­ты для фрей­мворка

Как ранее го­вори­лось, для Vue.js уже су­щес­тву­ет огромное ко­личес­тво готовых инс­тру­мен­тов, которые доступны сразу же и не требуют до­рабо­ток.

У Dash картина совсем иная: для него прак­ти­чес­ки нет готовых инс­тру­мен­тов. Все, что можно ис­поль­зо­вать, — это только то, что он содержит в себе. Также Vue.js имеет инс­тру­мент по работе с plotly, но не ог­ра­ничи­ва­ет­ся только им. Dash же основан на plotly и не может ис­поль­зо­вать другие струк­ту­ры данных и ком­по­нен­ты, кроме тех, которые уже пре­дус­та­нов­ле­ны в plotly и Dash.

Раз­ра­бот­ка

По причине того, что Dash — это фрей­мворк для отоб­ра­жения данных на Python, ос­но­ван­ный на Flask, не­кото­рые раз­ра­бот­чи­ки пытаются ис­поль­зо­вать его для раз­ра­бот­ки пол­но­цен­но­го при­ложе­ния. Однако это прев­ра­ща­ет ре­али­зу­емый проект в монолит, который ста­новит­ся с каждым разом сложнее мас­шта­биро­вать, до­раба­тывать и в осо­бен­ности под­держи­вать.

Это ус­ложня­ет раз­ра­бот­ку, так как нес­коль­ко раз­ра­бот­чи­ков не могут работать кор­рек­тно. При раз­ра­бот­ке какой-то новой фун­кци­ональ­нос­ти раз­ра­бот­чик может изменить метод, который не­об­хо­дим для другого раз­ра­бот­чика, что в итоге сломает фун­кци­ональ­ность при­ложе­ния и при сов­ме­щении на­рабо­ток воз­никнут кон­флик­ты. Поэтому чаще всего проектом за­нима­ет­ся один раз­ра­бот­чик, чтобы не воз­ни­кало кон­флик­тов и проблем, или нес­коль­ко, но не па­рал­лель­но, а после­дова­тель­но. И все это ска­зыва­ет­ся на сроках раз­ра­бот­ки, замедляя их.

Vue.js же нацелен только на работу с ин­терфейсом. Да, в нем можно сделать и работу с данными, но это не ре­комен­ду­ет­ся, так как в этом нет смысла. Исполь­зо­вание Vue.js сразу говорит о том, что у проекта есть фронтенд — Vue.js, который отвечает за все отоб­ра­жение данных и ин­терфейса, и бэкенд, от­ветс­твен­ный за работу с базой данных и все ал­го­рит­мы пред­метной логики.

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

Вывод

Vue.js пре­вос­хо­дит Dash во всех вопросах при раз­ра­бот­ке веб-ин­терфейса, а именно:

В графике  Vue.js лучше по сле­ду­ющим кри­тери­ям:

• •  кра­соч­ность ви­зу­али­зации;

• •  удобство ре­али­зации отоб­ра­жения данных;

• •  удобство сти­лиза­ции;

• •  ко­личес­тво гра­фичес­ких пред­став­ле­ний.

В до­кумен­та­ции, под­дер­жке и освоении Vue.js лучше по сле­ду­ющим кри­тери­ям:

• •  под­робная до­кумен­та­ция;

• •  огромное со­об­щество

• •  много решенных  типовых задач;

• •  наличие про­думан­но­го кем-то ранее решения воз­никших проблем.

В ре­али­зован­ных инс­тру­мен­тах для фрей­мворка Vue.js лучше по сле­ду­ющим кри­тери­ям:

• •  ко­личес­тво готовых инс­тру­мен­тов в разы больше;

• •  готовые инс­тру­мен­ты имеют аль­тер­на­тивы;

• •  все инс­тру­мен­ты готовы к ис­поль­зо­вания сразу после ус­та­нов­ки, без до­пол­ни­тель­ной до­работ­ки.

В раз­ра­бот­ке проекта Vue.js лучше по сле­ду­ющим кри­тери­ям:

• •  раз­би­ение мо­нолит­но­го проекта на фронтенд и бэкенд;

• •  ус­ко­рение раз­ра­бот­ки за счет раз­би­ение задач между раз­ра­бот­чи­ками и па­рал­лель­ного их вы­пол­не­ния;

• •  мас­шта­биру­емость каждой из частей при­ложе­ния.