Skip to content

Instantly share code, notes, and snippets.

Dean Radcliffe deanius

View GitHub Profile
@deanius
deanius / music-of-async-slides.md
Created Apr 9, 2019
Dupe of recent Music Slides pres
View music-of-async-slides.md

autoscale: true build-lists: true theme: Next

Orchestrating Async with RxJS Observables and Rx-Helper

Dean Radcliffe

t : @deaniusol

View monolog-script.md

The Monolog App, Implemented in Rx-Helper

Quick Links: Live App | Monolog Repo | Rx Helper Repo

To help you understand how Rx-Helper helps you write apps with:

  • Decoupled code
  • Error isolation
  • Simple-to-make and maintain non-blocking async code
View monolog.html
<!DOCTYPE html>
<html>
<head>
<title>Rx-Helper Event-Driven Apps Step-By-Step</title>
<meta charset="utf-8" />
<link
href="http://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
type="text/css"
/>
View web speech.js
// Browser based version of npm speak
function sayIt({ action, context }) {
const { text } = action.payload;
const { speechSynthesis, SpeechSynthesisUtterance } = context;
return new Observable(notify => {
var msg = new SpeechSynthesisUtterance();
msg.onend = function (e) {
notify.complete();
}
View monolog-intro.md

Rx-Helper - Web Development based on Events and Primitives; Not Frameworks.

If you were not around web development when Backbone came on the scene in 2010, let me tell you what a breath of fresh air it was! After 4 years of JQuery proliferation (2006), which ended the wars of Prototype (2005), MooTools and such, the promise of a New Order that the 2010-generation of web frameworks brought (including my beloved Knockout.js) was breathing hope into web developer's hearts. No longer would server-code like Rails (2005) need to control your front-end code!

But it was the dawn of new complexity as well. And soon build tools like Browserify (2011) would become a must, and JS Fatigue was setting in. To deal with that, we'd eventually form encampments around technologies that came with their own toolchains such as MeteorJS (2007), Angular (2010), Ember (2011), ReactJS (2013), and GraphQL (2015). We needed these build solutions - so what else could we do! Soon, few people moved between multiple of these techs, beca

View monologue.html
<!DOCTYPE html>
<html>
<head>
<title>Rx-Helper Event-Driven Apps Step-By-Step</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="https://monologue-js.herokuapp.com/style.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/antares-protocol/dist/antares-protocol.js"></script>
<script></script>
View angular.js
class AppComponent {
// Bind to this with userCardNumber.value
userCardNumber = new BehaviorSubject<String>();
// Bind to this with userCardNumber | async
userCardValues = this.userCardNumber.asObservable()
constructor() {
}
@deanius
deanius / await-what?.js
Created Jan 13, 2019
Where await can go wrong
View await-what?.js
//
async function() {
let likeCount = 0
for(let one of many) {
likeCount = likeCount + (await fetch(`/users/${one}`)).response.likes
}
console.log(`There are ${likeCount} likes.`)
}()
View rx-all-pipe.js
let download$ = fromEvent(document, "click", ".downloadable").pipe(
map(e => months[e.target.attribues["data-month"]]),
map(month => ({
type: "download/start",
payload: { file: month + ".csv" }
})))
agent.on("download/start", ({ action }) => {
const { filename } = action.payload
return ajax({ url: "download.php?file=" + filename }).pipe(
You can’t perform that action at this time.