i am a beginner in the backbonejs world und bought a book from Addy Osmani’s Backbonejs Application. i am reading the book and i try to build an application with backbonejs. Somewhere in the book, he wrote a section about backbonejs extendsion and expose how to use marionettejs. I visited on Github backbonejs extendsion site, they have many extendsion included marionettejs. Now i am confused about using backbonejs, should i use extendsion like Marionettejs too or not? I know that extendsion can brings many advantages for webdevelopment, when i gonna use backbonejs then i should use marionettejs too? When it is useful to use extendsion when not?
I find Marionette to be a useful addition to Backbone, because it reduces the amount of repetitive code you need to write (unbinding event listeners when views close, rendering one view for each item in a collection and attaching it to the DOM, etc.).
There's a nice (short) comparison of Marionette and plain Backbone here: http://addyosmani.github.io/backbone-fundamentals/#boilerplate-rendering-code
Ultimately, the best tool for you will depend on what you want to achieve and what your preferences are.
Full disclosure: I may not be entirely objective, since I'm writing a book on Marionette. But I'm sure other members will provide you with their own opinions.
Related
Currently am writing all my business logic inside the view class which make my view class unmanageable. Am planning to create Backbone object and move all the business logic there and invoke it from view class. Please correct me with right way of thinking
Backbone in general does not provide an entity named Controller, this is one of the reasons which Backbone called MV*. Generally user interact with views, you know well this interact means change and update over models.
"So does Backbone.js have controllers? Not really. Backbone’s views typically contain
controller logic, and routers are used to help manage application state, but neither are
true controllers according to classical MVC." (Addy Osmani Book's)
so i think your way is not incorrect, but you can improve your project structure through this solutions:
Marrionette (and also Thorax ) is a excellent framework that provide such a excellent structure for your app. You can read this annotated code and get some tip from it.
You know certainly AMD a nice api to provide modular pattern in js. Require.js a nice tool for organize your code. For more information i recommend check TodoMVC + Backbone+Require code.
I am considering changing our current application to use Marionette. The trouble is that there is currently a whole number of different views, models, and collections that have been made by other developers that use regular Backbone.
I figure I can't really convert the whole application in one go especially considering I didn't develop a whole bunch of it. I am considering just starting with the Application object and Router.
Is this going to be possible? Can I start with that and convert the actual views later?
We recently converted our backbone application to use marionette, and we started with creating a new marionette application and router, and then created a few regions and layouts which managed our older Backbone views.
We were then able to convert the old backbone views to Marionette's ItemViews and CompositeViews, and we found we were able to delete a lot of old code.
Any custom collections and models we kept untouched. You'll probably find you won't need to change them.
My advice is to have a good read through the docs and have a look through how other people have their application structured, and how their router works. There are a few boilerplate examples and generators on github.
The simple answer is yes, you can convert the app piece by piece over time.
And your strategy of starting with the Application and Router is good. I've done a few projects where I only used the Application, Router, and maybe the Module feature of Marionette, keeping the rest plain Backbone.
From the Marionette Docs:
Like Backbone itself, you're not required to use all of Marionette
just because you want to use some of it. You can pick and choose which
features you want to use. This allows you to work with other Backbone
frameworks and plugins easily. It also means that you are not required
to engage in an all-or-nothing migration to begin using Marionette.
And even once you start converting the views, you can do it one view at a time, as needed.
I'm still learning AngularJS, but I'm not sure if having less control (via javascript) as I read is a good thing. I mean, everything is done via bindings through HTML code / attributes. How can I access $rootScope , or any of the services other than having them injected to my controllers via 'low level' javascript code?angular global variable doesn't hold much when logged to the console. What else to use to discover possible methods accessable via javascript?
I suspect this will be closed as opinion based but here is my opinion:
Angular does not remove your ability to control the page via javascript. Instead it isolates that code that manipulates the DOM. The learning curve for angular is a little like a roller coaster, in that you feel differently about the framework after learning a new piece. I felt really great after learning how templates and controllers worked but then felt low after seeing the limitations and complexities it created only to feel really great when I learned about Directives and how to manipulate the DOM through them. Six months into it, I am comfortable with Angular and would never go back to all the boilerplate of straight JQuery/javascript.
An important thing to keep in mind. Angular is not a UI library but rather a way of organizing your development files. There are many integration libraries of well known UI frameworks into angular Directives but by far the most popular is Twitter Bootstrap.
This blog post really nailed it: https://coderwall.com/p/3qclqg
I am new to backbone, and I'm here to ask for a little bit of help understanding how I would go about building my current webapp project. I'm developing a modular administration panel for servers. Every single "page" of the panel should be a packaged "module" including controllers, models and views.
The panel will consist of a main layout view being loaded initially, with a basic navigation. When a user clicks on a link on the navigation, a page gets loaded via AJAX into the layout.
(And if this sounds stupid / there is a reason not to do so please tell me :) )
Since others will develop these pages too, and since they are modular, I won't know what models, views and controllers I will be presented with inside the page i load via AJAX.
How would I best go about doing this with backbone?
I'm especially wondering about how I would extend Backbone models etc. dynamically, and how I would manage (for example) the user leaving the page and / or revisiting it later.
Does Backbone provide something I can work with, will I need to hack myself something together, is there a better way of doing things I am missing?
Your thinking around the problems sounds very correct. Make your UI components self contained as possible. Watch this 10 min video to get some more information on UI component best practices.
If you are interested about other important concerns of JavaScript application development, look at BoilerplateJS reference architecture which I published to share my experiences. That contains a similar sample application as you described (menu with component activation).
my recommendations for your UI component activation, deactivation are:
Do not remove/create DOM components. Reuse with hide/show, as your elements will recide in memory even after removing from DOM
Minimize keeping 'state' information on client side. When an user revisit the component, refresh it with a server call and then make it visible (use server as the single truth of state information).
See BoilerplateJS sample component implementations for more details. I know few who use it with BackboneJS (currently it ships with knockoutJS). We will ship a example of it using BackboneJS in v0.2 which is due in a week.
A common modular script loading framework that is used in conjunction with Backbone would be require.js. It might be what you're looking for. Require.js is all about AMD modules, asynchronous modules. Usually each model, collection, view is it's own module that defines the dependencies that particular module needs then loads those modules as needed. It's particularly well suited for large projects where you have lots of individual pieces that need to be mish-mashed together at different points of your application.
You could of course combine multiple backbone elements in a single module (usually I reserve this for Views and specific subviews that would only be used with the parent view) but it's really up to you.
With Backbone, usually the intent is to create single page applications - meaning all the page scaffolding is usually wrapped up as a single file and completely loaded onto the client-side at the get go. The data for each page is then called via ajax and populated as the user navigates and loads different aspects of the application. Is this what you intended in your description?
If you're looking to load different pages that are each individually grabbed form the server, then I'm not sure Backbone is the answer. There are other server-side MVC frameworks that help to accomplish that.
That generally touches on how Backbone is used for this sort of thing.
As for how to extend Backbone models and such, Backbone uses Underscore as a dependency and underscore provides a nice _.extend() function that can easily extend all your objects in pretty much any way you desire. Overriding default functionality, throwing in mixins, it's all pretty painless as far as Backbone goes. As a framework, Backbone is very agreeable when it comes to altering, modifying and customizing every little bit and piece.
As for handling users visiting and revisiting pages, Backbone.router allows you to create URLs that not only point to specific "pages" in your app but also to execute arbitrary code that needs to be executed to get there. Something like a logged in user visiting "mysite/#account" would trigger the router to load certain scripts that bring up that particular view as well as perhaps fetch() necessary data to get that view up and running for the user.
I'm not sure if there are resources out there that give you some kind of basic structure to start with. Most experiences I know of tend to go through the basic tutorials like "Todo List" and work their way up from there. I'm not sure what your experience level is with javascript or programming in general but I started with Backbone AND require when I knew really pretty much nothing. Only a vague notion of what JSON was and a low level understanding of HTTP as in, "it's that thing that gets web pages." That said, I think Backbone was really easy to get for me to start with and it's deepened my knowledge a lot about the whole client-side RESTful type app structure.
There is a really good list out there of the "Todo List" app in many different flavors such as Backbone and Knockout and some others. When deciding on a framework, I basically went through that code comparing all the different frameworks available and selected Backbone because it just seemed to make the most sense to me. I don't regret it. It's a lot of fun and I think the best way to get into it is to just try some demo tutorials.
Take a look at Marionette or Chaplin. Both are build on top of Backbone and provide a structured way to build larger application with Backbone.
Here is tutorial to organize your application as modules using backbonejs
http://backbonetutorials.com/organizing-backbone-using-modules/
Simple questions, am I correct with this approach.
I have a page with left, centre and right areas (divs).
Each area has its own Backbone object, MVC/R
Each area has its default HTML via a default JQuery template.
Each Backbone object communicates Restfully to Asp.Net.MVC via JQuery.
Depending on the JSON payload back from its MVC Action(s) an area can switch its HTML via a JQuery template.
I got some code from the ‘net that does JavaScript EventAggregation communications between the Backbone objects in a similar way to Prism for WPF/Silverlight.
Do points 1 to 6 seem generally ok?
Could I use some sort of "pure" JavaScript eventing to replace point 6, if so how would I go about this?
As you can guess, I’m coming into this from a WPF/Silverlight background
Thanks in advance
Your list is good, and is a similar to how a lot of people are building Backbone apps these days. I would recommend against using jQuery templates, though. They are not supported right now, as the jQuery UI team is working on a road map to completely re-write them in to the jQueryUI project.
As for native JavaScript events - no. Stick with an event aggregator implementation that you are comfortable with. There isn't anything native in JavaScript.
You might also find my Backbone.Marionette project to be helpful and familiar. http://github.com/derickbailey/backbone.marionette
I also come from a .NET background, building composite applications (mostly in WinForms, but a little WPF). I've taken all of the core patterns that I used in building Winforms/WPF apps and built them in to Marionette. It removes a lot of the boilerplate code that I would normally write, and borrows ideas from Prism and other composite application frameworks.