Have You Plunk’d Lately?

Chris Berry JavaScript, Technology Snapshot Leave a Comment

More than once as a developer, I’ve come across the need to quickly prototype an idea or solution. This generally involves making a special project with all the necessary local parts, then going in and making the prototype. Doing this takes time and effort for something which in the end will probably just be throwaway code. Luckily I’ve now found a better way.

Introducing Plunker

Plunker is a tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.”

I’ve found Plunker to be a great tool to use when I quickly need to test out an idea or solution. I no longer have to go through the process of creating a whole application locally just to see if I can do a loop with some data or something else just as simple. Now I can simply choose a template from Plunker, and I can get down to business.

In this blog I will introduce Plunker, showing how to use it to quickly create and edit an Angular startup project.

Getting Started

Getting started with Plunker is very easy as it offers the ability to link a Plunker account to many social networking logins.

Once you’ve logged in, you can now explore Plunker. The first thing to check out is your profile:

When you first start out it’s pretty empty. But by clicking the “New” button up in the left corner you’re given the ability to choose a project to start:

For this example, I chose to start up an Angular project.

Meet the Editor

Within seconds, Plunker has created a functional starter application. The editor looks very similar to many you have seen before.

On the left-hand side, the project is laid out with the ability to add/remove folders and files as needed.

See Also:  Angular Developer: JavaScript to TypeScript

There is also the ability to review your recent projects from the left-hand side. You will be able to access settings for the editor such as changing the color from a light theme to a dark theme.

In the center of the window, there will be the main editing pane. It includes line numbers, syntax coloring, code completion, code formatting, and keyboard shortcuts. Pretty much everything you would expect for a code editor.

On the far-right side, there will be an empty pane. This is where you will see a live version of the application you’re working on. To start the application, click the “Preview” button found next to your username.

And there we have an Angular 5 application running side-by-side with the editor.

Now that you have confirmed your application can run, you may want to add particular packages to your project, such as Bootstrap or Lodash. You can easily add these packages to your project by clicking the small icon found at the top of the editor pane.

From the search window, you can now search for your package and easily add it to your project.

Here you can see that I searched for “Google’s Material Design.”

While you’re working on your application you will want to save periodically so you can reference it later or even share it with others.

Saving a project is quite easy. On the left-hand side of the window, you will find a “Save” button. Clicking it will bring up a save dialog where you can name your project. You can even tag it with keywords so that it will be easily indexed for future searching.

Sharing your project with others is also very easy. Clicking the tool icon on the left side of the window will bring up your project settings. From here you can make your plunk public.

See Also:  AWS Lambda with Spring Boot

But Wait, There’s More

So far I’ve only talked about the creation and editing of a Plunker project, but there is much more. Sharing your Plunker project to the public allows for other people to view your project (as well as access to the hundreds of other projects that have been made public).

Opening a plunk will take you to a view screen where you see a live preview version of the application. Based on what is previewed above, you’re presented with applications that are similar in nature or have similar tags. You can edit the large preview at this time if you would like to see how it’s created if it’s not yours.

Once you drop back in editing mode, if this plunk project is not yours, you have the ability to fork off a new version of it, or even mark it as a favorite of yours to be found in your profile.

Final Thoughts

While Plunker may seem like many other online application development tools, I personally have found it easy to learn and use.

Plunker is currently being upgraded and will soon have many additional features such as the ability to import projects from Github, real-time code collaboration and many more. Take a look at Plunker to see if it’s a fit for your development toolbox.


About the Author
Chris Berry

Chris Berry

Chris is a Consultant at Keyhole with a focus on .NET and JavaScript technologies. He likes to dive in and look at the architecture of an application to learn how all of the moving pieces are handled. In the end, he loves to pass along what he's learned and to help people make some good design choices for all aspects of a project.


Share this Post

What Do You Think?