Modern JavaScript Web Development Cookbook

Book Description

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.

Publisher Resources

View/Submit Errata

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Modern JavaScript Web Development Cookbook
  3. Dedication
  4. www.PacktPub.com
    1. Why subscribe?
    2. PacktPub.com
  5. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Sections
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
      5. There's more…
      6. See also
    5. Get in touch
      1. Reviews
  7. Working with JavaScript Development Tools
    1. Introduction
    2. Installing Visual Studio Code for development
      1. How to do it…
      2. How it works…
    3. Extending Visual Studio Code
      1. How to do it…
    4. Adding Fira Code font for better editing
      1. How to do it…
      2. How it works…
    5. Adding npm for package management
      1. How to do it…
      2. How it works…
        1. Creating a project with npm
        2. Installing packages for different purposes
      3. There's more…
    6. Doing version control with Git
      1. How to do it…
      2. There's more…
    7. Formatting your source code with Prettier
      1. How to do it…
      2. How it works…
    8. Documenting your code with JSDoc
      1. How to do it…
      2. How it works…
    9. Adding code quality checks with ESLint
      1. How to do it…
      2. How it works…
      3. There's more…
    10. Adding Flow for data types checks
      1. How to do it…
      2. How it works…
        1. Configuring Flow's linting
        2. Using Flow within VSC
  8. Using Modern JavaScript Features
    1. Introduction
    2. Adding types
      1. Getting started
      2. How to do it...
        1. Basic types in Flow
        2. Union types
        3. Class types
        4. Type aliases
        5. Generic types
        6. Opaque types for safer coding
        7. Working with libraries
    3. Working with strings
      1. How to do it...
        1. Interpolating in template strings
        2. Tagged templates
        3. Writing multiline strings
        4. Repeating strings
        5. Padding strings 
        6. Searching in strings
        7. Trimming strings
        8. Iterating over strings
    4. Enhancing your code
      1. How to do it...
        1. Working in strict mode
        2. Scoping variables
        3. Spreading and joining values
        4. Destructuring arrays and objects
        5. Doing powers
    5. Defining functions
      1. How to do it...
        1. Writing arrow functions
        2. Returning values
        3. Handling this in arrow functions
        4. Defining types for arrow functions
        5. Defining default argument values
    6. Programming functionally
      1. How to do it...
        1. Reducing arrays to values
        2. Mapping arrays
        3. Filtering arrays
        4. Producing functions from functions
    7. Doing async calls compactly
      1. Getting started
      2. How to do it...
        1. Doing Ajax calls with promises
        2. Doing Ajax calls with async/await
    8. Working with objects and classes
      1. How to do it...
        1. Defining classes
        2. Extending classes
        3. Implementing interfaces
        4. Static methods
        5. Using getters and setters
    9. Organizing code in modules
      1. How to do it...
        1. Doing modules the IIFE way
        2. Redoing our IIFE module in the modern way
        3. Adding initialization checks
        4. Using more import/export possibilities
        5. Using Flow types with modules
    10. Determining a feature's availability
      1. How to do it...
  9. Developing with Node
    1. Introduction
    2. Checking Node's setup
      1. How to do it…
      2. How it works…
    3. Working with modules
      1. How to do it…
      2. How it works…
    4. Using Flow with Node, directly
      1. How to do it…
      2. How it works…
    5. Using Flow with Node through preprocessing
      1. How to do it…
      2. How it works...
    6. Running your Node code with Nodemon
      1. How to do it...
      2. How it works...
    7. Using promises instead of error first callbacks
      1. How to do it…
      2. How it works…
      3. There's more…
    8. Working with streams to process requests
      1. How to do it…
      2. How it works…
    9. Compressing files with streams
      1. How to do it…
      2. How it works…
    10. Working with a database
      1. Getting ready
      2. How to do it…
        1. Getting a connection
        2. Executing some queries
        3. Updating the database
        4. Getting everything together
      3. How it works…
      4. There's more...
    11. Executing external processes with exec()
      1. How to do it…
      2. How it works…
      3. There's more...
    12. Using spawn() to run a command, and communicating with it
      1. How to do it…
      2. How it works…
    13. Using fork() to run Node commands
      1. How to do it…
      2. How it works…
  10. Implementing RESTful Services with Node
    1. Introduction
    2. Developing a server with Express
      1. How to do it...
      2. How it works...
    3. Adding middleware
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Getting request parameters
      1. How to do it...
      2. How it works...
    5. Serving static files
      1. How to do it...
      2. How it works...
      3. There's more...
    6. Adding routes
      1. How to do it...
      2. How it works...
    7. Implementing secure connections
      1. How to do it...
      2. How it works...
    8. Adding security safeguards with Helmet
      1. How to do it...
      2. How it works...
    9. Implementing CORS
      1. How to do it...
      2. How it works...
    10. Adding authentication with JWT
      1. How to do it...
      2. How it works...
    11. Tying it all together – building a REST server
      1. How to do it...
      2. How it works...
        1. Handling GETs
        2. Handling DELETEs
        3. Handling PUTs
        4. Handling POSTs
      3. There's more...
        1. Accepting JSON data
        2. Adding the PATCH method for partial updates
        3. Using Restify instead of Express
        4. Allowing filtering, sorting, and pagination
        5. Using GraphQL instead of REST
        6. Implementing a microservice-based architecture
  11. Testing and Debugging Your Server
    1. Introduction
    2. Adding logging with Winston
      1. How to do it...
      2. How it works...
      3. There's more...
    3. Adding HTTP logging with Morgan
      1. How to do it...
      2. How it works...
      3. There's more...
    4. Configuring your server for different environments
      1. How to do it...
      2. How it works...
      3. There's more...
    5. Unit testing your code
      1. How to do it...
        1. Doing functional tests
        2. Using spies
        3. Working with mocks
      2. How it works...
      3. There's more....
    6. Measuring your test coverage
      1. How to do it...
      2. How it works...
    7. Debugging your code
      1. How to do it...
      2. How it works...
    8. Testing simple services from the command line
      1. Getting ready
      2. How to do it...
    9. Testing more complex sequences of calls with Postman
      1. Getting ready
      2. How to do it...
        1. Doing basic requests
        2. Adding some checks
        3. Chaining requests
      3. How it works...
      4. There's more...
    10. Documenting and testing your REST API with Swagger
      1. How to do it...
        1. Writing our specs
        2. Enabling Swagger
      2. How it works...
  12. Developing with React
    1. Introduction
    2. Starting out with React 
      1. How to do it...
      2. How it works...
      3. There's more...
    3. Reinstalling your tools
      1. How to do it...
        1. Reinstalling Flow and Prettier
        2. Reinstalling ESLint
      2. How it works...
    4. Defining components
      1. How to do it...
        1. Creating the application
        2. Creating the basic App component
        3. Creating the RegionsInformationTable component
        4. Creating the CountryFilterBar component
        5. Creating the ResultsDataTable component
        6. Creating the ExpandableCard component
      2. How it works...
      3. There's more...
    5. Handling state
      1. How to do it...
      2. How it works...
      3. There's more...
    6. Composing components
      1. How to do it...
      2. How it works...
    7. Handling life cycle events
      1. How to do it...
      2. How it works...
    8. Simplifying component development with Storybook
      1. How to do it...
      2. How it works...
      3. There's more...
  13. Enhancing Your Application
    1. Introduction
    2. Adding SASS for separate styling
      1. How to do it…
      2. How it works…
    3. Creating StyledComponents for inline styling
      1. How to do it…
      2. How it works…
    4. Making your application responsive to screen sizes
      1. How to do it…
      2. How it works…
        1. Resizing elements
        2. Reordering elements
        3. Hiding or showing elements
    5. Making your application adaptive for enhanced usability
      1. How to do it…
      2. How it works…
    6. Making a global application with internationalization and localization
      1. How to do it…
      2. How it works…
    7. Setting up for accessibility (a11y)
      1. How to do it…
      2. How it works…
        1. Solving static problems
        2. Solving runtime problems
      3. There is more
  14. Expanding Your Application
    1. Introduction
    2. Managing state with Redux
      1. Getting ready
      2. How to do it...
        1. Defining actions
        2. Writing a reducer
        3. Defining the store
        4. Building our components
        5. Connecting components to the store
        6. Defining the main page
      3. How it works...
      4. See also
    3. Doing async actions with redux-thunk
      1. How to do it…
        1. Defining the actions
        2. Writing the reducer
        3. Modifying the country drop-down list
        4. Modifying the region table
        5. Setting up the main application
        6. Using thunks
      2. How it works…
      3. There's more…
    4. Adding routing with react-router
      1. Getting started
      2. How to do it…
      3. How it works…
      4. There's more…
    5. Adding authorization to routes
      1. How to do it…
        1. Creating a login component
        2. Defining actions and the reducer
        3. Creating a component to protect a route
      2. How it works…
      3. There's more…
    6. Code splitting for performance
      1. Getting ready
      2. How to do it…
      3. How it works…
      4. There's more…
  15. Debugging Your Application
    1. Introduction
    2. Logging with style
      1. Getting ready
      2. How to do it…
      3. How it works…
    3. Debugging with the React Developer Tools
      1. Getting Ready
      2. How to do it…
      3. How it works…
    4. Debugging with the standalone tool
      1. Getting ready
      2. How to do it…
      3. How it works…
    5. Logging Redux with redux-logger
      1. Getting ready
      2. How to do it…
        1. Setting up our counter application
        2. Setting up our region application
      3. How it works…
        1. Logging the counter application
        2. Logging the region application
    6. Debugging Redux with the Redux Developer Tools
      1. Getting ready
      2. How to do it…
      3. How it works…
    7. Connecting routing for debugging
      1. Getting ready
      2. How to do it…
      3. How it works…
  16. Testing Your Application
    1. Introduction
    2. Testing components with Jest and Enzyme
      1. Getting ready
      2. How to do it...
        1. Testing a component without events
        2. Testing a component with events
      3. How it works...
    3. Testing reducers and mappings
      1. How to do it...
      2. How it works...
    4. Testing actions and thunks
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Testing changes with Snapshots
      1. How to do it...
      2. How it works...
        1. Running the tests
        2. The produced snapshot files
        3. Regenerating snapshots
    6. Measuring test coverage
      1. How to do it...
      2. How it works...
  17. Creating Mobile Apps with React Native
    1. Introduction
    2. Setting things up
      1. How to do it...
      2. How it works...
      3. There's more...
    3. Adding development tools
      1. How to do it...
        1. Adding ESLint
        2. Adding Flow
        3. Adding Prettier
      2. How it works...
    4. Using native components
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Adapting to devices and orientation
      1. How to do it...
      2. How it works...
      3. There's more...
    6. Styling and laying out your components
      1. How to do it...
      2. How it works...
    7. Adding platform-specific code
      1. How to do it...
      2. How it works...
      3. There's more...
    8. Routing and navigating
      1. How to do it...
      2. How it works...
      3. There's more...
  18. Testing and Debugging Your Mobile App
    1. Introduction
    2. Writing unit tests with Jest
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Adding snapshot testing
      1. How to do it...
      2. How it works...
    4. Measuring test coverage
      1. How to do it...
      2. How it works...
    5. Using Storybook to preview components
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Debugging your app with react-native-debugger
      1. Getting started
      2. How to do it...
      3. How it works...
    7. Debugging in an alternate way with Reactotron
      1. Getting ready
      2. How to do it...
      3. How it works...
  19. Creating a Desktop Application with Electron
    1. Introduction
    2. Setting up Electron with React
      1. How to do it...
      2. How it works...
    3. Adding Node functionality to your app
      1. How to do it...
      2. How it works...
    4. Building a more windowy experience
      1. How to do it...
      2. How it works...
    5. Testing and debugging your app
      1. How to do it...
      2. How it works...
      3. There's more...
    6. Making a distributable package
      1. How to do it...
      2. How it works...
  20. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product Information

  • Title: Modern JavaScript Web Development Cookbook
  • Author(s): Federico Kereki
  • Release date: December 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788992749