I have server with node.js + express for routing. When I do requests like http://mydomain.com/photos, http://mydomain.com/photos/123, etc I got JSON answer. This is OK and exactly what I need. So RESTful API is ready. But this is just data and I need also to process this data and show it as webUI (html, css, angularjs).
How to implement webUI for this purpose properly?
I need to have unique independent server API in order to use it for different clients: browser web site, mobile apps, etc.
You probably want something like the MEAN stack: MongoDB + Express + AngularJS + NodeJS.
Your client (AngularJS) is being delivered somehow (static hosting, express, cdn, nginx, etc) and then performs REST requests to an external server (Rails, Express, Php, etc) that has CORS enabled if lives in a different domain. This structure is known as Single Page Applications (SPA), where a single big HTTP request is loaded in order to interact with a backend.
That being said, this is nothing new... things like CouchDB, SammyJS and so on had been working on this for a couple years now.
Related
I am studying NodeJS and React front-end. And I want to test what I have learned by making a web page.
I want to create two servers: back-end server to provide API, front-end server to manipulate data by communicating with back-end server through AJAX.
In backend server, I will use NodeJS(expressJS). I have been reading below link to install expressJS server.
enter link description here
but I am stuck on choosing which template engine do I use. Since I want my back-end server to be provider for just only API - besides, I am not sure what API means correctly, I guess it is for manipulating data throguh AJAX
So simply my question is,
What template engine do I have to adopt in my back-end server?
I'm currently working on a new ReactJS application. In all the previous applications I've built I used Express for the server side rendering. I used Express because routing in production mode wouldn't work if I didn't.
So I've recently discovered that it's posible to just always redirect my React app to my index.html file and let the React routing just do it's work. This also works when I deploy my application to production.
I know Express can be usefull for SEO porposes but other than that I have no idea why I would need to use it. So am I just missing something? Or is it just fine to don't use Express with my React application if I don't need any SEO.
React configured as a Single Page App, renders the express routing all but unnecessary. The standard transition from a web server rendered app to a single page app is to change the server into a REST Web API and any server side data needed from the React App is obtained through AJAX calls.
So in most cases you don't need Express when you are using React to handle your routing except for in less common cases when you might want to use express as a reverse proxy or something.
If you want to do server-side rendering, you'll need a node server (typically but doesn't have to be express) to render your React components. This could not only help with SEO but also allow your page to appear to load faster (you wouldn't have to wait for the JS to download and run before the user sees the HTML).
If you don't care about the benefits, don't use SSR.
when deploying react application it is just usually an html and a JS file. So you need some kind of server to host it. Luckily there are services out there that offers that like S3, Github etc.
You're using Express because it can host the html and js files. So technically you don't need specifically express but you need some server that will host your files.
I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.
I am building a React app for a traditional RESTful API server (Golang). The straight-forward approach is easily:
React --> Redux (or any flux) --> Go server
However I'm now thinking of plugging in Node/express as a middle end, so the stack becomes:
React --> Redux --> Node/express --> Go server
The benefits that I can think of are:
Server side rendering
Faster form validation
Wash the data before sending off to Go API, with numerous amazing node packages
Manage authentication and sessions easily
The cons are apparent, with the added layer, any requests that eventually go to back-end will take more time back and forth.
I am pretty new to architecture, would be great to know if people are using this extra stack in their production projects? How is the experience?
We are using a similar stack React --> Redux --> Node/express OR Go server for our application. We sacrificed the additional latency with the proxy node server for the ability to connect with a SSO server (different than our GO server), but also to do server side rendering.
The reason we chose this was because we are a public facing website that allows users to share posts to Facebook. If we didn't have the server side render, we would need to pay for an expensive service like Prerender.io.
The only thing I would propose (which we did) was make SOME calls, like rendering or stuff related to SSO, through the node server, but allow some direct API request go directly to the GO server. Unless you need to do something to each request between GO and React, I recommend this to prevent some overhead.
I understand that Express resides on the server and Angular resides on the client but, as far as I know, Angular can do everything that Express can do which is
routing
interacting with the database
It kind of seems like maybe Express is needed in order for an AngularJS app to be served by Node.js but I'm not sure.
So what are the benefits to adding Express to an AngularJS app?
There are things which should be done server side (i.e. Express, not Angular), most notably user input validation - Angular, as it's client side, can be tampered.
Also, if you'll ever want to offer access type other than web app (i.e. mobile app), you'll probably need an API anyway - Express can do this, Angular don't.
Finally, database access - usually Angular app will need to connect to some kind of backend to perform CRUD operations. You'll either go with hosted DB like Firebase, or you'll end up using your own database. Latter scenario is more popular and you'll need Express (or similar) for that.
Express and AngularJS do not mutually exclude one another, they serve different purpose - in fact it's perfectly fine to use both - express for all your serverside logic, and Angular for client side logic.
Express can be used to host the APIs for AngularJS's service/factory to consume. You can consider AngularJS as MVC and the API on Express as SOA.
There is lot of stuff that one wants to control from server. And that is the place where the server side frameworks come into picture.
An web app is not just some html pages linked together. There are lot of other things that needs to be implemented
Model validation.
Keeping model consistent. Remember multiple users can access the same model at any give time and even change it.
Controlling resource access.
Triggering workflows.
Business Logic.
and other such thing require a server framework. So as mentioned earlier the client side frameworks like AngularJS complement server side frameworks.