JavaScript Everywhere Building Cross-Platform Applications with GraphQL, React, React Native, and Electron (Adam Scott) (Z-Library)

📄 File Format: PDF

💾 File Size: 9.2 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

Adam D. Scott JavaScript Everywhere Building Cross-Platform Applications with GraphQL, React, React Native, and Electron

📄 Page 2

(This page has no text content)

📄 Page 3

Praise for JavaScript Everywhere JavaScript Everywhere is an incredible book that will give you everything you need to build applications with JavaScript on any platform. The title is the truth: JavaScript is everywhere, and this book performs the unique feat of putting everything in context for developers at all levels. Read this book then write code and make technology decisions with confidence. —Eve Porcello, Software Developer and Instructor at Moon Highway JavaScript Everywhere is the perfect companion for navigating the ever-changing modern JavaScript ecosystem. Adam teaches React, React Native, and GraphQL in a clear, approachable way so you can build robust web, mobile, and desktop applications. —Peggy Rayzis, Engineering Manager at Apollo GraphQL

📄 Page 4

(This page has no text content)

📄 Page 5

Adam D. Scott JavaScript Everywhere Building Cross-Platform Applications with GraphQL, React, React Native, and Electron Boston Farnham Sebastopol TokyoBeijing

📄 Page 6

978-1-492-04698-1 [LSI] JavaScript Everywhere by Adam D. Scott Copyright © 2020 Adam D. Scott. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Jennifer Pollock Development Editor: Angela Rufino Production Editor: Christopher Faucher Copyeditor: Rachel Monaghan Proofreader: Christina Edwards Indexer: WordCo Indexing Services, Inc. Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Rebecca Demarest February 2020: First Edition Revision History for the First Edition 2020-02-06: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781492046981 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. JavaScript Everywhere, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author, and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

📄 Page 7

For my dad, who both brought home my first hacked-together computer and proofread every paper that I wrote. I wouldn’t be here without you. You are missed.

📄 Page 8

(This page has no text content)

📄 Page 9

Table of Contents Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv 1. Our Development Environment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Your Text Editor 2 The Terminal 2 Using a Dedicated Terminal Application 2 Using VSCode 2 Navigating the Filesystem 2 Command-Line Tools and Homebrew (Mac Only) 3 Node.js and NPM 4 Installing Node.js and NPM for macOS 4 Installing Node.js and NPM for Windows 5 MongoDB 5 Installing and Running MongoDB for macOS 6 Installing and Running MongoDB for Windows 6 Git 6 Expo 7 Prettier 7 ESLint 8 Making Things Look Nice 8 Conclusion 8 2. API Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 What We’re Building 9 How We’re Going to Build This 10 Getting Started 11 vii

📄 Page 10

Conclusion 12 3. A Web Application with Node and Express. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Hello World 13 Nodemon 14 Extending Port Options 15 Conclusion 16 4. Our First GraphQL API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Turning Our Server into an API (Sort Of) 17 GraphQL Basics 21 Schemas 21 Resolvers 23 Adapting Our API 23 Conclusion 30 5. Database. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Getting Started with MongoDB 32 Connecting MongoDB to Our Application 34 Reading and Writing Data from Our Application 37 Conclusion 44 6. CRUD Operations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Separating Our GraphQL Schema and Resolvers 45 Writing Our GraphQL CRUD Schema 49 CRUD Resolvers 49 Date and Time 51 Conclusion 53 7. User Accounts and Authentication. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Application Authentication Flow 55 Encryption and Tokens 56 Encrypting Passwords 57 JSON Web Tokens 58 Integrating Authentication into Our API 59 User Schemas 59 Authentication Resolvers 61 Adding the User to the Resolver Context 64 Conclusion 67 8. User Actions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Before We Get Started 69 viii | Table of Contents

📄 Page 11

Attach a User to New Notes 70 User Permissions for Updates and Deletes 72 User Queries 73 Toggling Note Favorites 76 Nested Queries 80 Conclusion 82 9. Details. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Web Application and Express.js Best Practices 83 Express Helmet 83 Cross-Origin Resource Sharing 84 Pagination 84 Data Limitations 87 Other Considerations 88 Testing 88 Subscriptions 88 Apollo GraphQL Platform 88 Conclusion 89 10. Deploying Our API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Hosting Our Database 91 Deploying Our Application 97 Project Setup 97 Deployment 99 Testing 100 Conclusion 100 11. User Interfaces and React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 JavaScript and UIs 102 Declarative Interfaces with JavaScript 103 Just Enough React 103 Conclusion 108 12. Building a Web Client with React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 What We’re Building 109 How We’re Going to Build This 110 Getting Started 110 Building Out the Web Application 112 Routing 114 Linking 117 UI Components 118 Conclusion 120 Table of Contents | ix

📄 Page 12

13. Styling an Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Creating a Layout Component 121 CSS 124 CSS-in-JS 124 Creating a Button Component 125 Adding Global Styles 127 Component Styles 129 Conclusion 132 14. Working with Apollo Client. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Setting Up Apollo Client 136 Querying an API 138 Some Style 146 Dynamic Queries 148 Pagination 150 Conclusion 152 15. Web Authentication and State. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Creating a Sign-up Form 153 React Forms and State 157 signUp Mutation 158 JSON Web Tokens and Local Storage 161 Redirects 162 Attaching Headers to Requests 162 Local State Management 163 Logging Out 166 Creating a Sign-In Form 168 Protected Routes 173 Conclusion 175 16. Create, Read, Update, and Delete Operations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Creating New Notes 177 Reading User Notes 183 Updating Notes 186 Deleting Notes 193 Toggling Favorites 195 Conclusion 199 17. Deploying a Web Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Static Websites 201 Our Deployment Pipeline 203 Hosting Source Code with Git 203 x | Table of Contents

📄 Page 13

Deploy with Netlify 205 Conclusion 206 18. Desktop Applications with Electron. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 What We’re Building 207 How We’re Going To Build This 208 Getting Started 208 Our First Electron App 209 macOS Application Window Details 211 Developer Tools 211 The Electron API 213 Conclusion 213 19. Integrating an Existing Web Application with Electron. . . . . . . . . . . . . . . . . . . . . . . . . . 215 Integrating Our Web Application 215 Warnings and Errors 216 Configuration 218 Content Security Policy 219 Conclusion 222 20. Electron Deployment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Electron Builder 223 Configuring Electron Builder 224 Build for Our Current Platform 225 App Icons 225 Building for Multiple Platforms 226 Code Signing 226 Conclusion 227 21. Mobile Applications with React Native. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 What We’re Building 230 How We’re Going To Build This 230 Getting Started 231 Conclusion 234 22. Mobile Application Shell. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 React Native Building Blocks 235 Style and Styled Components 237 Styled Components 240 Routing 242 Tabbed Routing with React Navigation 242 Stack Navigation 245 Table of Contents | xi

📄 Page 14

Adding Screen Titles 249 Icons 251 Conclusion 253 23. GraphQL and React Native. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Creating List and Scrollable Content Views 256 Making a List Routable 261 GraphQL with Apollo Client 263 Writing GraphQL Queries 264 Adding a Loading Indicator 269 Conclusion 271 24. Mobile Application Authentication. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Authentication Routing Flow 273 Creating a Sign-in Form 282 Authentication with GraphQL Mutations 287 Authenticated GraphQL Queries 289 Adding a Sign-up Form 293 Conclusion 299 25. Mobile Application Distribution. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 app.json Configuration 301 Icons and App Loading Screens 303 App Icons 303 Splash Screens 304 Expo Publish 305 Creating Native Builds 306 iOS 307 Android 307 Distributing to App Stores 308 Conclusion 308 Afterword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 A. Running the API Locally. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 B. Running the Web App Locally. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 xii | Table of Contents

📄 Page 15

Foreword In 1997 I was a junior in high school. A friend and I were goofing around with the web-connected computer in our school library when he showed me that you could click View → Source to see the underlying code of a web page. A few days later, another friend showed me how to publish my own HTML. My mind was blown. After that, I was hooked. I went around borrowing the bits of the websites I liked to construct my own Franken-site. I spent much of my free time at the pieced-together computer in my family’s dining room tinkering away. I even “wrote” (OK, copied and pasted) my first JavaScript, to implement hover styles on links, which was not yet doable with simple CSS. And in a turn of events that I’ve come to think of as a nerdy and wholesome version of the film Almost Famous, my homegrown music site gained reasonable popularity. Because of this, I received promotional CDs in the mail and was put on the guest list at concerts. More important to me, however, was that I was sharing my interests with other people around the world. I was a bored suburban teenager, in love with music, and was able to reach people I’d never meet. That was, and still is, such an empower‐ ing feeling. Today, we can build powerful applications using only web technologies, but it can be daunting to get started. APIs are an invisible background that serves up data. View → Source shows concatenated and minified code. Authentication and security are mysti‐ fying. Putting all of these things together can be overwhelming. If we’re able to look beyond these confusing details, we may notice that the same technologies I was fid‐ dling with 20-some years ago can now be used to build powerful web applications, code native mobile applications, create powerful desktop applications, design 3D ani‐ mations, and even program robots. xiii

📄 Page 16

As an educator, I’ve found that many of us learn best by building new things, taking them apart, and adapting them for our own use cases. That is the goal of this book. If you know some HTML, CSS, and JavaScript but are unsure of how to take those com‐ ponents and build the robust applications that you’ve dreamed up, this book is for you. I’ll guide you through building an API that can power the user interfaces of a web application, a native mobile application, and a desktop application. Most impor‐ tantly, you’ll gain an understanding of how all of these pieces fit together so that you can build and create wonderful things. I can’t wait to see what you make. — Adam xiv | Foreword

📄 Page 17

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 possi‐ bilities 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 repre‐ sents the guide that I wished I had. The ultimate goal of this book is to introduce the possibilities of using a single pro‐ gramming 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. xv

📄 Page 18

— Chapters 18–20 guide you through building simple Electron applications. — Chapters 21–25 introduce using React Native and Expo to build mobile appli‐ cations for iOS and Android. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. This element signifies a general note. This element indicates a warning or caution. xvi | Preface

📄 Page 19

Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/javascripteverywhere. If you have a technical question or a problem using the code examples, please send email to bookquestions@oreilly.com. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “JavaScript Everywhere by Adam D. Scott (O’Reilly). Copyright 2020 Adam D. Scott, 978-1-492-04698-1.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. O’Reilly Online Learning For more than 40 years, O’Reilly Media has provided technol‐ ogy and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, conferences, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in- depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, please visit http://oreilly.com. Preface | xvii

📄 Page 20

How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at https://oreil.ly/javascript-everywhere. Email bookquestions@oreilly.com to comment or ask technical questions about this book. For more information about our books, courses, conferences, and news, see our web‐ site at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Acknowledgments Thanks to all of the wonderful people at O’Reilly, past and present, who have been universally welcoming and open to my ideas over the years. I want to particularly thank my editor, Angela Rufino, who has given me feedback, encouragement, and lots of helpful reminders. I want to also thank Mike Loukides, who has provided me with both caffeine and great conversation. Lastly, thanks to Jennifer Pollock, for her support and encouragement. I am eternally grateful for the open source community, from which I have learned and benefited. Without the individuals and organizations who have created and maintained the many libraries I have written about, this book would not be possible. Several technical reviewers helped make this book better, ensuring that things were accurate. Thank you, Andy Ngom, Brian Sletten, Maximiliano Firtman, and Zeeshan Chawdhary. It’s a heck of a code review to undertake and I sincerely appreciate their efforts. Special thanks goes to my long-time colleague and friend, Jimmy Wilson, who I called in at the 11th hour to review and provide feedback. It was a lot to ask, but as with everything he does, he took it on with gusto. This book wouldn’t be what it is without his help. xviii | Preface