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

Chapter 12. Building a Web Client with React

The original idea behind hypertext was to take related documents and link them together: if academic paper A references academic paper B let’s make it easy to click something and navigate between them. In 1989, a software engineer at CERN named Tim Berners-Lee had the idea to combine hypertext with networked computers, making it easy for someone to make these connections regardless of the location of the documents. Every cat photo, news article, tweet, streaming video, job search site, and restaurant review is indebted to the simple idea of globally linking documents.

At its heart, the web remains a medium for linking documents together. Each page is HTML, rendered in a web browser, with CSS for styling and JavaScript for enhancements. Today, we use these technologies to build everything from personal blogs and small brochure sites to complex interactive applications. The underlying advantage is that the web provides universal access. All anyone needs is a web browser on a web-connected device, creating an inclusive-by-default environment.

What We’re Building

In the upcoming chapters we’ll build the web client for our social note application, Notedly. Users will be able to create and sign in to an account, write notes in Markdown, edit their notes, view a feed of other users’ notes, and “favorite” other users’ notes. To accomplish all of this, we’ll be interacting with our GraphQL server API.

In our web application: