- PVSM.RU - https://www.pvsm.ru -
Настал, наконец, тот момент, когда я могу представить вам боилерплейт React Core Boilerplate (GitHub [1], Visual Studio Marketplace [2]), или, иными словами, готовый шаблон проекта на ASP.NET Core.
Интересно? Добро пожаловать под кат.
Свои разработки, написанные на TypeScript и исправленные мною форки:
Цель данного проекта — поддержать разработчиков данного стека: дать возможность сразу приступить к разработке проектов, не заморачиваясь с решением проблем совместимостей технологий в стеке, их настройкой. Поскольку проект создан "для людей" и содержит, на мой взгляд, интуитивно понятную архитектуру, он также будет полезен и новичкам в обучении React, т.к. не содержит проблем "из коробки" для построения приложений.
Я — фуллстек разработчик. Когда-то любил писать фронтенд на jQuery — от разработки плагинов до сложных сайтов. Однако в один прекрасный день стало ясно: поддержка сайтов на этой библиотеке тем труднее, чем больше проект. Тогда мною было решено заняться изучением других инструментов для разработки фронтенда. Angular мне не понравился из-за своей толстой абстракции и, предварительно изучив достоинства и недостатки каждого фреймворка и библиотеки, я сделал выбор в пользу React, в котором привлекло то, что HTML и TypeScript можно писать код в одном месте (.tsx-файле), не переключаясь между HTML и файлами скриптов.
Со временем я полюбил React. Но, признаться честно, поначалу приходилось применять jQuery и в React из-за плагинов, которые его требуют. А затем, когда я пытался освоить серверный рендеринг из-за известных проблем SPA и SEO, я узнал, что jQuery либо нельзя с ним подружить, либо это будет костыльно (через jsdom, т.к. требуется объект window). Я знал, что этих jQuery-плагинов мне будет не хватать. И с тех пор я начал разрабатывать плагины на "Vanilla JS", которые чем-то схожи по API с плагинами, работающими на jQuery.
Несколько месяцев назад Microsoft выпустила обновление для Visual Studio 2017, в котором был шаблон проекта ASP.NET Core 2 + TypeScript + React + Redux + Webpack с серверным пререндером с помощью NodeServices. Изучая шаблон, я потратил немало времени, чтобы подключить туда SASS через WebPack и обновить последний, поскольку, изучая документацию, форумы и StackOverflow, я не находил нужных мне ответов по настройке этого стека, в то время, как документация была, в основном, по стеку с Angular. Спустя некоторое время Microsoft заменила этот шаблон на create-react-app без TypeScript и серверного рендеринга. Судя по комментариям в интернетах, многих других, как и меня, это смутило. Однако у меня сохранился тот шаблон, и я решил из него сделать свой с блекджеком и плюшками, разобравшись с ним и решив все проблемы разом.
P.S.: Недавно читал, что существуют, так называемые, противники изоморфного подхода к разработке приложений. А как же SEO? Или вы предлагаете рендерить всё платными сторонними сервисами? Насколько я знаю, гугл не всегда может индексировать толстого клиента без пререндера. Ну да ладно.
Документации по NodeServices было мало для решения каких-то проблем: то HMR отваливался, то что-то не работало. Однако, проявив терпение, спустя полтора месяца, наконец-таки, у меня получилось разрешить критические моменты:
⬝ Вместо атрибута "asp-prerender-module" для DIV-элемента во View Razor'a, пришлось инжектить в него ISpaPrerender:
@inject Microsoft.AspNetCore.SpaServices.Prerendering.ISpaPrerenderer prerenderer
и, выполнять вручную скрипт:
var prerenderResult = await prerenderer.RenderToString(%путь к скрипту загрузки серверного рендера%, customDataParameter: data);
Затем, из объекта prerenderResult можно вытаскивать отрендеренный HTML React'a и React Helmet в блоки BODY/DIV и HEAD, соответственно.
⬝ NPM-пакет domain-task не позволял использовать async/await и инструментов для fetch-запросов кроме isomorfic-fetch и fetch из этого же npm-пакета. Это исправлено мною в пакете domain-wait. Теперь fetch-запросы писать приятнее, особенно, используя axios.
Из личного опыта внес некоторые наработки, например, во все методы сервисов (кроме авторизации) принимать ServiceUser и возвращать объект Result с результатом или ошибками. Оба таких объекта + имитация сервиса авторизации уже заложена в боилерплейт. Я противник Identity, да и авторизация не всем подойдёт. Так что, ничего лишнего, да и имитация авторизации легко выпиливается (AccountService, Middleware, ControllerBase).
| .gitignore
| AppSettings.cs
| appsettings.Development.json
| appsettings.json
| Constants.cs # Константы, содержат ключи от куки для фейковой авторизации.
| package.json # Файл NPM.
| Program.cs # Входная точка приложения.
| ReactSSR.WebApp.csproj # Файл проекта Visual Studio 2017.
| README.md
| Startup.cs # Содержит настройки приложения и middleware фейковой авторизации.
| tsconfig.json # Файл конфигурации TypeScript.
| webpack.config.js # Содержит конфигурации WebPack для сборки серверного и клиенсткого бандлов.
| webpack.config.vendor.js # Содержит конфигурации WebPack для серверного и клиентского Vendor-бандлов.
|
+---ClientApp
| | boot-client.tsx # Входная точка для рендеринга фронтенда в браузере.
| | boot-server.tsx # Входная точка для рендеринга фронтенда на стороне сервера.
| | configureStore.ts # Конфигурация хранилищ Redux.
| | global.d.ts # Глобальные определения модулей и типов TypeScript для фронтенда (например, ts-nameof, *.png, и т.д.)
| | Globals.ts # Инкапсулирует изоморфное состояние приложения (например, данные об авторизации).
| | routes.tsx # Настройки маршрутизации для фронтенда.
| | Ui.ts # Включает хелперы для UI (например, всплывающие подсказки).
| | utils.ts # Содержит полезные методы.
| |
| +---components # Компоненты (не страницы).
| | +---person
| | | PersonEditor.tsx # Компонент, входящий в состав примера.
| | |
| | ---shared # Общие компоненты.
| | AppRoute.tsx # Компонент для построения маршрутов с более, чем одним лэйаутом.
| | ErrorBoundary.tsx # Компонент, основанный на паттерне "error boundary". При обёртке в него, помогает отлавливать ошибки в других компонентах.
| | Footer.tsx # Футер для авторизованной зоны.
| | Loader.tsx # Компонент, содержащий индикатор загрузки.
| | PagingBar.tsx # Переключатель страниц.
| | TopMenu.tsx # Верхнее меню для авторизованной зоны.
| |
| +---images
| | logo.png # Логотип бойлерплейта.
| |
| +---layouts # Слои (зоны).
| | AuthorizedLayout.tsx
| | GuestLayout.tsx
| |
| +---models # Модели TypeScript, используемые в приложении.
| | ILoginModel.ts
| | IPersonModel.ts
| | IServiceUser.ts
| | ISessionData.ts
| | Result.ts # Реализация паттерна "Result".
| |
| +---pages # Страницы приложения.
| | ExamplePage.tsx
| | HomePage.tsx
| | LoginPage.tsx
| |
| +---services # Изоморфные JS-сервисы, инкапсулирующие логику для работы с запросами.
| | AccountService.ts # JS-сервис фейковой авторизации.
| | PersonService.ts # JS-сервис - пример.
| | ServiceBase.ts # Базовый абстрактный TS-класс для построения изоморфных JS-сервисов.
| |
| +---store # Хранилища Redux.
| | index.ts # Определения для хранилищ Redux.
| | LoginStore.ts
| | PersonStore.ts # Хранилище для примера.
| |
| ---styles
| authorizedLayout.scss # Стили для авторизованной зоны.
| guestLayout.scss # Стили для гостевой зоны.
| loader.scss # Стили для индикатора загрузки.
| main.scss # Общие стили.
| preloader.css # Стили для первоначального индикатора загрузки.
|
+---Controllers
| AccountController.cs # Контроллер фейковой авторизации.
| ControllerBase.cs # Инкапсулирует свойства и настройки для фейковой авторизации.
| MainController.cs # Контроллер входной точки.
| PersonController.cs # Контроллер-пример..
|
+---Extensions
| ServiceCollectionExtensions.cs # Инкапсулирует методы, позволяющие определять Lazy DI контейнеры.
|
+---Infrastructure # Папка, содержащая основные модели инфраструктуры приложения.
| Result.cs # Реализация паттерна "Result" на стороне сервера.
| ServiceBase.cs # Базовый класс для всех сервисов, реализующих паттерн Facade/Фасад.
|
+---Models
| LoginModel.cs # Модель для фейковой авторизации.
| PersonModel.cs # Модель для примера.
| ServiceUser.cs
| SessionData.cs # Модель данных изоморфной сессии.
|
+---Services # Содержит сервисы, реализующие паттерн "Facade".
| AccountService.cs # Сервис фейковых аккаунтов.
| PersonService.cs # Сервис-пример.
|
+---Views
| | _ViewImports.cshtml
| | _ViewStart.cshtml
| |
| +---Main
| | Index.cshtml # Входная точка приложения, содержащая корневой контейнер, в который рендерится фронтенд.
| |
| ---Shared
| Error.cshtml
|
---wwwroot # Корневая папка, в которую будут собираться бандлы.
favicon.ico
На этом всё. Всем спасибо за внимание и, конечно же, Happy Coding!
Автор: Trixon
Источник [20]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/node-js/295538
Ссылки в тексте:
[1] GitHub: https://github.com/NickMaev/react-core-boilerplate
[2] Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=NikolayMaev.ReactCoreBoilerplate
[3] ASP.NET Core 2: https://github.com/aspnet/Mvc
[4] TypeScript: https://www.typescriptlang.org/
[5] React: https://reactjs.org/
[6] React Helmet: https://github.com/nfl/react-helmet
[7] Redux: https://redux.js.org/
[8] SASS: https://sass-lang.com/
[9] Webpack 4: https://webpack.js.org/
[10] Axios: https://github.com/axios/axios
[11] ts-nameof: https://github.com/dsherret/ts-nameof
[12] domain-wait: https://github.com/NickMaev/domain-wait
[13] NVal: https://github.com/NickMaev/NVal
[14] NVal-Tippy: https://github.com/NickMaev/NVal-Tippy
[15] js: https://atomiks.github.io/tippyjs/
[16] NSerializeJson: https://github.com/NickMaev/NSerializeJson
[17] serializeJSON: https://github.com/marioizquierdo/jquery.serializeJSON
[18] bootstrap3-native: https://github.com/NickMaev/bootstrap3-native
[19] native: https://github.com/thednp/bootstrap.native
[20] Источник: https://habr.com/post/426147/?utm_campaign=426147
Нажмите здесь для печати.