Modern JavaScript Web Development Cookbook

Easy solutions to common and everyday JavaScript development problems

Federico Kereki

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781788992749
• eBook ISBN: 9781788992350
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Over 90 recipes to help you write clean code, solve common JavaScript problems, and work on popular use cases like SPAs, microservices, native mobile development with Node, React, React Native and Electron.

Key Features

• Over 90 practical recipes to help you write clean and maintainable JavaScript codes with the latest ES8
• Leverage the power of leading web frameworks like Node and React to build modern web apps
• Features comprehensive coverage of tools and techniques needed to create multi-platform apps with JavaScript

Book Description

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.

What you will learn

• Use the latest features of ES8 and learn new ways to code with JavaScript
• Develop server-side services and microservices with Node.js
• Learn to do unit testing and to debug your code
• Build client-side web applications using React and Redux
• Create native mobile applications for Android and iOS with React Native
• Write desktop applications with Electron

Who this book is for

This book is for developers who want to explore the latest JavaScript features, frameworks, and tools for building complete mobile, desktop and web apps, including server and client-side code. You are expected to have working knowledge of JavaScript to get the most out of this book.

Using Modern JavaScript Features

The recipes we will be covering in this chapter are as follows:

• Adding types
• Working with strings
• Enhancing your code
• Defining functions
• Programming functionally
• Doing async calls compactly
• Working with objects and classes
• Organizing code in modules
• Determining a feature's availability

Introduction

In the previous chapter, we set up our working environment with many tools that we will be using throughout this book. In this chapter, we will get ourselves prepared for the rest of this book, and we will be considering some interesting and powerful modern features of JavaScript that can you help be more effective and write better code.

We will be considering several new language features that will come handy—but definitely not everything! JS has really grown into a big language, and there are some features that you're not likely to ever need. From the very start, we will also work more seriously with Flow, aiming to forego the usage of untyped JS, for a safer way of developing code.

It may be important to highlight that JS has evolved through the years, and that there isn't a single standard version. The most recent one is (formally) called ECMAScript 2018, which is usually shortened to ES2018. The current list of versions of the language is as follows:

• ECMAScript 1, June 1997
• ECMAScript 2, June 1998, essentially equal to the previous version
• ECMAScript 3, December 1999, adding several new functionalities
• ECMAScript 5, December 2009 (there never was an ECMAScript 4; that version was abandoned) also known as JS5
• ECMAScript 5.1, June 2011
• ECMAScript 6 (ES2015 or ES6), June 2015
• ECMAScript 7 (ES2016), June 2016
• ECMAScript 8 (ES2017), June 2017
• ECMAScript 9 (ES2018), June 2018

ECMA was originally an acronym meaning European Computer Manufacturers Association, but nowadays the name is simply considered a name by itself. You can go to its site at https://www.ecma-international.org/ and view the standard language specification at https://www.ecma-international.org/publications/standards/Ecma-262.htm.

Whenever we refer to JS in this text without further specification, the latest version (that is, ES2018) is what we mean. No browsers fully implement this version, and further on in this book, we'll solve this problem by using Babel, a tool that will convert the modern features into equivalent, but older and compatible code, so even if you program in the latest fashion, users with older browsers will still be able to run your code. The tools we'll be using will install Babel on their own, so we won't have to do that, but if you're curious, you can read more at https://babeljs.io/.

A very good source for all JS-related things is the Mozilla Developer Network (MDN), which has been going strong with all sorts of web documentation for over ten years. Take a look to their site at https://developer.mozilla.org/bm/docs/Web/JavaScript; we'll be frequently making reference to it. You can also read http://es6-features.org/ for a wealth of examples of ES6 features.

Adding types

In the previous chapter, we installed Flow so that we could add data types check to JS, but we didn't really get into its syntax or rules. Let's get into that now, before getting into JS-specific features.

Getting started

Flow will not check every file unless you expressly require it to. For a file to be checked, you must add a simple comment to the very top, as shown in the following code snippet. Flow will ignore any files that lack this comment, so even if you were adding the tool to an already existing project, you could do it gradually, adding files one at a time:

/* @flow */

Starting with Flow's controls, you just have to specify what data type you expect any variable to be, and Flow will check that it's always used correctly. Fortunately, Flow is also capable of determining data types by value; for example, if you assign a string to a variable, it will assume that this variable is meant to contain strings. Adapting an example from https://flow.org/en/docs/usage/, you could write the following:

/* @flow */

function foo(x: ?number): string {
 if (x) {
 return x;
 } else {
 return "some string";
 }
}

console.log(foo("x"));

The :?number and :string annotations specify that x is an optional numeric parameter, and that foo should return a string. Can you see two problems with the rest of the code? If you use npm run flow, you'll get a report showing what the problem is. First, you cannot return x, because of the data types mismatch between the variable and the expected return value:

Error ------------------------------------------------------------------------------------- src/types_examples.js:5:16

Cannot return x because number [1] is incompatible with string [2].

 2│
 [1][2] 3│ function foo(x /* :?number */) /* :string */ {
 4│ if (x) {
 5│ return x;
 6│ } else {
 7│ return 'some string';
 8│ }

Second, you are trying to call a function but passing a parameter of the wrong type:

Error------------------------------------------------------------------------------------- src/types_examples.js:12:17

Cannot call foo with 'x' bound to x because string [1] is incompatible with number [2].

  [2] 3│ function foo(x /* :?number */) /* :string */ {
 :
 9│ }
 10│
 11│ // eslint-disable-next-line no-console
 [1] 12│ console.log(foo('x'));
 13│

All of the preceding code is (except for the type declarations) valid JS, so it would have been accepted; Flow tells you about the problems so that you can fix them. Now, let's get into greater detail, and see all of the possibilities that this tool gives us.

If you want to ignore Flow's warnings for any line, precede it with a comment like // @FlowFixMe and follow with the reason why you want to skip that situation. See https://flow.org/en/docs/config/options/#toc-suppress-comment-regex for more on this.

How to do it...

There are many ways to define types so that you can deal with simple and complex cases with no problems. Let's start with the simpler, basic types, and then move on to more specific cases.

2323...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• www.PacktPub.com
• Contributors
• Preface
• Working with JavaScript Development Tools
• Using Modern JavaScript Features
• Developing with Node
• Implementing RESTful Services with Node
• Testing and Debugging Your Server
• Developing with React
• Enhancing Your Application
• Expanding Your Application
• Debugging Your Application
• Testing Your Application
• Creating Mobile Apps with React Native
• Testing and Debugging Your Mobile App
• Creating a Desktop Application with Electron
• Other Books You May Enjoy