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
Related
AEM itself is self reliant WCMS and can be used to generate very rich digital experiences over multiple channels.
Often there is talk of using Angular as front end and moving AEM to backseat. What is point of doing so?
Using angular will add additional complexity and developer has to deal with it, increasing efforts for building system.
It will undermine core AEM features e.g. HTL & clientlibs
Multi channel experience can still be achieved without angular.
In short: there is no point in doing so when you deliver static pages, as seen in standard AEM use cases. It get's even worse: when you want to use AEM for dynamic pages, you might run into performance issues, so an external data source / index to query the "dynamic" data is almost mandatory.
I would recommend a clean separation of view and view-model using Sightly and Sling models which allow for a fast refactoring of views in case there is a good reason to migrate the frontend to a different technology / templating language.
And I am leaving out the fact that Angular will be basically replaced by Angular 2 and there are strong competitors like React, Ember etc...
AEM's core strengths are:
WYSIWYG
Multiple Adobe suite integration (analytics, target etc)
Authoring experience for MSM
Security integration from UI to db layer
There are many more strenghts along with many weaknesses. Using Angular or other similar platforms require AEM to be used as Content as a Service (CaaS) which isn't its primary strenght yet.
Organizations that invest in AEM are mostly after the core strenghts provided by it and won't normally benefit from using AEM as a CaaS platform. Unless Adobe provides plugin model for their integration suite that can work with mainstream front wnd technologies like Angular (2) and React, it would be a very uphill task for any team to get the most out of AEM suite without missing out on all the benefits provided (at a cost) by the whole of Adobe marketing suite.
In short, from TcO perspective, these platforms are not easily compatible with AEM due to the unique nature of product which means the integration is normally a challenge and sometimes counter productive when integration benefits of the core platform are compromised.
I believe it totally depends on the use case. I have done projects with AEM using jQuery and others using Angular. If developer knows what he/she is doing, adding angular is not much of a hassle. 2 way data binding, a clean way of doing Ajax and ease of Single Page Application, that pretty much sums it up. Works really well..
Angular and other front-end frameworks provide the additional benefit of SPA which if integrated the right way with AEM can work wonders!
Yes, I agree that integration is an uphill task but the page load times can reduce significantly and using features like routing we can reduce the server calls for transition across the site pages.
Why AEM-Angular integration can be a good thing?
AEM can be used as a CaaS platform in few cases where the content will primarily be loaded using SPA. In other cases, components can be a mix of HTL and Angular where HTL can provide additional security using proper context.
You can pass AEM authored content to Angular directives/components as attributes and perform the desired functionality.
Angular can be used to build reusable components and directives on the front-end which can simply be reused across AEM components.
The Angular dependencies can be made a part of the AEM client library and this ensures that Angular functionality works as expected.
Build tools like Maven and Ant are powerful enough to support the integration. Simple tasks have to be written in pom.xml.
AEM 6.4 Beta has support for front-end frameworks and I have observed how fast the content load can be!
Other AEM integrations (Adobe Target, Adobe Campaign, Adobe Analytics) can be still leveraged in similar ways as before.
Did I forget JQuery? Angular and other front-end frameworks will provide cleaner and more efficient ways of doing the same things in JQuery.
The decision to use both will totally depend on the use case and this is not recommended for all solutions though.
I have worked on AEM for more than a year. In my project, the stack was AEM, jQuery, and some 3rd party library to handle JS relevant issues(like IE support and util functions).
If you want to integrate Angular then I see the below things from your query
Good :
You don't need the headache of java related issues.
No need for more backend developers(though I am a backend developer).
If you do want to change some files in stage or prod environment, no need to go with java change directly package installation will work.
You can leverage angular strategies to build your project efficiently.
No need to worry about your project optimization. Angular will take care of JS library optimization and loading into client-side browser.
No need worry for page speed issues from google audit for your websites. That will be taken care of by Angular.
You will be able to achieve the hybrid model of clientlib and can avoid lot's of Js issues along with clientlib comes in to picture.
Testing of components will be easier.
AEM also follows Component similar to angular, so things can be merged based on good architecture.
Not Good:
sightly syntax might be underutilized.
Still, there will be cases you have to dependent on java for achieving some features.
Security issues need to be fixed as everything will be done on the client-side.
more issues if you are using etc/map related URLs.
more complexity if you follow SEO optimization standards.
More dispatcher configurations.
Needs to habituate aem structure with angular structure.
AEM structure will be more complex when merged with angular
I am quite new to Angular. I have written this answer based on my experience. I will keep updating if any edits required.
Using AEM as an integration layer is a challenging decision. AEM is a content management system and works well for static content (content is cached at Dispatcher layer).
However, it use the Jetty server under the hood. Jetty uses thread pools for handling requests. It means that when the number of users increases, it use more and more resources. The situation is the same for time-consuming operations - think about API's unavailability or delays.
Instead of using AEM as an integration layer, you delegate this integration logic to more reactive systems such as Knot.x. Then AEM may serve only static pages (templates), Knot.x would fill all required data from external APIs.
See more here.
Does it make sense having a solution that uses both Freemarker and AngularJS?
I tried to convince everyone on my team of switching to Angular, and a more experienced developer than me pointed out that he prefers server-side rendering, which is both arguable and valid. But then he told me that if I still want to use Angular just use it with Freemarker instead of replacing it.
I'm a junior programmer, as far as I can understand they are designed to the same purpose.
It depends on the needs.
For example, if you want to break your page into individual re-usable components that you can tie based on some logic on the server side, then using freemarker or velocity for building these components makes sense.
The freemarker or velocity templates might in-turn use angularJS components that would be rendered on the browser and evaluated on the client side.
The server side templating would give you the ability to design re-usable angular components.
Now, some may try to use the Object component in HTML5 for doing the same thing, but this is not recommended as using Object expects a fully formed HTML element with its own <html> opening and closing tag.
Not something that is intended for a small reusable component.
As an example consider having your page header and footer in its own html template file that you would like to tie in for all the pages in your application.
As I google for Freemarker i realize it is just a templating engine. AngularJS is not a templating engine. Templating engine is just part within this framework. So both of them cannot be compared.
AngularJS is a full fledged framework for creating Single Page Applications (SPA). So if you want just templating capabilities on client side, i suggest you better look for some other light weight libraries.
If you want to use AngularJS you need to decide
Whether you can structure your app as a SPA
Does the site needs to be SEO optimized. Which has limited support in Angular or as a matter of fact in any client side framework.
Ready to use the AngularJS templating engine because it is awesome with its support for oneway\two way active bindings. If you don't use it templating engine you are loosing a lot.
No it clearly does not make sense as they serve very different purposes. All I can think of is that you either misunderstood the more experienced developer or he really has not understood the business case (WHY something is worth using) of using either technology. In my experience as a j2ee developer, I find that many server side developers (experienced or not) may not be too educated on the many new advances recently made in client side development. With Angular you are not limited to SPA. You need an insight into the overall architecture of your current project to determine if its a good fit. There are ways around the SEO issues or you can purchase an SEO solution. But clearly not a best choice if SEO is essential.
Unless it is a team decision and there are clear problems Angular solves for you, I would not suggest getting stuck alone with a new technology that only you know. Keep it as a hobby and when you really understand the best practices and benefits you can then try being an evangelist.
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/
I am starting a large scale EXT JS application and wanted to know if anyone knows of any helpful resources. Everything i've seen up to this point has been a single page application. I would like to use MVC for the front end. Thanks for your help!
#Sra's comment is the most appropriate response here.
Regarding 'single page applications' then can certainly be used for larger scale projects, but careful management of code and the DOM is needed.
I think you might need to provide a bit more information about how you're planning to do things and what you're worried about.
Ext offers a client side MVC implementation but this does tend to centre around the single page application model. What this means is that you write your models, views and controllers and let your app decide which to render.
The app is responsible for creating and disposing of client side controller and view instances, and the models really just exist to validate data and provide a sensible mechanism for sending / retrieving data from the server side.
If you're wanting to use a typical server side MVC implementation e.g. ASP.NET MVC, then it should be noted that unless the app is massive, you'll probably just end up with a single .NET 'view', this view will contain your entire ExtJS app.
You 'can' if you want, create a series of mini apps via Ext and render those in several server side views, but you will end up with a lot of duplicated (or shared) code which may well be a pain to manage.
So to sum up, yes, you can use Ext for larger applications, yes you can use MVC (both client and server side) and finally yes, your front end will likely form a single page application.
Just to add a bit to the #dougajmcdonald's excellent answer: there are improvements to MVC architecture and dependency handling coming up in Ext JS 4.2, that are specifically aimed at folks with big apps on their hands. It will be a lot easier to share code between related applications, which would also make writing multi-page apps easier as well.
EXTjs is not supposed to be coded in single page. EXTjs 4 supports MVC architecture.
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
please sencha command also. it helps you to create a backbone of MVC application
http://docs.sencha.com/ext-js/4-1/#!/guide/command
I was trying develop a website with Cakephp and Joomla... But lately I've been founding a lot of barriers that create difficulties implementing things that would have been a lot easier if I only developped using one of the components.
So, in your point of view (as someone with more experience than me), is it worth to integrate CakePhp with a CMS?
If yes, what do you think its the best and easier CMS to integrate with?
Or use Croogo (http://croogo.org/)
A CakePHP CMS. I like Croogo's implementation more than Wildflower and the admin UI looks a bit similar to Wordpress.
From my point of view i wouldn't try. I think there would be a lot of crossover functionality and a lot of conflict. Either use Cake and write a CMS and the other elements you want or pick a CMS and develop the other elements you want as add-ins/plugins.
Joomla, Drupal, Xaraya, Expression-engine etc are all extensible so pick the one that is the best fit and has the ability to be extended or maybe already has plugins you require.
Another option would be to use Joomla as the CMS and Cake for the other element you want, keep them as separate entities but skin then identically and make the navigation seamless. In this case about the only thing you would need to integrate would be state.
There are some out there already that are on Cake from the ground up. Wildflower for example
http://wf.klevo.sk/
I have a cakephp site that is running wordpress in it's public_html/blog folder and it is doing great.
They are basically two separate sites, with two separate backend but it is fairly easy to create a model for the wordpress database if you want to pull in any data (eg. posts, pages, comments) and use it in the cakephp site.
As far a integrating the two I don't think it is a good idea if it needs to be a seamless experience for the backend users, most frontend users won't notice the difference because you can use the same style sheet and images.
If you want any more about my experiences with the combination let me know!
Cakeui is a rip of Croogo. Infinitas CMS could be what you're looking for if you want a full blown application or check this site for a list of good CakePHP Cms
As the developer of Croogo, I will be biased and recommend you to check it out at http://croogo.org. It comes with a web based installer too and you should be up and running in minutes.
Another CakePHP based CMS is Infinitas which has more features (including shopping cart). Both are based on the latest version of the framework (1.3 at the moment) and are actively developed.
I wrote a lot of CMS type apps with Cake and was thinking along the same lines. I've tried Joomla, Drupal and Wordpress but still had a dirty feeling in my mouth that I was failing by using Cake just for the sake of it or vice versa.
The most important common denominator, in my experience, is the back-end. It is re-used most often, but gets the least input.
Now I have built my own CMS with CakePHP. The intention is to 'opensource' it, but it's not quite ready yet.
I don't think it is worth the headache trying to combine, then maintain Cake and a 3rd party CMS. Save your best modules and components and build your own. The blog tutorial will give you a good head start and you can cherrypick what you like from other sources, rewriting it to suit your ideals. The benefit is you will then know the CMS inside out and have it working just the way you want. You'll learn a lot along the way as well.