I have this time tracking / task managment tool I'm working on called Task Ranger. Basically you make a tree of tasks and sub-tasks, click on whichever task you're currently working on, and your time for that task is tracked.
I want to add a feature where the user can look at their times for a specific date range (ie. "What did I spend my time on last week?") I'm thinking I want to have a tab that I can click to jump from the "Main" view to the "History" view.
The problem is that right now I'm persisting my data by simply storing everything in the DOM and dumping the entire html structure into localStorage. In order to get the history view to work I'm going to need to separate the data from the html, right? I guess an MVC framework is the typical way of doing that, right? I was looking at Backbone, but I'm feeling like it might be a little overkill for this. I'm thinking maybe I should roll my own simple little thing. What do you think?
I'm using Javascript + Jquery for all of this right now.
Backbone is about as lightweight as you can get MVC. If I were to write my own micro MVC framework it would convert to backbone within a week.
I would highly recommend Backbone over writing your own because it's well structured and loosely coupled. You can only use the features of backbone that you want. Since your already including jQuery there is little overhead of including backbone aswell.
Backbone is great for structuring and organizing your code.
You can use the backbone-localstorage adapter to save your models to localStorage.
You can then save a backlog of all your models or get them from a RESTful server for your history view.
A solid alternative to backbone would be spine which is also a lightweight MVC library. Spine has a more traditional MVC attitude and is only 2kB
Related
I currently in the process of concepting a large single page web application.
There will be a lot of components, so a separation of concerns is important to me. The Server is basically a REST-Server with some sugar, like sending Template Code to the client.
So I need to decide which MVC Framework I want to use client side.
I really like backbone.js so I want to have a big Framework relying on it.
What I came over is Marionette.js and Chaplin.js.
Has anybody used one or both frameworks and can say a little bit about them? Strengths, weaknesses, community behind it or are they basically the same?
This should not be a discussion about which is better, just a short feature list, so I can decide better which one to use, because I don't have the time to really get started with both.
Haven't worked with Marionette but basically Chaplin is a wise decision when:
You need a more opinionated architecture. Useful if you need a set of rules/conventions to get up and running in a team.
Memory management is a concern.
You are maybe coming from a Ruby background and feel more comfortable using Coffeescript.
Also, if you are building a big application, in Chaplin get prepared to figure a LOT of things yourself. The documentation is there, but often you will find yourself 'alone in the dark'. Source is well commented though, which is appreciated.
I have experience with Marionette.js about 1 year.
Marionette.js is the best option when you have your own architecture, but you haven't ideas how working with views layer.
I like the next scheme:
Backbone as core for data layer (models, collection, rest api)
Marionette.js for view layer (ItemView for one entity, CollectionView for collection of entities, CompositeView(entity + collection) and so on.
Reveal.js data binding
HBS as templates
Your own routing and core logic
I've recommended to you brunch tool - is rich tool to compile, prepare and build your own SPA.
Of course you must see Grunt + Yo + Bower its another rich tool.
I'm developing a mostly informational public facing website. My architecture is to deliver JSON data to the client for pages in the site. I plan on caching the JSON in localStorage on client and let it persist there for XX amount of time before it refreshes. I'm using client side templates (jsRender) for rendering JSON into UI widgets that are then pushed into view using jQuery.
In my research for this, I stumbled upon JavaScript MVC approaches like backbone.js and spine.js among others. I've read through them and am comparing them to my approach above and am not sure if/why I would need something like backbone.js or spine.js. I'm not doing hardly any data entry except having users fill out contact us form or sign up for our newsletter. So, really no need to keep view and model in sync. I'm just retrieving JSON from my server and rendering it using templates and caching JSON for a period of time in localStorage.
I want to check with the experts out there if my approach seems appropriate and to see if I really "need" backbone.js or spine.js. How would any of these approaches help with my architectural direction?
If you feel you don't need anything else, I would suggest not to use it. "Premature optimization is a root of all evil". When you will run into trouble because your application becomes messy and you spend a lot of time implementing new features or solving bugs then all this stuff will start to make sense to you. Then you will learn why it's very convinient and elegant to implement MVC in your app from the very begining.
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.
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.
I'm building a simple client-side survey tool. Users create and edit short surveys and export them as XML (or something similar) when they're done.
I started off using jquery, but realized that it was going to be a headache to map back and forth between the HTML DOM and the underlying XML. It's easy to edit one or the other, but keeping them in sync is a pain.
Anyway, this seems like a standard MVC problem, with a few extra wrinkles:
I want to do all this work clientside.
Lightweight is definitely better.
Any thoughts? I looked into backbone, but it seems to be build around REST-ful interactions with a server-side model, which doesn't work well for me. JavascriptMVC looked really bulky for something this small.
Check out AngularJS which states that it brings to HTML what is required to use HTML for JS driven web applications. You can find a simple example of it's usage in form of a showcase of a very simple todo application on the starting page.
you should have a look at KnockoutJS, which is a JavaScript MVVM framework, which lends itself very well to what your doing.
You can use jQuery to turn the xml into JavaScript objects and add a little Knockout model magic and your UI will automatically update itself when the model changes.
You can use Backbone without server sync by creating your custom storage backend providing in-memory persistence
Look at a sample localStorage backend: http://documentcloud.github.com/backbone/docs/backbone-localstorage.html which overrides Backbone's sync method
I know it's not a true "MVC" framework, but you may benefit from checking out the jQuery template plugin - http://api.jquery.com/category/plugins/templates/ . You can create a template (in this case could be the XML template) that you can use to build the output from a JSON object. This would allow you to maintain the data in one place and allow the "rendering" to happen automatically from your data object.
You can use JavaScriptMVC via it's download builder: http://javascriptmvc.com/builder.html. Just check the model, view, controller and you are off! Here's a walkthrough of using just those parts:
http://javascriptmvc.com/docs.html#!mvc