I'm very new to the Java Script world , I use Laravel already for my backend but when it came to the websockets part I kinda got messy , because when I looked for websockets I have read that they all are depending on Node JS for real time apps like chat apps but also I have seen a tutorial making a chat app in Vue Js & laravel echo only without using node js ,
now the messy part for me is , If I want to learn socket.io (for example) should I learn Node Js first ? And is Vue js an alternative for the socketio ?
and How about the ajax ? isn't it able to do the same performance ?
I'm sorry but It's kinda messy for me , I have looked for that but it is still messy for me , thanks for advance
If I want to learn socket.io (for example) should I learn Node Js first?
Yes. Since Socket.IO is a Node.js package, it's kind of a pre-requisite to learn Node. It's one of the easiest tools to learn though, so don't be intimidated.
And is Vue js an alternative for the socketio?
No. Vue.js is front-end framework, which means it's used to build the part of the website you actually see. Socket.io is a package (or framework) that enables bi-directional communication between the front-end and the back-end of your application. You can use it for example to build a chat application.
How about the ajax ? isn't it able to do the same performance?
No. Ajax is short for Asynchronous JavaScript And XML. Which basically means that you use Ajax requests from the front-end to the back-end. The difference here is that Websockets/Socket.IO gives you the bi-directional communication that Ajax lacks. You don't need Socket.IO for all communication though
I agree with everything exposed in the accepted answer except that Vuejs isn't an alternative. It is true that vuejs is a javascript framework to create frontends, but, if you have a nodejs server with a socketio server, you need a client (frontend) which must be able to communicate through socketio. You can see this by yourself here, this is one of the most common vue wrappers library to use socketio from vuejs. I hope this could help
Related
I'm new to Javascript frameworks and looking for framework for my new projects. Until now i created simple apps using MVC framework Django with Bootstrap frontend. Thanks framework i got everything in one package with best-practice well know. For Javascript i used some jQuery libraries without understanding, just configured with doc help.
When i tried to write some Javascript on my own and found there are big changes in JS world (like ES6, TypeScript) i found it very usefull. When i found JS frameworks, i felt in love.
I have read about frameworks, watched some tutorials. As many other, i found React nice. But what i'm completely missing, is the server part. Especially React tutorials creates components or functions, nice UI, but don't cover what happens with data next. I know that React is ment as "V" in MVC. But what is the best-practice or wide-used extension for server part? Are there tutorials or book to take me further than just creating actions and UI?
Thanks for any links, i just need to point best direction. Or is React ment for just specific project parts and better to look elsewhere?
As you said, yes there are quite a number of tutorials and most of them don't cover how do you deploy node apps on the servers. I'll assume you have some server admin knowledge so I'll skip straight to the meat of the setup.
The Server Setup
Regardless of it being a simple static page, a single page API or a react app, you will need to have Node.js installed on any server you will want it to run. Second you will need a production process manager for Node.js. My personal favourite is PM2. The process manages makes sure your app is always on and restarts it if it goes down for whatever reason. You will also need a reverse proxy server (you need this for security and SEO purposes). Again, a go-to for it is Nginx (it's a competitor of Apache)
Two very good tutorials for setting up your server are
Tut #1
Tut #2
The App Setup
Apart from all the server setup you need to handle routing for your app (what happens when you to go to /blog or /login). A stable standard right now is Express.js. You can do without but then you will need to write a lot of the manual routing by hand in Node.js You will set up Express to server back your Index file and any others you may need.
A good tutorial for configuring your Express for a React app is Video Tut.
He does show a bit more but that is on later videos. You can stop once you get the gist of it.
Advanced Stuff
There's also the matter if you want the JavaScript to be rendered on the server or on the client side. For that you will need to make some more configuration for you app. The video tutorial I linked above should show you how to set that up as well if you are interested.
I will soon be starting a new project which involves upgrading my existing application frontend to use React.js. The current frontend makes standard REST calls to a server built using Microsoft technologies, which is not planning on changing any time soon.
I want to utilise the concept of server-side rendering and the new React Saga framework to improve SEO and performance. As I understand, in order to achieve this, I would need to run a Node.js server to enable this behaviour and make server-to-server calls from Node.js to the existing API.
My question is.. is this a common architecture? I.e having Node.js act as a middleman server? (UI - Node - Existing API). Or is there a better way/technique of integrating exiting non-JS APIs with the latest and greatest UI frameworks?
Any resources/materials you can provide for some reading on this topic would be a great help too!
Thanks.
Yes, its common and its also not bad, to split it that way:
Frontend Server
API(s)
The FE-Server will render and serve the UI.
The API(s) could be further splitted in many smaller microservices.
currently I'm working on this project (https://github.com/Giegling/addressbook) and for the backend I use Node.js with Express framework, for the frontend Angularjs. Is it possible to "translate" the backend to Haskell without touching the frontend? If it's possible, which framework should I use? (Yesod, scotty...)
Thanks
Your server simply exposes a HTTP API to your angular app. You can implement that functionality in any web framework (or even without a framework) in pretty much any language.
Yesod is probably the most popular and well documented Haskell framework (personal opinion), so I guess you can start with that.
I want to start the development of an real time and single-page application with authentification, actions, and notifications.
Is it possible to make the back-end treatment with Symfony whom I know well, and to add NodeJS / AngularJS by above?
This plan will help you has to understand me. Is it possible to apply it, and is it a good practice?
First, I believe we need to clarify some misunderstandings regarding the real time and AngularJS. AngularJS $http and $resource use Ajax in the background.
To have real time communication where the server pushes information to the client (instead of responding to Ajax calls), you would have to use Websockets. There are several alternatives in this domain, for example, socket.io integrates very well with nodejs, Ratchet socketo.me is specific for PHP, or you can use a 3rd party like Pusher through github.com/pusher/pusher-angular.
Second, you can certainly invoke PHP scripts from nodejs, however, unless you have a very specific reason to do so, it seems to me that it defeats the purpose of using nodejs. If you do not have such a requirement on use nodejs.
Of course yes.You can have nodejs and symfony2 in your server.you can use nodejs inside Symfony2 using CLI method.in front-end you can use angular and nodejs (converted).There is nodejs package,which lets you to convert your nodejs code to browser(browserify) side code and you can use it with angularjs.NodeJs has a package called socket.io.You can use it to have biDirectinal connection between server and client.
I am having great difficulty choosing which frameworks to use for an app that is about to go into development. I am a front-end guy, and my friend is doing the back-end.
Say I was developing a simple todo list app. I have a template for each item on the todo list. Ideally, I would want the server-side JavaScript to use this template as well as the client-side JavaScript.
So on page load, if there are already 5 todos in the database, the HTML will be compiled on the server. If I then add a new todo item to the list, the client-side JS will compile the HTML using the same template.
I've heard a lot of buzz about Node.js, Backbone.js, etc. It is quite overwhelming just how many options there are for this sort of thing. Can anybody give me examples of using these technologies together?
Node.js is JavaScript on the server-side, while Backbone.js is used to structure your front-end stuff elegantly, using collections, models and views.
Each of the two has their own role. For a better comparison between front-end frameworks you can check Addy Osmany's TODO list, written in a LOT of them: https://github.com/addyosmani/todomvc
There are some nice tutorials over the net on Backbone also:
- http://dailyjs.com/2011/04/04/node-tutorial-19/
- http://backbonetutorials.com/
- http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/
Here's an application that combines Node.js on the server with Backbone on the client:
http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
Backbone (like Node.js) is really popular so you would get a lot of help / resources online.
Sure. Check out TodoMVC to get a better idea of various alternatives.
Paste the template file at the bottom of the page. This way your client code can use it easily without making a call to get the template.
An Example using JQuery when calling your template would be
<div style="display:none" id="sample_jquery_template">
Hello ${name}
</div>
in your client side javascript code
..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );
There are enough templating solutions out there like mustache.js working on both ends.
But for working with the templates on the client-side it is helpful to have the rendered data available.
Henrik Joreteg wrote a nice article about reusing your backbone-models and syncing them between client and server.
Dav Glass from Yahoo gave a good talk showing how he ran YUI3 on the client and server with node.js.
Here is his github of the examples from the video:
You also might be interested in checking out jsdom
I just started learning node and this video really helped me see how to experiment on the server and client with node. You will see him disable javascript and the calendar still works - that was cool.
And here is a good backbone resource:
You might have a look at http://derbyjs.com/#why_not_use_rails_and_backbone
They try to achieve the following when opening a webapp:
Transmit a completely rendered page on the first request.
From then on all changes shall be directly made client side and synced to the server via ajax.
So usually the first request a user makes to a site with a "fat" client is pretty painful:
App data has to be transferred and initialized
Data has to be loaded by the Client
Data is displayed
This behavior is usually way slower than transmitting an oldschool like server side rendered page. Gmail or iCloud for example need some time to load up because they do it like this.