ISOMORPHIC ARCHITECTURE

ISOMORPHIC ARCHITECTURE

• Reason not use single page web:

• - SEO Poor  SEO, cannot serve HTML to crawlers

• - Performance if the server doesn’t render a full page of HTML but instead waits for client-side JavaScript to do so

• - Maintainability

We want to serve fully-formed HTML from the server for performance and SEO, but we want the speed and flexibility of client-side application logic. To this end, we’ve been experimenting at Airbnb with “Isomorphic JavaScript” apps, which are JavaScript applications that can run both on the client-side and the server-side.

By creating the appropriate abstractions, we can write our application logic such that it runs on both the server and the client — the definition of isomorphic JavaScript.

Abstraction

• Routing handlers need to be able to access HTTP headers, cookies, and URI information, and specify redirects without directly accessing window.location (browser) or req and res (Node.js).
• Fetching and persisting data
• View rendering
• Building and packaging

react-native note

Feature

One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

virtual DOM

react element : lives in the virtual DOM

react component : has render function, and has state| no access to the virtual DOM




JSX （ JavaScript Syntax eXtension ， JavaScript 語法擴充）