Onsen UI for website

[Sergey]

Hello,

I have an idea to use Onsen UI to create mobile applications and a website simultaneously. This will allow me to use one code base for everything. What problems can I get and what should I consider if I want to place the project on the webserver instead of the build application? Does anyone have a positive or negative experience for this? I will be grateful for any advice.

[rgins16]

I’m using OnsenUI to create a web-app right now. Basically an app, but it’s a website. After I finish, I plan on using the same code base to create mobile apps. For my web app, I am using MongoDB, Express, Angular1, and NodeJS.

I’m hosting the website on own server for now until it’s completed, then I plan on moving it to Amazon’s servers.

It takes no time at all to test changes to my code. I just reload the website.

No negatives yet, but I may run into problems when I try and use the same code to create the mobile apps.

[rgins16]

Also, I am using

ng-init="ons.platform.select('iOS');"

so that the web-app and and eventual mobile apps will all look the same on any device.

[Sergey]

@rgins16 Thanks for info!
If you use Onsen UI for website - how you solve problem with layout for small/large screens?
I ask question regarding responsive grid in this topic.

Maybe someone else has the experience of using Onsen UI for a website?

[rgins16]

I haven’t gotten far enough in my web-app where I’ve tested the website on more than 2 devices, but I think for the most part, OnsenUI scales everything to the device’s screen size.

I am using css tricks like setting max heights and widths for certain elements. So even on Desktop, the app has a max-width of 500 px and a max-height of 750 px. So there is extra whitespace on Desktop and big tablets.

Otherwise if the device is smaller than those dimensions, then the app fits to the screen.

[Sergey]

@rgins16 Thanks, i understand your trick. But in my opinion we should to use additional space on the large screens more effictively.
I’m also interested in knowing what someone does with code that should only be in the application and not needed in the website - working with native plug-ins etc.

[Sergey]

I also worry about how Onsen UI website will be displayed in various browsers on various platforms. When we build a mobile application, we do not have such a variety of browsers (especially if we use Crosswalk). But it can be a problem if the website is displayed differently for Chrome / IE / Opera / Firefox / Safari on MacOS / iOS / Windows / Linux (and for several versions for each browser).
Does anyone know about such problems for Onsen UI?
@Fran-Diox what do you think about it?

[Fran Diox]

@Sergey Making a desktop website with Onsen UI might feel weird from a UX perspective. The provided components are made for mobile devices so I don’t know if it makes sense to have things like toolbars or pull hooks in a desktop website, but that’s up to you. Otherwise, we support Chrome and Safari for desktop as well. We don’t test that much on Firefox but try to fix bugs for it when anybody open issues on Github.

[Sergey]

@Fran-Diox maybe you right regarding “weird from a UX perspective” but it is classic programmer’s dream - “write once run everywhere” :)
My other question regarding responsive grid is relevant to this idea too because we shold to use different layouts for small and large screens.

[rgins16]

@Fran-Diox What about Opera and IE?

[Fran Diox]

@rgins16 Opera and Chrome use the same engine so there shouldn’t be problems. About IE I’m not so sure, probably there are components like ons-range that do not work well due to technology/CSS limitations in IE. We can try to fix bugs reported but it is not a priority (of course, PRs are welcome).