-
-
Notifications
You must be signed in to change notification settings - Fork 629
docs: add example migrations guide #3126
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
30 commits
Select commit
Hold shift + click to select a range
94ab21e
docs: add example migrations guide
justin808 483fd7a
docs: clarify migration proof examples
justin808 6b09a4e
docs: timestamp migration references
justin808 19dc8e0
docs: refine migration references wording
justin808 27daf53
docs: timestamp public pr rows
justin808 800da33
Clarify example migration caveats
justin808 3c3c636
Refine migration docs wording
justin808 c03162e
Finish example migration docs cleanup
justin808 a4cf44c
Keep example migration docs stable
justin808 4a7b246
docs: address PR #3126 review feedback
justin808 6f32579
docs: link the issue tracker from the contribute section
justin808 dcec183
docs: address final review polish on example migrations
justin808 7040927
docs: clarify example migration guidance
justin808 7c7ae4f
docs: clarify example migration guidance
justin808 c029bc9
docs: keep example migration guidance precise
justin808 3796d6e
docs: align example migration links
justin808 bed61a7
docs: address review on example migrations
justin808 200ce49
docs: clarify example migration guidance
justin808 e3e3e1a
docs: tighten example migration references
justin808 368a5df
docs: remove duplicate Inertia paragraph in example migrations
justin808 2adc9a5
docs: tighten example migration guidance
justin808 faf25fe
docs: fix markdown link check failures
justin808 4adf758
docs: clarify example migration references
justin808 8d49ef7
Merge remote-tracking branch 'origin/main' into codex/example-migrati…
justin808 9c3529a
docs: resolve migration guide review follow-ups
justin808 4cd2750
docs: address final migration review notes
justin808 e12844b
docs: standardize migration reference links
justin808 a7da991
docs: consolidate migration examples references
justin808 5c07d42
docs: point custom bridge examples to contribution flow
justin808 e08fa27
docs: clarify example contribution links
justin808 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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 |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| # Example Migrations | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| Teams evaluating React on Rails are usually not starting from a blank Rails app. | ||
|
|
||
| They already have one of these: | ||
|
|
||
| - `react-rails` | ||
| - `vite_rails` | ||
| - a custom Rails-side React helper | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| Some teams also arrive from Inertia-first apps. We treat those as a separate | ||
| architecture case study because they are usually broader page-shell migrations, | ||
| not narrow React mount migrations. If that is your starting point, begin with | ||
| [Compare with alternatives](../getting-started/comparing-react-on-rails-to-alternatives.md). | ||
|
|
||
|
justin808 marked this conversation as resolved.
|
||
| This page tracks practical migration references for those cases. | ||
|
|
||
| ## What makes a useful migration example | ||
|
|
||
| The best examples are: | ||
|
|
||
| 1. Real Rails applications, not toy demos | ||
| 2. Small PRs that convert one page, mount point, or component boundary | ||
| 3. Honest about blockers such as old lockfiles, native gems, or custom frontend bridges | ||
| 4. Measured with before-and-after performance or maintainability notes instead of marketing claims | ||
|
|
||
| ## Current public references | ||
|
|
||
| ### Published example repos | ||
|
|
||
| These maintainer-owned references are the stable starting set. Add community | ||
| examples here after they have landed or stabilized enough to inspect. | ||
|
|
||
| 1. [react-rails example app: `react-rails-to-react-on-rails` snapshot](https://github.com/shakacode/react-rails-example-app/tree/c6b794a4b96746dbbc98a46f31119171109d70b0) — | ||
| covers an older `react-rails` v3 → `react_on_rails` v13.4 migration, so treat | ||
| it as a structural reference and follow current migration guides for gem and | ||
| configuration specifics | ||
| 2. [react-on-rails-migration-example](https://github.com/shakacode/react-on-rails-migration-example) — | ||
| demonstrates a Rails 7-era `react-rails` → `react_on_rails` migration with | ||
| Shakapacker client/server bundles and SSR setup, based on | ||
| [ganchdev/react-rails-example](https://github.com/ganchdev/react-rails-example) | ||
|
|
||
| ### In-progress migration work | ||
|
|
||
| In-progress third-party migration PRs are tracked in the | ||
| [example-migrations meta issue](https://github.com/shakacode/react_on_rails/issues/3125) | ||
|
justin808 marked this conversation as resolved.
justin808 marked this conversation as resolved.
|
||
| instead of this docs page. | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| That keeps the public docs focused on durable references while the meta issue can | ||
| carry working notes about draft PRs, maintainer coordination, blockers, and proof | ||
| artifacts that may change quickly. | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| When a public migration becomes a stable reference, add it to the published example | ||
| list above with a short proof note. | ||
|
|
||
| ## Example categories | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| ### `react-rails` to React on Rails | ||
|
|
||
| This is usually the cleanest migration path: primarily a gem swap and mount | ||
| registration change while the app architecture stays intact during | ||
| slice-by-slice conversion. | ||
|
|
||
| ### `vite_rails` to React on Rails | ||
|
|
||
| This is more of an asset and entrypoint migration than a component rewrite: the | ||
| route behavior should stay stable while registration moves into the React on | ||
| Rails and Shakapacker flow. | ||
|
|
||
| ### Custom Rails React bridge to React on Rails | ||
|
|
||
| This is common in mature apps that built a thin wrapper around React mounts. | ||
|
|
||
| Treat the wrapper as the migration boundary: preserve the Rails-side props | ||
| contract, replace one helper-backed component first, and remove the wrapper | ||
| later. | ||
|
justin808 marked this conversation as resolved.
|
||
|
|
||
| No dedicated guide exists yet. If your app uses this pattern and you want to | ||
| contribute an example, see [Contribute an example](#contribute-an-example). | ||
| The [react-rails migration guide](./migrating-from-react-rails.md) covers the | ||
| nearest-neighbor mechanics for helper syntax and component registration. | ||
|
|
||
| ## What counts as proof | ||
|
|
||
| Not every good migration example is performance-first. | ||
|
|
||
| When the change is performance-first, compare the same route on the baseline branch and the migration branch. At minimum, record: | ||
|
|
||
| 1. Response timing | ||
| 2. HTML size | ||
| 3. Route JavaScript bytes | ||
| 4. Number of JS assets needed for the route | ||
| 5. Hydration warnings or client boot errors | ||
|
|
||
| If possible, also record browser load metrics such as FCP, LCP, CLS, and TBT, | ||
| plus interaction metrics such as INP. TBT is captured by Lighthouse; INP | ||
| requires field data or a real-user monitoring tool. | ||
|
|
||
| When the change is maintainability-first, record: | ||
|
|
||
| 1. The custom bridge, oversized mount, or repo-specific contract that existed before the migration | ||
| 2. The standardized React on Rails helper or smaller boundary that replaced it | ||
| 3. What got easier to review, test, or evolve afterward | ||
| 4. The validation that supports the claim | ||
|
|
||
|
justin808 marked this conversation as resolved.
|
||
| Use maintainability notes when that is the honest win. Do not force a weak benchmark onto an example whose real value is simpler ownership or a narrower integration boundary. | ||
|
|
||
| ## Contribute an example | ||
|
|
||
| If your migration could help other teams evaluate React on Rails, [open an issue](https://github.com/shakacode/react_on_rails/issues/new/choose) or [submit a PR](https://github.com/shakacode/react_on_rails/compare) adding it to this page, and include: | ||
|
|
||
| 1. The integration you started from, such as `react-rails`, `vite_rails`, or a custom helper | ||
| 2. The first slice you picked and why it was small enough to review | ||
| 3. The proof you captured, whether that was performance, maintainability, or both | ||
| 4. The validation you ran locally or in CI | ||
|
|
||
| The most useful next examples are: | ||
|
|
||
| 1. `react-rails` apps that migrate one Rails-owned mount at a time | ||
| 2. Modern `vite_rails` apps where one Rails-owned island can move before a broader asset rewrite | ||
| 3. Apps with a custom Rails-side React bridge where one helper-backed boundary can be replaced before removing the wrapper | ||
|
justin808 marked this conversation as resolved.
|
||
| 4. Upgrades from older `react_on_rails` versions to current maintained defaults | ||
|
|
||
| ## How to use these examples | ||
|
|
||
| Use this page together with the specific migration guide that matches your current stack: | ||
|
|
||
| 1. [Migrate from `react-rails`](./migrating-from-react-rails.md) | ||
| 2. [Migrate from `vite_rails`](./migrating-from-vite-rails.md) | ||
|
|
||
| Other migration paths: | ||
|
|
||
| 1. [Webpack to Rspack](./migrating-from-webpack-to-rspack.md) | ||
| 2. [Babel to SWC](./babel-to-swc-migration.md) | ||
|
|
||
| The Rails 5 API-only and AngularJS paths also live in the **Migration Guides** sidebar. For React Server Components migration content, start with [Migrating to RSC](./migrating-to-rsc.md). | ||
|
|
||
| The migration guides explain the mechanics. This page shows what those mechanics look like in real repos. | ||
|
justin808 marked this conversation as resolved.
|
||
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.