Pages

Articles

On This Page

Share Now!

Loading sharing buttons...
hide menu show menu

Idio Web Server

Idio is a professional web server based on Koa compiled with Closure Compiler down to 2 dependencies. It is created by Art Deco™, a Node.JS development company in London to enable rapid web development process with maximum efficiency. It has all middleware necessary to make modern full-stack services, including back-end routes and front-end components.

Check out GitHub README and Wiki for more information.

A bare Koa server consists of 43 dependencies, and when installing all middleware required for an essential web server, this number can go up to 150 and higher. We've completely rewritten Koa, its components and middleware into ES6 to produce Idio — a state of art webserver, type-checked and optimised with Closure Compiler. We left only 2 dependencies: mime-db and text-decoding that contain databases of mime types and encoding tables. This means that the installation time is minimal, and there's absolutely no rubbish in your node_modules directory.

Please bear one moment while we add more content

section break

Middleware

There are a number of middleware functions that were included in the bundle.

  • Static: to serve static files from the server.
  • Session: to maintain cookes on users' machines that record session information.
  • CORS: to add the correct Origin header for cross origin requests.
  • Compression: to make sure that responses are compressed with GZIP algorithm.
  • File Upload: to handle multipart/form data for file uploads and forms submissions.
  • Front End: to allow to develop browser applications without any additional build tools (see below).

section break

Router

The router is one of the most important parts of the server, that allows you to specify which pages are served at which paths, as well as configuring middleware for routes as well as subroutes, therefore Idio simply returns its instance when you start a server.

import idio, { Router } from '@idio/idio'

(async () => {
  const {
    url, router, app, middleware: { pre, post, jsonBody },
  } = await idio({
    // 1. Configure middlewares without installing them.
    jsonBody: {},
    jsonErros: {},
  })

  // 2. Setup API router.
  const api = new Router()
  api.post('/example',
    jsonErrors, // send errors as json
    jsonBody,   // parse incoming body
    (ctx) => {
      ctx.body = {
        ok: true,
        request: ctx.request.body,
      }
    },
  )
  // 3. Configure main router.
  router.use('/api', api.routes())
  router.get('/', (ctx) => {
    ctx.body = 'hello world'
  })
  app.use(router.routes())
  return url
})()

section break

Front End

With Idio, developing front-end is very easy, because of the front-end middleware that can serve node_modules, update JSX on-the-fly and provide hot reload for ES6 modules. You can simply create you client applications using the latest browser, and then compile them for production with Closure, that will change the code into ES5 understandable by older browsers. Check out this article: Web Development With NodeTools.

Front end makes simply makes sure that JS files you've written for the browser can be accessed via the server. Because modern browsers understand latest language features as well as import statements, there's no need to create bulky set ups and complex build processes that you can't even understand. All that is happening, is that JS you wrote, is served to the browser with a few adjustments like renaming package into into their resolved paths. As simple as that.

// src:
import fetch from 'unfetch'
// becomes:
import fetch from '/node_modules/unfetch/src/unfetch.mjs'

fetch('/hello.txt')

Front End supports JSX syntax also so that Preact applications can be developed easily. There's also hot reload that will re-render the interface when the source code of components (both classes and stateless) changes, preserving their state. Consult Pure Hot Reload to understand how our simple HR works.

import { render, Component } from 'preact'

class App extends Component {
  render() {
    return (<div>Hello World!</div>)
  }
}

const app = <App />
const a = render(app, window.container)

/* IDIO HOT RELOAD */
window['idioAddHotReload'] && window['idioAddHotReload'](() => {
  render(app, window.container, a)
})

Such applications can then be compiled with Closure and served as static bundles either from CDN, or the server itself.

READ WIKI

section break

Server-Side Rendering

We believe that JSX is an essential part of JavaScript for web development. It's the most natural approach to programming for the web that requires templating. JSX is so good because it's JavaScript that can be used for marking up HTML code, and not some static HTML with parts that indicate dynamic content (e.g., like Handlebars). There's no better way to create dynamic web pages in Node.JS than with JSX, and Idio acknowledges that by providing a method to render JSX components.

import { render } from '@idio/idio'

/**
 * @type {import('@idio/idio').Middleware}
 */
export default function route(ctx) {
  ctx.body = render(<html>
    <body>
      <h1>Hello World!</h1>
    </body>
  </html>)
}

Behind the scenes, SSR is using Preact 8 for rendering, so you need to install preact@8.5.3. The latest version of Preact is 10, however the API for static rendering is not compatible yet.

section break