This is important to architects because… architects need to prototype simple applications and demonstrate simple applications to others conveniently.
Alternatives to Plunker. There are other playgrounds, but the best alternatives are probably CodePen at https://codepen.io/ and JSFiddle at https://jsfiddle.net/. CodePen has the most attractive user interface, but it has a paid version and some people don’t like that. JSFiddle has been around the longest and others have arguably copied many of it’s features. I would bet on CodePen having the most long-term staying power.
They all have similar features. While we are covering Plunker in detail here, the features of the most important playgrounds are similar.
Not for professional development work. These tools are great for learning and quick demos, but no professional would consider using it for collaborative, reliable, and secure work. There are many reasons why such playgrounds are not appropriate for professional work, but details are beyond the scope of this post.
Why Use a Code Playground?
Start coding without installing tools. You can, of course, download many great development tools for free. My personal favorite is Visual Studio Code. There is really no comparison of a professional tool like Visual Studio Code with a code playground. Installing professional does take time, disk space, memory – and typically money – so professional tools are not appropriate to all usage scenarios.
No complexity. One attribute that seems common to all of these playgrounds is that they don’t even need documentation. In fact, Plunker does not even have documentation. These playgrounds just work and work well.
It’s fun and easy! Most of these code playgrounds are fun and easy to use. It is undoubtedly complicated to put a full-featured Integrated Development Environment (IDE) online, but Plunker, CodePen, and JSFiddle are doing it well.
Where is plunker? Plunker is available at https://plnkr.co/. There is a “major upgrade” coming for Plunker at https://next.plnkr.co/, but I don’t recommend using the “alpha” yet as of 1/10/2019. It looks a bit easier to use, but it still appears to be missing some features.
GitHub integration. “Git” is the new standard for professional source control systems and may be discussed in detail in another post. When you go to the Plunk web page, you can log into Plunk with your GitHub account and work on your private Git repositories if you’d like to.
Fast. If you bring up Plunker in your browser, nothing will take more than about two seconds to load.
Sponsored. Plunker is free, but it is also sponsored by backed by ag-Grid, a well-known software development tools company. This suggests that Plunker will be around for a while.
Source available on GitHub. You can download the source code for Plunker itself from https://github.com/filearts/plunker_www.
Some Key Plunker Features
In the screenshot above, I have logged into my GitHub account so I can access my private source code. I have also created an Angular “starter” application that can already run.
Seven Editor Views. If you look at the right side of the screenshot, you will see a vertical row of seven grey buttons. We’ll cover some of those views below.
How did I get to the editor? The page above is not the main Plunker page, but the Plunker editor. You can bring the editor up directly at https://plnkr.co/edit
Creating a new application. All I had to do was click the green “New” button at the top. It displays a dropdown from which I simply selected “angular”. If you look carefully, you can see that it created two TypeScript files for me.
View #1 = Live Preview. The default editor view is “Live Preview” represented by the top button of the seven editor views. If you make a change to one of the files in your application, the changes are automatically interpreted and visualized in the right hand pane of the editor.
View #5 = Code Linting. We “lint” code to find and correct small imperfections. The term is derived from the “lint” that may collect in your clothes dryer. Linting code is a best practice that most professionals should insist on.
View #6 = Collaboration. I have not tried this feature, but it allows two or more people to work on the same files at the same time. If you really need to collaborate, then you would probably be better off using professional tools, but the real-time collaboration seemed cool enough to mention.
Code Beautification. The checkmark button near the top of the screen will reformat your code. Unlike a professional tool, there is no “undo” button, so you might want to exercise some caution with that one.
Zip File Downloads. To the left of the checkmark button, there is a zip file download button. That is certainly very convenient. I have used it often.
My Biggest Frustration with Plunker
When a tool is free, you can’t expect it to be perfect. When you get to the Plunker main page as shown above, you see the text “See what users have been creating”. Unfortunately, you cannot search that. Even more frustrating is that when the click on a tag icon or try to search on tags, it simply does not work. This is a known issue and has been that way for a number of years.
Overall, Plunker is a great tool, but it you play with it for a while, you will find other defects as well.