I’m new to React, and I have trouble with finding best solution for my app.
My current (Node.js+Express+Handlebars) app has one main menu with place where I render HTML received from AJAX request made after click on menu element. Then all actions inside this element are done by proper JS script. I wanted to improve it by using React, but I have problem with permissions management.
Currently, after authentication, handlebars receive list of files which user should load and render it as src in element. If user has access to only 5 of 20 modules, he can access only proper JS files. Also, he can’t access HTML he don’t has access to.
How to manage it in React? I want to have one interface for all users, but I don’t want to store logic for all components accessible for every user. I was thinking about something like AJAX loading components for React, but how to manage it?
Is it even possible? As I understand (maybe wrong), all React components are compiled from separated JSX files to one main.js, so is it possible to add separate files with other components?
I believe that the issue that you have encountered is a crucial step on the long stairway of making something great. The solution to your problem is the balance of all the present factors and consolidation of them to cooperate on a mutually beneficial basis. I hope that solves your problem
Related
I want to have Web Components hosted by one site, which another site cannot access the inner DOM or Javascript of. Exactly like with iframes, but which can be rendered inside the HTML better, for example sizing to incorporate their content etc.
There have been many discussions about this but in 2019 when I ask this, is anything implemented to do this?
EDIT: Let me be totally clear - I want the JS for the component to be served from our servers, requests to our server to be done from the component’s JS, render stuff in the component, but not let the enclosing site get it or put a trojan horse in the component. I am fine w the encloing site providing CSS but no HTML or JS. Can this be done?
How would it communicate with the component, analogous to postMessage?
Finally, is it possible for the COMPONENTS JS to access the outer containing website’s DOM and thereby find other components and communicate? This last one ain’t possible with iframes on another domain.
Simple answer: No.
Web Components Do not isolate JS. Just DOM and CSS.
But you can put all of your JS within your class, or in an ES6 Module, or in an IIFE and that would isolate it.
But I doubt that Web Components will ever be a 100% replacement for <iframe>. Nor do I think they were meant to be such.
I would not be surprised if the <iframe> were to become deprecated and eventually removed from browsers.
UPDATE
Keeping ALL of the JS code inside your component's class or inside an IIFE will somewhat protect the code. The HTML and CSS are already sand-boxed inside the component. If your code was in an IIFE or in an ES6 module then other code would have to have access to the source file and be able to modify it in order to change it.
Communication from the outside with the component is done by the outside code calling functions of the component or setting properties and attributes of the component.
Communication from the component to the outside is traditionally done by dispatching events. Talking directly from one component to another is a messy option and really should be avoided. It is up to the parent code to listen to events from all its children and then call functions or set properties/attributes on other children.
If you use shadowDOM then the enclosing site can only change the CSS of your components if you make certain aspects of the CSS available to them. This is done either with CSS Varaibles or by using <slot> to allow the enclosing app to place their own HTML/CSS inside your component. This could open you up to some things you may not want though.
The code that is in the class, or in an IIFE can always access anything in the DOM. Remember that JS is not sand-boxed and can do anything any other JS can do. But it is more difficult, though maybe not impossible, for the enclosing app to make changes to your component classes. Make sure your classes are frozen to prevent sub-classing.
One other thing to know is that if you have someone else loading their website from their server and then loading your component files from your server then you may have CORS problems. Especially if your code tries to load data using XHR/Fetch, then you may have CORS issues.
What is the best way to persist user-generated data with NodeJS, Express, and MongoDB?
I'm building my first web-app using this stack (with bootstrap HTML/CSS and JS for the frontend) and I've realised that I need a data-binding solution. I'd rather avoid a complete rebuild of my front-end so it seems like React will be the best option, but I'd rather find out now if I'm missing something obvious.
The app will allow users to create 1-n documents, generate 1-n new components within them, and edit 1-n content-editable elements within those components.
I'm at the point where I've built the server, db, and frontend and the users and documents persist, but the components and their content does not.
The functionality I would like is that, when a user generates a new element or exits the contenteditable area of that element, any changes they have made will persist. I'd like to achieve this without a bazillion API calls.
Any assistance appreciated.
You may create page description in markdown and then render it to react components.
For example you can check https://www.gatsbyjs.org/ plus Remark Custopm blocks plugin - https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks/
My issue: For my thesis I am creating an auction site. I have an admin panel in which I would like to have some configurations so that an admin can specify that if there are 10 days before the end of an auction some components should be displayed in different ways, some should be not visible at all etc. That’s what I call dynamic presentation.
My question: Right now I am working on architecture and wondering if SSR can be helpful in any way? I am already aware that it can shorten download time of some collections from my database even by half, but I am wondering if there is any way how it can be helpful with dynamic presentation itself?
What I already know: I have read all about advantages and disadvantages of ssr or universal rendering in react. Now I am only wondering if it can be in any way helpful with dynamic presentation or it won't matter if I choose SSR or CSR.
Small side question: I don’t have the whole architecture ready yet. What I know is that I would like to have a database, one separate app for an admin, backend and frontend (either ssr or csr). My first thought on how to manage this dynamic presentation was to store some rules in the database. Then the rules could be configured in admin app should an admin want to change anything. The rules should be send to backend and calculated with some additional data from frontend. Then backend could send some flag to frontend indicating which components to display etc. In theory I could move calculating to e.g. NodeJs server should I go with SSR. What I'm wondering about is; can you think of any better way to handle dynamic presentation? What I am most afraid of is numerous ifs in the fronetend. I would like to have some more elegant solution but I have no other idea so far. For some time I thought about a scoring system but I believe it would be too complicated (instead of sending a flag, send a score and frontend will display correct things based on the score). Also it wouldn’t solve the issue of ifs on the frontend.
I am aware that on StackOverflow questions which can be answered rather than discussed are preferred but I am really stuck and would appreciate help.
Basically SSR can provide some speed on your page because all of your data will not be trying to be fetched when the react script will end with an API call. Data are fetched from database when page is requested and be passed to the component to render with the script.
Also another very basic advantage and the reason why everyone are going the SSR way is SEO. You cannot achieve SEO page with react CSR. This is because google bot etc will try and crawl your page without even render it. Is like trying to "view source" of a page. When you are in CSR the page has no content only the initial react divs empty. You need SSR to have data on the first request of the user.
SSR brings the data on the first request of the user until a reload. In the meantime react router fetches data from the api.
Let me know if that help you.
PS: also a helpful link https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
I developed a small node.js app in which I can configure conditions for a custom javascript file, which can be embedded in a webpage, and which modifies the DOM of that page in the browser on load. The configuration values are stored in MongoDB. (For sake of argument: add class "A" to DOM element with ID "B" )
I have difficulties to figure out the best way to serve requests / the JavaScript file.
Option 1 and my current implementation is:
I save a configuration in the node app and a distinct JavaScript
file is created for that configuration.
The page references that file which is hosted and served by the server.
Option 2 and where I think I want and should go is:
I saves a configuration (mongodb) NO JavaScript file is created Pages
a generic JavaScript link (for instance: api.service.com/javascript.js)
Node.js / Express app processes the request, and
returns a custom JavaScript (file?) with the correct values as saved in mongodb for that configuration
Now, while I believe this is the right way to go about it, I am unsure HOW to go about it. Any ideas and advise are very welcome!
Ps: For instance I wonder how best to authenticate or identify the origin, user and requested configuration. Shall I do this like: api.service.com/javascript.js&id="userID" - is that good practice?
Why not serve up a generic Javascript file which can take a customized json object (directly from mongodb) and apply the necessary actions? You can include the json data on the page if you really need to have everything embedded, but breaking up configuration and code is the most maintainable approach.
I've been using ember, node, express since 2 months ago.
I've developed an small app, now it's time to add user auth to it but I can't figure out how to do this.
There are a few questions I have:
1.- In SPA apps, where there's only index.html, I include all .js ember files. So, the user could be able to see all the app logic without auth?. How can I add the libs only when the user has been auth?
2.- What's the right way to auth in ember? I haven't seen a solution in official documentation.
3.- How the frontend communicates with the backend, what's the logic here? It's in every route?
Also I'm looking for an example or tutorial.
Thanks you!
I believe these videos target exactly your question
http://www.embercasts.com/episodes/client-side-authentication-part-1
http://www.embercasts.com/episodes/client-side-authentication-part-2
just to mention a great resource for ember tutorials http://emberwatch.com/ - it contains screencasts, books, talks.. articles - all you need to get started.
There is nothing bad about "seeing logic", you are protecting data, not code. Still, if you really want to protect your code, you can create a separate login page and require authentication for every other resource (app html, styles, scripts, etc.). But protecting EVERY resource of your app means that you can't delegate handling static files to nginx or cdn or whatnot. So, think carefully.
There are to approaches: embedded authentication and separate login page. For the first one you can use https://github.com/Vestorly/torii or https://github.com/simplabs/ember-simple-auth. If you decide to go with the second, you can just use authentication provided by your backend (passport.js, etc) and redirect to login page on failures.
Nothing special, you just write your model methods and handle possible authorisation errors. You might also want to have a user object around to use in your template and route logic.