This question is regarding a pattern that observed while doing some maintenance work on Node.js project with Backbone.js in front end and Express framework in the backend. Usually, when I use backbone.js in the frontend, I will create routes using Backbone.js router component and then render views based on the route being accessed by the user. For example, if the user is accessing /user/settings, it will load the UserSettingsView and the associated model(User).
However, in this project, the way the guy who wrote the code is using Backbone.js is quite different. First of all, the router component and Backbone.js routes are not at all used. All the routing is handled by Express itself. When a page loads, it is initially checked wheather a div with a specific id is present in the page and if it exists, then a specific Backbone.js view is initiated and that div's id passed to that view as the el and the associated model/collection is fetched and rendered. For example, see the code below:
$profileEdit = $("#profile-edit");
if ($profileEdit.length) {
profileEdit = new App.ProfileView({
el: $profileEdit,
model: user
});
}
My question is, is this a recommended pattern to use? Are there any disadvantages/advantages of using this pattern over the conventional pattern?
Related
I'm looking to create a single node.js application that will render multiple different client websites.
We currently run one node.js application per client website, but I think this might be overkill as the serverside logic is exactly the same for all of them, the only difference being the handlebars template.
I'm looking to re-architecture to have a single node.js application which will then render the different client's websites based on some incoming information, will use nginx to add a header or something to the request so the app knows which website to render.
Is it possible to store the handlebars template within a database and then request the template at render time? Rendering a simple single page should be easy enough, but I'm struggling to understand how partials would be rendered?
Looking to achieve something similar to Shopify's Storefront Renderer, not sure if it's possible to do with handlebars or if it's better to use of of the LiquidJs ports for Node to achieve this?
https://shopify.engineering/how-shopify-reduced-storefront-response-times-rewrite
I do this with different countries, same concept as you with different Clients.
You just create the Handlebars layout and put it in your partials folder. No need to put template in your database.
Then your server logic will have eg clientName, and your Handlebars will have IfEqual tags (you'll need an IfEqual helper)
Example:
Server route will give a variable clientName.
Handlebars you have the main view page with only the IfEqual helpers.
{{#ifEqual clientName 'Client Name 1'}}
{{> client/clientName1}}
{{/ifEqual}}
{{#ifEqual clientName 'Client Name 2'}}
{{> client/clientName2}}
{{/ifEqual}}
Your helper function will be
, helpers: {
ifEqual: function(x, y, options) {
return(x == y) ? options.fn(this) : options.inverse(this)
} // {{#ifEqual statusLogin 'unconfirmed'}} {{/ifEqual}}
Search nodejs handlebar helper if you dont know how to set it.
So my partial folder, you can create a folder in it called client, and put all your Handlebars template in there. Search for nodejs handlebars partial folder setup if you dont know how to do it.
The handlebar helper function I found it I think in stack overflow, so you can search for others if you want, but for me it works.
Your partial template files just do as normal Handlebar files.
So the main idea is User loads the page, depending on what Client flag you put it, it loads up that template.
I'm still learning Vue.js 2 so I do apologize if this question is a bit silly. I'm building an application using MongoDB, Node, Express and Vue. Normally I'd use a template engine such as Ejs where data passed through Express's res.render method can be readily captured in the template.
Is there a similar way to pass data from backend to the root Vue component? For example, normally, a get request fetches some data from Mongodb, express will render the template file and pass data to it.
app.get("/gallery/:id", function(res, req) {
var id = req.params.id;
database.findById(id, function(err, data) {
....
res.render("home", data);
}
});
Now my root Vue application is attached to html file. I'd like to be able to dynamically render the app with data returned from the database.
I've built an app before that streams data from an api and passed it to my Vue component via socket but I feel like using a socket in this case is unnecessary.
Use http. What's the problem? You can use XmlHttp, or a lot of folk seem to be using Axios. Trigger the call in the onload of your page, or use one of the vue lifecycle hooks. The very good vue docs don't have much to say about how and when to do this. We do it in the onload of the page, and we instantiate vue when the request for page data returns.
The question has already been answered, but I wanted to share my approach. I've been experimenting with rendering an object server side using res.render(), putting it in a div where display: none, and then grabbing the object on the client and passing it to Vue's data attribute.
Been watching alot of tutorials and i see that there is express routing as well as react routing.
Is the react routing for client and the node js routing for server (api?).
Wanting to know if someone could please clarify this as new to React, Node, Express.
Thanks
It is possible (and even recommended) to use both of them in combination.
TL;DR
react-router is used to navigate between multiples pages/views of your front-end app/website. Usually in a single page app (SPA), where pages/views are loaded dynamically.
express router is a way to return static content (index.html, image.png...) AND to handle API calls that are often related to database logic. Those routes are handled server-side.
Example
myapp.com/my-portfolio is a view and should be handled and rendered by react router
// this router render pages components dynamically based on the url
<Route path="/my-portfolio" component={Portfolio} />
<Route path="/page2" component={Page2} />
myapp.com/user/create or myapp.com/api/getMyJson is an api call that should be handled server-side by express router:
// app.js
// api call that return json data
// this is where I will usually return database content
app.get('/api/getMyJson', (req, res) => {
res.send('{"my_var":"value"}');
});
// api call that return the content of folder app/public where
// the index.html and static resources are usually exposed
app.use(express.static('app/public'))
Single page application workflow
The front-end (client browser) request the back-end (your server) for the application static content (myLogo.png, index.html...) usually served by express router
While the first page is loaded and the user begin to interact with the app, the front-end continues to load other pages in the background (lazy loading)
When the user navigate to another page (with react-router), the page is already loaded and the user is taken there without any further server call nor page reloading
On another hand, express router need to handle API calls like myapp.com/user/userId/get/notifications to get data that is not "static" like json data.
I'll try explain the difference through an example. Say we have a single page application built with react at www.example.com
React Routing
We hit www.example.com and the index.html is loaded from the server. Note that it has all of your react pages in your bundle.js file. You now click the about button on the navbar, this sends you to www.example.com/about. This call does not hit the server, it is handled by your react router.
Express
Much like above we hit www.example.com and get the index. This time when we hit /about we get information from the server
Take a look at this blog post:https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
I am looking for a very simple example for using Passportjs (Local api) in my MEAN application. I took a reference from one example on github. There they have used jade to render the page after authentication. But I just want to use my home.html to show home page after authentication.
I have searched many example but in all they are using either jade or ejs. I don't want to use any engine to render the home page.
If anyone can provide a very simple example just using MEAN that would be a great help.
I don't want to use jade or ejs. Just simple html to render page.
Just setup a route similar to this:
app.route("/login")
.post(passport.authenticate("local"), function (req, res) {
res.json(req.user);
});
Then call that as an post call from the function you bind the form to in angular, you don't need to use jade/pug/ejs or any of it. You can simply use express as an API server. Just have angular redirect to the route you want after the successful return of the authentication (you should get a user object back)
I'm trying to build my app with React and Node (Isomorphic Rendering Architecture). I found on github example project but i have problem. I would like to develop my project client and server together, that the same Component can gets data/actions whataever from client nad server simultaneously. For example:
var Component = React.createClass({
render: function() {
return (
<div className="commentBox">
{this.props.client}
{this.props.server}
</div>
);
}
});
You can see that, Component gets props from client and server together. How i can do this?
I tryed 3 github projects but always i can't implement it. I dont know why. of course it's working when i render Component only by server or only by client but it's not working together.
For example when I render Component by server i can't make any actions specific for client (onclick alerting etc.) . So that's why it's important for me. Rendering some data from server and makes some client actions. But together, still on the same Component.
I'm sorry for my poor english!
Jan, it's impossible to do this using React.
They don't work "at the same time".
The server-side React code works by building the HTML page as a text-string, and serving the HTML text to the client.
After the browser loads the page, the React code in the browser will attach itself to the React code that was put on the page (because the server prints out IDs for all of the components, for the browser to attach to, after).
The goal, then, is to feed data to components, instead of expecting to have access to both the browser and the server at the same time.
That way, you can use server-side code to get data for the component, and you can use client-side code to get data for the component, and the component won't care.
This is not quite valid React, or the right way to do JS, in general but have a look:
class ServerElement {
render ( ) {
// sync calls should rarely ever (ideally never, other than booting up) be used
var articles = db.syncGetArticles();
return <Articles articles={ articles } />;
}
}
class BrowserElement {
render ( ) {
// isn't real, and should never be used even if it was
var articles = ajax.sync("GET", "/articles");
return <Articles articles={ articles } />;
}
}
The important part here is not the Server or Browser element (like I said, that's not really going to work), but rather that the <Articles /> element isn't expecting a server or a browser; it's expecting a list of articles.
The benefit of this approach, then, is that the server builds the HTML, but before the page is served, it's pre-filled with data, which will later be updated (replaced or added to) on the browser.
I hope that helps; if it doesn't, ask away, and I'll try to add to the answer.
#Norguard Thank you for your comprehensive answer. I am trying to own your answer. I know that your example code is not valid for React/JS cuz we have to build our db actions in models area. But one thing puzzles me. We are sending API with our '/articles' and gets data from this. OK, its cool, but this is still public data. I wonder about the private data. How to use React Isomorphic to get specific data or server if/else condition to build better app.
If we are using client-side templating language (like ejs) it's very easy. We are building our .html file and injection server methods(or whatever) to specific tags for templating language. How do to the same in React server? I can't imagines this using components and server.
I think that I understand idea you showed me but need time to efficiently build Isomorphic app using React.