Browser to App: really worth it?

1

Hi everyone. I have been redoing my desktop-focused educational website for use on Android and I also have found that some browser features, like the address bar, get in the way because I need a lot of space for learning activities. A plausible solution would be to create a browser-independent app. My questions are: 1) Is it really worthwhile to learn Framework7 and convert the website to an app? 2) To what extent would I have to work to redesign a website that’s full of forms, controls, animation, speech recognition code, etc.?

Thanks for your answer.

2

The strength of this framework is the possibility of exporting from the same code all desktop platforms + ios/android with cordova, you would have to redo the code from 0 because an integration seems really difficult to me.

3

Sorry, but I don’t understand what you say. If Framework7 allows me to export, as they say, why would I have to redo everything from 0?

4

Because your code 90% doesn’t match with framework (like component/route etc…)

1 Like
5

So can you recommend a tutorial -not Framework’s, which is not clear at all- where I can start with the right foot?

6

You want a tutorial of coding? Or of framework7?

7

No, Framework7. Trying to make the Framework7/Android Studio/Gradle combo work is driving me nuts. The documentation is really lacking.

8

It’s simple, just use cordova, npm run build-cordova (that will be create an apk into output folder).

9

If you want to convert a website to an app, you don’t necessarly need Framework7. You only need a platform like Cordova or Capacitor, which provides the appropriate Android (or iOS, or Mac, or Windows) code to convert HTML/JS/CSS and run as a native app on a specific platform. The same HTML/JS/CSS code can be recompiled to run on an entirely different platform, without having to re-write any of that web code.

The advantage to using Framework7 on top of Cordova or Capacitor is the user interface elements. If you convert a website directly into an app, it likely won’t look at all like a native iOS or Android experience (ie button sizes, font sizes and colours, animations etc). Framework7 acts as a provider of UI elements so you can quickly build a front-end which matches perfectly the native app experience that someone would have if they had written in the platform’s native IDE.

Framework7 can use your existing Javascript code to power your app’s functions, but there are many Javascript functions of its own. From detecting the phone’s size, to running animations between pages, you can use F7’s Javascript engine to speed up and optimise your app.

I hope that helps a little.

1 Like
10

It DOES help a lot! Things are clearer now so thank you very much. I have another question though. My educational website is three-level deep, i.e. a landing page that leads to a secondary page with a lot of activities to choose from with a click and then I’ve got the activities themselves on the third level. How could I “re-lay” all that out? A dozen different views? As far as I’ve seen apps seem to be flat or two-tiered at the most.

11

Thanks, snowbeat. I was doing that but was not sure if it was the right way.

12

Yes you probably won’t need a landing page and a list of activities. It would be a streamlined user experience to offer the list on the first load.

It sounds like a list view would be your best option, to present a list of choices which can then navigate to another page when the selected option is tapped.

This is very much how the Framework7 Kitchen Sink demo operates, by offering a list which navigates to the chosen option.

13

Thank you so much. Your input has set me on my way!