A Swift Playground is a coding environment that allows a user to interact with Swift code, without requiring the user to create a project. Imagine launching Xcode, selecting a playground file as the option and getting started coding. That’s it. No need to go through the project setup process. No need to create reverse domain app ids. No need to configure provisioning profiles. Just create the playground and start coding. Playgrounds are a game changer!

A playground is the absolute easiest way to learn how to code in Swift.

It might even be the best way to learn to program period. Not so sure? I can understand if you’re skeptical. So, let’s dive in and learn about this gem Apple has termed a Playground.

What are they good for?

As I alluded to above, the interactive nature of playgrounds makes them well suited for teaching and tinkering. So, one the best uses of a playground is to teach others to code in Swift. Playgrounds support rich comments, additional pages, and navigation; allowing developers to author interactive “books” with which a student could read and follow along. Another big use is for prototyping and developing algorithms. It can be cumbersome to create a project for the sole purpose of testing out a hunch or devising a simulated environment to work on an idea or new approach to solve a programming challenge. Surprisingly, you can use playgrounds to see how a function behaves over time, for example, when you want to observe a variable’s state as the block is iterating over of a collection. A last big use case is for developing custom views for iOS or MacOS development. It would be totally sweet to build a custom UI and see it behave in isolation. And guess what. You can make that UI with a playground. I’ve heard of game developers tweaking their game assets in a playground. Apple showcased an example using playgrounds with game development in one of their break out sessions at WWDC.

Creating a Playground

Let’s launch Xcode and create one. Select File > New Playground, give it a name and choose whether you want to develop for iOS, OSX or tvOS. Choosing iOS will import UIKit, while OSX imports Cocoa. A third option will let you use tvOS as your base environment.

A playground has 4 main areas:

1. Source editor
2. Results sidebar
3. Show Console triangle,
4. Run button.

Examining the image above, you can see the source editor on the left and the results sidebar to the right. At the bottom, the “play” button controls manual execution of the source and the button to the left of it will toggle display of the console.

Each time you enter a Swift statement in the editor, all of the code in the playground page is evaluated with results displaying in the sidebar. The source editor is fully functioning and will show you code completion hints as well as syntax errors in real time.

Understanding the Results Sidebar

There are a few ways to see the results of evaluated code. You can see simple results in text form in the sidebar on the same line as the Swift statements on the left. One cool trick for isolating a value is to type the variable on a separate line to get it to evaluate and display in the sidebar.

Quick Look

The next way to see a different view of the result is to highlight the result line in the result bar to get access to the Quick Look icon. The Quick Look icon is an eye shaped icon on the far right edge of the results sidebar. Clicking the Quick Look icon will give you the textual or graphical representation of the result depending on the statement type. For example if you had created a UI control and used the quick look option, you would see a graphical representation of the control.

Results View

A third option is to use the Results button, which is the circular icon next to the Quick Look button. Clicking this button will add an anchored Quick Look view right under the Swift statement in the editor. This is very convenient for keeping around a representation of the evaluated code, even when the result sidebar is collapsed or without having to click Quick Look button each time a statement evaluates.

Assistant Editor and Live Views

Finally, the last option is to see results in the Assistant Editor. Playgrounds can also show live views, which are helpful when building custom UI views.

Adding Resources, Files, and Pages

Playgrounds are very versatile and allow the developer to perform several very useful tasks in terms of managing content and code. For example, in UI prototyping, it is helpful for me to have images that I can use and manipulate in the playground. Playgrounds allow you to add image resources that you can access directly in code. You can also move code that isn’t essential to your playground work into source files that are attached to the playground. Another killer feature of playgrounds is the ability to add additional pages and navigation between the pages. Let’s say that you have created several experiments and wanted to show them separately to co-workers or others. You can simply create pages and add the appropriate code to each page along with links to the next and previous pages.

Adding Images

There are a couple of ways to add images to a playground. The first is to drag the image file from the Finder to a location in the source editor that accepts images like a UIImage or UIImageView instance.

The second option is to open the Project Navigator (View> Navigators > Show Project Navigator) and drag the file into the Resources folder. When you have multiple pages, you have to choose a Resources folder under the page for the image.

Adding Files

Adding files is very similar to adding images. You can either drag a file into the source editor directly from the Finder or you can add it to the sources folder in the Project Navigator. Adding files is a great option for the developer. You can move helper utilities, model classes, and extensions to the background to showcase just the important parts of your experiment, teaching example, or prototype.

Adding Pages

Adding pages is very easy. You just need to show the Project Navigator (View> Navigators > Show Project Navigator) and then choose File> New > Playground Page from the menu. This will add a new page to the playground and you can name or rename it to suit your purposes. Alternatively, you can add a new playground page by clicking the plus button at the bottom of the Project Navigator view. You would then choose the New Page option from the pop-up that displays.

Adding Rich Comments

By default, playgrounds are launched in a raw markup view. The raw markup mode allows you to add and edit rich comments using the playground markup format. Using the markup syntax, you can create comments that will be rendered to help you document your code and/or add navigation between your playground pages.

You can switch to the rendered mode by choosing Editor > Show Rendered Markup.

The gist here is that you can document your playground to your heart’s desire and share your code with your friends, co-workers, or the world.

One last fun fact with playgrounds. You can use rich comments and pages to create interactive teaching tools! By adding pages to your playground, you can isolate teaching objectives to each page. You can setup a learning assignment on that page and have the student follow along and even write code on the page. Rich comments also support adding navigation syntax to allow you to control navigating to the next, previous, or any other page. The possibilities are really limitless!

I hope you enjoyed this intro to playgrounds and that some of my excitement for them has rubbed off on you. Until the next time.