Hey there,
How've you been?
New in WeWeb:
Let's dig in.
Your WeWeb apps are now Single Page Applications.
Here's a great article by Nolan Lawson about the difference between Single Page Applications and Multiple Page Applications if you'd like to learn more on the topic.
There are a two main benefits that drove our own move to SPAs.
Now, when a user visits a page on your web app, we only load information that is new on the page.
What does that mean?
It means that if you have two pages with the same navigation menu, i.e. a linked section in the WeWeb editor, then, when a user navigates between these two pages, that navigation menu is only loaded once.
The existing HTML, CSS, and JS from the previous page will not be loaded a second time.
Linked sections are not reloaded.
As a reminder, linked sections are recognizable by the link icon in the Navigator:
When you drag and drop an existing section onto another page, you need to "Create an instance" of that section:
When you create a new instance of a section, all the changes you make in one instance will be reflected in the other.
If you create a copy of a section, the two sections will not be linked. As a result, the changes you make in one section will not be reflected in the copy.
The second reason we decided to move to SPAs is because Single Page Applications also provide a better user experience to the end-user.
Since linked sections are not reloaded when a user navigates between pages, the interactions that took place in those linked sections are known to the browser.
For example, in our user doc, when you navigate to an article from our side navigation, the side navigation remains open now, and we were able to style the active link in the menu.
Wait a second to change page every time:
Instant loading, smooth navigation:
Another example of improved performance and improved user experience: let's say you have a job board where the user can navigate between all the jobs, the ones they saved and their applications:
You can now have 3 pages – "All jobs", "Saved jobs", and "Applications" – with 1 linked section for the navigation between tabs.
Improved UX: only the content below the tabs changes when the user navigates between pages, leading to a faster, smoother experience.
Improved performance: you now load less elements on the initial page load, only loading new information when the user navigates to another page.
When the user goes to the "Applications" tab for example, you only load the "Applications" Collection.
Before, you would have had to choose between:
🔮 In the future 🔮
In the future, the move to SPAs will also allow us to add parameters in the URL without using query strings.
Users can now download your WeWeb app on their phones.
How?
First, you'll need to add the Progressive Web Application (PWA) info to your project settings and re-publish the project:
Then, users who navigate to your web-app on a mobile browser will be able to download a PWA to their phone. Yes, this means you can download the WeWeb User Docs to your phone 😎
How to they do this depends on their phone and browser.
When they open the app using that shortcut, it will be a mobile experience, not a browser-based experience.
🔮 In the future 🔮
In the future, you will be able to add a button on your web app to invite users to download the mobile app to their phone.
You will also be able to:
You can now add Stripe to your WeWeb project without reverting to custom code:
Once you have added the Stripe Extension, you will be invited to set it up with your production API keys:
If you want to work with test data in Stripe, you can also add test API keys. Better be safe than sorry! 😅
Once you have set up the Extension, two new Stripe Actions will be available in Workflows:
We invite you to go through Stripe's extensive documentation to learn more about:
Ok then, last week we also released a couple of long-awaited elements we think you'll enjoy 🙂
First, the Kanban element.
When you drag-and-drop the Kanban Element on the Canvas, you will be asked if you want to import Variables:
Should you?
Well, it depends if you'd like to see the Kanban with fake data to help you understand how it works 🙂
If you don't, then you can disable the option.
If you do, the Kanban will include 3 mock data Variables:
The "isDragging" Component Variable will be created regardless because it is required to drag-and-drop cards between columns.
Once you have the Kanban on the page, you'll probably want to display and sort data in the Kanban.
Step 1: bind the Kanban element to a list of items
If you chose the include Variables options when you added the Element, you can look at the data that is bound in the Variables:
In the example below, we bound the items to one of our Collections:
Step 2: Explain which field in the list of items corresponds to the columns in your Kanban
In the example below, our items are "Stacked by" the public status defined in the "Public Statusx" column of our database:
Step 3: Map the Stack Values to the Values in the Database
In the example below, the values in our database are:
But on the page, we want to display the tickets that are under review as "Backlog" so the "Under Review" value is given the "Backlog" label:
To recap:
You can enable the option to display uncategorized cards with the "Uncategorized stack" property.
Notice that when you enable the "Uncategorized stack" property, there is an "Add card" button.
Learn more about how users can create new records and update existing ones when a card is moved in the Kanban.
Next up, the Data Grid
The Data Grid Element is basically a supercharged Table Element.
You can still use the Table Element.
But you probably won't want to ^^
Why?
Because the Data Grid makes it faster to display data and setup a CRUD.
Same as with the Kanban Element, when you drag-and-drop the Data Grid Element on the Canvas, you will be asked if you want to import Variables:
You don't have to but, if you do, the Element will come with a ready-made Variable that contains fake data:
We did this to help you understand what kind of data the Element expects – in this case, a list of items – and how it works.
The new "Number" element in the toolkit allows you to:
Finally, let's look at some improvements we made to existing features and elements.
Most of the other improvements we made were designed to save you time and/or improve the performance of your web apps.
We did quite a few things to improve performance in the past few weeks.
🚀 First, we optimized how Collections are loaded in the Editor. This won't impact your published app but will greatly improve your developer experience while building in WeWeb 🙂
BEFORE
All the Collections were loaded in the Editor, even if they weren't used in the page.
All the Collections were loaded every time you went into Preview mode as well.
This slowed you down while you were building, especially when it meant hitting API limits when using Xano or Airtable on a free plan for example.
NOW
We only load the Collections that are used on the page and that have the "Fetch this collection automatically" setting enabled.
Let's talk more about this setting.
🚀 We added the option to optimize how you want to load your Collections in the Live Project.
By default, when you add a Collection, it will be fetched automatically on the pages that use that Collection in the Live Project.
However, you can disable the setting to gain full control over when your Collection is loaded:
When you disable the "Fetch this collection automatically" setting, you will need to use the "Fetch collection" Action in a Workflow to load the Collection.
For example, if you use a Collection in a Popup element, you can add a "Fetch collection" Action to the Workflow that is triggered to display the Popup.
In addition to the new Datagrid Element that makes it much easier to setup a CRUD, you can now select which fields you want to update in your database.
BEFORE
You had to send data for every field of the record. If you didn't bind the data of one field, it would be updated as empty in your database.
This meant:
1- you would waste time sending data you already had in your database, and
2- if you forgot, you could delete existing data by accident.
Sorry 😬
NOW
🚀 You can choose which fields you want to update.
In the example below, the car name always remains the same. We only want to update the rental location name and mileage of the selected car:
This update is available for the Airtable, Xano, and Supabase data source plugins.
We've added two cool new settings to add even spacing between rows and columns when using Flexbox Containers.
BEFORE
Spend time checking and tweaking your margins and paddings on individual elements.
NOW
Use the Flexbox gap settings to create uniform space between Elements:
When you save an Element to the Design System, it is now possible to attach Workflows, Variables, and Custom Formulas to the Element:
Next time you need an Element with similar Workflows and or Formulas, you won't have to start from scratch.
You can now view where a Variable is used in the project:
Want to delete a Variable?
Make sure it's not being used anywhere first 😅
In the Project settings, you now have the option to unpublish a project:
This is especially helpful if you're working on several projects but are not ready to upgrade to a higher price plan yet 😉
You now have the information of the Environment you're in – Editor, Preview, or Live Project:
This means you can potentially link to a different API endpoint depending on the environment you're in to test things separately in Editor or Preview mode.
Alright! Let's leave it at that for now.
You may have noticed the Supabase data source plugin is also available. Feel free to play around with it, it is functional.
Just waiting for the Supabase authentication plugin to be released to show you how it works 🙂
Have a great week!
We'll be back very soon with more exciting announcements.
Sign up now, pay when you're ready to publish.
