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

Styling and laying out your components

Applying CSS styles to your app is not difficult, but you'll have to un-learn and re-learn some of the following concepts that are just plain different in RN, when compared to HTML:

  • In web pages, CSS style is global, and applies to all tags; in RN, styling is done locally on a component-by-component basis; there is no global styling. Also, you don't need selectors, because styles are directly associated to components.
  • There is no inheritance of styles: in HTML, children inherit some of their parent's style by default, but in RN, if you want this to happen, you'll have to provide the specific desired style to the children. However, if you wish, you can export styles and import them elsewhere.
  • RN styles are completely dynamic: you can use all JS functions to compute whichever values you wish to apply. You could even alter...
Previous Section
End of Section 7
Next Section