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 18. Desktop Applications with Electron

My introduction to personal computers was in a school lab full of Apple II machines. Once a week, my classmates and I were ushered into the room, handed some floppy disks, and given a rough set of instructions on how to load an application (typically Oregon Trail). I don’t remember much from these sessions other than feeling completely locked in to the little world I was now able to control. Personal computers have come a long way since the mid-1980s, but we still rely on desktop applications to perform many tasks.

On a typical day, I may access an email client, a text editor, a chat client, spreadsheet software, a music streaming service, and several more desktop applications. Oftentimes, these have a web application equivalent, but the convenience and integration of a desktop application can provide several user experience benefits. However, for years the ability to create these applications felt out of reach. Thankfully, today we are able to use web technologies to build fully featured desktop applications with a small learning curve.

What We’re Building

Over the next few chapters we’ll build a desktop client for our social note application, Notedly. Our goal is to use JavaScript and web technologies to develop a desktop application that a user can download and install on their computer. For now, this application will be a simple implementation that wraps our web application within a desktop application shell. Developing our app ...