what a cool framework! I’ve been using OnsenUI, which I like but hasn’t been updated in ages.
In particular, I’m interested in building PWAs with vanilla javascript. Kitchen sink is great, but are there any other public repos with other projects, perhaps a bit simpler? With Onsen, I learned a lot by following their pokemon tutorial, so I’m looking for something similar here. A simple app with tabs and menus and navigation. Any suggestions would be helpful.
@tacman1123 Glad to see more people discovering Franework7. I also think it is a quite excellent framework.
I am also building a PWA using vanilla JS at the moment. I agree there aren’t many samples and demo apps and even some parts of the kitchen sink did not run on latest F7 versions for me (after simply copying the components over). So it’s been quite a lot of tinkering with it and after a while you get used to it.
I think the best way is to start out with F7 CLI and use one of the starter templates provided there (e.g. tabbed layout) and then start looking into F7 components.
For questions regarding the F7 architecture I recommend checking the forum but be careful since most stuff is quite old, in that case you can ask a new question. Most component related things are handled in F7 like in standard vanilla JS modules. Some peculiarities can only be found after carefully reading the docs multiple times
Hi, I agree. Would be great with some simple samples with data from a json.
I have not been abel to use this forum for a long time. Not possible to logon with my IP-adress???
As you can see, it’s pretty basic – a menu, headers, tabs at the bottom, some navigation. Save your pokemen, see your list, super simple. It would make a great demo app for framework7.
Any idea how much effort that would take? I’d even considering paying for consulting just to see how to do it “right”.
That should not take long time.
I have uploaded a sample video her from a site I have up and running.
But I don’t think I do it “The right way”
Would love to se some better samples her on the site.
It is in Norwegian so you will not understand, but you get it.
Very cool! Is it opensource? If so, please share the url to the repo and also what tools are required.
I’m really hoping to find apps that don’t use React and such, since the build process is more complicated. Symfony has an awesome tool for integrating ES6 modules easily, but it doesn’t work with React or Vue.
Had a look at your app in a little more depth @tacman1123 and I agree, this should be very straightforward to replicate in Framework7. Plus, I see you don’t have a service worker, so while switching to Framework7 you could add offline functionality on top of your app
As for the dev environment, you don’t have to use React at all. I myself currently write my app with plain vanilla JS. Integrating ES6 modules is also incredibly easy and works out of the box!
I have worked quite some time now with the latest Framework7 which is v8 (and there had been some notable changes since v5). I’d be happy to help you get acquainted with it. If you have specific questions, feel free to ask them here! If you’re looking for more in-depth guidance or a hands-on session, let me know.
I disabled the service worker while GitHub - Spomky-Labs/pwa-bundle: PHP library for generating a full featured PWA manifest is being worked on, but it does work – I have a version running on my phone right now, 100% offline, since the data is loaded into a dexie.js datastore (https://dexie.org/) To me, the combination of PWA + a local database + no build step (javascript importmaps rock!) means that you can build an offline app by simply publishing a website.
Sure, I’d love to work with you on this. Is your repo available? I’ll look at it.
I myself had the same question, and ended up examining/buying a couple of cheap, quality templates from theme forest and Envato etc. Most are more about the design/css though, but a couple were useful to examine their code. Mainly though, I’m just following through the documentation as I slowly learn
Thanks, Dale. Any you can recommend? I did something similar for Onsen, never used it but it was cool to see what was done by a professional designer.
We almost have a few apps converted over, I’ll post the links when they’re working. But they’re heavily Symfony-oriented. Now that I’ve gotten used to no build step, no npm, vite, etc. I can’t go back.
i am not affiliated with any of them, and as said, most are more about the style than the code, but you can poke around their code by viewing the source, and then purchase to get a deeper set of code (without all the obfuscation and so on). for $20 bucks or so, i figured it would be worth saving my time.
The themeforest and UI Initiative examples look great BUT could someone who has downloaded (or created) them speak to whether they are just kitchensink style templates of static pages OR whether the app layer is wired up where you can navigate using the elements and program them dynamically? Thats the issue I have with kitchensink, that while it shows all the component elements the routing and navigation dynamics you need for an app are not really in there except in very simple says … eg. you can click on a static link and load a new page .
I have a PWA I made on F7 back in 2019 that ran on firebase login and dynamically switched between image gallery and image capture screens as well as a profile. I’m updating it now to f7 v8 so will contribute it open source once I do.
In turn, we’re using this as a base for a Symfony integration with a framework7-bundle that greatly simplifies the manifest and routing when using the Symfony framework. More on that later.
