Playground was introduced in 2014 WWDC along with the release of Swift. So, what exactly is Playground? Simply put, Playground is a coding environment which allows you to quickly test code snippets and see the results as you type. As the name implies, it’s a place to “play.” So let’s play with it through some simple examples!


 

pl-2

The first thing you’ll see when you open the Playground file is the “Hello, playground” string declaration on the left (code editor) and the result on the right (output pane).

pl-3

Experimenting.

Playground is very handy for experimenting code. It helps you visualize your code. To see the power of Playground, let’s walk through a simple for-loop together.

angel-1

 

In this example, we have a variable named result and its value is the sum of i’s. On the output pane, you see that the value of result is 0 before the for-loop. It also shows how many times this for-loop loops through. Having real time results is awesome, but what’s even more awesome is having real-time visual results. In the output pane, you’ll see two icons, an “eye” and a “filled circle.” They both display the same result. The only difference is that the “eye” displays a popover view and the “filled circle” pins the result in the editor like so.

pl-4

Where was Playground when I was forced to use a graphing calculator… 😒


 

Go native.

Playground can also display native components. Let’s create a toggle and pin it to the editor:
pl-5

We can modify the toggle and view the changes.

pl-6

angel-2


Visualize.

It’s also useful when you can visualize the changes you make to the layer of a view.

Let’s first create a square…

pl-7

…and round its corners by modifying the layer component.

pl-8

Seeing instant results of the rounded corners is extremely useful. Remember the old days when we had to run and re-run the app just to see the difference amongst the corner radius of 6.0, 7.0, 8.0… and so on? What a great time to be alive. 

As of Xcode 7.3 beta 3, Playground is now interactive!

You can click, drag, and type to interact with the interface just like what you’d do in your application. But to keep this post simple, I will not go into depth about that. You can find more information here.

Let’s finish off this post with some emojis! ‘Cause life ain’t fun without them!

Let’s create some emojis from unicode:

pl-9

So far, so good. We have our dog and cat on the output pane. It’s all good if the dog and the cat are the only emojis we want. Let’s take a break for a moment and Google the unicodes of your favourite emojis!

Welcome back!

Hopefully you didn’t spend too much time searching for the unicodes because Apple has got you covered. Simply press Ctrl + Command + Space and there you have it— emojis for days!

pl-10

In fact, this shortcut also lives outside of Playground. You can pull this up anywhere. Try it now if you’re on a Mac. You’re welcome. A-MAZ-ING 👍 🙌 👏

This sums up my little introduction to Playground. I hope you have as much fun playing around with it as I’m having! There are so many neat things that you can do with Playground.

Let’s unleash the power of Playground by “tailor” Swift. 💁


 

angel

 

 

 

 

 

Written by:

Angel Lee

iOS Developer at Aequilibrium Software

Posted by:Matthew

I am a Product Designer with a passion for user experiences and the perfect atmospheric conditions for frisbee.