RedwoodJS: 5 функций, которые делают его уникальным среди фреймворков JAMstack

Полнофункциональный фреймворк, сочетающий React, GraphQL и Prisma.

Redwood JS - это полнофункциональная платформа, которая предоставляет механизм для легкого создания, развертывания, масштабирования и обслуживания приложений JAMStack. Команда ReadwoodJS представляет это как:

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

Если копнуть глубже, RedwoodJS соединяет интерфейс React с GraphQL и Prisma. Он выводит вас на новый уровень JAMStack, позволяя развернуть проект с помощью команды git push.

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

Совет: Поделитесь своими повторно используемыми компонентами React между проектами, используя Bit (Github).

Bit упрощает совместное использование, документирование и организацию независимых компонентов любого проекта .

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

Структура проекта RedwoodJS

Вы можете создать новый проект Redwood с помощью Yarn, выполнив следующую команду:

yarn create redwood-app ./newredwood project

После того, как вы сгенерируете скелет проекта с помощью RedwoodJS, код внешнего и внутреннего интерфейса будет помещен в один и тот же репозиторий.

Когда ваш проект будет готов, вы заметите, что есть две папки: API и Web. Папка API содержит серверную часть GraphQL вашего проекта, выполняемого в бессерверных лямбда-функциях. Веб-папка содержит код внешнего интерфейса React.

В целом, в серверной архитектуре есть важные особенности, на которые стоит обратить внимание.

• Перенос базы данных с помощью Prisma.
• Шаблоны для API GraphQL.
• Строительные леса автоматически выполняют операции CRUD.
• Бессерверные функции обеспечивают легкое масштабирование.
• Генераторы производят SDL и сервисы на лету.

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

1. Простая, но эффективная маршрутизация

Redwood Router (RR) - это комбинация React Router, Reach Router и некоторых настроек. Он позволяет отслеживать маршруты с соответствующими страницами, перечисляя все маршруты в одном файле маршрутизации.

// web/src/Routes.js 
import { Router, Route } from ‘@redwoodjs/router’ 
const Routes = () => { 
   return ( 
    <Router> 
       <Route path=”/” page={HomePage} name=”home” /> 
       <Route path=”/users/{type}” page={UsersPage} name=”users” />     </Router> 
   ) 
}
// web/src/components/Admin/Admin.js 
import { Link, routes } from ‘@redwoodjs/router’ 
const Admin = () => { 
   return ( 
     <h1><Link to={routes.home()}>My CRM</Link></h1> 
     <Link to={routes.users({type: “admin”})}>View Admins</Link> 
   ) 
}

Кроме того, функция Именованные маршруты позволяет добавлять ссылочное имя к каждому маршруту по своему усмотрению. Кроме того, в React Router есть три основных типа свойств: n ame, path и page.

• name - используется для вызова компонента Route из компонента Link. В приведенном выше примере маршрут с именем home вызывается в файле Admin.js с помощью Link to = {routes.home ()}.
• path - используется для сопоставления URL-пути к маршруту.
• page - prop указывает соответствующий компонент, который необходимо отобразить при сопоставлении пути.

Помимо этого, RedwoodJS Router содержит перехватчик usePram, который мы использовали для извлечения параметров маршрутизатора и аннотаций, таких как : Int, для сопоставления параметров маршрута с регулярными выражениями. Вы можете найти более подробную информацию о RedwoodJS Routing в его документации.

2. Уникальные генераторы командной строки

Если вы раньше работали с Ruby on Rails, вы увидите несколько общих черт с командами CLI RedwoodJS. CLI позволяет вам сгенерировать любой файл, который вам нужен, в указанном вами каталоге. Он включает в себя две основные точки входа: rw и rwt,, что означает разработку приложения и участие в рамки соответственно. Кроме того, вы можете использовать интерфейс командной строки для миграции и создания шаблонов.

# Create a cell for Users 
$ yarn rw generate cell Users
# Create a layout named Admin 
$ yarn rw generate layout Admin
# Create an About page and set the URL to /about 
$ yarn rw generate page About /about
# Read the DB schema and create the SDL file for the User table 
$ yarn rw generate sdl User
# Create api/src/services/email/email.js and include CRUD functions $ yarn rw generate service Email --crud
# Create the SDL, service, cells, pages and components to CRUD a User 
$ yarn rw generate scaffold User

3. RedwoodJS Forms дает вам свободу работы с обычными HTML-вводами.

Как вы все знаете, работа с React Forms добавляет несколько сложностей по сравнению с типичной HTML-формой. RedwoodJS обнаружил эту проблему и предоставил несколько вспомогательных методов в качестве оболочки для React Forms. Компонент формы RedwoodJS - это оболочка для формы response-hook.

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

import { Form, Label, TextAreaField, FieldError, Submit } from “@redwoodjs/web” 
export const Comment = () => { 
  const onSubmit = (data) => { 
    console.info(`Submitted: ${data}`) 
  } 
  return ( 
    <Form onSubmit={onSubmit}> <Label name=”comment” errorStyle={{ color: “red” }} /> 
     <TextAreaField 
       name=”comment” 
       errorStyle={{ borderColor: “red” }} 
       validation={{ required: true }} 
     /> 
     <FieldError name=”comment” errorStyle={{ color: “red” }} />
     <Submit>Send</Submit> 
    </Form> 
  ) 
}

4. Разместите свою бизнес-логику в одном месте с помощью сервисов RedwoodJS.

Когда я обсуждал архитектуру проектов RedwoodJS, я упомянул каталог служб. Основная цель этого каталога - собрать всю бизнес-логику вашего проекта в одном месте.

На приведенной выше диаграмме показан процесс использования служебных файлов с помощью GraphQL SDL (Schema Definition Language) и ячеек RedwoodJS.

export const schema = gql`
  type User {
    id: Int!
    name: String!
  }
  type Query {
    users: [User]
  }
`
// api/src/services/users/users.js
export const users = () => {
  return db.user.findMany()
}
// web/src/components/UsersCell/UsersCell.js
export const QUERY = gql`
  query USERS {
    users {
      id
      name
    }
  }
`
export const Success = ({ users }) => {
  return JSON.stringify(users)
}

Еще одна особенность сервисов RedwoodJS заключается в том, что если вы назовете оба файла сервиса и файл SDL одинаково, RedwoodJS автоматически импортирует и отобразит все преобразователи из файла сервиса в SDL.

5. Легко извлекайте данные с помощью ячеек.

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

// web/src/components/UsersCell/UsersCell.js
export const QUERY = gql`
  query USERS {
    users {
      id
      name
    }
  }
`
export const Loading = () => <div>Loading users...</div>
export const Empty = () => <div>No users yet!</div>
export const Failure = ({ message }) => <div>Error: {message}</div>
export const Success = ({ users }) => {
  return (
    <ul>
      { users.map(user => (
        <li>{user.id} | {user.name}</li>
      ))}
    </ul>
  )
}

Эти ячейки обычно содержат четыре состояния: загрузка, пусто, ошибка и успех. Эти состояния отображаются автоматически в зависимости от состояния вашей ячейки. Как я уже упоминал в начале, вам нужно указать запрос. Об остальном позаботится RedwoodJS.

Заключение

Основная причина или плюс RedwoodJS - это его способность обеспечить полный процесс разработки в JAMStack. Кроме того, есть много других причин полюбить RedwoodJS.

• Вы можете работать как с фронтендом, так и с бэкендом в одном репо.
• RedwoodJS минимизирует конфигурацию, необходимую для инициализации и развертывания проектов.
• Использует React в качестве архитектуры внешнего интерфейса и GraphQL, Prisma и Appollo в качестве серверной части, которая довольно известна среди разработчиков. Итак, кривая обучения коротка.
• Параметры миграции и формирования шаблонов упрощают настройку баз данных и операций CRUD.

Помимо вышеперечисленного, все обсуждаемые особенности можно рассматривать как достоинства RedwoodJS.

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

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

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

Я надеюсь, что эта статья дала вам исчерпывающий обзор RedwoodJS. Вы можете найти более подробную информацию о RedwoodJS по этой ссылке.

Учить больше