Hyperapp: Gestures for Hyperapp

[rbiggs]

So... I've been doing mobile web dev since 2005. Ugh, them were dark times. Then the iPhone launched in 2007 and things got better. As part of the many mobile projects that I've worked on, I've created a module that adds gestures using a jQuery-compatible interface that works identically on desktop and mobile. It provides the following gestures: tap (200 ms delay to allow the start of scrolling), long tap, double tap, swipe left, swipe right, swipe up and swipe down. Currently it weighs in at 2kb minified compared to HammerJS at 45kb minified. 😱 Considering that Hyperapp minified is only 4kb, MC Hammer gonna have take a hike. Would you guys be interested in a port of my gesture module so that it would work with Hyperapp? You could do an import and then maybe use it like this, I'm thinking:

<button onmousedown={actions.add}>+</button>
effects: {
// Define gesture and call to execute:
  add _ => createGesture('tap', callback)
}

Interested to hear how you guys think that could/should be implemented.

[jorgebucaran]

@rbiggs Would you guys be interested in a port of my gesture module so that it would work with Hyperapp?

Nice! Yes, of course. Something like hyperapp-tap?

[FlorianWendelborn]

hypertap

[rbiggs]

he he, sounds good. So I actually have it basically done. Weighs in a 2kb minified. I've tested it on desktop, Android - Xaomi Phone & Motorla Nexus and an iPhone 7. Gives you tap (150ms delay), longtap (750ms delay), doubletap, swipeleft, swiperight, swipeup and swipedown.

[rbiggs]

hyperyap!

[rbiggs]

Well, so far i've only tested this with plain Jane JavaScript and DOM. I've got to see how I get this working with Hyperapp. The thing I need to see how to get around is the dependence on inline on-events. You can just put an ontap event on an element and expect it to work like an onlick one. 😖 My idea is to just use an onmousedown="createEvent(blah)" approach and see if that works. Should be able to pass any function in as a callback, such as actions, msg, etc. Anyway, I hope. I'll let you guys know tomorrow.

[FlorianWendelborn]

There is an oncreate event that might be useful.

[rbiggs]

thanks for the tip, i'll look into it.

[jorgebucaran]

Up to you folks, but I recommend using hyperapp-tap, if this is supposed to work with hyperapp.

Why? There's already a popular Electron based popular terminal project, HyperTerminal which uses the prefix hyper- for its plugins and stuff.

[rbiggs]

Up to you bubba. No biggie for me. @dodekeract I was just on developer.mozilla.org. I didn't see an oncreate on the HTMLElement, but there is an onload. That's probably the best hook to use. Later.

[jorgebucaran]

@rbiggs There isn't one, and onload is only available as window.onload.

I hope @dodekeract is referring to HyperApp's oncreate event.

[rbiggs]

Oh, you mean the lifecycle one? Ok, that's basically the same as HTMLElement.onload then, right?

[jorgebucaran]

Yep, I mean the lifecycle events.

[rbiggs]

I just need something inline, same as current , except it will be something like: `

[jorgebucaran]

Yeah, why not, experiment with that. At some point you'll arrive at the most efficient shape possible. That's what always happens with JavaScript projects right? 😆

[jorgebucaran]

Hi @rbiggs. It would be nice if you can share whatever you come up with when and if you do. 👋

[rbiggs]

Well, this is what I came up with. You need to set things up in subscriptions: https://github.com/rbiggs/hyper-tap

By the way, I tested this on Anrdoid back to 4.4 (Kitkat) and on iOS back to 8.0.

[rbiggs]

It's 4kb minified. 🙄 But then, events and gestures are a bit complex. Still way smaller than any other gesture library out there.

[FlorianWendelborn]

Have you seen the plugin API? Is that useful for implementing this?

[rbiggs]

Well, I noticed today that you implemented it. But I haven’t taken a look at it. Any way, just noticed that stupid PhantomJS doesn’t support promises, so I’m in the middle of rewriting my tests to run from the terminal properly. They run fine in the browser. Give me a day or so, and I’ll get back with you on the plugin part. Do you have some documentation on how to use the plugin API up on the site? Seems like the Wiki died of starvation a while back.
;-)

[jorgebucaran]

@rbiggs This is what we've got so far, but I can answer any questions you may have.

Also see how the router is implemented for a practical example.