Bootstrap 4 and Framework 7 Usage

Wappler General
#1

When I design an application I have always selected Bootstrap 4 local. This allows me the greatest flexibility for designing server-based applications from Desktop to Handhelds.

It is my understanding that if you’re designing for phones and tablets only, that you’re better of using Framework 7. And more so, if you’re designing apps. So here is my question with the 3.2.2 release of Wappler.

  1. Can you use Framework 7 to design from handhelds to desktops?
  2. Can you use both Bootstrap 4 local and Framework 7 on the same page design?
  3. When should one only use Bootstrap 4?
  4. When is it best to use Framework 7?

I look forward to hearing your opinions. Thank you in advance.

Mobile Apps: Routing with Bootstrap
#2

Hi
1-Yes
2-No
3-they are both a UI frameworks where Framework7 more of a complete package since it have a javascript side.
4-when you are making an app or PWA

Bootatrap is easier to work with and more supported in wappler with app connect

you can test both and see what you like more :slightly_smiling_face:

#3

Bootstrap 4 is more a web framework, i.e. more suitable for building websites.
Framework 7 is a mobile app framework, so it’s used to build the UI of your mobile apps.

Not that it’s not possible to build a mobile app UI with Bootstrap 4, but Framework 7 is a better option.

So when you are building a website use Bootstrap 4 and when you are building a mobile app then use Framework 7.

2 Likes
#4

If you built a website with bootstrap but then one day client decided they wanted app version, would it be possible to “convert it” to framework7? Ie can you switch / mix’n’match frameworks, or would you have to start entire project from ground up?

#5

No, these are two totally different frameworks. However you can use your bootstrap 4 website as a mobile app as it’s fully responsive and works fine on any device.

#6

You can actually reuse all the backend (server connect) from your own site to a new Framework7 front end as app indeed.

Or have the bootstrap4 site as app as well it is already responsive and looks ok on mobile.

Framework7 looks just a bit more native.

1 Like
#7

You guys are so awesomely responsive I have no idea how you get so much real work done :sweat_smile:. It’s funny as I’ve not even tried the demo yet but already feel strong affinity & loyalty to wappler based purely on how positive the experience has been in this community.

Gradually my ‘basic Web knowledge foundation’ is growing and soon I’ll be ready to dive into demo & full subscription! Thanks again.

5 Likes
#8

If bootstrap is more for web & framework7 is better for Apps, what is “AppConnect”?

I saw a post that says “App Connect is a compact, but powerful component based, front-end framework”

Is that another alternate ui option to the two already mentioned or is App connect something else entirely?

#9

App Connect is for both. Bootstrap and Framewrok7 are your deign frameworks, App Connect is where you will spend most of your time adding components and form handling and such. But you will use AppConnect regardless which ‘design framework’ you choose.

2 Likes
#10

Just wondering whether PWA is the same as Wappler’s routing feature.

#11

I understand what you’re saying but thought that I would throw this out there. It was implied that you can develop a website using Framework 7. Under what circumstances might you want to do that?

Another question. Say you want to used Bootstrap 4 for laptop/desktop views and Framework 7 for phones and tablets. How would you transition the client between these two frameworks. Would you do a browser check and redirect the user based on the device being used?

#12

PWA is a different technology. It’s primary use case is to install websites as apps on pc and mobile.

Read more here: https://web.dev/progressive-web-apps

It’s built by Google. It’s an addon over the routing features of single page application available in Wappler.

#13

Those two would be different projects.
You’d have bootstrap project on say abc.com and framework 7 project on m.abc.com

So, to switch between the URLs dynamically, you’d have to have a server action that takes input of screen size from the browser component and then redirect user to relevant url.

#14

Why would you do that - seems to me like a double work? Bootstrap 4 works perfectly fine for any device.
Framework 7 is more suitable for a more native feeling when building a mobile app.

#15

Why this bias? I have already developed several desktop CRM projects for my clients. And these sites I made based on Fw7. And I can say (and customers agree with this) that these sites look much, much more attractive than if they were made on a bare Bootstrap.

It was already mentioned above that Fw7 > Bootstrap in terms of functionality. And it has a lot of useful things right under the hood. You don’t need to look for third-party solutions to make a pull-out sidebar, for example. It already exists in Fw7 as a ready-made element (as well as many other elements). And it looks very good. Much better than the solutions I’ve seen on Bootstrap. And this applies to other elements. Fw7 has a chic set of interface elements with excellent animation quality and appearance. This is why you may want to create a website based on it, rather than using Bootstrap as a framework.

For me, the main question of choosing a framework for a site is what the site should be like:

  • how SPA
  • or as a site with separate pages (in some projects this is a necessary condition)

If the site can be in SPA format, I prefer Fw7 as the base. If you need a site with separate pages, I choose Bootstrap, simply because there is no other alternative in Wappler.

1 Like
#16

George, are there any tutorials for SCRUD in a Framework 7 environment?

#17

hi just wanted to ask, what if you wanted to create 3 versions of a SaaS product,

  1. PWA
  2. Mobile App
  3. Desktop Version

How do you go about doing that? Can you connect the backend for the same SaaS product onto different platforms using boostrap 4 and framework 7?

#18

Yes, you can do this.

1 Like
#19

thank you for your prompt reply. Given this then, which should I begin my project with? Bootstrap 4?

#20

I’ve limited experience in mobile app dev but I would build the web version first and put all the API scripts in there and then connect to those with the mobile and desktop versions.

1 Like