Calling all ABAP developers who need/want to learn JavaScript…

In Kevin Small’s excellent blog he informed ABAP developers that:

a) Its OK to take other programming languages seriously   🙂

b) JavaScript is one such language

c) You really need to learn this language

So for those ABAPers who now want to take the next step and plunge into the low-level details of the language, I have updated the JavaScript language training material that was originally published in this blog.

<updates>

The link in the paragraph below starting “All seven chapters…” now points to the updated ZIP file.

Since functional programming is slowly, but surely moving into the consciousness of the imperative programming world, I thought it appropriate to update and extend the final chapter of this training material to cover some basic concepts in functional programming.  This amounts to taking you through a conceptual transition from knowing how to use for loops, to understanding how to use the map, reduce and filter functions.

This however, is only scratching the surface.  Functional programming is certainly much, much more than simply throwing in the odd map or reduce function, but it is also certainly nothing less.

What is not covered are topics like partial functions, function composition and (dare I mention the M word) Monads…

These topics really are the heart of functional programming, but since functional programming is based on a completely different mental approach to how your software is built, many people find the concepts harder to grasp because they must first unlearn their existing way of thinking – and this doesn’t happen in your lunch break.  Also the concepts of functional programming do not fit so easily with the architecture of SAPUI5 based applications; therefore, I have not attempted to deal with them here.  Nonetheless, simply getting your brain around map, reduce and filter is a vital first step.

Also what is not covered is topics like asynchronous programming with Promises, or any of the new features in ES 6.

If I get time, I’ll cover these topics in the future…

</updates>

One of the main conceptual differences ABAPers will need to understand is that fact that JavaScript is a highly dynamic language!  This then requires you to think in a completely different manner about how you construct your software.  I attempt to explain the differences in a step-by-step manner, without asking you to make any leaps of understanding.

These slides cover the JavaScript language from the ground up and have been designed with the assumption that the reader has no prior knowledge of the language.  You will be guided in gradual steps from the simplest concepts of language syntax and data types, right up to advanced topics such as creating prototype chains and the use of the functional programming style (as opposed to the more familiar imperative programming style used by ABAP)

Chapter 1: Introduction
Language origins, design influences, version history and available runtime environments
Chapter 2: Data Types
JavaScript’s approach to data typing (weak vs. strong), and the 6 JavaScript data types: Null, Undefined, Boolean, String, Number and Object
Chapter 3: Syntax
  1. Operators
  2. Type Coercion
  3. Using Operators
  4. Declarations and Objects
  5. Arrays
Chapter 4: Scope
  1. Declarations
  2. Variable Hoisting
  3. Function Declarations
  4. Lexical Scope
  5. Scope Chaining & Variable Lifespan
Chapter 5: Functions
Chapter 6: Inheritance
  1. Prototype Chaining
  2. Defining Your Own Prototype
Chapter 7: Introduction To Functional Programming
  1. Operators
  2. A Functional Programming Example
  3. Side Effects
  4. Changing Your Mind
  5. A SAPUI5 Example
  6. Summary

Since these slides are focused only on the JavaScript language itself, they do not cover the use of JavaScript within the specific context of a browser (E.G. DOM programming and event handling are not covered); neither are JavaScript frameworks such as jQuery, Sencha or SAPUI5 covered. These subsequent topics should be addressed only after you have built a solid foundation in the language itself.  For instance, once you have gone through these slides, you will be completely ready to start SAPUI5 training.

All seven chapters are contained in this ZIP file in PowerPoint SlideShare format.  Because the low level details of learning a language can be rather dry, I’ve taken a somewhat tongue-in-cheek approach and thrown in a few amusing comments and asides just to lighten things up.  🙂

Unfortunately, I have had no time to create any exercises to accompany these slides; however, if you open the Chrome or Firefox browser and then open the Developer Tools, you will have access to a JavaScript console in which you can execute JavaScript commands and create simple objects.

Alternatively, if you’re feeling somewhat more adventurous, you could install NodeJS and then have a JavaScript runtime environment that does not require a browser (server-side JavaScript).

Hope that helps!

Chris W

To report this post you need to login first.

67 Comments

You must be Logged on to comment or reply to a post.

  1. Fred Verheul

    Hi Chris,

    Thanks a lot for sharing this stuff. Must have cost you a fair amount of time to create these training materials!

    I’ve only scanned part of two of the presentations yet (to get a feel), but they look awesome, and IMHO any aspiring Javascript/UI5 developer should go through them.

    I certainly will, even though I don’t have any such aspirations at the moment 🙂 .

    Cheers, Fred

    (0) 
    1. Chris Whealy Post author

      Hi Fred

      Thanks for your comments!

      Dumping what you know into a presentation doesn’t take too long.

      However, dumping what you know into a presentation in such a way that it makes sense to other people takes a lot more effort.  That’s why these slides took me about 6 weeks to write…

      Hope they make sense to you!

      Chris W

      (0) 
  2. Roel van den Berge

    Hi Chris,

    Excellent set of slides and I agree that JavaScript is an important language to learn. As an ABAP developer it can be your ticket to dive into new and exciting areas, such as mobility. You have so much added value if you know the chain from backend (ABAP) to front-end (JavaScript/jQuery/HTML5/CSS.

    And before you start to dive into frameworks it indeed makes a lot of sense to learn the ingredients for these frameworks (I recall an excellent presentation on this subject by Jan Penninkhof at the SAP Inside Track Netherlands in 2011).

    Thanks for taking the time to create and share this!

    Cheers, Roel

    (0) 
    1. Chris Whealy Post author

      Hi Roel

      Thanks!

      I would strongly recommend that anyone wishing to learn SAPUI5 should first lay a good foundation in the JavaScript language, because the coding concepts of JavaScript are very different from ABAP.

      ABAP has no concept of things like:

      • Functions as first class citizens
      • Prototypical Inheritance
      • Closure

      This is largely because JavaScript borrows coding concepts from functional programming, but ABAP is a rigorously imperative programming language.  Therefore, concepts exist in JavaSCript that are completely alien to an ABAPer.

      Another challenge is that since JavaScript is a multi-paradigm language, it is possible to jumble the imperative and functional coding styles together into single (bizarre) hybrid app that works, but only makes sense to the author.

      So unless you are thoroughly grounded in the way JavaScript does (or can do) things, you will come across blocks of code in frameworks such as SAPUI5 or jQuery that you know work, but seem to do so in a way that requires use of the Dark Arts…

      Maybe I should rename this blog to “Defence against the Darks Arts – or how an ABAP Programmer can learn JavaScript”  🙂

      So my advice to an ABAPer starting off with JavaScript is this:

      • Take slow
      • Practice a lot
      • Bring a friend

      Chris W

      (0) 
    1. Chris Whealy Post author
      (0) 
      1. PRUTHVIRAJ DAYAM

        Hello Chris, is SLIDESHARE the only source for this content now? I’m not able to see the download links in the blog/or the updated links are not working for me.

        can you please have a look and advice. 😕

        (0) 
  3. Gareth Ryan

    Thanks for this Chris – a great resource and no doubt a really useful reference for “traditional” SAP developers.  I’ve pointed all of my colleagues in this direction.

    Cheers,

    G.

    (0) 
  4. Abdul Hakim

    Hi Chris – Excellent Blog..It would have been better if the document accompanies some exercise and solution attached to it 😉

    Thanks

    Hakim

    (0) 
  5. Paulo Dinis

    Javascript can be a very tricky language. 🙂

    This document will be a reference to all developers that are new to this language.

    Thanks a lot Chris,

    PcDiNiS

    (0) 
  6. Rajesh Chowdary Velaga

    Hi Chris,

    Sure this is one of the best articles in ABAP forum. I just wanted to know whether there are

    any differences between Client Side Java Script and Server Side Java Script? If yes, then how to get started to learn Server Side Java Script for HANA XS.

    Thanks,

    Rajesh

    (0) 
    1. Chris Whealy Post author

      Hi Rajesh

      Maybe I should have made this point more clearly in the material…

      As I explained in Chapter 4 (Scope), JavaScript programs always execute within a Global Execution Context.  However, what this Global Execution Context actually equates to varies depending on whether you’re running JavaScript within the context of a browser, or within the context of some server-side environment.

      In a browser, the Global Execution Context is identified by “window”.  This global object gives you access to all the features of the runtime environment (I.E. the browser itself).

      When running JavaScript within the browser, the most important aspect of the Global Execution Context is to provide access to the browser’s Document Object Model.  This is object through which a JavaScript program can alter the UI elements on the screen.  Without access to the DOM, there would be little point having a browser execute JavaScript programs…

      However, when JavaScript runs on the server, this DOM is specifically missing because it is not relevant.  Here, javaScript still has a Global Execution Context, but this is identified by some object such as “global”.

      If you install Node JS, then open a node console and type “global.” followed by a tab character, you will see all the properties of the global object – as defined by the requirements of a server-side runtime environment.  Objects such as “window” or “document” are conspicuously absent due to that fact that they are specific to a browser-based runtime environment.

      Apart from the differences in the Global Execution Context (and the associated API differences), the JavaScript language is exactly the same on both the client and server sides.

      Regards

      Chris W

      (0) 
      1. Ashwani Sharma

        hi chris,

        how to start my script abap workbench please share me simple code because i have knowledge in java script but how to implement in sap i dont know

        thanks

        (0) 
        1. Martin English

          Ashwani (and others),

            If you wish to use the ABAP workbench, see the techniques I described in A Simple UI5 application running against ABAP without the SAP UI5 Add-on. As I allude to in the blog, some people have been doing this for years

          HOWEVER… bear in mind that you do not need any SAP tools to start learning javascript. You can start simply by saving the following text (researched from W3Schools JavaScript Tutorial) in a file then opening it in your browser.

          <!DOCTYPE html>

          <html>

          <body>

          <h1>My First JavaScript</h1>

          <p>Click Date to display current day, date, and time.</p>

          <button type=”button” onclick=”myFunction()”>Date</button>

          <p id=”demo”></p>

          <script>

          function myFunction() {

              document.getElementById(“demo”).innerHTML = Date();

          }

          </script>

          </body>

          </html>

          The result is….

          /wp-content/uploads/2014/06/date_466782.png

          hth

          (0) 
  7. Naren S

    Thanks Chris,

    For your valuable contribution, appreciate your effort on providing these valuable ppt’s.

    Regards,

    Naren

    (0) 
  8. Joao Sousa

    Great stuff.

    I have to say it’s a shame that a scripting language is being used to develop full fledged programs though. Having a non Strong type language for complex projects leads to a lot of runtime bugs that are hard to pin point.

    After working with other languages like C# or Java, using Javascript to develop big programs just feels wrong.

    (0) 
    1. Chris Whealy Post author

      Hi Joao

      The arguments about whether strong or weak typing is better have been rumbling on for decades, and personally, I doubt that there is a “correct” answer.  In fact, I think the whole question misrepresents the problem…

      But anyway, all programming languages, whether strongly or weakly typed have weaknesses and faults of some sort or another.

      When we start working in a different language that contains many strengths, but a different set of weaknesses than the ones we’re used to, at first we perceive those weaknesses to be faults; but in doing so, we have forgotten that the languages we’re familiar with also have weaknesses and faults.


      The fact that JavaScript is weakly typed is a great advantage because it allows for a highly flexible and dynamic style of coding.  Its just that if you come from a background of strongly typed languages, you won’t be familiar with this style of coding – and it does take some getting used to…


      As far as genuine faults in JavaScript are concerned, I think there are two far more fundamental flaws in the language, namely:

      • Dependence on global state (the “window” object on the client-side and the “System” object on the server-side)
      • Single threaded execution

      These two issues cause far greater problems in application design than the use of a weakly typed variable system.

      Web Workers are a first step towards implementing multi-threading into JavaScript, but these are expense (because they are actual OS level processes) and the messaging between workers is asynchronous, which often leads to another one of JavaScript’s little delights, knowns as “callback hell”.

      There are libraries to alleviate these problems (take a look at https://github.com/marcopolo/servant), but in order to make use of them you now need to start working in languages like Clojure and ClojureScript from the world of functional programming rather than the more familiar imperative languages such as C/C++/Java/ABAP etc.  And this is where imperative programmer’s brains go into meltdown…

      Going back to your original point, large applications can be written in JavaScript, but the success of such an exercise is based on understanding and then working within the limitations/weaknesses of the language.

      JavaScript is by no means a “perfect” language, but then I don’t think there is such a thing.

      Regards

      Chris W

      (0) 
      1. Joao Sousa

        C# has the flexibility when you need to, yet enforces strict rules when you don’t need the flexibility. This decreases bugs and maintenance costs.

        Also I find JavaScript support in IDEs several miles away from C#, Java or Objective-C.

        (0) 
        1. Chris Whealy Post author

          Hi Joao

          Don’t confuse what you’re used to with what is good   🙂

          In fact, framing the question in terms of which programming languages are “good” and which are “bad” misses the point.

          The question should always be this: “For my current task, which programming language will help me get the required results quickly and efficiently?”.

          The more familiar you are with a general purpose programming language such as C++ or Java, the more often you will find yourself answering this question the same way you answered it previously.  Continue down this road for several years, and you end up in the all-too-familiar situation of thinking that one programming language is “better” than another.

          Rightly or wrongly, JavaScript is the language built in to all browsers.  The IDE tooling for JavaScript is certainly not as advanced as for other languages, but improvements are being made all the time in this area.

          Love it or hate it, JavaScript is the most widely used programming language in use today simply because all browsers use it and everyone uses browsers…

          Regards

          Chris W

          (0) 
          1. Joao Sousa

            Love it or hate it, JavaScript is the most widely used programming language in use today simply because all browsers use it and everyone uses browsers…

            Like I started by saying, I hate it and think it is a shame it became so widely adopted by accident.

            Don’t confuse what you’re used to with what is good   🙂

            Now you are just making assumptions. I’ve used about the same C#/Java as I have JavaScript, and I still think JavaScript is an appalingly bad language with which to develop large applications.

            (0) 
  9. Francesco Amigoni

    Chris, many thanks for this design assumption: “These slides have been designed with the assumption that the reader has no prior knowledge of the language

    I will fill a(n enormous) knowledge gap.

    I’m reading it.

    (0) 
  10. Jeroen Custers

    Hi Chris,

    This training material is great! I was struggling to get started with JavaScript and this material is a very good start for me (as ABAP developer).

    Thanks!


    Best regards,

    Jeroen

    (0) 
  11. Pawan Akella

    Hi Chris

    Thanks for the material.

    The material was very helpful for me

    After going through the material now I am able to understand the UI5 programming syntaxes and its uses

    Job well done   🙂

    (0) 
  12. Aaron Shen

    Hi Chris,

    thanks for sharing such wonderful learning material. I’m just reading them.

    But I find something I’m not sure if it’s an error. In 2/7 Data Types, page 8. The six types should be: Number, String, Boolean, Object, Function, Undefined.

    Regards,

    Aaron.

    (0) 
  13. Srinivas Bhimavarapu

    Hi Chris,

    Thank you very much for this material. came across this in right time just when i am starting to have my hands on HANA. planning to work with UI5 and JS. This gives lot of confidence for ABAPer’s to take this stuff am sure.

    Regards,

    Srini

    (0) 
  14. Gaurab Banerji

    Hi Chris,

    Thanks for the very useful share. Javascript is a very important language when it comes to development of Adobe forms, BSP, WD, WebUI, UI5, etc developments. HTML and CSS are also important. It would be great if you can provide some examples on how to use HTML, JS, CSS, etc in SAP web applications.

    (0) 
  15. sriramula kishore

    Hi Chris W

    Thank you for such detailed explanation,your work is much appreciated.

    Even though i knew java script earlier but you have made it very clear and it stands out from any source available.

    Just love your work/passion , keep writing.

    Thanks

    SSK

    (0) 
  16. Thomas Porcham

    Hello Chris,

    thank you very much for the excellent slides. Today I went through Chapter 6 “Inheritance”.

    On slide 29 and 40 properties of a prototype object are set:

    Person.prototype = {
    this.firstName: “”,
    this.lastName: “”,
    this.dateOfBirth: null
    }

    This gives me a syntax error. Omitting “this” fixed the problem for me.

    On slide 29 you give an example for using prototype properties:

    function Person(fName, lName, dob) {
    this.firstName = fName || “”;
    this.lastName = lName || “”;
    this.dateOfBirth = dob;
    }

    Person.prototype = {
    firstName: “”,
    lastName: “”,
    dateOfBirth: null
    }

    I think in this example memory usage will not be reduced in any way. In this example every Person object will have their own properties firstName, lastName and dateOfBirth.

    The properties in the prototype object will never be accessed. They use a small amount of additional memory.

    I think a property  with a default value defined in the prototype (e.g. nationality: “Austria” ) would support your arguments on this slide. All instances that don’t overwrite nationality will share the same property. Hence, memory is saved.

    Thanks,

    Thomas

    (0) 
    1. Chris Whealy Post author

      Hi Thomas

      Thanks for taking the time to give this detailed feedback.

      Yes, you’re right.  There were some typos there – the variable names within the person function should not have been prefixed with this.

      I have reworked slides 26-35 to provide a clearer explanation of how prototype are inherited by constructor functions.

      I’ve just uploaded  a new version of the presentation.  Please wait 24 hours or so and download the updated copy.

      Thanks

      Chris W

      (0) 
  17. Thomas Porcham

    Hello Chris,

    in Chapter 4 “Scope” on slide 90 you present an example:

    //####################################

    var someGuy = (function(){
    var firstName = “Harry”;
    var lastName = “Hawk”;
    var hobbies = [“swimming”, “cycling”];

    return {
      firstName: this.firstName,
      lastName: this.lastName,
      getHobby: function(n) {return hobbies[n];},
      setHobby: function(h) {hobbies.push(h);},
    }
    })();

    someGuy.firstName; //Harry
    someGuy.lastName; //Hawk

    //####################################

    When I run this code someGuy.firstName and someGuy.lastName are undefined. If I understand the rules you presented for keyword “this” right, “this” will point to the window object inside the function. firstName is not defined on the window object. Hence the value is undefined.

    Removing this in the anonymous function seems to work. Is there a typo or am I missing the point?

    TIA,

    Thomas

    (0) 
    1. Chris Whealy Post author

      Hi Thomas

      Again, thanks for the detailed feedback.

      There were also typos in this presentation that I have now corrected.  I have also reworded many of the explanations to make them simpler.

      I have also uploaded a new version of this presentation which should be available within 24 hours or so

      Regards

      Chris W

      (0) 
  18. Abhijeet Kulkarni

    This is social service! I was into tears when I first experimented with JS. I believe, I spent majority of the time figuring out why the seemingly correct code is not working, rather than adjusting the business logic. This is a very good collection of presentations for absolute beginners. Had I had it then, perhaps, I could have made thrice more projects to showcase. Thanks for preparing and sharing these!

    (0) 
  19. Hari Pappala

    Hello Chris,

    Really appreciate the amount of hard work you might have put in preparing these presentations. A very useful document for those taking baby steps towards JS.

    Thanks,

    Hari

    (0) 
  20. Shreyas Pandya

    Hi Chris,

    This blog is a goldmine for anyone who’s looking to form a very strong base in JavaScript and SAPUI5.

    Whenever SAP adopts a new UI technology in their portfolio, my personal observation is that, it’s always your blogs and contents that really make a deep impact on our Limbic Brains and that definitely acts like a the bench-marking materials of learning foundations for the platform.

    I still can’t forget the extra-ordinary concepts you explained in the “Web Dynpro Online Training Series”.

    Do you have any plans to make a similar video series for SAPUI5 and JavaScript as well in future? We all would really love to see something similar from an expert like you.

    Regards,

    Shreyas Pandya

    (0) 
  21. Luc Vanrobays

    Hey Chris,

    I am discovering a bit late your slide deck. I am now in a second year JS dive. I would really recommend your insights on Inheritance and Scope, that are for the first time together on a same succint material with all JS “weird” stuff . And also the Functional Programming to conclude that the best benefit with JS is to go for Side Effect free functional programming. Nice Voyage indeed, and new ECMA6 things to digest since Hana Express is currently on NodeJs 4.4.4 ?

    Thx and Best Rgds

    Luc
     

    (0) 

Leave a Reply