Web development concepts in ServiceNow — traditional vs modern

The traditional concept of web development (from 10 years ago) is page-oriented.

When you build a website or an application you would think in terms of the pages — how many pages you need, how they should relate to each other etc.

Every single page may have its own js/css dependencies or global dependencies, depending on features and functionality. So finally the page may end up with something like this:

This solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big .js file containing all your project code, but this leads to problems in scope, size, readability, and maintainability.

And when you need to deploy the app — you have to copy all of the .html, .js and .css files to a production environment, which might be dozens or even hundreds of files.

And lastly, to host all of your application files you need a server (it might be a pretty heavy one), which can manage the folders structure, handle routes and so on.

Today is 2019 and we don’t do that anymore.

Modern web development

Today we don’t think in terms of the pages. We think in terms of components.

A component is a functional element which represents some functionality: it might be a form, a button or a set of other components.

This gives you much better flexibility for sharing and re-using the functionality. The concept may sound familiar to those who work with Service Portal widgets, but the key difference is how you develop, use and share components.

The key difference between traditional and modern paradigms is a development pipeline. There is one additional step, called ‘packaging’, where we build or package the application.

Application packaging compiles all components and their dependencies into a very small set of files, the final package might be just two (html+js) or three files (html+js+css).

This may sound unnatural to many people, but that’s how modern web development pipeline works — your entire web application (multiple pages, forms, layouts, routing, <pick your feature>) will be bundled into one .html and one .js file (css may be packaged inside js).

Packaging is very important because you do not just concatenate .js and .css files — you transpile, transform and optimize your code. Which makes it more efficient, fast and reliable. And that also allows you to use the most recent features of javascript like ES6/ES7/ES8, so you are literally working with the most modern web technologies.

All the top javascript frontend frameworks and libraries— React, Vue and Angular, based on the component development approach and application packaging.

Another key difference with the traditional concept — you don’t need a heavy server to host the application since it’s just a few files. You may not need a traditional server at all. Because the only thing you need is to send those two or three files to the browser, and the browser will run the application.

This is the point where we should start talking about ServiceNow.

How to start

Since we are all about modern web development, you need to pick a framework first, I would say pick something from the top 3 — React, Vue or Angular.

I personally prefer to React, because it is #1 for building user interfaces. It is simple, fast, extremely powerful, with a great development community and tons of open source libraries, components, and UI frameworks.

There are three basic steps. The first two steps take place outside of ServiceNow — you just need to create and package the application, while using ServiceNow as a backend system to handle security and store/manage the data.

You’ll find hundreds of videos and tutorials on how to start creating React applications (step #1 and step#2). I personally recommend this Udemy course, and I know that there is a lot of amazing tutorials on Egghead.io.

And then the final step #3 — host the application package in ServiceNow.

This may be the most interesting step for ServiceNow developers since it directly involves the platform — you need to take the application package files and put them into ServiceNow in a specific way.

There are several deployment/hosting options. All of them (including other important aspects) will be explained in details in the next articles:

1. Option 1 — UI page (tutorial)
2. Option 2 — Scripted REST API (tutorial)
3. How to serve resource files (.js, .css files and media)
4. UI frameworks and ServiceNow React applications
5. Security layer in ServiceNow React applications
6. How to access ServiceNow data from React applications
7. Custom ServiceNow login page on React (tutorial)
8. Code splitting and lazy loading in ServiceNow React apps