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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Working with JavaScript Development Tools

Working with JavaScript Development Tools

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

Using Modern JavaScript Features

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

Developing with Node

Developing with Node

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

Implementing RESTful Services with Node

Developing a server with Express

Adding middleware

Getting request parameters

Serving static files

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

Testing and Debugging Your Server

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

Developing with React

Starting out with React

Reinstalling your tools

Defining components

Composing components

Handling life cycle events

Simplifying component development with Storybook

Enhancing Your Application

Enhancing Your Application

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

Expanding Your Application

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

Debugging Your Application

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

Testing Your Application

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

Creating Mobile Apps with React Native

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

Testing and Debugging Your Mobile App

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

Creating a Desktop Application with Electron

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

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Handling state

In the previous section, we saw the usage of state for the regions; let's delve a bit deeper into that. The concept of state is very similar to props, but with crucial differences: props are assigned from the outside and are read-only, and state is handled privately, and read-write. If a component needs to keep some information, which it can use to render itself, then using state is the solution.

How to do it...

Defining state is done by using class fields, a fairly new feature of JS, that's enabled via Babel since it isn't fully official yet. (See https://github.com/tc39/proposal-class-fields for the proposal, which is at Stage 3, meaning that it's one step away from being officially adopted...