I'm working on hybrid mobile application which has its base on backbone. I'm newbie to backbone. It is taking enormous time to learn the structuring itself. The logic is to present information from service to the user and post the information to the server. The information gathering spans across multiple pages. and the presentation of information also span across multiple page. What is the best structure to go with this? I'm really worried how model and collection can be used in my requirement. Any help is appreciated.
Honestly there is not enough information in your question to truly answer your problem.
But I can still give you some information.
Backbone is a MV* framework, it's two most important class being Model and View. The models works the usual way, and interact with the database. The views are far closer to the role of a Controller in usual MVC framworks, and take the information from the model to put it on the screen.
The information gathering spans across multiple pages. and the presentation of information also span across multiple page. What is the best structure to go with this?
Backbone works best with single page applications, so you should try to keep your whole application on a single page (that doesn't mean the end router sees a single page, as the java script can re-render the page when needed).
You can share the information among views like that:
var model = Model();
var view1 = view1({model:model});
var view2 = view2({model:model});
All the views will be able to access to the same model with the same data.
Further reading:
beginner:Backbone Tutorials
intermediate to expert : Osmani's awesome book
Related
I have two similar web applications to automate.
Both have the same business logic and
similar navigation (different domains)
BUT Different Locators of same elements.
How should I deal with this?
How should I set up and manage everything efficiently?
I am using Katalon Studio.
Did anyone encounter such scenarios?
You can use the Page Object Model.
With the Page Object Design Pattern you can achieve
a clean separation between test code and page specific code such as locators (or their use if you’re using a UI Map) and layout.
Basically, one PO will hold locators for one app, the other PO will hold the locators for the other app. Everything else can be reused.
There's also some discussion on it on Katalon forum.
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 building an admin panel that involves mostly CRUD operations in AngularJS. I have seen many examples of how to do this on the web. Each example I have seen is a single page application that handles a single type (for example Person, Employee, etc.).
My question is the following: If the admin application I am building will involve a large number of CRUDS (one for each type used in the database), should I still use one single page app for the entire admin panel website or should I make each CRUD a separate single page application?
What is the best practice for this?
We've chosen to use a single app for a multi-model admin GUI built with angular.js called ng-admin (open-source, see code at https://github.com/marmelab/ng-admin).
It works very well, and it's easier to deal with model relationships (one-to-many, many-to-one, many-to-many). Doing so with several apps would imply booting several applications - probably bad for webperf.
Angular is really good for CRUD operations. There are many large scale apps with lots of CRUD operations that have used angular. Go to built with angular and see the apps. You can find the source code as well.
Generally, rest services are used to make CRUD apps.
In my opinion, making each CRUD a separate app would not bring out the best performance of a SPA as some contents like the header and footer do not change much, so it would not be feasible to render them multiple times.
Is it good practice to combine MVVM [angularjs,knockout.js]with MVC [JSF/spring].
Is it good way to control mvvm object/variables/ from inside JSF page.
Lets say I have to update a dropdown list in angularjs model by using jsf controller to fetch list object and update angularjs dropdown model. Is this a clean way or a junk way or is it just a work around.
I have to admit that I don't really know JSF or Knockout. However, I can easily imagine that because both sides want to be in charge of viewed components, a component based framework like JSF or Wicket might have trouble playing together with Angular. A couple things come to mind:
Why do you need the component framework from the server side? Why not use a request-based framework like Spring MVC or struts? They should work fine as they are just taking care of the overall page loading.
You will probably be ok if you decide to use one technology to do one thing. For example, do your page containers with JSF, and everything inside the page with Angular. I think you'll be ok with that. Of course, you are losing a big part of the benefit of JSF.
I'm actually doing this right now. I can't say what the best practice is, but we found that we needed to be able to output dynamic HTML from the server, even if you have an MVVM framework in the front end. Things like internationalization is better handled on the server side, and with purely static HTML from the server you run into a lot of limitations.
The main drawback is complexity. You will have controllers, models and views on the server, combined with controllers, templates and viewmodels on the client. This makes the architecture a bit confusing, especially as you bring new members into the team, so documentation and code structure becomes very important.
Overall, I think it's a valid approach. It hasnt bitten us yet, at least :)
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/