August 1, 2022

8base Product Release: App Builder | July 2022

8base
@8base

Hey everyone!

Most of these emails start by telling you how it's "only a 2-minute read" or "your 30-second vacation." That's not the case here; this July release announcement is a novella.

So, go ahead and order coffee, clear your morning schedule, ask your neighbor to pick the kids up from school later, and tell Mom that you may not be able to make it to Christmas this year.

In the following volumes, we'll lay out all of the newest features and capabilities of App Builder for you. So whether you're an experienced App Builder beta user or just getting started, there's something here for you.

Watch a walkthrough of these updates and then see App Builder in action.

____________________________________________________________________________________________________

App Builder New and Enhanced Features

Routing

We are stoked to inform you that programmatic navigation is now available in App Builder. This means you can programmatically trigger navigation to any page in your app and inject code at different points in the navigation life cycle. Some essential new concepts here include:

  • Router Hooks. We’ve added custom code or requests at different points in a routing event, like "beforeEnter."
  • Programmatic Navigations. A method called “navigate()” is now available on the global router object. It accepts URLs to let developers control app navigation.

State Management

We've updated State Management to make it easier and more intuitive and include…

  • Custom State Entries. The ability to add custom state entries! This is helpful when you want to store and manage data in the front-end that's not directly tied/managed by an element (i.e., Components, Requests).
  • Across the App Access. Global and local states are now available (within their scope) across the app. This means that Components and other elements can easily reference and access state values.
  • Local State Enforcement. Local state elements belong to the page where they were created and can only get referenced from within the scope of that page.

Pages & Layouts

So if you'd been playing in beta, you couldn't create custom Layouts... Well, the dog days are over! You can now create your custom Layouts and use them across your app. We've added...

  • Default Pages. Just in case you need them, we've thrown in some default pages for things like Not Found and Errors. Feel free to customize them as needed.
  • Pages Meta. Pages aren't only visual. You can also add metadata to them now! This is helpful for things like page permissions when used with Router hooks. For example, think `pageMeta.adminOnly = true`.

Components

Components are the foundational UI building blocks of your app. That's why we're constantly improving them. Some epic updates here include:

  • Code Blocks on Inputs. Most Component attributes (properties, styles, events) can now be toggled to expose a code block. This allows you to write JavaScript code that determines the passed value instead of a static value.
  • Properties Standardized on Components. We'd been missing some essential properties and attributes on components. Things like class names, IDs, and more. They're now there...that's it.

Themes

App Builder Themes are made up of all the styling defaults and assets you can use to configure the look and feel of your app. Some fantastic improvements in this area include:

  • Global Theme. Developers can customize a global theme based on Material Design, including the color scheme and typography styling.
  • Component Default Style. We've added custom CSS editors for overriding the Theme configuration for specific component types. This allows you to easily manage the default look of a Component when it's first dropped onto the Page Canvas.
  • Font Management. The new font management system allows you to upload and use custom fonts in your app. You can also specify which font you want to use from Google Fonts!

Responsive Support

Responsive design support in App Builder is all about making sure your app looks great and works well on different screen sizes. We've made some significant improvements here, including…

  • Media Queries Management. You can now manage media queries directly in App Builder! You can easily add, edit, and delete breakpoints as needed and then write custom styling rules using CSS.
  • Improved Viewport. You preview how your app will look on different screen sizes using viewport lets. We've made some improvements to make it more accurate and useful, like allowing you to select from predefined sizes or drag the Page Canvas to a custom width.

Deployment

What good is a web app if no one can see it? We've made some improvements in the deployment process to make it more powerful!

  • Deployment Progress. There are no more secrets when it comes to deployment. The server logs are streamed to you as deployment is happening!
  • Custom Domains. Own a domain that you love? The Editor has clear instructions for mapping it to your deployed app.
  • SSL. Go ahead and upload an SSL Certificate to App Builder when securing your custom domain mapping!
  • CDN. You don't have to use a CDN, but if you want to, WE GOT YOU. Just enable it in your app's deployment settings, and we'll handle the rest.

Conclusion

So that's it for our July App Builder Release! Maybe it wasn't as long as we exaggerated, but we hope it was worth the read! We hope you enjoy all the new features and capabilities.

Stay tuned for more announcements soon! In the meantime, check out the App Builder docs to learn more; and as always, please feel free to reach out to us with any questions or feedback.

Happy Building 🚀

The 8base Team

Register for App Builder Beta
Video: Walkthrough of App Builder July Release
Video: App Builder in Action
Check out the App Builder Docs

Ready to try 8base?

We're excited about helping you achieve amazing results.