I'm preparing to implement a Backbone.js UI (client-side MVC) within ASP.Net MVC 3+ web application (server-side MVC).
I've read plenty of Backbone tutorials, but none that illustrate how the technology may or may not be useful in an ASP.Net MVC scenario.
What strategy should I follow when combining these two pieces?
To be fair, Backbone.js (client application) and MVC (server application) should have nothing in common. The only thing Backbone.js requires is a Restful Api. So what I would do is take a look at MVC 4's Web Api (Example). There are quite a few tutorials on the subject, but the one I listed gives quite a good overview.
Once you understand how to implement a Restful API, look at any tutorial on backbone.js that integrates with a server application. Just substitute your api with the tutorial's api and you should be in business. Read this book, it is priceless and contains brilliant examples on how to implement a backbone.js application locally and with a server.
On a side note, MVC 4's Web API integrates perfectly with backbone. Have a look at a plugin developed by Addy Osmani, Backbone.Paginator. It helps make filtering, pagination, skip, sort etc extremely easy with MVC 4's Web API and odata filters.
After learning Backbone.js and using it on a few projects, I've found that most of my time is spent figuring out how to use it, and not what my backend is doing. In terms of ASPMVC, you setup a few controller actions that return JSON.
Rob Connery uses Backbone.js with MVC3 in his series Real-World ASP.NET MVC3 on Tekpub.
Episode 6 - BackboneJS - is spent entirely introducing you to backbone and ASPMVC3 integration. Unfortunately, you must purchase the entire series for $32 and it helps to watch the whole thing to get a sense for whats being built. Further, I don't agree with the way he approaches everything in the videos but his use and description of Backbone.js is very helpful if you are new.
DocumentCloud (the project from which Backbone.js emerged) maintains a page entitled Tutorials, blog posts and example sites. They don't always list the backends used so you may have to browse all the links to see if you find anything.
This is quick little tutorial from real-world experience, basically wiring a backbone application to some ASPMVC endpoints.
Finally, here is a recent post on Microsoft's own ASP.NET Weblogs called "Integrating Backbone.js with ASP.NET Web API".
Related
I am trying to create a web-based dashboard platform and framework. The techniques I think about using is either ASP.NET MVC 5/6 (backend and frontend integrated) or a ASP.NET Web API 2 backend and an Angular frontend.
The application should function as an application (host), but also as a framework in which applications can be made. An application in this case is a small web application which can be shown on the dashboards. One of the main bottlenecks I came across is figuring out a way to instantiate the same application multiple times on a dashboard. Since by default doing this introduces ID collision between multiple HTML elements on the web page.
I know Angular kind of 'solves' this problem for you since the scope of your application (looking at an application like it's a component) is maintained by the Angular framework. The reason I mention ASP.NET Web API is because I'd then like to use this as a backend where all the configurations of the applications is stored.
ASP.NET MVC does not (as far as I know) allows you nice ways to handle this, except for rendering the HTML on the server and replacing all HTML ID's to something unique. But even when you manage to do that, you still have the issue of your js files referring to the old not-unique HTML elements. This could then maybe be fixed by using a JS framework that allows you to do such thing.
The reason I ask this question is because I have a lot of experience in the .NET framework and very little experience using Angular. The choice for Angular seems more suited for this use case, but due to my lack of experience in Angular, I am not able to make an arguable choice. I have some experience in ASP.NET MVC specifically, but not enough to also think of a nice way of handling the ID collision issue.
Therefore my question to you, the StackOverflow community, is do you have any experience using any of these frameworks? And if so, what would you choose and why do you think the choice is better suited for the job?
Use angular 2 (or 4) and webapi. Through use of components and parameterized directives, that can solve it. If you need good authentication, that will have to be dealt separately.
I wrote a REST API in Node.js (with Express)that implements a queue with some dequeue/enqueue functionality, and the next step is creating a web view for that API.
I am really new to javascript and Node.js , can i have some pointers on how to implement it? is there a framework I can use to integrate the api.js i built with a front-end?
When you wrote a REST api using nodejs and the expressjs framework, you are perfectly prepared to use the complete MEAN stack, which implements angularJS for frontend services.
Angular offers a complete REST implementation (called ngResource). Install via npm.
With the angular resource service you get your frontend interface (to interact with your backend) out of the box (except a few adaptations you'll have to make, e.g. to make it work with Mongoose, which is used to make the access to your MongoDB more comfortable).
You'll find a few superb tutorials, as this one and others on scotch.io are some of them. Google for 'api rest angular resource mean ...' in different selections ;-)
Other links that helped me a lot:
Tutorial from Angular itself
Thinkster.io - complete MEAN stack overview with examples
a helpful tutorial with good examples from Frederik Dietz
Buecheler comes out with this great tutorial, but its more about the backend side - as you might check your code againt the basic standards of a REST backend implementation.
Those are some of the links I noted and that could find ad hoc.
EDIT:
As your headline suggests you are searching for an UI, I suppose IBM Strongloop might be a good hint for you. IBM is strongly interconnected with the development of ExpressJS and offers this API and UI for probably all data concerning questions of your Webapp.
I am quite a novice when it comes to web application development. The projects that I have done thus far have purely been Client Side and Jquery powered.
Recently I made a discovery that Javascript has an MVC framework (http://backbonejs.org/)
This really excites me as about 90% of my experience to date has been with Javascript, so the possibility of using an MVC framework within a familiar coding language is actually quite awesome.
After some more reading and probing I discovered a local storage adapter for backbone:
http://documentcloud.github.com/backbone/docs/backbone-localstorage.html
Basically if I have understood this correctly - it will store and retrieve data in cookies
So the above framework (backbone) and addin (local storage) will allow web applications to operate in a "server-less" environment.
Before I get crucified by any techies - I do understand that this is a very generous, generic and simplified statement - but I am just trying to find out a few things at this point:
Is my understanding of the framework correct?
Has anyone had any development experience with the above?
Where can I get novice level tutorials on developing MVC Web applications that use Backbone.js
Looking forward to the discussion and your answers
Is my understanding of the framework correct?
First off there are several "mvc" like frameworks for Javascript besides for Backbone.js (assuming you consider backbone.js an mvc framework, take at look at this SO question as well as the official documentation) for example Ember.js, Knockout.js, JavascriptMVC. That said local Storage is a feature of HTML5 and isn't specific to backbone.js (so the browser would need to support it, here's a SO question with some more info on localStorage), what the backbone.js localStorage adapter does is saves the backbone.js data to localStorage instead of the server.
Has anyone had any development experience with the above?
Yes (you can take a look at the questions tagged with backbone.js here on SO for starters...).
Where can I get novice level tutorials on developing MVC Web
applications that use Backbone.js
Have a look at this site for some backbone.js tutorials.
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.
I have come accross an sample application with dojo 1.5, but it's not really what I want to achieve : it is not modular at all. I want to make use of the amd, and various design patterns (like MVC) to have a very organize application. Unfortunately, the dojo community and "example" are not quite visible or present (compare to Jquery). There's a lot of cool tutorials on various implementation of specific dojo features, but none that's explain the very basic on how to create a simple (but at the same time, complex) squeleton for a dojo project. I came across the dojo boilerplate project on github, and tried to start from there, but I find it really hard (as a beginner) to implement such trivial things such as an login or basic interface (and separate all that by module, event handling, data, etc.). I just don't want to make a dojo application by using only an index.html and one javascript file, I could do it, but for maintenance and adding stuff, it will just be a complete mess. With this post, I hope to gain some information on this specific subject and perhaps create a tutorial for dojo on how to start up a real web application. For example, applying the mvc pattern, I think a good application tutorial should have a login example (authentification) and a basic modular interface (like some kind of main container, and on various events, the container ui change for instance with different widget). I'll be working on something on github and posting up when I'm done. If your done before go ahead ;)
thank you.
There is TodoMVC at GitHub:
a project which offers the same Todo application implemented using MV*
concepts in most of the popular JavaScript MV* frameworks of today.
It employs dojox.mvc #PEM mentioned. It's not a typical way of building Dojo applications as dojox.mvc was released just on May 16th, 2011, but it is worth looking at. There is also live demo and tutorial Creating Todo MVC in Dojo:
Overview
Part 1: Models
Part 2: Views
Part 3: Controllers
Also have a look at the source code of Dojo Web Builder (+ article Introducing the New Dojo Web Builder).
Last but not least is Maqetta (sources at GitHub), the most complex Dojo application one can find. Look esp. in maqetta.core.client/WebContent/ directory.
Maybe you have not searched enough?
Dojo MVC :
http://livedocs.dojotoolkit.org/dojox/mvc
http://dojotoolkit.org/documentation/tutorials/1.7/data_modeling/
I just don't want to make a dojo application by using only an index.html and one javascript file
But that's basically what Dojo is for and good at...
If you just want to make cute animation on a plain old html website, rather go for jquery, it's sexier.
Now if you want to do a "real web application" then dojo is the right framework. But you'll also have to learn how to use it.
There are a couple issues with building a sample application tutorial.
First, a sample application with what you have described will need a web server to communicate with. Dojo is web server agnostic, so what technology do you choose to for the sample application? Secondly, a server is now required to make the demo available online, or the person interested in looking at the demo would need to install the web server. As simple as this sounds, it is a barrier and prevents a more novice person from continuing.
Second, even with a web server there are many ways to build/architect a web application.
I think a good application tutorial should have a login example
(authentification) and a basic modular interface (like some kind of
main container, and on various events, the container ui change for
instance with different widget)
From what you have posted, it reads like you are looking for a single page application. There are downsides to single page apps (such as SEO) and creating a sample single page application needs to make it clear to the developer what the downsides of using the sample are. It's not the magic bullet for all Dojo/Web applications.
I have a project up on Github and it certainly isn't ready for primetime, but you can take a look. This is a Single Page Application that uses Java/Spring for the backend server. I am a couple days away from checking in the Spring Pet Clinic example which will demonstrate some of the functionality. I also need to update the wiki to describe how to create a sample application.
https://github.com/cswing/evinceframework
Also, I use the theme tester often to take a look at different widgets. Not entirely what you are looking for, but some who get to this question may find the link useful.
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html