Everyone. I'm researching about react-virtuoso. It's a new repository for efficiently rendering large component list.
It's pretty new. I'm getting of stuck about how it works. Why react virtuoso can overcome problems of react-virtualized?
Thanks a lot <3.
React virtuoso author here.
The project has been around since 2019 and has 6M+ NPM downloads. I would not consider it new, but it is newer than react-virtualized and react-window.
It has been specifically designed to overcome the challenges of variable item sizes by using optimized data structures.
If you're interested into understanding its implementation, you can will have to get acquainted with its internal state management paradigm, urx. From there on, you can read the source code - there are several core features that take care of the sizing and scroll handling.
Hope this helps.
Related
We're in the beginning stages of this project, so right now we're just trying to figure out how best to start.
We want to create a UI library of React components, and what we'd like to do is create the library so that you can import just one element directly, so that:
// bad
import {Button} from '#mycompany/uilib'
// good
import Button from '#mycompany/uilib/Button'
That's the big question. So we're looking at a couple of solutions to start - we've taken a look at create-react-library and lerna or storybook might be better starts?
Here's what we're looking for, from a business & engineering perspective.
We all think Typescript is the way to go.
We think that rollup might be better for this type of project than Webpack, but we're not entirely sure. It may be worth a little overhead if it increases dev turnaround and is easier to maintain/configure.
But the big question is that I'm not sure how packages like, say, '#material-ui/core/Button' do it. Googling hasn't helped much, thus the appeal to the StackOverflow gurus. Thanks.
Firstly, I'd suggest sticking with the well-written and supported create-react-app with TypeScript support. This gets a lot of the initial config out of the way.
Then, I'd encourage you to have a look at a combo of Yarn Workspaces and Lerna. Setup can be tricky, but the automated symlinks, and the ability for your individual components (packages) to depend on each other, makes this a powerful combo.
On the dev cycle and "playground" front, Storybook is hard to beat. They have some amazing stuff coming soon around docs, which will be quite powerful (and visually pleasing)
Let me know if you have any more questions - this topic is front-of-mind for me at the moment, so my head is swimming with ideas.
I've been tasked with creating a dynamic table for our UI. We decided to use the tech stack of React/Redux and are trying to figure out the best way to develop:
Questions:
1) What, in your experience, has been the best tool to create a dynamic table that works well with action creators and user interactions?
a - Issue: Being able to sort and search without creating massive code
b - Issue: Being able to edit in row and delete in row
2) I've been playing with Material UI, Semantic UI, and others. Any thoughts on which one is easiest to customize
As always appreciate the help, sorry for the noob questions. I've been trying to code in Material UI, but it's a bit difficult to manage since I don't have much experience with it.
Did you try RC-Table? If not, I would recommend to give it a shot. RC components are the primary building blocks using which the entire ANT lib for React was built. RC components are majorly focused on various functional logic which is extended by ANT components. You can either try to use core RC-Table itself or ANT-Table to find if it eases your efforts. In our development, we consumed a few RC-blocks and it solved lots of our purpose. This has
Sorting without massive code (with their examples I believe)
Able to Edit cells and Delete rows.
I don't believe there exists a library that solves all purposes with all ease. Everyone has its own pros/cons. But you can give this RC/ANT a try if it would solve your needs. Nevertheless, referring RC blocks at any stage of REACT component development is worth a read.
I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.
So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.
I'm interested in general advice but also have two specific questions:
Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?
Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?
If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.
Thanks!
Similar difficulties can be found in another post I have answered
Besides sketch to react/html, we also spend much time on "React Native".
Originally we are optimistic because the same technologies we would use to resolve the issue
react-based concept (Virtual DOM tree)
support flex layout
But it's not that easy, but still achievable. The major problem we suffered is that the flex of react native is not 100% the same to CSS flexbox, even not close.
The layout engine of RN is using yoga which is still different from CSS flex.
With the difference, we have to separate our two codegen for react and RN and add many special rules to adapt the difference.
After 6 months fighting and iterations, we have made good progress to this problem. The key problems we suffered are still "structure adjustment" and "layout model & settings" which is still required some kinds of human intervention. You can check our initial demo result (just demo video, haven't released yet) for reference.
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history
Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.