5 ms·

Show HN: TouchstoneJS, a React powered UI framework for beautiful mobile apps

92 points by jed_watson 12y ago

leo_mck 12y ago
And it works fine on WP 8.1, which was a nice surprise. Good work!
colinramsay 12y ago
I stumbled upon this the other day and was immediately impressed. There's still a way to go but look at the detail in the transitions - not just a straightforward slide but with the previous page parallaxing and the shadow effect - very similar to native. I think react is a wonderful technology. I also think that there's a real gap for a lightweight mobile-only framework like this, and this work is a great start.
- jed_watson 12y ago
  Thanks! we're putting a lot of detail into the animations to make it feel as native as possible. The touch events too - you'll notice that if you touch a link, and move too far away, it'll un-hilight; then if you move back it activates again, just like on iOS. Or in a scrolling panel, scrolling cancels the touch event. We've had a great experience building with React, and browserify - it keeps everything organised and modular, and is pretty much perfect for mobile app architecture.
weavie 12y ago
Looks great. Presumably being React powered means it would work nicely with the various ClojureScript React wrappers such as Om and Reagent.
- skrebbel 12y ago
  I'm not sure. Off of the feature list, it looks like a framework, not a component library. It takes over your app structure, build process, etc etc.
  - jed_watson 12y ago
    The app framework is structured as a React mixin, everything else (lists, form controls, etc) is just React Components you can drop into your app. So for the most part how you structure your app is up to you (except for the scaffolding necessary for the view transitions). It's inspired by react-router (after the recent changes) in terms of getting out of your way. Other than that, aside from needing some sort of compilation step for the JSX (our demo project uses browserify and gulp) the rest is up to you. I haven't used Om or Reagent yet but I don't think there'd be anything preventing them from working with Touchstone.
    - colinramsay 12y ago
      Is there any reason not to just use react-router? Edit: ok I found the createApp mixin and I can see you're doing a lot of stuff in there to support the touchstone app... It would be sweet if you could delegate some of that heavy lifting and integrate with react-router at the same time...
      - jed_watson 12y ago
        You need a lot more control over how the views transition, pass state, etc. in order to create a native-feeling app. The paradigm of links and parameters falls short, and eventually TouchstoneJS will exert a lot more control over the transitions. Right now we're using CSSTransitionGroup, but I expect we'll move to a JS-based transition method (possibly with tween-state) so you can do controlled or partial transitions (required for things like drawers or swipe-from-left to go back) We have spent a lot of time looking at react-router though, and are using it on other projects, and are / will be borrowing quite a few things :)
        colinramsay 12y ago
        That's fair enough. I'm looking forward to testing Touchstone out soon, I've got a test project in mind!
  - colinramsay 12y ago
jblok 12y ago
Looks awesome, good work! I am using Ionic at the moment to develop a hybrid app and while it's a little more mature and a joy to play with, it doesn't as far as I'm aware have the awesome state change animations this has. Excited for the future of hybrid apps :)
- jed_watson 12y ago
  Cheers! We're fans of Ionic ourselves (and use their excellent icon library) I think the biggest differentiating factor between it and TouchstoneJS will be the platforms they're built on. Ionic's heavily invested in Angular, which is great, but we're big fans of React and wanted to create a new mobile framework that builds on that.
Kiro 12y ago
The demo is completely broken on my Samsung Galaxy S3 using the stock browser. Just a big black square with occasional flickering.
- jed_watson 12y ago
  Thanks for letting me know. We haven't had a chance to test yet on a wide range of Android browsers, but it shouldn't be like that. If you could open an issue on the GitHub project (http://github.com/JedWatson/touchstonejs http://github.com/JedWatson/touchstonejs) with details of your OS version and browser I'd really appreciate it!
apunic 12y ago
Hey Jed, this is really AWESOME and finally shows what is possible with the power of nowadays browser rendering engines paired with a good JS lib (React is my favorite js lib). I like very much the butter smooth transitions on any phone and it's nice that you spent so much attention in getting this thing so responsive, well done man. When will this thing be live, having more documentation and can I play already around with the stuff on Github? Thanks!
- creativityhurts 12y ago
  It's already on GitHub https://github.com/JedWatson/touchstonejs/ https://github.com/JedWatson/touchstonejs/
  - apunic 12y ago
    Thanks, I saw it already :) Jed, is on Github the latest version of Touchstone?
    - jed_watson 12y ago
      It is, and the source for the demo is here: https://github.com/Thinkmill/touchstone-starter https://github.com/Thinkmill/touchstone-starter
      - apunic 12y ago
        Thanks!
- jed_watson 12y ago
  Thanks! We're stoked with the great feedback this is getting. We will have more docs + examples up in the coming weeks, aside from that we're currently using it in three commercial apps at Thinkmill so what's there is pretty solid. The projects we're building with it include a Bitcoin wallet (built on BitcoinJS), a cinema voucher scanning app and another I unfortunately can't talk about yet. It's holding up really well across the different use cases and UI designs.
djtidau 12y ago
The brevity of the page displaying just the roadmap and live demo is honestly quite refreshing. It's great to be able to just look at what is there and see where the strengths and weaknesses are (at least with some face value). Great work on this, I can't wait to see how it matures.
chcokr 12y ago
Nice.
pluma 12y ago
Amazing and very responsive on both my Nexus 7 and Chrome on the desktop. My only quibble: "beautiful mobile apps" apparently means "mobile apps that look like iOS 8". I wonder how difficult it would be to adjust the design to better fit in with other OSes.
- jed_watson 12y ago
  We won't be limiting the look to iOS 8, we just started there because it's the platform we're developing some commercial apps for using TouchstoneJS at the moment. At least two of them will end up on Android as well, so we'll get to that. Down the track it will including a theme capability and a more Android-friendly UI style, I'll add something to the roadmap to make this clearer.
jbhatab 12y ago
This looks amazing. So will this be able to build native ios, android, and windows apps?
- jed_watson 12y ago
  Yes - we've already got it working with iOS and android using Cordova, Windows should be straight-forward as well. There's a Cordova project that builds for iOS in the sample project if you're interested.

92 points by jed_watson 12y ago

And it works fine on WP 8.1, which was a nice surprise. Good work!

I stumbled upon this the other day and was immediately impressed. There's still a way to go but look at the detail in the transitions - not just a straightforward slide but with the previous page parallaxing and the shadow effect - very similar to native. I think react is a wonderful technology. I also think that there's a real gap for a lightweight mobile-only framework like this, and this work is a great start.

jed_watson 12y ago
Thanks! we're putting a lot of detail into the animations to make it feel as native as possible. The touch events too - you'll notice that if you touch a link, and move too far away, it'll un-hilight; then if you move back it activates again, just like on iOS. Or in a scrolling panel, scrolling cancels the touch event. We've had a great experience building with React, and browserify - it keeps everything organised and modular, and is pretty much perfect for mobile app architecture.

weavie 12y ago

Looks great. Presumably being React powered means it would work nicely with the various ClojureScript React wrappers such as Om and Reagent.

skrebbel 12y ago
I'm not sure. Off of the feature list, it looks like a framework, not a component library. It takes over your app structure, build process, etc etc.
- jed_watson 12y ago
  The app framework is structured as a React mixin, everything else (lists, form controls, etc) is just React Components you can drop into your app. So for the most part how you structure your app is up to you (except for the scaffolding necessary for the view transitions). It's inspired by react-router (after the recent changes) in terms of getting out of your way. Other than that, aside from needing some sort of compilation step for the JSX (our demo project uses browserify and gulp) the rest is up to you. I haven't used Om or Reagent yet but I don't think there'd be anything preventing them from working with Touchstone.
  - colinramsay 12y ago
    Is there any reason not to just use react-router? Edit: ok I found the createApp mixin and I can see you're doing a lot of stuff in there to support the touchstone app... It would be sweet if you could delegate some of that heavy lifting and integrate with react-router at the same time...
    - jed_watson 12y ago
      You need a lot more control over how the views transition, pass state, etc. in order to create a native-feeling app. The paradigm of links and parameters falls short, and eventually TouchstoneJS will exert a lot more control over the transitions. Right now we're using CSSTransitionGroup, but I expect we'll move to a JS-based transition method (possibly with tween-state) so you can do controlled or partial transitions (required for things like drawers or swipe-from-left to go back) We have spent a lot of time looking at react-router though, and are using it on other projects, and are / will be borrowing quite a few things :)
      - colinramsay 12y ago
        That's fair enough. I'm looking forward to testing Touchstone out soon, I've got a test project in mind!
- colinramsay 12y ago

jblok 12y ago

Looks awesome, good work! I am using Ionic at the moment to develop a hybrid app and while it's a little more mature and a joy to play with, it doesn't as far as I'm aware have the awesome state change animations this has. Excited for the future of hybrid apps :)

jed_watson 12y ago
Cheers! We're fans of Ionic ourselves (and use their excellent icon library) I think the biggest differentiating factor between it and TouchstoneJS will be the platforms they're built on. Ionic's heavily invested in Angular, which is great, but we're big fans of React and wanted to create a new mobile framework that builds on that.

Kiro 12y ago

The demo is completely broken on my Samsung Galaxy S3 using the stock browser. Just a big black square with occasional flickering.

jed_watson 12y ago
Thanks for letting me know. We haven't had a chance to test yet on a wide range of Android browsers, but it shouldn't be like that. If you could open an issue on the GitHub project (http://github.com/JedWatson/touchstonejs http://github.com/JedWatson/touchstonejs) with details of your OS version and browser I'd really appreciate it!

apunic 12y ago

Hey Jed, this is really AWESOME and finally shows what is possible with the power of nowadays browser rendering engines paired with a good JS lib (React is my favorite js lib). I like very much the butter smooth transitions on any phone and it's nice that you spent so much attention in getting this thing so responsive, well done man. When will this thing be live, having more documentation and can I play already around with the stuff on Github? Thanks!

creativityhurts 12y ago
It's already on GitHub https://github.com/JedWatson/touchstonejs/ https://github.com/JedWatson/touchstonejs/
- apunic 12y ago
  Thanks, I saw it already :) Jed, is on Github the latest version of Touchstone?
  - jed_watson 12y ago
    It is, and the source for the demo is here: https://github.com/Thinkmill/touchstone-starter https://github.com/Thinkmill/touchstone-starter
    - apunic 12y ago
      Thanks!
jed_watson 12y ago
Thanks! We're stoked with the great feedback this is getting. We will have more docs + examples up in the coming weeks, aside from that we're currently using it in three commercial apps at Thinkmill so what's there is pretty solid. The projects we're building with it include a Bitcoin wallet (built on BitcoinJS), a cinema voucher scanning app and another I unfortunately can't talk about yet. It's holding up really well across the different use cases and UI designs.

djtidau 12y ago

The brevity of the page displaying just the roadmap and live demo is honestly quite refreshing. It's great to be able to just look at what is there and see where the strengths and weaknesses are (at least with some face value). Great work on this, I can't wait to see how it matures.

chcokr 12y ago

Nice.

pluma 12y ago

Amazing and very responsive on both my Nexus 7 and Chrome on the desktop. My only quibble: "beautiful mobile apps" apparently means "mobile apps that look like iOS 8". I wonder how difficult it would be to adjust the design to better fit in with other OSes.

jed_watson 12y ago
We won't be limiting the look to iOS 8, we just started there because it's the platform we're developing some commercial apps for using TouchstoneJS at the moment. At least two of them will end up on Android as well, so we'll get to that. Down the track it will including a theme capability and a more Android-friendly UI style, I'll add something to the roadmap to make this clearer.

jbhatab 12y ago

This looks amazing. So will this be able to build native ios, android, and windows apps?

jed_watson 12y ago
Yes - we've already got it working with iOS and android using Cordova, Windows should be straight-forward as well. There's a Cordova project that builds for iOS in the sample project if you're interested.