DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • Do's and Don'ts for Making Your NodeJS Application Faster
  • Node.js: Architectural Gems and Best Practices for Developers to Excel
  • Keep Your Application Secrets Secret
  • Where Does Middleware Stand in Web Development?

Trending

  • AI-Driven Root Cause Analysis in SRE: Enhancing Incident Resolution
  • How to Perform Custom Error Handling With ANTLR
  • How Large Tech Companies Architect Resilient Systems for Millions of Users
  • Caching 101: Theory, Algorithms, Tools, and Best Practices
  1. DZone
  2. Coding
  3. JavaScript
  4. What is NW.js?

What is NW.js?

By 
Paul Jensen user avatar
Paul Jensen
·
Sep. 08, 15 · Interview
Likes (5)
Comment
Save
Tweet
Share
35.6K Views

Join the DZone community and get the full member experience.

Join For Free

NW.js is a framework for building desktop applications with HTML, CSS, and JavaScript. It was created by Roger Wang at Intel’s Open Source Technology Center in China, and worked by combining the Node.js programming framework with Chromium’s (then) browser engine - Webkit, hence the original name Node Webkit.

By combining Node.js with Chromium, Roger found a way to create applications that could not only load a local web site within an application window, but also could interact with the Operating System via a JavaScript API. This JavaScript API could control visual aspects like window dimensions, toolbar and menu items, as well as provide access to local files on the desktop. These are things that can’t be done with a hosted web site, or even a locally hosted web site. Below is an example of how an example application works.

Figure 1. An example application loaded by NW.js to create a desktop application. 

In the example illustrated above, the application’s files resemble those of a simple web site. The index.html web page is like most other web pages that you’ve seen - there is some HTML code for the page’s content, a link tag for the CSS stylesheet, and a script tag for the JavaScript. At this stage it’s identical to a website, and if you were to open it in a web browser it would work the same as it would in NW.js. There is also a CSS stylesheet for styling the contents of the index.html file, and an app.js file for executing JavaScript, in this case calling a simple dialog box with the text “from NW.js” inside of it.

You’ll also notice a package.json file as well. This is the manifest file used by Node.js to load applications and libraries, and NW.js uses it to store configuration information about the desktop application. It is required by NW.js for the application to load.

The NW.js application is able to load an application with a given path of the folder where the files live. It looks for the package.json file, which points to the index.html file to load, and thus loads the web page into what looks like a web browser embedded inside of an application window. This is what you can expect to see:

Figure 2 The example application as it appears on Mac OS X

The example application above could load inside of a web browser without any modifications, but where NW.js differs from a web browser is that where an app.js file could only interact with the index.html’s contents in the context of a web browser, NW.js allows the app.js file to interact with the Operating System through a custom JavaScript API, as well as through Node.js. This is unlike web frameworks where the front-end code and the back-end code traditionally exist and execute in separate places. The idea of front-end and back-end code existing and executing in the same place is the key concept to grasp here.

Figure 3 The difference in access and execution scope of a web app versus an NW.js desktop application

In web applications, the back-end code is running from a server, and the page that is delivered to the browser on the user’s computer is limited as to what it can do on a user’s computer, due to the browser’s content security policy. With an NW.js desktop app, because the user has explicitly executed the application and it is running in a local context, then the content security does not apply. Also, the application has access to both the page as well as the computer’s resources, through an API to interact with the Operating System, allowing the code to interact not only with the front-end part of the application, but also the back-end part of the application (the computer in this case as no external server serves the desktop app). In the next section we’ll explore how this works in a bit more detail.

Interacting with the Operating System

NW.js provides a JavaScript API for interacting with the Operating System, so that you can do the following:

Control the size and behavior of the application’s window

Display a native toolbar on the application window, with menu items

Add context menus in the application window area on right-click

Add a tray application item in the Operating System’s tray menu

Access the Operating System clipboard; read the contents and even set the contents as well

Open file, folders and URLs on the computer using their default applications

Insert notifications via the Operating System’s notification system.

As you can see from the list, there are a lot of things that you can do within NW.js that web browsers cannot do. For example, web browsers do not have direct access to files on the desktop or the contents of the clipboard, due to security restrictions that web browsers implement to protect users from sites with malicious intent. In the case of NW.js, because the application runs on the user’s computer, it is granted a level of access where the user trusts the application, and therefore it can do a lot more things[p1] .These features allow the developer to create desktop applications that fit well into how the user’s Operating System works, and don’t stick out like a sore thumb to the user.You can think of NW.js as being like an application with an embedded web browser, that allows the contents of the site to also have access to the computer. Below is a diagram illustrating this:

Figure 4 An overview of NW.js’ component architecture in relation to loading an application

The JavaScript API for these features provided by NW.js can be accessed by the same JavaScript file that is interacting with the front-end web page inside of the application, again blurring the lines between front-end and back-end code, a concept that is unusual for those who are used to building web applications. The JavaScript API for the Operating System isn’t the only back-end API exposed to the developer, it can also use Node.js.

Using Node.js with the application

Node.js is a server-side programming framework that was created by Ryan Dahl back in 2009. It uses the V8 JavaScript engine used by the Google Chrome web browser along with some other components to let developers write server-side programs using JavaScript.

Since its creation, Node.js has become a very popular programming framework, spawning a number of web frameworks, robotics tools, and in the case of NW.js, desktop application frameworks. The popularity of Node.js is down to a number of factors; JavaScript as a programming language is very common among web developers, and that lowers the barrier for developers to pick it up and work with it. Secondly, the package manager for Node.js (NPM) has made it easy for users to create modules that can be easily installed and loaded into applications. Thirdly, the evented architecture of Node.js makes it fast and well suited for particular kinds of applications.

NW.js provides access to Node.js’ API in the application, as well as leveraging modules that are installed with NPM. By doing this, not only can developers use a server-side programming framework that uses the same language as the front-end, but they can also leverage the huge and growing ecosystem of modules that exist in NPM. What is most interesting is that the Node.js code can be called in the same place as the JavaScript code that is interacting with the front-end of the application. This is a unique aspect of the way that NW.js combines Node.js with Chromium, and something that you’ll want to keep in mind when you’re working with NW.js applications.

Building the application for multiple OSes

One of the most useful features of NW.js is that you can build native executable applications for Windows, Mac OS X, and Linux using a single codebase for your desktop application. This is a time saver when trying to develop an application that has to work across multiple platforms. This also means that you can have greater control over how the application looks and feels, more so than you can when trying to support a website for multiple web browsers.

The native executable is able to run on its own, and does not require the user to have any other software installed on his or her computer. This makes it easy to distribute the application to users, including on App Stores where some NW.js apps are sold.

The process of building an application for a specific operating system involves a few command line arguments, but there are some tools that simplify the process for you, such as the node-webkit-buildertool, illustrated in the example below:

Figure 5 How the node-webkit-builder tool can build native executables of an NW.js app for both 32-bit and 64-bit versions of Mac OS X and Windows.

Using the hello worldexample app shown in Fig 1, we’re able to use nodewebkit-builder’s nwbuild command to automate the steps of building the application for both Mac OS X and Windows. This can save a lot of time (especially if you’re having to make both 32-bit and 64-bit builds of the application), and prevent mistakes from being made when building the application.

There is also the ability to build the application so that the source code is compiled. This protects the source code so that other developers can’t inspect the code and reverse-engineer it. If you have an application and you’re concerned that other developers might try to copy it, then this option offers the ability to protect your application.

With features like this, NW.js is a sophisticated tool for creating desktop applications, and knowing how it works under the hood helps you to understand what kind of applications you can build with it.

application operating system Node.js JavaScript engine Manifest file Desktop (word processor) API dev

Opinions expressed by DZone contributors are their own.

Related

  • Do's and Don'ts for Making Your NodeJS Application Faster
  • Node.js: Architectural Gems and Best Practices for Developers to Excel
  • Keep Your Application Secrets Secret
  • Where Does Middleware Stand in Web Development?

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!