Как организовать архитектуру SPA приложения на нативном javascript?

Question

[Matvey]

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

Comments

[Matvey]

Артём Петренков, да, взываю о помощи

[Mike]

htmldeveloper, если решили отказаться от фреймворков, значит что-то не подошло.
Чем не устроили решения на каждом из популярных фреймворков?

[Matvey]

Михаил, в вакансиях от 150-200 тыс. рублей (в Санкт-Петербурге) часто ведется разработка на нативном js, с целью высокой производительности приложений, поэтому я решил погрузиться в это. ньюансов очень много, и мне все это интересно. из фреймворков знаю только React, и на данный момент им и зарабатываю на жизнь. если вы пройдетесь дебагером, то обнаружите огромное количество действий на каждый "чих". или посмотрите, что творится под капотом: https://github.com/Bogdan-Lyashenko/Under-the-hood... . Также профилировщик chrome dev tools выдает огромные цифры у тега "scripting". Я уверен, что с другими фреймворками дела обстоят также, если не хуже.

[Matvey]

Михаил, я хочу также освоить грамотное проектирование архитектуры, в теории знаком с MV*, с Layer слоистой архитектурой, "микроядерной", знаю патерны ООП. только вот как организовать код в соответствии с этими шаблонами например, когда есть чудовищное количество html и js кода

[Matvey]

MaxKorz, да, извините - ui библиотека, липкий вы на слова человек )

я могу сказать на собственном опыте, что на проекте из 200 контрибьютеров на гитхабе из трех стран, качество кода сильно начинает страдать, несмотря на то, что каждый по отдельности будет middle/senior уровня. страшно подумать, что будет при тысячи контрибьютеров на проекте из разных стран.

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

[Matvey]

MaxKorz, не понимание того, как объем кода и производительность взаимосвязаны, повсеместное использование фреймворков, упоминание jQuery - все это говорит о том, что у Вас никогда не было серъезных кейсов на performance. на мой вопрос Вы так и не ответили, потому как не имеете серъезного опыта в проектировании архитектур по, т.е. Вы простой кодер на фреймворках.

[Matvey]

MaxKorz, для справки - без бабеля на es5 Вы будете писать .createClass и .createElement без jsx, и тем не менее, объем кода все равно будет оставаться большим, будет много всякого бойлерплейта. настоятельно рекомендую подебажить такие моменты, как например setState, и прочее, Вы никогда этого не делали. в Вашем ангуляре и подавно больше операций, особенно во втором - это уже действительно фреймворки. плюс ко всему, Вы также будете использовать кучу сторонних библиотек, Ваш node_modules будет весить до 200 мегабайт по мере роста приложения. такие слова, как CMS никогда не было в моем лексиконе

[Matvey]

Артём Петренков, именно к нестандартным проектам и надо тянуться, не так ли? где нужны знания нативного js, как реально работает дом в разных браузерах, как v8 движок работает, где на счету каждая миллисекунда. где нужно алгоритмически думать над кодом, а не клепать бандлы на реакте по-быстрому. именно таким разработчиком я и стремлюсь стать. этот вопрос вообще был про проектирование архитектуры, мне нужен совет, какая-то помощь людей с подобным опытом. в итоге все скатывается к спору "react/vue vs нативный js", причем к такому, агрессивному спору. "пиши на вью, не изобретай квадратный велосипед, охохо!". ппц блин

[Matvey]

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

[Matvey]

MaxKorz, а мне с Вами, особенно после такого ужасного кода: Как правильно организовать код?

[Matvey]

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

[Matvey]

MaxKorz уже получаю 100к, но в вакансиях на 150-200 такие слова как "реакт" и "вью" встречаются редко

[Matvey]

MaxKorz, я не гений, и работаю в посредственной компании галере, пишу на реакте, как и Вы, но у меня просто есть стремление вырасти

Answer 1

[Павел Корнилов]

Да архитектура не сложная.
Обработать запрос на сервере - передать роутеру - отдать клиенту данные для рендеринга.
Или что интересует конкретно? Вопросов может быть очень много, я с этим сталкивался сам. Например, как эмулировать страницы для ПС, для меня оказался наиболее сложным.

Comments

[Matvey]

спасибо за отклик. сам не понимаю, как объясниться, попробую ) да, приложение клиент-серверное, на сервере будет rest. у меня одностраничное приложение, т.е. просто есть единсвенный html-файл, на котором я неизбежно буду хранить всю верстку, и манипулировать ей в соответствии с бизнес-логикой. отсюда первый вопрос: как спроектировать взаимодейтсвие между html и js правильнее? на каждый dom элемент создавать селекторы вроде document.querySelector, или создать какую-то фабрику, как будет выглядеть файловая структура? ведь я не буду все складывать в один js-файл из 10 000+ строк кода. как разбить код на сущности? как абстрактно все сделать.. хз как объяснить

[Павел Корнилов]

первый вопрос: как спроектировать взаимодейтсвие между html и js правильнее?

ИМХО, самый правильный подход реализован в VUE. Но если сам фреймворк для вас избыточен, то нужно реализовать виртуальный DOM и производить все операции в нем. А реальному DOM отдавать уже результат работы.

[Matvey]

KorniloFF, ок, как вариант - виртуальный dom. спасибо

[Matvey]

MaxKorz, про фреймворки в вопросе речи не идет - Вы в нем не компетентны еще больше, чем я, посему Ваши ответы бесполезны

Answer 2

[Антон]

Если причина - действительно написание высокопроизводительной системы, а не в обучающих целях, то тогда, прежде чем писать свое, нужно ознакомиться до мелочей, как работают под капотом популярные фреймворки: Angular, React, Vue2, Aurelia. Скорее всего, придется написать свою реализацию virtual dom. Она точно будет быстрее существующих?
Так же советую ознакомиться с фреймворками, которые работают поверх веб компонентов: Polymer, Stencil, Skatejs - это будущее, имхо

Comments

[Matvey]

если бы Вы все-таки подсмотрели, как работают под капотом популярные фреймворки, то не написали бы "высокопроизводительная система" рядом с React Vue и прочим. еще раз продублирую: ссылка на то, как работает реакт под капотом: https://github.com/Bogdan-Lyashenko/Under-the-hood... , детальный разбор. Второе: используя профилировщик, посмотрите на оверхед Вашего приложения, воспользуйтесь дебаггером. Или скиньте ссылку на Ваш текущий проект - я оценю его производительность сам, и мы поговорим детальнее

[Антон]

htmldeveloper, что я написал не так? да, желательно разобраться, как они работают, чтобы самому не нарваться на грабли, и оценить плюсы и минусы разных подходов. Производительность в react и vue тоже приемлемая, если уметь их готовить. В крайнем случае можно на peact заменить. И обсуждать это смысла нет. Мои проекты тут при чем?