Book Image

Isomorphic JavaScript Web Development

By : Tomas Alabes, Konstantin Tarkus
Book Image

Isomorphic JavaScript Web Development

By: Tomas Alabes, Konstantin Tarkus

Overview of this book

<p>The latest trend in web development, Isomorphic JavaScript, allows developers to overcome some of the shortcomings of single-page applications by running the same code on the server as well as on the client. Leading this trend is React, which, when coupled with Node, allows developers to build JavaScript apps that are much faster and more SEO-friendly than single-page applications.</p> <p>This book begins by showing you how to develop frontend components in React. It will then show you how to bind these components to back-end web services that leverage the power of Node. You'll see how web services can be used with React code to offload and maintain the application logic. By the end of this book, you will be able to save a significant amount of development time by learning to combine React and Node to code fast, scalable apps in pure JavaScript.</p>
Table of Contents (16 chapters)
Title Page
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Working with third-party libraries


When developing isomorphic apps you may bump into this issue when a third-party UI library that you need to include into your project does not support server-side rendering. If you try to include it in any of your React components, the ReacDOMServer.renderToString() will throw an exception when you try to render your app on the server. This often happens because a third-party library uses global variables such as window, document, and navigator, which is not available in the Node.js environment.

Often, rendering such components on the server doesn't give you much benefit. For example, it can be a WYSIWYG editor, an autocomplete box, and so on. Do you really need to pre-render that stuff on the server? If not, you just need to make sure that these components are referenced and initialized only on the client side.

The following is an example of a popular text editor codeMirrorintegrated into a React component:

classTextEditor extends Component { 
componentDidMount...