AEM SAP Integration

[AEM_Forum]

Hi all,

We have a project to build websites within AEM that pull data from SAP.
 
The questions client is asking:

1. What is the best gateway to use to extract data from SAP and convert into APIs (SAP gateway is being proposed)
2. Is it possible to develop in AEM using SAP UI5 framework? If so what are the pros and cons?
3. Is it faster + cheaper to develop using SAP UI5 within AEM to connect to this SAP gateway layer or is Angular/extJS better?

Kindly suggest.

Appreciate all your replies.

Thanks,

Rama.

[kautuk_sahni · Accepted solution]

Hi Rama

For Question 2 and 3, my answer would be, choosing between Angular VS extJS VS SAP UI5 VS any other is all related to the project we would be developing.

All frameworks have their pros and cons, to we need to choose framework which best fits in our requirement.

ExtJS vs AngularJS

                                                                                                                                                                                                                                             

Sno	Features	ExtJS	AngularJS
1.	One stop shop for rich UI applications	✔	✘
2.	Rich suite of theme-able UI components	✔	Fortunately, there are a number of open source and commercial components which provide integration for AngularJS including AngularUI, AngularUI Bootstrap, Kendo (and Angular-Kendo), Wijmo and others.
3.	Designed for Single page apps	✔	✔
4.	Cross browser compatibility	✔	AngularJS relies on jqLite/jQuery that provides cross-browser compatibility. However integration with 3rd party libraries may require cross browser compatibility.  Note: AnugularJS (1.3 and above) has dropped IE8 support while Sencha ExtJS 5 will continue to support IE8. If IE8 support is a requirement for your enterprise customers, ExtJS should be considered.
5.	Charts	ExtJS standalone charts are the industry's most powerful and most advanced, are plugin free and sufficient for most business applications.	AngularJS D3 Charts which are basically the integration with D3 charts makes its presence amazing in charting and graphing capabilities. Fall in love with D3 charts at D3.js.
6.	Learning curve	High	Medium
Architecture
7.	Application Design Framework	ExtJS 5 supports both MVC (Model-View-Controller) and MVVM (Model-View-ViewModel)	MVW (Model-View-Whatever). It can support popular patterns such as Model-View-Controller or Model-View-ViewModel
8.	Dependency Injection	Ext JS can be augmented with Deft JS to add an Inversion of Control (IoC) container, for dependency injection	✔
9.	Two way data binding	✔	✔
10.	Direct Dom manipulation	✔	✔
11.	Modular	✔	✔
Testing
12.	Automated testing Support	Possible with external tools.	✔
13.	Testing framework or Test runner	Several popular third-party JavaScript testing frameworks such as Siesta (optimized specifically for Ext JS), Jasmine and Mocha are being used for testing.	AngularJS ships with its own end-to-end test runner (Karma) to facilitate integration testing. Protractor is end to end test framework for Angular apps.
Performance
14.	Dom Approach	Depth-First, Bottom-Up approach	Directives are linked in a Depth-First, Bottom-Up approach to the DOM (Document Object Model) tree. Controllers are linked in a top-down manner.
15.	Performance	Higher footprint/weight and hence ExtJS is comparetively slower.	In our performance tests, AngularJS was 3 times lighter than ExtJS. See Performance comparison stats.
16.	Lightweight - small download footprint	✘	✔
Mobility
17.	Mobile support for web applications	Sencha recommends using Sencha Touch for mobile versions of the application. Components like NestedList are far better than Grids for usability on mobile devices. However, this may mean separate effort for mobile versions of your app.	Responsive web apps using ng-touch library, angular-gestures and angularJS responsive modules.
18.	Cross platform native mobile applications/Hybrid apps	Possible with Sencha Touch and Apache Cordova/Phonegap integration.	Possible with Trigger.io, Cordova/Phonegap integration, Ionic framework which is optimized for AngularJS and is used for developing rich and robust mobile applications.
19.	Mobile sites	Sencha touch is used to develop mobile sites.	AngularJS responsive modules (angular-responsive, angular-deckgrid etc), UI Bootstrap, AngularJS responsive directives, angular-gestures and the ngTouch library.
Routing
20.	Built in router	✔  Introduced in ExtJS 5	✔
21.	Deep linking	✔ Introduced in ExtJS 5	✔
22.	Browser history, forward and back buttons Support	✔ Introduced in ExtJS 5.  Possible through Ext.util.History in earlier versions.	✔
23.	Browser's bookmark support	✔ Introduced in ExtJS 5	✔
24.	SEO support	Most of the single page apps which work behind authentication may not require indexing for SEO. For public pages, either you can use static HTML/CSS or if you do need to use dynamic content, consider Ajax based SEO.	Consider Ajax based SEO with either Prerender.io or headless browser support in your web-server.
Deployment
25.	Build tools	Sencha cmd tools for ExtJS 4.x+ and  Sencha sdk tools for upto ExtJS 3.x	3rd party Grunt tool
26.	Package Manager tools	Sencha cmd tools	Yeoman, Grunt and Bower
Licensing and Support
27.	License: open source or commercial	Per-seat / per-server commercial license and open source under GPL license.	It is an open-source JavaScript framework under MIT license.
28.	Full documentation suite, tutorials, videos examples, trainings	✔	✔
29.	Support: general discussion, reporting bugs and making feature requests	Web-based public and premium (paid support subscribers only) support	public support
30.	Complete fun and satisfaction: no management concern of integrating new releases and bug fixes from the selected 3rd-party libraries throughout the application's development lifecycle	✔	✘
Others
31.	Built in animation support	✔	✔
32.	Deferred and Promises	DeftJS provides a number of extensions for ExtJS, including Deferred and Promises.	✔
33.	Dirty Checking	✔	✔
34.	Deferred Bootstrap	Until now, ExtJS applications' testing has never required delay in the Bootstrap as third-party JavaScript testing frameworks which are used for ExtJS application testing do not require deferring the bootstrap.	Angular Scenario Runner and Batrang require Deferred Bootstrap and hence Deferred Bootstrap concept is introduced to allow end to end tests.

Source Link:- http://www.techferry.com/articles/ExtJS-vs-AngularJS.html

When to use which framework:

Use ExtJS if:
    You want to use handy components delivered with Sencha Ext JS. It is a huge time saver.
    You do not want to worry regarding cross compatibility issues while Programming and Developement. It is a big plus.
    You or your client need specialized licensing or an accountable party to call for support.
    If separate rich desktop applications (with Sencha ExtJS) and mobile web applications (with Sencha Touch) is valuable.
    If paid support contracts and a per-seat / per-server commercial license is affordable.

Use AngularJS if:
    Smaller Footprint is required.
    Responsive design is a requirement for your application.
    Your organization find value in automated testing and automated testing is a part of your development culture.
    It would be cheaper to integrate existing 3rd-party components which are free.
    Your team is comfortable with CSS and dealing with cross-browser compatibility issues.
    If the team will be able to manage integrating new releases and bug fixes from the selected 3rd-party libraries throughout the application's development lifecycle.

For SAPUI5 VS Angular

Please have a look at these articles:-

Link:- http://stackoverflow.com/questions/21557156/sap-ui5-versus-other-javascript-frameworks

Link:- https://www.quora.com/How-does-SAP-UI5-Open-UI5-compare-to-Angular-JS

Link:- http://scn.sap.com/community/developer-center/front-end/blog/2013/12/15/openui5-or-angularjs-how-abo...

For Question 1, could you please explain a bit "to use to extract data from SAP and convert into APIs" ? How would you be extracting this data? form where? 

I hope this would be of some help to you.

Thanks and Regards

Kautuk Sahni

[AEM_Forum]

Appreciate your detailed and informative reply Kautuk.

Thanks,

Rama.

[kritesha8201694]

SAP/FedEx Web services integrations and RESTIntegration with AEM. Created service data object to simplify the integration of web services by following eclipse module framework. Also REST exposure to WAS business services for the purpose of Adobe Experience Manager Web Content Management integration.

As the ODATA protocol is getting famous nowadays, and so many APIs avail different services/data as ODATA service, how an ABAPer can male use of it?

Here is one of the way to call an external API and get the data into ABAP system.

Step 1. Use class CL_HTTP_CLIENT to get an object of type IF_HTTP_Client. There are different methods for getting this object. example: by the API URL or by HTTP Destination etc.

In below code snippet I have used API URL to get the object. Once the object of type IF_HTTP_Client is received, then execute the instance methods SEND() and RECEIVE() to establish Connection and Dispatch of Data and receive HTTP Response.

Hop this information will help you.