Qlik Sense Developer Step #1: Web Dev Fundamentals

As a QlikView developer, I relish the freedom that QlikView gives me to customize the look and feel of a single chart or the layout of an entire dashboard. On the surface, Qlik Sense simplifies the creation of visual analytics at the expense of this freedom. However, if you dig deeper and take advantage of its APIs, you will discover that Qlik Sense lets you do more than you could ever do in QlikView.

Setting Expectations

In a QlikView Designer and Developer class, we teach every script and expression function that most developers are ever going to need to know. However, its not uncommon for new developers to struggle to understand how these functions apply to real world situations. They also tend to forget a number of concepts that aren’t related to their current needs. Even so, they do retain enough general knowledge to piece together their first QlikView applications. It’s not until after they’ve created their 1st QlikView applications and then read a comprehensive QlikView book like QlikView 11 for Developers or QlikView Your Business do their brains start to make sense of all the concepts that they had originally learned and forgotten in the QlikView Designer and Developer class.

I expect the process to be the same as I learn to create Qlik Sense visualization extension, and later, mashups. The 10 steps that I proposed are not meant to be a waterfall scheme, but rather a series an iterative steps that need to be continuously repeated over time. In other words, I don’t expect to read one book about JavaScript and learn everything I need to know about the subject. I plan to repeat step 1 and review web development fundamentals throughout the entire learning process.

As I go through each iteration, I’ll update this post. I hope that when it is more mature and proven to work, I can turn it into a permanent guide to becoming a Qlik Sense developer. If you are going through the same transition, be sure to check back from time to time to see what’s new. I also look forward to any recommendations you may have and hearing about your own experience learning web development skills.

Web Development Fundamentals

Alexander Karlsson, Developer Relations Engineer at Qlik, recently confirmed my initial idea that the essential elements someone needs to grasp in order to become a Qlik Sense developer are HTML, CSS and JavaScript.

@karlpover@qlikbranch a solid foundation in html, css and javascript is pretty much all you need, jQuery is nice but not needed

HTML

HTML is what gives structure to a Qlik Sense visualization extension. It lets you create multiple elements like text, tables, page sections, images, and scalable vector graphics (SVG). The syntax is quite easy to learn. For example, we use the <h1> tag to define a text heading. We place the text we want as a heading between an opening tag <h1> and closing tag </h1>. The main heading of this section is created using the following HTML.

<h1>Web Development Fundamentals</h1>

CSS

We define an extension’s visual style with CSS. HTML and CSS are so closely intertwined that they are often taught together. It allows you to determine an HTML element’s font, background color, border, position, and various other visual properties. For example, continuing with our HTML example from the previous paragraph, we use the following CSS code to make all principal headings appear in red.

h1 {
color: red;
}

Like HTML, CSS syntax is also quite easy to learn. The trick to using both languages is to remember what tags and style properties are available and to recall what effect each style property has on each tag. When writing my own code, I keep a reference guide like w3schools.com open so that I can continually look up and experiment with the most common HTML and CSS elements.

JavaScript

Finally, we use JavaScript to dynamically determine the HTML and CSS that makes up a Qlik Sense extension. For example, we could add a heading to an extension using the following JavaScript code.

$element.append( "<h1>Web Development Fundamentals</h1>" );

This extension would be quite static and boring. However, after learning a little more JavaScript, we’ll be able to change the static tags and text for dynamic elements that the user can define. In other words, we use JavaScript to make the HTML and CSS responsive to both the data and the user.

JavaScript is more difficult to learn than HTML or CSS. The following roadmap to learning front-end web development was created by GitHub user kamranahmedse. It gives us a general idea of all the frameworks, tools, and libraries that are related to the JavaScript part of web development.

https://github.com/kamranahmedse/developer-roadmap

Although the previous roadmap suggests that we start building things after learning these concepts, we can and should start building Qlik Sense web extensions as soon as we learn the basics. We can then incrementally add on to our knowledge as we start putting what we know into practice.

When learning the basics, I recommend that you learn DOM and jQuery. When I first learned JavaScript, I thought methods that interacted with a document’s HTML (for example, document.getElementById()) were native to JavaScript. I found out later that they are actually part of an API called DOM. Most JavaScript learning resources include DOM since it is an important part of the language. It’s also an essential part of Qlik Sense extension development.

jQuery is not as important to learn as DOM, but it is quite prevalent and relatively easy to pick up. In general, it offers us an easier way to manipulate the DOM and manage individual HTML and CSS elements. For example, the append() method that I use above to add a heading to an extension is actually a jQuery method. As evidence of its popularity, I actually learned this method from example code in Qlik Help’s section on how to create your first extensions.

Learning Resources

My first step to learning HTML, CSS, and JavaScript was to find a beginner’s book with a little narrative. After gaining a general understanding of web development after my first round of books, I’ll continue to look for other resources that offer new perspectives and reenforce what I’ve learned. The following is a working list of the best resources I’ve found to learn how to create Qlik Sense extensions.

Books

These three books are great for anybody who doesn’t have a clue about what web development is. It is also is a good primer for those that have little experience and want to make sure that they have the basics covered. Every chapter includes 20 well-prepared, interactive exercises. Each chapter is also so short and focused that you’ll never have a good excuse to not cover at least one chapter a day. My only caveat is not to get too bogged down with doing all the exercises. I recommend that you only do the first few exercises of every chapter to “switch mental gears” and keep your brain alert. If you do all the exercises of every chapter there’s a risk that you’ll get bored and lose interest. Even if you’re new to web development, you should be able to make your first extensions after reading this series.

I decided to buy HTML and CSS: Design and Build Websites because it’s a #1 best-seller in Amazon, and after finishing it, I began to wonder how often being the #1 best seller is due to self-perpetuation. The book, which is annoyingly only available in non-electronic format, is aesthetically pleasing and a good alternate to A Smarter Way to Learn HTML & CSS, but there is no need to read both. I still prefer the Smarter Way series because it’s in electronic format and included readily available, interactive exercises. Unfortunately, when I read paper books with accompanying code, I too often fall in the trap of glossing over the code.

HTML and CSS: Design and Build Websites is not a new book. It was published in 2011 and left me wondering whether the latest versions of each language, HTML5 and CSS3, provide any pertinent features to Qlik Sense developers. Many of the its previews of what was to come, such as the HTML5 video tag, are of little consequence. Hopefully, I will be able to answer this question and learn modern techniques after reading my next HTML and CSS book.

This is the first in a series of books that start with the same name. The e-book is free and the title is deceptively attractive to those that really don’t know JavaScript. After reading it, I discovered that the title was actually a challenge to those who have some experience working with JavaScript, but who might not be using it to its full potential. I’ll wait to read the rest of the series once I have a little more experience.

While I continue with the next steps to becoming a Qlik Sense developer, I’ll be reading the following books. I look forward to any recommends that you may have.

Classes

I haven’t taken any classes yet, but at some point it’s going to be important to interact with an expert and answer some burning questions. The class I’m most interested in attending is Websy’s 4-day course on Web Development for Qlik Developers. The course’s syllabus includes both generic Web development concepts and Qlik-specific topics like Enigma.js. Rob Wunderlich has given the class an excellent review.

While I save my Mexican Pesos to pay British Pounds for Websy’s class, I’ll also be going through some online classes on web development and taking the quizzes to see how well I’m getting it. This is especially the case for JavaScript. The following is a short list of options I’m currently reviewing.

As I go on to the step 2 and create my first Qlik Sense extensions, I believe these books and classes will be more than enough to fill my downtime when I’m commuting to the office or waiting for a meeting to begin. In my next post, I’ll share with you my first, humble extension and the additional resources that I used to hack it together.

Wow Karl, what an excellent post. Just last week I realised I needed to start taking my Qlik Sense transition seriously and was debating how or where I should begin. I was hoping to find a post that I could use as a reference with an overview of core learning segments. This is exactly what I could of wanted. Every question I had has been answered in a single post. Bloody fantastic I say 🙂 Thanks Karl!!