Какой оптимальный JS фреймворк для мобильного SPA?

Question

[dastanbek2358]

Добрый день, коллеги,
Просьба посоветовать оптимальный JS фреймворк для мобильного SPA?
Или статьи со сравнениями.
Последний раз разрабатывал когда jquery был в тренде.
Желательно что бы мало весил, мобильный браузер долго не обрабатывал и плагин хватало на стандартные функционалы.

Answer 1

[Дмитрий Беляев]

Svelte

Желательно что бы мало весил

рантайм минимален и только то, что по факту используется

мобильный браузер долго не обрабатывал

компилируется в высокоэффективный нативный DOM api, что делает его мега быстрым

плагин хватало на стандартные функционалы

Начать поиск отсюда можно

Comments

[dmitry-toster]

Дмитрий Беляев, сталкивались ли вы с какими-то проблемами в работе с svelte? Есть ли какие минусы по сравнению с тем же реактом, либо vue? (интересует чисто ваше субъективное мнение). Спасибо

[Дмитрий Беляев]

dmitry-toster, с реактом по серьезному работал последний раз году в 16, но впрочем наблюдаю за ним... и чисто субъективно, как был отвратительным таким и остался. Куча ручной работы, мега тормазной вирутальный дом, нет системы событий, поток данных только вглубь, а если надо наоборот, то начинаются танцы с бубном вроде колбэков в пропсах, вообщем боль и страдание, особенно если нужны инпуты... Плюс в последнее время он мне попадается больше на доработки, но не он один. И с ним больше всего вижу говнокода, вызванного в том числе борьбой с этим поделием. А самое интересное, я реально не понимаю, а что он дает? Возможностей по сравнению с ванилой - ноль, удобство - вообще в минусе. Виртуал дом? ну так это медленно же... да и реализую я такой за пару вечеров если очень надо будет... Вообщем не вижу ни одной причины кроме пиара от фб, почему это поделие так популярно.
Вью - с ним очень плотно работаю с выхода 2 версии. В целом впечатления приятные, пока не наткнешься на тормоза с его плоской системой реактивных зависимостей в купе с неоптимальной отпиской. Особенно это заметно с vuex на больших динамичных страницах. Ну и на сегодня у вью хуже всего дела обстоят с тайпскриптом. Вью отвратительно типизирован сам, он мешает типизировать компоненты (правда есть костыли для обхода, но с ними бандл растет примерно на 20%), vuex не типизируется вовсе. Реакту тут конечно повезло больше, благо майкрософту приглянулся jsx для личных целей и они сделали tsx... Хотя это породило в реакте еще больше говнокода в виде и логика и ui в одной куче... Ну и еще, после реакта и свелт у вью кажется убогим ограничение, что компонент может иметь только 1 дом элемент верхнего уровня... Ну и опять же виртуал дом, но хотя бы не ререндерится на каждый чих как у реакта.
Свелт - первое впечатление у всей команды - "а так можно было?" Продуктивность выросла в разы после вью (о реакте тут даже говорить не приходится), самый большой бойлерплейт, который приходится на нем писать - это: const dispatch = createEventDispatcher(); - и вызван он объективной причиной, свелт не будет тащить механизм событий в компонент, если он не нужен разработчику. Нужно писать очень мало кода, и весь он по делу, большинство наших компонентов помещаются в 1 экран при разрешении 1920х1080, это при том что в одном файле и ui логика (в основном импорты и пропсы, изредка реактивные выражения), шаблон и стили в scss. В самих компонентах нет тайпскрипта (и возможно не будет, ибо свелт - компилятор надмножества js+html и ts не понимает некоторые его синтаксические штуки), но все что вокруг у нас на хорошем ts, и тут все что импортируется из свелт прекрасно типизировано, включая svelte/internal. С граблями тоже встретились, но они не критичны, в частности есть проблемы с дев сборкой и с hmr под вебпаком, в итоге собираем в прод сборку даже на деве, теряя часть понятности в выхлопе компилятора, ну и сорсмапы для свелт пока тоже не работают (хотя и у вью есть с этим проблемы, но тот хотя бы не трогает скрипты, а шаблон делает деревом и оставляет на откуп рантайма, свелт же компилится в работу с нативным дом с учетом очень точечных обновлений, понять из выхлопа компилятора что было в шаблоне весьма сложно). В остальном впечатления весьма положительные, от бойлерплейта в реакте после этого еще больше тошнит, к вью тоже возвращаться не особо хочется

[uRoot]

Дмитрий Беляев, это всё хорошо, но есть одно но: на hh 6 вакансий за неделю по Svelte, React - 923 вакансий за неделю.

[Антон Швец]

Дмитрий Беляев, https://www.youtube.com/watch?v=0cFoEPhv2II

[Дмитрий Беляев]

CryNet, да это так, когда я начинал на vue2, там тоже вакансий было раз 2 и обчелся, и ничего взлетели со временем.
На реакте и тогда было много вакансий, ибо кто-то должен же поддерживать ту кучу легаси, которую на нем уже понаписали.

Антон Швец, смотрел уже раньше

[dmitry-toster]

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

[JohnDaniels]

Дмитрий Беляев,

vuex не типизируется вовсе

vuex
nuxt
или например https://github.com/ktsn/vuex-smart-module - использую в данный момент
vuex это же не единственная библиотека
все отлично работает с TS.

[Дмитрий Беляев]

JohnDaniels, про костыли я тоже писал, это не решение, давайте придумаем еще 100500 способов сделать одно и то же, так как каноничный способ плохой изначально. И как я и писал, Ваш бандл будет примерно на 20% больше, чем если бы Вы писали каноничный vue

Answer 2

[xmoonlight]

1. Самый быстрый вариант по загрузке скриптов/разметки/стилей: includeHTML (150 строк кода, менее 6 кб).
2. По визуалке: materializecss.com, bulma.io, getmdl.io.
3. Для мгновенного обновления значений в полях - 10 строк кода (поиск в гугл): шаблонизатор "REX Tiny templater" xmoonlight

Answer 3

[Владимир Коротенко]

А разница то для мобильного?
Будет у вас 2 мб бандл. И что?
Дело в общем то в данных от сервера и некоторых других вопросах

Comments

[dastanbek2358]

Я где-то читал что 1мб js кода в среднем 3 сек. обрабатывается в моб. браузерах.
К сожалению, сейчас не смог найти источника.

[Дмитрий Беляев]

за 2мб бандлы нужно расстреливать...

[Владимир Коротенко]

dastanbek2358, Это заговор говнокодеров, производителей мобилок и разработчиков фреймворков.
У меня при всем желании не получается vendor.js сделать меньше 120-400Kb. Vue+Framework7. И то это приложение типа todo list.
Насчет времени на хабре всплывала статья, эти тайминги верны для младших моделей. У старших можно делить на 2