Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@vslinko
vslinko committed May 17, 2023
1 parent 8b491a3 commit f6c84f2
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/en/posts/2015-07-27-router-1.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html><html class=page itemscope itemtype=https://schema.org/BlogPosting lang=en><meta charset=utf-8><title>Isomorphic router in functional paradigm — Blog — Viacheslav Slinko's website</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-SLC8Y1N2JK"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-SLC8Y1N2JK");</script><meta content="width=device-width,initial-scale=1" name=viewport><link href=/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link href=/safari-pinned-tab.svg rel=mask-icon color=#5bbad5><meta content=#2d89ef name=msapplication-TileColor><meta content=#ffffff name=theme-color><link href=/css/normalize.css rel=stylesheet><link href=/css/screen.css rel=stylesheet><link href=https://mastodon.social/@vslinko rel=me><meta content="In this article I'll try to describe and implement a simple isomorphic router using functional paradigm principles." name=description><link href=/en/posts/2015-07-27-router-1.html rel=canonical><link href=/posts/rss.xml rel=alternate type=application/rss+xml title="Viacheslav Slinko's Blog"><link href=/css/hljs-a11y-dark.css rel=stylesheet media=""><link href=/css/hljs-a11y-light.css rel=stylesheet media=""><body class=page__body><article class=article><h1 class=header itemprop=headline>Isomorphic router in functional paradigm</h1><section class=article__content itemprop=articleBody><p>Recently, the functional paradigm has become more popular in the frontend community and elsewhere. I think it's wonderful because functions are much easier to write and test, this gives us more maintainable codebase, and we all know that maintenance is a pain. I won't describe the functional paradigm in depth, but I'll use its principles. If you want to read about functional programming then you could read the article, <a href=http://www.defmacro.org/ramblings/fp.html rel=noopener target=_blank>Functional Programming For The Rest of Us</a> and watch the slides, <a href=http://scott.sauyet.com/Javascript/Talk/FunctionalProgramming/ rel=noopener target=_blank>Functional Programming</a>.<p>In addition to functional paradigm, the frontend community is developing ideas about isomorphic code and isomorphic applications. In short, isomorphic code runs on both sides, client and server. The pros are obvious — you can use the same code on both platforms and not repeat yourself.<p>To describe the meaning of isomorphic applications I should tell you about the main problem of modern client-side web applications. These days everyone owns some type of mobile device but the cellular network isn't good enough, which makes developers think about performance and interactivity. Loading time can be optimized on classic websites but they are not interactive enough. The opposite is true of web applications, which are much more interactive but have a long initialization process.<p>These problems are solved in isomorphic applications. Using isomorphic code, the server could initialize an instance of the client application for every request. This means that the server can send a pre-rendered application screen to the client and the client could show it to the user while other resources are still loading. After all resources have been loaded by the client, it could initialize its own instance of the application and replace the screen without the user knowing.<p>In this article series I'll try to describe and implement a simple isomorphic router using functional paradigm principles. My experience as a functional API architect isn't extensive, so I consider this an experiment.<p>I choose router because it's an important and integral part of any modern client-side web application. Most popular frameworks provide their own routers out of the box, but these routers usually aren't simple. I'll try to implement a simple and extendible router at the same time.<p>I'll use the awesome static type checker, <a href=http://flowtype.org/ rel=noopener target=_blank>Flow</a>, and all of the new ECMAScript features available in <a href=https://babeljs.io/ rel=noopener target=_blank>Babel</a>.<hr><h2 id=part-1--definitions>Part 1 — Definitions</h2><p>Before implementation I should define what the router does and the individual router parts. It's really simple — the router transforms some URL into an action which changes the current screen of application. This action is usually called a <em>transition</em>. A transition could be asynchronous if the new screen depends on some data on a server. At the same time, a transition can't return a new screen if the URL isn't valid for it.<pre><code class="hljs language-js">type <span class="hljs-title class_">Transition</span> = <span class=hljs-function>(<span class=hljs-params>url: Url</span>) =></span> <span class="hljs-title class_">Promise</span>&lt;?<span class="hljs-title class_">Screen</span>></code></pre><p>The URL is just a string, but what is a screen? I don't want to depend on any framework or template engine so in my case, a screen could be any object.<pre><code class="hljs language-js">type <span class="hljs-title class_">Url</span> = string
<!doctype html><html class=page itemscope itemtype=https://schema.org/BlogPosting lang=en><meta charset=utf-8><title>Isomorphic router in functional paradigm — Blog — Viacheslav Slinko's website</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-SLC8Y1N2JK"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-SLC8Y1N2JK");</script><meta content="width=device-width,initial-scale=1" name=viewport><link href=/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link href=/safari-pinned-tab.svg rel=mask-icon color=#5bbad5><meta content=#2d89ef name=msapplication-TileColor><meta content=#ffffff name=theme-color><link href=/css/normalize.css rel=stylesheet><link href=/css/screen.css rel=stylesheet><link href=https://mastodon.social/@vslinko rel=me><meta content="In this article I'll try to describe and implement a simple isomorphic router using functional paradigm principles." name=description><link href=/en/posts/2015-07-27-router-1.html rel=canonical><link href=/posts/rss.xml rel=alternate type=application/rss+xml title="Viacheslav Slinko's Blog"><style>@import url(/css/hljs-a11y-light.css)(prefers-color-scheme:light);@import url(/css/hljs-a11y-dark.css)(prefers-color-scheme:dark);</style><body class=page__body><article class=article><h1 class=header itemprop=headline>Isomorphic router in functional paradigm</h1><section class=article__content itemprop=articleBody><p>Recently, the functional paradigm has become more popular in the frontend community and elsewhere. I think it's wonderful because functions are much easier to write and test, this gives us more maintainable codebase, and we all know that maintenance is a pain. I won't describe the functional paradigm in depth, but I'll use its principles. If you want to read about functional programming then you could read the article, <a href=http://www.defmacro.org/ramblings/fp.html rel=noopener target=_blank>Functional Programming For The Rest of Us</a> and watch the slides, <a href=http://scott.sauyet.com/Javascript/Talk/FunctionalProgramming/ rel=noopener target=_blank>Functional Programming</a>.<p>In addition to functional paradigm, the frontend community is developing ideas about isomorphic code and isomorphic applications. In short, isomorphic code runs on both sides, client and server. The pros are obvious — you can use the same code on both platforms and not repeat yourself.<p>To describe the meaning of isomorphic applications I should tell you about the main problem of modern client-side web applications. These days everyone owns some type of mobile device but the cellular network isn't good enough, which makes developers think about performance and interactivity. Loading time can be optimized on classic websites but they are not interactive enough. The opposite is true of web applications, which are much more interactive but have a long initialization process.<p>These problems are solved in isomorphic applications. Using isomorphic code, the server could initialize an instance of the client application for every request. This means that the server can send a pre-rendered application screen to the client and the client could show it to the user while other resources are still loading. After all resources have been loaded by the client, it could initialize its own instance of the application and replace the screen without the user knowing.<p>In this article series I'll try to describe and implement a simple isomorphic router using functional paradigm principles. My experience as a functional API architect isn't extensive, so I consider this an experiment.<p>I choose router because it's an important and integral part of any modern client-side web application. Most popular frameworks provide their own routers out of the box, but these routers usually aren't simple. I'll try to implement a simple and extendible router at the same time.<p>I'll use the awesome static type checker, <a href=http://flowtype.org/ rel=noopener target=_blank>Flow</a>, and all of the new ECMAScript features available in <a href=https://babeljs.io/ rel=noopener target=_blank>Babel</a>.<hr><h2 id=part-1--definitions>Part 1 — Definitions</h2><p>Before implementation I should define what the router does and the individual router parts. It's really simple — the router transforms some URL into an action which changes the current screen of application. This action is usually called a <em>transition</em>. A transition could be asynchronous if the new screen depends on some data on a server. At the same time, a transition can't return a new screen if the URL isn't valid for it.<pre><code class="hljs language-js">type <span class="hljs-title class_">Transition</span> = <span class=hljs-function>(<span class=hljs-params>url: Url</span>) =></span> <span class="hljs-title class_">Promise</span>&lt;?<span class="hljs-title class_">Screen</span>></code></pre><p>The URL is just a string, but what is a screen? I don't want to depend on any framework or template engine so in my case, a screen could be any object.<pre><code class="hljs language-js">type <span class="hljs-title class_">Url</span> = string
type <span class="hljs-title class_">Screen</span> = <span class="hljs-title class_">Object</span></code></pre><p>The router itself is a system that can push notifications about screen changes and can be notified about URL changes. It's very similar to <em>Observable</em> behavior that is implemented in the <a href=https://github.com/Reactive-Extensions/RxJS rel=noopener target=_blank>RxJS</a> library, but I don't want complicate my router, so I just define a simple subscribe API.<pre><code class="hljs language-js">type <span class="hljs-title class_">Listener</span>&lt;T> = <span class=hljs-function>(<span class=hljs-params>value: ?T</span>) =></span> <span class=hljs-keyword>void</span>
type <span class="hljs-title class_">Subscriber</span>&lt;T> = <span class=hljs-function>(<span class=hljs-params>listener: Listener&lt;T></span>) =></span> <span class="hljs-title class_">Unsubscriber</span>
type <span class="hljs-title class_">Unsubscriber</span> = <span class=hljs-function>() =></span> <span class=hljs-keyword>void</span>
Expand Down
Loading

0 comments on commit f6c84f2

Please sign in to comment.