How to download React components for offline use - javascript

Is there a way to download React components and also have full javascript functionality? For example, a table component that still can be sorted without a network connection. Offline-first seems to be a possible solution but doesn't exactly specify how to deal with individual meeting. Another possibility is converting the React application to pure javascript that can be run on the client side. But, essentially isn't that what the React compiling does anyway?

Related

is it possible to migrate a plain react-app into next-app?

Is it possible to change/convert a plain react app into next app?
I have a project created with create react app but things have changed and now I want to switch the project into next app
maybe there's a possible way to do that? or should i start over from scratch to build my next app project?
I've been trying to research on how to migrate the project, but didn't found the solutions.
It's difficult to answer this question without seeing the actual project and dependencies you use, but here's a few considerations:
You'll need to convert your current routing solution to the one Next.js uses. Their routing is determined by the file system structure, rather than in code (like react-router). For more information, see their docs: https://nextjs.org/docs/routing/introduction
Ensure all your components and dependencies can render on the server, this may require moving behaviour that uses browser APIs into useEffect hooks (like window or document properties).
Move your hosting and building to something that supports Next.js configurations. There are a few including Vercel, Netlify & AWS.
Also check out their own migration guides that cover how to convert configurations to Next.js: https://nextjs.org/docs/migrating/incremental-adoption
In short, it really depends on what you're currently using and will require manual conversion your code. I hope this was still helpful.

Bundling react components based on per-component permission control before they are transpiled and shipped to client

I am developing an involved web app with asp.net core.
I am developing React components, writing all of my components with ES and JSX syntax.
I run webpack to transpile all of my code (so now I have pre-transpiled files ready to be served)
When a request comes in, I just serve my pre-transpiled bundles.
I wanted to have a way of only bundling and sending user-specific components (based on a list of features they have access to) to the client.
The only way I could figure doing this is to do "on-the-fly permission-controlled component bundling combined with on-the-fly jsx compilation" to serve my components.
I gather that webpack shouldn't be used as an on-the-fly bundler like this, so that is out of the picture...
Partial scrappy solution I came up with:
Using no importing or export mechanism in my js, I use Razor to cycle through my feature list, adding the appropriate (mostly modular) components in what I call "Dependency First Order" to the page, and at the end of each components' code, I write
class ComponentA extends React.Component { //Component Code Here }
window.ComponentA = ComponentA;
So all components are global and can be rendered.
This way, I am able to select what Components get sent to the client with Razor.
NOW, remember when I said "mostly modular"? Well if I am rendering a component within another component that the user doesn't have access to, this partial solution would leave the render statement embedded in main component that is rendering the sub-component itself, without the component code it's supposed to render actually being there. This being a dirty partial solution, I would just suppress the error if the component was non-existent and move on.
Bottom line is I am having a real difficult time making my react components 100% modular and being able to control the granularity of my 'component dependencies' so that no code is on the client that a user shouldn't have access to.
Ridiculous solution someone offered me:
It is also certainly out of the question that I would generate a set of bundles for every user and whenever an admin changes what a user has access to, I would re-render that bundle with webpack. (especially since I am dealing with thousands of users here).
As I am writing all of this, the more and more I feel like I am just being a perfectionist and should just go with the above paragraph.
The solution I should probably go with:
There is the ideology out there to just send all of your js to the browser and then selectively render them based on the permission of the user. Any security loopholes here would just be handled by server-side access control to lock down endpoints if a specific user did try to forge requests to parts of the application they don't have access to (which would be implemented regardless).
I am under the gun here and feel like I am overthinking most of this. I would be greatly appreciative of any feedback. Thank you.
It is possible to ship permission based JS bundle to client. You can leverage webpack dynamic import logic to load only required features JS bundles.
You need to create directory structure based on features and load them based on user permissions. Basically what webpack does is, it creates separate bundle for each feature and load it via dynamic import when requested.
Solution here 👇
Note: You might not see lazy bundles in codesandbox.io network panel, but, you can download project and run server locally to see bundles being lazy loaded.

server side rendering and single page applications

When we use client side rendering, I know this will reduce the amount of connection time with the server, for example if we use react for that (using create-react-app) , react will create one js file contains all of our application stuff except the data we will receive from the api (which will most often be in json) - but that means all the DOM stuff will be in that one js file that the user will get when he load the page for the first time, now for small apps I don't see a problem. But in large applications, when we have a lot of pages, components and sub-pages using routing libraries like react-router, do all these things and code will be in that file? wouldn't that make it too big? to be send at once?
There is no doubt that these techniques increase the performance of the website and interactivity, but my concern is the first time the site is loaded and how to make it as fast as possible with Relatively large applications
Thank you all, the solution is to use "lazy loading" and "code splitting" techniques, This is a good article about this :
Lazy loading routes in react

How to use React only at server side?

I decided to give a shot at just using React only for server side rendering of my components written in JSX.
I decided to eliminate React on the client side as there is not much client side interaction and I thought of adding it later only if needed.
I have couple of questions on this approach though:
How to use plain simple vanilla JavaScript at the client side? I'm still using JSX for my components. Any simple example, like handling a button click via event listener?
Bringing the entire hot module replacement experience with this approach. Right now i am using webpack --watch and then restarting node server on any files changes as also stated in this comment. Also, where it's just pure SSR, how to refresh the screen? Right now I don't have to restart my server, but I have to still refresh my screen to reflect my changes.
Has anyone been successfully able to use webpack-hot-middleware in this approach, where it's just pure SSR?

How to work with server generated HTML instead of JSON with Backbone.js or React.js?

Almost all guides available online talk about working with JSON that is fetched from the server. We are taking an alternative approach to this.
We are generating HTML markup with the data server side, at least on initial page request (mostly for SEO reasons), and then trying to get Backbone.js to takeover from there (for infinite scrolling, or making future POST requests, as an example), a la Twitter.
I have searched online for some guidance on this for over two days now but have not found anything besides this:
SEO And Accessibility With HTML5 PushState, Part 2: Progressive Enhancement With Backbone.js
Am I missing something very obvious or is there a truly clean way of doing this with Backbone and/or Reactjs?
If you're using React, I recommend react-quickstart.
The tools it comes with make server-side rendering very simple, and the client picks up the DOM and makes it interactive.
A minimal React project template which combines:
react-router-component to provide HTML5 History routing and navigation
react-async to create "asynchronous" React components
express to serve pre-rendered React components, assets and provide API
browserify to provide module system for a browser
npm to install and manage server-side and client-side dependencies

Categories