Перейти к содержанию
vamshop

Бесплатный движок магазина на React + NodeJs + MongoDB!

Рекомендуемые сообщения

https://github.com/cezerin2

 

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

https://cezerin.ru — магазин.

https://cezerin.ru/admin — админка.

 

Написан на javascript: и backend, и frontend, всё на javascript.

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
26 минут назад, vamshop сказал:

https://github.com/cezerin2

 

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

https://cezerin.ru — магазин.

https://cezerin.ru/admin — админка.

 

Написан на javascript: и backend, и frontend, всё на javascript.

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

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

круто...   MVC ?

комьюнити есть?

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)

-

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)
41 minutes ago, whiteblue said:

круто...   MVC ?

комьюнити есть?

 

 

Нельзя сказать, что это полноценный MVC, если сравнивать с PHP.

Здесь чёткое раделение backend'а и frontend'а.

В OpenCart такого нет, там всё в куче получается и, по сути, всё является, одновременно, и backend'ом и frontend'ом.

Это если сранивать с cezerin, микросервисными приложениями, api центричными, кому как удобнее.

 

Код пишется на TypeScript и затем через babel компилируется в обычный JS для поддержки всех браузеров, в том числе и относительно старых.

 

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

С совершенно иными подходами, если сравнивать с php+mysql.

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

 

Тот же яндекс переводит все свои сервисы на react. Новый директ интерфейс - это react + api, т.е. точно такой же подход как в cezerin.

beru.ru - это те же самые технологии, что и в cezerin, т.е. react + api, всё крутится вокруг api.

Яндекс маркет на данный момент - это тот же принцип, что и cezerin, т.е. api центричное приложение.

 

В общем, сейчас это уже не просто мода на react, vuejs, сейчас данные подходы уже применяются массово.

 

А если учесть что есть так называемые serverless технологии, amazon lambda, docker контейнеры, всё это намного интереснее обычного php + jquery + mysql + shared хостинг.

 

https://cezerin.org

 

В основном все сидят в slack канале https://join.slack.com/t/cezerin2/shared_invite/enQtNTE5NzYxMzA5ODc5LTVkZjM4ODUwMmNlMmMyZTkxYjg5N2QxZmQ5NjA1NTg3OWM2ZjU1NzVmNWM0N2E3ZmJjM2Q3MjQ5OGFmNTBmYjg

 

Если хотите, подключайтесь, создал там группу на русском.

Канал russian

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

есть хотя бы один работающий (продающий) интернет-магазин?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я пока вижу единственное применение этому: мобильная версия магазина. Single-page application (React и т.п.) круто на мобиле, кода интернет нестабильный.

Но надо делать синхронизацию данных с тем же OpenCart: MongoDB <-> MySQL.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)
41 minutes ago, nikifalex said:

есть хотя бы один работающий (продающий) интернет-магазин?

 

Вот например: https://izzi.com.ua

или вот: http://elpatron.21ninjas.es/

или вот: https://store.getyourdogwalking.com.au/

 

Вот пример страницы с кучей товаров - https://izzi.com.ua/chehly

Видно как работают фильтры быстро.

 

Да, есть проблема с юзабилити, страница не поднимается и не сильно удобно получается, но это не принципиально.

Смотрите как быстро фильтрует.

И без перезагрузок страниц, если смотреть chrome dev console, то видно, что нет лишних запросов, идёт просто запрос данных к API, вовщращает API только "сырые" данные в виде json.

Всё рисуется уже на стороне клиента, не на сервере.

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)
22 minutes ago, toporchillo said:

Я пока вижу единственное применение этому: мобильная версия магазина. Single-page application (React и т.п.) круто на мобиле, кода интернет нестабильный.

Но надо делать синхронизацию данных с тем же OpenCart: MongoDB <-> MySQL.

 

Да, это тоже, т.к. единая кодовая база для любых устройств.

MongoDB гораздо интереснее MySQL, т.е. MongoDB - это так называемая неблокирующая база данных, и так называемая schemaless база данных, т.е. не надо заранее добавлять таблицы, колонки в таблицу.

Всё намного проще и удобнее благодаря единообразию всех данных и кода как на frontend'e, так и на backend'е.

Везде JS + Json, в том числе и база данных вся в виде Json текста и объектов.

 

Но главное - это скорость.

Не надо грузить ничего лишнего, лишних запросов в браузере и т.д.

react можно навернео сравнить с opencart + jquery.

Только приложение на react целиком и полностью динамическое (ajax'ксовое если можно так сказать), а opencart + jquery - частично.

 

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@vamshop , я пишу на MongoDB + node.js и согласен, что это все красиво, удобно и т.д.

Но конечному пользователю все равно на чем написан софт: хоть на Клингонском. Лишь бы удовлитворяло его запросам.

 

Скорость глобально в противоречии с функциональностью, к сожалению. И пока не будет всех фишек OpenCart, применение ограниченное: мобильная версия например.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
25 minutes ago, toporchillo said:

Но надо делать синхронизацию данных с тем же OpenCart: MongoDB <-> MySQL.

 

Вообще-то это именно готовое решение.

Ему не нужны связки с opencart.

 

и использование opencart + react для frontend'а это всё равно не то, это как скрещивание ужа с ежом.

 

Если делать всё на современном JS, то нужно делать с нуля и не тянуть кучу проблем от php + mysql + jquery.

 

В cezerin именно так и сделано.

 

Здесь интерес именно в комплексном и едином подходе.

Здесь принципиально сделан выбор в пользу JavaScript для всего, и для frontend и для backend, что б был один язык. Без мешанины.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)
7 minutes ago, toporchillo said:

@vamshop , я пишу на MongoDB + node.js и согласен, что это все красиво, удобно и т.д.

Но конечному пользователю все равно на чем написан софт: хоть на Клингонском. Лишь бы удовлитворяло его запросам.

 

Скорость глобально в противоречии с функциональностью, к сожалению. И пока не будет всех фишек OpenCart, применение ограниченное: мобильная версия например.

 

Я согласен.

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

 

Да, очень многого нет на данный момент.

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

 

Но я всё равно считаю, что именно за подобными приложениями будущее, а не за opencart.

 

Поживём, увидим.

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
40 minutes ago, toporchillo said:

Я пока вижу единственное применение этому: мобильная версия магазина. Single-page application (React и т.п.) круто на мобиле, кода интернет нестабильный.

 

 

А на десктопе разве не нужны быстрые сайты, быстрые приложения!?

По-моему, гугл уже давно сделал это главной темой в своих блогах, сервисах и т.д. и т.п.

и везде пишет, что скорость и удобство - это наше всё.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
23 минуты назад, vamshop сказал:

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

 

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

Да даже сейчас, обычным хостингом за 100р не обойтись. 

 

Цитата

Но я всё равно считаю, что именно за подобными приложениями будущее, а не за opencart.

 

Поэтому не думаю, что все же люди откажутся от OC.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Мне как предпринимателю важнее как мои магазины интегрируются с Сбером, СДЭКом, Почтой РФ и CRM. Поэтому широким образом не интегрированый в различные сервисы софт слабо интересен, даже до тошноты напичканный модными фичами. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Приблизительное время задержки при вводе

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

 

Вот например: https://izzi.com.ua

 

800 - 1 060 мс
На простейшей странице
https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fizzi.com.ua%2Fabout

Не удивительно если все на JS

Это так лирика

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

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
есть хотя бы один работающий (продающий) интернет-магазин?
А лучше в топе по запросам карточек товаров и категорий.


Отправлено через Tapatalk

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Крутая тема, буду следить, будущее с JS уже рядом :)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

React хорош, но Vue будет получше.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Соглашусь с @markimax , без широкой поддержки комюнити - дела не будет, так как клиенты разные и все будет сводится к тому что нужно будет настраивать подключение к эквайрингам, продвинутым фильтрам и тд. Если вы этим занимаетесь один - далеко так не зайдешь.

тот же react, vue это очень хорошее решение для SPA под конкретную задачу, но для хорошего магазина нужно проделать колоссальную работу. Не могу сказать что я прям в теме но практиковал делать аналог простого магазина на vue+vueroute+nuxt+graphQL

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)

Я и создал для этого тему, может кого заинтересует проект и найдутся единомышленники, так сказать. Которые помогут хотя бы советами, опытом, просто мнение выскажут, а если и делом помогут, то вообще хорошо.

 

Подключение к эквайрингам уже есть на примере paypal, stripe, liqpay.

 

Уже есть Google Analytics с Enhanced Ecommerce отчётами, т.е. с передачей данных по заказам, по корзине, по просмотрам товаров.

 

Есть xml карта, есть мета тэги, проверки для яндекс вебмастера, google webmaster через админку.

 

Проверена индексация, никаких проблем нет ни с гуглом, ни с яндексом, т.к. на стороне frontend'a, т.е., собственно, магазина, испльзуется SSR (Server Side Rendering).

 

Есть офлайн режим, т.е. если нет интернета, не могут быть получены данные из API, у Вас не будет просто писать - Не могу подключиться и ничего не показывать в браузере.

 

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

 

Много чего интересного уже есть на самом деле.

 

Но ещё больше конечно предстоит сделать.

 

 

И даже на текущем этапе это рабочее, готовое решение для небольших магазинов.

 

К примеру, оформление заказа можно упрощать до максимума, можно оставить, допустим, только одно поле Телефон и всё. В Админке - Настройки - Оформление заказа всё это настраивается, т.е. отключаются поля, либо делаютя необязательными.

 

Есть, к примеру, и брошенные корзины, т.е. заказ записывается в базу при начальном этапе оформления, т.е. указал клиент контактные данные, всё, этот заказ уже есть в mongodb, его уже можно посмотреть в Админке - Заказы, в Черновиках, а значит можно уже связаться с клиентом.

 

Если он, к примеру, не разобрался как оформить заказ до конца, не смог оплатить или что-либо ещё.

 

Информация по клиенту не потеряется, всё доступно в черновиках в админке.

 

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Опубликовано (изменено)

Есть webhook'и для интеграции со сторонними сервисами.

и события при которых отправляются уведомления на указанные url.

 

В Админке - Настройки - Webhooks

 

https://cezerin.ru/admin/settings/webhooks

 

К примеру, оформился заказ в магазине, ушло уведомление внешней системе, CRM допустим, и создалась заявка уже на внешнем софте.

Изменено пользователем vamshop

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я изучал эту тему, она перспективная и интересная. Мне показывали проект который оперирует 2млн товарами и с поиском по ним на лету, при этом все на vue.

Без ssr не будет индексации страницы, но в любой случае для этого нужен сервак на node.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Перспективная идея в бушующем. Пока нет большого развития из-за дороговизны разработки.

Появятся дополнение под эту тему за 300-500р. Тогда начнут переходить по тихоньку

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 hours ago, OCdevWizard said:

Я изучал эту тему, она перспективная и интересная. Мне показывали проект который оперирует 2млн товарами и с поиском по ним на лету, при этом все на vue.

Без ssr не будет индексации страницы, но в любой случае для этого нужен сервак на node.

 

 

Да, используется nodejs+express в качестве сервера.

 

SSR есть для frontend'a, т.е. там где он нужен поисковикам, для каталога, с индексацией всё нормально.

 

Админка чисто clientside react app, т.е. без серверного кода.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Вы комментируете как гость. Если у вас есть аккаунт, пожалуйста, войдите
Ответить в этой теме...

×   Вы вставили контент с форматированием.   Удалить форматирование

  Разрешено использовать не более 75 смайлов.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

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


  • Последние посетители   2 пользователя онлайн

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.