Go Forth, Write JavaScript

Peter Chittum — Mon, 14 Sep 2020 12:58:47 +0000

No small amount of ink has been spent rationalizing why JavaScript is a worthy (if not the absolute best!) language for developers to pursue. If you work as a Salesforce developer or as any enterprise software developer who has primarily worked with older technologies that abstracted the JavaScript away from the UI developer, the time has never been better to invest time and energy in learning the core language of the web.

Why I loved server-side UI frameworks

I was an early user of server-side generated UI technologies from the days of asp (pre dot-net), jsp, and several frameworks that were built on top of that.

When I joined Salesforce in 2010, I immediately fell in love with Visualforce, the Salesforce-flavored UI framework of that era. The productivity and flexibility it gave me along with its ability to produce a custom Salesforce-looking user interface with nothing but markup was a revelation. It felt miles ahead of any other framework I had used at the time. Add to that the extensibility of business logic with the Apex programming language, and I felt there was little I couldn't do. Later Visualforce added features that allowed use of modern JavaScript frameworks and creating a powerful multipurpose foundation for custom user interfaces. From the standpoint of developer productivity as well as accessibility to coders and non-coders, I still think Visualforce had no equal at the time.

But as browsers evolved and with them JavaScript, it became clear that the previous generation of server-side rendered UI frameworks was becoming less relevant. Visualforce was no exception. And although you could completely replace the server-side rendered Visualforce page with your own web framework, Salesforce began to look at a long-term solution to take forward. This solution would need to fit in this new world of JavaScript web applications. And it would need to fit in a better way than shoe-horning in a JS framework into the Visualforce container. It would also need to solve Salesforce-specific problems such as trust, security, and multi-tenancy.

Enter Lightning.

The Lightning difference

Salesforce introduced their Lightning Experience user interface in 2015. With Lightning, Salesforce truly looked at rearchitecting presentation layer from the ground up, beginning with the principle that everyone builds with the same core tools. Lightning delivers on that promise. Prior to Lightning, developers on Salesforce technology teams often used one set of tools while our customers used Visualforce. With Lightning, we’re all using the same UI framework.

Lightning is also a client-side framework, where you do your work primarily in JavaScript. Yes, often you will use a little bit of Apex, but the core of the work is JavaScript. With the Lightning Data Service, there are components that interact with the server where the code is exclusively JavaScript.

If you can churn out traditional Visualforce with Apex controllers all day long, this will be an adjustment, but I’d argue learning JavaScript is better than ever today. In fact, we wrote a couple of great Trailhead modules just to help existing developers get their heads around JavaScript.

Plus, there are some great benefits to adding this arrow to your developer’s quiver. Let’s take a look at some of them.

NodeJS

I start with Node partially because it was a big factor in moving JavaScript from a niche language primarily for lightweight browser scripting to making it a mainstream language for tools and server-side execution. It has been on the list of Heroku-supported languages for years. But more recently, Salesforce developers should take note that Salesforce CLI and the Open CLI Framework (oclif) use Node. So if you want to take a stab at extending the CLI, JavaScript will be an excellent tool in your toolbox. JavaScript is also slated to be one of the first languages to be supported by the upcoming Salesforce platform implementation of functions as a service.

The ECMAScript standard

JavaScript is based on the ECMAScript standard. ECMAScript 6 (Often called ES6, but officially known as ES 2015) was a watershed adding language features that focused on making JavaScript a lot of fun to write, while also fixing some of its more troublesome behaviors. The ECMAScript standard continues to progress and is now in its 11th edition (ECMAScript 2020).

One of my favorite features introduced in ES6 is destructuring variable assignment. A simple example could be you want to quickly pull out values from one or more fields in JSON that’s been returned by a server request. Let’s say it was in a variable called obj that looked like this:

let obj = {
  "Id": "0016E00000VNYSZQA5",
  "Name": "Causeway, Inc.",
  "Status__c": "Active"
}

You might do something like this:

let name = obj.Id;
let status = obj.Status__c;

But instead you can just do this:

let {Name, Status__c} = obj;

console.log(Name); // "Causeway, Inc."
console.log(Status__c); // "Active"

Actually, you don’t even need to settle for the names of the properties inside the JSON object. You can create your own variable names at the same time:

let {Name: name, Status__c: status} = obj;

console.log(name); // "Causeway, Inc."
console.log(status); // "Active"

This type of syntax will be familiar if you’ve worked with other languages. But this tiniest tip of the iceberg of modern ECMAScript features bears witness to how JavaScript is actively evolving into a language you don’t just have to use, but one that many developers will really want and love to use.

The great news is if you're using a modern JavaScript framework, you can use these features immediately. That includes any work you do with Lightning Web Components, whether on the Salesforce platform, or in a standalone web app.

The JavaScript Ecosystem

In the early days of the web, JavaScript was a minefield of different implementations, no standards, and competing APIs between browser vendors. The jQuery library was one of the first and by far the most popular libraries to create a unified JavaScript API that made working with the DOM browser-agnostic, and simplify asynchronous communication with the server. The combination of jQuery on the client side and Node.js on the server side supercharged the JavaScript ecosystem.

Today, JavaScript is arguably the largest developer ecosystem when you measure either use, or available libraries (npm alone has over 1 million packages and billions of downloads each month). This means it is easy to find support solving your coding problem. For instance, if you were writing a JavaScript app and wanted to integrate with Salesforce, there are a number of libraries, such as JSforce, which is available on npm.

Whether finding a library or module to abstract away a lower-level algorithm, or finding help understanding how to make use of a particular API, the JavaScript community will have you sorted.

Learn and practice JavaScript

So where can you go to pick up some skills on JavaScript? The web, of course. There are no shortage of free tools, REPLs, code playgrounds, tutorials, videos, and quick starts to dive right in and learn JavaScript. But if you want to start right away, all you need to do is open your browser developer tools and start typing in the console to practice writing lines of code.

For instance, try the following:

Open this blog page (or any page) in a Chrome browser.
Open up Chrome developer tools (CMD-OPT-J on Mac or CTRL-SHIFT-J on Windows).
Click on console for the JavaScript console
Enter the following, hitting Enter after each line:
1. var newDiv = document.createElement("DIV");
2. newDiv.innerText = "JavaScript is fun!";
3. document.body.innerHTML = "";
4. document.body.appendChild(newDiv);

The first two lines create a new <div> element with the text of “JavaScript is fun!”. The next line wipes out all the HTML <body> of the current page. Then finally we append the new child node onto the body. At times, I have found it really useful to see how to manipulate the thing I’m working with directly to test out how code I’m working on will work.

As mentioned earlier, Salesforce's learning platform, Trailhead, has some great JavaScript content. In addition to these, if you just want a taste of what Salesforce are doing with JavaScript to enable our customers to create custom UIs, try the Lightning Web Components Quick Start. The module Lightning Web Components for Visualforce Developers, is great if you're a Visualforce expert. And if you're not a Salesforce developer and want to know how to make use of Lightning Web Components in a standalone app, check out the Lightning Web Components Open Source trail.

Finally, fellow evangelist Josh Birk and myself collaborated on a session at TrailheaDX several years ago seeking to introduce JavaScript to developers who are experienced with Salesforce, but just beginning to learn JavaScript.

Wrapping it up

JavaScript is a critical skill today. Even in enterprise computing, JavaScript is taking a more prominent role not just in front end development, but also in other applications and tools with NodeJS. With the move to Lightning, enterprise software developers now have a great reason to invest in JavaScript expertise.

Additional resources

Geek out on a brief history of JavaScript
Code Playgrounds

Forem: Peter Chittum