Какой стек использовать для разработки SPA?

2 ответов

Прикидываю связку для SPA с ssr для учебного проекта - магазин товаров - с админкой, crud товаров, корзиной и заказами.
Если попрет - то туда еще подключить оплату и личный кабинет пользователей.
А если очень попрет - то и на базе апи бекэнда сделать обмен с какой нибудь сторонней ИБ.

Теперь про стек
В качестве БД хотелось бы использовать реляционную БД, например Postgres.

В качестве бекэнда Сначала думал про express, но что то говорят, что он "не на коне" и, погуглив нашел fastify
Не подскажете, как он работает с Sequelize? Хотелось бы ORM использовать а не запросы писать.
Так же почитал про NestJs - как я понимаю - это комбайн все в одном, может быть тогда лучше его использовать?

В качестве фронтенда больше склоняюсь к Nuxt, так как в целом Vue больше импонирует, ну и у Nuxt есть ssr (Конечно же и у next'а он есть, но там про React). Если использовать Nuxt, то опять же, какую версию? Читал, что в 3 они много чего поизменяли и, банально если посмотреть какие нибудь примеры приложений на нем, то, в основном, все будет на nuxt2.

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

Дополнительно:

Если Nuxt, то 3 очень сырой, берите 2

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

Ответы:

Для обучения нужно работать с минимумом фрейморков в идеале вообще без них, буквально
Чтобы было понимание 'как это работает на самом деле'

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

ваистену ты мудрый программист! ))
и обязательно надо изобретать велосипеды
ыть, для обучения велосипед и грабли - лучшее
я серьезно
rPman, да
но бытует обратное мнение
мир очевидно сошел с ума давным давно

начинающему лучше всё сделать на чистых языках без ничего
без готовой СУБД, только файлы или SQLite

это импонирует и попрет непосредственно

sqlite это тоже готовая СУБД
до маразма доходить не надо, пуст ьбудет база данных, мало того в том же php более чем достаточно штатного PDO (неплохой ОРМ для баз данных)

веб сервер тоже с нуля писать не нужно, а если потребуется какой-нибудь websocket, пилить с нуля свой не надо, отличный ReactPHP даст все что нужно да еще и с асинхронщиной

а вот что то сложное на клиенте пилить настоятельно не рекомендуется, когда я смотрю многомегабайтовые наслоения в современных веб сайтах, мне почему то хочется кого то больно бить. Я помню пилил сайт с шаблонизатором размером в 20 строк javascript кода, и ничего, все вроде работало
sqlite это библиотека
а другие СУБД работают как отдельный сервер
лучше начать с файлов
далее sqlite
и SSE

всё остальное после

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Виктор Sys Ответ

Для разработки одностраничных приложений (SPA) существует множество стеков технологий, каждый из которых имеет свои особенности и преимущества. Вот несколько популярных стеков, которые можно использовать для создания SPA:

1. **React + Redux**: React является одной из самых популярных библиотек для разработки пользовательских интерфейсов, а Redux - библиотекой для управления состоянием приложения. Вместе они обеспечивают хорошую производительность и удобство разработки.

```php

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
 
const store = createStore(rootReducer);
 
const App = () =&gt; {
  return (
 
      {/* Your app components here */}
 
  );
};
 
export default App;

import React from 'react'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); const App = () => { return ( {/* Your app components here */} ); }; export default App;

```

2. **Angular**: Angular - это фреймворк, который предлагает все необходимые инструменты для создания SPA, включая маршрутизацию, управление формами и HTTP-запросами. Он также обеспечивает хорошую поддержку и документацию.

```php

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
    <!-- Your app template here -->
  `,
})
export class AppComponent {
  // Your app logic here
}

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { // Your app logic here }

```

3. **Vue.js + Vuex**: Vue.js - это простой и гибкий фреймворк, который позволяет создавать интерактивные пользовательские интерфейсы. Vuex - это библиотека для управления состоянием приложения, которая хорошо интегрируется с Vue.js.

```php

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store';
 
Vue.use(Vuex);
 
const app = new Vue({
  store,
  // Your app options here
});

import Vue from 'vue'; import Vuex from 'vuex'; import store from './store'; Vue.use(Vuex); const app = new Vue({ store, // Your app options here });

```

4. **Svelte**: Svelte - это компилируемый фреймворк, который переводит ваш код в оптимизированный JavaScript во время сборки. Он обеспечивает быструю загрузку и хорошую производительность.

```php

// Your Svelte component logic here

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

Другие ответы (1) Ответить на вопрос

Дмитрий К.

Для разработки Single Page Applications (SPA) существует множество различных стеков технологий, и выбор конкретного зависит от ваших предпочтений, опыта, требований проекта и многих других факторов. Однако, я могу порекомендовать вам один из наиболее популярных и мощных стеков для разработки SPA - MEAN.

MEAN - это аббревиатура, которая означает MongoDB, Express.js, Angular и Node.js. Давайте рассмотрим каждую из этих технологий подробнее:

1. MongoDB - это база данных NoSQL, которая хранит данные в формате JSON, что делает ее отличным выбором для работы с SPA. MongoDB обеспечивает гибкость и масштабируемость при работе с данными.

2. Express.js - это фреймворк для Node.js, который облегчает создание серверной части вашего приложения. Он предоставляет удобные инструменты для обработки маршрутов, запросов и других аспектов серверной логики.

3. Angular - это фронтенд фреймворк, разработанный Google, который обеспечивает структурирование и управление вашим SPA. Angular предоставляет мощные инструменты для создания динамических и интерактивных пользовательских интерфейсов.

4. Node.js - это среда выполнения JavaScript на стороне сервера, которая позволяет вам создавать высокопроизводительные и масштабируемые приложения. Node.js интегрируется отлично с Express.js и обеспечивает эффективное взаимодействие между клиентской и серверной частями приложения.

Используя стек MEAN, вы получите полный набор инструментов для разработки современных SPA. Однако, помните, что выбор стека технологий всегда зависит от ваших потребностей и опыта, поэтому не стесняйтесь исследовать и экспериментировать с другими стеками для SPA разработки. Удачи!

// Пример кода на JavaScript (Angular)
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My SPA App';
}

// Пример кода на JavaScript (Angular) import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My SPA App'; }

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 1 ответ

Какой стек использовать для разработки SPA?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно