book

JavaScript Everywhere

by Adam D. Scott

February 2020

Intermediate to advanced

344 pages

6h 37m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who This Book Is ForHow This Book Is OrganizedConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
Your Text EditorThe TerminalUsing a Dedicated Terminal ApplicationUsing VSCodeNavigating the FilesystemCommand-Line Tools and Homebrew (Mac Only)Node.js and NPMInstalling Node.js and NPM for macOSInstalling Node.js and NPM for WindowsMongoDBInstalling and Running MongoDB for macOSInstalling and Running MongoDB for WindowsGitExpoPrettierESLintMaking Things Look NiceConclusion
What We’re BuildingHow We’re Going to Build ThisGetting StartedConclusion
Hello WorldNodemonExtending Port OptionsConclusion
Turning Our Server into an API (Sort Of)GraphQL BasicsSchemasResolversAdapting Our APIConclusion
Getting Started with MongoDBConnecting MongoDB to Our ApplicationReading and Writing Data from Our ApplicationConclusion
Separating Our GraphQL Schema and ResolversWriting Our GraphQL CRUD SchemaCRUD ResolversDate and TimeConclusion
Application Authentication FlowEncryption and TokensEncrypting PasswordsJSON Web TokensIntegrating Authentication into Our APIUser SchemasAuthentication ResolversAdding the User to the Resolver ContextConclusion
Before We Get StartedAttach a User to New NotesUser Permissions for Updates and DeletesUser QueriesToggling Note FavoritesNested QueriesConclusion

Web Application and Express.js Best PracticesExpress HelmetCross-Origin Resource SharingPaginationData LimitationsOther ConsiderationsTestingSubscriptionsApollo GraphQL PlatformConclusion
Hosting Our DatabaseDeploying Our ApplicationProject SetupDeploymentTestingConclusion
JavaScript and UIsDeclarative Interfaces with JavaScriptJust Enough ReactConclusion
What We’re BuildingHow We’re Going to Build ThisGetting StartedBuilding Out the Web ApplicationRoutingLinkingUI ComponentsConclusion
Creating a Layout ComponentCSSCSS-in-JSCreating a Button ComponentAdding Global StylesComponent StylesConclusion
Setting Up Apollo ClientQuerying an APISome StyleDynamic QueriesPaginationConclusion
Creating a Sign-up FormReact Forms and StatesignUp MutationJSON Web Tokens and Local StorageRedirectsAttaching Headers to RequestsLocal State ManagementLogging OutCreating a Sign-In FormProtected RoutesConclusion
Creating New NotesReading User NotesUpdating NotesDeleting NotesToggling FavoritesConclusion
Static WebsitesOur Deployment PipelineHosting Source Code with GitDeploy with NetlifyConclusion
What We’re BuildingHow We’re Going To Build ThisGetting StartedOur First Electron AppmacOS Application Window DetailsDeveloper ToolsThe Electron APIConclusion
Integrating Our Web ApplicationWarnings and ErrorsConfigurationContent Security PolicyConclusion
Electron BuilderConfiguring Electron BuilderBuild for Our Current PlatformApp IconsBuilding for Multiple PlatformsCode SigningConclusion
What We’re BuildingHow We’re Going To Build ThisGetting StartedConclusion
React Native Building BlocksStyle and Styled ComponentsStyled ComponentsRoutingTabbed Routing with React NavigationStack NavigationAdding Screen TitlesIconsConclusion
Creating List and Scrollable Content ViewsMaking a List RoutableGraphQL with Apollo ClientWriting GraphQL QueriesAdding a Loading IndicatorConclusion
Authentication Routing FlowCreating a Sign-in FormAuthentication with GraphQL MutationsAuthenticated GraphQL QueriesAdding a Sign-up FormConclusion
app.json ConfigurationIcons and App Loading ScreensApp IconsSplash ScreensExpo PublishCreating Native BuildsiOSAndroidDistributing to App StoresConclusion

Content preview from JavaScript Everywhere

Preface

The idea for this book came to me after writing my first Electron desktop application. Having made a career as a web developer, I was immediately smitten with the possibilities of using web technologies to build cross-platform applications. At the same time, React, React Native, and GraphQL were all taking off. I sought out resources to learn how all of these things fit together, but kept coming up short. This book represents the guide that I wished I had.

The ultimate goal of this book is to introduce the possibilities of using a single programming language, JavaScript, to build all sorts of applications.

Who This Book Is For

This book is for intermediate-level developers who have some experience with HTML, CSS, and JavaScript or ambitious beginners who are looking to learn the tools necessary to bootstrap a business or side project.

How This Book Is Organized

The book is designed to walk you through developing an example application for a variety of platforms. It can be broken down into the following sections:

Chapter 1 guides you through setting up a JavaScript development environment.
Chapters 2–10 cover building an API with Node, Express, MongoDB, and Apollo Server.
Chapters 11–25 review the details of building cross-platform user interfaces using React, Apollo, and a variety of tools. Specifically:
- Chapter 11 introduces user interface development and React.
- Chapters 12–17 demonstrate how to build a web application with React, Apollo Client, and CSS-in-JS. ...