Hello World

Getting up and running with Prism is fairly easy, but there’s a few prerequisites depending on what platforms you want to target.

Setting up your machine

As Prism builds true native applications, you’ll need to make sure you have all of the following to hand:

For targeting Windows 10

  • Visual Studio 2017, any version (including the free one)
    • Install the C++ Universal Windows Platform tools option from within the Visual Studio Installer
    • Install the C++/WinRT Visual Studio extension from the Visual Studio Marketplace
  • NodeJS, latest version

For targeting macOS and iOS

  • Xcode, latest version
  • NodeJS, latest version

With the above dependencies installed, next comes setting up your machine. Again, this depends on which platforms you’re targeting:

For targeting Windows 10

  • In Windows Settings > Update & Security > For developers, choose the Developer mode option rather than the Sideload apps option.

For targeting macOS and iOS

Creating your projects

Prism adopts a similar methodology to React, via an npm package called create-prism-app.

Create a new directory that will house your projects. Then from a terminal inside that directory, in yarn, run yarn create prism-app, or in npm, run npx create-prism-app.

This command will walk you through the process of creating a Prism app. Once done, you’ll have project files available for each platform you want to support in the root directory:

  • *.sln - a Visual Studio solution file for Windows 10
  • *-mac.xcodeproj - an Xcode Project file for macOS
  • *-ios.xcodeproj - an Xcode Project file for iOS

Adding some code

Open up the project for your preferred platform. You’ll observe that the project has an index.xml and a index.js file present. These two files provide the most basic Prism application possible.

Open up the index.js file, you’ll note it looks like this currently:

application.on('start', () => {
  // TODO: Do something

Let’s change this to show an alert for our Hello World. Update the index.js file to look like this:

application.on('start', () => {
  window.alert('Hello World!')

Now run the application from your IDE. You should observe that an empty window appears, alongside a system alert.

Summing up

That’s it! Hello Worlds are always trivial, and Prism’s no exception. You’ll notice that we don’t create application windows dynamically, you’re given a single window in which all your content is present.

There’s a few reasons why Prism works this way:

  • Mobile applications are primarily single-window experiences as it’s too fiddly to be dragging around tiny windows with your fingers
  • Desktop applications are increasingly adopting the mobile model (see any Windows 10 application, or modern macOS applications like Apple News)
  • Modern Web applications are always built with single-window experiences in mind, whilst you can create popup windows to do extra things, they’re fiddly and feel out of place in a browser-based app

Prism is designed to allow you to provide the kind of app experience users have come to expect, which is why you’ll only ever interact with a single window.

In the next guide, we’ll explore how to construct basic app layouts and see how to access them from JavaScript.