FrameWork7 Visual Builder

Showcase
1

Hi there,

first, a quick introduction: I’m a French developper living in Lisbon, Portugal, and I’ve been working during the past months on a Mac Visual Builder for Framework7 (and Bootstrap 4 as well by the way).
The product is still in beta and not yet finished, but it should be available in a few months.
I don’t want to do its promotion here, but I thought it might interest some of you, and your feedback or questions are welcome.

I would like as well to congratulate Vladimir for his amazing work on F7, I never, really never, had any problem or question with f7 during the development process (I just register right now on this forum actually).

Well, if you want to find out more about my project, there is a video trailer available here: http://www.thoriumbuilder.com or on youTube: https://www.youtube.com/watch?v=yNkgQ1Rdn9I

Thank You All ,

Bertrand

1 Like
2

Hi, your video looks very nice.
Just a quick question of interest: is your goal with Framework7 Visual Builder to build websites, or PWA’s, or Apps or all of them ?

3

Hi Erik,

Both actually, PWA and Responsive Web sites (powered by bootstrap 4)

4

Hi Bertrand,
video looks good, but what kind of feedback would you be interested in? From the video there’s not much to see…
Do you have any details?
And as Eric already mentioned- a PWA builder would be nice (if the output is streamlined)… so you might want to shed some light on it?
andy

5

Hi Andy,
Thank You for your feedback.

I’m aware it is not easy to have a good idea of what the product can do from a short video, it is obviously just a first overview.
I’m currently working on more detailed communication tools that I will make public very soon.
The feed-back I’m expecting is not very clear, even for me, but I would be curious for example to know what kind of features you would dream to have in such software, if you could use something like that or would prefer a more technical and developer-tailored tool, and the price level you would think reasonable for such a software (I’m planning less than 100EU, perpetual licence without monthly fees (…and would like to support F7 if successful by the way) ) …

Meanwhile, here are some first functionalities details:

  • Thorium is designed to allow users to create both WebApp (powered by Framework7) and responsive Websites (Powered by bootstrap 4)
  • The goal was to make a very easy-to-use tool than can be used by none-technical people (You never see any technical thing on the interface, css, js, etc… are never visible to the user.
    Of course I must admit that creating the most easy-to-use possible software creates some limitations for complex projects and it is obviously not magical. For advanced or very specific features, you may have to put your hands in the code (the generated code is completely open), but at least you can save time by building very quickly the foundations of a project.
  • The software is MacOS native 64bits: this choice was to bring productivity and ergonomic: first you can work off-line (cool for Digital Nomads) and there are a lot of Desktop App features such as Images drag&drop etc… which are in my opinion more efficients than what you could have in a WebBased application (I’m aware some people may not agree, I’m maybe old-fashion, but personally I prefer :slight_smile: ).
  • The complete software has only one App file, it includes everything necessary: embedded WebServer, embedded DB, … Installing it requires only to put the App in the Application Folder.
  • The generated code is open (and very light), so technical people who may want to use this tool to create the skeleton of their project, can complete it with their own specific or advanced needs without problem.
  • Designing is completely visual (Drag&Drop) and every widget has its own configuration dialog.
  • It includes WebApp easy-configuration tools such as Icon, Manifest, splashscreens.
  • It includes all SEO tools (Meta, OpenGraph, SiteMap …)
  • The software includes a Mobile & Tablet Simulator
  • It includes as well an FTP uploader
  • Templating system (WebApp and Responsive Web Sites) : possibility to import/export your own templates.
  • Database Designer: you can visually create a database for your project (powered by SQLLite for development, but can be easily moved to another DB) with tools such as an Import Module (Text or Media), a Custom fields editor, Batch Indexing, Metadata Import …
  • Includes ready to use project templates
  • Interface & Help in English & French
  • Database implementation uses F7 features such as Infinite Scrolling, MediaList, DatList , etc…
  • GoogleMap API implementation: geo-located data can be stored in the DB and displayed as marker on a Map, with detail information (both on WebApp and Responsive Web sites)
  • Regarding Framework7: almost all the existing F7 V3 components and features have been included natively, it means that you just have to drop widgets on your pages, configure it with its configuration dialog.

Well once again, my positioning is to make the development process easier as possible.
I’ve been able to build a functional WebApp mockup with GoogleMap and database features for a friend’s startup project in less than an hour (When a software company was asking him 3K Eu for this mockup), and even my wife who doesn’t know everything about html, css or whatever is now able to build WebApp and WebSites (She is now certainly the less-technical F7 user in the world :slight_smile: )

I have a lot of implementation ideas for a next version, especially for creating WebApp that will be real PWA, I mean for example, Service Workers are not yet implemented, I’d like as well to implement things around Cordova, … but it is only a version 1 :).

Thanks for reading :slight_smile:

6

Hey this looks very cool, but would be good to try it of course :wink:

This what i can recommend and think will be good to have and welcomed by developers:

  • Select app template, like Single View, Tabs, Split View
  • Select framework: F7-Core, F7-Vue, F7-React. This can be not so easy, but composing such visual app with Vue/React components should be easier than manipulating a lot of HTML+JS content
  • Select bundler in generated project, like Webpack/Rollup/etc.
  • Theming (colors, fonts, some sizes). F7 v4 can be really helpful here as it uses CSS variables
  • Data bindings are also cool
  • Mobile app icons and splash screen generation
  • Cordova project generation based on the app project

You should also consider that “super power” users :smile: not often use such tools, but if i am going to start new F7 app, and i can open Thorium app, quickly select, let’s say:

  • Single View template
  • Based on F7-Vue.js
  • With Webpack bundler
  • Quickly setup few basic pages with components and routes
  • Export project to files and keep working on more deep and complex stuff manually

then it will be definitely a win for pro users!

But if i am not a pro user, of course i need more options like setting up data base, deployment and etc.

Keep us notified about progress here, please :wink:

3 Likes
7

I think price around 100 EUR is totally fine for such app

8

Thank You, Спасибо Vladimir,

I really appreciate your feed back :+1:
And of course I will keep you updated very soon.

Cheers

2 Likes
9

Hi Bertrand,

Interestingly everybody wants to make a tool for the ‘none-technical’ people, although I think there is plenty of room to create a tool for ‘technical’ people as well :wink:

I really like your choice of tools, starting with MacOSX 64bit, SQLite, etc… I for one, would appreciate a syncing option (e.g. iCloud or Dropbox or whatever), because - at least in my life - it happens (quite often) that I change machines multiple times a day. Having my sync in place helps me a lot to get work done without further thinking about keeping everything in sync.
Even more: Right now a cool editor software on the iPad is missing completely (I guess, mostly because of sandboxing issues, etc…). Having such a tool on the iPad would be awesome, especially if it comes to work as a ‘Digital nomad’.

As you already mentioned: Templates are a big benefit (especially, if they can be customized and re-used).
This would be especially true, if the app generates needed assets as well (info.plist, app-icons, application icons, splash-screen), much like XCode does.
And as Vladimir already mentioned: Cordova and/or Capacitor integration (especially the latter in combination with F7 is a black hole right now)

Database Implementation: You mentioned ‘Infinite Scrolling’, etc… You didn’t mention ‘Virtual Lists/Slides’: Maybe you already have that in the works, but this one is (after Infinite Scrolling - or even before), one of the most significant concepts in F7! (I love it: thanks Vladimir for that!)

Language: if you need some help localize to german or italian, just drop me a note.

GoogleMaps API: After the recent policy change of GoogleMaps, I completely abandonned GoogleMaps for all of my projects, as this is a completely insane step for developers (I DO understand Google, but for me it’s a no-go). I am currently switching some stuff over to OpenStreetMap and the wonderful Leaflet.js implementation, which are more than enough for most projects.

I appreciate your effort pretty much, because I am just starting my first F7 project;
I played with F7 a lot in the past, but for most projects it was strictly too complicated to port them over. Most of the time there were working implementations using other frameworks already in place. AND in contrary to e.g. ionic, there are only very, very few templates and tools available for F7. (Additionally the framework switched very fast from v1 to v2 and now v3 ; both upgrades with breaking changes, which is not helpful when trying to launch a fresh project ;))

So I’m looking forward what you come up with.

Pricing is absolutely okay for me.

This reply is already a bit too long (sorry for that), but if you need some more/detailed feedback, just drop me a note.

andy

10

Hello Vladimir and Andy,

@Andy: No no really, it is not too long, I really appreciate all your comments, thank you.
(and by the way this post is much longer than yours :slight_smile: )

Here are more details in answer to your feedback:

First I forgot to mention: there will be 2 versions: a standard and a pro version, but in both cases, my goal is to make the process of Web & WebApps creation very easy (with the obvious consequence that there are some limitations). My initial reflexion was that, let’s say for 80% of the needs, creating a Web or a WebApp should not be more difficult than creating a Word or Excel document (and as a lazy developper it applies to me as well).
I agree when you say that there is a room for a product designed for technical people, but it requires really a lot of work, and there are existing products on the market that do that, they are created by companies with a big team with all the required necessary skills, I’m quite sure I don’t have all the strong necessary skills to create the perfect development tool.

Once said, here are some more highlights:

  • The Standard Version is focused on hosted Progressive Web Apps: I can’t imagine for example a graphic designer, exporting its project to Cordova and Compile the project on Xcode or Android Studio. So it generates a project with all PWA requirements (Launch screen, Icons, Manifest, user Prompt for “Add to Home Screen”, and (all new) a basic Service Worker) , and of course the WebApp needs to be hosted somewhere.

  • The Pro version has been designed to be more evolutive and to bring more flexibility and functionalities to more technical people. And so in answer to Vladimir suggestions:

    • Select app template, like Single View, Tabs, Split View:
      Thorium includes different project templates: single view, split view, Tabbed view …. And actually also more complete templates with “ready to run” functionalities.
    • Select framework: F7-Core, F7-Vue, F7-React
      unfortunatly, currently only f7 Core, but should not be a big issue to add this possibility later. I think for that, I should reasonably wait for the launch of V1 and then consider the people feed-back as to prioritise evolutions
    • Theming (colors, fonts, some sizes). F7 v4 can be really helpful here as it uses CSS variables
      of course, that’s the minimum, and that’s actually allow really much more than just color fonts and sizes. And I’m really looking forward to find out more about the V4 css!
    • Select bundler in generated project, like Webpack/Rollup/etc.
      The generated code is really light (thanks to the power of f7), and the generation process creates bundled js & css, there are no import/exports/dependencies, so I don’t think it is applicable that case? am I wrong?
    • Mobile app icons and splash screen generation
      Yes of course, and more than this as described before (manifest, etc…)
    • Cordova project generation based on the app project
      Not yet, but I seriously consider that option (cordova & Phonegap) , and in answer to Andy for Capacitor : I didn’t know this tool actually, but will check it.
    • Quickly setup few basic pages with components and routes:
      that’s actually the main goal: you can add pages by drag&drop, add components, visually customise components (styles, contents, img, etc…) , link pages together, and all the code is then generated (routes, app.js, pages code etc…)
    • Export project to files and keep working on more deep and complex stuff manually:
      yes of course it is possible!

Andy Suggestions:

  • syncing option
    Good idea, as you mentioned, the import/export template option allows to do that, but indeed having the projects repository in iCloud could be a very much better option… to be studied…

  • iPad Editor
    You made the answer yourself, Sandboxing is really the issue. I think having such a tool on iPad would require to have everything online as you can’t (or almost can’t) access to local file system (and having something online is exactly what I didn’t want to have :slight_smile: )

  • the app generates needed assets as well (info.plist, app-icons, application icons, splash-screen), much like XCode does
    Already answered , but yes it does

  • Database Implementation: You mentioned ‘Infinite Scrolling’, etc… You didn’t mention ‘Virtual Lists/Slides’:
    Yes that’s true, I didn’t implement Virtual lists yet, it is difficult to explain shortly the database side of what I did, but let’s say at the moment you can have recursive and hierarchical master/detail functions that let you display data from a template as list view, media list, etc… with a search bar (with full-text search), customisable infinite scrolling and access to a customisable detail view/page. (That works with media assets if required, img, videos sounds…) - This is also implemented for googleMap so you can have geolocated entries within the database and then display it on a map with access to a detail view/page. I think it can cover most of the DB needs (not all of course) such as creating a product db, a blog, a magazine, a media DB (video, music, photographers img…), etc…

  • GoogleMaps API
    Agree with you, but that was required anyway in my opinion. I made a basic implementation of OpenStreetMap already (embedded map) and have already added Leaflet in my todolist (because I agree, this is the right choice for OSM implementation :slight_smile: )

  • Pricing
    Thank You for your feed back about it , I want to apply a reasonable pricing, that’s cool if you validate.

@Vladimir: after having worked so much time on every f7 components (and I have to say that I really realised how it is powerful and well designed) , I (humbly) have 2 suggestions:
I have had to create 2 custom widgets (And I don’t feel confortable with that, would prefer to use only f7 native components) as to bring additional design possibilities to users that are not yet implemented:

I can deal without that, this obviously just a suggestion, but after having implemented almost every component you have designed in f7, that was my feeling.

Спасибо, Thanks for reading, I promise, from now I stop writing so long emails, plan to do other presentation videos before the first beta version, A picture is worth a thousand words

11

Hi, following this topic with high interest but with no concrete contribution, I have to respond to the remark concerning “flexbox” because (besides the F7 utilities) the use of CSS Grid is at least an option to consider.
(to be clear, I do not suggest to create a specific component for alignment)

12

Hi Erik,

I don’t want to compare Boostrap and F7 of course, but the concept of grid also exists in Bootstrap and is really similar to the one implemented in F7. But Flexbox has some features that cannot be completely covered by Grids, so I have just thought it could be interesting to have such a component in f7.

13

As for flex box, F7 has similar classes, check it here http://framework7.io/docs/typography.html#flexbox, if something is missing, I can add it.

Collection, was thinking about a while ago, and could be worth to implement. But from my point of view how I understood it, it is just a grid of images that open Photo Browser in image tap. So I decided not to implement it. Or am I misunderstood its meaning? What does it also do?

14

Oups I missed theses css Helpers, sorry for that, I didn’t go back on the typography help page for a while: that’s just a perfect implementation Vladimir , so forget what I said!

Regarding the collection, of course Grid Component is an obvious possibility, but on the low-coding perspective, having a class that automatically set the properties of repeated images and text within the object could save time.
One of the things for what I had to add a little bit of custom css was for example to add breakpoints for changing the number of columns displayed when the user rotates its device for example (or simply to adapt the number of columns depending on the device size (tablet vs mobile for instance).
Well, don’t worry anyway, it is possible to create such object with the existing classes, so everything is fine :slight_smile:
Thx

15

+1

times have changed
very good job

2 Likes
16

Good Evening,

I’ve just published a new video with more details:


or

Thanks for watching!

5 Likes
17

That is super nice :+1:

1 Like
18

The only issue i notices. In the end when you export app. You have an option like “Generate Android manifest”. I guess it should be renamed to something like “Generate PWA manifest”. It is supported by desktop browsers too and iOS support is also coming soon

1 Like
19

Thanks Vladimir!

You’re right, thank You for the feed back

20

Look awsome, time to get a Mac…

1 Like