Cezerin - Бесплатный интернет магазин на NodeJS + React + MongoDB?!

[support 447]

Официальный сайт проекта: https://cezerin.org

Официальный github проекта: https://github.com/cezerin2

Посмотрите демку:

https://vamhost.ru - магазин.

https://admin.vamhost.ru - админка.

шаблон plusha:

https://plusha.cezerin.net

https://plusha.cezerin.net/admin

агнглийская версия:

https://cezerin.net

https://cezerin.net/admin

Как Вам такой магазин?!

Написан чисто на javascript, т.е. и backend и frontend, всё на javascript.

Frontend (каталог, админка) написан на React.

Backend (api) написан на NodeJs.

Для хранения данных используется MongoDB.

 

Админка использует React MaterialUI - https://material-ui.com

Каталог использует CSS Framework Bulma - https://bulma.io

 

Так называемое API центричное приложение, или ещё называют микросервисное, т.е. всё крутится вокруг API.

А благодаря React весь сайт динамический и очень быстрый.

Всякие эффекты, анимации, изменения содержимого страниц - всё происходит прямо внутри страницы, без перезагрузок страницы.

и благодаря серверной части на NodeJS - нет проблемы с индексацией содержимого страниц поисковиками, в отличии от обычных ReactJs приложений.

 

Основное преимущество — это именно применяемый стэк технологий: React + NodeJs + MongoDB.

Это значит, что магазин будет с неблокирующей базой данных mongodb, асинхронными запросами, виртуальным DOM, Server Side Rendering (SSR), единый язык программирования для backend и frontend — javascript.

Но это же и основной недостаток, всё-таки это немного сложней чем php+mysql, даже просто запустить всё это хозяйство новичкам будет сложно.

Но с помощью документации и мануалов это можно будет исправить и всё рассказать и показать, как всё устанавливается и запускается.

Но для тех, что уже знаком с nodejs + react, всё будет понятно и легко.

Да, понятно, что простым пользователям это ни о чём не говорит.

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

 

[support 447]

Есть и фильтры - https://cezerin.ru/category-a

Есть и атрибуты товара - https://cezerin.ru/category-b/test-product

Есть и спецификации товара (свойства) - https://cezerin.ru/category-b/test-svoistva

Причём всё работает без всяких лишних кнопок подтверждения, без перезагрузок страниц и всего прочего, всё моментально.

[support 447]

Походите по админке, создайте в админке страницу, заказ, к примеру.

Посмотрите насколько всё быстро работает, моментально.

На мой вкус, совершенно новый уровень по сравнению со стандартным так называемым монолитным приложением (php+mysql).

[IVAN.Z 2]

Мне нравится vamshop тем что более менее понятно где и что ковырять, а тут? между  joomla+virtuemart - NodeJS + React + MongoDB = выберу  joomla+virtuemart если не будет vamshop. 

[support 447]

5 часов назад, ZM сказал:

Мне нравится vamshop тем что более менее понятно где и что ковырять, а тут? между  joomla+virtuemart - NodeJS + React + MongoDB = выберу  joomla+virtuemart если не будет vamshop. 

Это просто другой подход к разработке приложений.

Если Вам ближе php+mysql, кто ж против.

 

Самый популярный язык программирования на данный момент - это javascript, так, к слову.

 

[komsit 2]

Выглядит очень современно! 

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

(сколько это времени займет или сколько будет стоить)

+ в Vamshop1 мы привыкли к определенным боксам, нам нужны определенные модули доставки.

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

 

 

 

[support 447]

1 час назад, komsit сказал:

Выглядит очень современно! 

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

(сколько это времени займет или сколько будет стоить)

+ в Vamshop1 мы привыкли к определенным боксам, нам нужны определенные модули доставки.

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

 

 

 

Там совсем другие технологии, нет ни php, ни mysql, ни phpmyadmin, ни обычных хостингов в привычном понимании. Тем кто привык к php + mysql, наверное сложно будет.

Посмотрим, в общем.

Это аналог beru.ru по используемым технологиям, в beru.ru тоже всё крутится на api запросах + react + генерация на стороне сервера используется.

[IVAN.Z 2]

А этот магазин на чем работает ? https://www.castorama.ru/

[support 447]

21 минуту назад, ZM сказал:

А этот магазин на чем работает ? https://www.castorama.ru/

Это magento

https://magento.com/

[IVAN.Z 2]

Понятно похожи как будто )

p.s как заставить шапку тянуться http://parkourtlt.temp.swtest.ru/

[support 447]

10 минут назад, ZM сказал:

Понятно похожи как будто )

p.s как заставить шапку тянуться http://parkourtlt.temp.swtest.ru/

cezerin.ru похож на beru.ru по используемым технологиям.

Тоже react + api + ssr

p.s. Если это вопрос, то лучше создать отдельную тему на форуме.

 

[MIL2 1]

Приятный движок- быстрый и симпатичный

[support 447]

2 часа назад, MIL2 сказал:

Приятный движок- быстрый и симпатичный

Сейчас все сервисы, приложения, сайты, сервисы (jivosite.ru тоже на react + api), банки (тинькофф для физ. лиц например тоже работает аналогично этому магазину, т.е. react + api, тинькофф для юр. лиц на angular), wordpress 5 тоже на react в админке, новый редактор который gutenberg, тоже react, в том числе яндекс переводит все свои сервисы на react, новый интерфейс директа, beru.ru, яндекс тв, зен яндекс и т.д. и т.п.

В общем, лично я вижу как сейчас очень серьёзно меняются подходы к созданию сайтов, веб-приложений, массово начинается переход на использования javascript framework'ов и так называемого api центричного (микросервисного) подхода.

А не так как раньше, jQuery применялся частичто на сайте, т.е. сайт работал и без javascript, а сейчас нет, всё исключительно на javascript, весь сайт целиком, если в браузере отключён javascript, то работать вообще ничего не будет.

Например VamShop будет работать, т.к. там jQuery используется частично и без него тоже будет работать, просто не будет например работать ajax корзина без перезагрузки страницы, а будет переход на страницу корзину, т.е. с перезагрузкой страницы.

А вот все новые приложения на react - работать не будут в принципе. Но сейчас 99% процентов устройств поддреживают javascript, так что это не проблема.

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

Так что, тут важно быть в курсе, что происходит.

Сейчас прям массово все начинают использовать react и так называемый api центричный подход к приложениям и веб-сайтам.

А новые технологии это, в конечном итоге, и конкурентные преимущества для инет-магазинов.

Например гугл свой браузер google chrome делает с учётом всех этих технологий, т.е. постоянно добавляются всё новые и новые возможности и поддержка для javascript технологий и скоро просто настанет момент, что все новые сайты и приложения будет будут на голову быстрее, лучше работать в новых версиях браузеров.

Старые подходы будут по-тихоньку уходить и работать медленно.

 

 

[support 447]

Пример рабочего магазина на этом движке - https://izzi.com.ua/

[MIL2 1]

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

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

При этом стоит помнить, что полноценная поддержка подобных сайтов — дело не из дешевых."

https://serpstat.com/ru/blog/sajti-na-javascript-dvizhkah/?utm_content=JavaScript-SEO-druzya-ili-vragi

 

 

[support 447]

4 часа назад, MIL2 сказал:

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

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

При этом стоит помнить, что полноценная поддержка подобных сайтов — дело не из дешевых."

https://serpstat.com/ru/blog/sajti-na-javascript-dvizhkah/?utm_content=JavaScript-SEO-druzya-ili-vragi

 

 

Здесь нет такой проблемы, используется SSR (Server Side Rendering), т.е. генерация страниц на стороне сервера, всё индексируется, проверено на cezerin.ru демке.

Вот ещё пример демки с сотнями товаров - https://izzi.com.ua/chehly

Например справа сверху сортировка.

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

т.е. если сравнивать с VamShop, это как ajax корзина на http://demo.vamshop.ru

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

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

 

В статье по ссылке конечно зря налегают на то, что есть проблемы с SEO, нет таких проблем именно при таком подходе как в демке cezerin.ru.

 

т.е. грубо говоря, обычное web приложение тормозит, крутится значок ajax, оно не заработает пока всё приложение целиком не прогрузится и это приложение сложно индексировать поисковым роботам потому что все адреса внутри "виртуальные".

С SSR подходом нет необходимости грузить всё и сразу, всё грузится по необходимости, т.е. моментально отображается основная страница и уже внутри запущенной страницы грузится всё что нужно, без тормозов, именно благодаря такому подходу + react получается очень и очень быстрые сайты и для поисковиков такие приложения выглядят как обычные сайты.

Да, это совсем другие технологии по сравнению с php+mysql и намного сложнее если никогда не работал с новыми библиотеками.

Но это будущее, точнее уже настоящее.

т.е. сейчас для всего, для сайтов, для компов, смартфонов будут одни и те же приложения, разработка ничем не отличается, что для сайта, что для приложения.

Унификация всего и вся.

и будет в том числе и для сайтов магазин приложений типа apple store и google play, я так думаю.

В общем, сейчас как раз момент, когда происходит коренной пересмотр подходов к разработке сайтов.

Теперь это уже не просто сайты, а приложения PWA (Progressive Web App) + SPA (Single Page Application).

 

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

 

Это конечно никак не связано с VamShop.

В VamShop тоже много своих плюсов, прежде всего простота и VamShop тоже очень быстрый, особенно на php 7.

Это тоже не является проблемой. Просто это другой подход к разработке, более современный. Ещё одна ветка развития движков для создания магазина.

 

Это новый подход к созданию сайтов/приложений.

Обязательно буду следить за темой и постепенно изучать новый стэк технологий react + nodejs + mongodb.

 

Но это конечно да, больше для всяких программистов, конечному пользователю по сути всё равно, что там и как сделано внутри.

и в этом смысле VamShop намного интереснее, он гораздо проще, как автомат Калашникова, простой и понятный, нет ничего сложного, в этом тоже огромный плюс на самом деле, просто не сравнить насколько просто всё делается в VamShop.

 

 

 

[support 447]

Преимущество react приложений, например админка магазина на react в cezerin, ещё и в том, что Вам не надо обновлять страницу в браузере.

Аналогично вконтакте, к примеру, если появляется новое сообщение, запись, Вы сразу видите его на странице, без перезагрузки страницы.

Тоже самое и в админке магазина, к примеру, если оформили заказ, Вы сразу видите заказ в админке, без перезагруки страницы + получаете push уведомление.

 

[clp5 0]

16 часов назад, support сказал:

Преимущество react приложений, например админка магазина на react в cezerin, ещё и в том, что Вам не надо обновлять страницу в браузере.

Аналогично вконтакте, к примеру, если появляется новое сообщение, запись, Вы сразу видите его на странице, без перезагрузки страницы.

Тоже самое и в админке магазина, к примеру, если оформили заказ, Вы сразу видите заказ в админке, без перезагруки страницы + получаете push уведомление.

 

Интересная вещь. Надо изучать

[support 447]

24 минуты назад, clp5 сказал:

Интересная вещь. Надо изучать

Сейчас как раз и идёт массовый переход всех сервисов, сайтов на react (vuejs)

Так что да, надо быть в теме, как минимум.

Это конечно больше касается всяких там разработчиков, программистов.

 

Для простых пользователей это будет означать просто ещё более быстрее и удобные сайты, без лишних кликов.

[clp5 0]

А какие требования к хостингу?

[support 447]

1 час назад, clp5 сказал:

А какие требования к хостингу?

NodeJs + MongoDb

Но обычные хостинги почти наверняка не подойдут, на shared хостингах обычно нет такой связки, нужен VDS, т.е. с нуля самому ставить всё это.

Во онлайн демка https://cezerin.ru

https://cezerin.ru/admin

Лучше пробовать на компе у себя запускать всё.

 

и лучше использовать docker контейнеры.

https://cezerin.org/docs/#/using-docker

[support 447]

Но сразу говорю, по сравнению с php + mysql, всё намного сложнее, особенно если никогда не работали с nodejs, с настройкой окружения под запуск, сборку приложений.

[support 447]

 

[support 447]

Добавлен новый раздел с документацией - https://cezerin.org/docs/
С пошаговым руководством как запустить приложения (api,frontend,dashboard) в интернете.
Как установить, собрать, запустить приложения.
Как настроить веб сервер, привязать к домену и т.д.

[support 447]

Онлайн демка доступна по адресу:

http://vamhost.ru

админка -http://admin.vamhost.ru