6 ms·

OnSen UI – Develop HTML5 hybrid and mobile web apps

119 points by based2 8y ago

based2 8y ago
https://github.com/OnsenUI/OnsenUI https://github.com/OnsenUI/OnsenUI
pjmlp 8y ago
Actually it looks quite good on my phone, congratulations.
AbuAssar 8y ago
this directly competes with Ionic 4, which is a nice thing.
- yesimahuman 8y ago
  We're bit fans of Onsen at Ionic, definitely push us to improve
  - cyberferret 8y ago
    Hmm... Does this mean we can use Onsen as a 'drop in' replacement for the front end of an Ionic app? And simply rely on Ionic for the 'back end' routing etc.? I was just wondering if Onsen is mainly a set of CSS classes which could replace the Ionic ones for a different look and feel?
stabbles 8y ago
The animations in the Anim tab of the demo still lag a bit on my Samsung S6. It's always these subtle, uncanny things that tell you it's not a native app
- pcr0 8y ago
  Likewise on my S8, the telltale jankiness gives it away.
- kuhhk 8y ago
  Works fine for me on an older iPhone
- deleted 8y ago
  [deleted]
- TeMPOraL 8y ago
  These, and/or lack of deep integration with platform's UI features (e.g. keyboard shortcuts), and/or UI occasionally blanking out with 404 or 500 page because of networking problems. Yes, you can usually tell webapps from native apps apart pretty quickly.
  - deleted 8y ago
    [deleted]
  - pjmlp 8y ago
    While I agree with you, it is also a consequence of not doing proper testing. I have used a couple of native apps that crash on network problems, and in some cases they just vanish from the screen on crash without any OS dialog coming up. I rather have to deal with mobile web apps than web widgets, specially if I have to code them.
  - z3t4 8y ago
    The app accessing your contact list, monitoring phone calls, accessing your private photos. That's also how you can tell the difference between a "native" app and a progressive web app.
- datguacdoh 8y ago
  Even on a modern pixel 3, the slider animation is a bit behind. Everything else looks smooth, but the slider definitely feels "off".
LeoNatan25 8y ago
What's so "most beautiful" about HTML+CSS masquerading (badly) as UIKit? I know, I know, every web framework is "best", "most" and "beautiful". But still, for once I would like to know what is so "beautiful" about web emulating native in a bad manner.
- placebo 8y ago
  More software development options give you more freedom to choose a path that gives the best solution to the problem you're trying to solve. That is "beautiful" for me. Software development in the real world is a game of trade-offs. You have time-to-market and various other business considerations to take into account. Many times, choosing the "best" technological solution will harm your business. What is best and beautiful depends on the wider context.
- dvh 8y ago
  The killer feature of web is that there are at least 5 implementations from major vendors (Mozilla, Google, apple, Microsoft, Opera). Nothing else come close. I've been burned too many times before by discontinued products to use anything else for UI.
  - neoeldex 8y ago
    Funny thing is there's practically only Mozilla and Google left with their browsers. Microsoft, Apple and Opera all basically piggyback on the chrome renderer (prolly not entirely true for safari, but it doesn't run on anything besides apple anymore)
- skrowl 8y ago
  I consider not having to write an app in Swift/Metal/Whatever Apple crap and different app in Java/NDK/whatever Android crap to be pretty "beautiful". That said, I use Xamarin instead of this.
perenzo 8y ago
Alternatives: https://framework7.io/ https://framework7.io/ and https://ionicframework.com/ https://ionicframework.com/ Did anybody evaluate all of them? On iOS I experienced that most approaches have issues keeping the header in place when the keyboard shows up.
- cyberferret 8y ago
  I was curious to see if anyone posted how this compared against Ionic (which I have used since v1 and love). Appreciate anyone who has used both chiming in with their thoughts in this thread.
stephen 8y ago
I was just looking at this the other day--at first it looked pretty jank on my desktop chrome, but I switched to an android phone and the animations looked surprisingly slick. (Haven't tried on an iPhone yet.) I know the bar for purists is "it will never be native", which is true, but this is a huge improvement from the state-of-the-art mobile webapp frameworks/widgets from ~5 years ago. Definitely great to have options, especially for building/prototyping apps that otherwise wouldn't exist, e.g. because they'd be (for some/many developers) prohibitively expensive to MVP.
simplecomplex 8y ago
This looks like a deliberate attempt at cloning iOS’s aesthetic. The demo does work well!
spdustin 8y ago
This is pretty great on iPhone. One suggestion: on the carousel component, it requires too much of a swipe (50% of device width?) to feel native. Maybe reduce that to 20%?
- buckhx 8y ago
  The carousel is pretty garbage overall, we dropped it fairly quickly.
buckhx 8y ago
We leveraged this for an internal product trying to see how far we could push a PWA with a native feel. Biggest pain was that it doesn't play nice with the Vue router and history API and really wants to function as a single page app. Happy to ping one of our product engineers to elaborate if folks are curious on more specifics.
fareesh 8y ago
So this is a competitor to ionic? Can someone who chose this instead sell me on whether this offers anything better at the present stage? Curious to know when I should use this instead.
splintercell 8y ago
Obligatory, this uses Idris state machines to build a mobile app using OnSen UI: https://medium.com/the-web-tub/idris-state-machines-in-javascript-apps-b969e2cb6ed2 https://medium.com/the-web-tub/idris-state-machines-in-javas...
arisAlexis 8y ago
how does it compare to React Native?
gammateam 8y ago
I really like how far mobile web apps and the ecosystem has come. This is right in line with my timeline of when it would get good. Source: Former native mobile app developer that used to defend native mobile apps.

119 points by based2 8y ago

based2 8y ago

https://github.com/OnsenUI/OnsenUI https://github.com/OnsenUI/OnsenUI

pjmlp 8y ago

Actually it looks quite good on my phone, congratulations.

AbuAssar 8y ago

this directly competes with Ionic 4, which is a nice thing.

yesimahuman 8y ago
We're bit fans of Onsen at Ionic, definitely push us to improve
- cyberferret 8y ago
  Hmm... Does this mean we can use Onsen as a 'drop in' replacement for the front end of an Ionic app? And simply rely on Ionic for the 'back end' routing etc.? I was just wondering if Onsen is mainly a set of CSS classes which could replace the Ionic ones for a different look and feel?

stabbles 8y ago

The animations in the Anim tab of the demo still lag a bit on my Samsung S6. It's always these subtle, uncanny things that tell you it's not a native app

pcr0 8y ago
Likewise on my S8, the telltale jankiness gives it away.
kuhhk 8y ago
Works fine for me on an older iPhone
deleted 8y ago
[deleted]
TeMPOraL 8y ago
These, and/or lack of deep integration with platform's UI features (e.g. keyboard shortcuts), and/or UI occasionally blanking out with 404 or 500 page because of networking problems. Yes, you can usually tell webapps from native apps apart pretty quickly.
- deleted 8y ago
  [deleted]
- pjmlp 8y ago
  While I agree with you, it is also a consequence of not doing proper testing. I have used a couple of native apps that crash on network problems, and in some cases they just vanish from the screen on crash without any OS dialog coming up. I rather have to deal with mobile web apps than web widgets, specially if I have to code them.
- z3t4 8y ago
  The app accessing your contact list, monitoring phone calls, accessing your private photos. That's also how you can tell the difference between a "native" app and a progressive web app.
datguacdoh 8y ago
Even on a modern pixel 3, the slider animation is a bit behind. Everything else looks smooth, but the slider definitely feels "off".

LeoNatan25 8y ago

What's so "most beautiful" about HTML+CSS masquerading (badly) as UIKit? I know, I know, every web framework is "best", "most" and "beautiful". But still, for once I would like to know what is so "beautiful" about web emulating native in a bad manner.

placebo 8y ago
More software development options give you more freedom to choose a path that gives the best solution to the problem you're trying to solve. That is "beautiful" for me. Software development in the real world is a game of trade-offs. You have time-to-market and various other business considerations to take into account. Many times, choosing the "best" technological solution will harm your business. What is best and beautiful depends on the wider context.
dvh 8y ago
The killer feature of web is that there are at least 5 implementations from major vendors (Mozilla, Google, apple, Microsoft, Opera). Nothing else come close. I've been burned too many times before by discontinued products to use anything else for UI.
- neoeldex 8y ago
  Funny thing is there's practically only Mozilla and Google left with their browsers. Microsoft, Apple and Opera all basically piggyback on the chrome renderer (prolly not entirely true for safari, but it doesn't run on anything besides apple anymore)
skrowl 8y ago
I consider not having to write an app in Swift/Metal/Whatever Apple crap and different app in Java/NDK/whatever Android crap to be pretty "beautiful". That said, I use Xamarin instead of this.

perenzo 8y ago

Alternatives: https://framework7.io/ https://framework7.io/ and https://ionicframework.com/ https://ionicframework.com/ Did anybody evaluate all of them? On iOS I experienced that most approaches have issues keeping the header in place when the keyboard shows up.

cyberferret 8y ago
I was curious to see if anyone posted how this compared against Ionic (which I have used since v1 and love). Appreciate anyone who has used both chiming in with their thoughts in this thread.

stephen 8y ago

I was just looking at this the other day--at first it looked pretty jank on my desktop chrome, but I switched to an android phone and the animations looked surprisingly slick. (Haven't tried on an iPhone yet.) I know the bar for purists is "it will never be native", which is true, but this is a huge improvement from the state-of-the-art mobile webapp frameworks/widgets from ~5 years ago. Definitely great to have options, especially for building/prototyping apps that otherwise wouldn't exist, e.g. because they'd be (for some/many developers) prohibitively expensive to MVP.

simplecomplex 8y ago

This looks like a deliberate attempt at cloning iOS’s aesthetic. The demo does work well!

spdustin 8y ago

This is pretty great on iPhone. One suggestion: on the carousel component, it requires too much of a swipe (50% of device width?) to feel native. Maybe reduce that to 20%?

buckhx 8y ago
The carousel is pretty garbage overall, we dropped it fairly quickly.

buckhx 8y ago

We leveraged this for an internal product trying to see how far we could push a PWA with a native feel. Biggest pain was that it doesn't play nice with the Vue router and history API and really wants to function as a single page app. Happy to ping one of our product engineers to elaborate if folks are curious on more specifics.

fareesh 8y ago

So this is a competitor to ionic? Can someone who chose this instead sell me on whether this offers anything better at the present stage? Curious to know when I should use this instead.

splintercell 8y ago

Obligatory, this uses Idris state machines to build a mobile app using OnSen UI: https://medium.com/the-web-tub/idris-state-machines-in-javascript-apps-b969e2cb6ed2 https://medium.com/the-web-tub/idris-state-machines-in-javas...

arisAlexis 8y ago

how does it compare to React Native?

gammateam 8y ago

I really like how far mobile web apps and the ecosystem has come. This is right in line with my timeline of when it would get good. Source: Former native mobile app developer that used to defend native mobile apps.