Помогите создать общую архитектуру js приложения.
Например мне надо создать интернет магазин.
В нем будут:
1. вход в систему (отображается на всех страницах)
2. поиск с выбором параметров
3. страниа товара
4. страница поиска
5. текстовые страницы (главная, о нас и т п..)
Подскажите, как мне начать создавать архитектуру приложения на js - меня интересует именно сам код - с чего начинать, что использовать(какие технологии).
Я так понимаю что должен быть роутер и модули. модули должны отвечать за свое действие( один модуль - это вход, другой - поиск, третий - ajax и т д...) . И модули должны быть связанны только через роутер или ядро и не должны знать о друг друге.
Не могу всю информацию соединить в одно целое.
PS:
дополню вопрос вот таким кодом
(function() {
window.sample = {}; // Главный объект приложения
sample.routers = {}; // Объект, содержащий контроллеры для обеспечения
// переходов между разделами приложения.
sample.models = {}; // Объект для хранения моделей с данными
sample.ui = {}; // Объект, содержащий контроллеры, отвечающие за
// построение интерфейсов приложения и их поведения.
sample.core = {state: null}; // Ядро нашего приложения. Содержит в
// себе объект, являющуюся «песочницей».
sample.modules = {}; // Объект, содержащий контроллеры других
// модулей системы
})();
xmoonlight: нет нет, они абстрагируют вот эту низкоуровневую архитектуру и дают вам определенные паттерны разработки. И вы должны им следовать. Вам останется только спланировать что-то вроде, нажали на кнопочку - открылась эта страница и т.д.
Денис Инешин: просто, я сам пишу всегда нативно и поэтому у меня такое представление, что код может быть "перегружен" лишними вычислениями внутри как раз вот этой абстрагированной архитектуры, что приводит к замедлению работы в конечном итоге...
Какой из этих решений (фреймворков) для мульти-оконного (обычно в DIV-ах) интерфейса для SPA лучше всего подходит?
(загрузил->выгрузил->освободил память)
(function() {
window.sample = {}; // Главный объект приложения
sample.routers = {}; // Объект, содержащий контроллеры для обеспечения
// переходов между разделами приложения.
sample.models = {}; // Объект для хранения моделей с данными
sample.ui = {}; // Объект, содержащий контроллеры, отвечающие за
// построение интерфейсов приложения и их поведения.
sample.core = {state: null}; // Ядро нашего приложения. Содержит в
// себе объект, являющуюся «песочницей».
sample.modules = {}; // Объект, содержащий контроллеры других
// модулей системы
})();
фреймворки это хорошо. спасибо изучу.
Я когда знакомился с php mvc, то начал не с фреймворков, а с того как написать свой. Нашел статью в которой разбирался простой самописный движок. Теперь понимаю саму суть и могу за пару часов написать свой мини-движок. Так и с js. Я понимаю что тот же роутер можно описать несколькими функциями. Но я просто не могу пока уловить саму суть. Наверное придется углубляться во фреймворки.
Денис Инешин: я прошел первый раздел (npm инсталл, создание приложения и запуск сервера), потом с меня потребовали денег за доступ к остальным разделам ember, т.к. курс не входит в Free-курсы.
Единственный вопрос к Вам: Вы кодите нативно?
xmoonlight: что значит нативно? Пишу ли я на чистом JS? Да. Все ли я пишу на чистом JS? Нет, зачем делать свои глючные велосипеды, когда есть прекрасные библиотеки с которыми можно работать.
xmoonlight: да, это полезно для обучения. Но в реальном проекте у вас и так много задач, которые нужно делать, не нужно тратить время на то что уже сделано много раз и отработано.
Это все равно что при создании автомобиля вам понадобятся металлические болты, и вместо того чтобы заказать их на ближайшем заводе, где давно налажен техпроцесс, вы пойдете их отливать самостоятельно, вплоть до добычи железной руды)
xmoonlight: это канает только для мелких проектов. Например вы лично для себя никогда не сделаете такую же кроссбраузерно-быструю перерисовку DOM как это сделано в реакте. И т.п.
(function() {
window.sample = {}; // Главный объект приложения
sample.routers = {}; // Объект, содержащий контроллеры для обеспечения
// переходов между разделами приложения.
sample.models = {}; // Объект для хранения моделей с данными
sample.ui = {}; // Объект, содержащий контроллеры, отвечающие за
// построение интерфейсов приложения и их поведения.
sample.core = {state: null}; // Ядро нашего приложения. Содержит в
// себе объект, являющуюся «песочницей».
sample.modules = {}; // Объект, содержащий контроллеры других
// модулей системы
})();
