Modern JavaScript Web Development Cookbook

By : Federico Kereki

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Sections

Get in touch

Free Chapter

Working with JavaScript Development Tools

Introduction

Installing Visual Studio Code for development

Extending Visual Studio Code

Adding Fira Code font for better editing

Adding npm for package management

Doing version control with Git

Formatting your source code with Prettier

Documenting your code with JSDoc

Adding code quality checks with ESLint

Adding Flow for data types checks

Using Modern JavaScript Features

Programming functionally

Doing async calls compactly

Working with objects and classes

Organizing code in modules

Determining a feature's availability

Developing with Node

Introduction

Checking Node's setup

Working with modules

Using Flow with Node, directly

Using Flow with Node through preprocessing

Running your Node code with Nodemon

Using promises instead of error first callbacks

Working with streams to process requests

Compressing files with streams

Working with a database

Executing external processes with exec()

Using spawn() to run a command, and communicating with it

Using fork() to run Node commands

Implementing RESTful Services with Node

Introduction

Developing a server with Express

Adding middleware

Getting request parameters

Serving static files

Adding routes

Implementing secure connections

Adding security safeguards with Helmet

Implementing CORS

Adding authentication with JWT

Tying it all together – building a REST server

Testing and Debugging Your Server

Introduction

Adding logging with Winston

Adding HTTP logging with Morgan

Configuring your server for different environments

Unit testing your code

Measuring your test coverage

Debugging your code

Testing simple services from the command line

Testing more complex sequences of calls with Postman

Documenting and testing your REST API with Swagger

Developing with React

Introduction

Starting out with React

Reinstalling your tools

Defining components

Handling state

Composing components

Handling life cycle events

Simplifying component development with Storybook

Enhancing Your Application

Introduction

Adding SASS for separate styling

Creating StyledComponents for inline styling

Making your application responsive to screen sizes

Making your application adaptive for enhanced usability

Making a global application with internationalization and localization

Setting up for accessibility (a11y)

Expanding Your Application

Introduction

Managing state with Redux

Doing async actions with redux-thunk

Adding routing with react-router

Adding authorization to routes

Code splitting for performance

Debugging Your Application

Introduction

Logging with style

Debugging with the React Developer Tools

Debugging with the standalone tool

Logging Redux with redux-logger

Debugging Redux with the Redux Developer Tools

Connecting routing for debugging

Testing Your Application

Introduction

Testing components with Jest and Enzyme

Testing reducers and mappings

Testing actions and thunks

Testing changes with Snapshots

Measuring test coverage

Creating Mobile Apps with React Native

Introduction

Setting things up

Adding development tools

Using native components

Adapting to devices and orientation

Styling and laying out your components

Adding platform-specific code

Routing and navigating

Testing and Debugging Your Mobile App

Introduction

Writing unit tests with Jest

Adding snapshot testing

Measuring test coverage

Using Storybook to preview components

Debugging your app with react-native-debugger

Debugging in an alternate way with Reactotron

Creating a Desktop Application with Electron

Introduction

Setting up Electron with React

Adding Node functionality to your app

Building a more windowy experience

Testing and debugging your app

Making a distributable package

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Adding Fira Code font for better editing

If you want to try a topic that can quickly lead to a (warm? heated?) discussion, say out loud that the best font for programming is such and such, and just wait! I don't want to start any arguments, but I can certainly recommend a font that can make your JS code look much better, and become more readable.

An article in Slant, at https://www.slant.co/topics/67/~best-programming-fonts, lists over 100 programming fonts; did you even think so many were available?

The key to a better font hinges on the concept of ligatures. In typography, a ligature occurs when two or more letters are joined, becoming a single character. OK, the proper technical word would be glyph, but let's not make it more complicated than needed!

Some ligatures you may not be aware of are these: the ampersand character (&) was originally a ligature of the letters E and t, spelling out et in Latin, meaning and. Similarly, the German ß character was a ligature of two s letters, next to each other, and the Spanish Ñ originally was a pair of N characters, one written on top of the other.

In JS, there are many symbols that are written as two or more characters, just because no other way is available. For example, the greater than or equal to symbol is typed as >=, which doesn't look as good as the mathematical symbol ≥, does it? Other combinations are <= (less than or equal to), => (for arrow functions, which we'll meet in Chapter 2, Using Modern JavaScript Features), the binary shift operators << and >>, the equality operators == and === (plus the corresponding != and !==), and more.

Do not confuse ligatures with kerning. Both have to do with showing adjacent characters, but the former refers to joining characters and replacing them with a new one, while the latter deals with reducing the distance between characters. If you place an f next to an i, kerning would make them closer without overlapping (in the same way that you can reduce spacing between A and V because of the letters' shapes), while a ligature would replace both characters with fi, actually joining both letters.

How to do it...

While there are many monospaced fonts (meaning all characters have the same width, which helps with onscreen alignment and indentation), there are not so many that also provide ligatures. In my case, after experimenting with many, I can recommend using Fira Code, available online at https://github.com/tonsky/FiraCode. This font provides lots of ligatures, not only for JS but for other programming languages as well. Take a look at following illustration for all the possibilities:

All the available ligatures, as seen in the figure taken from
https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/all_ligatures.png

Download the latest version (1.206, as of December 2018) and install it, according to the standard procedures for your operating system. Afterwards, you'll have to change a pair of VSC settings, as seen earlier in this chapter; just add the following lines, and save your configuration:

"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New'",
"editor.fontLigatures": true,
.
.
.

The first line defines what font you want to use (and in CSS style, I also provided alternatives, just in case I took my settings to a different machine where Fira Code wasn't available) and the second line tells VSC to enable onscreen ligatures.

How it works...

After doing the changes in the previous section, when you open VSC, you'll be able to see code as in the following screenshot:

A sample listing, showing several ligatures; see lines 60 (=>), 63 (=== and ||), or 71 (<=)

Note that you don't have to do anything at all when you type in your code. If you want an arrow ligature, you will have to type the two characters = and > as usual; the way they will look on screen is just a result of font rendering. Similarly, if you want to search for an arrow, seek =>, as that's what will be saved to disk.

Now we have got VSC configured to our liking, let's start more packages to help with source code management and other features.

Modern JavaScript Web Development Cookbook

By : Federico Kereki

Modern JavaScript Web Development Cookbook

By: Federico Kereki

Overview of this book

Related Content you might be interested in

Current Title:

Modern JavaScript Web Development Cookbook

React 16 Tooling

Mastering JavaScript Functional Programming

Mastering JavaScript Functional Programming