Angular Students Support Tools Web

(71) JavaScript Code Playgrounds

What is the best place to demonstrate a simple JavaScript application to others?

This is important to architects because… architects need to prototype simple applications and demonstrate simple applications to others conveniently.

There are a number of “code playgrounds” online that you can use to quickly create and run JavaScript applications.  There are a number of other such playgrounds, but we will cover “Plunker” in detail below.

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?

If I wanted to share a JavaScript sample on my blog… then I would publish it to Plunker.  I could post a full Visual Studio solution to GitHub for others to download, but that would not be very convenient to them.  With Plunker, a URL in this blog post can bring up a sample with the whole runtime environment in about two seconds.

Lots of code sharing.  When you visit a playgrounds, you will see samples from other developers.  You can borrow from those examples.  You can learn JavaScript with real-world examples.

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.

Using Plunker

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 #2 = Libraries.  If you click on the second icon on the right that looks like a book, you can add a variety of different JavaScript libraries.  This is a critical capability even for simple JavaScript applications.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *