Backbone.js and server side views - javascript

Ive been using MVC frameworks for a while now, and have been through Cake, Codeignitor and have now settled on Laravel (thanks to Jeffrey Way over at nettuts). I heard great things about Backbone so I did some of the tutorials and really liked it.
I have a few questions, I hope someone can answer
In quite a few bb tutorials the controllers are always restful, can bb only work with restful controllers?
I'm really stuck in the paradigm of controller -> view. Now with backbone from what I've gathered doesn't use views at all but templates. Is it possible to still serve a view as normal and then client side create a collection from the rendered view? That way I'm still using a mvc backend as normal but also integrating backbone to keep track of my data on the frontend. if this is possible, is is bad form?

In quite a few bb tutorials the controllers are always restful, can bb only work with restful controllers?
Backbone includes default code to work easily with restful servers. However, that functionality is easily overridable to work with various servers or back ends. There are adapters for localStorage, for example. So if your server is non-rest, you can still work with it, but you'll have to write some code to adapt accordingly.
Backbone Views are sort of hybrid views/controllers and templates handle the actual HTML. Generally, if you want to bootstrap a collection in the browser, you need to make the data available as JSON. Rendering HTML on the server and then trying to extract data from that and hydrate a collection is jumping through extra, awkward hoops that people usually try to avoid. What you can do is include your JSON data inside a <script> tag and have it parsed into javascript objects and used with backbone in the browser.

Related

django with angular js vs jus javascript

I want to make a lightening-fast web application and am wondering about the best way to implement it. It's a drawing app that will need support for vector graphics, but it will use a database to store data in user accounts. Here's how I'm breaking it down in MVC terminology:
Controller: Django, hosted on GCP Python app engine
Model: CloudSQL
View: AngularJS
I'm wondering if a Javascript/JQuery approach would be better, since I could have Django handle the database operations and am worried that I'll just be adding overhead with Angular.
I'd welcome any thoughts.
Once you use Javascript framework such as Angular.js and React.js. Your backend and frontend becomes totally isolated. First thing you should do it you gotta make your django REST API. Build your logics to do the vector graphic in your django REST API and build your angular.js app in away that it will "consume" your REST API services.
For the second question, it is depending on your architecture design. If your application is going to be DOM-driven, use jQuery since still jquery still provides lots of UI stuff. However, if it's going to be data-driven and you will use Javascript to organize and display the data in efficient way, choose Angular.js.
Please leave a comment if you have more questions. Thanks!

Rendering templates using backbone and Express

I'm currently working on web development side project. I have been trying to figure out all the pieces for the last couple of months and have made good progress.
I'm using bootstrap and Backbone on the front end and this is what I have been focusing on lately. This part works well with all the Backbone views being rendered fine.
For the backend I will use Nodejs along with express. I have started looking into it this past week. Currently, I'm trying to serve requests sent to the server with through express.
How can I handle the request and send back a Backbone view that already has a defined HTML page and everything.
I came across Jade which is used with express a lot but I can't get it to work with my backbone views. Also, how does underscore come into the picture. Do I have to choose between underscore and Jade?
I will of course further down the line have data pulled from a database and sent to the backbone views.
Thank you for any input.
Underscore (_.template method) and Jade both can, from a template file, render html code which will be sent by express to the client. Since underscore is not express friendly my guess is that you are confusing the client libraries (Used by backbone on the browser) and the server libraries user by nodeJS to answer request calls, if you are rendering templates using underscore with backbone that is done client side and has nothing to do with express.
This article should help you set everything up: http://coenraets.org/blog/2012/10/nodecellar-sample-application-with-backbone-js-twitter-bootstrap-node-js-express-and-mongodb/ and it has source code for you to look at.
Since my guess is you want something functional fast, I would suggest something like sails.js which can save you a lot of time configuring express and making it work. Plus sails.js its built on top of express. https://github.com/balderdashy/sails/

Integrating AngularJs into existing ASP.NET MVC 4 web application

Soon I'll start working on the next version of a website I've built. Basically it's kind of a CRM. Lots of tables, forms, CRUD everywhere. The problem is that it's going to be nearly a rewrite cause of huge requirements for functionality for the up-coming version, and we will need to make the website a bit more interactive, responsive and user friendly.
Currently it's ASP.NET MVC 4, with some jQuery for ajax stuff. MVC 4 application acts as a glue/proxy between client-side and underlying service which provides all the data, so WebApp has no direct communication with database. Also MVC 4 application is where business objects are transformed into ViewModels. We use DataAnnotations Validation for ViewModels.
Now what I was looking for, is to somehow integrate something like AngularJs. The goal is to move closer to SPA, give the client-side some structure, as building more functionality on top of existing jQuery code will just result in a sphagetti. However, writing full-blown SPA is not really an option, as it will require way too much effort and time, as always, is not unlimited.
For start the goal is to move Html forms management to AngularJs. That means I need a way to render MVC partial view with MVC model, and let Angular take over the controll. Posting changes/updating the view should be handled by Angular.
I have been researching Angular + asp.net for a while now, and the problem is that I need MVC models, but Angular also needs a 'model' ($scope). I know about ng-init, but some models will be quite complex. so it does not seem like a good idea.
Also server side validation (DataAnotations with loads of customized stuff) with unobtrusive client-side validation works very well for us, so would like to keep that and somehow make it work with Angular.
I've also looked into AngularJs/BreezeJs/MVC4, but breeze mvc integration is focused on EntityFramework, and it needs model metadata for client-side to be able to save, update and cache entities. And as mentioned earlier, mvc app does not access database directly, nor has a way to generate metadata. Writing by hand is not an option.
I know I'm trying to make some kind of hybrid and would have a lot's of issues having models on server and client sides, so I am looking for an advice which way should I go.
Is this doable?
Maybe I can generate metadata for Breeze js from existing ViewModels on MVC (breeze seems to work with dataanotations and validation works on client-side, at least minimally)?
Maybe this is a nonsense and I should either continue with MVC app, or go full-SPA, and there is no easy way to combine them both.

Do I have to use a Backend when using Backbone.js?

I want to develop a relatively simple application that calculates some value based on several inputs. I dont want a backend, all the calculation can be done in the browser.
Im a little new to JavaScript and WebApps and I came across Backbone.js.
I really like the MVC design, however, they mention a backend a lot. My question:
Is a backend server absolutely required?
Is a backend server optional but without one there isn't much point in backbone.
Or will backbone will really help me out?
Backend is not required.
Backbone can fully work without any backend if your application doesn't require one.
That depends on your application. If you want to retrieve value of some inputs and calculate a result then Backbone won't do that for you - it will help you structure your code. If you app is simple and don't need support for models, views and collections or routing, then there is no point in using Backbone. Hard to answer this question.
For example: Classic todo example application doesn't use any backend.
Backbone.js implements fetch(), save(), destroy() etc. methods on models automatically performing appropriate AJAX requests and parsing response. So it has a strong support for backend via REST services, but it is optional.
You can still use models, views, routers and events without any server-side code. Just don't call REST methods (or override them at your wish).
You can use localStorage for persistence (you'd have to implement this yourself or find it on the web, like here) but if you don't even need that then you don't need to use any of the persistence methods in backbone.
Backbone is meant to help you structure a medium-large sized application (js-wise), so it doesn't become unmaintainable jQuery spaghetti. With short applications (js-wise) it's really an overkill unless you are trying to learn how backbone works.
Note with js-wise I mean the client side code, if you had a huge backend but the only js would be something that focuses some form, it would not even count as a short application (js-wise).
You can use backbone.js without a backend. However you obviously won't be able to store or retrieve data. Backbone may still be useful for keeping your code organized, however it really shines when you want to separate presentation logic from logic that manipulates your data, which is a goal of the MVC pattern. Generally your data will be stored on and retrieved from a backend.
If you want to play around with data persistence, try out backlift.com. [disclosure, I work on backlift.com] We've tried to make it easy to get a backbone app up-and-running without having to setup a server or deal with compiling templates.

Is Backbone.js only for single page applications?

I'm searching for a simple architecture for my UI that will have some basic javascript functions in like: select all checkbox's, image crop, some pop-ups and some other plugins.
I found this article: Organizing Your Backbone.js Application With Modules
My application is not a SPA (Single Page Application). I want to know if Backbone.js with jQuery will help me even if my application is not a SPA.
The strength of Backbone is really in its ability to manage many models (even complex ones) and keep the rendered page in sync with their current values. It provides an interface to getter/setter functions so that the changing of a model value (there are many different flavors of "change") will call render on the corresponding view and the page will correctly reflect the underlying models. Furthermore, it provides interfaces to saving, paging, and routing actions on models.
I have used Backbone extensively for both SPA's (where it shines) as well as more traditional, multiple page applications. It has no special support for UI and DOM manipulation, but combined with jQuery/Prototype/Zepto it manages their rendering/manipulation.
Basically, backbone works best to untangle elaborate chains of rendering logic and model updating. If you feel that your application has a lot of view elements that need to stay in sync with models that the client will be updating on the page, Backbone is a wonderful solution. If you just need to select and manipulate DOM elements, it's overkill. jQuery alone can handle that.
Backbone is really not about the things you mentioned, but I wouldn't say it is strictly for single-age apps (SPA) either. I'd say it is for any case where you've got quite complicated pages and it would benefit you to break them up into multiple pieces (for example, several views that all pull data from one model).
However, I would say the strength of Backbone.js is in the SPA realm.
You could probably find some jQuery pieces that answer some of your needs if you're not already using jQuery as part of your app. However, jQuery is all about the parts you mentioned (easy DOM manipulation, popups if you use jQuery UI, etc.) and not about structure or organization.
I believe that the principal idea of backbone, is organize you JS code in complex app using the MVC concept.
This way your app becomes easier to mantain and add new features, It get easy to use frameworks tests like jasmine.
Backbone also make possible (and very good) work based on SPA approach, using ajax request to server. It is completely based on Restful concept, to get a code using backbone, is important to understand what is Restful.
Basically Backbone have a Router (that can work like a controller. but is not a controller).
Model that is where you can manage all the data logic of your application.
Collection that is like a list of models.
View that is where you will react accordingly the model changes.
There are other things, but basically, is this.
But as I said before, you can use it without have a SPA.
The most important thing to have in mind is that the concept of MVC must be followed when using backbone. If you don't do that, it doesn't make sense use backbone.

Categories

Resources