Bless You My dev

A Short History of Web Dev

• 2001: Prototype, Scriptaculo·us, Mootools
• 2005: jQuery
• 2010: SPA/Backbone
• 2012: Angular
• 2015: virtual-dom, React, Vue.js
• 2018: PWA

The Power of PWA

• Optimized Cache
• Offline Support
• Advanced APIs
• System Permissions
• Installables

• Progressive web apps (PWAs) - MDN

The Web Platform, Browserless

• Electron
• React Native/NativeScript
• NW.js
• WebVR

• WebVR API

The IoT Promise

• Advanced features
  • Memory management
  • MQTT support
  • Host-Client model
  • Event-driven
• JerryScript / IoT.js
• Johnny-Five
• Tessel micro-controller

• MQTT - The Standard for IoT Messaging

The Importance of Monitoring

• GoAccess - Visual Web Log Analyzer

Introducing TUi

• NCURSES
• Notcurses

TUi… but JavaScript.ed!

• Neo-blessed

react-blessed:
ASCII for React

• Yomguithereal/react-blessed: A react renderer for blessed

Blessed w/ React

import React, {Component} from 'react';
import blessed from 'blessed';
import {render} from 'react-blessed';

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: 'react-blessed hello world'
});

Manage Layouts

class App extends Component {
  render() {
    return (
      <box top="center"
           left="center"
           width="50%"
           height="50%"
           border={{type: 'line'}}>
        Hello World!
      </box>
    );
  }
}

const component = render(<App />, screen);

Widget Compositing

class Progress extends Component {
  render() {
    const {progress} = this.state
          label = `Progress - ${progress}%`

    return (
      <box {...attrs}>
        <box align="center">
          {label}
        </box>
        <progressbar style={{bar: {bg: this.state.color}}}
                     filled={progress} />
      </box>
    );
  }
}

Events Interaction

screen.key(['escape', 'q', 'C-c'], function(ch, key) {
  return process.exit(0);
});

<progressbar style={{bar: {bg: this.state.color}}}
             onComplete={() => this.setState({color: 'green'})}
             filled={progress} />

Prompts and Forms

componentDidMount() {
  this.refs.input.key(['enter'], (ch, key) => {
    this.refs.input.submit()
  })
}
render() {
  return (
    <box>
      <list height="90%"
            items={{this.state.items}} />
      <textarea height="10%" bottom="0"
                ref="input"
                onSubmit={() => this.addItem(this.refs.input.getValue())}
                onAction={() => this.refs.input.clearValue()} />
    </box>
  );
}

Large Widgets Collection

• Boxes
• Lists
• Forms
• Prompts
• Table, Logs

Advanced:
Choose your own renderer

import React, {Component} from 'react';
import blessed from 'neo-blessed';
import {createBlessedRenderer} from 'react-blessed';

const render = createBlessedRenderer(blessed);