JavaScript is introduced at the end of 1995. From that moment we begin to have a browser battle between Netscape's Navigator and Microsoft's Internet Explorer for market share. Microsoft proves to be the victor to then later find itself a rival to Mozilla and its Firefox browser. Mozilla enters into the foray around the early 2000s and takes away from Microsoft's market share. Mozilla starts work with Adobe on an ECMAScript 4 draft standard specification of JavaScript which Microsoft refuses to contribute. Many web developers at that time were buying copies of the Adobe Macromedia Suite of products to help build websites.

The year 2005 arrives with Asynchronous JavaScript and XML as a way to load data on a site without page reloads. During this AJAX web desing approach, jQuery is introduced and gains popularity. Fast forward to today and we have a very large JavaScript community of web developers. I'll describe my journey into this web development community and share what I find to be the good tools to get the job done.

My journey as a web developer began from tinkering with HTML, PHP, and MySQL. It wasn't until after I moved to Palo Alto that I scrapped PHP for Python. Why Python? Before I made the move to Palo Alto, I had a conversation over dinner with mathematics professor Arek Goetz. He had mentioned SageMath as a free alternative to the computer algebra system Mathematica. Python was the language needed to best interface with SageMath. Henceforth I then made the decision to learn Python. That decision later lead me to choose the Django web framework to build for the web.

I made the move to Palo Alto after finding a place that the residents all named the Poe Hacker House. It was here that I made new friends and acquaintances. We all wanted to be close to Sand Hill Road, the long strip with a high concentration of Silicon Valley venture capital firms. It was here that I began to dabble with JavaScript. My good friend Kirubakaran Athmanathan had recommended to me David Flanagan's JavaScript: The Definitive Guide and Douglas Crockford's JavaScrpt: The Good Parts. At the time, I had access to Flanagan's 2006 Fifth edition. Now we are in 2020 and I recently purchased the Seventh Edition of Flanagan's Definitive Guide. Flanagan's book is a great resource and I intend to always have it handy.

Getting the job done building web apps requires making choices on what JavaScript libraries to use. Many libraries use EcamScript 6 features. Be familiar with the new JavaScript features starting from EcmaScript 6 for a good foundation into modern web development.

In modern web applications, you'll notice that asynchronous behavior is very common between server-client communications. The usage of Promises and async/await should become familiar after knowing how to write asynchronous JavaScript code with callbacks. Callback hell is when you have nested callbacks that make the code hard to read in JavaScript. The advantage to using Promises and async/await is that they allow us to write asynchronous code in a way that looks synchronous, hence easier to read.

On the client side, we have Web Components that are natively rendered in the browser without the need of an external JavaScript library to help build our user interfaces. Nevertheless, JavaScript libraries do help when writing UI components. React, Vue, and LitElement are all worth exploring as a way to help build our user interfaces to our web application.

React uses a JavaScript language extension called JSX to make writing UI in a declarative manner within a component's render function. We declare how we want our UI to behave and look using JSX. With Babel, the JSX is transpiled into JavaScript.

LitElement uses a template literal html tag to help render components. Template literal tags are an interesting feature about ES6 that I discovered from learning LitElement.

The use of a template literal tag can also be found in GraphQL. GraphQL is used to better query data from a server/service and is in contrast to a REST API in that you can request data from a service at a more refined granular level than just using a REST resource and verb to obtain data.

The Emotion-JS library is another one that uses a tagged template literal as part of its interface. The new practice now is to either put CSS directly inside a React component's render function, or to otherwise import a css file into the React component JS file.

For now I'll just continue with the React way of styling components without the use of Emotion-JS, but will continue to find ways to style LitElement and Web Components. For everything else outside of web components, I'll be using Sass to best organize my CSS assets. PostCSS as "a tool for transforming CSS with JavaScript" might prove a better alternative than Sass to incorporate into my workflow.

On the server side we have Node.js as an asynchronous, non-blocking, single-threaded, concurrent API environment to help build web servers and clients. I've chosen to use Express.js with Node.js as a way to build the server to my apps. This Node development environment will use webpack.js to bundle code base and other web assets.

As we write JavaScript code, we'll find it helpful to use ESLint to help us write better code with less mistakes. I've chosen not to use Prettier, but maybe that will change. I prefer to manually make changes from seeing the ESLint warning and error messages.

Moving forward, I'll want to implement the Flow JavaScript language extension to my workflow as a good practice to help prevent bugs from developing in the code base. Flow forces you to declare type in your code and can help to write better code. As we develop our application, it'll be good practice to choose a tool for Test Driven Development. For this TDD approach I've chosen to use Jest.

I'm no user of Facebook's products, but in no way can I neglect the contribution of Facebook to the web development community. They spearheaded a TDD approach with Jest, UI development with React, and a better way to query data for Single Page Apps with GraphQL. Facebook's influence runs deep at this point in the history of building web apps.

I'm not a great fan of Java either, but it has been refreshing to discover the Java-framework Vaadin web components. The Polymer Project took inspiration from these Vaadin components and made them available to LitElement creators of web components.2020-07-10