November 1, 2018
  • All
  • Engineering
  • Product
  • Framework
  • Ionic
  • Open Source
  • release

Ionic Release: v4 Beta 15 – Out Today!

Mike Hartington

Director of Developer Relation...

Hey there, friends! We’re back at it again with a new beta release of Ionic 4, Beta 15. This release includes several new changes that we thought would be great to talk about, so let’s jump right into it!

CSS Variables Stability

CSS Variables are at the core of design in Ionic 4. We can think of them as the standardized “public API” that developers use to customize Ionic’s components. With this in mind, we’re happy to share that we’ve stabilized the CSS Variable API across the Framework. Now that that’s finished, we will be working on improving our documentation to include more information on how Ionic components can be customized.

We recently added a new theming section in the docs to give folks a primer on CSS variables as well as a new blog post (expect that soon 🎉).

Material Design Refresh

Material Design is a visual design guide that outlines the standards that apps should follow. Every now and then the guide updates the standards to improve the user experience. In this release, we have begun upgrading our Material Design components to better adhere to the latest guidelines.

buttons

The design changes we are implementing are not drastic, but they provide a native-like experience when they match the specification. This way, your users will always feel at home on whatever platform Ionic is running. While this release does not include a refresh for every Ionic component, we’re working hard to update the rest for future releases.

Rethinking Tabs

One of the most valuable and complex components in Ionic’s toolkit is Tabs. Tabs started off as a simple component that would create a tabbed interface to allow users to switch between different views in a way that was consistent with native UX paradigms.

Over time, we started hearing people ask for more features to be added: “Can we have one tab button that is just a button?” “Can I customize how the tab buttons are displayed?” “Can I use a custom icon in the tab?”

Traditionally, these features, and many others, were difficult to accomplish because Tabs was doing a lot of magic behind the scenes to generate the Tab bar and buttons. With this in mind, we thought it was time for a refresh to offer as much flexibility as possible within Tabs.

In order to do this, we had to change how Tabs were written in an app. Prior to Beta 15, Tabs would look like this:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Here, we have an ion-tab element that accepts an icon, a label, and a link to navigate to as properties. This is pretty much how Tabs have worked all the way back to Ionic 1. In Beta 15, we’ve removed some of the magic from Tabs which allows for more customization:

<ion-tabs>
  <ion-tab tab=”home-view”>
    <ion-content></ion-content>
    <!-- or -->
    <ion-nav></ion-nav>
    <!-- or -->
    <ion-router-outlet></ion-router-outlet>
  </ion-tab>
  <ion-tab-bar slot="bottom">
    <!-- No ion-tab, just a link that looks like a tab -->
    <ion-tab-button href=”https://beta.ionicframework.com”>
      <!-- <a href=”https://beta.ionicframework.com”> -->
      <ion-icon name="globe"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <!-- No ion-tab, just a button that looks like a tab -->
    <ion-tab-button (click)=”openCamera()”>
      <ion-icon name="camera"></ion-icon>
      <ion-label>Photo</ion-label>
    </ion-tab-button>

    <!-- Connected to ion-tab, on click will show the ion-tab with id home-view -->
    <ion-tab-button tab=”home-view”>
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
 </ion-tabs> 

There’s a lot going on here, so let’s break it down:

  1. A single parent ion-tabs wraps the entire layout. Same as before.
  2. A new element, ion-tab-bar, creates the Tab Bar which will contain buttons.
  3. A new element, ion-tab-button, is used to create each button in the Tab Bar. These could be static links to different routes, buttons with click handlers on them, or link to whole tab views.
  4. The ion-tab component becomes a separate container that has inline content (ion-content), a navigation component (ion-nav) or a router outlet (ion-router-outlet).To connect the ion-tab-button to the ion-tab, the tab property must be added to both of these components. For example:
<ion-tabs>
  <ion-tab-bar>
    <ion-tab-button tab=”home-view”></ion-tab-button>
  </ion-tab-bar>

  <ion-tab tab=”home-view”></ion-tab>
</ion-tabs>

Since the tab property is the same on the ion-tab-button and ion-tab, when the Tab Button is tapped, the home-view Tab will become active. This takes the magic out of Tabs while making the behavior between the tab buttons and the views much more explicit.

Some other benefits of this refactor include:

  • Can now be written as a standalone Tab Bar (with no attached Tab)
  • Works with a navigation component or a plain content element
  • Works with shadow DOM and allows easy customization of the Tab Bar
  • Gives full control over the elements inside of the Tab Bar
  • Integrates nicely with other frameworks that have different ways of rendering element nodes

With these change, we can now fully customize each tab button, creating the most advanced (and arguably the best) tab layout ever:

Thats a solid 13/10. Heckin’ good tabs.

Lastly, this change also fixes some outstanding issues with Tabs, so we’re excited to get this out to you all!

Screenshot Testing Tool

Building and maintaining a large UI library used by many developers isn’t an easy task, and even the simplest change can have drastic effects. Recently, our core team started to use a new tool that we built ourselves (we call it Screenshot) to help solve this problem, and to have the confidence in any and all CSS and JS changes.

With the introduction of Stencil using Puppeteer, we were able to build out a robust system specifically for team development.

Here’s how it works. On every pull request (PR), a bot is able to automatically take screenshots of each of our end-to-end tests and compare it to the master version. Before merging any PR, our team is asked to approve or deny the changes, so we’re always confident that our thousands of scenarios are passing. The Screenshot homepage always shows the latest master tests, and each PR provides links to specific commit comparisons: b2f493f/00544e9.

To the Next Beta (or RC?)…. and Beyond!

As we’ve progressed through each beta, we’ve gotten a clearer idea of where we want the framework to be by final. I’m happy to say that we’re super close to that, and you can expect it to be just around the corner. Happy hacking, y’all! 🤙🏻

-Mike, and the Ionic Team

Beta 15 Changelog
Beta Documentation
API Documentation
Theming Documentation
Tabs API Design


Mike Hartington

Director of Developer Relation...