Book Image

Modern JavaScript Web Development Cookbook

By : Federico Kereki
Book Image

Modern JavaScript Web Development Cookbook

By: Federico Kereki

Overview of this book

JavaScript has evolved into a language that you can use on any platform. Modern JavaScript Web Development Cookbook is a perfect blend of solutions for traditional JavaScript development and modern areas that developers have lately been exploring with JavaScript. This comprehensive guide teaches you how to work with JavaScript on servers, browsers, mobile phones and desktops. You will start by exploring the new features of ES8. You will then move on to learning the use of ES8 on servers (with Node.js), with the objective of producing services and microservices and dealing with authentication and CORS. Once you get accustomed to ES8, you will learn to apply it to browsers using frameworks, such as React and Redux, which interact through Ajax with services. You will then understand the use of a modern framework to develop the UI. In addition to this, development for mobile devices with React Native will walk you through the benefits of creating native apps, both for Android and iOS. Finally, you’ll be able to apply your new-found knowledge of server-side and client-side tools to develop applications with Electron.
Table of Contents (15 chapters)

Doing version control with Git

In modern software development, it goes without saying that you will need some SCM (Software Configuration Management) software to keep track of all changes in your code. Today, the most-used tool is Git, which we'll also be using. Git was created in 2005 by Linus Torvalds (who also created Linux!) for the development of the Linux kernel; not a small task considering that its source is over 25 million lines of code!

Linux is not the only major operating system controlled with Git; in February 2017, Microsoft itself decide to migrate the development of Microsoft Windows to Git, and developed customizations to enhance remote work.

We won't be delving into how Git works, what commands to use, and so on, because that would be material enough for a book! We will focus on how to use Git with VSC. This is rather simple because not only was VSC written with Git access in mind, but there are also some extensions that can make work even easier, so you don't have to memorize lots of commands and options; take look at following illustration:

Git has lot of commands, but you can cope very well with a few selected ones.
This XKCD comic is available online at https://xkcd.com/1597/.

How to do it...

Personally, I have a GitHub account, and I decided to use it for the code for this book. This is not only a way of being able to quickly share all the code with readers, but also (and quite important!) a way to ensure I wouldn't be able to accidentally lose my work, which I am quite capable of doing! See https://github.com/fkereki/modernjs for all code. I will assume that you have an appropriate Git server, and that you are able to initialize a project, connect it to the server, and so on. Also, VSC needs Git to be pre-installed in your machine; if you haven't installed it, checkout https://git-scm.com/book/en/v2/Getting-Started-Installing-Git to get started.

VSC provides full access to commands through its Command Palette.... as seen in the following screenshot. You can search for a command there, and after clicking on it, VSC will ask for all possible parameters one at the time, so you don't have to do them by memory:

You can enter Git commands through VSC's command palette, and you'll get asked for the required parameters, if any

Committing code is quite frequent, so you can directly do it by clicking on the source control icon (third from the top, at the left) and entering the commit message that you want. In that screen, you can also revert local changes and more; mouse over to get all possible features.

There's more...

There is a single Git extension that I would recommend for VSC: look for GitLens (also called Git Supercharged) and install it. This extension provides access to practically all Git information.

Take a look at the following screenshot:

GitLens in use

Among other features, GitLens provides the following:

  • A lens, to show recent commit and author information
  • An explorer, to browse repositories and file histories
  • A blame annotation, to show who made the last change to a line, as with git blame
  • The ability to search for commits in different ways, and much more

For more detailed information, see http://gitlens.amod.io/. Pay particular attention to customization at https://github.com/eamodio/vscode-gitlens/#configuration, because most features can be twiddled to better suit your work style. You can access them through the standard Settings page (look for all configuration items whose names start with GitLens), or by opening the Command Palette and looking for GitLens: Open Settings, which will open a special setup screen as seen in the following screenshot:

Gitlens also provides a special onscreen settings feature, which allows you to configure practically every aspect of the tool

Now that we have a development environment set up, and we have chosen and installed a minimum set of tools, let's go further and add some optional, but highly recommended, additional packages that will help produce better code.