New to Angular and want to understand more about it. I know Ajax can have real time effect by basically repeatedly sending Http requests to server on short time intervals. Can I achieve similar real-time effect using Angular? If true to previous question, how does Angular achieve the real-time effect? Is it the same as Ajax?
In order to be realtime you would need to have server code that pushes data to applications. Angular, which is client side javascript, will only have the ability to pull.
Hmm, I think you should Google some defination about, Ajax, Realtime, and might be Framework also.
But basiclly, AJAX not is realtime. In a deep, It's only effect which make better experience for user. In addition, it's related to Single Page Application.
Realtime is action interactive with many users. The best example you can see is Facebook, chat or notification. User 1 can send message and User 2 can see instantly, no need to reload. Diffirent for AJAX, User 2 can not see the message if he don't reload browser.
About part 2 of your question, after understanding AJAX, realtime. You can use some third party like Socket, Firebase ... which able to use realtime for your Angular app.
Related
I am creating a chat app using ReactJS for a class project web app. For the back-end I am using Rest API. So ideally when I post something on the chat, I would use POST and when I receive a message from the other end, I would use GET. In terms of POST, I figure I can associate that with an event, such as pushing the submit button for the chat app. However, I am racking my mind for how I would call GET for receiving a message. Would it be as simple as using a React life cycle function, such as ComponentDidMount to call GET for receiving a message? Or would I need to use a timer with one of those functions? Or is there a radically different method altogether? From what I see of the life cycle functions, they only update based on changes in state and props.
Quite a lot of questions you have there. I will provide one possible solution.
Choose or implement chat UI, I recommend using https://github.com/PeterKottas/react-bell-chat as it's very easy to setup.
Implement backend, I recommend dot net core as it's fairly easy to wire this up in that framework.
Forget GET-ing messages on a timer. Imagine you have 1000 users getting every 5 seconds. That's a home-brew DDOS attack. Instead use bidirectional communication.
SignalR is the library that can help you implement that, you google the official repo, there's plenty of examples.
Connect to signalR on front end using the javascript (or typescript) client they provide.
And you're pretty much done.
Here they use angular but you should get the gist of it https://codingblast.com/asp-net-core-signalr-chat-angular/
Im trying to create a web page similar to Facebook Home page using MEAN stack.
So when you add a new post, the page adds the post without refreshing it. And if I delete the post the page will delete the post without refreshing the page also.
Should I be using Ajax, Socket io, or etc? not really sure what is the best practice to implement that.
if you have a working example, that will be great.
Thanks
What are you asking for is a situation called server-push where you want the server to be able to notify an open web page about some sort of change so Javascript in the page can then update the display of the page without reloading it.
The usual way in modern browsers to implement server-push is to make a webSocket connection from the browser web page back to the server. This webSocket connection will then stay open and the server is free to send messages to the web page at any time (announcing new posts or deleted posts) and the Javascript in the webpage can then update the display accordingly.
A common implementation of webSocket that works in node.js and all browsers is the socket.io library that you mentioned. It adds some useful features on top of webSockets such as auto-reconnect and a simple message-passing system.
The other less-efficient way to do this is for each web page to send a recurring ajax call (say every minute) to the server asking what has changed recently. But, since this results in a lot of ajax calls where nothing has changed, this can end up being significantly less efficient for both server load and bandwidth usage.
SocketStream is a good solution:
https://github.com/socketstream/socketstream
There are many examples. It will take some time.
I had the idea to make a SPA application using angularJS and then just sending AJAX updates to the server when I need.
My initial idea would be make the client application fly, but if I have to do an AJAX round trip to the server, I think the time would be approximately the same as to request a single web page.
Requesting a page just has more bytes of data, is not like I'm requesting 20 resources like in this article: https://community.compuwareapm.com/community/display/PUB/Best+Practices+on+Network+Requests+and+Roundtrips
I would be requesting a page or resource per request.
So in the end even if I create my client side application as a SPA using angularJS, these requests (would have to be synchronous and show a please wait message while they don't return, as I don't want to user to take more actions before I make sure his request passes validation and is processed correctly) would take some time and make user wait, just about the same time as requesting a full page.
I think SPA pages would be very useful if I have like a wizard on my app with multiple pages/steps and at the end, submit the results of wizard, to the server, which I don't.
Also found this article:
https://help.optimizely.com/hc/en-us/articles/203326524-AngularJS-Backbone-js-and-other-Single-Page-Applications
One of the biggest advantages of Single Page Apps is that they reduce
data transfer. As a result, pages after the initial loading usually
can be displayed faster and seem more interactive.
But I don't believe this last quote is really true.
Am I right, or is there a way that I'm not seeing to build an application that would look like it's executing locally?
I know how guys will start saying "depends on what you want", but lets focus on this scenario where there's no wizards.
What ever you said is right. But most of the frameworks(Angular,BackBone) you take they are going to cache the templates of html on the browser so the rendering would be pretty fast compared to the normal applications. Traditional apps will have to fetch the html from the server for each request which is a time consuming one.
Hope this helps you!!!
If you are wanting to go through that syncronous server side validation step for each page request, then there is probably no big advantage to using AngularJS.
If you are requesting a page and then manipulating that page's contents once it's loaded you might want to consider AngularJS. A good example would be requesting a page that displays a list of items. Now let's say we want to search that list or order it in different ways. Rather than using AJAX to call the server to filter the list and then re-render it, it could be much faster to user AngularJS to filter and re-render the list without making any further requests to the server.
I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?
The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:
For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.
I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?
It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.
I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:
web-socket-js ( this needs a websocket server )
Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )
If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome
I think you have to distinguish two cases:
You render the page for the first time.
You update parts of your page when something changes
Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this:
<script type="text/javascript">
var myCompleteModel = { /* Here goes your model */ };
<script>
The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.
I can I implement following workflow with MarionetteJs:
User opens site by URL
Server generates HTML + JSON data
MarionetteJs reads JSON data and "attaches" to generated HTML. So it doesn't rerender templates.
User do something -> MarionetteJs updates DOM, sends server requests, etc
So the main problem for me is 3 - attach point. What is the best way to implement dual rendering with MarionetteJs?
This is something that hasn't been baked in to Marionette, yet. I've seen a number of other people solve this for Backbone in general, and it might be easy enough to take their solutions in to account.
Hopefully someone will have an answer for you, though. I'd love to see an add-on or plugin, or pull request to the project for this.