I’m continuously updating the list of learning resources at the end of this post, and tag my latest updates as new.

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.

The only catch for QlikView developer’s is that they have to add web development to their skillset. In my last post, I created a 10-step plan for QlikView developers to become Qlik Sense developers.  The first step is to gain a general understanding of the essential elements of web development: HTML, CSS, and JavaScript. In this post, I’ll share with you my experience with this first step and the lessons I’ve learned so far.

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

— Alexander Karlsson (@mindspank) April 14, 2017

 

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.

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

A Smarter Way to Learn HTML & CSS, A Smarter Way to Learn JavaScript, A Smarter Way to Learn jQuery
Author: Mark Myers
Format: Book / Website
Paid: Yes
Level: Beginner

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.

HTML and CSS: Design and Build Websites
Author: Jon Duckett
Format: Book
Paid: Yes
Level: Beginner

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 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.

You Don’t Know JS: Up & Going
Author: Kyle Simpson
Format: Book
Paid: No
Level: Intermediate to Advanced

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.

JavaScript: The Good Parts
Author: Douglas Crockford
Format: Book
Paid: Yes
Level: Intermediate to Advanced

I started this book after learning basic JavaScript and I quickly felt overwhelmed by the content. About 25% of the way into the book, and halfway through the section on functions, I gave up. The content was to abstract for me to fully understand what the author was explaining. Again, it might be a good read when I have more experience and need to fill in some gaps.

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.

JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett (Paid)

Interneting is Hard (But it doesn’t have to be) by Oliver James (Free) (Recommended by Michael S Armentrout‏ @marmentrout5)

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.

On-line Courses

After taking my first on-line courses, I don’t think I’ll ever read another programming book. It’s been the best thing to happen to me since I first learned Qlik. Here are my reviews of the courses I’ve taken so far.

JavaScript: Understanding the Weird Parts
Instructor: Anthony Alicea
Format: On-line course (Udemy)
Paid: Yes
Level: Intermediate to Advanced 

Wow! What a great class! After struggling to understand You Don’t Know JS: Up & Going and JavaScript: The Good Parts, I was concerned I wasn’t going to be able to do more than basic JavaScript. That was until I started to take this class. Anthony Alicea’s ability to thoroughly explain JavaScript’s complicated parts is astounding. You can take this class after learning the basics from A Smarter Way to Learn JavaScript, A Smarter Way to Learn jQuery or Code School’s JavaScript Road Trip class.

JavaScript Learning Path by Code School
Instructor: Various
Format: On-line course (Code School)
Paid: Yes
Level: Beginner to Advanced 

If you have previous programming experience in some other language, this is a faster way than A Smarter Way to Learn JavaScript and A Smarter Way to Learn jQuery to learn basic JavaScript. It also transitions nicely into more intermediate and advanced topics.

HTML/CSS Learning Path by Code School
Instructor: Various
Format: On-line course (Code School)
Paid: Yes
Level: Beginner to Advanced 

Like the JavaScript Learning Path by Code School, this is a faster way than A Smarter Way to Learn JavaScript and A Smarter Way to Learn jQuery to learn basic HTML and CSS. The basics aren’t much different from what I learned almost 2 decades ago, so it’s  also good to take the class on HTML5 and CSS3. As far as Qlik Sense development is concerned CSS3 has more impact than HTML5.

My remaining to-do list of on-line resources I have yet to use.

Codecademy – JavaScript

Udacity – JavaScript

Microsoft – JavaScript

Alison – JavaScript and jQuery

Google Developers Training – HTML, CSS, and JavaScript

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.

One more thing…

Two months ago, I published my comments on Qlik Sense Cloud Business, and a couple weeks later, I created a robot to automatically upload data files to Qlik Sense Cloud due to its lack of data connectors. Last month, Qlik finally released the REST connector for Qlik Sense Cloud. Mike Tarallo has created an instructional document on Qlik Community about how to use the REST connector. This is great news from Qlik and I hope we will continue to see the roll out of more data connectors this year.

The next big question is when we can expect Qlik Sense Cloud to support extensions. I hope we’ll learn more about this topic next month in Qonnections.