Skip to content

Commit

Permalink
Added more content
Browse files Browse the repository at this point in the history
  • Loading branch information
Vinod Kumar authored and Vinod Kumar committed May 29, 2022
1 parent fc94e46 commit 162991a
Show file tree
Hide file tree
Showing 8 changed files with 74 additions and 34 deletions.
16 changes: 15 additions & 1 deletion docs/adoption.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
---
id: adoption
title: Adoption guide
title: Adoption Readiness
---

Universal React accelerator has taken several steps to ensure the Adoption Readiness of the tool.

1. Being used by multiple External and few Internal projects.
2. Tested through various sample applications.
3. Preserves learnings from many successful projects.
4. Has a Passionate Core Team to support and enhance it.
5. Detailed documentation site & Video Tutorials from developers who worked upon it.

## Adoption Strategies

Universal React accelerator can be adopted into your projects in multiple ways.

1. **Out of the box Adoption**: You can use `npx create-universal-react`to setup your project, if you are completely aligned with [Technology choices](/universal-react-docs/docs/features/). You can make necessary tweaks and adjust these choices post initial setup.
2. **Clone The Generator**: You can clone the generator, customize it as per your organization needs.
36 changes: 20 additions & 16 deletions docs/features.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
---
id: features
title: Capability Summary
title: Features Summary
---

This accelerator is an highly opinionated collection of tools and best practices. It is possible that you have a different take on some of these choices. Feel free to enhance your project post initial setup or clone of this generator to suit your needs.

## Ecosystem of this reference architecture generator 🎉

- **Scalable Architecture:** Generate SSG, SSR and Micro-App.
- **Development Environment:** Monorepo setup along with Storybook integrated for developing and showcasing components.
- **Micro Frontend:** Develop Micro Frontend architecture with Module Federation.
- **Static Code Quality checks and formatting:** Javascript and CSS linting using Eslint, StyleLint and Prettier.
- **Component scaffolding:** Consistently generate components, services and pages using [Generate-Plop](https://github.com/pagesource/component-generator).
- **Git Hooks:** Pre-commit, Pre-push using Husky.
- **Testing:** Unit testing with Jest, RTL and Test Cafe for E2E.
- **Theme and Styling:** with Styled Components.
- **Next.js:** To develop SSR and SSG with great ease.
- **PWA:** Develop offline apps or just performant.
- **Authoring:** Made easy with Markdown-to-JSX.
- **Development Environment:** Monorepo setup with [Turborepo](https://turborepo.org/).
- **Next.js:** to develop SSR and SSG with great ease.
- **Micro Frontend:** architecture with [Module Federation](https://webpack.js.org/concepts/module-federation/).
- **Component scaffolding:** consistently generate components, services and pages using [Generate-Plop](https://github.com/pagesource/component-generator).
- **State Management:** lightest state management with Context APi and [Smart-Context](https://www.npmjs.com/package/smart-context).
- **Remote Data:** change the old way of using Remote Data with [React Query](https://react-query.tanstack.com/).
- **Unit Testing:** with Jest, [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and Many custom testing utilities.
- **End 2 End Testing Automation:** using [Test Cafe](https://testcafe.io/).
- **Theme and Styling:** with CSS-in-JS using [Stitches](https://stitches.dev/).
- **Generic Component Library:** with basic building blocks via [Next UI](https://nextui.org/).
- **Component Browsing:** development and testing with [Storybook](https://storybook.js.org/).
- **Git Hooks:** to validate changes on Pre-commit, Pre-push using [Husky](https://typicode.github.io/husky/#/).
- **PWA:** for offline apps using [Workbox](https://developer.chrome.com/docs/workbox/).
- **Authoring:** made easy with [Markdown-to-JSX](https://www.npmjs.com/package/markdown-to-jsx).
- **Scaffolding:** of code using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/).
- **Type Safe:** by default using [TypeScript](https://www.typescriptlang.org/).
- **Mocking:** Mock REST and GraphQl APIs.
- **Localization:** Switch content based on language preference.
- **State Management:** Lightest state management with Context APi and [Smart-Context](https://www.npmjs.com/package/smart-context).
- **Data Fetching:** Change the old way of Data Fetching with [React Query](https://react-query.tanstack.com/).
- **Type Safe:** TypeScript by Default.

- **Static Code Quality checks and formatting:** Javascript and CSS linting using Eslint, StyleLint and Prettier.
32 changes: 30 additions & 2 deletions docs/how.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,34 @@
---
id: how
title: How this generator works?
sidebar_label: How Universal React works?
title: How it works?
---

There are 2 Key Pillars of Universal React.

## 1. Accelerate React Development by instant initial setup

React developers can run `npx create-universal-react` generator for setting up Micro Frontend and SPA architecture with essential tooling instantly.
## 2. Continuous Improvement and Support via addition of optional features

React developers can run `npx create-universal-react` generator again for adding on-demand optional features and projects to evolving applications generated with Universal React.

## Execution flow of generator

Following flow chart explains the workings of generator.

![Execution flow of Universal React generator](/img/universal-react-generator-2x.png)

## Possible Architecture Overview

Using this generator flow you can setup and evolve a project into following Architecture types.

![Architecture Types with Universal React generator](/img/universal-react-arch-types-2x.png)

There are 2 ways you can achieve Micro Frontend in this ecosystem.

1. Micro-App Loader: A small NPM package to load any React micro app or Web Component into a given container. This approach is ideal when:
1. You are not loading too many Micro Apps on a page.
2. You don't want to change configurations of Micro App to support Module Federation.
2. Module Federation: Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. Learn more [here](/universal-react-docs/docs/module-federation/).


6 changes: 0 additions & 6 deletions docs/what.md

This file was deleted.

14 changes: 7 additions & 7 deletions docs/why.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
id: why
title: Why we need this generator?
title: Why you need this generator?
---

## Pain Points of Frontend Development!

1. **Reinventing the wheel** when setting up new projects.
1. Reinventing the wheel when setting up new projects.
2. Maturity and quality of the solution depends on the architect on the project.
3. Delays setting up dev eco-systems, quality gates and pipelines.
4. Overall lack of efficiency, as replication of best practices isn’t easy.

## How does Universal React addresses above concerns?
1. Instant initial setup of essential solutions for enterprise scale React applications.
2. Continuous value addition beyond initial setup through evolving accelerators.
3. Attention to Developer experience for great productivity.
4. Preservation and replication of low-level best practices.

1. Enterprise scale React applications needs a lot more focused solutions.
2. Continuous value addition beyond initial setup through accelerators.
3. Developer experience needs utmost attention for great productivity.
4. Preservation and replication of low-level best practices is a necessity in era of green teams.
## How does Universal React addresses above concerns?

With **Reuse, Replicate and Reduce** philosophy at its core Universal React is an accelerator to generate SSR, SSG or Micro-Apps with essential tooling to enable great dev experience and solution quality.

4 changes: 2 additions & 2 deletions sidebars.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
someSidebar: {
Introduction: ['intro', 'why', 'what', 'how', 'road-map', 'contribution', 'adoption', 'support'],
Features: ['features', 'quality-control', 'smart-context', 'unit-testing', 'design-system', 'loader', 'web-component', 'logger', 'generate-plop', 'module-federation', 'monorepo', 'storybook'],
Introduction: ['intro', 'why', 'how', 'features', 'road-map', 'contribution', 'adoption', 'support'],
Features: ['quality-control', 'smart-context', 'unit-testing', 'design-system', 'loader', 'web-component', 'logger', 'generate-plop', 'module-federation', 'monorepo', 'storybook'],
},
};
Binary file added static/img/universal-react-arch-types-2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/universal-react-generator-2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 162991a

Please sign in to comment.