Thursday 27 April 2017

String Template in ABAP, ES6, Angular and React

As an ABAP you probably be very familiar with String Template.

String Template in ABAP


A string template creates a string from literal text, embedded expressions, and control characters in a string expression. The most powerful feature I like is we can insert ABAP variable inside the template by wrapper variable with “{ }”, see one example below:

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

In the runtime, ABAP will replace the String Template content with actual value stored in that variable. This functionality is especially useful when you need to populate string dynamically based on some ABAP variable, for example you need to create some ABAP class or function module whose signature is only known in the runtime specified by consumer.
The below highlighted string is the calculated result of String Template | DATA: _{ <argu>-arg_name } LIKE { <argu>-arg_name }.|.

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

String Template is heavily used on my series of my blogs where I attempt to simulate some nice feature in other languages using ABAP:

String Template in ES6


Say you have an array which contains name of several programming languages. And the requirement is to print lines of “Hello” plus language name stored in the array.
Pretty easy to implement, isn’t it?

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide
SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide


Now try String Template in ES6. If you know how to use String Template in ABAP, it’s a piece of cake in ES6 as well:

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

See comparison below:

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

It seems that ABAP String Template wins in this round of comparison since lots of format_options are supported there.

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

String Template in Angular


Technically speaking it is not precise to name the below feature to be explained as “String Template” in Angular context, nevertheless I decide to continue using this name since it works as the same logic from end user perspective as String Template in ABAP and ES6 and also have the similar grammar.
Try this url in your browser:

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

Why? Check the source code of this hello world page, here I use a similar “String Template” as the example described in previous ES6 part: {{ name }} will be replaced with the value of Angular model “name” ( declared via directive ng-model ) in the runtime. But keep in mind, this replacement is done by Angular framework. This is the biggest difference compared with ABAP String Template and ES6 String Template, where the replacement is done by ABAP runtime and JavaScript execution engine accordingly.

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

The parse of “Hello {{name}}” itself is done by Angular as well:

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide
SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

Every time you type character in the input field, the content of String Template will react to this change and refresh itself. If you open F12 in Chrome development, you can observe the following trace when “Jerry” is typed.

SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

If you would like to know in detail how Angular Data binding is implemented.

String Template in React


SAP ABAP Tutorials and Materials, SAP ABAP Certifications, SAP ABAP Guide

1 comment: