AEM SAP Integration

AEM_Forum

13-09-2016

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.

Accepted Solutions (1)

Accepted Solutions (1)

kautuk_sahni

Community Manager

13-09-2016

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

                                                                                                                                                                                                                                             
SnoFeaturesExtJSAngularJS
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.ChartsExtJS 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 FrameworkExtJS 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 InjectionExt 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 SupportPossible with external tools.
13.Testing framework or Test runnerSeveral 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 ApproachDepth-First, Bottom-Up approachDirectives 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.PerformanceHigher 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 applicationsSencha 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 appsPossible 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 sitesSencha 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 supportMost 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 toolsSencha cmd tools for ExtJS 4.x+ and 
Sencha sdk tools for upto ExtJS 3.x
3rd party Grunt tool
26.Package Manager toolsSencha cmd toolsYeoman, Grunt and Bower
Licensing and Support
27.License: open source or commercialPer-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 requestsWeb-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 PromisesDeftJS provides a number of extensions for ExtJS, including Deferred and Promises.
33.Dirty Checking
34.Deferred BootstrapUntil 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

Answers (2)

Answers (2)

kritesha8201694

09-04-2019

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.