-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Vinod Kumar
authored and
Vinod Kumar
committed
May 29, 2022
1 parent
fc94e46
commit 162991a
Showing
8 changed files
with
74 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/). | ||
|
||
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'], | ||
}, | ||
}; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.