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.

Related Content you might be interested in

Current Title:

Small book image
Modern JavaScript Web Development Cookbook
Federico Kereki
Dec, 2018 | 642 pages
Small book image
React 16 Tooling
Adam Boduch
Apr, 2018 | 298 pages
Small book image
Mastering JavaScript Functional Programming
Federico Kereki
Nov, 2017 | 386 pages
Small book image
Mastering JavaScript Functional Programming
Federico Kereki
Jan, 2020 | 470 pages
Table of Contents (15 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Sections
Get in touch
Free Chapter
1
Working with JavaScript Development Tools
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
2
Using Modern JavaScript Features
Using Modern JavaScript Features
Introduction
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
3
Developing with Node
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
4
Implementing RESTful Services with Node
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
5
Testing and Debugging Your 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
6
Developing with React
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
7
Enhancing Your Application
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)
8
Expanding Your Application
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
9
Debugging Your Application
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
10
Testing Your Application
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
11
Creating Mobile Apps with React Native
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
12
Testing and Debugging Your Mobile App
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
13
Creating a Desktop Application with Electron
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
14
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Composing components

Let's go back to the ExpandableCard, which we didn't quite finish before. We could certainly do a regions-specific card, but it seems that the general concept of a card that can be expanded or condensed is useful enough that we could prefer a more general solution. React allows us to do that via composition, as we'll see in this section.

How to do it...

The component we want to create could have any kind of content. (The same idea would apply to generic dialog boxes, header sections, or sidebars, by the way.) Instead of creating a base class and using inheritance to create multiple derived classes, React allows you to pass a special children prop (this.props.children) so that you can pass...

Previous Section
End of Section 7
Next Section