I have built several Backbone apps and appreciate the client-side code structure and organization. I'm moving into Node development, using Express, and I'm uncertain as to how Express and Backbone can work together in the handling of routes.
You need to understand that Node and Backbone are independent from each other.
Node is for server-side (e.g working with a database, api serving etc. ) .
Backbone is a client-side Javascript MVC framework which gives you a structure for organizing your client-side Javascript application. (the application in the browser)
You can have a Backbone application in your client-side and it can hook up to any back-end either Node, Rails, PHP etc...
For more info check MVVM pattern and Javascript frameworks on the client-side.
http://backbonetutorials.com/why-would-you-use-backbone/
http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/
A friend gave me the answer:
Backbone uses hash routes. For instance http://yoursite.com/#foo
Express will use the traditional http://yoursite.com/foo
You can use the routers independent of one another based one which address you path to - a hash route for client-side functions and the traditional route for server side functionality.
Both routers can coexist.
Your question on how Backbone and Express can work together cannot really be answered precisely, because there are really countless ways on which they can work together. Hopefully some of the info below can help you do what you want to do.
First of all, you can use www.example.com/foo (no #) routes on the client side (Backbone) - see the pushState option in Backbone.history.start() documentation. It is possible to integrate the routes on the client side and on the server side. It is not easy to find exactly how to do, though.
Some of the info under those links may help you:
https://github.com/developmentseed/bones
https://github.com/SC5/backbone-serverside
https://github.com/tysoncadenhead/backbone-on-express
http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
http://blog.andyet.com/2011/feb/15/re-using-backbonejs-models-on-the-server-with-node/
You wrote that you have experience with Backbone but you're moving to Node recently so I assume that you are open to other frameworks than only Express. You may consider using eg. restify (in addition to Express) to make a RESTful service which you can integrate with Backbone.
There are also entire frameworks like Derby or Meteor that cover both client side and server side using one code base and you can share much more than just the routers.
(Also, I've just found this year's (2013) HTML5DevConf talk: Surviving Robots and Old Browsers by Server-side Backbone. I haven't watched it yet but it seems very relevant to your problem.)
Related
I have examined and practiced on creating Rest Api's with loopback and ExpressJS seperately
While Using Loopback;
It was really time consuming to read all the documentation and learning loopback specific stuff
It also enables you to create your Api in a short period of time and has lots of magic things inside it.
I saw that if I face problems while developing with loopback. I usually get stuck in finding answers from community.
While Using ExpressJs
You write almost every api endpoint in same format with lots of copied code.
You are comfortable with it and can do anything with ease.
But time consuming if compared with loopback.
My point is to utilize best parts of both ExpressJs and Loopback
So my question is "Does it make sense to use Loopback with ExpressJs and also use Mongoose?"
Related with my question Loopback has a documentation about adding ExpressJS route in Loopback application. Loopback with Express Route
If it makes sense is there any recommendation for folder structuring ?
As #Jspdown wrote in his comment to your question Loopback is really based on Express, so you don't need to make choice between them.
When you work on your application using Express and produce 'lots of copied code', soon you start to optimize it and in fact develop your own framework. So this is exactly what Loopback team already have done for you.
Thus the choice is not Loopback or Express but it is - to invest into study ready-made framework or to develop your own framework. As for me I think that if you are working on relatively simple projects and/or quick prototypes or going to change your programming tools soon - don't study, just do. But if you are working on large, mission critical system in long-lasting project - Loopback is helpful.
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'm starting a project that basically is a single-page app that downloads and shows a bunch of stats (using d3.js). The data layer is Mongo-powered, served through a RESTful API, and the client app will be coded in Ember.js. We want all data to be exchanged through the API, since we also have some mobile apps in the back burner that will hook to the same API.
I'm debating on whether write the API (using Express.js or other server-side MVC framework), or just serve the API use Deployd and not using a server-side framework at all, besides Deployd. I'll provide some hints about the project characteristics:
The main feature is basically a dashboard that shows aggregated stats that are already computed and stored in the Mongo database.
User interaction is minimal, enough only to allow users to customize their dashboards, but users never upload data (other that customization preferences).
Most of the app is a lot of d3.js to create and render a bunch of graphs, which can customized in many ways.
It requires a very rich and responsive user interface.
I proposed skipping completely the server-side framework, and simply go with a bunch of static HTML+CSS and do all the heavy lifting with a client-side MVC such as Ember.js. Since all data download and upload can be handled by Deployd, a pure static site would load much faster and is also easier to scale. Also, (I think) all user-related data and validation can be done with Deployd itself.
The thing is, some of my colleagues had a heart-stroke when I mentioned this idea. So I'd like a reality check: do I really need a server-side framework besides Deployd to cope with problems I cannot foresee yet? Are the benefits of having a pure static site a good enough tradeoff versus having, say, Express.js just in case?
I haven't worked with Deployd before, but from a quick skim of its docs, it is a server-side framework. It accepts requests and respond with json. It's just oriented to APIs and json and neglects html, unlike, say, default Ruby on Rails.
The main issues I can think of that might arise due to a lack of a traditional server-side framework are things like auth, CORS, and XSS/CSRF/other common security issues. You could cater for this through Deployd if it's built in or easily added, but that may be difficult.
Looking further into Deployd's docs, I see there's a guide for users and CORS. I can't find anything about XSS or CSRF.
I have done considerable reading on both Node.js and Backbone.js; I've read some tutorials and done the relevant courses on Code School. I feel that I've got a pretty good idea of the functions that each technology serves in the context of a web application.
My problem is that I don't really know how to integrate the two technologies and use them in tandem. I would really appreciate if someone could point me to a resource which goes through the entire development of an application using Node, MongoDB, and Backbone together.
Many thanks
This is a good tutorial that shows how to setup that entire stack.
http://backbonetutorials.com/nodejs-restify-mongodb-mongoose/
In short...
Node.js
You can use a library like restify to provide a restful API for your client-side Backbone application. It can also serve your static assets for your Backbone application. The example uses restify, but could be accomplished with other libraries like express.
Mongoose
Mongoose is a javascript abstraction layer for MongoDB. This provides an easy way to interact with MongoDB from Node.js.
Backbone
Your Backbone application can utilize your restify node.js backend to handle the model synchronization. You should have plenty of control to setup the routes via restify in a way that makes Backbone happy.
This ebook could be useful (it's on Backbone, but uses Node for the backend):
http://addyosmani.github.io/backbone-fundamentals/
You also may want to look at this book:
http://www.amazon.com/Building-Node-Applications-MongoDB-Backbone/dp/1449337392
There is also Node Cellar Source.
There is not much explanation about the code, but the app is simple enough to get started and understand the basics layouts of node / backbone
It is, i think, just between an 'Hello World' code and a full app.
I use for ap in backbone yeoman https://github.com/yeoman/generator-backbone and you use it with node.js too
create rest api: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/
code backbone on the client: http://coenraets.org/blog/2012/10/nodecellar-sample-application-with-backbone-js-twitter-bootstrap-node-js-express-and-mongodb/
the backbonetutorials.com restify one is out of date. It's best to use express, especially if you plan to do any authorization. It's also more widely used
This is a comprehensive tutorial on rolling your own blog with Nodejs, Mongodb and expressjs
http://howtonode.org/express-mongodb
It's old but with a little effort you can get it to work and learn at the same time
I have found this to be the most up to date material on using Backbone.js with node
http://amzn.to/1DygKlJ
I am just starting to look at MVC structure, first i looked at how backbone.js worked, and now I have just completed rails for zombies, by Code School. I know that I haven't delved too far into any of this, but I had a question to begin with.
Can you use these libraries together?
I have learned how to create models, views, etc in both, but when creating a real application do you use both backbone and rails?
If so...
When do you use a backbone.js model vs. a rails model?
Maybe I am just getting ahead of myself and need to keep practicing and doing tutorials but I couldn't seem to find anything directly on this.
Thanks!
Before anything else I'd suggest taking a look at thoughtbot's Backbone.js on Rails book, which is a great starting point, although aimed at an intermediate to advanced audience. I bought this book having already worked with rails but as a total backbone.js beginner and it has served me very well.
Beyond that, there are some fundamental issues with combining these frameworks which go beyond the details covered in this book and other books. Below are some things I'd suggest you think about, from my own experiences pairing RoR and backbone.js. This is a long answer and strays a bit from the specifics of your question, but I hope it might help you out in the "big picture" sense of understanding the problem you're facing.
Rails: Web Framework vs API
The first thing you confront when using backbone.js on top of a rails application is what to do about views, but this is really just the surface of a much deeper issue. The problem goes to the very heart of what it means to create a RESTful web service.
Rails is set up out of the box to encourage its users to create RESTful services, by structuring routing in terms of a set of resources accessed at uniform URIs (defined in your routes.rb file) through standard HTTP actions. So if you have a Post model, you can:
Get all posts by sending GET request to /posts
Create a new post by sending a GET request to /posts/new, filling out the form and sending it (a POST request) to /posts
Update a post with id 123 by sending a GET request to /posts/123/edit, filling out the form and sending it (a PUT request) to posts/123
Destroy a post with id 123 by sending a DELETE request to /posts/123
The key thing to remember about this aspect of Rails is that it is fundamentally stateless: regardless of what I was doing previously, I can create a new Post simply by sending a POST request with a valid form data to the correct URI, say /posts. Of course there are caveats: I may need to be logged in (have a session cookie identifying me), but in essence Rails doesn't really care what I was doing before I sent that request. I could follow it up by updating another post, or by sending a valid action to whatever other resources are made available to me.
This aspect of how Rails is designed makes it relatively easy to turn a (Javascript-light) Rails web application into an API: the resources will be similar or the same, the web framework returning HTML pages while the API (typically) returns data in JSON or XML format.
Backbone.js: A new stateful layer
Backbone is also based on RESTful resources. Whenever you create, update or destroy a backbone.js model, you do so via the standard HTTP actions sent to URIs which assume a RESTful architecture of the kind described above. This makes it ideal for integrating with RESTful services like RoR.
But there is a subtle point to be stressed here: backbone.js integrates seamlessly with Rails as an API. That is to say, if you strip away the HTML views and just use Rails for serving RESTful resources, integrating with the database, performing session management, etc., then it integrates very nicely with the structure that backbone.js provides for client-side code. Many people argue that there's nothing wrong with using rails this way, and I think in many ways they are right.
The complications arise though from the issue of what to do with that other part of Rails that we've just thrown away: the views and what they represent.
Stateful humans, stateless machines
This is actually more important than it may initially seem. HTML views represent the stateless interface that humans use for accessing the RESTful resources your service provides. Doing away with them leaves you with two access points:
For humans: a rich, client-side interface provided by the backbone.js layer (stateful)
For machines: a resource-oriented RESTful API provided by the rails layer (stateless)
Notice that there is no longer a stateless (RESTful) interface for humans. In contrast, in a traditional rails app with an API, we had something closer to this:
HTML resources for humans (stateless)
JSON/XML resources (API) for machines (stateless)
The latter two interfaces for accessing resources are much closer in nature to each other than the previous two. Just think for example of rails' respond_with, which takes advantage of the similarities to wrap various RESTful responders in a unified method.
Working together
This might all seem very abstract and beside the point, I know. To try to make it more concrete, consider the following problem, which gets back to your question about getting rails and backbone.js to work together. In this problem, you want to:
Create a web service with a rich client-side experience using backbone.js, with rails as the back end serving resources in JSON format.
Use pushState to give each page in the app a URL (e.g. /posts/123) which can be accessed directly (by entering it into the browser bar).
For each of these URLs, also serve an HTML page for clients without javascript.
These are not unusual demands for a modern web service, but they create a complex challenge. To make a long story short, you now have to create two "human-oriented" layers:
Stateful client-side interface (backbone.js templates and views)
Stateless HTML resources (Rails HTML views)
The complexity of actually doing this leads many nowadays to abandon the latter of these two and just offer a rich client-side interface. What you decide to do depends on your goals and what you want to achieve, but it's worth thinking about this problem carefully.
As another possible reference for doing that, I'd suggest having a look at O'Reilly's RESTful Web Services. It might seem odd to be recommending a book on REST in a question about Rails and Backbone.js, but actually I think this is the key piece that fits these very different frameworks together, and understanding it more fully will help you take advantage of the strengths of both.
Yes, you can use both side by side. Backbone is for storing and manipulating data within the client browser. It generally needs a server to talk to and fetch the data from. This is where Rails comes in. You can have a web application without heavy client-side code. Backbone is for building out sites that feel more like apps--think of Gmail or Pandora.
I advise just learning Rails first. Once you can get static pages loading and styled as you wish, then understanding Backbone's place will make more sense
I've used rails as a backend server to serve a fairly large website, which included a few one-page apps (built in backbone).
I'd suggest the backbone-on-rails gem. The idea is that your rails server will serve up the backbone app as a script tag in one of your views. You keep your backbone app itself in the rails app/assets folder.
Backbone understands rails routing conventions, and you just need to give it a path to a json api that rails can almost generate for you with rails generate resource.
Other than the syncing between the models, your backbone apps and rails apps are fairly separate. Backbone and Rails don't have quite the same MVC model, but getting them to cooperate is pretty easy.