The Road to JavaScript Web Applications

This week in ZoneCast . . .

The Road to JavaScript Web Applications is a 4 part series where Yohan Gomaz, a Senior Software Engineer, takes you through the different stages of building a JavaScript Web Application from scratch.

(If you are interested in learning more about the evolution of JavaScript and its foray into web and mobile applications, check out The Rise of JavaScript).

Part 1: Setting Up your JavaScript

In part 1 our hosts, Awad and Isuru begin the journey by discussing the initial steps that you need to take in building a JavaScript Web Application. The discussion spans into ECMAScript, browser selections, tools and techniques, performance and much more. Listen to Part 1 below:

Discussion Breakdown

What to consider first – 00:56 | ECMAScript – 01:40  | Next step after selecting the browser – 02:42 | Does the environment require any thought – 03:16 | Any other tools that needed when setting up the project – 05:39 | Open source contributions by Yohan – 07:50 | Adding a carousal to the page – 08:24 | Does the performance differ based on the libraries used – 10:10 | Linking options through a CDN compared to a package manager – 11:12 | Issues with including CSS and JavaScript manually – 12:44

Part 2: Pitfalls and Best Practices

In Part 2, we explore, as the title suggests the common pitfalls you face when building a JavaScript Web Application and Best Practices you need to adhere to. Yohan wanders into script tags in index.html files, Document Object Models (DOM), ReactJS and Virtual DOM, coding standards and more.

Listen to the episode below:

Discussion Breakdown

Defining variables in the script tag and its problems – 01:08 | Script tags in an index.html – 06:07 | What is DOM and how it works – 11:48 | Best practices and pitfalls in manipulating DOM – 13:56 | DOM manipulation functions and ReactJS – 19:52 | Adhering to coding practices – 23:23 | What is Linter? – 29:00 | Useful references to learn JavaScript – 29:42

Part 3: Testing your Application

In Part 3, our hosts Awad and Sasitha discuss about Testing with Yohan. The topics they cover include front-end testing, the types of Testing, frameworks and tools to use and much more. You can listen to the episode below.

Discussion Breakdown

Front-end Testing – 01:01 | Types of Front-end Testing – 02:03 |  Difference between Integration Testing and Testing API – 04:30 | Frameworks and Tools – 07:11 | How to start Front-end Testing – 09:30 | Headless Browser – 13:35 | Verifying the UI – 16:06 | Coverage Reporting – 18:34

Part 4: Front-end Build Tools and CI

In the final episode of ” The Road to JavaScript Web Applications”, Yohan will be looking into build processes and Continuous Integration for front-end applications with our hosts Isuru and Ramitha.  At the end of this episode, you are in a good position to build a simple JavaScript Web Application on your own. So listen below and get busy coding. Good Luck!

Discussion Breakdown

Build Work Flow and Tools for Front-end – 01:05 | Options Available for Front-end Build Tools – 02:33 | Areas a Build System should Cover – 03:25 | Source Maps – 12:09 | Tools that Facilitate CI/CD Environment – 19:07 | “We should always go for the latest available tools and their versions of JavaScript”. True or False – 20:35

About ZoneCast: Simply put, ZoneCast is a podcast about technology. Listen in and discover all the tech that is brewed inside Zone24x7 and the many passion projects of our associates. To listen to previous ZoneCast episodes check out ourZoneCast SoundCloudPage.

Image Courtesy: Header image from

Yohan Gomez

Yohan Gomez was a Data Engineer – Frontend at Zone24x7.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.