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
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'm an old web developer, i'm used to html, css, js (jquery) and using a server side language like Java, Cold fusion or PHP.
Now for the life of me i can't find a good explanation or a how to get started. It just doesn't make sense and i've spent the last 3 days watching tutorials and reading books. This isn't to complain, but to ask a favor. Someone please explain to me how this architecture is setup. In the past, you would have an html file and inject some placeholders which would be filled in by your server side language.
What's the structure now? I have create a Ubuntu server, i have installed NodeJS and it's associations, i created a reverse proxy and installed nginx as my server. PM2 is my process manager for NodeJS apps. Am i on the right track so far?
If so, where does reactjs, reduxjs, babeljs, what is webpack for npm? What is my next step, i'm so confused that i don't know what all of these things are. In particular what is the difference between reactjs, redsuxjs and bablejs and any others, are these all just front end libraries or? What's the npm webpack. Then there's redux and react-redux, what? Thanks for the clarification.
My goal
I want to learn how to make a single page application and takes advantage with as much of bootstrap as possible. I thought react would be the way to go but i'd really appreciate some clarifications and not just a copy-paste from their website descriptions. Thank you guys/gals.
First of all, there isn't a short answer to your question. Each of the subjects can be delved into for days, weeks, or months to understand and master. I will try to use metaphors for all related topics in your question.
Q: What is Babel and why do I need it?
JavaScript has evolved over the past few years. A lot!. JavaScript today has so many new words and sentence structures that old browsers simply can't understand without a translator. Babel is that translator. Modern browsers today (Chrome, Firefox, Edge, Safari) can natively understand most of that modern version of JavaScript, or as cool kids call it ECMAScript2015, or ES2015, or ES6, etc.
Even so, ES(JavaScript) is constantly evolving. New features are being added in stages and babel is keeping up with these stage features, literally translating all these new features into plain old JavaScript that all browsers, regardless of age, can understand. You can play with babel and see what it does here: https://babeljs.io/repl/
Q: What is React?
React is just one of many modern front-end frameworks to help you display your data in an efficient way.
If IKEA produced LEGO for developers, it would be called React. React let's you create LEGO blocks (called components) and put them together to create an app. React components can be purely presentational(or 'dumb'), meaning they will simply return some HTML, or they can be 'smart'. Smart components can have something called a state.
If we go back to the LEGO analogy, the state would be the engine in a LEGO Technics set. If a component was a plain old LEGO car, it would need some outside help to get it moving forward. You push the car with your hand and it moves forward. With a smart component, or a LEGO technics engine, your LEGO Technics car can change its state from resting to moving on its own when the engine starts, intrinsically pushing the car forward from within. So whenever the state changes, your car REACTS and changes. The same goes for a component. React will watch for changes in the state of your component and whenever there's a change (usually triggered by a user event) the component will update. React components can be written in plain old javascript, but ES6 is encouraged, and makes your life as a React developer a lot easier. Thus, you will need a translator, like Babel, to make your React app understandable in the browser.
Q: Redux?
Ok, I will simply stop you here and tell you that at this point you don't need Redux to create a React app. Redux is a library that can be used in combination with any framework or on its own with vanilla JavaScript. What Redux does is give you the ability to abstract your application model or data away in something Redux calls a store. A store can be anything, an array, an object, literally anything. Redux's job is to update that store anytime it receives and action.
Let's imagine Redux is a living person called John. John is given an empty cup (the store). Each time John is told 'pour water', John will grab the cup and pour some water in it. The 'pour water' command is our action. John can listen for other actions, for instance 'empty cup'. Each action goes through a processing unit - John's brain (the reducer of the actions). If John was brainless, he wouldn't be able to execute any of the actions. When John receives a 'empty cup' command he throws the water away. You can teach John however many actions you want, and you can give John a different store to execute those actions on. The important takeaway here is that John has a store(the cup), a reducer(the brain) and is given some actions to execute. So the action, goes through the reducer and based on what the reducer decides, it updates the store. So in JavaScript terms the reducer is a function, which takes an action and returns a store. The action is a plain javascript object, which has a type property ('pour'), and it can also have some payload ('water'). So basically you can tell John, 'pour water' in the cup, where pour is the action type and the payload is water.
Q: React-Redux?
Think of react-redux as a scotch-tape that lets you fuse react and redux together, so that each component can send an action to the reducer, and each component can have access to the store.
Q: Webpack?
So with the above example we already have several libraries. Babel, React, Redux, React-Redux, and who knows how many other libraries, assets, files and what not you will need in your project. Probably what you are used to is importing each of them in your index.html using the script, image, link tags. Well, overly simplified, webpack does that for you! Whenever some module in your app depends on another module, asset, or anything else, webpack will recursively look for all dependencies and put them together in one file. You simply import that one file in your index.html and you forget about it. Webpack can do many other things for you, but that's the gist of it, hence why it's called module bundler.
Whew, that's about it. You are a real hero if you got this far, and I admire your patience.
P.S.
A really great (and funny) article to help you get up to date with all these libraries and frameworks is this one:
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
As you mentioned that you have worked on HTML, CSS, JQuery and JAVA. It will not be difficult if you understand the need of Reactjs and Redux. If you are using plain javascript or jquery. It will be difficult for you to maintain the code as the size of application will increase. With the help of react js code will be easy to maintain at client side.
Example:
React
Suppose you are creating an e-commerce application which include products, selected product description, shopping-cart, stock-availability of product. If your application is single page. Page will not refresh. You can use react to implement this e-commerce application. You can create components like ProductDetailComponent, ProductDescriptionComponent, ShoppingCartComponent, StockAvailabilityComponent. You will inject all the component in the main component. In this way your code will be more modular at client side. Suppose ShoppingCartComponent needs PriceComponent, BasketComponent. You can use these component inside ShoppingCartComponent. In this way you have component inside other component. If you need to use ShoppingCartComponent in other pages. You simply need to import that component in that page. In this way you can reuse existing component.
All the component will maintain there own data in this way component will not be tightly coupled and can be use at multiple places in our application
Redux
Redux is not related to React. You can use redux with angular as well. Benefit of using redux is you want to share some contextual data across component like user information you can use redux so that user information will be available across component. No need to make additional servder call to get that data. So redux is providing client side caching.
One more benefit of using redux as store is that we can maintain single copy of data. If any component change the data all the component will get notified that data have changed. In our shopping cart example product selected by user can be maintianed in redux which can be used by all the component.
Data sharing between parent to child component
You can pass data from parent component to child component with the help of props as in case of ShoppingKartComponent you need to pass some data to Price component you can use props. You can also pass function as props to child component which child component can call to notify parent component with updated data.
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking
I am using Backbone.js and bunch of other modules to handle Single Page App method. My goals:
The site must be SEO-friendly
Server bootstrap html code to client and data stored in JSON models.
Sub-sequence actions are all handled by Javascript (e.g. render new screen, change url using Backbone router).
My question is: how to structure the server to align with Javascript on each router url and keep it DRY?
For example: if user goes to wwww.mysite.com and then click on some link to go to www.mysite.com/page/2, it must be the same as having him to go to www.mysite.com/page/2 directly on first load.
This seems to be an old topic but I cannot find any solid resource about best way to handle this on server side without repeating the template code in Javascript.
One option I am thinking is to split backend into Node.js and another server to handle API only. The Node.js server somehow share the template construction code as the Javascript frontend
Anyways, love to hear some advice and apology if this is not the right place to ask such question.
I would treat my node server as just a REST interface to my data. I would then handle everything else client-side: I could load templates using require.js with a template plugin like jade, do all my routing using Backbone.Router, and then access my models and collections using Backbone.sync methods (like collection.fetch().)
So for example, when a user accesses "mysite.com/#page/2", I could get my Backbone router to load and display whatever template would be on the page. If I happened to need a list of products to display on that page, then I could make my product collection do a product.fetch(). That would send a GET request to "/products" -- or whatever URL is specified in product.url. My node server would then respond with an array of product objects that the view my collection belongs to could use in rendering itself.