Comments (6)
Hello guys,
Please share your thoughts and concerns about this idea.
As a starter, here is the main value points and the concerns as I see it:
Value to the readers
they can experiment with the code snippets without having to leave the page.
Concerns
the size of the javascript files:
- klipse plugin: 1.1 MB, 224KB zipped
- babel: 1.4 MB, 459 KB zipped
- codemirror: a few KBs
from react.dev.
Those file sizes are valid concerns certainly. I think we could potentially do some things to mitigate them. On the Babel REPL (source code here) we do a couple of things to help with this:
- Load all big libs (eg Babel, big plug-ins) from CDN to benefit from browser cache.
- Defer loading any plug-ins until needed.
- Load them into a web-worker context so that compilation doesn't slow down the UI thread.
from react.dev.
Before reducing the footprint, would you like to give it a try on one or two pages of the react documentation and feel how it feels both on desktop and on mobile?
from react.dev.
I think it would be reasonable to put together a minimal proof-of-concept to see how the UX was before we worry too much about performance optimizations, sure.
from react.dev.
Hello guys,
I've been working on an integration of Klipse using [gatsby-plugin-klipse] (https://github.com/ahmedelgabri/gatsby-plugin-klipse) written by @ahmedelgabri. Here is the Work-In-Progress pull request #236
Let's continue the discussion there.
from react.dev.
I'm going to close this issue for now, for the reasons I mentioned in my comment on PR #236. I'm happy to keep talking about and re-evaluate any new ideas of proofs of concept though! ❤️
from react.dev.
Related Issues (20)
- [Suggestion]: Reference: component prop list shoud be more readable
- [Suggestion]: Broken link in README.md for react-html package HOT 4
- [Suggestion]: items in the sidebar tree should collapse on clicking. HOT 6
- [Typo]: Minor typo in Updating Objects in State HOT 1
- Several pages not found in Prerequisites at React Fiber Architecture.
- Link in react console warning is not found
- Broken warning URL in console HOT 2
- [Bug]: Not Working In Local Environment HOT 1
- [Bug]: Reusing Logic with Custom Hooks docs example doesn't work with firefox
- reconcilation topic not found
- The documentation for higher-order components seems to be missing?
- React HOT 1
- New react storiges
- [Bug]: useActionState example compilation error
- Requires Babel "^7.16.0", but was loaded with "7.12.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
- [Omission]: useOptimistic is documented as having a required second parameter HOT 1
- Reactjs
- 25673b1c476756ec0587fb0596ab3c22b96dc52a
- Natthachai
- [Bug]: Left navigation is not displayed in Chrome HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.dev.