You don’t need to set up anything to start with JavaScript
When we start coding, we worry about what would be the correct way to set up the development environment, what all external dependencies we need to install, and which framework to use
To counter all these I will be sharing with you 3 ways to easily start with client-side JavaScript!
1. The Browser Console
We can create variables including functions directly in the console and manipulate them, reassign them, or call the functions too.
On execution of each line, we get the output in the next line.
Pros
- We get a very quick start and good intellisense.
- This does not require any additional software that needs to be installed aside from the browser.
- The outputs are real-time.
Cons
- This is only useful if we want to debug something or do some manipulation on the dom nodes that are already rendered by the page.
- This is not useful to write complete programs as it gets difficult to write and execute code line by line.
- There is no file structure.
- We can only run Vanilla JavaScript.
2. Google Chrome Snippets
While in the console we need to write code line by line, Browser Snippets allow us to write programs in a file.
This way we can write the complete code and run the file.
We can add breakpoints as well to debug the code in case something goes wrong.
Pros
- We get a very quick start here as well with Debugging Support.
- This does not require any additional software that needs to be installed aside from the browser.
- We can organize programs in files and execute the files.
Cons
- This is not useful when we are building projects that require external dependencies.
- We need to define all outermost variables as let.
This is because variables are not removed from the scope on
re-execution of the file. - We can only run Vanilla JavaScript.
3. Online Playgrounds like CodeSandbox, JSFiddle, and StackBlitz
When we want to start working with frameworks or HTML/CSS/JS together, then we can make use of online playgrounds.
They provide us with real-time outputs based on changes in either HTML/CSS/JS and also allow us to share the complete codebase.
Also, we can install external dependencies and use them in the project.
Pros
- We get a very quick start here with directory structure support.
- We can quickly install new packages without any hassle.
- These are really useful when we want to try out a 3rd party library and don’t want to install the package in our local workspace first.
- We get nice starter projects.
Try googling React Start Project — CodeSandBox.
Cons
- This is not useful when we are building production-level products.
- There might not be debugging support based on the platform.
What do you think, is the easiest way to get started, and do you know of any other ways to quick-start JavaScript? Do let me know in the comments!
Thanks!
