什么是 "universal app"?
What is a "universal app"?
我一直在阅读有关 React 和 Redux 的文章,他们提到了 "universal apps"。例如:
"You’ll probably want a (de)serialization mechanism for writing universal apps and hydrating their state from the server..."
(From http://rackt.org/redux/docs/introduction/PriorArt.html)
什么是通用应用程序?
在此上下文中,通用应用程序是指那些能够根据情况在服务器或客户端呈现的 Web 应用程序。
有时也可以称为"isomorphic apps"。
更完整的解释来自https://www.npmjs.com/package/webpack-isomorphic-tools:
What is a web application? I would define it as a box with a bunch of
inputs (keyboard events, mouse events) and a display as an output. A
user walks into your website and your web application renders a "page"
on his display.
At first all the rendering used to happen on the server. But then
"AJAX" came (in 2005) and it opened a possibility of moving all
rendering logic to the client (user's web browser) leaving the server
with just serving API calls (data fetching, data modification, etc).
And so numerous javascript frameworks emerged to serve the purpose of
client side rendering and routing. But then everybody realised that
this new way of building web applications broke search engine indexing
because the search engines didn't talk any javascript.
Then the age of super-responsive websites came and also the iPhone
emerged and the battle for milliseconds began. And everybody noticed
that client side rendering introduced unnecessary data fetching
roundtrips on the first page load: the web browser loaded markup
templates and scripts first and then asked the server for the actual
data to display.
So it became obvious that web applications need to be "isomorphic"
("universal"), i.e. be able to render both on the client and the
server, depending on circumstances. It was quite manageable: one just
had to write the rendering logic in such a programming language that
is able to run both on client and server. One such language is
javascript.
如果您想了解这个概念(我指的是通用应用程序),您应该首先了解水疗应用程序的工作原理!!
水疗应用程序如何工作?
想象一个场景,我们有一个以 SPA 方式构建的 Web 应用程序!
在这样的应用程序中,当用户向服务器发送请求时,例如当 he/she 想要查看索引页面时,服务器 return 向客户端发送一个 html 页面,该页面不包含任何内容!!! (我的意思是它没有数据,你知道每个页面都是由 html 标签 + 数据和数据组成的,例如我们最近的博客文章或电子商务网站中的产品)
在 spa 中,当用户向服务器发送请求时,服务器 return html 页面没有数据,页面呈现后,您的应用程序向服务器发送 ajax 请求并获取这些数据(在我们上一篇博客的示例中帖子,好吗?)
水疗应用程序以这种方式工作!了解这些后,我们就可以了解通用应用程序的工作原理了吗?
通用应用程序如何工作?
通用应用程序像水疗应用程序一样工作,但这些应用程序会检查请求,但目的是什么?实际上他们想知道用户发送的请求是 him/her 第一次请求这个 url 还是不是?(我知道这很难描述所以让我用一个例子来描述它)
再想象一个场景,用户想看mysite.com/about页面,好吗?通用应用程序检查 url,如果 url 是用户第一次发送,通用应用程序将在服务器端呈现该页面(呈现带有标签和数据的页面,然后发送它到 client.okay?) 如果用户想在通用应用程序中再次查看有关页面,则在下一个请求中,此页面不会在服务器端呈现,实际上在下一个请求中,页面将在客户端呈现。
结论:
在通用应用程序中,第一个视图在服务器上动态呈现,并在第一次加载应用程序后转向 spa!
我一直在阅读有关 React 和 Redux 的文章,他们提到了 "universal apps"。例如:
"You’ll probably want a (de)serialization mechanism for writing universal apps and hydrating their state from the server..." (From http://rackt.org/redux/docs/introduction/PriorArt.html)
什么是通用应用程序?
在此上下文中,通用应用程序是指那些能够根据情况在服务器或客户端呈现的 Web 应用程序。
有时也可以称为"isomorphic apps"。
更完整的解释来自https://www.npmjs.com/package/webpack-isomorphic-tools:
What is a web application? I would define it as a box with a bunch of inputs (keyboard events, mouse events) and a display as an output. A user walks into your website and your web application renders a "page" on his display.
At first all the rendering used to happen on the server. But then "AJAX" came (in 2005) and it opened a possibility of moving all rendering logic to the client (user's web browser) leaving the server with just serving API calls (data fetching, data modification, etc).
And so numerous javascript frameworks emerged to serve the purpose of client side rendering and routing. But then everybody realised that this new way of building web applications broke search engine indexing because the search engines didn't talk any javascript.
Then the age of super-responsive websites came and also the iPhone emerged and the battle for milliseconds began. And everybody noticed that client side rendering introduced unnecessary data fetching roundtrips on the first page load: the web browser loaded markup templates and scripts first and then asked the server for the actual data to display.
So it became obvious that web applications need to be "isomorphic" ("universal"), i.e. be able to render both on the client and the server, depending on circumstances. It was quite manageable: one just had to write the rendering logic in such a programming language that is able to run both on client and server. One such language is javascript.
如果您想了解这个概念(我指的是通用应用程序),您应该首先了解水疗应用程序的工作原理!!
水疗应用程序如何工作?
想象一个场景,我们有一个以 SPA 方式构建的 Web 应用程序! 在这样的应用程序中,当用户向服务器发送请求时,例如当 he/she 想要查看索引页面时,服务器 return 向客户端发送一个 html 页面,该页面不包含任何内容!!! (我的意思是它没有数据,你知道每个页面都是由 html 标签 + 数据和数据组成的,例如我们最近的博客文章或电子商务网站中的产品) 在 spa 中,当用户向服务器发送请求时,服务器 return html 页面没有数据,页面呈现后,您的应用程序向服务器发送 ajax 请求并获取这些数据(在我们上一篇博客的示例中帖子,好吗?) 水疗应用程序以这种方式工作!了解这些后,我们就可以了解通用应用程序的工作原理了吗?
通用应用程序如何工作?
通用应用程序像水疗应用程序一样工作,但这些应用程序会检查请求,但目的是什么?实际上他们想知道用户发送的请求是 him/her 第一次请求这个 url 还是不是?(我知道这很难描述所以让我用一个例子来描述它)
再想象一个场景,用户想看mysite.com/about页面,好吗?通用应用程序检查 url,如果 url 是用户第一次发送,通用应用程序将在服务器端呈现该页面(呈现带有标签和数据的页面,然后发送它到 client.okay?) 如果用户想在通用应用程序中再次查看有关页面,则在下一个请求中,此页面不会在服务器端呈现,实际上在下一个请求中,页面将在客户端呈现。
结论: 在通用应用程序中,第一个视图在服务器上动态呈现,并在第一次加载应用程序后转向 spa!