Reactive Components without React

Slide deck for Indy.js meetup, March 20, 2019.

Recording (1h:22m): https://www.youtube.com/watch?v=0LfxfYmMazA

Description

Learn how to make web components without polyfills or frameworks. A few small libraries is all you need to cobble together robust solutions for lifecycle methods, rendering, data flow, and communication.

Chris Basham is a designer and front-end developer for Indiana University, specializing in functional reactive programming with RxJS.

Featured tools:

• React
• RxJS
• lighterhtml
• Conduit
• WhenElements

Install

1. Install dependencies to run demo slides (slides/*.js or slides/*.html). All demos have been tested in Chrome 72.

npm install

2. Install Visual Studio Code and the following plugins:

• GitHub Clean White Theme
• literally-html
• open in browser

3. Append to ~/.bash_profile for cleaner command line prompts.

export PS1='$ '

Tips

1. Command + Tab: Switch among windows (VSCode and browser).

2. Option + b: Open the selected *.html file in the browser.

3. Shift + Command + v: Preview the selected *.md file.

4. Right click > Open Preview: Preview the selected *.md file.

5. Control + [tick]: Open terminal.

References

• Visual Studio Code settings by André Staltz.
• Change bash prompt
• bash prompt config