Weblow to Wappler Wannabee

Hi all,

I wanted to tell you a little about why felt the need to post.

For years I have been a commercial designer in print and online (over 2 decades). I got into the web in the 90’s but I was never very good (interpret that as terrible) coder. I got into Flash as it was a design orientated piece of software, from when it was Macromedia to Adobe. I actually won a couple of national design awards for flash based sites for Wall’s (sausages) not the ice-cream and Yamaha (tyres). I did learn a little actionscripting but I was never one to get into arrays and alike and this would be passed onto a dedicated coder.

Later in the day Webflow arrived and was a real turning point for me. It has allowed me to design web sites with CMS functionality (and now ecommerce) for international brands. It has also educated me more than any other software in the understanding of CSS and html.

As qualified designer/art director - I can now to truly realise my ideas without the need for me to code which, if you are not a coder, is completely revolutionary. This is not an overstatement. Furthermore, what is also not an overstatement is understanding how design plays such a crucial role it generating engaging sites that customers can engage in and relate to. Designers have tended not to appreciate a coder’s role and visa versa. Webflow has afforded me greater understanding (and appreciation) of code alongside design.

Getting to my point, I have scoured the net for something similar to Webflow which will also allow to me generate web based applications. This has been a common request from some of my clients.

Similar to pre-Webflow. I am unable to offer any type of service to these clients. I have now found Wappler. I am incredibly interested in this new development in code-free/no-code design and development. I have been watching some of the tutorials and spent a fair few days getting my head mourned it all.

The good - I know exactly what Wappler is trying to do and is completely what I am looking for - HOWEVER, it’s way too techy (for me)…again, similar to my phobia of code back in the day. I cannot believe a designer like me is going to click with Wappler just yet. And what I am really trying to say is, if you can nail the software to be as intuitive as Webflow for us ludite designers, then you are going to take some serious business away from the likes of Webflow.

If I am honest I have no loyalty to any one company, I am simply looking for the best tool(s) for the job. I can’t stand Adobe’s subscription model - or the structure of the company, yet it is still the most superior set of software (I am keeping an eye of Affinity).

So Wappler, impress me, woo me, and maybe have a chat over a piece of carrot cake and a latte with experienced digital UX designers who really understand what is going to ‘tickle-the-fancy’ of us ludite designers who like to no-code.

Maybe this is not your business model or ethos and you are more keen in grabbing ex-Dreamweavers. All I can say is I know there is a wealth of people like me that are more than happy to jump ship to Wappler if they can pull it out the bag. Explain server-side, databases etc. to people like me, in a non-techy way, with walkthoughs and clear explanatins.

I watch with great interest and congratulate you on what you have achieved so far.

11 Likes

Have a look here https://wappler.io/comparison to see why we are using Wappler.

To help you along, you can always refer to https://community.wappler.io/c/docs, otherwise, this forum will always help you out.

1 Like

Here’s a similar post with my views: Import website from Webflow and build custom CMS with Wappler

Visual UI designer in Wappler is under rapid-development (Wappler itself is updated every week). But a lot behind Webflow.
You will have to learn technical terms if you want to use back-end stuff. There is no non-techy way for this. :man_shrugging: Wappler’s visual back-end tools are AMAZING :ok_hand: & don’t require too deep technical know-how, but you can’t escape coding.

And BTW, we have cancelled our webflow subscription. Wappler all the way, baby!

2 Likes

Hi @pachamama and welcome to Wappler!

We see indeed a lot of Webflow users discovering Wappler. @drymetal, @Webjack357, @nshkrsh and many others can tell you indeed great stories of how they moved from Webflow and fall in love with Wappler.

We are also listening very carefully to their wishes and feedback (well next to all Wappler users as well of course) and are working hard to meet their expectations and design workflows.

You can see many of the visual design developments already done in the new experimental Design panel and other panels designs discussed in #rfc

We already have many design elements and visual workflow that you might not be aware of like the integrated front-end (App Connect) and Back-end (Server Connect) frameworks and their elements and panels.

Those are fully visual and component based and give you so much power as a designer, you can do anything a coder can do but in a nice visual way. Finally you can build those fancy custom build CMS sites or mobile apps, without touching any code but just focusing on design and workflows.

The more you discover Wappler, you will quickly get your AHA moment and become impressed :slight_smile:

3 Likes

Wappler, under-complicating the overly complicated, simply.

:slight_smile:

2 Likes

Thank you for all the replies. I really appreciated reading them.

Without question, Wappler requires a little existing tech know-how - both in the terminology used and walkthroughs. Some people do not know what Bootstrap is, or Framework 7. Yes, I can go and investigate these myself (which I did) outside of Wappler but engagement and increased interest would be garnered if this was within the Wappler environment.

I have watched most of the ‘third’party’ site training, and while I commend their efforts, they are very dry and a bit stiff - sorry - I certainly could do no better.

I would love the see an explanation of best practices; what each element does - i.e. currently in Wappler, if placing an element in the body, I am met by a series of pop-up icons to choose from which I know very little what they do, and even if I do know, not sure if they are the correct way of doing things.

I would also love to see commercial, well-known sites deconstructed and rebuilt in Wappler. I would benefit greatly knowing how to plan a database - I currently have no idea!

Webflow has invested heavily in breaking things down. This is where they’ve got things spot on. It removes the ‘grey-science’. It gives equal importance to design and development and avoids patronising its client base. This is crucial, as mentioned previously I have worked in design agencies for 20+ years so I know my stuff - but now want to know more from a non-techy perspective. Roles are merging. As a designer, I would never have bothered to find out or even understood Flexbox. Grids, CSS class naming conventions (BEM), Parallax, the list goes on if I wasn’t lured into the Webflow architecture.

For me, the appeal so far is Wappler’s ability to host freely - anywhere, and the ability to develop client/server-side dynamic sites. So I do truly comprehend the advantages of using Wappler over some other firms.

I will continue to read and follow closely and can’t wait to get my hands dirty.

5 Likes

These are independently developed frameworks and it would be best to read their own docs for clarity on what they are. But I do agree that for a beginner (as I was), an example post of how the integration works - using some classes and components etc would really help connect the framework docs and Wappler.

:joy: But they get the job done.

I don’t see this happening any time soon. I was hoping for the same when I started, but no luck. Weekly major updates make it impossible to document/tutorial everything.
The best option for this is to post your queries here. There are numerous such posts which can help you get started, and if not, make a post and you would get a reply within a day or two.

I haven’t yet come across any well-know application, but you can see a few projects https://community.wappler.io/c/showcase

This is truly great. But where this becomes a hindrance is hosting it out of Webflow & scaling/upgrading it. I still have a few live Webflow websites, and I will be just making them from scratch in Wappler (when time comes) because there’s lots of stuff out of my control and understanding from code point of view.

I would definitely recommend you to get into Wappler. Your decades of experience would help improving the design part. And even if you don’t go with Wappler as your go to tool (very unlikely :slight_smile:), you could learn a little about back-end stuff.

3 Likes

Thanks Nshkrsh - I will be asking plenty of questions :slight_smile:

1 Like

@pachamama, I have been a professional designer for about 20 years or so. In that time, I’ve had to learn how to program and do all this kind of “techy-stuff.” However, the bane of my existence has always been the fact that I don’t code all the time. This leads to me forgetting half of what I learned and this has continuously been a struggle for me. With all of that being said, let me offer some insight, hopefully, in approaching Wappler so that you get the most out of it as you continue to move forward and evolve as a professional designer.

First off, don’t approach Wappler as being “techy.” I would instead think of it as a toolbox that can be as shallow and simple as you need it - and as deep of a rabbit hole in technical sophistication as you need it. This is an important point to remember, because if not, Wappler will indeed seem quite complicated.

Wappler has been developed with a simple philosophy in mind: Give users the tools they need without any extra burden. If you want to design a standard website, it can be done relatively quickly with very minimal knowledge. If your site needs to do more heavy lifting, then that too can often be done with minimum experience.

It helps to think of websites and web applications as entities that are built with modular components.

A website has a header. But this header is really only a div tag that has some pretty straight-forward attributes. It might have a background colour, some padding, margins, and some other basic formatting. You have already messed with all of this in Webflow - pretty consistently, I imagine.

Inside of this header, we can have our logo - which is generally an image or text - and we’ll also have our navigation bar. So, a nav link in Webflow, Wappler, Wordpress, or in code, just has some of the same attributes as the header: We can set the background colour, link colour, padding, margins, hover effects, and so forth.

In Wappler, when we want to place content on the page, we can add a container. This is just a div tag - no different than Webflow’s - that has a class called “container.” This sets some formatting for you out the gate. Inside of this, we’ll put a row (another div tag), and inside of that, we can place columns (more div tags). Anyone of which we can add, change, or remove any of the attributes we’ve already talked about.

The thing is, Webflow has this setup also. The only difference is that in Webflow you have Container -> Columns. In Wappler (and Bootstrap), there is the added addition of the row (Container -> Row -> Columns). And this is better because it allows you to keep multiple rows of columns inside the same container. It is just an extra div tag for better formatting. And all of these are only div tags inside Wappler or Webflow. They just are pre-formatted with a class.

Now, inside of one of our columns, we want to add a heading and a paragraph. We can add all the same attributes we already know. In the other column, we want to place an image, and you guessed it -> We already know the attributes we’re likely to use.

When you approach a website this way, you realize that techy is really just a word that applies to things when you’re looking at them from a 30,000-foot view. But, when you get down it - websites are made up of components and attributes that we use 95% of the time. And from that view, it isn’t scary at all. It’s pretty easy to understand.

That’s not to say that there won’t be times you struggle with how to do something in Wappler (or Webflow). My recommendation is to keep a notebook handy for these times and write down what you did, and how you solved it. I use OneNote for this type of stuff. It makes it infinitely easier to do things the next time.

When it comes to terminology, don’t let that fool you either. Broken down, the language in this stuff is pretty simple to understand. It just helps to categorize various tasks you might do. Here are some examples:

Server-Side means back-end. Webflow’s CMS stuff is all back-end. All this means is that these are things the server will do. Back-End usually consists of three parts: a server, an application, and a database. In short, think of the application as being the code that communicates the database information to the browser.

When you are in Webflow creating CMS items, these are really just database entries. A Collection in Webflow is a database table. A Collection Field is a database field. See, you already know all of this!

In Wappler, you can do all the same things and just as quickly. The only difference is that you have more control and more flexibility.

In Wappler, there are a few more steps, but this is due to added flexibility, power, and control you have over the data. Webflow’s CMS is exceptionally rigid in that it doesn’t allow you to create anything beyond the scope of their narrow framework. But, believe it or not, I can build much faster in Wappler than I can in Webflow, and this is because it is straightforward to use once you get the hang of it.

App-Connect in Wappler just means front-end. Think of front-end as HTML, CSS, and Javascript, for example. Front-end is just things that are processed by the browser. So when you add App-Connect to a page, you are really just saying, I either want the browser to communicate with the database, with a JSON file, or I want it to do something that the browser can process.

Back to my thinking of things modularly. In programming and coding, the same can really be said.

In CSS, you have Classes and IDs. Webflow uses classes, and you are already familiar with them. Both of these store rules on how to format an item or to format many things at once.

For instance, if I want an image to have round corners, I can do that in CSS and store it in a class or ID. You already do this in Webflow. When you format anything, it is stored in the class you created which can be found in the site’s CSS files.

Programming really isn’t that much more complicated. Luckily, you won’t have to worry about programming too much. Wappler is meant to eliminate the need to program.

But more importantly is this simple truth: 95% of the things you’ll want to do on a website are just simple methods you use everywhere else. Showing a series of homes for sale is really no different than showing users that are logged into a site. Inserting products into a database is really no different than adding new blog posts. 95% of dynamic websites are just the same thing done with different options.

The great news is that this 95% of stuff is pretty easy to understand. And right now it seems overwhelming. But we have seen people that have never touched a website in their life end up creating some really elaborate sites recently. And trust me - if they can do it then so can you.

But, the question is how do you learn this simple stuff without having to brute-force your way through it? Well, there is quite a bit of documentation available. That is a start. I’ve been meaning to make some tutorials that are geared more towards designers that help ease them in easier and explain all of this stuff while actually working on something simple. And hopefully, I’ll be able to get to that soon.

The thing you need to remember though is this: We are all here to help you. We want to help you, and we are rooting for you as you start this journey. It isn’t as complicated as it seems and I really look forward to seeing what you’ll be creating with Wappler in the future.

Good luck!

8 Likes

I am very thankful for such an informative and encouraging post. You have inspired me no-end to get stuck in. I sincerely appreciate it. Best / Pachamama

2 Likes

13 posts were split to a new topic: Wappler UI improvements

I purchased a pro susbscription somewhere in November 2018. However, I still have not been able to understand Wappler fully. I learnt DW with just ebooks and Videos from Lynda.com and built several sites with it until Adobe started messing with it. My problem with Wappler is documentation and lack of adequate video tutorials. I am wondering why Wappler has not engaged Lynda.com ( now owned by linkedin) or other known video tutorial makers to make excellent video tutorials. I feel this is the only way newbees starting out with dynamic sites can easily get used to such a great product.

Second problem is a lack of detailed information on what all the inbuilt components do. Assume I am a newbee and want to build a simple Leave Management Application. How do I know which server action, component, extension to use for what. I know it is not Wapplers Job to now teach people the exact steps needed to create something but I think it is important we get a some info about the various extensions. Eg: DMXzone Database Connector - This Extension connects your applications to a database and … To use it, you need your pages to be saved with a .php, asp etc. It could be a tool tip that comes up when I hover over the extension. I believe this will ease the current learning curve. I was going to post this differently but saw this post thought it fits well with this thread

3 Likes

Hello @enyonam,
Have you at least gone trough the basics, getting started, how to docs at https://docs.wappler.io/ ?

Not to mention the categories related to Server Side stuff with tutorials named “Connecting To a Dabase” … “Inserting Database Records” etc.?

There is no way for us to cover every single user case out there in a separate tutorial like: “Leave Management Application” or “Restaurant Reservation System” as all of these cases have different requirements but all of them are using the same tasks:

  • Inserting database records
  • Deleting database records
  • Filtering database records

And all of these standard tasks are already pretty well explained in the docs link i provided above. It’s worth taking a look :slight_smile:

1 Like

I had this issue when I started, still have it, and will probably have in the near future.
I started around the same time as you did. Best solution, just ask.
If you follow the community, you can see I posted a question today itself, learned about another component & used it for the first time.
And the docs have grown a lot since I joined. So many new things are now covered. @Teodor takes the pain of creating tutorial for major new updates. :slight_smile:

1 Like

Hi @Teodor thanks for the quick reply. I just used the Leave management as an example. I wasn’t saying there should be tutorials for all or any specific application. The point I was trying to make is to have very detailed information about the various extensions. Think of it this way; to understand and speak a language, you must first know the words of the language and understand in which context to use them. Extensions are the words Wappler uses. To understand how to use them, what they mean, I must get information about them.

2 Likes

I understand what you mean and we are working hard on extending the documentation every week.

Just a tip which could make your life easier - maybe just try asking the other way: “How do i insert_task_here” which would be more helpful in your case.

For example:
“How do i send form data to email” -> https://docs.wappler.io/t/sending-form-data-to-email/2858
“How to create a navbar” -> https://docs.wappler.io/t/creating-a-navbar/2904

Hope this will help you to get started.

1 Like

Just a quick note of affirmation. I am in a similar situation. I was scared off by the current state of Wappler (my fault, just couldn’t get my head around it.) But I am excitedly keeping my eye on it. I know the no-code market is about to be a big deal. I’m currently using Bubble.is and leveraging WordPress past it’s breaking point and would gladly jump onto what Wappler appears that it is going to be.

8 Likes