From vanilla javascript to react and typescript

When you are a self taught programmer who does not work in tech, you are not always aware of new changes in the rapidly evolving web development.

I started building web applications using PHP, which generates HTML from the server side, but I was using more and more javascript to write dynamically, and it was clear for me that single page web apps with the entire content dynamically generated from the client side was the way to go.

Then I switched from PHP to NodeJs, but for the client side, I chose to create my own tool, instead of looking for something already existing, because I wanted something lightweight, easy to use, and also because I like to create stuffs.

I managed to build what I wanted, a tool that reduces the amount of code needed and generates lightweight web apps with very few dependencies, but the user interface looked very basic, even with the help of bootstrap.

Recently, I decided to upgrade myself to “modern” front-end development, and I had to learn new terms and new ways of doing things:

npm modules in the browser

The “old way” of loading javascript code to the webpage was using script tags, usually in the head section.

Now it’s a single js file in the body section: the bundle, which is generated by module bundlers like browserify, allowing you to import npm packages to use them in the browser.

Another milestone for me was publishing my first npm module, yey!

JSX syntax

In javascript code, HTML is a string and double quotes have to be escaped, but with JSX syntax, it’s not needed anymore, you can write plain HTML directly, which is much easier. You can even put javascript code inside JSX and it will be executed.

But web browsers do not support JSX, so we need to use a converter like Babel.

React

React is a javascript library used to build user interfaces, created by Facebook. It takes care of refreshing the view when the state of a component changes, using something called Virtual DOM.

It is pretty easy to get started with it, you just use the tool react-create-app to set up as boilerplate with a JSX converter, a module bundler and hot refresh.

ES6

ECMAScript 2015 or ES6 is a major javascript update that introduced a lot of new features, like let, const, arrow functions, and classes.

With ES6 you can also use import from and export instead of require and module.exports but it is not yet supported by all tools.

Typescript

Typescript is another extension of javascript that allows to set types for variables and objects, spotting reference errors before the code is run, as we are writing it, and it is needed because we are dealing with so much different objects in various modules.

Writing tests

I had to get familiar with automatic testing approaches like unit tests, integration tests and end to end tests.

Well, I think I successfully upgraded my webskills, at least for the front end part!

Creator of NestedLogic