Injecting Node.js into static HTML - javascript

I'm currently looking for a way to make node.js-API-calls from static html. I've looked at Express and similar template engines, however they would require me to write my html and generate it from their template engines instead of the other way around. I often get production ready HTML from designers and don't want to rewrite that to fit with express. Alternatively is there a converter from existing .html to template engines?
To get a bit more basic, I want to use node.js in a similar way to ajax, basically being able to call things like <img onClick="someNodeFunctionWithDatabaseCalls()"> from an html-file running on node as a server and then manipulate the .html-file with DOM or something like that. Is there a way to do that?

Node.js is for server-side scripting only. In order to run node.js code in response to an event on your webpage, you will have to use websockets to send a request to your server, which can in turn run the necessary code (db requests, etc.).
As far as various web sockets go, I would recommend using socket.io; it is very simple to use, and is well known for working on many different devices. See socket.io for more information and examples.

Related

Serving personalized javascript code to a client

First of all, I've tried to look for answers in different questions and forums, but I've struggled to find the correct search keywords, so I haven't found anything relevant.
Basically, I've taken on developing a simple implementation of a live chat widget for websites, similar to olark, liveChat, etc. Since, I will be using Socket.IO, I am looking for an easy way to provide the javascript code to a potential client (which might very well not be tech savvy). So the idea is to have just a simple <script> tag which either dynamically creates another script tag with the source pointing to my server, or just a script tag with the correct source.
The problem I have is regarding the server response to that request. In the test implementation, I am adding a script tag which makes a call to the server and the server responds with the javascript code in a string, which I find a very crude way to do it. The reason why I can't just serve a simple javascript file is, because it needs to be personalized, so I can keep track of where the client is connecting from in order to get the to the proper "agent" (manager of website). I could probably create separate files for each user, but I am not sure how maintainable and efficient that would be.
So my question is, how would I serve this personalized javascript code in an efficient and secure way? I am using Laravel as a backend, if that makes any difference.
In the test implementation, I am adding a script tag which makes a call to the server and the server responds with the javascript code in a string, which I find a very crude way to do it.
If it works for your needs, this is a good solution.
If it feels crude, there are a few things which can help keep it clean. Keep your javascript in a separate file and use file_get_contents to read from that file. Where you need to use placeholders to personalize this, you can add %s and use sprintf to pop in the personalizations.
There are a few pretty large ad networks out there which are serving up javascript in just this fashion so I do not believe there is anything inherently wrong with this method.
As far as security goes, I'm not sure what you can do besides making sure everything is served via HTTPS. I'd hope that there is no need to pass sensitive information via get variables.
You can transmit just the javascript without a <script> tag to the client and then use eval() to run the code there.

How does Node.JS work as opposed to PHP?

I'm thinking of switching from PHP to using Node.js for developing my website. However, after researching Node.js for a little while, I can't seem to find exactly how to write a webpage with Node. I see that you use response.write() in Node to write html to your webpage, but that seems like a tedious thing to do, having your entire webpage as a string literal in your node file. How does web development work in Node as opposed to PHP's method of embedding the script into the HTML file?
You don't necessarily need to use response.write for each line of the view, you can use template engines as well. Search for "node.js template engines". At first impression it could seem tedious, but a similar approach prevents you from writing bad code.
PHP is a scripting language, node is a platform built on javascript.
To start web development using node.js, at first you have to understand what makes node different. Node gives you a way to make async calls to your database (which is a very simplified explanation), which you can then wrap in nice html and send (route) it to the browser. Alternatively, you can use something like angular.js in the frontend and use node.js to make db requests and response which is picked up by angular.js which updates the front html. If you like the idea of Single page app with async calls to fetch data, use node with angular. The tutorial that I like is https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular Hope this helps!
As others have answered, there exist templating engines for Node. With the current trends in web development, most modern web frameworks encourage the separation of code from the view (or the HTML you deliver to the client). For instance, Ruby's ERB templates, Jinja2 in Python, Handlebars/Jade for Node, and now a lot of modern PHP frameworks support this as well (Zend/Slim).
Another main difference is in how they work and how the languages are designed. PHP is an object oriented language supporting classes, inheritance, member visibility, interfaces, etc. Node.js is Javascript, so using prototypical inheritance.
The communities and ecosystems are different as well. Modern PHP tends to embrace the use of the Composer package manager, and that came after PEAR. However, npm is the official node package manager and it is deeply integrated with the platform. It is trivial to search for new packages and then use them in your projects.
The main architectural difference is that Node is also asynchronous by design, meaning it runs in a single thread and can potentially handle much more connections than PHP on systems with limited memory. When a request comes in to a PHP application, all the services/controllers and everything you defined have to be reinstatiated, you define PHP files and let Apache/Nginx process them. In Node you have a node process which you can proxy outside requests to.
Node.js Provides so many modules to do these things there is framework called express for node.js http://expressjs.com/ You can use a templating engine and create views. some examples are like ejs or jade. It doesnt have to be a string.
PHP is very strongly orientated towards creating web pages from a template, while Node.js is lower-level and broader in scope. A very rough overview of the differences between PHP and Node.js:
In PHP, you'd start a web server (almost certainly Apache), and then put a PHP file in a directory where you want to serve something from. You might use some fancy .htaccess directives to make URLs nicer, etc.
In Node.js you create a script, in which you use the http module to start a web server, and then you supply a callback for whenever a request is made to your server. Deciding which page to respond to the request with, etc, is all your work to do.
In PHP, things like routing a request to a particular PHP file, compression, decoding POST and GET variables, are all done by using Apache - your PHP files are sort of just like templates which Apache runs whenever a request is received. In Node.js, everything, from starting the server to sending HTML, is all done within your Node.js script - you have to do everything.
HTML isn't the first class citizen in Node.js that it is PHP. Generally, in Node.js you are just sending strings to the client. There are plenty of third party templating tools for Node.js - but they will be dependencies, not builtin functions.

Rails: Not ember, not JS responses, but something in-between

I am developing a standard rails application, and so far I haven't used any AJAX, just good ol' HTML. My plan is to iteratively add "remote" links and all that kind of stuff and support for JS responses, because I know that generating JS server side is very very evil, but I find it to be very handy as well, easy, fast and it makes the application snappy enough and i18n comes out-of-the-box.
Using a pure JSON approach would be lighter, but needs lots of client-side coding.
Now imagine that in this application users have a mailbox, and since the idea is that they will be able to do most or even all of the actions without reloading the page, the mailbox counter will never change unless they refresh the page manually.
So, here comes the question: Which is the best way to handle this?
I thought about using Ember (for data binding), and sharing views with rails, via some sort of handlebars implementation for ruby. That would be quite awesome, but not very transparent for the developer (me). Although I guess that I only need to write handlebars views that will be used by ember, the rest can still be written in their original format, no?
Another option might be to use some sort of event system (EventSource maybe?), and just go with handy the JS views approach, and listen to those events. I guess those should be JSON objects, and the client must be coded to be able to handle them. This seems a bit cumbersome, and I need a solution for heroku (faye?), which is where my app is hosted. Any hints?
I think that the ember approach is the more robust one, but seems to be quite complex as well, and I don't want to repeat myself server and client side.
EDIT:
I have seen this, which is more or less the option #2.
One of the advantages of using a JavaScript framework is that the whole application can be concatenated and compressed into one JavaScript file. Provided that modern browsers aggressively cache JavaScript, the browser would no longer need to request those assets after initial page load.
Another advantage of using a JavaScript framework is that it requires you to be a consumer of your own API. Fleshing out the application's API for your own consumption might lend to less work in the future if there is a possibility of mobile applications or 3rd parties having access to it.
If you do not need your application to respond to every request with an equivalent HTML response, I think a compelling case could be made for using a JavaScript framework.
Many of those benefits might be lost if your application needs to respond to every request with an equivalent HTML template. The Ember core has been relatively vocal and in opposition to supporting this style of progressive enhancement. Considering the tools for using a JavaScript framework in this way are relatively unstable and immature, I might be prone to using option 2 to accomplish this.

Using Browser Javascript on Server Side (in Rails 3)

There is a great bookmarklet script that takes a HTML document and, using javascript, strips out the main article content (like Instapaper, but better).
I want to know the most efficient way to use this same javascript script on the server side with Rails 3.
Is it even possible? The ideal would be to be able to request a URL from the server (in Rails) and then parse the response using the javascript, and return the processed text (and then persist it to a db).
I was thinking of just adapting the script in Ruby, but this seems silly, especially since jQuery and javascript itself have a bunch of built-in functions for parsing a DOM. On the other hand, the script uses DOM constructions from the browser, so it might require a server-side browser?
Any suggestions?
We actually do this very thing in one of our webapps. If you want to implement this functionality server-side in your Ruby on Rails application, your best bet is to use a Ruby HTML/XML parsing library, such as Nokogiri.
I wrote an article specifically explaining how to strip out the important information from a linked webpage, like Instapaper does, using Ruby + Nokogiri.
Create a Printable Format for Any Webpage with Ruby and Nokogiri
Maybe run the script in something like Rhino Shell and capture the output?
Node.js comes to mind when speaking about server-side Javascript.
I think the Javascript stuff of readability could also be translated into Ruby but this would probably require some serious amount of work.

HTTP Request, loading javascript DOM manipulations that have been made to the HTML

I'm currently using cURL to do HTTP requests, and it works fine. However I need to get the javascript code and execute it in the context of the HTML, making it manipulate the DOM exactly as if it were a web-browser.
The first thing that came to mind was to use firefox, there's a command-line interface so I thought it would be easy (maybe with some add-on) to programmatically do an HTTP request, let it natively run the javascript and manipulate the DOM, and get the generated HTML after the manipulation.
However this is harder than I expected, given also the fact that there's going to be problems fetching the data asynchronously.
Maybe someone has done this already and could give me some tips on what would be the best solution.
You could probably use Selenium remote control to achieve this.
I would recommend Watir
Watir, pronounced water, is an open-source (BSD) family of Ruby libraries for automating web browsers. It allows you to write tests that are easy to read and maintain. It is simple and flexible.
This is what you want to use for something like this:
http://code.google.com/p/envjs/

Categories