Isomorphic Web Applications : Universal Development with React

You used to have two options for web app architecture: backend server-rendered in response to requests, or frontend browser-rendered, single page applications. Now you have a new choice: isomorphic apps, which let you take advantage of the best of both worlds. Isomorphic Development with JavaScript teaches web developers to build isomorphic web applications using JavaScript, NodeJS, and React. By the end, they’ll be able to build a high performance content site that will support their users' needs and their SEO goals. KEY FEATURES Hands-on examples Teaches isomorphic app basics Easy-to-follow ABOUT THE TECHNOLOGY An isomorphic app is a web app that blends a server-rendered web app with a single-page application. AUTHOR BIO Elyse Kolker Gordon has been building web applications for five years and is a Technical Lead at Vevo, where she solves challenges with isomorphic apps every day. She writes technical articles and speaks about JavaScript at meetups and conferences. In her free time, she plays the drums and travels. SummaryIsomorphic Web Applications teaches you to build production-quality web apps using isomorphic architecture. Designed for working developers, this book offers examples in relevant frameworks like React, Redux, Angular, Ember, and webpack.Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.About the TechnologyBuild secure web apps that perform beautifully with high, low, or no bandwidth. Isomorphic web apps employ a pattern that exploits the full stack, storing data locally and minimizing server hits. They render flawlessly, maximize SEO, and offer opportunities to share code and libraries between client and server.About the BookIsomorphic Web Applications teaches you to build production-quality web apps using isomorphic architecture. You'll learn to create and render views for both server and browser, optimize local storage, streamline server interactions, and handle data serialization. Designed for working developers, this book offers examples in relevant frameworks like React, Redux, Angular, Ember, and webpack. You'll also explore unique debugging and testing techniques and master specific SEO skills. What's InsideControlling browser and server user sessions Combining server-rendered and SPA architecturesBuilding best-practice React applicationsDebugging and testingAbout the ReaderTo benefit from this book, readers need to know JavaScript, HTML5, and a framework of their choice, including React and Angular.About the AuthorElyse Kolker Gordon runs the growth engineering team at Strava. Previously, she was director of web engineering at Vevo, where she regularly solved challenges with isomorphic apps.Table of ContentsPART 1 - FIRST STEPSIntroduction to isomorphic web application architectureA sample isomorphic appPART 2 - ISOMORPHIC APP BASICSReact overviewApplying ReactTools: webpack and BabelReduxPART 3 - ISOMORPHIC ARCHITECTUREBuilding the serverIsomorphic view renderingTesting and debuggingHandling server/browser differences 203Optimizing for productionPART 4 - APPLYING ISOMORPHIC ARCHITECTURE WITH OTHER TOOLSOther frameworks: implementing isomorphic without ReactWhere to go from here You used to have two options for web app architecture: backend server-rendered in response to requests, or frontend browser-rendered, single page applications. Now you have a new choice: isomorphic apps, which let you take advantage of the best of both worlds. They render the HTML page on the server, deliver rendered markup to the browser, and behave like a single page application in the browser. You get server rendering benefits such as SEO-compatible stacks, fast page loads, improved performance, and the ability to take advantage of caching. And you get single page application advantages including no server interaction after the initial load, common UX patterns like modals, and fast response to user interactions. Node and React make isomorphic apps practical and simpler to build. Now you can write code that runs on the server and the client as well as effectively executing the handoff from the server to the client. Isomorphic Development with JavaScript teaches web developers to build isomorphic web applications using JavaScript, NodeJS, and React. You'll begin by learning the difference between isomorphic, single page, and server rendered web applications as well as the advantages and challenges of isomorphic web applications. Then you'll get hands-on and build an isomorphic web application. You'll learn how to render views, fetch data with Redux, handle requests on the server, and serialize and deserialize data. This book covers isomorphic app basics, like React, Redux and Webpack. The last part shows you how to apply isomorphic architecture with frameworks like Angular 2 and Ember. By the end, you'll be able to build a high performance content site that will support your users' needs and your SEO goals. Copyright Brief Table of Contents Table of Contents Preface Acknowledgments About this book About the author About the cover illustration Part 1. First steps Chapter 1. Introduction to isomorphic web application architecture Chapter 2. A sample isomorphic app Part 2. Isomorphic app basics Chapter 3. React overview Chapter 4. Applying React Chapter 5. Tools: webpack and Babel Chapter 6. Redux Part 3. Isomorphic architecture Chapter 7. Building the server Chapter 8. Isomorphic view rendering Chapter 9. Testing and debugging Chapter 10. Handling server/browser differences Chapter 11. Optimizing for production Part 4. Applying isomorphic architecture with other tools Chapter 12. Other frameworks: implementing isomorphic without React Chapter 13. Where to go from here Appendix A. React Router 4 basics Appendix B. Server-side React Router Appendix C. Additional React Router 4 use cases Isomorphic application flow Best practices for isomorphic web applications Index List of Figures List of Tables List of Listings Build secure web apps that perform beautifully with high, low, or no bandwidth. Isomorphic web apps employ a pattern that exploits the full stack, storing data locally and minimizing server hits. They render flawlessly, maximize SEO, and offer opportunities to share code and libraries between client and server. This book teaches you to build production-quality web apps using isomorphic architecture. You'll learn to create and render views for both server and browser, optimize local storage, streamline server interactions, and handle data serialization. Designed for working developers, this book book offers examples in relevant frameworks like React, Redux, Angular, Ember, and webpack. You'll also explore unique debugging and testing techniques and master specific SEO skills