AEM SAP Integration | Community
Skip to main content
AEM_Forum
AEM_Forum
September 13, 2016
Solved

AEM SAP Integration

  • September 13, 2016
  • 3 replies
  • 5170 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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-about-both

     

    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

    3 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    September 14, 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-about-both

     

    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

    Kautuk Sahni
      AEM_Forum
      AEM_ForumAuthor
      September 14, 2016

      Appreciate your detailed and informative reply Kautuk.

      Thanks,

      Rama.

      K
      kritesha8201694
      April 9, 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.

      Terms & ConditionsAccessibility statement

      Loading footer...