I am exploring the MVVM Design Pattern for AngularJS but I'm not able to find any related document for that, Most of the document based on KnockoutJS and Silverlight.
MVVM
Pros:
The only advantage of MVVM that it helps in the loading the view faster in case of two-way binding.
Cons:
We can't make the service call . If we want make call we have to include third party library like jQuery or knockoutJS.
For MVC we have both the advantages here. Which means two way binding is also there not as faster in MVVM and
we can make service calls also without having the third party library. We use controller for both above things in MVC.
The above my points is correct or not? please any one help me.
See this link for examples: https://docs.angularjs.org/tutorial/step_02
You can use Spring RESTful Services (or any services for that matter) for your backend, but since Angularjs runs only in the browser, the MVC pattern is moved from the server to the frontend. I suggest that you make the effort and follow the AngularJS tutorial to gain a better understanding.
Related
I want to implement Sitecore application (single page design with angular js) :
Is that possible ?
If it is possible, what about experience editor, it will work with it ?
What about Sitecore personalization ?
I have no experience with angular js. what should I take in my consideration to achieve this
I will use Sitecore 8. i found this helpful blog about that but as he mentioned, page editor simply won't work
Thanks.
1.
Yes it is possible, I implemented a SPA in Sitecore 7 using AngularJS for the front-end and WebAPI to serve the data from Sitecore Items and it all worked really well together.
You could look into using Sitecore MVC Controllers which will work just as well as WebAPI. Or if you have time to learn a new Sitecore Technology you can look into using Sitecore's Entity Service. Either will work for serving data from Sitecore.
From experience I recommend you make controllers which are responsible for a single type of data consumed by the AnglarJS. The models passed by the controllers should be lean, containing only data relevant to the controllers purpose.
2.
For my implementation, the Experience Editor would not work as I used AngularJS to manipulate and present the data. It could be possible to use Sitecore Controls if you don't pull out the data using AngularJS but I don't think it'll be possible without hacking at it with code.
3.
Personalisation through the Experience Editor should be possible if you use Sitecore Controls. Personalisation through the Content Editor and code will be possible. I recommend you build your SPA as you would most Sitecore implementations; Layout, Sublayout etc. You can implement personalisation through code in the Controllers, Application Logic etc
4.
I had no experience with AngularJs either but I learned everything I needed to know from tutorials and the rest is logical enough for you to figure out if you're familiar with any programming language. I recommend you work through this Codecademy Tutorial that has you completing exercises - its how I learned.
I've yet to write a blog on how I achieved it but Dave Peterson has written two blogs on his experiences with SPA with Sitecore and AngularJs that might be worth a read.
Yes it is possible
Yes you can use the experience editor, BUT you have to build the site in a specific way. Not in the "normal" way.
Again, same as experience editor, you can use it, but the site has to be built to accommodate that.
Not sure on Angular - I have used backbone, but the principles are very similar.
I have a blog post on how we achieved this for a client: http://www.sitecorenutsbolts.net/2015/12/07/Single-Page-Applications-in-Sitecore-Part-I/
Have a read of that, it gives the principles you should follow to enable Sitecore in an SPA.
Anything is possible in Sitecore, but some customization are too complex to be considered practical.
You can easily build SPA application with the following limitations:
Display various views with either
a) server generated templates, or
b) static .html template with Sitecore-managed content (retrieved as json via custom controllers or Content API) and bound to template using AngularJS.
Limit the scope of personalization to just content.
Have experience or page editor view significantly different from the end-user experience. And even then, this will require separate design to create and maintain.
What is significantly more challenging is:
Utilize Personalization to dynamically display different renderings. Hide/show renderings, etc.
Have Experience Editor reflect the actual design of the SPA experience
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 m still new to client side MVC and at this point exploring my options.
Angular.js, Ember.js both are highly recommended frameworks, backbone.js is a library but most of the implementation user has to do.
Need a opinion from someone who has been working in client side MVC, as to how should one decide which one to go for?
Plus I need the UI to be media responsive, for which twitter Bootstrap looks ideal.
Is it possible to use one of these framework along with Twitter Bootstrap? In which framework is it easier to integrate Bootstrap?
Thanks.
AngularJs and Bootstrap are the two which I would start with.
AngularJS is opinionated, this means it will help you structure your code well. If you just want binding then don't forget knockoutjs. This is in the mvc package by default in VS.
Bootstrap is just html and css markup so should work with everything.
If you start a MVC5 project now in VS2013 you will by standard have bootstrap.
Many people will have different opinions on this so you could wait for an answer for a long time.
I understand your confusion when it comes to selecting the right JavaScript framework. There are many deciding factors that you must evaluate before dedicating your time and money. I noticed that you mentioned a MVC in your questions title. The first thing that you will want to understand is exactly which MV* architecture that you want to have for your app and why. Once you have that nailed down then selecting the framework will be much easier since you will have eliminated a few of the frameworks. The four architectures are MVC, MVVM, MVP and MV*. Another major factor that you will want to look at is the binding mechanism used for the framework. Some frameworks only allow one way bindings while others support 2-way bindings.
To answer your question, based on what you have explained, I would say that Ember is going to be your best bet. Ember will work with Bootstrap
http://ember-addons.github.io/bootstrap-for-ember/dist/
If your still researching the facts then you will really want to check out this helpful link to a page that goes over the pros and cons of the most popular JS frameworks.
Check it out here: http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
I am new to phonegap development & I am trying to pick a framework to use. I'd like to use AngularJS as I've read good things about it, but I'd like it to work with Parse.com as a backend. I noticed that one Parse.com they don't specify any compatibility with Angular, and all their documentation and Javascript API requires Backbone.
I know AngularJS supports http, so I can communicate with Parse using the REST API. But is this going to end up being a mess & will I save myself time & stress if I use Backbone with the Parse.com Javascript API instead?
I have not worked on Parse, but I believe as long there is a REST API available AngularJS can very well integrate with Parse.com. These links substantiate that fact
https://parse.com/questions/does-any-know-of-any-angularjs-sites-that-are-built-with-parse-that-are-open-source
http://brandid.github.io/parse-angular-demo/#/
Said that, AngularJS is a very capable framework with a steep learning curve. The simple stuff is simple but one needs to put ones head down and start learning the not so simple stuff like directives once one starts building any decent size application. The more you invest in learning AngularJS the more rewarding it becomes.
It has a very clean separation in terms of view and code. The code is further organized into modules, factories, services, controllers, directive, filters etc.
But still nothing stops you from creating a mess with the implementation :) What I have realized over the time is even if you create mess within AngularJS the effects are localized rather than affecting the complete application, due to the modular nature of Angular.
I suggest you try creating or looking at some samples with AngularJS (such as TodoMVC)
This is how i felt learning and implementing AngularJS solutions
Thanks for bring up our Parse x AngularJS boilerplate - we've just updated it today too.
Our entire site getbrandid.com is built with Parse x AngularJS and no servers of our own.
We built this boilerplate after because having spent a few years building BRANDiD, we had a lot of best practices to share with the Parse and AngularJS communities. We think it is a match made in heaven, and is the fastest way to build powerful complex, highly maintainable serverless apps.
We've basically extended the Parse SDK to support AngularJS bindings, we've eliminated a ton of boilerplate code, and most importantly, we've established an architecture for large serverless apps using Parse and Angular.
I highly encourage you to check it out -
Parse x AngularJS Boilerplate
Actually Parse's documentation does not say that you have to use Parse with Backbone, it just says that some stuff are compatible with Backbone classes, like the Collections object, which might be useful ONLY IF you use Backbone.
The big hassle of using 3rd party stuff inside angular is its lifecycle, as it uses POJOs and only watches for changes in these objects at specific points in time - Check the Scope Life Cycle documentation for more info.
Given that, when Parse returns its callbacks, AngularJS might no longer be observing those Parse objets, so you need a way of telling angular that thing changed, and you have to do it inside the digest loop, for example using $scope.$apply
I created a small wrapper for Parse.Query and Parse.Object to avoid the need for $scope.$apply all the time, let me know if you find it useful: https://github.com/felipesabino/angular-parse
The easiest way I found to communicate with the parse.com backend is to use the jimrhoskins/angular-parse Angularjs module that replaces the (backbone) ParseSDK.
Ads instant :-) I included it in this angular/parse boilerplate.
We've been using this method fairly frequently. We decided to document our experience. Its a 2 part series on building angular apps with a parse backend. Hope it helps!
I have a nice application written in Silverlight. To allow greater cross browser support, we are considering rewriting with a HTML5 front end.
What would be a reasonable way to move from Silverlight using XAML and C# with MVVM coding patterns into a HTML5 front end.
On the other hand, if this is not a good idea and the MVVM pattern should be abandoned, please explain why.
Knockout is a great javascript library which helps you to write MVVM client side. You create your view models in javascript and bind to them using html templates (with the help of jquery templating). Your view models can use ajax to retrieve data.
It is essentially the same as Silverlight development- you have HTML instead of XAML and javascript instead of C#/VB.Net. You could even use the same web services really...which might be helpful if you plan to offer both interfaces or conversion later on.
Edit
Thought that I'd add that IMHO MVVM should not be abandoned as it really does a great job of separating concerns (I guess when implemented correctly) but a big win surely is that it has the developer thinking about or in the mindset or separating responsibility in an application. I've used Knockout.js for web projects and Caliburn.Micro for Silverlight and have really enjoyed that style of development.
Knockout is MVVM pattern implemented in HTML/Javascript with databinding and all.
http://knockoutjs.com/
If what you want is achievable simply through DOM manipulation, and you're used to and like the MVVM pattern, Knockout should be a good choice.
Yeah, the MVVM pattern for HTML 5 is called MVC. Most easily implementable with MVC3. Provides a layer of abstraction in respect to the JavaScript code, support for ViewModels (aka Views) and separation of concerns between the views, data access, and business logic.
Best of all is that validation and UI event handling is wired for you in a simple manner, allowing you to abstract yourself from the intricacies of JavaScript event handlers for various HTML controls.
However if you strictly want to stick with HTML & JavaScript, I suggest rolling your own JavaScript classes (yes JS is functional language, but you can still make those) that represent your UI layer and handle UI events. Then create your own Ajax library for getting JSON serialized data back and forth from the UI classes to the server back end. Finally create your own business logic classes (also in javascript) to control your UI and DataAccess (ajax) classes. In short.... lots of dirty work.
There is also the experimental Model Driven Views (MDV) library from Google.
Unfortunately, it is only intended as a prototype showcase. Conceptually, it is really cool, but be prepared to do some bug fixing on your own.
http://code.google.com/p/mdv/
There is also JSViews. This one is not as slick as Knockout, but it is faster at updating the DOM. The project is loosely related to jquery as its author was behind the now scrapped query templates.